update pagination
This commit is contained in:
Kenta420-Poom
parent
3f399dda0e
commit
51642983c6
15 changed files with 1049 additions and 240 deletions
|
|
@ -1,49 +1,72 @@
|
|||
<main class="relative overflow-auto max-h-[700px] shadow-md sm:rounded-lg">
|
||||
<table
|
||||
*ngIf="isLoaded; else loadingIndicator"
|
||||
class="w-full table-auto text-sm text-left text-gray-500"
|
||||
>
|
||||
<caption
|
||||
class="p-5 text-lg font-semibold text-left text-gray-900 bg-primary"
|
||||
>
|
||||
<div class="flex flex-row">
|
||||
<div class="flex flex-col">
|
||||
<span
|
||||
>Recipe Version {{ recipes?.MachineSetting?.configNumber }} |
|
||||
{{"{{File name}}"}}</span
|
||||
>
|
||||
<main
|
||||
class="relative overflow-auto max-h-[700px] shadow-md sm:rounded-lg"
|
||||
#table
|
||||
>
|
||||
<table *ngIf="isLoaded" class="table">
|
||||
<caption class="p-5 text-lg font-semibold text-left text-gray-900">
|
||||
<div class="divide-y divide-solid divide-gray-400">
|
||||
<div class="flex flex-row py-3">
|
||||
<div class="flex flex-col">
|
||||
<span
|
||||
>Recipe Version {{ recipes?.MachineSetting?.configNumber }} |
|
||||
{{"{{File name}}"}}</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex flex-col ml-auto">
|
||||
<span class=""
|
||||
>Last Updated:
|
||||
{{ recipes?.Timestamp | date : "dd-MMM-yyyy hh:mm:ss" }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col ml-auto">
|
||||
<span class=""
|
||||
>Last Updated:
|
||||
{{ recipes?.Timestamp | date : "dd-MMM-yyyy hh:mm:ss" }}</span
|
||||
>
|
||||
<div class="flex flex-col">
|
||||
<div class="relativ sm:rounded-lg">
|
||||
<div
|
||||
class="flex flex-col items-center justify-between p-4 space-y-3 md:flex-row md:space-y-0 md:space-x-4"
|
||||
>
|
||||
<div class="join">
|
||||
<input
|
||||
class="input input-bordered join-item w-[300px]"
|
||||
placeholder="Product Code, Name or Other Name"
|
||||
/>
|
||||
<button class="btn join-item">Search</button>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button class="btn rounded-lg">View JSON</button>
|
||||
<button class="btn rounded-lg">
|
||||
<svg
|
||||
class="w-6 h-6 text-gray-800 dark:text-white"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 18 20"
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1"
|
||||
d="M15 6V2a.97.97 0 0 0-.933-1H5.828a2 2 0 0 0-1.414.586L1.586 4.414A2 2 0 0 0 1 5.828V18a.969.969 0 0 0 .933 1H14a1 1 0 0 0 1-1M6 1v4a1 1 0 0 1-1 1H1m6 6h9m-1.939-2.768L16.828 12l-2.767 2.768"
|
||||
/>
|
||||
</svg>
|
||||
Export
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</caption>
|
||||
<thead class="text-xs sticky top-0 text-gray-700 uppercase bg-secondary">
|
||||
<tr>
|
||||
<th scope="col" class="px-6 py-3" *ngFor="let head of tableHeads">
|
||||
<th>
|
||||
<label>
|
||||
<input type="checkbox" class="checkbox" />
|
||||
</label>
|
||||
</th>
|
||||
<th scope="col" class="px-6 py-3" *ngFor="let header of tableHeads">
|
||||
<div class="flex items-center uppercase">
|
||||
{{ head }}
|
||||
<a href="#"
|
||||
><svg
|
||||
class="w-3 h-3 ml-1.5"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M8.574 11.024h6.852a2.075 2.075 0 0 0 1.847-1.086 1.9 1.9 0 0 0-.11-1.986L13.736 2.9a2.122 2.122 0 0 0-3.472 0L6.837 7.952a1.9 1.9 0 0 0-.11 1.986 2.074 2.074 0 0 0 1.847 1.086Zm6.852 1.952H8.574a2.072 2.072 0 0 0-1.847 1.087 1.9 1.9 0 0 0 .11 1.985l3.426 5.05a2.123 2.123 0 0 0 3.472 0l3.427-5.05a1.9 1.9 0 0 0 .11-1.985 2.074 2.074 0 0 0-1.846-1.087Z"
|
||||
/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</th>
|
||||
<th scope="col" class="flex items-center py-3">
|
||||
<div class="flex items-center text-center uppercase">
|
||||
Actions
|
||||
{{ header }}
|
||||
<a href="#"
|
||||
><svg
|
||||
class="w-3 h-3 ml-1.5"
|
||||
|
|
@ -59,52 +82,65 @@
|
|||
</a>
|
||||
</div>
|
||||
</th>
|
||||
<th scope="col" class="px-6 py-3"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr
|
||||
*ngFor="let recipe of recipes!.Recipe01"
|
||||
*ngFor="let recipe of recipes01"
|
||||
class="bg-white la border-b hover:bg-secondary"
|
||||
>
|
||||
<th
|
||||
<th>
|
||||
<label>
|
||||
<input type="checkbox" class="checkbox" />
|
||||
</label>
|
||||
</th>
|
||||
<td
|
||||
scope="row"
|
||||
class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap"
|
||||
>
|
||||
{{ recipe.productCode }}
|
||||
</td>
|
||||
<td
|
||||
class="px-6 max-w-fit py-4 font-medium text-gray-900 whitespace-nowrap"
|
||||
>
|
||||
{{ recipe.name }}
|
||||
</th>
|
||||
</td>
|
||||
<td class="px-6 py-4">{{ recipe.otherName }}</td>
|
||||
<td class="px-6 py-4 flex-wrap max-w-xs">{{ recipe.Description }}</td>
|
||||
<td class="px-6 py-4">
|
||||
{{ recipe.LastChange | date : "dd-MMM-yyyy hh:mm:ss" }}
|
||||
</td>
|
||||
<td class="px-6 py-4 flex gap-2">
|
||||
<a
|
||||
href="#"
|
||||
class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
|
||||
>Edit</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
|
||||
>Edit</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="font-medium text-blue-600 dark:text-blue-500 hover:underline"
|
||||
>Edit</a
|
||||
>
|
||||
<td class="px-4 py-4 flex">
|
||||
<div class="cursor-pointer">
|
||||
<svg
|
||||
class="w-6 h-6 text-gray-800 dark:text-white"
|
||||
aria-hidden="true"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1"
|
||||
d="M7.75 4H19M7.75 4a2.25 2.25 0 0 1-4.5 0m4.5 0a2.25 2.25 0 0 0-4.5 0M1 4h2.25m13.5 6H19m-2.25 0a2.25 2.25 0 0 1-4.5 0m4.5 0a2.25 2.25 0 0 0-4.5 0M1 10h11.25m-4.5 6H19M7.75 16a2.25 2.25 0 0 1-4.5 0m4.5 0a2.25 2.25 0 0 0-4.5 0M1 16h2.25"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<ng-template #loadingIndicator>
|
||||
<div *ngIf="!isLoaded">
|
||||
<div
|
||||
class="flex w-full items-center justify-center h-56 border border-gray-200 rounded-lg bg-gray-50"
|
||||
>
|
||||
<div role="status">
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="w-8 h-8 mr-2 text-gray-200 animate-spin fill-blue-600"
|
||||
class="w-8 h-8 mr-2 text-gray-200 animate-spin fill-amber-600"
|
||||
viewBox="0 0 100 101"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
@ -120,67 +156,5 @@
|
|||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</ng-template>
|
||||
</div>
|
||||
</main>
|
||||
<nav
|
||||
class="flex items-center justify-between pt-4"
|
||||
aria-label="Table navigation"
|
||||
>
|
||||
<span class="text-sm font-normal text-gray-500 dark:text-gray-400"
|
||||
>Showing
|
||||
<span class="font-semibold text-gray-900 dark:text-white">1-10</span> of
|
||||
<span class="font-semibold text-gray-900 dark:text-white">1000</span></span
|
||||
>
|
||||
<ul class="inline-flex -space-x-px text-sm h-8">
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="flex items-center justify-center px-3 h-8 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
|
||||
>Previous</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
|
||||
>1</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
|
||||
>2</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
aria-current="page"
|
||||
class="flex items-center justify-center px-3 h-8 text-blue-600 border border-gray-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white"
|
||||
>3</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
|
||||
>4</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
|
||||
>5</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
href="#"
|
||||
class="flex items-center justify-center px-3 h-8 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
|
||||
>Next</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,19 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import {
|
||||
AfterContentChecked,
|
||||
AfterRenderRef,
|
||||
AfterViewChecked,
|
||||
AfterViewInit,
|
||||
Component,
|
||||
ElementRef,
|
||||
OnInit,
|
||||
ViewChild,
|
||||
} from '@angular/core';
|
||||
import { UserService } from 'src/app/core/services/user.service';
|
||||
import { HttpClient } from '@angular/common/http';
|
||||
import { User } from 'src/app/core/models/user.model';
|
||||
import { DatePipe, NgFor, NgIf } from '@angular/common';
|
||||
import { initFlowbite } from 'flowbite';
|
||||
import { environment } from 'src/environments/environment';
|
||||
import { delay } from 'rxjs';
|
||||
import { Recipe } from 'src/app/core/models/recipe.model';
|
||||
import { Recipe, Recipe01 } from 'src/app/core/models/recipe.model';
|
||||
import { RecipeService } from 'src/app/core/services/recipe.service';
|
||||
import { BehaviorSubject } from 'rxjs';
|
||||
|
||||
@Component({
|
||||
selector: 'app-dashboard',
|
||||
|
|
@ -18,8 +24,59 @@ import { RecipeService } from 'src/app/core/services/recipe.service';
|
|||
export class DashboardComponent implements OnInit {
|
||||
userInfo: User | null = null;
|
||||
recipes: Recipe | null = null;
|
||||
tableHeads: string[] = ['Name', 'Other Name', 'Description', 'Last Updated'];
|
||||
recipes01: Recipe01[] | null = null;
|
||||
|
||||
tableHeads: string[] = [
|
||||
'Product Code',
|
||||
'Name',
|
||||
'Other Name',
|
||||
'Description',
|
||||
'Last Updated',
|
||||
];
|
||||
private offset = 0;
|
||||
private take = 10;
|
||||
|
||||
isLoaded: boolean = false;
|
||||
isLoadMore: boolean = false;
|
||||
isHasMore: boolean = true;
|
||||
|
||||
@ViewChild('table', { static: false }) set content(table: ElementRef) {
|
||||
table.nativeElement.addEventListener(
|
||||
'scroll',
|
||||
() => {
|
||||
if (this.isHasMore === false) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { scrollTop, scrollHeight, clientHeight } = table.nativeElement;
|
||||
const isBottom = scrollTop + clientHeight >= scrollHeight - 10;
|
||||
if (isBottom && !this.isLoadMore) {
|
||||
this.isLoadMore = true;
|
||||
this._recipeService
|
||||
.getRecipes({
|
||||
offset: this.offset,
|
||||
take: this.take,
|
||||
})
|
||||
.subscribe(({ recipes, hasMore }) => {
|
||||
const { Recipe01, ...recipesWithoutRecipe01 } = recipes;
|
||||
if (this.recipes01 && this.isHasMore) {
|
||||
this.recipes01 = [...this.recipes01, ...Recipe01];
|
||||
} else {
|
||||
this.recipes01 = Recipe01;
|
||||
}
|
||||
this.recipes = {
|
||||
...recipesWithoutRecipe01,
|
||||
Recipe01: [],
|
||||
};
|
||||
this.offset += 10;
|
||||
this.isLoadMore = false;
|
||||
this.isHasMore = hasMore;
|
||||
});
|
||||
}
|
||||
},
|
||||
{ passive: true }
|
||||
);
|
||||
}
|
||||
|
||||
constructor(
|
||||
private _userService: UserService,
|
||||
|
|
@ -27,16 +84,29 @@ export class DashboardComponent implements OnInit {
|
|||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
initFlowbite();
|
||||
|
||||
this._userService.currentUser.subscribe((user) => {
|
||||
this.userInfo = user;
|
||||
});
|
||||
|
||||
this._recipeService.getRecipes().subscribe((recipes) => {
|
||||
this.recipes = recipes;
|
||||
this.isLoaded = true;
|
||||
console.log(this.recipes);
|
||||
});
|
||||
this._recipeService
|
||||
.getRecipes({
|
||||
offset: this.offset,
|
||||
take: this.take,
|
||||
})
|
||||
.subscribe(({ recipes, hasMore }) => {
|
||||
const { Recipe01, ...recipesWithoutRecipe01 } = recipes;
|
||||
if (this.recipes01 && this.isHasMore) {
|
||||
this.recipes01 = [...this.recipes01, ...Recipe01];
|
||||
} else {
|
||||
this.recipes01 = Recipe01;
|
||||
}
|
||||
this.recipes = {
|
||||
...recipesWithoutRecipe01,
|
||||
Recipe01: [],
|
||||
};
|
||||
this.offset += 10;
|
||||
this.isLoaded = true;
|
||||
this.isHasMore = hasMore;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue