Implemented: modal for selecting time and product store (#3)

hotwax · Nov 15, 2023 · 72acd0a · 72acd0a
1 parent 2ac5502
commit 72acd0a
Show file tree

Hide file tree

Showing 4 changed files with 211 additions and 14 deletions.
diff --git a/src/components/SelectOperatingTimeModal.vue b/src/components/SelectOperatingTimeModal.vue
@@ -0,0 +1,81 @@
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-button @click="closeModal"> 
+          <ion-icon slot="icon-only" :icon="closeOutline" />
+        </ion-button>
+      </ion-buttons>
+      <ion-title>{{ translate("Select time") }}</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content>
+    <ion-list>
+      <ion-item>
+        <ion-label>
+          {{ "Start Time" }}
+        </ion-label>
+        <ion-button fill="outline">Change</ion-button>
+      </ion-item>
+    </ion-list>
+
+    <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+      <ion-fab-button>
+        <ion-icon :icon="saveOutline" />  
+      </ion-fab-button>
+    </ion-fab>
+  </ion-content>
+</template>
+
+<script lang="ts">
+import { 
+  IonButtons,
+  IonButton,
+  IonContent,
+  IonFab,
+  IonFabButton,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonTitle,
+  IonToolbar,
+  modalController
+} from "@ionic/vue";
+import { defineComponent } from "vue";
+import { closeOutline, saveOutline } from "ionicons/icons";
+import { translate } from '@hotwax/dxp-components'
+
+export default defineComponent({
+  name: "SelectOperatingTimeModal",
+  components: { 
+    IonButtons,
+    IonButton,
+    IonContent,
+    IonFab,
+    IonFabButton,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonTitle,
+    IonToolbar,
+  },
+  methods: {
+    closeModal() {
+      modalController.dismiss({ dismissed: true});
+    }
+  },
+  setup() {
+    return {
+      closeOutline,
+      saveOutline,
+      translate
+    };
+  },
+});
+</script>
+
diff --git a/src/components/SelectProductStoreModal.vue b/src/components/SelectProductStoreModal.vue
@@ -0,0 +1,84 @@
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-button @click="closeModal"> 
+          <ion-icon slot="icon-only" :icon="closeOutline" />
+        </ion-button>
+      </ion-buttons>
+      <ion-title>{{ translate("Select product stores") }}</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content>
+    <ion-list>
+      <ion-item>
+        <ion-label>
+          {{ "Demo Store" }}
+          <p>{{ "STORE_ID" }}</p>
+        </ion-label>
+        <ion-checkbox slot="end" :checked="true" />
+      </ion-item>
+    </ion-list>
+
+    <ion-fab vertical="bottom" horizontal="end" slot="fixed">
+      <ion-fab-button>
+        <ion-icon :icon="saveOutline" />  
+      </ion-fab-button>
+    </ion-fab>
+  </ion-content>
+</template>
+
+<script lang="ts">
+import { 
+  IonButtons,
+  IonButton,
+  IonCheckbox,
+  IonContent,
+  IonFab,
+  IonFabButton,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonTitle,
+  IonToolbar,
+  modalController
+} from "@ionic/vue";
+import { defineComponent } from "vue";
+import { closeOutline, saveOutline } from "ionicons/icons";
+import { translate } from '@hotwax/dxp-components'
+
+export default defineComponent({
+  name: "SelectProductStoreModal",
+  components: { 
+    IonButtons,
+    IonButton,
+    IonCheckbox,
+    IonContent,
+    IonFab,
+    IonFabButton,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonTitle,
+    IonToolbar,
+  },
+  methods: {
+    closeModal() {
+      modalController.dismiss({ dismissed: true});
+    }
+  },
+  setup() {
+    return {
+      closeOutline,
+      saveOutline,
+      translate
+    };
+  },
+});
+</script>
+
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -38,8 +38,10 @@
   "primary store": "primary store",
   "Product Stores": "Product Stores",
   "Saturday": "Saturday",
-  "Search time zones": "Search time zones",
+  "Select time": "Select time",
   "Select time zone": "Select time zone",
+  "Search time zones": "Search time zones",
+  "Select product stores": "Select product stores",
   "Sell Inventory Online": "Sell Inventory Online",
   "Setting fulfillment capacity to 0 disables new order from being allocated to this facility. Leave this empty if this facility's fulfillment capacity is unrestricted.": "Setting fulfillment capacity to 0 disables new order from being allocated to this facility. Leave this empty if this facility's fulfillment capacity is unrestricted.",
   "Settings": "Settings",

diff --git a/src/views/FacilityDetails.vue b/src/views/FacilityDetails.vue
@@ -69,15 +69,15 @@
             </ion-card-title>
           </ion-card-header>
           <ion-list lines="none">
-            <ion-item>
+            <ion-item button @click="selectOperatingTime">
               <ion-label>
                 <p>{{ translate("Monday") }}</p>
               </ion-label>
               <ion-label slot="end">
                 {{ "7:30am - 8:00pm" }}
               </ion-label>
             </ion-item>
-            <ion-item>
+            <ion-item button @click="selectOperatingTime">
               <ion-label>
                 <p>{{ translate("Tuesday") }}</p>
               </ion-label>
@@ -86,7 +86,7 @@
                 {{ translate("Add timings") }}
               </ion-button>
             </ion-item>
-            <ion-item>
+            <ion-item button @click="selectOperatingTime">
               <ion-label>
                 <p>{{ translate("Wednesday") }}</p>
               </ion-label>
@@ -95,7 +95,7 @@
                 {{ translate("Add timings") }}
               </ion-button>
             </ion-item>
-            <ion-item>
+            <ion-item button @click="selectOperatingTime">
               <ion-label>
                 <p>{{ translate("Thursday") }}</p>
               </ion-label>
@@ -104,7 +104,7 @@
                 {{ translate("Add timings") }}
               </ion-button>
             </ion-item>
-            <ion-item>
+            <ion-item button @click="selectOperatingTime">
               <ion-label>
                 <p>{{ translate("Friday") }}</p>
               </ion-label>
@@ -113,7 +113,7 @@
                 {{ translate("Add timings") }}
               </ion-button>
             </ion-item>
-            <ion-item>
+            <ion-item button @click="selectOperatingTime">
               <ion-label>
                 <p>{{ translate("Saturday") }}</p>
               </ion-label>
@@ -122,7 +122,7 @@
                 {{ translate("Add timings") }}
               </ion-button>
             </ion-item>
-            <ion-item>
+            <ion-item button @click="selectOperatingTime">
               <ion-label>
                 <p>{{ translate("Sunday") }}</p>
               </ion-label>
@@ -136,12 +136,13 @@
 
         <ion-card>
           <ion-card-header>
-            <ion-card-subtitle>
-              {{ "Overline" }}
-            </ion-card-subtitle>
             <ion-card-title>
               {{ translate("Product Stores") }}
             </ion-card-title>
+            <ion-button @click="addProductStore" fill="clear">
+              <ion-icon :icon="addCircleOutline" slot="start" />
+              {{ translate("Add") }}
+            </ion-button>
           </ion-card-header>
 
           <ion-item>
@@ -231,7 +232,6 @@ import {
   IonCard,
   IonCardContent,
   IonCardHeader,
-  IonCardSubtitle,
   IonCardTitle,
   IonChip,
   IonContent,
@@ -255,6 +255,8 @@ import OpenStorePopover from '@/components/OpenStorePopover.vue';
 import { translate } from '@hotwax/dxp-components';
 import AddAddressModal from '@/components/AddAddressModal.vue'
 import AddGeoPointModal from '@/components/AddGeoPointModal.vue';
+import SelectProductStoreModal from '@/components/SelectProductStoreModal.vue'
+import SelectOperatingTimeModal from '@/components/SelectOperatingTimeModal.vue';
 
 export default defineComponent({
   name: 'FacilityDetails',
@@ -265,7 +267,6 @@ export default defineComponent({
     IonCard,
     IonCardContent,
     IonCardHeader,
-    IonCardSubtitle,
     IonCardTitle,
     IonChip,
     IonContent,
@@ -282,6 +283,11 @@ export default defineComponent({
     IonToggle,
     IonToolbar,
   },
+  data() {
+    return {
+      isTimeModalOpen: false as boolean
+    }
+  },
   methods: {
     async openStorePopover(ev: Event) {
       const popover = await popoverController.create({
@@ -304,7 +310,20 @@ export default defineComponent({
       })
 
       addGeoPointModal.present()
+    },
+    async addProductStore() {
+      const addProductStoreModal = await modalController.create({
+        component: SelectProductStoreModal
+      })
 
+      addProductStoreModal.present()
+    },
+    async selectOperatingTime() {
+      const selectOperatingTimeModal = await modalController.create({
+        component: SelectOperatingTimeModal
+      })
+  
+      selectOperatingTimeModal.present()
     }
   },
   setup() {
@@ -325,4 +344,15 @@ section {
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   align-items: start;
 }
-</style>
+ion-modal.date-time-modal {
+  --width: 290px;
+  --height: 440px;
+  --border-radius: 8px;
+}
+
+ion-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+</style>