ldc-com-app-bo/resources/ts/bo/components/FormulariesSelectInputComponent.vue

<template>
  <div>
    <!-- SELECT INPUT TYPE -->
    <fieldset
      v-if="!intModel?.id"
      class="border h-100 bg-white p-3 mb-3"
    >
      <legend>{{ trans.methods.__('Type du champs') }}</legend>
      <select
        id="select-field"
        class="form-select"
        name="type"
        :aria-label="trans.methods.__('Default select example')"
        @change="updateSelectValue()"
        role="button"
        required
      >
        <option
          :selected="(intModel != null) ? false : true"
          disabled
        >
          {{ trans.methods.__('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="input.value"
          >
            {{ 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>{{ trans.methods.__('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>{{ trans.methods.__('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">
              {{ parseLaravelErrorMessages.methods.parseValidationInput(`name`, allErrors) }}
            </p>
            <small class="form-text text-muted">{{ trans.methods.__('Doit posséder 3 caractères minimum, 70 maximum.') }}</small>
          </div>
        </div>
      </fieldset>
      <!-- PLACEHOLDERS -->
      <fieldset
        class="border h-100 bg-white p-3 mb-3"
      >
        <legend>{{ trans.methods.__('Placeholders') }}</legend>
        <div class="row w-100 mx-auto">
          <div class="col-12 col-md-6">
            <label
              for="fieldPlaceholderFR"
              class="col-form-label"
            >
              <b>{{ trans.methods.__('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">
              {{ parseLaravelErrorMessages.methods.parseValidationInput(`placeholder.fr`, allErrors) }}
            </p>
            <small class="form-text text-muted">{{ trans.methods.__('Doit posséder 3 caractères minimum, 100 maximum.') }}</small>
          </div>
          <div class="col-12 col-md-6">
            <label
              for="fieldPlaceholderEN"
              class="col-form-label"
            >
              <b>{{ trans.methods.__('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">
              {{ parseLaravelErrorMessages.methods.parseValidationInput(`placeholder.en`, allErrors) }}
            </p>
            <small class="form-text text-muted">{{ trans.methods.__('Doit posséder 3 caractères minimum, 100 maximum.') }}</small>
          </div>
          <div class="col-12 col-md-6">
            <label
              for="fieldPlaceholderDE"
              class="col-form-label"
            >
              <b>{{ trans.methods.__('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">
              {{ parseLaravelErrorMessages.methods.parseValidationInput(`placeholder.de`, allErrors) }}
            </p>
            <small class="form-text text-muted">{{ trans.methods.__('Doit posséder 3 caractères minimum, 100 maximum.') }}</small>
          </div>
          <div class="col-12 col-md-6">
            <label
              for="fieldPlaceholderNL"
              class="col-form-label"
            >
              <b>{{ trans.methods.__('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">
              {{ parseLaravelErrorMessages.methods.parseValidationInput(`placeholder.nl`, allErrors) }}
            </p>
            <small class="form-text text-muted">{{ trans.methods.__('Doit posséder 3 caractères minimum, 100 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>{{ trans.methods.__('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>{{ trans.methods.__('Liste des éléments') }}</b>
            </label>
            <ListItemComponent
              :item-list="((intModel?.details) ? intModel?.details : []) as Array<Record<number, string>>"
              :item-columns="[['fr', 'Valeur en FR'], ['en', 'Valeur en EN'], ['de', 'Valeur en DE'], ['nl', 'Valeur en NL']]"
              :item-type="['text','text', 'text', 'text']"
              :item-limit="[1,10]"
              input-name="details"
              :input-placeholder="[
                'Saisir un élement en français',
                'Saisir un élement en anglais',
                'Saisir un élement en allemand',
                'Saisir un élement en néerlandais'
              ]"
              :errors="allErrors"
            />
          </div>
        </div>
      </fieldset>
      <!-- SWITCH BUTTONS -->
      <FormulariesSwitchComponent
        :model="intModel"
      />
    </template>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, useAttrs } 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";

defineOptions({
  name: "FormulariesSelectInputComponent"
});

// * ATTRIBUTES
const attrs = useAttrs();

// * DATA
const intId = ref<string>("");
const intInputTypes = ref<{
  value: number,
  label: string,
}[]>([]);
const intInputStatus = ref<{
  value: number,
  label: string,
}[]>([]);
const intSelectValue = ref<Number|null>(null);
const intModel = ref<LaravelModel|null>(null);
const intModelTypeValue = ref<number|null>(null);
const intPlaceholder = ref<[]|null>([]);
const allErrors = ref<Record<string, string[]>>({});

onMounted(() => {
  const json = String((attrs as any).json ?? "{}");
  const data = JSON.parse(json);

  intId.value = data.id;
  intInputTypes.value = Object.values(data.inputType);
  intInputStatus.value = Object.values(data.inputStatus);
  intModel.value = data.model;
  intModelTypeValue.value = (intModel.value?.type) ? Number(intModel.value?.type) : null as number | null;
  intSelectValue.value = intModelTypeValue.value;
  intPlaceholder.value = (intModel.value != null) ? intModel.value.placeholder as [] : null;
  allErrors.value = data.errors ?? {};
});

function updateSelectValue() {
  const intSelect = document.getElementById("select-field") as HTMLSelectElement;
  intSelectValue.value = Number(intSelect.value);
}
</script>