tantee-nuxt-commons 0.0.174 → 0.0.176

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^3.0.0"
   },
-  "version": "0.0.174",
+  "version": "0.0.176",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -27,7 +27,15 @@ const module = defineNuxtModule({
       src: resolver.resolve("runtime/plugins/dialogManager"),
       mode: "client"
     });
-    const typeFiles = ["modules", "alert", "menu", "graphqlOperation", "formDialog", "dialogManager", "permission"];
+    addPlugin({
+      src: resolver.resolve("runtime/plugins/clientConfig"),
+      mode: "client"
+    });
+    addPlugin({
+      src: resolver.resolve("runtime/plugins/default"),
+      mode: "client"
+    });
+    const typeFiles = ["modules", "alert", "menu", "graphqlOperation", "formDialog", "dialogManager", "permission", "clientConfig"];
     for (const file of typeFiles) {
       addTypeTemplate({
         src: resolver.resolve(`runtime/types/${file}.d.ts`),
@@ -45,6 +53,7 @@ const module = defineNuxtModule({
     _nuxt.options.vite.optimizeDeps.include.push("print-js");
     _nuxt.options.vite.optimizeDeps.include.push("gql-query-builder");
     _nuxt.options.vite.optimizeDeps.include.push("exif-rotate-js");
+    _nuxt.options.vite.optimizeDeps.include.push("localstorage-slim");
   }
 });
 

package/dist/runtime/components/device/IdCardButton.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { computed, ref, useAttrs } from 'vue'
+import { VBtn } from 'vuetify/components/VBtn'
+import { useAlert } from '../../composables/alert'
+import { useHostAgent, type PatientRegisterPayload } from '../../composables/hostAgent'
+
+interface Props extends /* @vue-ignore */ InstanceType<typeof VBtn['$props']> {
+  /** If true -> call /idcard/infoAndPhoto, else /idcard/info */
+  withPhoto?: boolean
+  /** Optional reader name/query string */
+  reader?: string | null
+  /** Auto-disable button while reading */
+  disableWhileLoading?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  withPhoto: false,
+  reader: null,
+  disableWhileLoading: true,
+})
+
+const emit = defineEmits<{
+  (e: 'read', payload: PatientRegisterPayload): void
+  (e: 'error', err: unknown): void
+  (e: 'loading', loading: boolean): void
+}>()
+
+const attrs = useAttrs()
+const host = useHostAgent()
+
+const loading = ref(false)
+const disabled = computed(() => (props.disableWhileLoading ? loading.value : false))
+
+async function onClick(ev: MouseEvent) {
+  // allow parent to prevent if they attach their own click handler and call preventDefault
+  if (ev.defaultPrevented) return
+
+  try {
+    loading.value = true
+    emit('loading', true)
+
+    const payload = props.withPhoto
+        ? await host.getIdCardInfoAndPhoto(props.reader ?? undefined)
+        : await host.getIdCardInfo(props.reader ?? undefined)
+
+    emit('read', payload)
+  } catch (e: any) {
+    emit('error', e)
+
+    const msg = e?.data?.detail || e?.data?.title || e?.message || 'ID card read failed'
+    useAlert()?.addAlert({ message: msg, alertType: 'error' })
+  } finally {
+    loading.value = false
+    emit('loading', false)
+  }
+}
+</script>
+
+<template>
+  <!--
+    Extends Vuetify VBtn:
+    - All unknown attrs (size, class, etc.) pass through via v-bind="attrs"
+    - You can override content via default slot; label+icon is fallback
+  -->
+  <v-btn
+      v-bind="attrs"
+      class="idcard-btn"
+      :loading="loading"
+      :disabled="disabled || (attrs as any).disabled"
+      @click="onClick"
+  >
+    <template
+        v-for="(_, name, index) in ($slots as {})"
+        :key="index"
+        #[name]="slotData"
+    >
+      <slot
+          :name="name"
+          v-bind="((slotData || {}) as object)"
+      />
+    </template>
+  </v-btn>
+</template>

package/dist/runtime/components/device/IdCardWebSocket.vue

@@ -0,0 +1,195 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { type IdCardWsServerMessage, type PatientRegisterPayload } from '../../composables/hostAgent'
+import { useHostAgentWs } from "../../composables/hostAgentWs";
+
+interface Props {
+  /** Subscribe withPhoto=true => server will push payload that includes photo when available */
+  withPhoto?: boolean
+  /** Optional reader name; null/undefined means "any/default" */
+  reader?: string | null
+  /** Auto-connect on mount (default true) */
+  autoConnect?: boolean
+  /** Auto-subscribe after connect (default true) */
+  autoSubscribe?: boolean
+  /** If true, try to reconnect when socket closes unexpectedly */
+  autoReconnect?: boolean
+  /** Reconnect delay in ms */
+  reconnectDelayMs?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  withPhoto: false,
+  reader: null,
+  autoConnect: true,
+  autoSubscribe: true,
+  autoReconnect: false,
+  reconnectDelayMs: 1000,
+})
+
+const emit = defineEmits<{
+  (e: 'connected'): void
+  (e: 'disconnected', info?: { code?: number; reason?: string }): void
+  (e: 'subscribed', info?: { reader?: string | null; withPhoto?: boolean }): void
+  (e: 'unsubscribed'): void
+  (e: 'inserted', payload: PatientRegisterPayload): void
+  (e: 'removed'): void
+  (e: 'error', err: unknown): void
+  (e: 'message', msg: IdCardWsServerMessage): void
+}>()
+
+const host = useHostAgentWs()
+
+const reconnectTimer = ref<ReturnType<typeof setTimeout> | null>(null)
+const mounted = ref(false)
+const manuallyDisconnected = ref(false)
+
+function clearReconnect() {
+  if (reconnectTimer.value) {
+    clearTimeout(reconnectTimer.value)
+    reconnectTimer.value = null
+  }
+}
+
+function connectAndSubscribe() {
+  manuallyDisconnected.value = false
+  host.connectIdCardWs()
+
+  // subscribe immediately; safe because connectIdCardWs sets handlers then WS opens soon
+  // but we must wait until OPEN to send; so we subscribe on "open" event in handler below.
+}
+
+function safeDisconnect() {
+  manuallyDisconnected.value = true
+  clearReconnect()
+  try {
+    // best-effort unsubscribe (only if connected)
+    if (host.wsConnected.value) {
+      try { host.unsubscribeIdCardWs() } catch { /* ignore */ }
+    }
+  } catch { /* ignore */ }
+  host.disconnectIdCardWs()
+}
+
+const off = host.onIdCardWsEvent((ev) => {
+  if (ev.type === 'open') {
+    emit('connected')
+
+    if (props.autoSubscribe) {
+      try {
+        host.subscribeIdCardWs({ reader: props.reader ?? null, withPhoto: props.withPhoto })
+      } catch (e) {
+        emit('error', e)
+      }
+    }
+    return
+  }
+
+  if (ev.type === 'close') {
+    emit('disconnected', { code: ev.code, reason: ev.reason })
+
+    if (props.autoReconnect && mounted.value && !manuallyDisconnected.value) {
+      clearReconnect()
+      reconnectTimer.value = setTimeout(() => {
+        try {
+          connectAndSubscribe()
+        } catch (e) {
+          emit('error', e)
+        }
+      }, props.reconnectDelayMs)
+    }
+    return
+  }
+
+  if (ev.type === 'error') {
+    emit('error', ev.error)
+    return
+  }
+
+  if (ev.type === 'message') {
+    const msg = ev.data
+    emit('message', msg)
+
+    switch (msg.type) {
+      case 'monitor.subscribed':
+        if (msg.ok) emit('subscribed', { reader: msg.reader ?? null, withPhoto: !!msg.withPhoto })
+        break
+      case 'monitor.unsubscribed':
+        emit('unsubscribed')
+        break
+      case 'card.inserted':
+        emit('inserted', msg.payload)
+        break
+      case 'card.removed':
+        emit('removed')
+        break
+      case 'card.error':
+      case 'error':
+        emit('error', msg)
+        break
+    }
+  }
+})
+
+onMounted(() => {
+  mounted.value = true
+  if (props.autoConnect) connectAndSubscribe()
+})
+
+onBeforeUnmount(() => {
+  mounted.value = false
+  try { off?.() } catch { /* ignore */ }
+  safeDisconnect()
+})
+
+/**
+ * If props change while connected, switch subscription behavior.
+ * - withPhoto changes => re-subscribe (server treats subscribe twice as error), so do unsubscribe -> subscribe
+ * - reader changes => use switchReader action when possible; if not connected, just store for next subscribe
+ */
+watch(
+    () => props.reader,
+    (r) => {
+      if (!mounted.value) return
+      if (!host.wsConnected.value) return
+      if (!host.wsSubscribed.value) return
+
+      try {
+        host.switchReaderIdCardWs(r ?? null)
+      } catch (e) {
+        emit('error', e)
+      }
+    }
+)
+
+watch(
+    () => props.withPhoto,
+    (withPhoto) => {
+      if (!mounted.value) return
+      if (!host.wsConnected.value) return
+
+      // Server disallows re-subscribe without unsubscribe first.
+      // We do a clean unsubscribe -> resubscribe sequence.
+      try {
+        if (host.wsSubscribed.value) {
+          host.unsubscribeIdCardWs()
+        }
+      } catch { /* ignore */ }
+
+      // resubscribe after a tick; give server a moment to process unsubscribe
+      setTimeout(() => {
+        try {
+          if (host.wsConnected.value) {
+            host.subscribeIdCardWs({ reader: props.reader ?? null, withPhoto })
+          }
+        } catch (e) {
+          emit('error', e)
+        }
+      }, 0)
+    }
+)
+</script>
+
+<template>
+  <!-- Intentionally blank (headless component) -->
+</template>

