refactor(dashboard/banner-forms): refactored the banner forms to use new ones

apps/dashboard/src/components/CalendarRangeStrings.vue

@@ -0,0 +1,108 @@
+<template>
+  <Calendar
+      v-if="type === 'daterange'"
+      :placeholder="placeholder"
+      v-model="internalDates"
+      v-bind="attributes"
+      :disabled="disabled"
+      @input="updateStringValue"
+      selectionMode="range"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import Calendar from 'primevue/calendar';
+
+// Define the component's props
+const props = defineProps({
+  modelValue: {
+    type: Array<string>,
+    default: []
+  },
+  placeholder: {
+    type: String,
+    default: ''
+  },
+  attributes: {
+    type: Object,
+    default: () => ({})
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  type: {
+    type: String,
+    default: 'date'
+  },
+  dateFormat: {
+    type: String,
+    default: 'yyyy-MM-dd'
+  }
+});
+
+// Define the component's events
+const emit = defineEmits(['update:modelValue']);
+
+// Reactive reference to hold the internal date as a Date object
+const internalDates = ref<(Date | null)[] | null>(stringsToDates(props.modelValue));
+
+// Watch for changes in modelValue and update internalDate accordingly
+watch(
+    () => props.modelValue,
+    (newValue) => {
+      const newDates = stringsToDates(newValue);
+      if (JSON.stringify(newDates) !== JSON.stringify(internalDates.value)) {
+        internalDates.value = newDates;
+      }
+    },
+    { deep: true }
+);
+
+// Watch for changes in internalDates and emit updates to modelValue
+watch(
+    internalDates,
+    (newDate) => {
+      const newStringValues = datesToStrings(newDate);
+      if (JSON.stringify(newStringValues) !== JSON.stringify(props.modelValue)) {
+        emit('update:modelValue', newStringValues);
+      }
+    },
+    { deep: true }
+);
+
+// Helper functions for date conversion
+function stringsToDates(dateStrings: string[]): (Date | null)[] | null {
+  if (!dateStrings || dateStrings.length === 0) return null;
+  return dateStrings.map(stringToDate);
+}
+
+function datesToStrings(dates: (Date | null)[] | null): string[] {
+  if (!dates || dates.length === 0) return [];
+  return dates.map(date => (date ? dateToString(date) : ''));
+}
+
+function stringToDate(dateString: string): Date | null {
+  if (!dateString) return null;
+  const parts = dateString.split('-');
+  const year = parseInt(parts[0], 10);
+  const month = parseInt(parts[1], 10) - 1; // Months are zero-indexed
+  const day = parseInt(parts[2], 10);
+  return new Date(year, month, day);
+}
+
+function dateToString(date: Date | null): string {
+  if (!date) return '';
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0'); // Zero-padding
+  const day = String(date.getDate()).padStart(2, '0'); // Zero-padding
+  return `${year}-${month}-${day}`;
+}
+
+// Function to emit the updated string representation of the date
+function updateStringValue(newDate: any) {
+  const newString = datesToStrings(newDate);
+  emit('update:modelValue', newString); // Emit the string representation
+}
+</script>

apps/dashboard/src/components/InputSpan.vue

@@ -15,13 +15,17 @@
                 v-bind="attributes"
                 autoResize
                 :disabled="disabled"/>
-
       <CalendarString v-if="type === 'date'"
                 :placeholder="placeholder"
                 v-model="internalValue"
                 v-bind="attributes"
                 :disabled="disabled"/>
-
+      <CalendarRangeStrings v-if="type === 'daterange'"
+                           type="daterange"
+                           :placeholder="placeholder"
+                           v-model="internalValue"
+                           v-bind="attributes"
+                           :disabled="disabled"/>
       <InputNumber v-if="type === 'currency'"
                  mode="currency" currency="EUR" locale="nl-NL"
                  :min="0.0"
@@ -36,6 +40,10 @@
                    v-model="internalValue as number"
                    :disabled="disabled"
                    suffix="%"/>
+      <InputNumber v-if="type === 'number'"
+                   :placeholder="placeholder"
+                   v-model="internalValue as number"
+                   :disabled="disabled"/>
       <InputSwitch v-if="type === 'boolean'"
                    v-model="internalValue as boolean"
                    :disabled="disabled"/>
@@ -46,7 +54,6 @@
                 v-model="internalValue as number"
                 :placeholder="placeholder"
                 :disabled="disabled"/>
-
       <InputText v-if="type === 'pin'"
                  class="w-3"
                  size="small"
@@ -80,14 +87,15 @@ import CalendarString from "@/components/CalendarString.vue";
 import type { HintedString } from "primevue/ts-helpers";
 import InputNumber from "primevue/inputnumber";
 import { userTypes } from "@/utils/validation-schema";
+import CalendarRangeStrings from "@/components/CalendarRangeStrings.vue";
 
 const props = defineProps({
   label: {
     type: String,
     required: true
   },
   value: {
-    type: [String, Number, Boolean],
+    type: [String, Number, Boolean, Array<string>],
   },
   attributes: {
     type: Object as PropType<any>,
@@ -122,18 +130,19 @@ const props = defineProps({
 const emit = defineEmits(['update:value']);
 
 const stringInputs = ['text', 'textarea', 'pin', 'password'];
-
+const stringArrayInputs = ['daterange'];
 const numberInputs = ['currency', 'number', 'usertype', 'percentage'];
 const booleanInputs = ['boolean'];
 
 const initialValue = () => {
   if (stringInputs.includes(props.type)) return '';
   if (numberInputs.includes(props.type)) return 0;
+  if (stringArrayInputs.includes(props.type)) return [];
   if (booleanInputs.includes(props.type)) return false;
   return '';
 };
 
-const internalValue: Ref<string | number | boolean | undefined> = ref(initialValue());
+const internalValue: Ref<string | number | boolean | undefined | string[]> = ref(initialValue());
 
 onMounted(() => {
   internalValue.value = props.value ?? '';

apps/dashboard/src/locales/en/common/common.json

@@ -43,6 +43,7 @@
         "createdAt": "Created at",
         "updatedAt": "Updated at",
         "placeholders": {
+            "banner": "BAC Weekend",
             "selectType": "Select Type",
             "email": "[email protected]",
             "bankAccountNumber": "NL69 ABNA 0012 3456 78",
@@ -99,6 +100,7 @@
                 "productDeleted": "Successfully deleted product.",
                 "payoutDeleted": "Successfully deleted payout.",
                 "payoutUpdated": "Successfully updated payout.",
+                "bannerCreated": "Successfully created banner.",
                 "payout": {
                     "verify": "Verification Success",
                     "details": "Payout is verified."

apps/dashboard/src/locales/nl/common/common.json

@@ -53,7 +53,8 @@
             "city": "Zwolle",
             "country": "Nederland",
             "product": "IJs",
-            "pos": "GELIMBO"
+            "pos": "GELIMBO",
+            "banner": "BAC Weekend"
         },
         "tooltip": {
             "productOwner": "Opmerking: De eigenaar van de container krijgt de opbrengst, niet de producteigenaar. Eigenaar kan na aanmaak niet meer worden bewerkt."
@@ -99,6 +100,7 @@
                 "productDeleted": "Product succesvol verwijderd.",
                 "payoutDeleted": "Uitbetaling succesvol verwijderd.",
                 "payoutUpdated": "Uitbetaling succesvol bijgewerkt.",
+                "bannerCreated": "Banner succesvol aangemaakt.",
                 "payout": {
                     "verify": "Verificatie succesvol",
                     "details": "Uitbetaling is geverifieerd."