pakin/Taobin-Recipe-Manager
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update pagination

Browse source
This commit is contained in:
Kenta420-Poom 2023-09-25 15:29:42 +07:00
parent 3f399dda0e
commit 51642983c6
15 changed files with 1049 additions and 240 deletions
Download patch file Download diff file Expand all files Collapse all files

108
client/src/app/core/layout/layout.component.html
View file

@ -9,7 +9,6 @@
type="button"
class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg sm:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200"
>
<span class="sr-only">Open sidebar</span>
<svg
class="w-6 h-6"
aria-hidden="true"
@ -52,63 +51,66 @@
{{ user?.name }}
</span>
</div>
<button
type="button"
class="flex text-sm bg-gray-800 rounded-full focus:ring-4 focus:ring-gray-300 max-sm:hidden"
aria-expanded="false"
data-dropdown-toggle="dropdown-user"
>
<span class="sr-only">Open user menu</span>
<img
class="sm:h-10 md:h-14 rounded-full cursor-pointer"
src="{{ user?.picture }}"
loading="lazy"
alt="profile picture"
/>
</button>
<div class="dropdown dropdown-bottom dropdown-end">
<label
tabindex="0"
class="btn btn-circle w-14 h-14 focus:ring ring-primary ring-offset-base-100 ring-offset-2 max-sm:hidden"
>
<div class="avatar">
<div class="rounded-full">
<img src="{{ user?.picture }}" alt="profile picture" />
</div>
</div>
</label>
<div
tabindex="0"
class="dropdown-content z-[-1] menu p-2 shadow bg-base-100 rounded-box w-52 divide-y divide-gray-100"
>
<div class="px-4 py-3" role="none">
<p class="text-sm text-gray-900" role="none">
{{ user?.name }}
</p>
<p
class="text-sm font-medium text-gray-900 truncate"
role="none"
>
{{ user?.email }}
</p>
</div>
<ul class="py-1" role="none">
<li>
<a
routerLink="/dashboard"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
role="menuitem"
>
Dashboard</a
>
</li>
<li>
<a
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
role="menuitem"
>Settings</a
>
</li>
<li>
<a
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
role="menuitem"
(click)="logout()"
>Sign out</a
>
</li>
</ul>
</div>
</div>
</div>
<div
class="z-50 hidden my-4 text-base list-none bg-primary divide-y divide-gray-100 rounded shadow"
id="dropdown-user"
>
<div class="px-4 py-3" role="none">
<p class="text-sm text-gray-900" role="none">
{{ user?.name }}
</p>
<p class="text-sm font-medium text-gray-900 truncate" role="none">
{{ user?.email }}
</p>
</div>
<ul class="py-1" role="none">
<li>
<a
routerLink="/dashboard"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
role="menuitem"
>
Dashboard</a
>
</li>
<li>
<a
href="#"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
role="menuitem"
>Settings</a
>
</li>
<li>
<a
routerLink="#"
class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
role="menuitem"
(click)="logout()"
>Sign out</a
>
</li>
</ul>
</div>
></div>
</div>
</div>
</div>

3
client/src/app/core/layout/layout.component.ts
View file

@ -4,7 +4,6 @@ import { DatePipe, NgFor, NgIf } from '@angular/common';
import { GoogleButtonComponent } from 'src/app/shared/googleButton/googleButton.component';
import { UserService } from '../services/user.service';
import { User } from '../models/user.model';
import { initFlowbite } from 'flowbite';
import { Subject, takeUntil } from 'rxjs';
interface MenuItem {
@ -40,8 +39,6 @@ export class LayoutComponent implements OnInit {
constructor(private _userService: UserService) {}
ngOnInit(): void {
initFlowbite();
this._userService.currentUser
.pipe(takeUntil(this.exit$))
.subscribe((user) => (this.user = user));

19
client/src/app/core/services/recipe.service.ts
View file

@ -4,12 +4,27 @@ import { BehaviorSubject, Observable, distinctUntilChanged } from 'rxjs';
import { Recipe } from '../models/recipe.model';
import { environment } from 'src/environments/environment';
interface Pagination {
offset: number;
take: number;
}
@Injectable({ providedIn: 'root' })
export class RecipeService {
constructor(private _httpClient: HttpClient) {}
getRecipes(): Observable<Recipe> {
return this._httpClient.get<Recipe>(environment.api + '/recipes', {
getRecipes(paginate: Pagination = { take: 10, offset: 0 }): Observable<{
recipes: Recipe;
hasMore: boolean;
}> {
return this._httpClient.get<{
recipes: Recipe;
hasMore: boolean;
}>(environment.api + '/recipes', {
params: {
offset: String(paginate.offset),
take: String(paginate.take),
},
withCredentials: true,
});
}