From 40c2e36fc6ec0f21b4dc27b1b772c41c9f1250d1 Mon Sep 17 00:00:00 2001 From: Sanskar Soni Date: Tue, 8 Aug 2023 19:02:38 +0530 Subject: [PATCH 1/6] Implemented: ion-date modal and used modal instead of input type date in orders view --- src/components/DateSelectorModal.vue | 57 ++++++++++++++++++++++ src/views/orders.vue | 71 ++++++++++++++++++++-------- 2 files changed, 108 insertions(+), 20 deletions(-) create mode 100644 src/components/DateSelectorModal.vue diff --git a/src/components/DateSelectorModal.vue b/src/components/DateSelectorModal.vue new file mode 100644 index 00000000..f5f45699 --- /dev/null +++ b/src/components/DateSelectorModal.vue @@ -0,0 +1,57 @@ + + + + + + \ No newline at end of file diff --git a/src/views/orders.vue b/src/views/orders.vue index 662faf29..0dcc8f8a 100644 --- a/src/views/orders.vue +++ b/src/views/orders.vue @@ -27,35 +27,34 @@
{{ $t("Ordered after") }} - - - - + + {{ query.orderedAfter ? $filters.formatDate(query.orderedAfter,'yyyy-mm-dd', 'dd/mm/yyyy') : 'dd/mm/yyyy' }} + + {{ $t("Ordered before") }} - - - + + {{ query.orderedBefore ? $filters.formatDate(query.orderedBefore,'yyyy-mm-dd', 'dd/mm/yyyy') : 'dd/mm/yyyy' }} + + {{ $t("Promised after") }} - - - + + {{ query.promisedAfter ? $filters.formatDate(query.promisedAfter,'yyyy-mm-dd', 'dd/mm/yyyy') : 'dd/mm/yyyy' }} + + {{ $t("Promised before") }} - - - + + {{ query.promisedBefore ? $filters.formatDate(query.promisedBefore,'yyyy-mm-dd', 'dd/mm/yyyy') : 'dd/mm/yyyy' }} + + @@ -186,7 +185,6 @@ import { IonItem, IonLabel, IonMenuButton, - IonInput, IonNote, IonPage, IonSelect, @@ -224,6 +222,7 @@ import { showToast } from '@/utils' import { Plugins } from '@capacitor/core'; import Image from '@/components/Image.vue'; import emitter from "@/event-bus"; +import DateSelectionModal from '@/components/DateSelectorModal.vue'; const { Clipboard } = Plugins; @@ -239,7 +238,6 @@ export default defineComponent({ IonContent, IonFooter, IonHeader, - IonInput, IonItem, IonIcon, IonLabel, @@ -281,7 +279,40 @@ export default defineComponent({ }), }, methods: { - updateQuery() { + async openDateSelectionModal(dateFilter: string) { + const dateSelectionModal = await modalController.create({ + component: DateSelectionModal, + componentProps: { + + }, + }); + + dateSelectionModal.onDidDismiss().then((data) => { + if(data.data){ + const selectedDate = data.data.split('T')[0]; + switch (dateFilter) { + case 'orderedAfter': + this.query.orderedAfter = selectedDate; + break; + case 'orderedBefore': + this.query.orderedBefore = selectedDate; + break; + case 'promisedAfter': + this.query.promisedAfter = selectedDate; + break; + case 'promisedBefore': + this.query.promisedBefore = selectedDate; + break; + default: + break; + } + this.updateQuery(); + } + }); + + return dateSelectionModal.present(); + }, + updateQuery() { this.query.viewSize = parseInt(process.env.VUE_APP_VIEW_SIZE); this.query.viewIndex = 0; this.store.dispatch("order/updateQuery", { query: this.query}); From 65147f6e5528aead032cde1b1209585b51990741 Mon Sep 17 00:00:00 2001 From: Sanskar Soni Date: Wed, 9 Aug 2023 10:59:51 +0530 Subject: [PATCH 2/6] Implemented: used ion-datetime selection modal product-detail view --- ...lectorModal.vue => DateSelectionModal.vue} | 23 +------ src/views/orders.vue | 14 ++--- src/views/product-details.vue | 60 +++++++++++++++---- 3 files changed, 57 insertions(+), 40 deletions(-) rename src/components/{DateSelectorModal.vue => DateSelectionModal.vue} (58%) diff --git a/src/components/DateSelectorModal.vue b/src/components/DateSelectionModal.vue similarity index 58% rename from src/components/DateSelectorModal.vue rename to src/components/DateSelectionModal.vue index f5f45699..c472b7cc 100644 --- a/src/components/DateSelectorModal.vue +++ b/src/components/DateSelectionModal.vue @@ -4,19 +4,12 @@ @ionChange="onDateChange($event)" showDefaultButtons presentation="date" - > - - + /> diff --git a/src/views/orders.vue b/src/views/orders.vue index 0dcc8f8a..6492970d 100644 --- a/src/views/orders.vue +++ b/src/views/orders.vue @@ -222,7 +222,7 @@ import { showToast } from '@/utils' import { Plugins } from '@capacitor/core'; import Image from '@/components/Image.vue'; import emitter from "@/event-bus"; -import DateSelectionModal from '@/components/DateSelectorModal.vue'; +import DateSelectionModal from '@/components/DateSelectionModal.vue'; const { Clipboard } = Plugins; @@ -281,15 +281,13 @@ export default defineComponent({ methods: { async openDateSelectionModal(dateFilter: string) { const dateSelectionModal = await modalController.create({ - component: DateSelectionModal, - componentProps: { - - }, + component: DateSelectionModal }); - dateSelectionModal.onDidDismiss().then((data) => { - if(data.data){ - const selectedDate = data.data.split('T')[0]; + // Getting selected date from the modal on modal dismiss + dateSelectionModal.onDidDismiss().then((dataFromModal) => { + if(dataFromModal.data){ + const selectedDate = dataFromModal.data.split('T')[0]; switch (dateFilter) { case 'orderedAfter': this.query.orderedAfter = selectedDate; diff --git a/src/views/product-details.vue b/src/views/product-details.vue index 70bfcefb..40f1f9d1 100644 --- a/src/views/product-details.vue +++ b/src/views/product-details.vue @@ -51,30 +51,34 @@
{{ $t("Ordered after") }} - - - + + {{ orderedAfter ? $filters.formatDate(orderedAfter,'yyyy-mm-dd', 'dd/mm/yyyy') : 'dd/mm/yyyy' }} + + {{ $t("Ordered before") }} - - - + + {{ orderedBefore ? $filters.formatDate(orderedBefore,'yyyy-mm-dd', 'dd/mm/yyyy') : 'dd/mm/yyyy' }} + + {{ $t("Promised after") }} - - - + + {{ promisedAfter ? $filters.formatDate(promisedAfter,'yyyy-mm-dd', 'dd/mm/yyyy') : 'dd/mm/yyyy' }} + + {{ $t("Promised before") }} - - - + + {{ promisedBefore ? $filters.formatDate(promisedBefore,'yyyy-mm-dd', 'dd/mm/yyyy') : 'dd/mm/yyyy' }} + + @@ -217,6 +221,7 @@ import Image from '@/components/Image.vue'; import { sizeIndex } from "@/apparel-sorter" import { DateTime } from 'luxon'; import emitter from "@/event-bus"; +import DateSelectionModal from'@/components/DateSelectionModal.vue'; export default defineComponent({ name: "product-details", @@ -290,6 +295,37 @@ export default defineComponent({ }) }, methods: { + async openDateSelectionModal(dateFilter: string) { + const dateSelectionModal = await modalController.create({ + component: DateSelectionModal + }); + + // Getting selected date from the modal on modal dismiss + dateSelectionModal.onDidDismiss().then((dataFromModal) => { + if(dataFromModal.data){ + const selectedDate = dataFromModal.data.split('T')[0]; + switch (dateFilter) { + case 'orderedAfter': + this.orderedAfter = selectedDate; + break; + case 'orderedBefore': + this.orderedBefore = selectedDate; + break; + case 'promisedAfter': + this.promisedAfter = selectedDate; + break; + case 'promisedBefore': + this.promisedBefore = selectedDate; + break; + default: + break; + } + this.getVariantProducts(); + } + }); + + return dateSelectionModal.present(); + }, onBackgroundJobsFinished() { this.refreshProducts(); // Reset quantity when the background job is finished From a734fa7e8ff1b86ab38af7a1041c2583469c09d8 Mon Sep 17 00:00:00 2001 From: Sanskar Soni Date: Wed, 9 Aug 2023 11:28:18 +0530 Subject: [PATCH 3/6] Implemented: used clendar clear outline icon and corrected indentation --- src/components/DateSelectionModal.vue | 28 +++++++++++++-------------- src/views/orders.vue | 12 +++++++----- src/views/product-details.vue | 10 ++++++---- 3 files changed, 27 insertions(+), 23 deletions(-) diff --git a/src/components/DateSelectionModal.vue b/src/components/DateSelectionModal.vue index c472b7cc..aa18b711 100644 --- a/src/components/DateSelectionModal.vue +++ b/src/components/DateSelectionModal.vue @@ -1,8 +1,8 @@