Skip to content

Commit 786a2a3

Browse files
ivictborivictbor
authored
Merge pull request #107 from devforth/add-date-and-time-inputs
fix: change inputs for date and time to date selectors
2 parents fee1101 + bf0bf66 commit 786a2a3

File tree

5 files changed

+49
-31
lines changed

5 files changed

+49
-31
lines changed

‎adminforth/dataConnectors/mysql.ts‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -119,15 +119,9 @@ class MysqlConnector extends AdminForthBaseConnector implements IAdminForthDataS
119119
}
120120
return dayjs(value).toISOString();
121121
} else if (field.type == AdminForthDataTypes.DATE) {
122-
if (!value) {
123-
return null;
124-
}
125-
return dayjs(value).toISOString().split('T')[0];
122+
return value || null;
126123
} else if (field.type == AdminForthDataTypes.TIME) {
127-
if (!value) {
128-
return null;
129-
}
130-
return dayjs(value).toISOString().split('T')[1];
124+
return value || null;
131125
} else if (field.type == AdminForthDataTypes.BOOLEAN) {
132126
return !!value;
133127
} else if (field.type == AdminForthDataTypes.JSON) {

‎adminforth/spa/src/components/ColumnValueInput.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555
@update:modelValue="$emit('update:modelValue', $event)"
5656
/>
5757
<CustomDatePicker
58-
v-else-if="['datetime'].includes(type || column.type)"
58+
v-else-if="['datetime', 'date', 'time'].includes(type || column.type)"
5959
ref="input"
6060
:column="column"
6161
:valueStart="value"

‎adminforth/spa/src/components/CustomDatePicker.vue‎

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<div>
55
<label v-if="label" for="start-time" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ label }}</label>
66

7-
<div class="relative">
7+
<div class="relative" :class="{hidden: column.type === 'time'}">
88
<div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
99
<IconCalendar class="w-4 h-4 text-gray-500 dark:text-gray-400"/>
1010
</div>
@@ -34,6 +34,7 @@
3434

3535
<button type="button"
3636
class="text-lightPrimary dark:text-darkPrimary text-base font-medium hover:underline p-0 inline-flex items-center mb-2"
37+
:class="{hidden: column.type !== 'datetime'}"
3738
@click="toggleTimeInputs">{{ showTimeInputs ? $t('Hide time') : $t('Show time') }}
3839
<svg class="w-8 h-8 ms-0.5" :class="{'rotate-180': showTimeInputs}" aria-hidden="true"
3940
xmlns="http://www.w3.org/2000/svg" width="24" height="24"
@@ -81,7 +82,7 @@ const emit = defineEmits(['update:valueStart']);
8182
8283
const datepickerStartEl = ref();
8384
84-
const showTimeInputs = ref(false);
85+
const showTimeInputs = ref(props.column?.type === 'time');
8586
8687
const startDate = ref('');
8788
@@ -90,12 +91,20 @@ const startTime = ref('');
9091
const datepickerObject = ref('')
9192
9293
const start = computed(() => {
94+
if (props.column?.type === 'time') {
95+
return formatTime(startTime.value);
96+
}
97+
9398
if (!startDate.value) {
9499
return;
95100
}
96101
97102
let date = dayjs(startDate.value);
98103
104+
if (props.column?.type === 'date') {
105+
return date.format('YYYY-MM-DD');
106+
}
107+
99108
if (startTime.value) {
100109
date = addTimeToDate(formatTime(startTime.value), date)
101110
}
@@ -107,6 +116,8 @@ async function updateFromProps() {
107116
if (!props.valueStart) {
108117
datepickerStartEl.value.value = '';
109118
startTime.value = '';
119+
} else if (props.column.type === 'time') {
120+
startTime.value = props.valueStart;
110121
} else {
111122
// wait ref to initialize
112123
await nextTick();

‎adminforth/spa/src/components/CustomDateRangePicker.vue‎

Lines changed: 32 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div>
3-
<div class="mx-auto grid grid-cols-2 gap-4 mb-2">
3+
<div class="mx-auto grid grid-cols-2 gap-4 mb-2" :class="{hidden: column.type === 'time'}">
44
<div class="relative">
55
<div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
66
<IconCalendar class="w-4 h-4 text-gray-500 dark:text-gray-400"/>
@@ -51,6 +51,7 @@
5151

5252
<button type="button"
5353
class="text-lightPrimary dark:text-darkPrimary text-base font-medium hover:underline p-0 inline-flex items-center mb-2"
54+
:class="{hidden: column.type !== 'datetime'}"
5455
@click="toggleTimeInputs">{{ showTimeInputs ? $t('Hide time') : $t('Show time') }}
5556
<svg class="w-8 h-8 ms-0.5 relative top-px" :class="{'rotate-180': showTimeInputs}" aria-hidden="true"
5657
xmlns="http://www.w3.org/2000/svg" width="24" height="24"
@@ -93,7 +94,7 @@ const emit = defineEmits(['update:valueStart', 'update:valueEnd']);
9394
const datepickerStartEl = ref();
9495
const datepickerEndEl = ref();
9596
96-
const showTimeInputs = ref(false);
97+
const showTimeInputs = ref(props.column?.type === 'time');
9798
9899
const startDate = ref('');
99100
const endDate = ref('');
@@ -105,12 +106,20 @@ const datepickerStartObject = ref('')
105106
const datepickerEndObject = ref('')
106107
107108
const start = computed(() => {
109+
if (props.column?.type === 'time') {
110+
return formatTime(startTime.value);
111+
}
112+
108113
if (!startDate.value) {
109114
return;
110115
}
111116
112117
let date = dayjs(startDate.value);
113118
119+
if (props.column?.type === 'date') {
120+
return date.format('YYYY-MM-DD');
121+
}
122+
114123
if (startTime.value) {
115124
date = addTimeToDate(formatTime(startTime.value), date)
116125
}
@@ -119,12 +128,20 @@ const start = computed(() => {
119128
})
120129
121130
const end = computed(() => {
131+
if (props.column?.type === 'time') {
132+
return formatTime(endTime.value);
133+
}
134+
122135
if (!endDate.value) {
123136
return;
124137
}
125138
126139
let date = dayjs(endDate.value);
127140
141+
if (props.column?.type === 'date') {
142+
return date.format('YYYY-MM-DD');
143+
}
144+
128145
if (endTime.value) {
129146
date = addTimeToDate(formatTime(endTime.value), date)
130147
} else {
@@ -135,7 +152,12 @@ const end = computed(() => {
135152
})
136153
137154
function updateFromProps() {
138-
if (props.valueStart) {
155+
if (!props.valueStart) {
156+
datepickerStartEl.value.value = '';
157+
startTime.value = '';
158+
} else if (props.column.type === 'time') {
159+
startTime.value = props.valueStart;
160+
} else {
139161
const date = dayjs(props.valueStart);
140162
datepickerStartEl.value.value = date.format('DD MMM YYYY');
141163
if (date.format('HH:mm') !== '00:00') {
@@ -145,11 +167,14 @@ function updateFromProps() {
145167
startTime.value = '';
146168
}
147169
startDate.value = date.toString();
148-
} else {
149-
datepickerStartEl.value.value = '';
150-
startTime.value = '';
151170
}
152-
if (props.valueEnd) {
171+
172+
if (!props.valueEnd) {
173+
datepickerEndEl.value.value = '';
174+
endTime.value = '';
175+
} else if (props.column.type === 'time') {
176+
endTime.value = props.valueEnd;
177+
} else {
153178
const date = dayjs(props.valueEnd);
154179
datepickerEndEl.value.value = date.format('DD MMM YYYY');
155180
if (date.format('HH:mm') !== '00:00') {
@@ -159,9 +184,6 @@ function updateFromProps() {
159184
endTime.value = '';
160185
}
161186
endDate.value = date.toString();
162-
} else {
163-
datepickerEndEl.value.value = '';
164-
endTime.value = '';
165187
}
166188
}
167189

‎adminforth/spa/src/components/Filters.vue‎

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -63,23 +63,14 @@
6363
/>
6464

6565
<CustomDateRangePicker
66-
v-else-if="['datetime'].includes(c.type)"
66+
v-else-if="['datetime', 'date', 'time'].includes(c.type)"
6767
:column="c"
6868
:valueStart="filtersStore.filters.find(f => f.field === c.name && f.operator === 'gte')?.value || undefined"
6969
@update:valueStart="setFilterItem({ column: c, operator: 'gte', value: $event || undefined })"
7070
:valueEnd="filtersStore.filters.find(f => f.field === c.name && f.operator === 'lte')?.value || undefined"
7171
@update:valueEnd="setFilterItem({ column: c, operator: 'lte', value: $event || undefined })"
7272
/>
7373

74-
<Input
75-
v-else-if="['date', 'time'].includes(c.type)"
76-
type="text"
77-
full-width
78-
:placeholder="$t('Search datetime')"
79-
@update:modelValue="setFilterItem({ column: c, operator: 'ilike', value: $event || undefined })"
80-
:modelValue="getFilterItem({ column: c, operator: 'ilike' })"
81-
/>
82-
8374
<CustomRangePicker
8475
v-else-if="['integer', 'decimal', 'float'].includes(c.type) && c.allowMinMaxQuery"
8576
:min="getFilterMinValue(c.name)"

0 commit comments

Comments
 (0)