@feedmepos/mf-order-setting 0.0.2 → 0.0.6

package/src/views/all-orders/FilterStatusMenu.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <FmMenu>
+      <template #menu-button>
+        <FmButton
+          variant="tertiary"
+          :label="`Status: ${selectedFilter || 'All'}`"
+          append-icon="expand_more"
+          class="text-fm-color-typo-secondary"
+          :style="{ backgroundColor: '#F2F2F7' }"
+        />
+      </template>
+      <FmMenuItem
+        :key="'all'"
+        :model-value="selectedFilter === null"
+        label="All"
+        @click="updateFilter(null)"
+      />
+      <FmMenuItem
+        v-for="status in options"
+        :key="status.value"
+        :model-value="selectedFilter === status.value"
+        :label="status.label"
+        @click="updateFilter(status.value)"
+      />
+    </FmMenu>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  options: { label: string; value: string }[]
+  selectedFilter: string | null
+  filterType: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:filter', value: { filterType: string; value: string | null }): void
+}>()
+
+function updateFilter(value: string | null) {
+  emit('update:filter', { filterType: props.filterType, value })
+}
+</script>

package/src/views/all-orders/Orders.vue

@@ -0,0 +1,524 @@
+<script setup lang="ts">
+import { sentenceCase } from 'change-case'
+import { onMounted, ref, computed, watch, h } from 'vue'
+import { F_ORDER_TYPE, FdoRestaurant } from '@feedmepos/core/entity'
+import { orderPlatforms, type Order } from './order'
+import { formatCurrency } from '@/helpers/currency'
+import type { ColumnDef, FmTabProps } from '@feedmepos/ui-library'
+import { useCoreStore } from '@feedmepos/mf-common'
+import { OrderQueryDto } from '@feedmepos/ordering/package/entity'
+import { format, parseISO } from 'date-fns'
+import { restaurantApi } from '@/api/restaurant-setting'
+import ActionMenuCell from './ActionMenuCell.vue'
+import FilterStatus from './FilterStatus.vue'
+import { F_DELIVERY_STATUS } from '@feedmepos/ordering/package/entity'
+import { useDialog } from '@feedmepos/ui-library'
+import ReflowOrder from './ReflowOrder.vue'
+import FilterRestaurant from './FilterRestaurant.vue'
+import { useSnackbarFunctions } from '@/components/snackbar'
+import { remoteOrderApi } from '@/api/remoteOrder'
+import { QInfiniteScroll } from 'quasar'
+const { showSuccess, showError } = useSnackbarFunctions()
+
+const loadingPage = ref(true)
+const orders = ref<Order<any>[]>([])
+const orderPlatform = ref(orderPlatforms.FEEDME)
+const menuI = ref<{ label: string; value: FdoRestaurant }[]>([])
+const singleModelValue = ref<FdoRestaurant | null>(null)
+const selectedTab = ref('feedme')
+const tempOrderType = ref<F_ORDER_TYPE[]>([])
+const multiModelValue = ref<Record<string, boolean>>({})
+const selectedFpStatusFilter = ref<string | null>(null)
+const selectedShopeeFoodStatusFilter = ref<string | null>(null)
+const selectedGfStatusFilter = ref<string | null>(null)
+const selectedFeedMeStatusFilter = ref<string | null>(null)
+const restaurant = ref<FdoRestaurant>()
+const loading = ref(false)
+const hasMoreOrder = ref(true)
+const searchValue = ref('')
+
+const dataLoadPerReq = 50
+const skip = ref(0)
+const filterSlot = ref('')
+const orderTypes = ref<F_ORDER_TYPE[]>([F_ORDER_TYPE.Enum.DELIVERY])
+const orderTypeFilterOptions = Object.values(F_ORDER_TYPE.Enum).map((type) => ({
+  label: sentenceCase(type),
+  value: type
+}))
+
+const hasFilterRestaurant = computed(() => !!restaurant.value)
+const getOrderReq = computed<OrderQueryDto>(() => ({
+  limit: dataLoadPerReq,
+  skip: skip.value,
+  type: orderTypes.value,
+  restaurant: restaurant.value?._id,
+  slot: filterSlot.value,
+  deliveryStatus: hasFilterRestaurant.value
+    ? undefined
+    : [
+        F_DELIVERY_STATUS.Enum.COMPLETE,
+        F_DELIVERY_STATUS.Enum.CANCELED,
+        F_DELIVERY_STATUS.Enum.RETURNED
+      ]
+}))
+const orderSettingData = computed(() => {
+  if (!orders.value.length) return []
+
+  return orders.value.map((order) => {
+    const quoteDeliveryFee = formatCurrency(order.doc?.option?.quoteDeliveryFee?.total) ?? 0
+    const actualDeliveryFee = formatCurrency(order.doc?.option?.providers?.at(-1)?.deliveryFee) ?? 0
+    const allocatingAt = order.doc?.option?.allocatingAt
+    const driverAllocated = allocatingAt ? format(parseISO(allocatingAt), 'dd MMM yyyy, h:mma') : ''
+
+    return {
+      createdAt: order.orderAt?.format('DD MMM YYYY, h:mmA'),
+      restaurant: order.restaurant,
+      type: sentenceCase(order.orderType),
+      slot: order.slot,
+      seqNumber: order.seqNumber,
+      status: sentenceCase(order.status),
+      deliveryFee: `${quoteDeliveryFee} / ${actualDeliveryFee}`,
+      driver: driverAllocated
+    }
+  })
+})
+
+const extraInfo = computed((): ColumnDef<any>[] =>
+  (orderPlatform.value.extraInfo ?? []).map((info) => ({
+    accessorKey: info.name,
+    meta: { width: info.option?.style },
+    enableSorting: false,
+    header: info.label,
+    cell: (v: any) => {
+      const status = v.row.original.status
+      return info.name === 'status'
+        ? h('div', { class: getClassForStatus(status) }, status)
+        : h('div', {}, v.row.original[info.name])
+    }
+  }))
+)
+
+const columns = computed((): ColumnDef<any>[] => [
+  {
+    accessorKey: 'createdAt',
+    header: () => 'Created at',
+    meta: {
+      width: '250px'
+    },
+    enableSorting: false
+  },
+  {
+    accessorKey: 'restaurant.name',
+    header: () => 'Restaurant',
+    meta: {
+      width: '300px'
+    },
+    enableSorting: false
+  },
+  {
+    accessorKey: 'type',
+    header: () => 'Order type',
+    enableSorting: false
+  },
+  {
+    accessorKey: 'slot',
+    header: () => 'Slot',
+    enableSorting: false
+  },
+  ...extraInfo.value,
+  {
+    accessorKey: 'action',
+    header: () => '',
+    meta: {
+      width: '50px'
+    },
+    cell: ({ row }) => {
+      const orderId = row.original.slot
+      const order = orders.value.find((order) => order.slot === orderId)
+
+      return h(ActionMenuCell, {
+        order: order,
+        onActionCompleted: (updatedOrder: any) => updateOrder(row.index, updatedOrder)
+      })
+    },
+    enableSorting: false
+  }
+])
+
+const filteredOrderSettingData = computed(() => {
+  switch (selectedTab.value) {
+    case 'foodpanda':
+      return orderSettingData.value.filter(
+        (item) =>
+          selectedFpStatusFilter.value === null || item.status === selectedFpStatusFilter.value
+      )
+    case 'shopeefood':
+      return orderSettingData.value.filter(
+        (item) =>
+          selectedShopeeFoodStatusFilter.value === null ||
+          item.status === selectedShopeeFoodStatusFilter.value
+      )
+    case 'grabfood':
+      return orderSettingData.value.filter(
+        (item) =>
+          selectedGfStatusFilter.value === null || item.status === selectedGfStatusFilter.value
+      )
+    case 'feedme':
+      return orderSettingData.value.filter(
+        (item) =>
+          selectedFeedMeStatusFilter.value === null ||
+          item.status === selectedFeedMeStatusFilter.value
+      )
+    default:
+      return orderSettingData.value
+  }
+})
+
+const selectedLabels = computed(() => {
+  const selected = Object.keys(multiModelValue.value)
+    .filter((key) => multiModelValue.value[key])
+    .map((key) => sentenceCase(key))
+
+  return selected.length === orderTypeFilterOptions.length
+    ? 'Order type: All'
+    : selected.length
+      ? `Order type: ${selected.join(', ')}`
+      : 'Order type: Not set'
+})
+
+async function loadOrders() {
+  try {
+    loading.value = true
+    const newOrders = await orderPlatform.value.getOrders(getOrderReq.value)
+    if (newOrders.length === 0) {
+      hasMoreOrder.value = false
+      return
+    }
+    orders.value = [...orders.value, ...newOrders]
+    hasMoreOrder.value = newOrders.length >= dataLoadPerReq
+    if (hasMoreOrder.value) {
+      skip.value += dataLoadPerReq
+    }
+  } catch (err) {
+    hasMoreOrder.value = false
+  } finally {
+    loading.value = false
+  }
+}
+
+function updateOrder(index: number, order?: Order<any>) {
+  if (order) orders.value.splice(index, 1, order)
+}
+
+const resetFilter = ref(false)
+
+const resetProps = computed(() => {
+  if (resetFilter.value) {
+    return {
+      reset: true
+    }
+  }
+  return {}
+})
+
+async function reset() {
+  restaurant.value = undefined
+  filterSlot.value = ''
+  singleModelValue.value = null
+  orderTypes.value = [F_ORDER_TYPE.Enum.DELIVERY]
+  tempOrderType.value = orderTypes.value
+  selectedFpStatusFilter.value = null
+  selectedGfStatusFilter.value = null
+  selectedShopeeFoodStatusFilter.value = null
+  resetFilter.value = true
+  setTimeout(() => {
+    resetFilter.value = false
+  }, 0)
+
+  await refetchOrders()
+}
+
+async function refetchOrders() {
+  loadingPage.value = true
+  skip.value = 0
+  orders.value = []
+  hasMoreOrder.value = true
+  await loadOrders()
+  loadingPage.value = false
+}
+
+function updateTempOrderType() {
+  tempOrderType.value = Object.keys(multiModelValue.value).filter(
+    (key) => multiModelValue.value[key]
+  ) as F_ORDER_TYPE[]
+}
+
+function applyOrderTypeFilter() {
+  orderTypes.value = tempOrderType.value
+  refetchOrders()
+}
+
+function waitForSessionUserInitialization(): Promise<void> {
+  return new Promise((resolve) => {
+    const interval = setInterval(() => {
+      if (useCoreStore().sessionUser.value) {
+        clearInterval(interval)
+        resolve()
+      }
+    }, 100)
+  })
+}
+
+function initializeMultiModelValue() {
+  for (const item of orderTypeFilterOptions) {
+    multiModelValue.value[item.value] = orderTypes.value.includes(item.value)
+  }
+}
+
+type StatusType =
+  | 'Accepted'
+  | 'Draft'
+  | 'New'
+  | 'Rejected'
+  | 'Pending'
+  | 'Cancelled'
+  | 'Declined'
+  | 'Pending payment'
+
+function getClassForStatus(status: StatusType): string {
+  const baseClass =
+    ' bg-fm-color-system-primary-100 fm-typo-en-body-md-600 border fm-corner-radius-lg w-max gap-8 p-4 '
+  const statusClasses: Record<StatusType, string> = {
+    Draft: baseClass + 'text-fm-color-typo-primary',
+    Accepted: baseClass + 'text-fm-color-typo-success bg-fm-color-system-success-100',
+    New: baseClass + 'text-fm-color-typo-warning bg-fm-color-system-warning-100',
+    Pending: baseClass + 'text-fm-color-typo-warning bg-fm-color-system-warning-100',
+    'Pending payment': baseClass + 'text-fm-color-typo-warning bg-fm-color-system-warning-100',
+    Rejected: baseClass + 'text-fm-color-typo-error bg-fm-color-system-error-100',
+    Declined: baseClass + 'text-fm-color-typo-error bg-fm-color-system-error-100',
+    Cancelled: baseClass + 'text-fm-color-typo-error bg-fm-color-system-error-100'
+  }
+  return statusClasses[status] || baseClass + 'text-fm-color-typo-primary'
+}
+
+function toggleItem(value: string | number): void {
+  multiModelValue.value[value] = !multiModelValue.value[value]
+  updateTempOrderType()
+  applyOrderTypeFilter()
+}
+
+watch(singleModelValue, (newValue) => {
+  if (newValue) {
+    restaurant.value = newValue
+    refetchOrders()
+  }
+})
+
+watch(
+  tempOrderType,
+  (newSelection) => {
+    const newSelectionSet = new Set(newSelection)
+    for (const key in multiModelValue.value) {
+      multiModelValue.value[key] = newSelectionSet.has(key as F_ORDER_TYPE)
+    }
+  },
+  { immediate: true }
+)
+
+watch(selectedTab, async (newPlatform) => {
+  switch (newPlatform) {
+    case 'feedme':
+      await selectOrderPlatform('FEEDME')
+      break
+    case 'grabfood':
+      await selectOrderPlatform('GRAB_FOOD')
+      break
+    case 'foodpanda':
+      await selectOrderPlatform('FOOD_PANDA')
+      break
+    case 'shopeefood':
+      await selectOrderPlatform('SHOPEE_FOOD')
+  }
+})
+
+onMounted(async () => {
+  if (!useCoreStore().sessionUser.value) {
+    await waitForSessionUserInitialization()
+  }
+  const res = await restaurantApi.admin.readAllManagable()
+  menuI.value = res.map((item: any) => ({
+    label: item.profile.name,
+    value: item as FdoRestaurant
+  }))
+
+  await loadOrders()
+  loadingPage.value = false
+
+  initializeMultiModelValue()
+})
+
+const menuItems: FmTabProps[] = [
+  { label: 'FeedMe', value: 'feedme' },
+  { label: 'Grabfood', value: 'grabfood' },
+  { label: 'Foodpanda', value: 'foodpanda' },
+  { label: 'Shopeefood', value: 'shopeefood' }
+]
+
+async function selectOrderPlatform(platform: string) {
+  orderPlatform.value = orderPlatforms[platform]
+  loadingPage.value = true
+  await refetchOrders()
+  loadingPage.value = false
+}
+
+const dialog = useDialog()
+
+const openDialog = () => {
+  let reflowData: any
+  dialog
+    .open({
+      title: 'Reflow order',
+      primaryActions: { text: 'Reflow', close: false },
+      contentComponent: ReflowOrder,
+      contentComponentProps: {
+        menuItems: menuI.value,
+        'onUpdate:modelValue': (v: any) => {
+          reflowData = v
+        }
+      }
+    })
+    .onPrimary(async () => {
+      const { platformValue, restaurant, slot, formattedDate } = reflowData
+      const res = await reflowOrder(platformValue, restaurant, slot, formattedDate)
+      if (res) {
+        dialog.close()
+        await refetchOrders()
+      }
+    })
+}
+
+async function reflowOrder(
+  platformValue: string,
+  restaurant: FdoRestaurant,
+  slot: string,
+  formattedDate: string
+) {
+  try {
+    if (!platformValue) {
+      showError('Platform is required')
+      return
+    }
+
+    if (!restaurant) {
+      showError('Restaurant is required')
+      return
+    }
+
+    if (platformValue === 'grabfood') {
+      await remoteOrderApi.integratedDelivery.reflowGfOrderNotInDb({
+        restaurantId: restaurant._id,
+        slot: `GF-${slot}`,
+        date: formattedDate
+      })
+    } else if (platformValue === 'foodpanda') {
+      await remoteOrderApi.integratedDelivery.reflowFpOrderNotInDb({
+        restaurantId: restaurant._id,
+        slot: slot
+      })
+    }
+
+    showSuccess('Order reflowed successfully')
+    return true
+  } catch (error: any) {
+    const errorMessage = error?.message || 'An unknown error occurred. Please try again.'
+    showError(`${errorMessage}`)
+  }
+}
+
+function handleRestaurantSelected(restaurant: FdoRestaurant) {
+  singleModelValue.value = restaurant
+}
+
+function onLoad(index: number, done: () => void) {
+  if (hasMoreOrder.value && !loading.value) {
+    loadOrders().finally(done)
+  } else {
+    done()
+  }
+}
+</script>
+
+<template>
+  <div>
+    <FmTabs v-model:model-value="selectedTab" :items="menuItems" :disabled="loadingPage" />
+  </div>
+  <div class="flex justify-between items-center mb-5 mt-5">
+    <div class="flex items-center space-x-4">
+      <FilterRestaurant
+        :menu-items="menuI"
+        label="All restaurant"
+        v-model="singleModelValue"
+        @restaurant-selected="handleRestaurantSelected"
+      />
+
+      <FmMenu :close-on-click="false" v-if="selectedTab === 'feedme'">
+        <template #menu-button>
+          <FmButton
+            variant="tertiary"
+            :label="selectedLabels"
+            prepend-icon="takeout_dining"
+            append-icon="expand_more"
+            class="text-fm-color-typo-secondary"
+            :style="{ backgroundColor: '#F2F2F7' }"
+          />
+        </template>
+        <FmMenuItem
+          v-for="item in orderTypeFilterOptions"
+          :key="item.value"
+          :model-value="multiModelValue[item.value] || false"
+          has-checkbox
+          :label="item.label"
+          @click="toggleItem(item.value)"
+        />
+      </FmMenu>
+      <FilterStatus
+        :selected-tab="selectedTab"
+        :has-restaurant="hasFilterRestaurant"
+        :reset="resetProps.reset"
+        @update:selectedFpStatusFilter="(value) => (selectedFpStatusFilter = value)"
+        @update:selectedShopeeFoodStatusFilter="(value) => (selectedShopeeFoodStatusFilter = value)"
+        @update:selectedGfStatusFilter="(value) => (selectedGfStatusFilter = value)"
+        @update:selectedFeedMeStatusFilter="
+          (value: string | null) => (selectedFeedMeStatusFilter = value)
+        "
+      />
+    </div>
+
+    <div class="flex items-center">
+      <FmButton label="Reflow order" @click="openDialog" class="mr-5" />
+      <FmSearch v-model:modelValue="searchValue" placeholder="Search" />
+      <FmButton icon="sync" variant="tertiary" @click="reset" class="ml-2" />
+    </div>
+  </div>
+
+  <div v-if="loadingPage" class="flex justify-center h-3/5">
+    <FmCircularProgress size="xxl" />
+  </div>
+
+  <div class="flex-nowrap text-nowrap">
+    <q-infinite-scroll @load="onLoad" :offset="250">
+    <FmTable
+      v-if="!loadingPage && filteredOrderSettingData.length > 0"
+      :row-data="filteredOrderSettingData"
+      :column-defs="columns"
+      :search-value="searchValue"
+      :hideFooter="true"
+      :pageSize="filteredOrderSettingData.length"
+    />
+  </q-infinite-scroll>
+  <FmCircularProgress size="xl" v-if="hasMoreOrder && !loadingPage"/>
+    <div v-if="!loadingPage && filteredOrderSettingData.length === 0" class="m-5">
+      No results found.
+    </div>
+  </div>
+</template>

