Commit b8541350 authored by MARCO Jonathan's avatar MARCO Jonathan
Browse files

The default value can be displayed in the date field in renderer

Ref di/vue-formbuilder#58
parent 4a25a1df
<template>
<v-menu
v-show="editorMode || visible"
v-if="editorMode || exist"
v-model="menu.isVisible"
offset-y
:close-on-content-click="menu.closeOnContentClick"
:min-width="menu.minWidth"
v-show="editorMode || visible"
v-if="editorMode || exist"
v-model="menu.isVisible"
offset-y
:close-on-content-click="menu.closeOnContentClick"
:min-width="menu.minWidth"
>
<template #activator="{ on }">
<v-text-field
:value="getDateOrTimeFormat(value)"
:class="editorMode ? 'picker-text-field mx-2' : 'picker-text-field'"
:label="label"
:hint="translated(fieldId, 'hint')"
:persistent-hint="field.persistentHint"
:prepend-icon="textFieldPrependIcon"
readonly
clearable
:rules="[handleRequired]"
v-on="on"
:value="getDateOrTimeFormat(value)"
:class="editorMode ? 'picker-text-field mx-2' : 'picker-text-field'"
:label="label"
:hint="translated(fieldId, 'hint')"
:persistent-hint="field.persistentHint"
:prepend-icon="textFieldPrependIcon"
readonly
clearable
:rules="[handleRequired]"
:disabled="fieldOnReadOnly"
v-on="on"
>
<template #append-outer>
<v-icon
v-if="field.repeatable"
@click="repeat"
v-if="field.repeatable"
@click="repeat"
>
mdi-plus
</v-icon>
......@@ -32,33 +33,35 @@
</template>
<v-date-picker
v-if="field.type === 'date'"
:ref="pickerRef"
v-model="value"
:locale="field.locale"
:min="dateMin"
:max="dateMax"
no-title
@input="menu.isVisible = false"
color="primary"
v-if="field.type === 'date'"
:ref="pickerRef"
v-model="value"
:locale="field.locale"
:min="dateMin"
:max="dateMax"
no-title
@input="menu.isVisible = false"
color="primary"
/>
<v-time-picker
v-if="field.type === 'time'"
:ref="pickerRef"
v-model="value"
:locale="field.locale"
@input="menu.isVisible = false"
:format="timeFormat"
color="primary"
v-if="field.type === 'time'"
:ref="pickerRef"
v-model="value"
:locale="field.locale"
@input="menu.isVisible = false"
:format="timeFormat"
color="primary"
/>
</v-menu>
</template>
<script lang="ts">
import {usfFieldMixin, usfHandleConditional} from '../../../mixins'
import dayjs from '../../../utils/dayjs'
import Vue from 'vue'
import {UnitTypeLongPlural} from 'dayjs';
import { usfFieldMixin, usfHandleConditional, usfDefaultTokenMixin } from '@form-plugin/mixins';
import dayjs from '@form-plugin/utils/dayjs';
import Vue from 'vue';
import { UnitTypeLongPlural } from 'dayjs';
import { Field } from '#form-plugin/models/form';
import { mapGetters } from 'vuex';
interface ComponentData {
menu: {
......@@ -74,6 +77,7 @@ export default Vue.extend({
mixins: [
usfFieldMixin,
usfHandleConditional,
usfDefaultTokenMixin,
],
props: {
......@@ -93,33 +97,34 @@ export default Vue.extend({
}),
computed: {
...mapGetters('form', ['getFieldById']),
textFieldPrependIcon(): string {
return this.field.type === 'date' ? 'mdi-calendar-outline' : 'mdi-clock-outline'
return this.field.type === 'date' ? 'mdi-calendar-outline' : 'mdi-clock-outline';
},
pickerRef(): string {
return `${this.field.type}Picker`
return `${this.field.type}Picker`;
},
dateMin(): undefined | string {
return this.getDateFromDelta(this.field.minValue, this.field.minUnit, 'min')
return this.getDateFromDelta(this.field.minValue, this.field.minUnit, 'min');
},
dateMax() {
return this.getDateFromDelta(this.field.maxValue, this.field.maxUnit, 'max')
return this.getDateFromDelta(this.field.maxValue, this.field.maxUnit, 'max');
},
timeFormat() {
return this._globaleLocale === 'fr' ? '24hr' : 'ampm'
return this._globaleLocale === 'fr' ? '24hr' : 'ampm';
},
},
watch: {
'field.type': function () {
this.field.value = ''
'field.type': function() {
this.field.value = '';
},
'menu.isVisible': function (val) {
'menu.isVisible': function(val) {
if (val && this.field.type === 'date' && this.field.style === 'standard') {
setTimeout(() => (this.$refs[this.pickerRef].activePicker = 'DATE'))
setTimeout(() => (this.$refs[this.pickerRef].activePicker = 'DATE'));
}
if (val && this.field.type === 'date' && this.field.style === 'birthday') {
setTimeout(() => (this.$refs[this.pickerRef].activePicker = 'YEAR'))
setTimeout(() => (this.$refs[this.pickerRef].activePicker = 'YEAR'));
}
},
},
......@@ -134,42 +139,44 @@ export default Vue.extend({
* @return {string | undefined}
*/
getDateFromDelta(
delta: number | undefined,
unit: UnitTypeLongPlural | undefined,
type: 'max' | 'min',
delta: number | undefined,
unit: UnitTypeLongPlural | undefined,
type: 'max' | 'min',
): undefined | string {
if (unit) {
const now = dayjs()
const now = dayjs();
if (delta === 0) {
return now.toISOString()
return now.toISOString();
}
return (type === 'max' && this.field.maxDateFuture) || (type === 'min' && this.field.minDateFuture)
? now.add(delta, unit)
.toISOString()
: now.subtract(delta, unit)
.toISOString()
? now.add(delta, unit)
.toISOString()
: now.subtract(delta, unit)
.toISOString();
}
return undefined
return undefined;
},
getDateOrTimeFormat(dateOrTime: string): string {
if (!dateOrTime) return dateOrTime
console.log(this.field);
if (!dateOrTime) return dateOrTime;
if (this.field.type === 'time') {
return this._globaleLocale === 'fr'
? dayjs(dateOrTime, 'HH:mm').format('HH:mm')
: dayjs(dateOrTime, 'h:mm').format('hh:mm a')
? dayjs(dateOrTime, 'HH:mm').format('HH:mm')
: dayjs(dateOrTime, 'h:mm').format('hh:mm a');
}
const format = this._globaleLocale === 'fr'
? 'DD/MM/YYYY'
: 'YYYY-MM-DD'
return dayjs(dateOrTime).format(format)
? 'DD/MM/YYYY'
: 'YYYY-MM-DD';
return dayjs(dateOrTime).format(format);
},
},
})
});
</script>
<style lang="scss" scoped>
......
......@@ -35,14 +35,13 @@
</template>
<script lang="ts">
import { usfFieldMixin, usfHandleConditional } from '../../../mixins';
import { usfFieldMixin, usfHandleConditional, usfDefaultTokenMixin } from '@form-plugin/mixins';
import Vue from 'vue';
import { mapGetters } from 'vuex';
export default Vue.extend({
name: 'UsfText',
mixins: [usfFieldMixin, usfHandleConditional],
mixins: [usfFieldMixin, usfHandleConditional, usfDefaultTokenMixin],
props: {
editorMode: {
......@@ -53,7 +52,6 @@ export default Vue.extend({
},
computed: {
...mapGetters('form', ['autoCompletionIsActive']),
rules(): (boolean | string)[] {
const rules = [
this.handleRequired,
......@@ -78,9 +76,6 @@ export default Vue.extend({
? `${this.field.label} doit être inférieur ou égal à ${this.field.max}`
: `${this.field.label} doit comporter ${this.field.max} caractères ou moins`;
},
fieldOnReadOnly(): boolean {
return !!this.field.defaultTokenValue && this.autoCompletionIsActive;
},
},
mounted() {
......@@ -89,17 +84,6 @@ export default Vue.extend({
}
},
watch: {
autoCompletionIsActive: function() {
if (this.autoCompletionIsActive) {
this.$store.dispatch('submission/updateValue', {
key: this.field.name,
value: this.user[this.field.defaultTokenValue],
});
}
},
},
methods: {
handleMin(): boolean | string {
const test = this.field.type === 'number'
......
import usfFieldMixin from './usfFieldMixin';
import usfHandleConditional from './usfHandleConditional';
import usfFieldWithOptions from './UsfFieldWithOptions.js';
import usfDefaultTokenMixin from './usfDefaultTokenMixin';
export {
usfFieldMixin,
usfHandleConditional,
usfFieldWithOptions,
usfFieldMixin,
usfHandleConditional,
usfFieldWithOptions,
usfDefaultTokenMixin,
};
import Vue from 'vue';
import { mapGetters } from 'vuex';
export default Vue.extend({
computed: {
...mapGetters('form', ['autoCompletionIsActive']),
fieldOnReadOnly(): boolean {
return !!this.field.defaultTokenValue && this.autoCompletionIsActive;
},
},
watch: {
autoCompletionIsActive: function() {
if (this.autoCompletionIsActive) {
let value = this.user[this.field.defaultTokenValue]
if (this.field.component === 'UsfDateTime') {
value = value.replace(/^(\d{4})(\d{2})(\d{2}).*$/, '$1-$2-$3')
}
this.$store.dispatch('submission/updateValue', {
key: this.field.name,
value,
});
}
},
},
});
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment