288 lines
9.5 KiB
Vue
288 lines
9.5 KiB
Vue
<template>
|
|
<div>
|
|
<!-- SELECT INPUT TYPE -->
|
|
<fieldset
|
|
v-if="!intModel?.id"
|
|
class="border h-100 bg-white p-3 mb-3"
|
|
>
|
|
<legend>{{ __('Type du champs') }}</legend>
|
|
<select
|
|
id="select-field"
|
|
class="form-select"
|
|
name="type"
|
|
:aria-label="__('Default select example')"
|
|
@change="updateSelectValue()"
|
|
role="button"
|
|
required
|
|
>
|
|
<option
|
|
:selected="(intModel != null) ? false : true"
|
|
disabled
|
|
>
|
|
{{ __('Sélectionnez un type de champs parmis la liste suivante :') }}
|
|
</option>
|
|
<template
|
|
v-for="(input, inputIndex) in intInputTypes"
|
|
:key="inputIndex"
|
|
>
|
|
<option
|
|
:selected="(intModelTypeValue === input.value) ? true : false"
|
|
:value="Number(inputIndex) + 1"
|
|
>
|
|
{{ input.label }}
|
|
</option>
|
|
</template>
|
|
</select>
|
|
</fieldset>
|
|
<!-- OTHERS FIELDS -->
|
|
<template v-if="intSelectValue != null">
|
|
<input
|
|
class="d-none"
|
|
:value="intModel?.status"
|
|
name="status"
|
|
readonly
|
|
>
|
|
<fieldset
|
|
v-if="intModel?.status !== intInputStatus[0].value &&
|
|
intModel?.status !== intInputStatus[1].value"
|
|
class="border h-100 bg-white p-3 mb-3"
|
|
>
|
|
<legend>{{ __('Informations principales') }}</legend>
|
|
<div class="row w-100 mx-auto">
|
|
<div class="col-12 col-md-6">
|
|
<label
|
|
for="fieldName"
|
|
class="col-form-label"
|
|
>
|
|
<b>{{ __('Nom du champs') }}</b>
|
|
</label>
|
|
<WordCounter
|
|
id="fieldName"
|
|
class="ck-word-count"
|
|
/>
|
|
<input
|
|
id="fieldName"
|
|
class="form-control need-word-counter"
|
|
type="text"
|
|
name="name"
|
|
placeholder="Nom du champs"
|
|
:value="intModel?.name"
|
|
>
|
|
<p class="text-danger m-0">
|
|
{{ parseValidationInput(`name`, allErrors) }}
|
|
</p>
|
|
<small class="form-text text-muted">{{ __('Doit posséder 3 caractères minimum, 255 maximum.') }}</small>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
<!-- PLACEHOLDERS -->
|
|
<fieldset
|
|
class="border h-100 bg-white p-3 mb-3"
|
|
>
|
|
<legend>{{ __('Placeholders') }}</legend>
|
|
<div class="row w-100 mx-auto">
|
|
<div class="col-12 col-md-6">
|
|
<label
|
|
for="fieldPlaceholderFR"
|
|
class="col-form-label"
|
|
>
|
|
<b>{{ __('Placeholder du champs en FR') }}</b>
|
|
</label>
|
|
<WordCounter
|
|
id="fieldPlaceholderFR"
|
|
class="ck-word-count"
|
|
/>
|
|
<input
|
|
id="fieldPlaceholderFR"
|
|
class="form-control need-word-counter"
|
|
type="text"
|
|
name="placeholder[fr]"
|
|
placeholder="Placeholder en français"
|
|
:value="(intPlaceholder) ? intPlaceholder['fr' as unknown as number] : ''"
|
|
>
|
|
<p class="text-danger m-0">
|
|
{{ parseValidationInput(`placeholder.fr`, allErrors) }}
|
|
</p>
|
|
<small class="form-text text-muted">{{ __('Doit posséder 3 caractères minimum, 255 maximum.') }}</small>
|
|
</div>
|
|
<div class="col-12 col-md-6">
|
|
<label
|
|
for="fieldPlaceholderEN"
|
|
class="col-form-label"
|
|
>
|
|
<b>{{ __('Placeholder du champs en EN') }}</b>
|
|
</label>
|
|
<WordCounter
|
|
id="fieldPlaceholderEN"
|
|
class="ck-word-count"
|
|
/>
|
|
<input
|
|
id="fieldPlaceholderEN"
|
|
class="form-control need-word-counter"
|
|
type="text"
|
|
name="placeholder[en]"
|
|
placeholder="Placeholder en anglais"
|
|
:value="(intPlaceholder) ? intPlaceholder['en' as unknown as number] : ''"
|
|
>
|
|
<p class="text-danger m-0">
|
|
{{ parseValidationInput(`placeholder.en`, allErrors) }}
|
|
</p>
|
|
<small class="form-text text-muted">{{ __('Doit posséder 3 caractères minimum, 255 maximum.') }}</small>
|
|
</div>
|
|
<div class="col-12 col-md-6">
|
|
<label
|
|
for="fieldPlaceholderDE"
|
|
class="col-form-label"
|
|
>
|
|
<b>{{ __('Placeholder du champs en DE') }}</b>
|
|
</label>
|
|
<WordCounter
|
|
id="fieldPlaceholderDE"
|
|
class="ck-word-count"
|
|
/>
|
|
<input
|
|
id="fieldPlaceholderDE"
|
|
class="form-control need-word-counter"
|
|
type="text"
|
|
name="placeholder[de]"
|
|
placeholder="Placeholder en allemand"
|
|
:value="(intPlaceholder) ? intPlaceholder['de' as unknown as number] : ''"
|
|
>
|
|
<p class="text-danger m-0">
|
|
{{ parseValidationInput(`placeholder.de`, allErrors) }}
|
|
</p>
|
|
<small class="form-text text-muted">{{ __('Doit posséder 3 caractères minimum, 255 maximum.') }}</small>
|
|
</div>
|
|
<div class="col-12 col-md-6">
|
|
<label
|
|
for="fieldPlaceholderNL"
|
|
class="col-form-label"
|
|
>
|
|
<b>{{ __('Placeholder du champs en NL') }}</b>
|
|
</label>
|
|
<WordCounter
|
|
id="fieldPlaceholderNL"
|
|
class="ck-word-count"
|
|
/>
|
|
<input
|
|
id="fieldPlaceholderNL"
|
|
class="form-control need-word-counter"
|
|
type="text"
|
|
name="placeholder[nl]"
|
|
placeholder="Placeholder en néerlandais"
|
|
:value="(intPlaceholder) ? intPlaceholder['nl' as unknown as number] : ''"
|
|
>
|
|
<p class="text-danger m-0">
|
|
{{ parseValidationInput(`placeholder.nl`, allErrors) }}
|
|
</p>
|
|
<small class="form-text text-muted">{{ __('Doit posséder 3 caractères minimum, 255 maximum.') }}</small>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
<!-- DETAILS CONTENT -->
|
|
<fieldset
|
|
v-if="intSelectValue === intInputTypes[3].value ||
|
|
intSelectValue === intInputTypes[4].value ||
|
|
intSelectValue === intInputTypes[5].value ||
|
|
intSelectValue === intInputTypes[6].value"
|
|
class="border h-100 bg-white p-3 mb-3"
|
|
>
|
|
<legend>{{ __('Détails du contenu') }}</legend>
|
|
<div class="row w-100 mx-auto">
|
|
<div class="col-12">
|
|
<label
|
|
class="form-check-label"
|
|
for="fieldRequired"
|
|
role="button"
|
|
>
|
|
<b>{{ __('Liste des éléments') }}</b>
|
|
</label>
|
|
<ListItemComponent
|
|
:itemlist="(intModel?.details) ? intModel?.details : []"
|
|
:itemcolumns="[['fr', 'Valeur en FR'], ['en', 'Valeur en EN'], ['de', 'Valeur en DE'], ['nl', 'Valeur en NL']]"
|
|
:itemtype="['text','text', 'text', 'text']"
|
|
:itemlimit="[1,10]"
|
|
inputname="details"
|
|
:inputplaceholder="[
|
|
'Saisir un élement en français',
|
|
'Saisir un élement en anglais',
|
|
'Saisir un élement en allemand',
|
|
'Saisir un élement en néerlandais'
|
|
]"
|
|
:header="false"
|
|
:errors="allErrors"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
<!-- SWITCH BUTTONS -->
|
|
<FormulariesSwitchComponent
|
|
:model="intModel"
|
|
/>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from "vue";
|
|
import trans from "../../modules/trans";
|
|
import parseLaravelErrorMessages from "./../../modules/parseLaravelErrorMessages";
|
|
import FormulariesSwitchComponent from "./FormulariesSwitchComponent.vue";
|
|
import ListItemComponent from "./ListItemComponent.vue";
|
|
import WordCounter from "./WordCounterComponent.vue";
|
|
|
|
export default defineComponent({
|
|
name: "FormulariesSelectInputComponent",
|
|
mixins: [trans, parseLaravelErrorMessages],
|
|
components: {
|
|
FormulariesSwitchComponent,
|
|
ListItemComponent,
|
|
WordCounter,
|
|
},
|
|
data(): {
|
|
intId: string;
|
|
intInputTypes: {
|
|
value: number,
|
|
label: string,
|
|
}[];
|
|
intInputStatus: {
|
|
value: number,
|
|
label: string,
|
|
}[];
|
|
intSelectValue: Number | null;
|
|
intModel: LaravelModel | null;
|
|
intModelTypeValue: number | null;
|
|
intPlaceholder: [] | null;
|
|
allErrors: Record<string, string[]>;
|
|
} {
|
|
return {
|
|
intId: "",
|
|
intInputTypes: [],
|
|
intInputStatus: [],
|
|
intSelectValue: null,
|
|
intModel: null,
|
|
intModelTypeValue: 0,
|
|
intPlaceholder: [],
|
|
allErrors: {},
|
|
};
|
|
},
|
|
mounted() {
|
|
const json = String(this.$attrs.json ?? "{}");
|
|
const data = JSON.parse(json);
|
|
this.intId = data.id;
|
|
this.intInputTypes = data.inputType;
|
|
this.intInputStatus = data.inputStatus;
|
|
this.intModel = data.model;
|
|
this.intModelTypeValue = (this.intModel?.type) ? Number(this.intModel?.type) : null as number | null;
|
|
this.intSelectValue = this.intModelTypeValue;
|
|
this.intPlaceholder = (this.intModel != null) ? this.intModel.placeholder as [] : null;
|
|
this.allErrors = data.errors ?? {};
|
|
},
|
|
methods: {
|
|
updateSelectValue() {
|
|
const intSelect = document.getElementById("select-field") as HTMLSelectElement;
|
|
this.intSelectValue = Number(intSelect.value);
|
|
},
|
|
},
|
|
});
|
|
</script>
|