@feedmepos/mf-order-setting 0.0.16 → 0.0.17

package/src/components/GoogleMap.vue

@@ -1,216 +1,214 @@
 <script setup lang="ts">
-import { ref, onMounted, watch, type PropType, toRaw, onUnmounted } from 'vue';
-import { coordinates, googleMap } from '@/helpers/map';
-import type { MarkerChangeEvent, PolygonChangeEvent, MapCoordinate, MapPolygon } from './type';
+import { ref, onMounted, watch, type PropType, toRaw, onUnmounted } from 'vue'
+import { coordinates, googleMap } from '@/helpers/map'
+import type { MarkerChangeEvent, PolygonChangeEvent, MapCoordinate, MapPolygon } from './type'
 
 interface PolygonEventHandler {
-  click: (ev: google.maps.PolyMouseEvent) => void;
-  contextmenu: (v: google.maps.PolyMouseEvent) => void;
-  dblclick: (v: google.maps.PolyMouseEvent) => void;
-  drag: (v: google.maps.MapMouseEvent) => void;
-  dragend: (v: google.maps.MapMouseEvent) => void;
-  dragstart: (v: google.maps.MapMouseEvent) => void;
-  mousedown: (v: google.maps.PolyMouseEvent) => void;
-  mousemove: (v: google.maps.PolyMouseEvent) => void;
-  mouseout: (v: google.maps.PolyMouseEvent) => void;
-  mouseover: (v: google.maps.PolyMouseEvent) => void;
-  mouseup: (v: google.maps.PolyMouseEvent) => void;
+  click: (ev: google.maps.PolyMouseEvent) => void
+  contextmenu: (v: google.maps.PolyMouseEvent) => void
+  dblclick: (v: google.maps.PolyMouseEvent) => void
+  drag: (v: google.maps.MapMouseEvent) => void
+  dragend: (v: google.maps.MapMouseEvent) => void
+  dragstart: (v: google.maps.MapMouseEvent) => void
+  mousedown: (v: google.maps.PolyMouseEvent) => void
+  mousemove: (v: google.maps.PolyMouseEvent) => void
+  mouseout: (v: google.maps.PolyMouseEvent) => void
+  mouseover: (v: google.maps.PolyMouseEvent) => void
+  mouseup: (v: google.maps.PolyMouseEvent) => void
 }
 
-type Vertex = google.maps.MVCArray<google.maps.LatLng>;
+type Vertex = google.maps.MVCArray<google.maps.LatLng>
 
 const props = defineProps({
   markers: {
     type: Array as PropType<MapCoordinate[]>,
-    default: () => [],
+    default: () => []
   },
   polygons: {
     type: Array as PropType<MapPolygon[]>,
-    default: () => [],
+    default: () => []
   },
   zoom: {
     type: Number,
-    default: 14,
+    default: 14
   },
   editable: {
     type: Boolean,
-    default: false,
+    default: false
   },
   center: {
     type: Object as PropType<{
-      lat: number;
-      lng: number;
+      lat: number
+      lng: number
     }>,
-    default: coordinates.jb,
-  },
-});
+    default: coordinates.jb
+  }
+})
 
 const emits = defineEmits<{
-  (event: 'map-click', ev: MapCoordinate): void;
-  (event: 'marker-change', ev: MarkerChangeEvent): void;
-  (event: 'polygon-change', ev: PolygonChangeEvent): void;
-  (event: 'polygon-right-click', ev: number): void;
-}>();
+  (event: 'map-click', ev: MapCoordinate): void
+  (event: 'marker-change', ev: MarkerChangeEvent): void
+  (event: 'polygon-change', ev: PolygonChangeEvent): void
+  (event: 'polygon-right-click', ev: number): void
+}>()
 
 defineExpose({
   setCenter: (coordinate: MapCoordinate) => {
-    map.value?.setCenter(coordinate);
-  },
-});
+    map.value?.setCenter(coordinate)
+  }
+})
 
-const mapRef = ref<Element>();
-const map = ref<google.maps.Map | null>(null);
-const listeners: google.maps.MapsEventListener[] = [];
+const mapRef = ref<Element>()
+const map = ref<google.maps.Map | null>(null)
+const listeners: google.maps.MapsEventListener[] = []
 
 function formatCoordinate(ev: google.maps.MapMouseEvent) {
   return {
     lat: ev.latLng.lat(),
-    lng: ev.latLng.lng(),
-  };
+    lng: ev.latLng.lng()
+  }
 }
 
 function addListenerToMap(instance: object, eventName: string, callback: (...args: any[]) => void) {
-  const listener = googleMap.maps.event.addListener(instance, eventName, callback);
-  listeners.push(listener);
+  const listener = googleMap()!.maps.event.addListener(instance, eventName, callback)
+  listeners.push(listener)
 }
 
