create branch dev and commit code
This commit is contained in:
parent
3b70cc9fe8
commit
ea68fa5cc4
44 changed files with 12421 additions and 214 deletions
11
src/routes/(authed)/sheet/overview/+page.server.ts
Normal file
11
src/routes/(authed)/sheet/overview/+page.server.ts
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
import { redirect } from '@sveltejs/kit';
|
||||
import { referenceFromPage } from '$lib/core/stores/recipeStore';
|
||||
import { get } from 'svelte/store';
|
||||
|
||||
export function load() {
|
||||
// Set reference so departments page knows to redirect to sheet
|
||||
referenceFromPage.set('sheet');
|
||||
|
||||
// Redirect to departments page to select country
|
||||
throw redirect(302, '/departments');
|
||||
}
|
||||
|
|
@ -1,66 +1,149 @@
|
|||
<script lang="ts">
|
||||
import Button from '$lib/components/ui/button/button.svelte';
|
||||
import Input from '$lib/components/ui/input/input.svelte';
|
||||
import { SearchIcon } from '@lucide/svelte/icons';
|
||||
|
||||
import { onDestroy, onMount } from 'svelte';
|
||||
import {
|
||||
recipeData,
|
||||
recipeFromServerQuery,
|
||||
recipeOverviewData,
|
||||
referenceFromPage
|
||||
} from '$lib/core/stores/recipeStore.js';
|
||||
import { sendCommandRequest, sendMessage } from '$lib/core/handlers/ws_messageSender.js';
|
||||
import { auth } from '$lib/core/stores/auth.js';
|
||||
import { onMount, onDestroy } from 'svelte';
|
||||
import { page } from '$app/stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { get } from 'svelte/store';
|
||||
import { getRecipes } from '$lib/core/client/server.js';
|
||||
import { departmentStore } from '$lib/core/stores/departments';
|
||||
import { addNotification } from '$lib/core/stores/noti.js';
|
||||
import { departmentStore } from '$lib/core/stores/departments.js';
|
||||
import { referenceFromPage } from '$lib/core/stores/recipeStore.js';
|
||||
import {
|
||||
sheetCatalogs,
|
||||
sheetCatalogsLoading,
|
||||
type Catalog
|
||||
} from '$lib/core/stores/sheetStore.js';
|
||||
import { waitForOpenSocket } from '$lib/core/stores/websocketStore.js';
|
||||
import { requestCatalogs } from '$lib/core/services/sheetService.js';
|
||||
|
||||
let refDepartment: string | undefined = $state();
|
||||
import Button from '$lib/components/ui/button/button.svelte';
|
||||
import * as Table from '$lib/components/ui/table/index.js';
|
||||
import Badge from '$lib/components/ui/badge/badge.svelte';
|
||||
import Spinner from '$lib/components/ui/spinner/spinner.svelte';
|
||||
import { RefreshCw } from '@lucide/svelte/icons';
|
||||
|
||||
onMount(async () => {
|
||||
// do load recipe
|
||||
refDepartment = get(departmentStore);
|
||||
referenceFromPage.set('overview');
|
||||
// Get country from route params or department store
|
||||
let selectedCountry = $state<string>($page.params.country || get(departmentStore) || '');
|
||||
let catalogs = $derived($sheetCatalogs);
|
||||
let loading = $derived($sheetCatalogsLoading);
|
||||
let error = $state<string | null>(null);
|
||||
|
||||
sendCommandRequest('sheet', {
|
||||
country: refDepartment,
|
||||
param: 'catalogs'
|
||||
});
|
||||
onMount(() => {
|
||||
referenceFromPage.set('sheet');
|
||||
|
||||
// await getRecipes();
|
||||
if (selectedCountry) {
|
||||
void loadCatalogs();
|
||||
}
|
||||
});
|
||||
|
||||
// onDestroy(() => {
|
||||
// unsubRecipeData();
|
||||
// });
|
||||
async function loadCatalogs() {
|
||||
if (!selectedCountry) return;
|
||||
|
||||
error = null;
|
||||
sheetCatalogsLoading.set(true);
|
||||
sheetCatalogs.set([]);
|
||||
|
||||
const socket = await waitForOpenSocket();
|
||||
if (!socket) {
|
||||
error = 'WebSocket is still connecting. Please try again.';
|
||||
sheetCatalogsLoading.set(false);
|
||||
addNotification('ERR:WebSocket not connected');
|
||||
return;
|
||||
}
|
||||
|
||||
const sent = requestCatalogs(selectedCountry);
|
||||
if (!sent) {
|
||||
error = 'WebSocket not connected. Please try again.';
|
||||
sheetCatalogsLoading.set(false);
|
||||
addNotification('ERR:WebSocket not connected');
|
||||
}
|
||||
}
|
||||
|
||||
function handleEditCatalog(catalog: Catalog) {
|
||||
if (catalog.status === 'locked') {
|
||||
addNotification(`WARN:Catalog is locked by ${catalog.locked_by}`);
|
||||
return;
|
||||
}
|
||||
goto(`/sheet/edit/${selectedCountry}/${catalog.catalog}`);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="mx-8 flex">
|
||||
<!-- header -->
|
||||
<div class="w-full">
|
||||
<!-- Header -->
|
||||
<div class="mb-4 flex items-center justify-between">
|
||||
<div>
|
||||
<h1 class="m-8 text-4xl font-bold">Layout overview [ {refDepartment} ]</h1>
|
||||
<h1 class="m-8 text-4xl font-bold">Sheet Overview</h1>
|
||||
<p class="mx-8 my-0 text-muted-foreground">
|
||||
Display menus from the spreadsheet current selected country
|
||||
Catalogs for {selectedCountry.toUpperCase()}
|
||||
</p>
|
||||
</div>
|
||||
<div class="mx-8 my-4 flex gap-2">
|
||||
<Button variant="default">+ Create Menu</Button>
|
||||
<div class="mr-8">
|
||||
<Button variant="outline" onclick={loadCatalogs} disabled={loading}>
|
||||
<RefreshCw class="mr-2 h-4 w-4" />
|
||||
Refresh
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- search bar -->
|
||||
<!-- <div class="mx-4 my-8 flex w-full items-center justify-center gap-2">
|
||||
<SearchIcon />
|
||||
<Input type="text" placeholder="Search by id, product code, name or material" class="" />
|
||||
</div> -->
|
||||
<!-- filter -->
|
||||
|
||||
<!-- table -->
|
||||
|
||||
<!-- <div class="w-full overflow-auto">
|
||||
<DataTable data={data.recipes} refPage="overview" {columns} />
|
||||
</div> -->
|
||||
<!-- Content Area -->
|
||||
<div class="mx-8">
|
||||
{#if loading}
|
||||
<div class="flex h-64 items-center justify-center">
|
||||
<Spinner class="h-12 w-12" />
|
||||
<p class="ml-4 text-muted-foreground">
|
||||
Loading catalogs for {selectedCountry}...
|
||||
</p>
|
||||
</div>
|
||||
{:else if error}
|
||||
<div class="rounded-md border border-red-200 bg-red-50 p-4">
|
||||
<p class="text-sm text-red-600">{error}</p>
|
||||
<Button variant="outline" size="sm" class="mt-2" onclick={loadCatalogs}>
|
||||
<RefreshCw class="mr-2 h-4 w-4" />
|
||||
Retry
|
||||
</Button>
|
||||
</div>
|
||||
{:else if catalogs.length === 0}
|
||||
<div class="flex h-64 items-center justify-center text-muted-foreground">
|
||||
<p>No catalogs found for {selectedCountry}</p>
|
||||
</div>
|
||||
{:else}
|
||||
<Table.Root>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.Head>Catalog Name</Table.Head>
|
||||
<Table.Head>Status</Table.Head>
|
||||
<Table.Head>Locked By</Table.Head>
|
||||
<Table.Head>Actions</Table.Head>
|
||||
</Table.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{#each catalogs as catalog}
|
||||
<Table.Row>
|
||||
<Table.Cell class="font-medium">{catalog.catalog}</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Badge
|
||||
variant={catalog.status === 'free' ? 'default' : 'secondary'}
|
||||
>
|
||||
{catalog.status.toUpperCase()}
|
||||
</Badge>
|
||||
</Table.Cell>
|
||||
<Table.Cell class="text-muted-foreground">
|
||||
{catalog.locked_by || '-'}
|
||||
</Table.Cell>
|
||||
<Table.Cell>
|
||||
<Button
|
||||
size="sm"
|
||||
variant={catalog.status === 'free' ? 'default' : 'outline'}
|
||||
onclick={() => handleEditCatalog(catalog)}
|
||||
disabled={catalog.status === 'locked'}
|
||||
>
|
||||
{catalog.status === 'free' ? 'Edit' : 'Locked'}
|
||||
</Button>
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
{/each}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
279
src/routes/(authed)/sheet/overview/[country]/+page.svelte
Normal file
279
src/routes/(authed)/sheet/overview/[country]/+page.svelte
Normal file
|
|
@ -0,0 +1,279 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import { get } from 'svelte/store';
|
||||
import { page } from '$app/stores';
|
||||
import { goto } from '$app/navigation';
|
||||
import { permission as currentPerms } from '$lib/core/stores/permissions.js';
|
||||
import { addNotification } from '$lib/core/stores/noti.js';
|
||||
import { departmentStore } from '$lib/core/stores/departments.js';
|
||||
import {
|
||||
sheetCatalogs,
|
||||
sheetCatalogsLoading,
|
||||
type Catalog
|
||||
} from '$lib/core/stores/sheetStore.js';
|
||||
import { waitForOpenSocket } from '$lib/core/stores/websocketStore.js';
|
||||
import { requestCatalogs } from '$lib/core/services/sheetService.js';
|
||||
|
||||
import Button from '$lib/components/ui/button/button.svelte';
|
||||
import * as Select from '$lib/components/ui/select/index.js';
|
||||
import * as Card from '$lib/components/ui/card/index.js';
|
||||
import Badge from '$lib/components/ui/badge/badge.svelte';
|
||||
import Spinner from '$lib/components/ui/spinner/spinner.svelte';
|
||||
import { ArrowRight, Lock, RefreshCw, Star } from '@lucide/svelte/icons';
|
||||
|
||||
const mainCatalogNames = [
|
||||
'page_catalog_group_coffee.skt',
|
||||
'page_catalog_group_tea.skt',
|
||||
'page_catalog_group_milk.skt',
|
||||
'page_catalog_group_dessert.skt',
|
||||
'page_catalog_group_whey.skt',
|
||||
'page_catalog_group_health.skt',
|
||||
'page_catalog_group_pepsi_7up.skt',
|
||||
'page_catalog_group_other_other.skt'
|
||||
];
|
||||
|
||||
const mainCatalogRank = new Map(mainCatalogNames.map((name, index) => [name, index]));
|
||||
|
||||
function isMainCatalog(catalogName: string): boolean {
|
||||
return mainCatalogRank.has(catalogName);
|
||||
}
|
||||
|
||||
function compareCatalogs(a: Catalog, b: Catalog): number {
|
||||
const rankA = mainCatalogRank.get(a.catalog);
|
||||
const rankB = mainCatalogRank.get(b.catalog);
|
||||
|
||||
if (rankA !== undefined && rankB !== undefined) return rankA - rankB;
|
||||
if (rankA !== undefined) return -1;
|
||||
if (rankB !== undefined) return 1;
|
||||
return 0;
|
||||
}
|
||||
|
||||
// Helper function to extract display name from catalog filename
|
||||
function getCatalogDisplayName(catalogName: string): string {
|
||||
const match = catalogName.match(/page_catalog_group_(\w+)\.skt/);
|
||||
if (match && match[1]) {
|
||||
return match[1].charAt(0).toUpperCase() + match[1].slice(1);
|
||||
}
|
||||
return catalogName;
|
||||
}
|
||||
|
||||
let selectedCountry = $state<string>($page.params.country || '');
|
||||
let catalogs = $derived($sheetCatalogs);
|
||||
let sortedCatalogs = $derived([...catalogs].sort(compareCatalogs));
|
||||
let loading = $derived($sheetCatalogsLoading);
|
||||
let error = $state<string | null>(null);
|
||||
let enabledCountries = $state<string[]>([]);
|
||||
|
||||
onMount(() => {
|
||||
// Set department store
|
||||
if (selectedCountry) {
|
||||
departmentStore.set(selectedCountry);
|
||||
}
|
||||
|
||||
// Extract enabled countries from permissions
|
||||
const userPerms = get(currentPerms).filter((x) => x.startsWith('document.write'));
|
||||
enabledCountries = userPerms.map((x) => x.split('.')[2]);
|
||||
|
||||
// Auto-load catalogs for the selected country
|
||||
if (selectedCountry) {
|
||||
void loadCatalogs();
|
||||
}
|
||||
|
||||
// Retry permissions after 1 second if empty
|
||||
if (enabledCountries.length === 0) {
|
||||
setTimeout(() => {
|
||||
const retryPerms = get(currentPerms).filter((x) => x.startsWith('document.write'));
|
||||
enabledCountries = retryPerms.map((x) => x.split('.')[2]);
|
||||
}, 1000);
|
||||
}
|
||||
});
|
||||
|
||||
async function loadCatalogs() {
|
||||
if (!selectedCountry) return;
|
||||
|
||||
error = null;
|
||||
sheetCatalogsLoading.set(true);
|
||||
sheetCatalogs.set([]);
|
||||
|
||||
const socket = await waitForOpenSocket();
|
||||
if (!socket) {
|
||||
error = 'WebSocket is still connecting. Please try again.';
|
||||
sheetCatalogsLoading.set(false);
|
||||
addNotification('ERR:WebSocket not connected');
|
||||
return;
|
||||
}
|
||||
|
||||
const sent = requestCatalogs(selectedCountry);
|
||||
if (!sent) {
|
||||
error = 'WebSocket not connected. Please try again.';
|
||||
sheetCatalogsLoading.set(false);
|
||||
addNotification('ERR:WebSocket not connected');
|
||||
}
|
||||
}
|
||||
|
||||
function handleEditCatalog(catalog: Catalog) {
|
||||
if (catalog.status === 'locked') {
|
||||
addNotification(`WARN:Catalog is locked by ${catalog.locked_by}`);
|
||||
return;
|
||||
}
|
||||
|
||||
goto(`/sheet/edit/${selectedCountry}/${catalog.catalog}`);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="min-h-screen bg-background dark:bg-[radial-gradient(circle_at_top_left,rgba(20,184,166,0.10),transparent_30%),linear-gradient(180deg,rgba(15,23,42,0.20),transparent_34%)]"
|
||||
>
|
||||
<div class="w-full px-8 py-8">
|
||||
<div class="mb-8 flex items-start justify-between gap-6">
|
||||
<div class="min-w-0">
|
||||
<h1 class="text-4xl leading-tight font-bold tracking-normal">
|
||||
Sheet Overview [ {selectedCountry.toUpperCase()} ]
|
||||
</h1>
|
||||
<p class="mt-7 text-lg text-muted-foreground">
|
||||
View available catalogs for {selectedCountry.toUpperCase()}
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
class="h-12 rounded-lg border-border/80 px-5 font-semibold"
|
||||
onclick={loadCatalogs}
|
||||
disabled={loading}
|
||||
>
|
||||
{#if loading}
|
||||
<Spinner class="mr-2 h-4 w-4" />
|
||||
{:else}
|
||||
<RefreshCw class="mr-2 h-4 w-4" />
|
||||
{/if}
|
||||
Refresh
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div class="mb-7">
|
||||
{#if enabledCountries.length === 0}
|
||||
<p class="text-sm text-muted-foreground">
|
||||
No countries available. Please check your permissions.
|
||||
</p>
|
||||
{:else}
|
||||
<Select.Root
|
||||
type="single"
|
||||
value={selectedCountry}
|
||||
onValueChange={(v) => {
|
||||
if (v) {
|
||||
selectedCountry = v;
|
||||
goto(`/sheet/overview/${v}`);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Select.Trigger
|
||||
class="h-11 w-64 rounded-lg border-border/80 bg-card/70 px-4 font-semibold"
|
||||
>
|
||||
{selectedCountry.toUpperCase()}
|
||||
</Select.Trigger>
|
||||
<Select.Content>
|
||||
{#each enabledCountries as country}
|
||||
<Select.Item value={country}>
|
||||
{country.toUpperCase()}
|
||||
</Select.Item>
|
||||
{/each}
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{#if loading}
|
||||
<div class="flex h-64 items-center justify-center rounded-lg border bg-card/50">
|
||||
<Spinner class="h-12 w-12" />
|
||||
<p class="ml-4 text-muted-foreground">
|
||||
Loading catalogs for {selectedCountry}...
|
||||
</p>
|
||||
</div>
|
||||
{:else if error}
|
||||
<div class="rounded-lg border border-red-300 bg-red-50 p-4 dark:border-red-800 dark:bg-red-950/50">
|
||||
<p class="text-sm text-red-700 dark:text-red-400">{error}</p>
|
||||
<Button variant="outline" size="sm" class="mt-2" onclick={loadCatalogs}>
|
||||
<RefreshCw class="mr-2 h-4 w-4" />
|
||||
Retry
|
||||
</Button>
|
||||
</div>
|
||||
{:else if sortedCatalogs.length === 0}
|
||||
<div
|
||||
class="flex h-64 items-center justify-center rounded-lg border bg-card/50 text-muted-foreground"
|
||||
>
|
||||
<p>No catalogs found for {selectedCountry}</p>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-4">
|
||||
{#each sortedCatalogs as catalog}
|
||||
<Card.Root
|
||||
class="group min-h-[234px] rounded-xl border-border/80 bg-card/80 shadow-sm transition-colors hover:border-border hover:bg-card"
|
||||
>
|
||||
<Card.Header class="px-6 pt-7 pb-4">
|
||||
<div class="flex items-start justify-between gap-3">
|
||||
<Card.Title class="text-xl font-bold tracking-normal">
|
||||
{getCatalogDisplayName(catalog.catalog)} group
|
||||
</Card.Title>
|
||||
{#if isMainCatalog(catalog.catalog)}
|
||||
<Badge
|
||||
variant="secondary"
|
||||
class="inline-flex shrink-0 items-center gap-1 rounded-full border-yellow-500/30 bg-yellow-500/15 px-2.5 py-1 text-xs text-yellow-700 dark:text-yellow-200"
|
||||
>
|
||||
<Star class="h-3 w-3 fill-yellow-500 text-yellow-500 dark:fill-yellow-300 dark:text-yellow-300" />
|
||||
Main
|
||||
</Badge>
|
||||
{/if}
|
||||
</div>
|
||||
<!-- <p class="mt-3 truncate text-sm text-muted-foreground">
|
||||
{catalog.catalog}
|
||||
</p> -->
|
||||
</Card.Header>
|
||||
<Card.Content class="px-6 pb-4">
|
||||
<div class="mt-3 flex min-h-8 items-center gap-3">
|
||||
{#if catalog.status === 'free'}
|
||||
<Badge
|
||||
class="inline-flex rounded-full bg-green-600 px-3 py-1 text-xs text-white hover:bg-green-600"
|
||||
>
|
||||
<span class="mr-2 h-1.5 w-1.5 rounded-full bg-green-200"></span>
|
||||
Available
|
||||
</Badge>
|
||||
<span class="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<span class="h-1.5 w-1.5 rounded-full bg-green-500"></span>
|
||||
Ready to edit
|
||||
</span>
|
||||
{:else}
|
||||
<Badge
|
||||
variant="secondary"
|
||||
class="flex items-center gap-1 rounded-full px-3 py-1"
|
||||
>
|
||||
<Lock class="h-3 w-3" />
|
||||
Locked
|
||||
</Badge>
|
||||
<span class="truncate text-sm text-muted-foreground">
|
||||
{catalog.locked_by || 'In use'}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</Card.Content>
|
||||
<Card.Footer class="px-6 pt-2 pb-6">
|
||||
<Button
|
||||
variant="outline"
|
||||
disabled={catalog.status === 'locked'}
|
||||
class="h-11 w-full justify-center rounded-lg border-border/80 bg-background/35 font-semibold transition-colors group-hover:bg-background/55"
|
||||
onclick={() => handleEditCatalog(catalog)}
|
||||
>
|
||||
<span class="flex-1 text-center">
|
||||
{catalog.status === 'free' ? 'Edit' : 'Locked'}
|
||||
</span>
|
||||
{#if catalog.status === 'free'}
|
||||
<ArrowRight class="h-4 w-4" />
|
||||
{/if}
|
||||
</Button>
|
||||
</Card.Footer>
|
||||
</Card.Root>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue