Merge branch 'next' of github.com:devforth/adminforth into next

devforth · Feb 3, 2025 · 2da50bf · 2da50bf
2 parents 67557e2 + 786a2a3
commit 2da50bf
Show file tree

Hide file tree

Showing 7 changed files with 116 additions and 134 deletions.
diff --git a/adminforth/dataConnectors/mysql.ts b/adminforth/dataConnectors/mysql.ts
@@ -119,15 +119,9 @@ class MysqlConnector extends AdminForthBaseConnector implements IAdminForthDataS
       }
       return dayjs(value).toISOString();
     } else if (field.type == AdminForthDataTypes.DATE) {
-      if (!value) {
-        return null;
-      }
-      return dayjs(value).toISOString().split('T')[0];
+      return value || null;
     } else if (field.type == AdminForthDataTypes.TIME) {
-      if (!value) {
-        return null;
-      }
-      return dayjs(value).toISOString().split('T')[1];
+      return value || null;
     } else if (field.type == AdminForthDataTypes.BOOLEAN) {
       return !!value;
     } else if (field.type == AdminForthDataTypes.JSON) {

diff --git a/adminforth/spa/package-lock.json b/adminforth/spa/package-lock.json
diff --git a/adminforth/spa/package.json b/adminforth/spa/package.json
@@ -16,7 +16,7 @@
     "@iconify-prerendered/vue-flowbite": "^0.23.1714023977",
     "@unhead/vue": "^1.9.12",
     "@vueuse/core": "^10.10.0",
-    "apexcharts": "^3.52.0",
+    "apexcharts": "^4.4.0",
     "dayjs": "^1.11.11",
     "debounce": "^2.1.0",
     "flowbite": "^2.3.0",

diff --git a/adminforth/spa/src/components/ColumnValueInput.vue b/adminforth/spa/src/components/ColumnValueInput.vue
@@ -55,7 +55,7 @@
       @update:modelValue="$emit('update:modelValue', $event)"
     />
     <CustomDatePicker
-      v-else-if="['datetime'].includes(type || column.type)"
+      v-else-if="['datetime', 'date', 'time'].includes(type || column.type)"
       ref="input"
       :column="column"
       :valueStart="value"

diff --git a/adminforth/spa/src/components/CustomDatePicker.vue b/adminforth/spa/src/components/CustomDatePicker.vue
@@ -4,7 +4,7 @@
       <div>
         <label v-if="label" for="start-time" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ label }}</label>
 
-        <div class="relative">
+        <div class="relative" :class="{hidden: column.type === 'time'}">
           <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
             <IconCalendar class="w-4 h-4 text-gray-500 dark:text-gray-400"/>
           </div>
@@ -34,6 +34,7 @@
 
       <button type="button"
               class="text-lightPrimary dark:text-darkPrimary text-base font-medium hover:underline p-0 inline-flex items-center mb-2"
+              :class="{hidden: column.type !== 'datetime'}"
               @click="toggleTimeInputs">{{ showTimeInputs ? $t('Hide time') : $t('Show time') }}
         <svg class="w-8 h-8 ms-0.5" :class="{'rotate-180': showTimeInputs}" aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg" width="24" height="24"
@@ -81,7 +82,7 @@ const emit = defineEmits(['update:valueStart']);
 
 const datepickerStartEl = ref();
 
-const showTimeInputs = ref(false);
+const showTimeInputs = ref(props.column?.type === 'time');
 
 const startDate = ref('');
 
