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="my-5"
            @click="onAddPlaceClick(entity)"
          >
            {{ $t('add_place') }}
          </v-btn>

          <v-btn
            prepend-icon="fa-solid fa-plus"
            class="my-5"
            @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
            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>
</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)

const onUpdateDateTimeStart = (entity, dateTime) =>{
  if(DateUtils.isBefore(props.entity.datetimeEnd, dateTime, false)){
    entity.datetimeEnd = dateTime
  }
}
const onUpdateDateTimeEnd = (entity, dateTime) =>{
  if(DateUtils.isBefore(dateTime, props.entity.datetimeStart, false)){
    entity.datetimeStart = dateTime
  }
}

const newPlace: Ref<boolean> = ref(false)
const editPlace: Ref<boolean> = ref(false)
const onAddPlaceClick = function(entity: Event){
  newPlace.value = true
  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
  entity.place = null
}

const onEditPlaceClick = function(){
  editPlace.value = true
}

const getPlace = async (entity: Event)=>{
  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
}
</script>

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