Improved: select operating time modal (#3)

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

Hide file tree

Showing 2 changed files with 58 additions and 16 deletions.
diff --git a/src/components/SelectOperatingTimeModal.vue b/src/components/SelectOperatingTimeModal.vue
@@ -12,40 +12,63 @@
 
   <ion-content>
     <ion-list>
-      <ion-item>
+      <ion-item lines="none">
         <ion-label>
-          {{ "Start Time" }}
+          {{ translate("Opening Time") }}
         </ion-label>
-        <ion-button fill="outline">Change</ion-button>
+        <ion-button color="medium" @click="selectTime">{{ "10:45 am" }}</ion-button>
+      </ion-item>
+      <ion-item lines="none">
+        <ion-label>
+          {{ translate("Closing Time") }}
+        </ion-label>
+        <ion-button color="medium" @click="selectTime">{{ "10:45 am" }}</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>
+
+  <ion-modal class="date-time-modal" :is-open="isTimeModalOpen" @didDismiss="() => isTimeModalOpen = false">
+    <ion-content>
+      <ion-datetime
+        presentation="time"  
+        show-default-buttons
+        hour-cycle="h12"
+      />
+    </ion-content>
+  </ion-modal>
+
+  <ion-footer>
+    <ion-toolbar>
+      <ion-item lines="none">
+        <ion-button color="danger">{{ translate("Reset") }}</ion-button>
+      </ion-item>
+      <ion-item slot="end" lines="none">
+        <ion-button class="ion-margin-end" fill="outline">{{ translate("Cancel") }}</ion-button>
+        <ion-button >{{ translate("Save") }}</ion-button>
+      </ion-item>
+    </ion-toolbar>
+  </ion-footer>
 </template>
 
 <script lang="ts">
 import { 
   IonButtons,
   IonButton,
   IonContent,
-  IonFab,
-  IonFabButton,
+  IonDatetime,
+  IonFooter,
   IonHeader,
   IonIcon,
   IonItem,
   IonLabel,
   IonList,
+  IonModal,
   IonTitle,
   IonToolbar,
   modalController
 } from "@ionic/vue";
 import { defineComponent } from "vue";
-import { closeOutline, saveOutline } from "ionicons/icons";
+import { closeOutline } from "ionicons/icons";
 import { translate } from '@hotwax/dxp-components'
 
 export default defineComponent({
@@ -54,28 +77,43 @@ export default defineComponent({
     IonButtons,
     IonButton,
     IonContent,
-    IonFab,
-    IonFabButton,
+    IonDatetime,
+    IonFooter,
     IonHeader,
     IonIcon,
     IonItem,
     IonLabel,
     IonList,
+    IonModal,
     IonTitle,
     IonToolbar,
   },
+  data() {
+    return {
+      isTimeModalOpen: false as boolean
+    }
+  },
   methods: {
     closeModal() {
       modalController.dismiss({ dismissed: true});
+    },
+    selectTime() {
+      this.isTimeModalOpen = true
     }
   },
   setup() {
     return {
       closeOutline,
-      saveOutline,
       translate
     };
   },
 });
 </script>
-
+
+<style scoped>
+ion-modal.date-time-modal {
+  --width: 290px;
+  --height: 440px;
+  --border-radius: 8px;
+}
+</style>
diff --git a/src/locales/en.json b/src/locales/en.json
@@ -11,6 +11,7 @@
   "Change time zone": "Change time zone",
   "City": "City",
   "Click the backdrop to dismiss.": "Click the backdrop to dismiss.",
+  "Closing Time": "Closing Time",
   "Configure the order fulfillment capacity of your facility.": "Configure the order fulfillment capacity of your facility.",
   "Country": "Country",
   "Days to ship": "Days to ship",
@@ -33,11 +34,14 @@
   "No time zone found": "No time zone found",
   "OMS": "OMS",
   "Online Order Fulfillment": "Online Order Fulfillment",
+  "Opening Time": "Opening Time",
   "Operating hours": "Operating hours",
   "Password":  "Password",
   "primary store": "primary store",
   "Product Stores": "Product Stores",
+  "Reset": "Reset",
   "Saturday": "Saturday",
+  "Save": "Save",
   "Select time": "Select time",
   "Select time zone": "Select time zone",
   "Search time zones": "Search time zones",