@feedmepos/mf-order-setting 0.0.2 → 0.0.6

package/src/views/kiosk/settings/KioskPickAtCounterSection.vue

@@ -0,0 +1,25 @@
+<template>
+    <div>
+        <FmSwitch v-model="pickUpEnabled" label="Pick At Counter" label-placement="right" @update:modelValue="updatePickUp" />
+    </div>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+interface Props {
+    enabled: boolean,
+}
+
+interface Emits {
+    (e: 'update-pick-up', enabled: boolean): void
+}
+
+const props = defineProps<Props>();
+const emits = defineEmits<Emits>();
+const pickUpEnabled = ref<boolean>(props.enabled);
+
+const updatePickUp = (enabled: boolean) => {
+    pickUpEnabled.value = enabled;
+    emits('update-pick-up', enabled);
+}
+</script>

package/src/views/kiosk/settings/KioskSettingView.vue

@@ -0,0 +1,61 @@
+<template>
+    <div v-if="!!kioskOrderSetting">
+        <div class="flex flex-col gap-2" >
+            <span class="fm-typo-en-title-sm-800">Dine In</span>
+            <KioskDineInSection :key="'dine-in-'+ restaurantId" :restaurant-id="restaurantId"  :is-apply-loading="isLoading" :get-setting="() => kioskOrderSetting!.dineIn" @update-dine-in="updateDineInSetting" />
+        </div>
+        <div class="flex flex-col gap-2">
+            <span class="fm-typo-en-title-sm-800">Take Away</span>
+            <KioskTakeawaySection :key="'takeaway-'+ restaurantId" :restaurant-id="restaurantId"  :is-apply-loading="isLoading"  :get-setting="() => kioskOrderSetting!.takeaway" @update-takeaway="updateTakeawaySetting"/>
+        </div>
+
+    </div>
+    <div v-else>
+        Please select a restaurant.
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import KioskDineInSection from './KioskDineInSection.vue';
+import KioskTakeawaySection from './KioskTakeawaySection.vue';
+import type { MfKioskDineInSetting, MfKioskOrderSetting, MfKioskTakeawaySetting } from '@/modules/order-setting/kiosk/interface';
+import { useLoading } from '@/composables/loading';
+
+
+
+interface Props {
+    restaurantId: string,
+    getOrderSetting : () => MfKioskOrderSetting | undefined,
+}
+
+const props = defineProps<Props>();
+
+interface Emits {
+    (e: 'updateDineIn', form: MfKioskDineInSetting) : Promise<void>,
+    (e: 'updateTakeaway', form: MfKioskTakeawaySetting) : Promise<void>,
+}
+
+const emits = defineEmits<Emits>();
+
+const kioskOrderSetting = ref<MfKioskOrderSetting | undefined>(props.getOrderSetting());
+
+const { startAsyncCall, isLoading } = useLoading();
+
+async function updateDineInSetting(form : MfKioskDineInSetting){
+    await startAsyncCall(async() => {
+        await emits('updateDineIn', form);
+    });
+}
+
+async function updateTakeawaySetting(form: MfKioskTakeawaySetting) {
+    await startAsyncCall(async () => {
+        await emits('updateTakeaway', form);
+    });
+}
+
+watch(() => props.restaurantId, () => {
+    kioskOrderSetting.value = props.getOrderSetting();
+})
+
+
+</script>

package/src/views/kiosk/settings/KioskTakeawaySection.vue

@@ -0,0 +1,39 @@
+<template>
+    <div>
+        <FmSwitch v-model="form.enabled" label="Takeaway" label-placement="right" @update:model-value="updateTakeawaySetting" class="mb-5"/>
+        <FmButton class="w-1/4 mb-5" variant="primary" label="Apply Take Away" :disabled="isApplyLoading"
+                :loading="isApplyLoading" @click="applyTakeAway" />
+    </div>
+</template>
+<script setup lang="ts">
+import type { MfKioskTakeawaySetting } from '@/modules/order-setting/kiosk/interface';
+import { ref, watch } from 'vue';
+import { ObjectUtil } from '@/utils/object';
+
+interface Props {
+    getSetting: () => MfKioskTakeawaySetting,
+    isApplyLoading: boolean,
+    restaurantId : string,
+}
+
+interface Emits {
+    (e: 'updateTakeaway', setting: MfKioskTakeawaySetting) : void;
+}
+
+const props = defineProps<Props>();
+const emits = defineEmits<Emits>();
+const form = ref<MfKioskTakeawaySetting>(ObjectUtil.clone<MfKioskTakeawaySetting>(props.getSetting()));
+
+function updateTakeawaySetting(v: boolean) {
+    form.value.enabled = v;
+}
+
+function applyTakeAway() {
+    emits('updateTakeaway', form.value);
+}
+
+watch(() => props.restaurantId, () => {
+    form.value = props.getSetting();
+})
+
+</script>