package/dist/runtime/components/device/Scanner.vue

@@ -0,0 +1,338 @@
+<script lang="ts" setup>
+import { computed, ref, watch, reactive } from 'vue'
+import type { Base64File } from '../../composables/assetFile'
+import { useAlert } from '../../composables/alert'
+import {
+  useHostAgent,
+  PAPER_SOURCE,
+  BIT_DEPTH,
+  type ScanRequest,
+  type ScanResult,
+} from '../../composables/hostAgent'
+
+const alert = useAlert()
+const host = useHostAgent()
+
+const emit = defineEmits<{
+  (e: 'scan', files: Base64File[]): void
+}>()
+
+interface Props {
+  feeder?: boolean
+  duplex?: boolean
+  dpi?: number
+  quality?: number
+  /** UI string: 'color' | 'grey' | 'bw' */
+  color?: string
+  maxSize?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  feeder: false,
+  duplex: false,
+  dpi: 200,
+  quality: 80,
+  color: 'color',
+  maxSize: 5,
+})
+
+/**
+ * ✅ Model directly matches HostAgent ScanRequest
+ */
+const scannerOptions = ref<ScanRequest>({
+  dpi: props.dpi,
+  quality: props.quality,
+  paperSource: props.duplex
+      ? PAPER_SOURCE.Duplex
+      : props.feeder
+          ? PAPER_SOURCE.Feeder
+          : PAPER_SOURCE.Flatbed,
+  bitDepth:
+      props.color === 'bw'
+          ? BIT_DEPTH.BlackAndWhite
+          : props.color === 'grey'
+              ? BIT_DEPTH.Grayscale
+              : BIT_DEPTH.Color,
+})
+
+watch(() => props.dpi, () => {
+  if (props.dpi) scannerOptions.value.dpi = props.dpi
+})
+watch(() => props.quality, () => {
+  if (props.quality) scannerOptions.value.quality = props.quality
+})
+
+/**
+ * Mapping
+ * - Flatbed  => feeder=false, duplex=false
+ * - Feeder   => feeder=true, duplex=false
+ * - Duplex   => feeder=true, duplex=true
+ */
+
+// duplex is true only when paperSource is Duplex
+const uiDuplex = computed<boolean>({
+  get: () => scannerOptions.value.paperSource === PAPER_SOURCE.Duplex,
+  set(v) {
+    if (v) {
+      // duplex ON => MUST be feeder => paperSource Duplex
+      scannerOptions.value.paperSource = PAPER_SOURCE.Duplex
+    } else {
+      // duplex OFF => if currently duplex, fall back to Feeder (because feeder is still on)
+      // user can still later turn feeder off to go Flatbed
+      if (scannerOptions.value.paperSource === PAPER_SOURCE.Duplex) {
+        scannerOptions.value.paperSource = PAPER_SOURCE.Feeder
+      }
+      // if already Feeder/Flatbed, do nothing
+    }
+  },
+})
+
+// feeder is true when paperSource is Feeder or Duplex
+const uiFeeder = computed<boolean>({
+  get: () =>
+      scannerOptions.value.paperSource === PAPER_SOURCE.Feeder ||
+      scannerOptions.value.paperSource === PAPER_SOURCE.Duplex,
+  set(v) {
+    if (v) {
+      // feeder ON => keep duplex state if duplex already on, else go Feeder
+      scannerOptions.value.paperSource = uiDuplex.value ? PAPER_SOURCE.Duplex : PAPER_SOURCE.Feeder
+    } else {
+      // feeder OFF => duplex must be OFF too => go Flatbed
+      scannerOptions.value.paperSource = PAPER_SOURCE.Flatbed
+    }
+  },
+})
+
+
+const uiColor = computed<string>({
+  get() {
+    const b = scannerOptions.value.bitDepth
+    if (b === BIT_DEPTH.BlackAndWhite) return 'bw'
+    if (b === BIT_DEPTH.Grayscale) return 'grey'
+    return 'color'
+  },
+  set(v) {
+    const vv = (v || 'color').toLowerCase()
+    scannerOptions.value.bitDepth =
+        vv === 'bw'
+            ? BIT_DEPTH.BlackAndWhite
+            : vv === 'grey' || vv === 'gray'
+                ? BIT_DEPTH.Grayscale
+                : BIT_DEPTH.Color
+  },
+})
+
+watch(() => props.duplex, () => {
+  uiDuplex.value = props.duplex
+})
+watch(() => props.feeder, () => {
+  uiFeeder.value = props.feeder
+})
+watch(() => props.color, () => {
+  if (props.color) uiColor.value = props.color
+})
+
+function scanResultsToBase64Files(results: ScanResult[]): Base64File[] {
+  return results.map((r, idx) => ({
+    fileName: `scan_${idx + 1}.png`,
+    base64String: r.base64String.startsWith('data:')
+        ? r.base64String
+        : `data:image/png;base64,${r.base64String}`,
+  }))
+}
+
+const isScanning = ref(false)
+
+async function performScan() {
+  try {
+    isScanning.value = true
+    const results = await host.scan(scannerOptions.value)
+    emit('scan', scanResultsToBase64Files(results || []))
+  } catch (e: any) {
+    const msg = e?.data?.detail || e?.data?.title || e?.message || 'Scan failed'
+    alert?.addAlert({ message: msg, alertType: 'error' })
+  } finally {
+    isScanning.value = false
+  }
+}
+
+/**
+ * ✅ Upload helpers (restored)
+ */
+function fileToBase64(file: File) {
+  const maxSize = props.maxSize * 1048576
+
+  return new Promise<Base64File>((resolve, reject) => {
+    if (file.size > maxSize) reject(`File (${file.name}) size exceeds the ${props.maxSize} MB limit.`)
+
+    const reader = new FileReader()
+    reader.onload = (event) => {
+      resolve({ fileName: file.name, base64String: event.target?.result as string })
+    }
+    reader.onerror = reject
+    reader.readAsDataURL(file)
+  })
+}
+
+function performFileUpload(files: File | File[] | undefined) {
+  if (!files) return
+
+  const allFiles = Array.isArray(files) ? files : [files]
+  const base64Promises = allFiles.map(fileToBase64)
+
+  Promise.all(base64Promises)
+      .then((base64Strings) => emit('scan', base64Strings))
+      .catch((error) => alert?.addAlert({ message: String(error), alertType: 'error' }))
+}
+
+/**
+ * Slot props grouping (so you can do ops.performScan etc.)
+ */
+const scannerOptionsProps = computed(() => scannerOptions.value)
+const configHelper = reactive({
+  get feeder() { return uiFeeder.value },
+  set feeder(v: boolean) { uiFeeder.value = v },
+
+  get duplex() { return uiDuplex.value },
+  set duplex(v: boolean) { uiDuplex.value = v },
+
+  get color() { return uiColor.value },
+  set color(v: string) { uiColor.value = v },
+})
+const operation = { performScan, performFileUpload, fileToBase64}
+</script>
+
+<template>
+  <div class="scanner">
+    <slot :scannerOptions="scannerOptionsProps" :configHelper="configHelper" :operation="operation" :isScanning="isScanning">
+      <v-card>
+        <v-card-text>
+          <form-pad v-model="scannerOptions">
+            <template #default>
+              <!-- Upload -->
+              <v-row>
+                <v-col cols="12">
+                  <p>Upload a New Files</p>
+                </v-col>
+
+                <v-col cols="12">
+                  <file-btn
+                      @update:modelValue="performFileUpload"
+                      block
+                      multiple
+                      variant="tonal"
+                      rounded="xl"
+                  >
+                    <v-icon>mdi mdi-tray-arrow-up</v-icon>
+                    Upload file
+                  </file-btn>
+                </v-col>
+              </v-row>
+
+              <!-- Divider -->
+              <v-row>
+                <v-col cols="12" style="text-align: center;">
+                  <p>Or</p>
+                </v-col>
+              </v-row>
+
+              <!-- Scan title -->
+              <v-row>
+                <v-col cols="12">
+                  <p>Scan a New Files</p>
+                </v-col>
+              </v-row>
+
+              <!-- Scan controls -->
+              <v-row>
+                <v-col cols="12" class="py-0">
+                  <v-switch
+                      color="primary"
+                      v-model="uiFeeder"
+                      label="Enable feeder"
+                      hide-details
+                      density="compact"
+                  />
+                </v-col>
+
+                <v-col cols="12" class="py-0">
+                  <v-switch
+                      color="primary"
+                      v-model="uiDuplex"
+                      label="Enable duplex"
+                      hide-details
+                      density="compact"
+                  />
+                </v-col>
+
+                <v-col cols="12">
+                  <p>choose color mode</p>
+
+                  <v-btn-toggle
+                      v-model="uiColor"
+                      variant="tonal"
+                      mandatory
+                  >
+                    <v-btn value="color" prepend-icon="mdi mdi-palette-outline">
+                      <span>Color</span>
+                    </v-btn>
+
+                    <v-btn value="grey" prepend-icon="mdi mdi-circle">
+                      <span>Grayscale</span>
+                    </v-btn>
+
+                    <v-btn value="bw" prepend-icon="mdi mdi-circle-half-full">
+                      <span>Black&amp;White</span>
+                    </v-btn>
+                  </v-btn-toggle>
+                </v-col>
+
+                <v-col cols="12">
+                  <v-slider
+                      v-model="scannerOptions.dpi"
+                      :max="200"
+                      :min="100"
+                      :ticks="{ 100: 'Low', 150: 'Standard', 200: 'High' }"
+                      show-ticks="always"
+                      step="50"
+                      tick-size="4"
+                      label="Resolution"
+                      hide-details
+                  />
+                </v-col>
+
+                <v-col cols="12">
+                  <v-slider
+                      v-model="scannerOptions.quality"
+                      :max="100"
+                      :min="60"
+                      :ticks="{ 60: 'Low', 80: 'Standard', 100: 'High' }"
+                      show-ticks="always"
+                      step="5"
+                      tick-size="4"
+                      label="Quality"
+                      hide-details
+                  />
+                </v-col>
+
+                <v-col cols="12">
+                  <v-btn
+                      @click="performScan"
+                      :loading="isScanning"
+                      :disabled="isScanning"
+                      block
+                      variant="tonal"
+                      rounded="xl"
+                  >
+                    <v-icon>mdi mdi-scanner</v-icon>
+                    Start Scanning
+                  </v-btn>
+                </v-col>
+              </v-row>
+            </template>
+          </form-pad>
+        </v-card-text>
+      </v-card>
+    </slot>
+  </div>
+</template>

