@feedmepos/mf-order-setting 0.0.44 → 0.0.45

package/src/views/order-settings/queue/QueueSetting.vue

@@ -0,0 +1,358 @@
+<script setup lang="ts">
+import { ref, watch, onMounted } from 'vue'
+import { OrderSettingApi } from '@/api/order-setting'
+import { restaurantApi, type RestaurantSettingDoc } from '@/api/restaurant-setting'
+import { useLoading } from '@/composables/loading'
+import {
+  type FdoOrderSettings,
+  type FdoOrderQueueSettings,
+  defaultQueueSetting,
+  OrderSettingsDto,
+  OrderSettingUpdateDto
+} from '@entity'
+import RestaurantSelector from '../components/RestaurantSelector.vue'
+import { useCoreStore, useI18n } from '@feedmepos/mf-common'
+import { useSnackbarFunctions } from '@/components/snackbar'
+import { useDialog } from '@feedmepos/ui-library'
+import PresetRemarksSheet from './PresetRemarksSheet.vue'
+
+const { t } = useI18n()
+const { showSuccess } = useSnackbarFunctions()
+const { currentRestaurant } = useCoreStore()
+const { isLoading, startAsyncCallWithErr } = useLoading()
+
+const orderSettingDefault = ref<FdoOrderSettings | undefined>(undefined)
+const queueSettings = ref<FdoOrderQueueSettings>({ ...defaultQueueSetting })
+const restaurantSetting = ref<RestaurantSettingDoc | undefined>(undefined)
+const presetRemarks = ref<string[]>([])
+
+const Dialog = useDialog()
+
+onMounted(() => {
+  init()
+})
+
+watch(
+  () => currentRestaurant.value,
+  () => {
+    init()
+  },
+  { immediate: true }
+)
+
+async function readOrderSetting(): Promise<OrderSettingsDto> {
+  return await startAsyncCallWithErr(async () => {
+    return await OrderSettingApi.getOrderSetting()
+  })
+}
+
+async function updateOrderSetting() {
+  await startAsyncCallWithErr(async () => {
+    if (orderSettingDefault.value) {
+      await OrderSettingApi.updateOrderSetting(
+        OrderSettingUpdateDto.parse({
+          ...orderSettingDefault.value,
+          queueSettings: queueSettings.value
+        })
+      )
+    }
+    await init()
+  })
+  showSuccess(t('order.settingUpdated'))
+}
+
+async function init() {
+  if (currentRestaurant.value) {
+    queueSettings.value = { ...defaultQueueSetting }
+    orderSettingDefault.value = await readOrderSetting()
+    if (orderSettingDefault.value?.queueSettings) {
+      queueSettings.value = { ...defaultQueueSetting, ...orderSettingDefault.value.queueSettings }
+    }
+
+    // Load restaurant settings for preset remarks
+    await startAsyncCallWithErr(async () => {
+      restaurantSetting.value = await restaurantApi.readRestaurantSetting(
+        currentRestaurant.value!._id
+      )
+      const queueQrSetting = restaurantSetting.value?.queueQrSetting
+      presetRemarks.value = queueQrSetting?.presetRemarks ?? []
+    })
+  }
+}
+
+function updateQueueSetting<K extends keyof FdoOrderQueueSettings>(
+  key: K,
+  value: FdoOrderQueueSettings[K]
+) {
+  queueSettings.value[key] = value
+}
+
+function addCodeSetting() {
+  if (!queueSettings.value.codeSettings) {
+    queueSettings.value.codeSettings = []
+  }
+  queueSettings.value.codeSettings.push({
+    start: 0,
+    end: 100,
+    current: 0,
+    prefix: '',
+    pax: { min: 1, max: 99 }
+  })
+}
+
+function removeCodeSetting(index: number) {
+  queueSettings.value.codeSettings?.splice(index, 1)
+}
+
+function updateCodeSetting(index: number, key: string, value: any) {
+  if (queueSettings.value.codeSettings && queueSettings.value.codeSettings[index]) {
+    const setting = queueSettings.value.codeSettings[index] as any
+    if (key.includes('.')) {
+      const [parent, child] = key.split('.')
+      setting[parent][child] = value
+    } else {
+      setting[key] = value
+    }
+  }
+}
+
+function openPresetRemarksSheet() {
+  let updatedRemarks: string[] = [...presetRemarks.value]
+
+  Dialog.open({
+    title: t('order.editPresetRemarks'),
+    contentComponent: PresetRemarksSheet,
+    contentComponentProps: {
+      initialValue: [...presetRemarks.value],
+      'onUpdate:modelValue': (remarks: string[]) => {
+        updatedRemarks = remarks
+      }
+    },
+    primaryActions: {
+      text: t('order.save'),
+      variant: 'primary',
+      close: true
+    },
+    secondaryActions: {
+      text: t('order.cancel'),
+      variant: 'tertiary',
+      close: true
+    }
+  }).onPrimary(async () => {
+    await savePresetRemarks(updatedRemarks)
+  })
+}
+
+async function savePresetRemarks(remarks: string[]) {
+  await startAsyncCallWithErr(async () => {
+    if (currentRestaurant.value && restaurantSetting.value) {
+      const queueQrSetting = restaurantSetting.value.queueQrSetting
+      const result = await restaurantApi.updateQueueSetting(currentRestaurant.value._id, {
+        printerIds: queueQrSetting?.printerIds ?? [],
+        promptConfirmationDialog: queueQrSetting?.promptConfirmationDialog,
+        presetRemarks: remarks
+      })
+
+      restaurantSetting.value = result
+      presetRemarks.value = remarks
+      showSuccess(t('order.presetRemarksSaved'))
+    }
+  })
+}
+</script>
+
+<template>
+  <RestaurantSelector />
+  <div v-if="isLoading" class="column">
+    <FmCircularProgress size="xxl" />
+  </div>
+  <div v-else>
+    <div class="p-[1.5rem] flex flex-col gap-5 m-5 mr-8 w-full max-w-4xl">
+      <div class="flex flex-col gap-5">
+        <div class="flex-grow fm-typo-en-title-sm-600">{{ t('order.queueSettings') }}</div>
+
+        <FmSwitch
+          :model-value="queueSettings.enableOrder"
+          @update:model-value="(v: boolean) => updateQueueSetting('enableOrder', v)"
+          :label="t('order.enableQueueOrder')"
+          label-placement="right"
+        />
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
+          <div class="flex flex-col gap-2">
+            <span class="fm-typo-en-body-md-600">{{ t('order.autoCalledLimit') }}</span>
+            <FmTextField
+              type="number"
+              :model-value="queueSettings.autoCalledLimit"
+              @update:model-value="
+                (v: string | number) =>
+                  updateQueueSetting('autoCalledLimit', v === '' ? 0 : Number(v))
+              "
+            />
+          </div>
+        </div>
+
+        <FmSwitch
+          :model-value="queueSettings.disableRemoteQueue ?? false"
+          @update:model-value="(v: boolean) => updateQueueSetting('disableRemoteQueue', v)"
+          :label="t('order.disableRemoteQueue')"
+          label-placement="right"
+        />
+
+        <FmSwitch
+          :model-value="queueSettings.disableSMS ?? false"
+          @update:model-value="(v: boolean) => updateQueueSetting('disableSMS', v)"
+          :label="t('order.disableSMS')"
+          label-placement="right"
+        />
+
+        <FmSwitch
+          :model-value="queueSettings.printChecklist ?? false"
+          @update:model-value="(v: boolean) => updateQueueSetting('printChecklist', v)"
+          :label="t('order.printChecklist')"
+          label-placement="right"
+        />
+
+        <div class="flex flex-col gap-2">
+          <span class="fm-typo-en-body-md-600">{{ t('order.autoSendKitchen') }}</span>
+          <FmSelect
+            :model-value="
+              queueSettings.autoSendKitchen === null
+                ? 'null'
+                : String(queueSettings.autoSendKitchen)
+            "
+            @update:model-value="
+              (v: string) =>
+                updateQueueSetting('autoSendKitchen', v === 'null' ? null : v === 'true')
+            "
+            :items="[
+              { label: t('order.followDineIn'), value: 'null' },
+              { label: t('order.enabled'), value: 'true' },
+              { label: t('order.disabled'), value: 'false' }
+            ]"
+          />
+        </div>
+
+        <div class="flex flex-col gap-3 mt-4">
+          <div class="flex justify-between items-center">
+            <span class="fm-typo-en-body-md-600">{{ t('order.presetRemarks') }}</span>
+            <FmButton
+              variant="secondary"
+              :label="t('order.edit')"
+              icon="edit"
+              @click="openPresetRemarksSheet"
+            />
+          </div>
+          <div v-if="presetRemarks.length > 0" class="flex flex-wrap gap-2">
+            <div
+              v-for="(remark, index) in presetRemarks"
+              :key="index"
+              class="bg-gray-100 px-3 py-1 rounded-full text-sm"
+            >
+              {{ remark }}
+            </div>
+          </div>
+          <div v-else class="text-gray-400 text-sm">
+            {{ t('order.noPresetRemarks') }}
+          </div>
+        </div>
+
+        <div class="flex flex-col gap-4 mt-4">
+          <div class="flex justify-between items-center">
+            <span class="fm-typo-en-title-sm-600">{{ t('order.codeSettings') }}</span>
+            <FmButton
+              variant="secondary"
+              :label="t('order.addCodeSetting')"
+              icon="add"
+              @click="addCodeSetting"
+            />
+          </div>
+
+          <div
+            v-for="(codeSetting, index) in queueSettings.codeSettings"
+            :key="index"
+            class="bg-gray-50 border border-gray-200 p-5 rounded-lg flex flex-col gap-4 mt-4"
+          >
+            <div class="flex justify-between items-center">
+              <span class="font-bold">#{{ index + 1 }}</span>
+              <FmButton color="error" icon="delete" @click="removeCodeSetting(index)" />
+            </div>
+
+            <div class="grid grid-cols-2 gap-x-6 gap-y-5">
+              <div class="flex flex-col gap-1">
+                <span class="text-sm">{{ t('order.prefix') }}</span>
+                <FmTextField
+                  :model-value="codeSetting.prefix ?? ''"
+                  @update:model-value="(v: string) => updateCodeSetting(index, 'prefix', v)"
+                />
+              </div>
+              <div class="flex flex-col gap-1">
+                <span class="text-sm">{{ t('order.current') }}</span>
+                <FmTextField
+                  type="number"
+                  :model-value="codeSetting.current"
+                  @update:model-value="
+                    (v: string | number) =>
+                      updateCodeSetting(index, 'current', v === '' ? 0 : Number(v))
+                  "
+                />
+              </div>
+              <div class="flex flex-col gap-1">
+                <span class="text-sm">{{ t('order.start') }}</span>
+                <FmTextField
+                  type="number"
+                  :model-value="codeSetting.start"
+                  @update:model-value="
+                    (v: string | number) =>
+                      updateCodeSetting(index, 'start', v === '' ? 0 : Number(v))
+                  "
+                />
+              </div>
+              <div class="flex flex-col gap-1">
+                <span class="text-sm">{{ t('order.end') }}</span>
+                <FmTextField
+                  type="number"
+                  :model-value="codeSetting.end"
+                  @update:model-value="
+                    (v: string | number) =>
+                      updateCodeSetting(index, 'end', v === '' ? 0 : Number(v))
+                  "
+                />
+              </div>
+              <div class="flex flex-col gap-1">
+                <span class="text-sm">{{ t('order.paxMin') }}</span>
+                <FmTextField
+                  type="number"
+                  :model-value="codeSetting.pax.min"
+                  @update:model-value="
+                    (v: string | number) =>
+                      updateCodeSetting(index, 'pax.min', v === '' ? 0 : Number(v))
+                  "
+                />
+              </div>
+              <div class="flex flex-col gap-1">
+                <span class="text-sm">{{ t('order.paxMax') }}</span>
+                <FmTextField
+                  type="number"
+                  :model-value="codeSetting.pax.max"
+                  @update:model-value="
+                    (v: string | number) =>
+                      updateCodeSetting(index, 'pax.max', v === '' ? 0 : Number(v))
+                  "
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="fm-corner-radius-lg flex flex-col gap-5 m-5">
+      <FmButton
+        variant="primary"
+        :label="t('order.saveSetting')"
+        class="mr-auto"
+        @click="updateOrderSetting"
+      />
+    </div>
+  </div>
+</template>