@@ -90,12 +91,20 @@ const startTime = ref('');
 const datepickerObject = ref('')
 
 const start = computed(() => {
+  if (props.column?.type === 'time') {
+    return formatTime(startTime.value);
+  }
+  
   if (!startDate.value) {
     return;
   }
 
   let date = dayjs(startDate.value);
 
+  if (props.column?.type === 'date') {
+    return date.format('YYYY-MM-DD');
+  }
+
   if (startTime.value) {
     date = addTimeToDate(formatTime(startTime.value), date)
   }
@@ -107,6 +116,8 @@ async function updateFromProps() {
   if (!props.valueStart) {
     datepickerStartEl.value.value = '';
     startTime.value = '';
+  } else if (props.column.type === 'time') {
+    startTime.value = props.valueStart;
   } else {
     // wait ref to initialize
     await nextTick();

diff --git a/adminforth/spa/src/components/CustomDateRangePicker.vue b/adminforth/spa/src/components/CustomDateRangePicker.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="mx-auto grid grid-cols-2 gap-4 mb-2">
+    <div class="mx-auto grid grid-cols-2 gap-4 mb-2" :class="{hidden: column.type === 'time'}">
       <div class="relative">
         <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
           <IconCalendar class="w-4 h-4 text-gray-500 dark:text-gray-400"/>
@@ -51,6 +51,7 @@
 
       <button type="button"
               class="text-lightPrimary dark:text-darkPrimary text-base font-medium hover:underline p-0 inline-flex items-center mb-2"
+              :class="{hidden: column.type !== 'datetime'}"
               @click="toggleTimeInputs">{{ showTimeInputs ? $t('Hide time') : $t('Show time') }}
         <svg class="w-8 h-8 ms-0.5 relative top-px" :class="{'rotate-180': showTimeInputs}" aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg" width="24" height="24"
@@ -93,7 +94,7 @@ const emit = defineEmits(['update:valueStart', 'update:valueEnd']);
 const datepickerStartEl = ref();
 const datepickerEndEl = ref();
 
-const showTimeInputs = ref(false);
+const showTimeInputs = ref(props.column?.type === 'time');
 
 const startDate = ref('');
 const endDate = ref('');
@@ -105,12 +106,20 @@ const datepickerStartObject = ref('')
 const datepickerEndObject = ref('')
 
 const start = computed(() => {
+  if (props.column?.type === 'time') {
+    return formatTime(startTime.value);
+  }
+
   if (!startDate.value) {
     return;
   }
 
   let date = dayjs(startDate.value);
 
+  if (props.column?.type === 'date') {
+    return date.format('YYYY-MM-DD');
+  }
+
   if (startTime.value) {
     date = addTimeToDate(formatTime(startTime.value), date)
   }
@@ -119,12 +128,20 @@ const start = computed(() => {
 })
 
 const end = computed(() => {
+  if (props.column?.type === 'time') {
+    return formatTime(endTime.value);
+  }
+
   if (!endDate.value) {
     return;
   }
 
   let date = dayjs(endDate.value);
 
+  if (props.column?.type === 'date') {
+    return date.format('YYYY-MM-DD');
+  }
+
   if (endTime.value) {
     date = addTimeToDate(formatTime(endTime.value), date)
   } else {
@@ -135,7 +152,12 @@ const end = computed(() => {
 })
 
 function updateFromProps() {
-  if (props.valueStart) {
+  if (!props.valueStart) {
+    datepickerStartEl.value.value = '';
+    startTime.value = '';
+  } else if (props.column.type === 'time') {
+    startTime.value = props.valueStart;
+  } else {
     const date = dayjs(props.valueStart);
     datepickerStartEl.value.value = date.format('DD MMM YYYY');
     if (date.format('HH:mm') !== '00:00') {
@@ -145,11 +167,14 @@ function updateFromProps() {
       startTime.value = '';
     }
     startDate.value = date.toString();
-  } else {
-    datepickerStartEl.value.value = '';
-    startTime.value = '';
   }
-  if (props.valueEnd) {
+
+  if (!props.valueEnd) {
+    datepickerEndEl.value.value = '';
+    endTime.value = '';
+  } else if (props.column.type === 'time') {
+    endTime.value = props.valueEnd;
+  } else {
     const date = dayjs(props.valueEnd);
     datepickerEndEl.value.value = date.format('DD MMM YYYY');
     if (date.format('HH:mm') !== '00:00') {
@@ -159,9 +184,6 @@ function updateFromProps() {
       endTime.value = '';
     }
     endDate.value = date.toString();
-  } else {
-    datepickerEndEl.value.value = '';
-    endTime.value = '';
   }
 }