app/components/Form/Freemium/Event.vue

<template>
    <LayoutCommonSection>
      <v-row>
        <v-col cols="12" sm="12">
          <h4 class="mb-8">{{ $t('general_informations') }}</h4>

          <UiInputText
            v-model="entity.name"
            field="name"
            :rules="getAsserts('name')"
          />

          <span class="label">{{$t('datetimeStart')}}</span>
          <UiInputDateTimePicker
            :model-value="entity.datetimeStart"
            field="datetimeStart"
            label="datetimeStart"
            :with-time-picker="true"
            class="my-2"
            :rules="getAsserts('datetimeStart')"
            validate-on-blur
            @update:model-value="onUpdateDateTimeStart(entity, $event)"
          />

          <span class="label">{{$t('datetimeEnd')}}</span>
          <UiInputDateTimePicker
            :model-value="entity.datetimeEnd"
            field="datetimeEnd"
            label="datetimeEnd"
            :with-time-picker="true"
            class="my-2"
            :rules="getAsserts('datetimeEnd')"
            @update:model-value="onUpdateDateTimeEnd(entity, $event)"
          />

          <span class="label">{{$t('description')}}</span>
          <UiInputTextArea
            v-model="entity.description"
            class="mt-3"
          />

          <UiInputTreeSelectEventCategories
            v-model="entity.categories"
            label="event_categories_choices"
          />

          <UiInputImage
            v-model="entity.image"
            field="image"
            :width="240"
            :cropping-enabled="true"
          />
        </v-col>
      </v-row>
    </LayoutCommonSection>

  <LayoutCommonSection>
    <v-row>
      <v-col cols="12">
        <h4 class="mb-8">{{ $t('place_event') }}</h4>

        <UiInputAutocompleteApiResources
          v-if="!newPlace"
          :model-value="entity.place"
          field="place"
          :model="PlaceSearchItem"
          list-value="id"
          list-label="name"
          @update:model-value="getPlace(entity)"
        />

        <v-row  v-if="!newPlace" class="mb-6 justify-center">
          <v-col
            v-if="entity.place && !editPlace"
            cols="12"
            sm="6"
            class="d-flex justify-center mb-2"
          >
              <v-btn
                prepend-icon="fa-solid fa-pencil"
                @click="onEditPlaceClick(entity)"
              >
                {{ $t('edit_place') }}
              </v-btn>
          </v-col>

          <v-col
            cols="12"
            sm="6"
            class="d-flex justify-center mb-2"
          >
            <v-btn
              prepend-icon="fa-solid fa-plus"
              @click="onAddPlaceClick(entity)"
            >
              {{ $t('add_place') }}
            </v-btn>
          </v-col>
        </v-row>

        <UiInputText
          v-model="entity.placeName"
          :readonly="!newPlace && !editPlace"
          field="placeName"
        />

        <UiInputText
          v-model="entity.streetAddress"
          :readonly="!newPlace && !editPlace"
          field="streetAddress"
        />

        <UiInputText
          v-model="entity.streetAddressSecond"
          :readonly="!newPlace && !editPlace"
          field="streetAddressSecond"
        />

        <UiInputText
          v-model="entity.streetAddressThird"
          :readonly="!newPlace && !editPlace"
          field="streetAddressThird"
        />

        <UiInputText
          v-model="entity.postalCode"
          :readonly="!newPlace && !editPlace"
          field="postalCode"
        />

        <UiInputText
          v-model="entity.addressCity"
          :readonly="!newPlace && !editPlace"
          field="addressCity"
        />

        <UiInputAutocompleteApiResources
          v-model="entity.addressCountry"
          :readonly="!newPlace && !editPlace"
          field="addressCountry"
          :model="Country"
          list-value="id"
          list-label="name"
        />

        <client-only>
          <UiMapLeaflet
            v-model:latitude="entity.latitude"
            v-model:longitude="entity.longitude"
            :readonly="!newPlace && !editPlace"
            :street-address="entity.streetAddress"
            :street-address-second="entity.streetAddressSecond"
            :street-address-third="entity.streetAddressThird"
            :postal-code="entity.postalCode"
            :address-city="entity.addressCity"
            :address-country-id="entity.addressCountry"
            :search-button="true"
          ></UiMapLeaflet>
        </client-only>

      </v-col>
    </v-row>
  </LayoutCommonSection>

    <LayoutCommonSection>
      <v-row>
        <v-col cols="12">

          <h4 class="mb-8">{{ $t('communication_params') }}</h4>

          <UiInputText
            v-model="entity.url"
            field="url"
          />

          <UiInputAutocompleteEnum
            v-model="entity.pricing"
            enum-name="pricing_event"
            field="pricing"
          />

          <UiInputText
            v-if="entity.pricing==='PAID'"
            v-model="entity.urlTicket"
            field="urlTicket"
          />

          <UiInputNumber
            v-if="entity.pricing==='PAID'"
            v-model="entity.priceMini"
            field="priceMini"
          />

          <UiInputNumber
            v-if="entity.pricing==='PAID'"
            v-model="entity.priceMaxi"
            field="priceMaxi"
          />

        </v-col>
      </v-row>
    </LayoutCommonSection>

    <LazyLayoutDialog :show="showAlert" theme="warning">
      <template #dialogType>{{ $t('important') }}</template>
      <template #dialogTitle>{{ $t('place_change_everywhere') }}</template>
      <template #dialogText>
        <v-card-text class="text">
          <p>
            {{$t('warning_edit_place')}}
          </p>
        </v-card-text>
      </template>
      <template #dialogBtn>
        <v-btn class="mr-4 submitBtn theme-neutral-strong" @click="closeDialog">
          {{ $t('cancel') }}
        </v-btn>
        <v-btn class="mr-4 submitBtn theme-warning" @click="onEditPlaceConfirm">
          {{ $t('i_understand') }}
        </v-btn>
      </template>
    </LazyLayoutDialog>