-const markers = ref<google.maps.Marker[]>([]);
+const markers = ref<google.maps.Marker[]>([])
 
 function addMarkerListener<N extends keyof google.maps.MarkerHandlerMap<google.maps.Marker>>(
   marker: google.maps.Marker,
   event: N,
-  callback: google.maps.MarkerHandlerMap<google.maps.Marker>[N],
+  callback: google.maps.MarkerHandlerMap<google.maps.Marker>[N]
 ) {
-  addListenerToMap(marker, event, callback);
+  addListenerToMap(marker, event, callback)
 }
 
 function setMarkers(newMarkers: MapCoordinate[]) {
-  setMapOnAllMarkers(null);
+  setMapOnAllMarkers(null)
   markers.value = newMarkers.map((m, index) => {
-    const marker = new googleMap.maps.Marker({
+    const map = googleMap()
+    const marker = new map.maps.Marker({
       position: m,
-      draggable: true,
-    });
+      draggable: true
+    })
     addMarkerListener(marker, 'dragend', (ev) => {
-      emits('marker-change', { index, position: formatCoordinate(ev) });
-    });
-    return marker;
-  });
-  setMapOnAllMarkers(map.value);
+      emits('marker-change', { index, position: formatCoordinate(ev) })
+    })
+    return marker
+  })
+  setMapOnAllMarkers(map.value)
 }
 
 function setMapOnAllMarkers(map: google.maps.Map | null) {
-  markers.value.map((marker) => toRaw(marker).setMap(map));
+  markers.value.map((marker) => toRaw(marker).setMap(map))
 }
 
-const polygons = ref<google.maps.Polygon[]>([]);
+const polygons = ref<google.maps.Polygon[]>([])
 
 function addPolygonListener<N extends keyof PolygonEventHandler>(
   polygon: google.maps.Polygon,
   event: N,
-  callback: PolygonEventHandler[N],
+  callback: PolygonEventHandler[N]
 ) {
-  addListenerToMap(polygon, event, callback);
+  addListenerToMap(polygon, event, callback)
 }
 
-function addVertexListener<N extends keyof google.maps.MVCArrayHandlerMap<Vertex, google.maps.LatLng>>(
-  path: Vertex,
-  event: N,
-  callback: google.maps.MVCArrayHandlerMap<Vertex, google.maps.LatLng>[N],
-) {
-  addListenerToMap(path, event, callback);
+function addVertexListener<
+  N extends keyof google.maps.MVCArrayHandlerMap<Vertex, google.maps.LatLng>
+>(path: Vertex, event: N, callback: google.maps.MVCArrayHandlerMap<Vertex, google.maps.LatLng>[N]) {
+  addListenerToMap(path, event, callback)
 }
 
 function getPolygonPath(index: number) {
-  const path = polygons.value[index].getPath().getArray();
+  const path = polygons.value[index].getPath().getArray()
   return path.map(({ lat, lng }) => ({
     lat: lat(),
-    lng: lng(),
-  }));
+    lng: lng()
+  }))
 }
 
 function polygonChanged(polygonIndex: number) {
-  const newPath = getPolygonPath(polygonIndex);
-  emits('polygon-change', { index: polygonIndex, path: newPath });
+  const newPath = getPolygonPath(polygonIndex)
+  emits('polygon-change', { index: polygonIndex, path: newPath })
 }
 
 function removePolygonVertex(polygonIndex: number, vertexIndex: number) {
-  const path = getPolygonPath(polygonIndex);
-  const newPath = path.filter((_, i) => i !== vertexIndex);
-  emits('polygon-change', { index: polygonIndex, path: newPath });
+  const path = getPolygonPath(polygonIndex)
+  const newPath = path.filter((_, i) => i !== vertexIndex)
+  emits('polygon-change', { index: polygonIndex, path: newPath })
 }
 
 function polygonRightClick(polygonIndex: number, ev: google.maps.PolyMouseEvent) {
   if (ev.vertex !== undefined) {
-    removePolygonVertex(polygonIndex, ev.vertex);
+    removePolygonVertex(polygonIndex, ev.vertex)
   } else {
-    emits('polygon-right-click', polygonIndex);
+    emits('polygon-right-click', polygonIndex)
   }
 }
 
 function setPolygons(newPolygons: MapPolygon[]) {
-  setMapOnAllPolygons(null);
+  setMapOnAllPolygons(null)
   polygons.value = newPolygons.map((p, index) => {
-    const polygon = new googleMap.maps.Polygon({
+    const map = googleMap()
+    const polygon = new map.maps.Polygon({
       paths: p.paths,
       strokeColor: p.strokeColor,
       fillColor: p.fillColor,
       fillOpacity: 0.5,
-      editable: props.editable,
-    });
-    addPolygonListener(polygon, 'contextmenu', (v) => polygonRightClick(index, v));
-    polygon.getPaths().forEach(path => {
-      addVertexListener(path, 'insert_at', () => polygonChanged(index));
-      addVertexListener(path, 'set_at', () => polygonChanged(index));
-    });
-    return polygon;
-  });
-  setMapOnAllPolygons(map.value);
+      editable: props.editable
+    })
+    addPolygonListener(polygon, 'contextmenu', (v) => polygonRightClick(index, v))
+    polygon.getPaths().forEach((path) => {
+      addVertexListener(path, 'insert_at', () => polygonChanged(index))
+      addVertexListener(path, 'set_at', () => polygonChanged(index))
+    })
+    return polygon
+  })
+  setMapOnAllPolygons(map.value)
 }
 
 function setMapOnAllPolygons(map: google.maps.Map | null) {
-  polygons.value.map((polygon) => toRaw(polygon).setMap(map));
+  polygons.value.map((polygon) => toRaw(polygon).setMap(map))
 }
 
 function addMapListener<N extends keyof google.maps.MapHandlerMap<google.maps.Map>>(
   map: google.maps.Map,
   event: N,
-  callback: google.maps.MapHandlerMap<google.maps.Map>[N],
+  callback: google.maps.MapHandlerMap<google.maps.Map>[N]
 ) {
-  addListenerToMap(map, event, callback);
+  addListenerToMap(map, event, callback)
 }
 
 function setMap() {
-  map.value = new googleMap.maps.Map(mapRef.value as Element, {
+  const Map = googleMap().maps.Map
+  map.value = new Map(mapRef.value as Element, {
     center: props.center,
     zoom: props.zoom,
     mapTypeControl: false,
     streetViewControl: false,
     draggable: true,
-    scrollwheel: true,
-  });
+    scrollwheel: true
+  })
 
-  addMapListener(map.value, 'click', (ev) => emits('map-click', formatCoordinate(ev)));
+  addMapListener(map.value, 'click', (ev) => emits('map-click', formatCoordinate(ev)))
 }
 