package/dist/runtime/components/form/Table.vue

@@ -5,6 +5,7 @@ import {computed, defineOptions,defineExpose, nextTick, ref, useAttrs, watch, us
 import {omit} from 'lodash-es'
 import {useDialog} from "../../composables/dialog"
 import type {FormDialogCallback} from '../../types/formDialog'
+import { useLocalStorageModel, type PersistSlimProps } from '../../composables/localStorageModel'
 
 defineOptions({
   inheritAttrs: false,
@@ -32,7 +33,7 @@ interface Props extends /* @vue-ignore */ InstanceType<typeof VDataTable['$props
   stringFields?: Array<string>
 }
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props & PersistSlimProps>(), {
   noDataText: 'ไม่พบข้อมูล',
   dialogFullscreen: false,
   modelKey: 'id',
@@ -59,6 +60,8 @@ const items = ref<Record<string, any>[]>([])
 const search = ref<string>()
 const currentItem = ref<Record<string, any> | undefined>(undefined)
 
+useLocalStorageModel(items,props)
+
 function setSearch(keyword: string) {
   search.value = keyword
 }
@@ -200,7 +203,8 @@ defineExpose({
   reset: ()=>inputRef.value?.reset(),
   resetValidation : ()=>inputRef.value?.resetValidation(),
   validate : ()=>inputRef.value?.validate(),
-  operation
+  operation,
+  items
 })
 </script>