ldc-legaulois/resources/ts/bo/components/MainMenuNodeDataEditor.vue

<template>
  <fieldset class="main-menu-node-data-editor-component container-fluid p-4 border mb-3" >
    <legend>
      <span class="fs-5">{{ trans.methods.__("Modification de données d'un noeud") }}</span>
    </legend>

    <span class="d-block fs-5">{{ trans.methods.__('Partie gauche') }}</span>

    <!-- SUB LABEL -->
    <div class="mb-3 row">
      <label
        for="title-sub-label"
        class="col-sm-2 col-form-label"
      >
        {{ trans.methods.__("Label du sous-menu") }}
      </label>
      <div class="col-sm-4">
        <input
          id="title-sub-label"
          type="text"
          class="form-control"
          :value="menuNodeData.sub_label"
          @blur="($event) => saveNodeDataInput('sub_label', ($event.target as HTMLInputElement).value)"
        >
        <small v-if="errors.sub_label" v-for="(message) of errors.sub_label" class="text-danger">"{{ message }}"</small>
      </div>
    </div>

    <hr>

    <span class="d-block fs-5">{{ trans.methods.__('Partie droite') }}</span>

    <!-- TITLE -->
    <div class="mb-3 row">
      <label
        for="title-text"
        class="col-sm-2 col-form-label"
      >
        {{ trans.methods.__("Titre") }}
      </label>
      <div class="col-sm-4">
        <input
          id="title-text"
          type="text"
          class="form-control"
          :value="menuNodeData.title"
          @blur="($event) => saveNodeDataInput('title', ($event.target as HTMLInputElement).value)"
        >
        <small v-if="errors.title" v-for="(message) of errors.title" class="text-danger">"{{ message }}"</small>
      </div>
    </div>

    <!-- TEXT -->
    <div class="mb-3 row">
      <label
        for="text-text"
        class="col-sm-2 col-form-label"
      >
        {{ trans.methods.__("Text") }}
      </label>
      <div class="col-sm-4">
        <textarea
          id="text-text"
          class="form-control"
          @blur="($event) => $nextTick(() => saveNodeDataInput('text', ($event.target as HTMLTextAreaElement).value))"
          :value="menuNodeData.text"></textarea>
        <small v-if="errors.text" v-for="(message) of errors.text" class="text-danger">"{{ message }}"</small>
      </div>
    </div>

    <!-- LINK -->
    <div class="mb-3 row">
      <!-- LINK URL -->
      <label
        for="link-text"
        class="col-sm-2 col-form-label p-2"
      >
        {{ trans.methods.__("Link url") }}
      </label>
      <div class="col-sm-4 p-2">
        <input
          id="link-text"
          type="text"
          class="form-control"
          :value="menuNodeData.link_url"
          @blur="($event) => saveNodeDataInput('link_url', ($event.target as HTMLInputElement).value)"
        >
        <small v-if="errors.link_url" v-for="(message) of errors.link_url" class="text-danger">"{{ message }}"</small>
      </div>
      <!-- LINK TITLE -->
      <label
        for="link-title-text"
        class="col-sm-2 col-form-label p-2"
      >
        {{ trans.methods.__("Link title") }}
      </label>
      <div class="col-sm-4 p-2">
        <input
          id="link-title-text"
          type="text"
          class="form-control"
          :value="menuNodeData.link_title"
          @blur="($event) => saveNodeDataInput('link_title', ($event.target as HTMLInputElement).value)"
        >
        <small v-if="errors.link_title" v-for="(message) of errors.link_title" class="text-danger">"{{ message }}"</small>
      </div>
      <!-- LINK TARGET -->
      <label
        for="link-target-checkbox"
        class="col-sm-2 col-form-label p-2"
      >
        {{ trans.methods.__("Link target") }}
      </label>
      <div class="col-sm-4 p-2">
        <div class="form-check form-switch">
          <input
            name="link_target"
            class="form-check-input pt-3"
            type="checkbox"
            role="switch"
            id="link-target-checkbox"
            :checked="menuNodeData.link_target"
            @change="($event) => saveNodeDataInput('link_target', ($event.target as HTMLInputElement).checked)"
          >
          <small v-if="errors.link_target" v-for="(message) of errors.link_target" class="text-danger">"{{ message }}"</small>
        </div>
      </div>
      <!-- LINK STATUS -->
      <label
        class="col-sm-2 col-form-label p-2"
        for="link-status-checkbox"
      >
        {{ trans.methods.__("Link status") }}
      </label>
      <div class="col-sm-4 p-2">
        <div class="form-check form-switch">
          <input
            name="link_status"
            class="form-check-input pt-3"
            type="checkbox"
            role="switch"
            id="link-status-checkbox"
            :checked="menuNodeData.link_status"
            @change="($event) => saveNodeDataInput('link_status', ($event.target as HTMLInputElement).checked)"
          >
          <small v-if="errors.link_status" v-for="(message) of errors.link_status" class="text-danger">"{{ message }}"</small>
        </div>
      </div>
    </div>

    <!-- --- -->
    <hr class="col-8 mx-auto">

    <!-- PICTURE -->
    <div class="mb-3 row">
      <!-- PICTURE -->
      <label
        for="picture-input"
        class="col-sm-2 col-form-label p-2"
      >
        {{ trans.methods.__("Picture") }}
      </label>
      <ImageInputComponent
        id="picture-input"
        :required="true"
        :show-labels="true"
        name="picture"
        helper="picture"
        :width="180"
        :height="228"
        :value="menuNodeData.picture"
        :preview="false"
        :browse-event="false"
        @image-file="(file) => file ? saveNodeDataInput('picture', file) : null"
      />
      <small v-if="errors.picture" v-for="(message) of errors.picture" class="text-danger">"{{ message }}"</small>
      <!-- PICTURE ALT -->
      <label
        for="picture-alt-text"
        class="col-sm-2 col-form-label p-2"
      >
        {{ trans.methods.__("Picture alt") }}
      </label>
      <div class="col-sm-4 p-2">
        <input
          id="picture-alt-text"
          type="text"
          class="form-control"
          :value="menuNodeData.picture_alt"
          @blur="($event) => saveNodeDataInput('picture_alt', ($event.target as HTMLInputElement).value)"
        >
        <small v-if="errors.picture_alt" v-for="(message) of errors.picture_alt" class="text-danger">"{{ message }}"</small>
      </div>
      <!-- PICTURE TITLE -->
      <label
        for="picture-title-text"
        class="col-sm-2 col-form-label p-2"
      >
        {{ trans.methods.__("Picture title") }}
      </label>
      <div class="col-sm-4 p-2">
        <input
          id="picture-title-text"
          type="text"
          class="form-control"
          :value="menuNodeData.picture_title"
          @blur="($event) => saveNodeDataInput('picture_title', ($event.target as HTMLInputElement).value)"
        >
        <small v-if="errors.picture_title" v-for="(message) of errors.picture_title" class="text-danger">"{{ message }}"</small>
      </div>
      <!-- PICTURE STATUS -->
      <label
        class="col-sm-2 col-form-label p-2"
        for="picture-status-checkbox"
      >
        {{ trans.methods.__("Picture status") }}
      </label>
      <div class="col-sm-4 p-2">
        <div class="form-check form-switch">
          <input
            name="picture_status"
            class="form-check-input pt-3"
            type="checkbox"
            role="switch"
            id="picture-status-checkbox"
            :checked="menuNodeData.picture_status"
            @change="($event) => saveNodeDataInput('picture_status', ($event.target as HTMLInputElement).checked)"
          >
          <small v-if="errors.picture_status" v-for="(message) of errors.picture_status" class="text-danger">"{{ message }}"</small>
        </div>
      </div>
    </div>

    <!-- --- -->
    <hr class="col-8 mx-auto">

    <!-- BACKGROUND PICTURE-->
    <div class="mb-3 row">
      <label
        for="background-picture-input"
        class="col-sm-2 col-form-label p-2"
      >
        {{ trans.methods.__("Background Picture") }}
      </label>
      <!-- BACKGROUND PICTURE -->
      <ImageInputComponent
        id="background-picture-input"
        :required="true"
        :show-labels="true"
        name="background_picture"
        helper="background_picture"
        :width="500"
        :height="231"
        :value="menuNodeData.background_picture"
        :preview="false"
        :browse-event="false"
        @image-file="(file) => file ? saveNodeDataInput('background_picture', file) : null"
      />
      <small v-if="errors.background_picture" v-for="(message) of errors.background_picture" class="text-danger">"{{ message }}"</small>
      <!-- BACKGROUND PICTURE ALT -->
      <label
        for="background-picture-alt-text"
        class="col-sm-2 col-form-label p-2"
      >
        {{ trans.methods.__("Background Picture alt") }}
      </label>
      <div class="col-sm-4 p-2">
        <input
          id="background-picture-alt-text"
          type="text"
          class="form-control"
          :value="menuNodeData.background_picture_alt"
          @blur="($event) => saveNodeDataInput('background_picture_alt', ($event.target as HTMLInputElement).value)"
        >
        <small v-if="errors.background_picture_alt" v-for="(message) of errors.background_picture_alt" class="text-danger">"{{ message }}"</small>
      </div>
      <!-- BACKGROUND PICTURE TITLE -->
      <label
        for="background-picture-title-text"
        class="col-sm-2 col-form-label p-2"
      >
        {{ trans.methods.__("Background picture title") }}
      </label>
      <div class="col-sm-4 p-2">
        <input
          id="background-picture-title-text"
          type="text"
          class="form-control"
          :value="menuNodeData.background_picture_title"
          @blur="($event) => saveNodeDataInput('background_picture_title', ($event.target as HTMLInputElement).value)"
        >
        <small v-if="errors.background_picture_title" v-for="(message) of errors.background_picture_title" class="text-danger">"{{ message }}"</small>
      </div>
    </div>
  </fieldset>
