@feedmepos/mf-order-setting 0.0.21-beta.3 → 0.0.22

package/src/views/order-settings/servicecharge/ServiceChargeRule.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import { sentenceCase } from 'change-case'
-import { type PropType, computed, onMounted, ref } from 'vue'
-import type { CategorizedItem } from '@/helpers/menu'
+import { type PropType, computed, onMounted, ref, watch } from 'vue'
+import type { CategorizedItem, Item } from '@/helpers/menu'
 import RateInput from './RateInput.vue'
 import type { FdoServiceChargeRule, FdoTable } from '@feedmepos/core/entity'
 import type { AdjustmentAmount } from '@/helpers/number'
@@ -46,14 +45,6 @@ const emits = defineEmits<{
   (event: 'delete'): void
 }>()
 
-const itemSelected = computed(() => {
-  if (props.isLoadingMenu) return t('order.loadingMenu')
-  if (!props.items.length) return t('order.noAvailableItem')
-  const items = props.modelValue.condition.items
-  if (!items) return t('order.all')
-  return `${items.length} ${t('order.item')}`
-})
-
 const tableSelected = computed(() => {
   if (props.isLoadingTable) return t('order.loadingTable')
   if (!props.tables.length) return t('order.noAvailableTable')
@@ -76,8 +67,8 @@ function convertServiceChargeOrderToI18n(serviceChargeType: ServiceChargeOrderTy
       return t('order.dineIn')
     case ServiceChargeOrderType.takeaway:
       return t('order.takeaway')
-    case ServiceChargeOrderType.inHouseDelivery: 
-      return t('order.deliveryTitle', {company: "In house"})
+    case ServiceChargeOrderType.inHouseDelivery:
+      return t('order.deliveryTitle', { company: 'In house' })
     case ServiceChargeOrderType.deliveryCompany:
       return t('order.deliveryCompany')
     case ServiceChargeOrderType.pickup:
@@ -99,33 +90,6 @@ const diningValue = computed(() => {
   return props.modelValue.condition.orderType
 })
 
-let initialValue = props.modelValue.condition.items
-if (!initialValue) {
-  initialValue = props.items.reduce<string[]>((pv, category) => {
-    pv = [...pv, ...category.items.map((item) => item._id)]
-    return pv
-  }, [])
-}
-
-let initialValueTable = props.modelValue.condition.tables || props.tables.map((table) => table.name)
-if (!initialValueTable) {
-  initialValueTable = props.tables.map((table) => table.name)
-}
-
-const itemValue = ref<string[]>(initialValue)
-const tableValue = ref<string[]>(initialValueTable)
-
-function updateItems() {
-  sideSheetItem.value = false
-  emits('update:model-value', {
-    ...props.modelValue,
-    condition: {
-      ...props.modelValue.condition,
-      items: itemValue.value
-    }
-  })
-}
-
 function updateTable() {
   sideSheetTable.value = false
   emits('update:model-value', {
@@ -137,17 +101,6 @@ function updateTable() {
   })
 }
 
-function modifyItems(items: string[], parentId: string) {
-  itemValue.value = items
-  const parentItem = props.items.find((item) => item.id === parentId)
-  if (parentItem) {
-    const parentSelected = parentItem.items.every((subItem) =>
-      itemValue.value.includes(subItem._id)
-    )
-    selectedCategoryItems.value[parentId] = parentSelected
-  }
-}
-
 function updateRate(v: AdjustmentAmount) {
   emits('update:model-value', {
     ...props.modelValue,
@@ -168,13 +121,6 @@ function updateDiningOption(options: F_SERVICE_CHARGE_ORDER_TYPE[]) {
 const sideSheetItem = ref<boolean>(false)
 const sideSheetTable = ref<boolean>(false)
 
-function toggleSideSheet() {
-  sideSheetItem.value = true
-}
-function toggleSideSheetTable() {
-  sideSheetTable.value = true
-}
-
 const parent = ref<boolean>(false)
 const nestedVal = ref<F_SERVICE_CHARGE_ORDER_TYPE[]>(diningValue.value)
 
@@ -196,101 +142,128 @@ function handleChildUpdate(ev: F_SERVICE_CHARGE_ORDER_TYPE[]) {
   updateDiningOption(ev)
 }
 
-const parentTable = ref<boolean>(false)
-const nestedValTable = ref<string[]>(initialValueTable)
+//Table
+const tableValue = ref<string[] | null | undefined>(props.modelValue.condition.tables)
 
+const selectedTables = computed<Record<string, { isSelected: boolean }>>(() => {
+  return props.tables?.reduce((pv: Record<string, { isSelected: boolean }>, curr: FdoTable) => {
+    const isSelected = !tableValue.value || tableValue.value?.includes(curr.name)
+
+    pv[curr.name ?? ''] = {
+      isSelected
+    }
+
+    return pv
+  }, {})
+})
 const checkboxChildrenTable = computed(() => {
-  const tables = props.tables.map((table) => table.name)
+  const tables = props.tables.map((table: FdoTable) => table.name)
   return Array.isArray(tables) ? tables : []
 })
 
 function handleParentUpdateTable(ev: boolean) {
-  if (Array.isArray(checkboxChildrenTable.value)) {
-    ev ? (nestedValTable.value = checkboxChildrenTable.value) : (nestedValTable.value = [])
-    parentTable.value = ev
-    tableValue.value = nestedValTable.value
+  if (ev) {
+    tableValue.value = null
+  } else {
+    tableValue.value = []
   }
 }
 
-function handleChildUpdateTable(ev: string[]) {
-  nestedValTable.value = Array.isArray(ev) ? ev : []
-  parentTable.value = nestedValTable.value.length === checkboxChildrenTable.value.length
-  tableValue.value = ev
-}
-
-onMounted(() => {
-  parent.value = nestedVal.value.length === checkboxChildren.value.length
-
-  if (Array.isArray(nestedValTable.value) && Array.isArray(checkboxChildrenTable.value)) {
-    parentTable.value = nestedValTable.value.length === checkboxChildrenTable.value.length
-  }
-
-  if (props.items.length > 0) {
-    selectedCategoryItems.value = props.items.reduce(
-      (acc, item) => {
-        const allSubItemsSelected = item.items.every((subItem) =>
-          itemValue.value.includes(subItem._id)
-        )
-        acc[item.id ?? ''] = allSubItemsSelected
-        return acc
-      },
-      {} as Record<string, boolean>
-    )
+function handleChildUpdateTable(ev: boolean, name: string) {
+  if (ev) {
+    tableValue.value = [...(tableValue.value ?? []), name]
+  } else {
+    if (!tableValue.value) {
+      tableValue.value = props.tables.map((t) => t.name)
+    }
+    tableValue.value = tableValue.value.filter((t) => t !== name)
   }
 
-  initializeMenuState(filteredItem.value);
-
-})
-
-const selectedCategoryItems = ref<Record<string, boolean>>({})
-
-function handleCategorySelection(categoryId: string, isSelected: boolean) {
-  selectedCategoryItems.value = {
-    ...selectedCategoryItems.value,
-    [categoryId]: isSelected
-  }
-  if (isSelected) {
-    itemValue.value = [
-      ...itemValue.value,
-      ...(props.items.find((item) => item.id === categoryId)?.items.map((subItem) => subItem._id) ||
-        [])
-    ]
-  } else {
-    itemValue.value = itemValue.value.filter(
-      (id) =>
-        !props.items
-          .find((item) => item.id === categoryId)
-          ?.items.map((subItem) => subItem._id)
-          .includes(id)
-    )
+  tableValue.value = Array.from(new Set(tableValue.value))
+  if (tableValue.value.length === props.tables.length) {
+    tableValue.value = null
   }
 }
 
-function isIndeterminate(parentId: string): boolean {
-  const parentItem = props.items.find((item) => item.id === parentId)
-  if (!parentItem) return false
-
-  const selectedSubItemsCount = parentItem.items.filter((subItem) =>
-    itemValue.value.includes(subItem._id)
-  ).length
-  return selectedSubItemsCount > 0 && selectedSubItemsCount < parentItem.items.length
-}
+onMounted(() => {
+  parent.value = nestedVal.value.length === checkboxChildren.value.length
+  initializeMenuState(filteredItem.value)
+})
 
 const searchValueTable = ref('')
-
 const filteredTable = computed(() =>
-  props.tables.filter((e) =>
+  props.tables.filter((e: FdoTable) =>
     searchValueTable.value
       ? e.name.toLocaleLowerCase().includes(searchValueTable.value.toLocaleLowerCase())
       : true
   )
 )
 
+const showTable = ref(true)
+function toggleShowTable() {
+  showTable.value = !showTable.value
+}
+
+const showMenuState = ref<Record<string, boolean>>({})
+function toggleShowMenu(itemId: number) {
+  showMenuState.value[itemId] = !showMenuState.value[itemId]
+}
+function initializeMenuState(items: any[]) {
+  showMenuState.value = items.reduce(
+    (acc, _, index) => {
+      acc[index] = true
+      return acc
+    },
+    {} as Record<number, boolean>
+  )
+}
+
+//Items
 const searchValueItem = ref('')
 
+const itemValue = ref<string[] | null | undefined>(props.modelValue.condition.items)
+
+const selectedCategories = computed<
+  Record<string, { isAllSelected: boolean; isSomeSelected: boolean }>
+>(() => {
+  return props.items?.reduce(
+    (
+      pv: Record<string, { isAllSelected: boolean; isSomeSelected: boolean }>,
+      curr: CategorizedItem
+    ) => {
+      const selectedItems = curr.items.filter((itm) => itemValue.value?.includes(itm._id))
+      const _isAllItemSelected = !itemValue.value || selectedItems.length === curr.items.length
+
+      const isSomeSelected = !itemValue.value || selectedItems.length > 0
+
+      pv[curr?.id ?? ''] = {
+        isAllSelected: _isAllItemSelected,
+        isSomeSelected
+      }
+
+      return pv
+    },
+    {}
+  )
+})
+
+const totalCategorizedItemsCount = computed(() => {
+  return props.items.reduce((pv: number, curr: CategorizedItem) => {
+    pv += curr.items.length
+    return pv
+  }, 0)
+})
+
+const itemSelected = computed(() => {
+  if (props.isLoadingMenu) return t('order.loadingMenu')
+  if (!props.items.length) return t('order.noAvailableItem')
+  const items = props.modelValue.condition.items
+  if (!items) return t('order.all')
+  return `${items.length} ${t('order.item')}`
+})
 const filteredItem = computed(() => {
   return props.items
-    .map((item) => {
+    .map((item: CategorizedItem) => {
       const filteredSubItems = item.items.filter((subItem) =>
         searchValueItem.value
           ? subItem.name.toLowerCase().includes(searchValueItem.value.toLowerCase())
@@ -302,27 +275,79 @@ const filteredItem = computed(() => {
         items: filteredSubItems
       }
     })
-    .filter((item) => item.items.length > 0)
+    .filter((item: CategorizedItem) => item.items.length > 0)
 })
 
-const showTable = ref(true)
-function toggleShowTable() {
-  showTable.value = !showTable.value
+function selectAllItems(v: boolean) {
+  if (v) {
+    itemValue.value = null
+  } else {
+    itemValue.value = []
+  }
 }
 
-const showMenuState = ref<Record<string, boolean>>({})
+function handleCategorySelection(categoryId: string, isSelected: boolean) {
+  initItemValue(isSelected)
 
-function toggleShowMenu(itemId: number) {
-  showMenuState.value[itemId] = !showMenuState.value[itemId]
+  const categoryItems =
+    props.items.find((item: CategorizedItem) => item.id === categoryId)?.items ?? []
+  const categoryItemIds = categoryItems.map((ci: Item) => ci._id)
+  if (isSelected) {
+    itemValue.value = [...(itemValue.value ?? []), ...categoryItemIds]
+  } else {
+    itemValue.value = itemValue.value?.filter((id: string) => !categoryItemIds.includes(id))
+  }
+  itemValue.value = Array.from(new Set(itemValue.value))
 }
 
-function initializeMenuState(items: any[]) {
-  showMenuState.value = items.reduce((acc, _, index) => {
-    acc[index] = true;
-    return acc;
-  }, {} as Record<number, boolean>);
+function initItemValue(v: boolean) {
+  if (!itemValue.value) {
+    if (v) {
+      itemValue.value = []
+    } else {
+      itemValue.value = props.items.reduce((pv: string[], curr: CategorizedItem) => {
+        pv = [...pv, ...curr.items.map((i) => i._id)]
+        return pv
+      }, [])
+    }
+  }
+}
+
+function modifyItems(v: boolean, subItemId: string) {
+  initItemValue(v)
+  if (v) {
+    itemValue.value = [...(itemValue.value ?? []), subItemId]
+  } else {
+    itemValue.value = itemValue.value?.filter((i: string) => i !== subItemId)
+  }
+
+  itemValue.value = Array.from(new Set(itemValue.value))
+}
+
+function updateItems() {
+  sideSheetItem.value = false
+  emits('update:model-value', {
+    ...props.modelValue,
+    condition: {
+      ...props.modelValue.condition,
+      items: itemValue.value
+    }
+  })
 }
 
+function toggleSideSheet() {
+  sideSheetItem.value = true
+}
+function toggleSideSheetTable() {
+  sideSheetTable.value = true
+}
+
+watch(
+  () => props.items,
+  () => {
+    initializeMenuState(filteredItem.value)
+  }
+)
 </script>
 
 <template>
@@ -338,19 +363,31 @@ function initializeMenuState(items: any[]) {
   <FmSideSheet :header="t('order.selectItem')" :maxWidth="600" dismiss-away v-model="sideSheetItem">
     <div>
       <div class="text-fm-color-typo-secondary mt-5 mb-5 flex flex-row">
-        {{ props.modelValue.condition.items?.length ?? initialValue?.length }} {{ t('order.productSelected') }}
-        <FmSearch v-model:model-value="searchValueItem" class="ml-auto" :placeholder="t('order.search')" />
+        {{ itemValue?.length ?? totalCategorizedItemsCount }}
+        {{ t('order.productSelected') }}
+        <FmSearch
+          v-model:model-value="searchValueItem"
+          class="ml-auto"
+          :placeholder="t('order.search')"
+        />
       </div>
 
+      <FmCheckbox
+        :label="t('order.selectAllItemsIncludeCustomItem')"
+        :model-value="!itemValue"
+        value=""
+        @update:model-value="(v: boolean) => selectAllItems(v)"
+      ></FmCheckbox>
+
       <div v-for="(item, index) in filteredItem" :key="index" class="flex flex-col mb-6">
         <FmCard variant="outlined" class="p-5">
           <div class="fm-corner-radius-lg flex flex-col">
             <div class="flex flex-row">
               <div class="flex flex-row">
                 <FmCheckbox
-                  :model-value="selectedCategoryItems[item.id ?? '']"
+                  :model-value="selectedCategories[item.id ?? ''].isAllSelected"
                   value=""
-                  :indeterminate="isIndeterminate(item.id ?? '')"
+                  :indeterminate="selectedCategories[item.id ?? ''].isSomeSelected"
                   @update:model-value="handleCategorySelection(item.id ?? '', $event)"
                 />
                 <div class="font-bold ml-2">{{ item.name }}</div>
@@ -374,11 +411,12 @@ function initializeMenuState(items: any[]) {
               <FmCheckbox
                 v-for="(subItem, subIndex) in item.items"
                 :key="subIndex"
-                :model-value="itemValue"
+                :model-value="!itemValue || itemValue.includes(subItem._id)"
                 :label="subItem.name"
                 :value="subItem._id"
-                @update:model-value="(values: string[]) => modifyItems(values, item.id ?? '')"
-              />
+                @update:model-value="(v: boolean) => modifyItems(v, subItem._id)"
+              >
+              </FmCheckbox>
             </div>
           </div>
         </FmCard>
@@ -387,7 +425,12 @@ function initializeMenuState(items: any[]) {
     <template #side-sheet-footer>
       <div class="flex gap-8 items-center justify-start">
         <FmButton variant="primary" :label="t('order.confirm')" size="lg" @click="updateItems" />
-        <FmButton variant="secondary" :label="t('order.cancel')" size="lg" @click="sideSheetItem = false" />
+        <FmButton
+          variant="secondary"
+          :label="t('order.cancel')"
+          size="lg"
+          @click="sideSheetItem = false"
+        />
       </div>
     </template>
   </FmSideSheet>
@@ -396,21 +439,29 @@ function initializeMenuState(items: any[]) {
     <div class="font-semibold mb-3">{{ t('order.selectTable') }}</div>
     <FmButton variant="plain" :label="tableSelected" size="lg" @click="toggleSideSheetTable" />
   </div>
-  <FmSideSheet :header="t('order.selectTable')" :maxWidth="600" dismiss-away v-model="sideSheetTable">
+  <FmSideSheet
+    :header="t('order.selectTable')"
+    :maxWidth="600"
+    dismiss-away
+    v-model="sideSheetTable"
+  >
     <div class="text-fm-color-typo-secondary mt-5 mb-5 flex flex-row">
-      {{ props.modelValue.condition.tables?.length ?? props.tables.length }} {{ t('order.tableSelected') }}
-      <FmSearch v-model:model-value="searchValueTable" class="ml-auto" :placeholder="t('order.search')" />
+      {{ props.modelValue.condition.tables?.length ?? props.tables.length }}
+      {{ t('order.tableSelected') }}
+      <FmSearch
+        v-model:model-value="searchValueTable"
+        class="ml-auto"
+        :placeholder="t('order.search')"
+      />
     </div>
 
     <FmCard variant="outlined" class="p-5">
       <div class="flex flex-row">
         <FmCheckbox
-          :value="parentTable"
-          :model-value="parentTable"
+          value=""
+          :model-value="!tableValue"
           :label="t('order.all')"
-          :indeterminate="
-            nestedValTable.length > 0 && nestedValTable.length < checkboxChildrenTable.length
-          "
+          :indeterminate="!!tableValue && tableValue.length > 0"
           @update:model-value="handleParentUpdateTable"
         />
         <FmButton
@@ -436,10 +487,10 @@ function initializeMenuState(items: any[]) {
           v-if="showTable"
         >
           <FmCheckbox
-            :model-value="nestedValTable"
+            :model-value="selectedTables[item.name].isSelected"
             :label="item.name"
-            :value="item.name"
-            @update:model-value="handleChildUpdateTable"
+            value=""
+            @update:model-value="(v: boolean) => handleChildUpdateTable(v, item.name)"
           />
         </div>
       </div>
@@ -447,7 +498,12 @@ function initializeMenuState(items: any[]) {
     <template #side-sheet-footer>
       <div class="flex gap-8 items-center justify-start">
         <FmButton variant="primary" :label="t('order.confirm')" size="lg" @click="updateTable" />
-        <FmButton variant="secondary" :label="t('order.cancel')" size="lg" @click="sideSheetTable = false" />
+        <FmButton
+          variant="secondary"
+          :label="t('order.cancel')"
+          size="lg"
+          @click="sideSheetTable = false"
+        />
       </div>
     </template>
   </FmSideSheet>

package/src/views/order-settings/servicecharge/ServiceChargeSetting.vue

@@ -253,6 +253,7 @@ watch(
       }
       initialize(restaurantSetting)
       await startAsyncCallWithErr(tableSettingStore.readTables)
+      await menuStore.readMenu()
     }
   },
   { immediate: true }