</template>

<script setup lang="ts">
import Event from "~/models/Freemium/Event";
import Place from "~/models/Freemium/Place";
import {getAssertUtils} from "~/services/asserts/getAssertUtils";
import DateUtils from "~/services/utils/dateUtils";
import Country from "~/models/Core/Country";
import PlaceSearchItem from "~/models/Custom/Search/PlaceSearchItem";
import {useEntityManager} from "~/composables/data/useEntityManager";

const props = defineProps<{
  modelValue: Event
}>()

const {em} = useEntityManager()
const getAsserts = (key) => getAssertUtils(Event.getAsserts(), key)

const emit = defineEmits([
  'update:modelValue',
])

// Pour éviter l'erreur eslint "Unexpected mutation of "modelValue" prop"
const entity = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})


/**
 * Si la date de début est mise à jour, on s'assure que la date de fin est
 * après elle, sinon elle devient égale
 * @param entity
 * @param dateTime
 */
const onUpdateDateTimeStart = (entity, dateTime) =>{
  if(DateUtils.isBefore(props.entity.datetimeEnd, dateTime, false)){
    entity.datetimeEnd = dateTime
  }
  entity.datetimeStart = dateTime
  emit('update:modelValue', entity)
}

/**
 * Si la date de fin est mise à jour, on s'assure que la date de début est
 * avant elle, sinon elle devient égale
 * @param entity
 * @param dateTime
 */
const onUpdateDateTimeEnd = (entity, dateTime) =>{
  if(DateUtils.isBefore(dateTime, props.entity.datetimeStart, false)){
    entity.datetimeStart = dateTime
  }
  entity.datetimeEnd = dateTime
  emit('update:modelValue', entity)
}

const showAlert: Ref<boolean> = ref(false)
const newPlace: Ref<boolean> = ref(false)
const editPlace: Ref<boolean> = ref(false)

/**
 * Si on clic sur le bouton "Ajouter un lieu", le choix dans la liste déroulante
 * est mise à nulle, et les champs input de l'adresse sont vidées
 * @param entity
 */
const onAddPlaceClick = function(entity: Event){
  newPlace.value = true
  entity.place = null
  resetPlace(entity)
}

/**
 * Quand on clic sur le bouton "Editer le lieu", une alerte s'affiche
 */
const onEditPlaceClick = function(){
  showAlert.value = true
}

/**
 * Quand on ferme la boite de dialogue
 */
const closeDialog = function(){
  showAlert.value = false
}

/**
 * Si on décide d'éditer le lieu
 */
const onEditPlaceConfirm = function(){
  showAlert.value = false
  editPlace.value = true
}

/**
 * Lorsque l'on choisit un lieu dans la liste déroulante, on mets a jour les champs
 * input de l'adresse
 * @param entity
 */
const getPlace = async (entity: Event)=>{
  if(entity.place){
    const placeInstance = await em.fetch(Place, entity.place as number)
    entity.placeName = placeInstance.name
    entity.streetAddress = placeInstance.streetAddress
    entity.streetAddressSecond = placeInstance.streetAddressSecond
    entity.streetAddressThird = placeInstance.streetAddressThird
    entity.addressCity = placeInstance.addressCity
    entity.postalCode = placeInstance.postalCode
    entity.addressCountry = placeInstance.addressCountry
    entity.latitude = placeInstance.latitude
    entity.longitude = placeInstance.longitude
    editPlace.value = false
  }else{
    //Dans le cas où l'on ne récupère aucune place on remet a null le formulaire de l'adresse
    resetPlace(entity)
  }

  emit('update:modelValue', entity)
}

/**
 * fonction permettant de remettre à vide tous les champs input de l'adresse
 * @param entity
 */
const resetPlace = (entity: Event)=>{
  entity.placeName = null
  entity.streetAddress = null
  entity.streetAddressSecond = null
  entity.streetAddressThird = null
  entity.addressCity = null
  entity.postalCode = null
  entity.addressCountry = null
  entity.latitude = null
  entity.longitude = null
}

// Nettoyer les données lors du démontage du composant
onBeforeUnmount(() => {
  // Nettoyer les références du store si nécessaire
  if (import.meta.client) {
    clearNuxtData('/^' + Place.entity + '_/')
    useRepo(Place).flush()
  }
})
</script>

<style scoped lang="scss">
  .label{
    font-size: 16px;
    color: rgb(var(--v-theme-on-primary-alt));
  }
</style>