</template>

<script lang="ts" setup>
import { defineOptions, onMounted, reactive, watch, type PropType } from "vue";
import type { IMenuNodeDataInputInterface } from "../../interfaces/IMenuNodeDataInputInterface";
import trans from "../../modules/trans";
import type { MenuNodeDataInterface } from "../../types/models/MenuNodeData";
import ImageInputComponent from "./ImageInputComponent.vue";

defineOptions({
  name: "MainMenuNodeDataEditor"
});

// * EMITS
const emits = defineEmits<{
  updatedNodeData: [prop: string, value: ValueOf<IMenuNodeDataInputInterface> ],
}>();

// * ATTRIBUTES
// const attrs = useAttrs();

// * PROPS
const props = defineProps({
  menuNodeData: {
    type: Object as PropType<MenuNodeDataInterface>,
    required: true
  },
  errors: {
    type: Object as PropType<LaravelValidationErrors>,
    required: true
  }
});

// * DATA
let menuNodeData = reactive<MenuNodeDataInterface>(Object.assign({}, props.menuNodeData));
// const urlIsValid = ref<boolean>(true);

// * LIFECYCLE
onMounted(() => {});
watch(props, () => {
  menuNodeData = Object.assign({}, props.menuNodeData);
})

// * METHODS
function saveNodeDataInput(inputName: string, inputValue: ValueOf<IMenuNodeDataInputInterface>): void {
  emits("updatedNodeData", inputName, inputValue);
}
</script>

<style lang="scss" scoped>
.main-menu-node-data-editor-component {
}
</style>