Display: Remove BaseInputDate component in favor of BaseCalendar

Author: AngelFQC

assets/css/scss/atoms/_calendar.scss

@@ -50,7 +50,7 @@
   }
 
   &-panel {
-    @apply absolute overflow-auto top-0 left-0 bg-white drop-shadow-lg rounded-lg border-none text-gray-90 mt-1 p-0
+    @apply w-auto absolute bg-white drop-shadow-lg rounded-lg border-none text-gray-90 mt-1 p-0
       before:content-[""] before:w-full before:block before:h-3 before:sticky before:bg-white before:z-[2] before:top-0 before:rounded-t-lg before:rounded-b-none
       after:content-[""] after:w-full after:block after:h-3 after:sticky after:bg-white after:z-[2] after:bottom-0 after:rounded-b-lg after:rounded-t-none;
   }

assets/css/scss/index.scss

@@ -56,7 +56,6 @@
 
 @include meta.load-css("molecules/chip");
 @include meta.load-css("molecules/course_tool");
-@include meta.load-css("molecules/datepicker");
 @include meta.load-css("molecules/empty_state");
 @include meta.load-css("molecules/teacher_bar");
 @include meta.load-css("molecules/toolbar");

assets/css/scss/molecules/_datepicker.scss

@@ -1,7 +1,7 @@
 <script setup>
 import { provide, ref } from "vue"
 import { useI18n } from "vue-i18n"
-import BaseInputDate from "../basecomponents/BaseInputDate.vue"
+import BaseCalendar from "../basecomponents/BaseCalendar.vue"
 import BaseButton from "../basecomponents/BaseButton.vue"
 import BaseMenu from "../basecomponents/BaseMenu.vue"
 import BaseDialogConfirmCancel from "../basecomponents/BaseDialogConfirmCancel.vue"
@@ -213,10 +213,10 @@ provide("isCustomizing", isCustomizing)
         :label="t('This is a form with an error')"
         :model-value="null"
       />
-      <BaseInputDate
-        id="date"
+      <BaseCalendar
+        id="dates"
         :label="t('Date')"
-        class="w-32"
+        show-time
       />
     </div>
 

assets/vue/components/admin/ColorThemePreview.vue

@@ -59,7 +59,7 @@
         name="enableExpiryDate"
       />
 
-      <BaseInputDate
+      <BaseCalendar
         v-if="chkExpiresOn"
         id="expires_on"
         v-model="v$.expiresOn.$model"
@@ -76,14 +76,13 @@
         name="enableEndDate"
       />
 
-      <BaseInputDate
+      <BaseCalendar
         v-if="chkEndsOn"
         id="ends_on"
         v-model="v$.endsOn.$model"
         :error-text="v$.endsOn.$errors.map((error) => error.$message).join('<br>')"
         :is-invalid="v$.endsOn.$error"
         :label="t('Ends at (completely closed)')"
-        show-time
       />
 
       <BaseCheckbox
@@ -118,7 +117,7 @@
 </template>
 
 <script setup>
-import BaseInputDate from "../basecomponents/BaseInputDate.vue"
+import BaseCalendar from "../basecomponents/BaseCalendar.vue"
 import BaseInputText from "../basecomponents/BaseInputText.vue"
 import BaseAdvancedSettingsButton from "../basecomponents/BaseAdvancedSettingsButton.vue"
 import BaseButton from "../basecomponents/BaseButton.vue"

assets/vue/components/assignments/AssignmentsForm.vue

@@ -2,10 +2,11 @@
   <form class="flex flex-col gap-6 mt-6">
     <!-- Start Date -->
     <BaseCalendar
+      id="date_time"
       v-model="formData.startDate"
       :label="t('Start Date')"
-      :show-time="true"
       required
+      show-time
     />
 
     <!-- Repeat Date -->
@@ -39,6 +40,7 @@
 
       <!-- Repeat End Date -->
       <BaseCalendar
+        id="end_date_time"
         v-model="formData.repeatEndDate"
         :label="t('Repeat End Date')"
         :show-time="true"
@@ -153,7 +155,6 @@ const submitForm = async () => {
   }
 }
 
-
 const loadGroups = async () => {
   try {
     groupOptions.value = await attendanceService.fetchGroups(parentResourceNodeId.value)

assets/vue/components/attendance/AttendanceCalendarForm.vue

@@ -2,18 +2,21 @@
 import { computed, onMounted, ref, watch } from "vue"
 import DatePicker from "primevue/datepicker"
 import FloatLabel from "primevue/floatlabel"
+import Message from "primevue/message"
 import { calendarLocales } from "../../utils/calendarLocales"
 import { useLocale } from "../../composables/locale"
 import { usePrimeVue } from "primevue/config"
 
+const modelValue = defineModel({
+  type: [Date, Array, String, undefined, null],
+  required: false,
+  default: null,
+})
+
 const { appLocale } = useLocale()
 const localePrefix = ref(getLocalePrefix(appLocale.value))
-const props = defineProps({
-  modelValue: {
-    type: [String, Date, Array],
-    required: false,
-    default: null,
-  },
+
+defineProps({
   label: {
     type: String,
     required: true,
@@ -29,11 +32,6 @@ const props = defineProps({
     default: "single",
     validator: (value) => ["single", "range"].includes(value),
   },
-  showIcon: {
-    type: Boolean,
-    required: false,
-    default: false,
-  },
   showTime: {
     type: Boolean,
     required: false,
@@ -44,20 +42,11 @@ const props = defineProps({
     required: false,
     default: false,
   },
-})
-
-const model = ref(
-  props.modelValue
-    ? Array.isArray(props.modelValue)
-      ? props.modelValue.map((date) => new Date(date))
-      : new Date(props.modelValue)
-    : null,
-)
-
-const emit = defineEmits(["update:modelValue"])
-
-watch(model, (newValue) => {
-  emit("update:modelValue", newValue)
+  errorText: {
+    type: String,
+    required: false,
+    default: null,
+  },
 })
 
 function getLocalePrefix(locale) {
@@ -97,22 +86,30 @@ onMounted(() => {
   <div class="field">
     <FloatLabel variant="on">
       <DatePicker
-        v-model="model"
-        :class="{ 'p-invalid': isInvalid }"
+        v-model="modelValue"
         :date-format="dateFormat"
         :input-id="id"
+        :invalid="isInvalid"
         :locale="selectedLocale"
         :manual-input="type !== 'range'"
         :selection-mode="type"
-        :show-icon="showIcon"
         :show-time="showTime"
         fluid
         icon-display="input"
+        show-icon
       />
       <label
         :for="id"
         v-text="label"
       />
     </FloatLabel>
+    <Message
+      v-if="isInvalid"
+      size="small"
+      severity="seconday"
+      variant="simple"
+    >
+      {{ errorText }}
+    </Message>
   </div>
 </template>