@feedmepos/mf-order-setting 0.0.4 → 0.0.6

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

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { FdoRestaurant } from '@feedmepos/core/entity'
+
+const props = defineProps<{
+  menuItems: { label: string; value: FdoRestaurant }[]
+  label: string
+  modelValue: FdoRestaurant | null
+}>()
+
+const emit = defineEmits(['restaurant-selected'])
+
+const selectedRestaurant = ref<FdoRestaurant | null>(null)
+const searchValue = ref('')
+
+const filteredResult = computed(() =>
+  props.menuItems.filter((item) => {
+    const search = searchValue.value.toLowerCase()
+    return search
+      ? item.label.toLowerCase().includes(search) || item.value._id.includes(search)
+      : true
+  })
+)
+
+const selectedLabel = computed(() =>
+  selectedRestaurant.value ? selectedRestaurant.value.profile.name : props.label
+)
+
+function selectRestaurant(restaurant: { label: string; value: FdoRestaurant }) {
+  selectedRestaurant.value = restaurant.value
+  emit('restaurant-selected', restaurant.value)
+}
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    selectedRestaurant.value = newValue
+  }
+)
+</script>
+
+<template>
+  <div>
+    <FmMenu>
+      <template #menu-button>
+        <div>
+          <FmButton
+            variant="tertiary"
+            prepend-icon="storefront"
+            append-icon="expand_more"
+            :label="selectedLabel"
+            class="fm-typo-en-body-md-600 text-fm-color-typo-secondary bg-fm-color-neutral-gray-100"
+            :style="{ backgroundColor: '#F2F2F7' }"
+          />
+        </div>
+      </template>
+      <div>
+        <FmSearch v-model:model-value="searchValue" class="w-[250px]" placeholder="Filter result" />
+      </div>
+      <FmMenuDivider />
+      <FmMenuItem
+        v-for="item in filteredResult"
+        :key="item.value._id"
+        :model-value="selectedRestaurant === item.value"
+        :label="item.label"
+        @click="selectRestaurant(item)"
+      />
+      <FmMenuItem v-if="!filteredResult.length" disabled label="No result found" />
+    </FmMenu>
+  </div>
+</template>

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

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { F_SHOPEEFOOD_ORDER_STATUS, GF_ORDER_STATUS, FP_ORDER_STATUS } from '@feedmepos/core/entity'
+import { F_ORDER_STATUS } from '@feedmepos/ordering/package/entity'
+import { sentenceCase } from 'change-case'
+import FilterStatusMenu from './FilterStatusMenu.vue'
+
+const props = defineProps<{
+  selectedTab: string
+  hasRestaurant: boolean
+  reset?: boolean
+}>()
+const emit = defineEmits<{
+  (e: 'update:selectedFpStatusFilter', value: string | null): void
+  (e: 'update:selectedShopeeFoodStatusFilter', value: string | null): void
+  (e: 'update:selectedGfStatusFilter', value: string | null): void
+  (e: 'update:selectedFeedMeStatusFilter', value: string | null): void
+}>()
+
+const selectedFilters = {
+  foodpanda: ref<string | null>(null),
+  shopeefood: ref<string | null>(null),
+  grabfood: ref<string | null>(null),
+  feedme: ref<string | null>(null)
+}
+
+watch(() => props.reset, (newVal) => {
+  if (newVal) {
+    selectedFilters.foodpanda.value = null;
+    selectedFilters.shopeefood.value = null;
+    selectedFilters.grabfood.value = null;
+    selectedFilters.feedme.value = null;
+    emit('update:selectedFpStatusFilter', null);
+    emit('update:selectedShopeeFoodStatusFilter', null);
+    emit('update:selectedGfStatusFilter', null);
+    emit('update:selectedFeedMeStatusFilter', null);
+  }
+}, { immediate: true });
+
+
+const filterOptions = {
+  feedme: computed(() =>
+    F_ORDER_STATUS.options.map((status) => ({
+      label: sentenceCase(status),
+      value: status
+        .replace(/_/g, ' ')
+        .toLowerCase()
+        .replace(/^\w/, (c) => c.toUpperCase())
+    }))
+  ),
+  foodpanda: computed(() =>
+    FP_ORDER_STATUS.options.map((status) => ({
+      label: sentenceCase(status),
+      value: sentenceCase(status)
+    }))
+  ),
+  shopeefood: computed(() =>
+    F_SHOPEEFOOD_ORDER_STATUS.options.map((status) => ({
+      label: sentenceCase(status),
+      value: sentenceCase(status)
+    }))
+  ),
+  grabfood: computed(() =>
+    GF_ORDER_STATUS.options.map((status) => ({
+      label: sentenceCase(status),
+      value: sentenceCase(status)
+    }))
+  )
+}
+function updateFilter({ filterType, value }: { filterType: string; value: string | null }) {
+  if (filterType === 'foodpanda') {
+    selectedFilters.foodpanda.value = value
+    emit('update:selectedFpStatusFilter', value)
+  } else if (filterType === 'shopeefood') {
+    selectedFilters.shopeefood.value = value
+    emit('update:selectedShopeeFoodStatusFilter', value)
+  } else if (filterType === 'grabfood') {
+    selectedFilters.grabfood.value = value
+    emit('update:selectedGfStatusFilter', value)
+  } else if (filterType === 'feedme') {
+    selectedFilters.feedme.value = value
+    emit('update:selectedFeedMeStatusFilter', value)
+  }
+}
+</script>
+
+<template>
+  <div>
+    <FilterStatusMenu
+      v-if="selectedTab === 'foodpanda'"
+      :options="filterOptions.foodpanda.value"
+      :selectedFilter="selectedFilters.foodpanda.value"
+      filterType="foodpanda"
+      @update:filter="updateFilter"
+    />
+
+    <FilterStatusMenu
+      v-if="selectedTab === 'shopeefood'"
+      :options="filterOptions.shopeefood.value"
+      :selectedFilter="selectedFilters.shopeefood.value"
+      filterType="shopeefood"
+      @update:filter="updateFilter"
+    />
+
+    <FilterStatusMenu
+      v-if="selectedTab === 'grabfood'"
+      :options="filterOptions.grabfood.value"
+      :selectedFilter="selectedFilters.grabfood.value"
+      filterType="grabfood"
+      @update:filter="updateFilter"
+    />
+
+    <FilterStatusMenu
+      v-if="selectedTab === 'feedme' && hasRestaurant === true"
+      :options="filterOptions.feedme.value"
+      :selectedFilter="selectedFilters.feedme.value"
+      filterType="feedme"
+      @update:filter="updateFilter"
+    />
+  </div>
+</template>

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>