-watch(() => props.markers, setMarkers, { deep: true });
-watch(() => props.polygons, setPolygons, { deep: true });
+watch(() => props.markers, setMarkers, { deep: true })
+watch(() => props.polygons, setPolygons, { deep: true })
 
 onMounted(() => {
-  if (!mapRef.value || !googleMap) return;
-  setMap();
-  setMarkers(props.markers);
-  setPolygons(props.polygons);
-});
+  if (!mapRef.value || !googleMap()) return
+  setMap()
+  setMarkers(props.markers)
+  setPolygons(props.polygons)
+})
 
 onUnmounted(() => {
-  listeners.forEach((listener) => listener.remove());
-});
+  listeners.forEach((listener) => listener.remove())
+})
 </script>
 
 <template>
-  <div
-    ref="mapRef"
-    class="map app-map"
-  />
-</template>
+  <div ref="mapRef" class="map app-map" />
+</template>

package/src/helpers/map.ts

@@ -1,9 +1,16 @@
+/// <reference types="googlemaps" />
 import { type MapCoordinate } from '@/components/type';
+import { ref } from "vue"
 
-let googleMap: typeof google;
+const _googleMap = ref<typeof google | null>(null)
+
+// defines a getter
+const googleMap = (): typeof google => {
+  return _googleMap.value!
+}
 
 export function setGoogleMap(map: typeof google) {
-  if (!googleMap) googleMap = map;
+  if (!_googleMap.value) _googleMap.value = map
 }
 
 const coordinates = Object.freeze({
@@ -27,25 +34,26 @@ function arrayToCoordinate(arr: number[]) {
 
 function generateAreaPaths({
   center,
-  radius,
+  radius
 }: {
-  radius: number;
+  radius: number
   center: {
-    lng: number;
-    lat: number;
+    lng: number
+    lat: number
   }
 }): { lat: number; lng: number }[] {
-  const searchPoint = [];
-  const radiusLat = (radius / 6371) * (180 / Math.PI);
-  const radiusLng = radiusLat / Math.cos(center.lat * (Math.PI / 180));
+  const searchPoint: google.maps.LatLng[] = []
+  const radiusLat = (radius / 6371) * (180 / Math.PI)
+  const radiusLng = radiusLat / Math.cos(center.lat * (Math.PI / 180))
   for (let a = 0; a < 361; a += 45) {
-    const aRad = a * (Math.PI / 180);
-    const x = center.lng + (radiusLng * Math.cos(aRad));
-    const y = center.lat + (radiusLat * Math.sin(aRad));
-    const point = new googleMap.maps.LatLng(y, x, true);
-    searchPoint.push(point);
+    const aRad = a * (Math.PI / 180)
+    const x = center.lng + radiusLng * Math.cos(aRad)
+    const y = center.lat + radiusLat * Math.sin(aRad)
+    const map = googleMap()
+    const point = new map.maps.LatLng(y, x, true)
+    searchPoint.push(point)
   }
-  return searchPoint.map(v => ({ lat: v.lat(), lng: v.lng() }));
+  return searchPoint.map((v) => ({ lat: v.lat(), lng: v.lng() }))
 }
 
 function pathToPolygon(path: MapCoordinate[]): number[][] {

package/src/router/routes.ts

@@ -1,30 +1,26 @@
 import { type RouteRecordRaw } from 'vue-router'
-import KioskDevicesView from '@/views/kiosk/devices/KioskDevicesView.vue';
-import KioskSettingView from '@/views/kiosk/settings/KioskSettingView.vue';
 import { PortalRoute } from '@/utils/constants/route';
-import KioskView from '@/views/kiosk/KioskView.vue';
-import OrderSettingsView from '@/views/order-settings/OrderSettingsView.vue';
 
 const routes: RouteRecordRaw[] = [
   {
     path: PortalRoute.KioskRoute,
     name: 'Kiosk',
-    component: KioskView,
+    component: () => import('@/views/kiosk/KioskView.vue')
   },
   {
     path: PortalRoute.KioskDeviceRoute,
     name: 'Kiosk Device',
-    component: KioskDevicesView
+    component: () => import('@/views/kiosk/devices/KioskDevicesView.vue')
   },
   {
     path: PortalRoute.KioskOrderSettingRoute,
     name: 'Kiosk Order Setting',
-    component: KioskSettingView
+    component: () => import('@/views/kiosk/settings/KioskSettingView.vue')
   },
   {
     path: PortalRoute.OrderSettingView,
     name: 'Order Setting View',
-    component: OrderSettingsView
+    component: () => import('@/views/order-settings/OrderSettingsView.vue')
   },
 ];
 

package/src/stores/restaurant/index.ts

@@ -72,7 +72,7 @@ export const useRestaurantStore = defineStore('restaurant', {
   },
   actions: {
     async readRestaurantSetting(restaurantId: string) {
-      const restaurantSetting = await restaurantApi.readRestaurantSetting()
+      const restaurantSetting = await restaurantApi.readRestaurantSetting(restaurantId)
       this.restaurantSettings = {
         ...this.restaurantSettings,
         [restaurantId]: restaurantSetting

package/src/views/order-settings/delivery/inhouse/DeliveryOrder.vue

@@ -2,7 +2,7 @@
 import type { MapPolygon } from '@/components/type'
 import { useLoading } from '@/composables/loading'
 import { formatCurrency } from '@/helpers/currency'
-import { arrayToCoordinate, getPolygonCenter, googleMap as gm } from '@/helpers/map'
+import { arrayToCoordinate, getPolygonCenter, googleMap } from '@/helpers/map'
 import { clone } from '@/helpers/object'
 import type { FdoAddress, FdoDeliveryArea } from '@feedmepos/core/entity'
 import GoogleMap from '@/components/GoogleMap.vue'
@@ -147,7 +147,8 @@ async function getCenter() {
     center.value = arrayToCoordinate(coordinates || [])
     gmRef.value?.setCenter(center.value)
   } catch (err) {
-    const geocoder = new gm.maps.Geocoder()
+    const map = googleMap()
+    const geocoder = new map.maps.Geocoder()
     await startAsyncCallWithErr(async () => {
       await new Promise((resolve) => {
         geocoder.geocode({ address: formatted }, (res) => {

package/src/views/order-settings/pickup/AddressInput.vue

@@ -22,7 +22,8 @@ function input(v: string) {
 
 const modelValue = ref(props.initialValue || '')
 const placeOptions = ref<string[]>([])
-const autocomplete = new googleMap.maps.places.AutocompleteService()
+const map =  googleMap()
+const autocomplete = new map.maps.places.AutocompleteService()
 
 function filterFn(val: string) {
   autocomplete.getPlacePredictions({ input: val }, (res) => {
@@ -34,7 +35,7 @@ function filterFn(val: string) {
 
 watch(modelValue, (newVal) => {
   filterFn(newVal)
-  if (googleMap) {
+  if (googleMap()) {
     input(newVal)
   }
 })

package/src/views/order-settings/pickup/PickUpSetting.vue

@@ -6,10 +6,20 @@
     <div class="flex justify-end items-center mb-3">
       <FmSearch v-model="searchKey" :placeholder="t('order.search')" />
     </div>
-    <PickupList :pickupSettingData="pickupSettingData" @toggleSideSheet="toggleSideSheet"
-      class="mt-5 md:hidden lg:hidden xl:hidden" />
-    <FmTable class="h-[500px] xs:hidden sm:hidden" :row-data="pickupSettingData" :hideFooter="true"
-      :column-defs="columns" :loading="isLoading" @row-click="toggleSideSheet" :pageSize="pickupSettingData.length">
+    <PickupList
+      :pickupSettingData="pickupSettingData"
+      @toggleSideSheet="toggleSideSheet"
+      class="mt-5 md:hidden lg:hidden xl:hidden"
+    />
+    <FmTable
+      class="h-[500px] xs:hidden sm:hidden"
+      :row-data="pickupSettingData"
+      :hideFooter="true"
+      :column-defs="columns"
+      :loading="isLoading"
+      @row-click="toggleSideSheet"
+      :pageSize="pickupSettingData.length"
+    >
     </FmTable>
     <PickUpSettingDialog :showPickupDialog="sideSheet" @closeSideSheet="closeSideSheet" />
   </div>
@@ -54,7 +64,6 @@ onMounted(async () => {
   await startAsyncCallWithErr(async () => {
     await Promise.all(
       restaurants.value.map(async (r) => {
-        await changeRestaurant(r)
         await restaurantStore.readRestaurantSetting(r._id)
       })
     )
@@ -65,7 +74,7 @@ async function onUpdate() {
   await startAsyncCallWithErr(async () => {
     await Promise.all(
       restaurants.value.map(async (r) => {
-        changeRestaurant(r)
+        await changeRestaurant(r)
         await restaurantStore.readRestaurantSetting(r._id)
       })
     )
@@ -80,7 +89,7 @@ async function toggleSideSheet(rowData: any) {
 
   const restaurant = restaurants.value.find((r) => r._id === v)
   if (restaurant) {
-    changeRestaurant(restaurant)
+    await changeRestaurant(restaurant)
   }
   sideSheet.value = true
 }
@@ -88,7 +97,7 @@ async function toggleSideSheet(rowData: any) {
 async function closeSideSheet(refresh = false) {
   sideSheet.value = false
   if (originalRestaurant) {
-    changeRestaurant(originalRestaurant)
+    await changeRestaurant(originalRestaurant)
   }
   if (refresh) {
     await onUpdate()
@@ -112,16 +121,16 @@ const pickupSettingData = computed<PickupSettingData[]>(() => {
     const paymentMethod = !hasCustomOfflinePayment
       ? (item.paymentTypes || []).map((p) => sentenceCase(p)).join(', ')
       : [
-        (item.paymentTypes || [])
-          .filter((p) => p !== 'cash')
-          .map((p) => sentenceCase(p))
-          .join(', '),
-        canOfflinePayment
-          ? (item.offlinePaymentTypes || []).map((p) => sentenceCase(p.name)).join(', ')
-          : ''
-      ]
-        .filter((v) => !!v)
-        .join(', ')
+          (item.paymentTypes || [])
+            .filter((p) => p !== 'cash')
+            .map((p) => sentenceCase(p))
+            .join(', '),
+          canOfflinePayment
+            ? (item.offlinePaymentTypes || []).map((p) => sentenceCase(p.name)).join(', ')
+            : ''
+        ]
+          .filter((v) => !!v)
+          .join(', ')
 
     const onlineStatus = item.enable ? t('order.activated') : t('order.inactive')
 
@@ -143,13 +152,13 @@ const pickupSettingData = computed<PickupSettingData[]>(() => {
 })
 
 export interface PickupSettingData {
-  restaurantId: string;
-  restaurant: string;
-  paymentmethod: string;
-  online: string;
-  enable: boolean;
-  preorder: string;
-  pickuppoint: string;
+  restaurantId: string
+  restaurant: string
+  paymentmethod: string
+  online: string
+  enable: boolean
+  preorder: string
+  pickuppoint: string
 }
 
 export interface RestaurantPickup extends FdoRestaurantPickup {

package/dist/KioskSettingView-DGfS1NzO.js

@@ -1,4 +0,0 @@
-import { _ as f } from "./app-9Q-zRVKD.js";
-export {
-  f as default
-};