f0619c5a10
- using eventbus in recipe editor - migrate to logging instead of console log - fix case swap not saved, value not update after change, topping slot bug Signed-off-by: pakintada@gmail.com <Pakin>
79 lines
2.1 KiB
Svelte
79 lines
2.1 KiB
Svelte
<script lang="ts">import { logger } from '$lib/core/utils/logger';
|
|
|
|
import { onMount } from 'svelte';
|
|
import { Button } from '../ui/button';
|
|
import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index';
|
|
import { get } from 'svelte/store';
|
|
import {
|
|
materialFromServerQuery,
|
|
materialFromMachineQuery,
|
|
referenceFromPage
|
|
} from '$lib/core/stores/recipeStore';
|
|
import Input from '$lib/components/ui/input/input.svelte';
|
|
|
|
import { SearchIcon, PlusIcon, BeanIcon, StarIcon } from '@lucide/svelte/icons';
|
|
|
|
let { currentMat, onMatChange } = $props();
|
|
let allMatData: any = $state();
|
|
let refPage: string | undefined = $state();
|
|
|
|
function changeMat(mat_id: string) {
|
|
currentMat = mat_id;
|
|
onMatChange(mat_id);
|
|
}
|
|
|
|
function getMaterialTypeIcon(mat_id: number) {}
|
|
|
|
onMount(() => {
|
|
refPage = get(referenceFromPage);
|
|
if (refPage === 'brew') allMatData = get(materialFromMachineQuery);
|
|
else if (refPage === 'overview') allMatData = get(materialFromServerQuery);
|
|
|
|
// logger.info('all mat data', JSON.stringify(allMatData));
|
|
});
|
|
</script>
|
|
|
|
<DropdownMenu.Root>
|
|
<DropdownMenu.Trigger>
|
|
<Button variant="ghost" class="text-muted-foreground hover:bg-transparent">
|
|
{currentMat}
|
|
</Button>
|
|
</DropdownMenu.Trigger>
|
|
<DropdownMenu.Content>
|
|
<div class="sticky top-0 z-10 my-4 flex items-center gap-2 bg-accent">
|
|
<SearchIcon />
|
|
<Input
|
|
type="text"
|
|
placeholder="Search by mat id or name"
|
|
onchange={(e) => {}}
|
|
oninput={(e) => {}}
|
|
/>
|
|
</div>
|
|
|
|
<!-- permission create mat -->
|
|
<DropdownMenu.Item>
|
|
<div class="flex gap-2">
|
|
<PlusIcon />
|
|
<p>Create Material</p>
|
|
</div>
|
|
</DropdownMenu.Item>
|
|
|
|
{#each allMatData as mat}
|
|
<DropdownMenu.Item onclick={() => changeMat(`${mat.materialOtherName} (${mat.id})`)}>
|
|
<div class="flex gap-2">
|
|
{#if mat.BeanChannel}
|
|
<BeanIcon />
|
|
{:else if mat.id > 8110 && mat.id < 8131}
|
|
<StarIcon />
|
|
{/if}
|
|
|
|
<p>{mat.materialOtherName} ({mat.id})</p>
|
|
</div>
|
|
</DropdownMenu.Item>
|
|
{:else}
|
|
<DropdownMenu.Item>
|
|
<p class="text-muted-foreground">No materials available</p>
|
|
</DropdownMenu.Item>
|
|
{/each}
|
|
</DropdownMenu.Content>
|
|
</DropdownMenu.Root>
|