faiztyanirh/clqms-shadcn-v1
1
0
Fork 0
mirror of https://github.com/faiztyanirh/clqms-shadcn-v1.git synced 2026-04-24 01:58:07 +07:00
Code Issues Packages Projects Releases Wiki Activity

initial dict instrument

Browse Source
This commit is contained in:
faiztyanirh 2026-04-18 22:35:38 +07:00
parent 1ddaa8e29f
commit 2943f46b10
12 changed files with 389 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/components/app-sidebar.svelte
View File

@ -109,6 +109,10 @@
title: "Workstation",
url: "/workstation",
},
{
title: "Instrument",
url: "/instrument",
},
],
},
{

18
src/lib/components/dictionary/instrument/api/instrument-api.js Normal file
View File

@ -0,0 +1,18 @@
import { API } from '$lib/config/api.js';
import { getById, searchWithParams, create, update } from '$lib/api/api-client';
export async function getInstruments(searchQuery) {
return await searchWithParams(API.INSTRUMENT, searchQuery)
}
export async function getInstrument(searchQuery) {
return await getById(API.INSTRUMENT, searchQuery)
}
export async function createInstrument(newInstrumentForm) {
return await create(API.INSTRUMENT, newInstrumentForm)
}
export async function editInstrument(editInstrumentForm, id) {
return await update(API.INSTRUMENT, editInstrumentForm, id)
}

61
src/lib/components/dictionary/instrument/config/instrument-config.js Normal file
View File

@ -0,0 +1,61 @@
import PlusIcon from "@lucide/svelte/icons/plus";
import Settings2Icon from "@lucide/svelte/icons/settings-2";
import PencilIcon from "@lucide/svelte/icons/pencil";
import RefreshIcon from "@lucide/svelte/icons/refresh-cw";
export const searchFields = [
{
key: "InstrumentName",
label: "Instrument Name",
type: "text",
},
];
export const detailSections = [
{
title: "",
class: "grid grid-cols-1 gap-4",
groups: [
{
class: "space-y-3",
fields: [
{ key: "IEID", label: "Internal Equipment ID" },
{ key: "InstrumentID", label: "Instrument ID" },
{ key: "InstrumentName", label: "Instrument Name" },
{ key: "WorkstationID", label: "Workstation" },
{ key: "EquipmentRole", label: "Equipment Role" },
{ key: "isEnable", label: "Enable" },
]
},
]
},
];
export function instrumentActions(masterDetail, handlers) {
return [
{
Icon: RefreshIcon,
label: 'Refresh Data',
onClick: handlers.refresh,
},
{
Icon: PlusIcon,
label: 'Add Instrument',
onClick: () => masterDetail.enterCreate(),
},
{
Icon: Settings2Icon,
label: 'Search Parameters',
},
];
}
export function viewActions(handlers){
return [
{
Icon: PencilIcon,
label: 'Edit Instrument',
onClick: handlers.editInstrument,
},
]
}

67
src/lib/components/dictionary/instrument/config/instrument-form-config.js Normal file
View File

@ -0,0 +1,67 @@
import { API } from "$lib/config/api";
import EraserIcon from "@lucide/svelte/icons/eraser";
import { z } from "zod";
export const instrumentSchema = z.object({
});
export const instrumentInitialForm = {
EID: '',
IEID: '',
DepartmentID: '',
InstrumentID: '',
InstrumentName: '',
WorkstationID: '',
isEnable: '',
EquipmentRole: '',
};
export const instrumentDefaultErrors = {
};
export const instrumentFormFields = [
{
title: "Basic Information",
rows: [
{
type: "row",
columns: [
{
key: "EID",
label: "Equipment ID",
required: false,
type: "text",
},
{
key: "IEID",
label: "Internal Equipment ID",
required: false,
type: "text",
},
]
},
{
type: "row",
columns: [
{
key: "DepartmentID",
label: "Department ID",
required: false,
type: "textarea",
},
]
}
]
},
];
export function getInstrumentFormActions(handlers) {
return [
{
Icon: EraserIcon,
label: 'Clear Form',
onClick: handlers.clearForm,
},
];
}

1
src/lib/components/dictionary/instrument/page/create-page.svelte Normal file
View File

@ -0,0 +1 @@
cr

1
src/lib/components/dictionary/instrument/page/edit-page.svelte Normal file
View File

@ -0,0 +1 @@
ed

74
src/lib/components/dictionary/instrument/page/master-page.svelte Normal file
View File

@ -0,0 +1,74 @@
<script>
import { instrumentColumns } from "$lib/components/dictionary/instrument/table/instrument-columns";
import { getInstruments, getInstrument } from "$lib/components/dictionary/instrument/api/instrument-api";
import { useSearch } from "$lib/components/composable/use-search.svelte";
import { searchFields, instrumentActions } from "$lib/components/dictionary/instrument/config/instrument-config";
import TopbarWrapper from "$lib/components/topbar/topbar-wrapper.svelte";
import ReusableSearchParam from "$lib/components/reusable/reusable-search-param.svelte";
import ReusableEmpty from "$lib/components/reusable/reusable-empty.svelte";
import ReusableDataTable from "$lib/components/reusable/reusable-data-table.svelte";
import BoxIcon from "@lucide/svelte/icons/box";
import MoveLeftIcon from "@lucide/svelte/icons/move-left";
let props = $props();
const search = useSearch(searchFields, getInstruments);
const handlers = {
refresh: () => {search.handleSearch()},
};
const actions = instrumentActions(props.masterDetail, handlers)
actions.find(a => a.label === 'Search Parameters').popoverContent = searchParamSnippet;
let activeRowId = $state(null);
</script>
{#snippet searchParamSnippet(close)}
<ReusableSearchParam {searchFields}
bind:searchQuery={search.searchQuery} onSearch={() => search.handleSearch(close)} onReset={search.handleReset} isLoading={search.isLoading}
selectOptions={search.selectOptions} loadingOptions={search.loadingOptions} fetchOptions={search.fetchOptions}
/>
{/snippet}
<div
role="button"
tabindex="0"
onclick={() => props.masterDetail.isFormMode && props.masterDetail.exitForm()}
onkeydown={(e) => e.key === 'Enter' && props.masterDetail.isFormMode && props.masterDetail.exitForm()}
class={`
${props.masterDetail.isMobile ? "w-full" : props.masterDetail.isFormMode ? "w-[3%] cursor-pointer" : "w-[35%]"}
transition-all duration-300 flex flex-col items-center p-2 h-full overflow-y-auto
`}
>
<div class={`flex w-full ${props.masterDetail.isFormMode ? "flex-col justify-center h-full items-center" : "flex-col justify-start h-full"}`} >
{#if props.masterDetail.isFormMode}
<span class="flex flex-col items-center justify-start gap-4 tracking-widest font-semibold select-none h-full">
<MoveLeftIcon />
<div class="flex flex-col items-center justify-center flex-grow gap-4">
{#each "INSTRUMENT".split("") as c}
<span class="leading-none">{c}</span>
{/each}
</div>
</span>
{/if}
{#if !props.masterDetail.isFormMode}
<div role="button" tabindex="0" class="flex flex-1 flex-col" onclick={(e) => e.stopPropagation()} onkeydown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
e.stopPropagation();
}
}}>
<TopbarWrapper {actions}/>
<div class="flex-1 w-full h-full">
{#if search.searchData.length > 0}
<ReusableDataTable data={search.searchData} columns={instrumentColumns} handleRowClick={props.masterDetail.select} {activeRowId} rowIdKey="EID"/>
{:else}
<div class="flex h-full">
<ReusableEmpty icon={BoxIcon} desc="Try searching from search parameters"/>
</div>
{/if}
</div>
</div>
{/if}
</div>
</div>

97
src/lib/components/dictionary/instrument/page/view-page.svelte Normal file
View File

@ -0,0 +1,97 @@
<script>
import { formatUTCDate } from "$lib/utils/formatUTCDate";
import { detailSections, viewActions } from "$lib/components/dictionary/instrument/config/instrument-config";
import TopbarWrapper from "$lib/components/topbar/topbar-wrapper.svelte";
import ReusableEmpty from "$lib/components/reusable/reusable-empty.svelte";
import BoxIcon from "@lucide/svelte/icons/box";
import { Spinner } from "$lib/components/ui/spinner/index.js";
let props = $props();
const { masterDetail, formFields, formActions, schema } = props.context;
let instrument = $derived(masterDetail?.selectedItem?.data);
const handlers = {
editInstrument: () => masterDetail.enterEdit("data"),
};
const actions = viewActions(handlers);
function getFieldValue(field) {
if (!instrument) return "-";
if (field.keys) {
return field.keys
.map(k => field.parentKey ? instrument[field.parentKey]?.[k] : instrument[k])
.filter(val => val && val.trim() !== "")
.join(" / ");
}
return field.parentKey ? instrument[field.parentKey]?.[field.key] : instrument[field.key];
}
$inspect(masterDetail.selectedItem);
</script>
{#snippet Fieldset({ value, label, isUTCDate = false })}
<div class="space-y-1.5">
<dt class="text-xs font-medium text-muted-foreground uppercase tracking-wider">
{label}
</dt>
<dd class="text-sm font-medium">
{#if isUTCDate}
{formatUTCDate(value)}
{:else}
{value ?? "-"}
{/if}
</dd>
</div>
{/snippet}
{#if masterDetail.isLoadingDetail}
<div class="h-full w-full flex items-center justify-center">
<Spinner class="size-6" />
</div>
{:else if masterDetail.selectedItem}
<div class="flex flex-col px-2 py-1 gap-2 h-full w-full">
<TopbarWrapper
title={masterDetail.selectedItem.data.InstrumentName}
{actions}
/>
<div class="flex-1 min-h-0 overflow-y-auto space-y-4">
{#each detailSections as section}
<div class="p-4">
{#if section.groups}
<div class={section.class}>
{#each section.groups as group}
<div>
<div class={group.class}>
{#each group.fields as field}
{@render Fieldset({
label: field.label,
value: getFieldValue(field),
isUTCDate: field.isUTCDate
})}
{/each}
</div>
</div>
{/each}
</div>
{:else}
<div class={section.class}>
{#each section.fields as field}
{@render Fieldset({
label: field.label,
value: getFieldValue(field),
isUTCDate: field.isUTCDate
})}
{/each}
</div>
{/if}
</div>
{/each}
</div>
</div>
{:else}
<ReusableEmpty icon={BoxIcon} desc="Select an instrument to see details"/>
{/if}

10
src/lib/components/dictionary/instrument/table/instrument-columns.js Normal file
View File

@ -0,0 +1,10 @@
export const instrumentColumns = [
{
accessorKey: "InstrumentName",
header: "Instrument Name",
},
{
accessorKey: "DepartmentName",
header: "Department",
},
];

1
src/lib/config/api.js
View File

@ -29,4 +29,5 @@ export const API = {
TESTMAP: '/api/test/testmap',
EQUIPMENT: '/api/equipmentlist',
ORDERTEST: '/api/ordertest',
INSTRUMENT: '/api/equipmentlist',
};

3
src/routes/+layout.server.js
View File

@ -42,6 +42,9 @@ export async function load({ url }) {
'/dictionary/testmap': {
title: 'Test Map'
},
'/dictionary/instrument': {
title: 'Instrument'
},
'/order/ordertest': {
title: 'Order Test'
},

52
src/routes/dictionary/instrument/+page.svelte Normal file
View File

@ -0,0 +1,52 @@
<script>
import { Separator } from "$lib/components/ui/separator/index.js";
import { useMasterDetail } from "$lib/components/composable/use-master-detail.svelte";
import { getInstrument, createInstrument, editInstrument } from "$lib/components/dictionary/instrument/api/instrument-api";
import MasterPage from "$lib/components/dictionary/instrument/page/master-page.svelte";
import ViewPage from "$lib/components/dictionary/instrument/page/view-page.svelte";
import CreatePage from "$lib/components/dictionary/instrument/page/create-page.svelte";
import EditPage from "$lib/components/dictionary/instrument/page/edit-page.svelte";
import { instrumentSchema, instrumentInitialForm, instrumentDefaultErrors, instrumentFormFields, getInstrumentFormActions } from "$lib/components/dictionary/instrument/config/instrument-form-config";
const masterDetail = useMasterDetail({
onSelect: async (row) => {
return await getInstrument(row.EID);
},
formConfig: {
schema: instrumentSchema,
initialForm: instrumentInitialForm,
defaultErrors: instrumentDefaultErrors,
mode: 'create',
modeOpt: 'default',
saveEndpoint: createInstrument,
editEndpoint: editInstrument,
idKey: 'EID',
}
});
const pageContext = {
masterDetail,
formFields: instrumentFormFields,
formActions: getInstrumentFormActions,
schema: instrumentSchema,
initialForm: instrumentInitialForm,
}
</script>
<div class="flex w-full h-full overflow-hidden">
{#if masterDetail.showMaster}
<MasterPage {masterDetail} />
{/if}
<Separator orientation="vertical"/>
{#if masterDetail.showDetail}
<main class={`${masterDetail.isMobile ? 'w-full' : masterDetail.isFormMode ? 'w-[97%] flex flex-col items-start' : 'w-[65%]'} h-full overflow-y-auto flex flex-col items-center transition-all duration-300`}>
{#if masterDetail.mode === "view"}
<ViewPage context={pageContext}/>
{:else if masterDetail.mode === "create"}
<CreatePage context={pageContext}/>
{:else if masterDetail.mode === "edit"}
<EditPage context={pageContext}/>
{/if}
</main>
{/if}
</div>