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
            v-model="entity.datetimeStart"
            field="datetimeStart"
            label="datetimeStart"
            :withTimePicker="true"
            class="my-2"
            :rules="getAsserts('datetimeStart')"
            validate-on-blur
            @update:model-value="onUpdateDateTimeStart(entity, $event)"
          />

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

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

          <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-model="entity.place"
          field="place"
          :model="PlaceSearchItem"
          listValue="id"
          listLabel="name"
          v-if="!newPlace"
          @update:model-value="getPlace(entity)"
        />

        <div class="d-flex justify-center"
             v-if="!newPlace"
        >
          <v-btn
            prepend-icon="fa-solid fa-plus"
            class="mb-6"
            @click="onAddPlaceClick(entity)"
          >
            {{ $t('add_place') }}
          </v-btn>

          <v-btn
            v-if="entity.place && !editPlace"
            prepend-icon="fa-solid fa-plus"
            class="mb-6 ml-6"
            @click="onEditPlaceClick(entity)"
          >
            {{ $t('edit_place') }}
          </v-btn>
        </div>

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

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

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

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

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

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

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

        <client-only>
          <UiMapLeaflet
            :readonly="!newPlace && !editPlace"
            v-model:latitude="entity.latitude"
            v-model:longitude="entity.longitude"
            :streetAddress="entity.streetAddress"
            :streetAddressSecond="entity.streetAddressSecond"
            :streetAddressThird="entity.streetAddressThird"
            :postalCode="entity.postalCode"
            :addressCity="entity.addressCity"
            :addressCountryId="entity.addressCountry"
            :searchButton="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>
            Si vous modifiez les informations de ce lieu et que ce lieu est lié à d'autre événements,
            alors les changements seront répercutés dans tous vos événements liés.
          </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<{
  entity: Event
}>()

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

/**
 * 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
  }
}

/**
 * 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
  }
}

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)
  }
}

/**
 * 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 (process.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>