package/src/views/all-orders/ReflowOrder.vue

@@ -0,0 +1,105 @@
+<script lang="ts" setup>
+import { FdoRestaurant } from '@feedmepos/core/entity'
+import { ref, watch } from 'vue'
+import { useSnackbarFunctions } from '@/components/snackbar'
+import FilterRestaurant from './FilterRestaurant.vue'
+import moment from 'moment'
+
+const platformOptions = [
+  { label: 'GrabFood', value: 'grabfood' },
+  { label: 'FoodPanda', value: 'foodpanda' }
+]
+
+const selectedPlatform = ref<string | null>(null)
+const selectedRestaurant = ref<FdoRestaurant | null>(null)
+const slotValue = ref('')
+
+const dateValue = ref<Date>(new Date())
+const dateString = moment(dateValue.value).format('YYYY-MM-DD')
+const formattedDate = ref<string | null>(dateString)
+const props = defineProps<{
+  menuItems: { label: string; value: FdoRestaurant }[]
+}>()
+const menuI = ref<{ label: string; value: FdoRestaurant }[]>(props.menuItems)
+
+const singleModelValue = ref<FdoRestaurant | null>(null)
+
+const emits = defineEmits<{
+  (
+    e: 'update:model-value',
+    payload: {
+      platformValue: string | null
+      restaurant: FdoRestaurant | null
+      slot: string
+      formattedDate: string | null
+    }
+  ): void
+}>()
+
+function emitUpdate() {
+  emits('update:model-value', {
+    platformValue: selectedPlatform.value,
+    restaurant: selectedRestaurant.value,
+    slot: slotValue.value,
+    formattedDate: formattedDate.value
+  })
+}
+
+function handleRestaurantSelected(restaurant: FdoRestaurant) {
+  selectedRestaurant.value = restaurant
+  emitUpdate()
+}
+
+watch([selectedPlatform, selectedRestaurant, slotValue, formattedDate], () => {
+  emitUpdate()
+})
+</script>
+
+<template>
+  <div>
+    <FilterRestaurant
+      :menu-items="menuI"
+      label="Please select restaurant"
+      v-model="singleModelValue"
+      @restaurant-selected="handleRestaurantSelected"
+    />
+    <div class="mt-5"></div>
+    <FmSelect v-model="selectedPlatform" label="Platform" :items="platformOptions" />
+
+    <div class="mt-3"></div>
+    <FmTextField
+      v-model="slotValue"
+      label="Slot"
+      placeholder="Enter slot"
+      v-if="['grabfood', 'foodpanda'].includes(selectedPlatform ?? '')"
+      :rules="[(val) => !!val || 'This field is required']"
+    >
+      <template #prepend>
+        {{ selectedPlatform === 'grabfood' ? 'GF-' : 'FP-' }}
+      </template>
+    </FmTextField>
+
+    <div v-if="selectedPlatform === 'grabfood'">
+      <div class="mt-3"></div>
+      <FmDatePicker
+        v-model="dateString"
+        label="Date"
+        :rules="[
+          (val: any) => {
+            const today = new Date()
+            const selectedDate = new Date(val)
+            if (selectedDate > today) {
+              return 'Date cannot be in the future'
+            }
+            return true
+          }
+        ]"
+        @update:modelValue="
+          (v: any) => {
+            formattedDate = v
+          }
+        "
+      />
+    </div>
+  </div>
+</template>