348 lines
11 KiB
Vue
348 lines
11 KiB
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>
|