package/src/views/order-settings/OrderSettingsView.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="py-[1.5rem]">
+    <FmPageHead :title="pageTitle" />
+    <div class="flex px-[1.5rem]">
+      <div class="flex-[2_2_0%]">
+        <FmTabs v-model:model-value="selectedOrderSetting" :items="settingItem" />
+      </div>
+    </div>
+  </div>
+  <component :is="currentComponent" />
+</template>
+
+<script setup lang="ts">
+import { type FmTabProps } from '@feedmepos/ui-library'
+import { ref, computed } from 'vue'
+import DeliverySetting from './delivery/DeliverySetting.vue'
+import DineInSetting from './dinein/DineInSetting.vue'
+import PickUpSetting from './pickup/PickUpSetting.vue'
+import SmsSetting from './sms/SmsSetting.vue'
+import ServiceChargeSetting from './servicecharge/ServiceChargeSetting.vue'
+
+type OrderSettingMenuItemValue = 'delivery' | 'pickup' | 'dinein' | 'servicecharge' | 'sms'
+const selectedOrderSetting = ref<OrderSettingMenuItemValue>('delivery')
+
+const settingItem = computed<FmTabProps[]>(() => [
+  { label: 'Delivery', value: 'delivery' },
+  { label: 'Pickup', value: 'pickup' },
+  { label: 'Dine In', value: 'dinein' },
+  { label: 'Service Charge', value: 'servicecharge' },
+  { label: 'SMS', value: 'sms' }
+])
+
+const pageTitle = computed(() => {
+  const item = settingItem.value.find((i) => i.value === selectedOrderSetting.value)
+  return item ? item.label : 'Order Setting'
+})
+
+const currentComponent = computed(() => {
+  switch (selectedOrderSetting.value) {
+    case 'delivery':
+      return DeliverySetting
+    case 'dinein':
+      return DineInSetting
+    case 'pickup':
+      return PickUpSetting
+    case 'sms':
+      return SmsSetting
+    case 'servicecharge':
+      return ServiceChargeSetting
+  }
+})
+</script>

package/src/views/order-settings/components/RestaurantSelector.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { computed, onMounted, watch, type PropType } from 'vue'
+import { useRestaurantStore } from '@/stores/restaurant'
+import type { ISelectItem } from '@feedmepos/ui-library'
+import { useCoreStore } from '@feedmepos/mf-common'
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Array] as PropType<string | string[]>,
+    default: undefined
+  }
+})
+
+const emits = defineEmits<{
+  (event: 'update:model-value', v: string | string[]): void
+}>()
+
+const restaurantStore = useRestaurantStore()
+const { restaurants, changeRestaurant } = useCoreStore()
+
+const restaurantItems = computed<ISelectItem[]>(() =>
+  restaurants.value.map((r) => ({
+    label: r.profile.name,
+    value: r._id
+  }))
+)
+
+const defaultRestaurantId = computed(() => {
+  if (restaurantItems.value.length > 0) {
+    return restaurantItems.value[0].value
+  }
+  return ''
+})
+
+const modelValue = computed({
+  get() {
+    return props.modelValue === undefined ? defaultRestaurantId.value : props.modelValue
+  },
+  set(v: string | string[]) {
+    emits('update:model-value', v)
+  }
+})
+
+async function onInput(v: string) {
+  const restaurant = restaurants.value.find((r) => r._id === v)
+  if (restaurant) {
+    changeRestaurant(restaurant)
+  }
+  await restaurantStore.readRestaurantSetting(v)
+}
+
+watch(
+  restaurantItems,
+  () => {
+    if (modelValue.value === undefined && restaurantItems.value.length > 0) {
+      modelValue.value = defaultRestaurantId.value
+    }
+  },
+  { immediate: true }
+)
+
+onMounted(() => {
+  if (modelValue.value === undefined && restaurantItems.value.length > 0) {
+    modelValue.value = defaultRestaurantId.value
+  }
+})
+</script>
+
+<template>
+  <div class="w-max ml-5">
+    <FmSelect v-model="modelValue" :items="restaurantItems" @update:model-value="onInput">
+      <template #prepend>
+        <FmIcon name="storefront" size="md" outline />
+      </template>
+    </FmSelect>
+  </div>
+</template>