app/pages/freemium/organization.vue

<template>
      <UiForm v-if="organization" v-model="organization">

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

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

              <UiInputTextArea v-model="organization.description" field="description"  />

              <UiInputImage
                v-model="organization.logo"
                field="logo"
                :width="120"
                :cropping-enabled="true"
              />
            </v-col>

          </v-row>
        </LayoutCommonSection>

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

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

              <UiInputPhone v-model="organization.tel" field="tel"/>

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

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

              <UiInputText v-model="organization.streetAddress" field="streetAddress" />

              <UiInputText v-model="organization.streetAddressSecond" field="streetAddressSecond" />

              <UiInputText v-model="organization.streetAddressThird" field="streetAddressThird" />

              <UiInputText v-model="organization.postalCode" field="postalCode" />

              <UiInputText v-model="organization.addressCity" field="addressCity" />

              <UiInputAutocompleteApiResources
                v-model="organization.addressCountry"
                field="addressCountry"
                :model="Country"
                listValue="id"
                listLabel="name"
                />

              <client-only>
                <UiMapLeaflet
                  v-model:latitude="organization.latitude"
                  v-model:longitude="organization.longitude"
                  :streetAddress="organization.streetAddress"
                  :streetAddressSecond="organization.streetAddressSecond"
                  :streetAddressThird="organization.streetAddressThird"
                  :postalCode="organization.postalCode"
                  :addressCity="organization.addressCity"
                  :addressCountryId="organization.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="organization.facebook" field="facebook" />

              <UiInputText v-model="organization.twitter" field="twitter" />

              <UiInputText v-model="organization.youtube" field="youtube" />

              <UiInputText v-model="organization.instagram" field="instagram" />

              <UiInputCheckbox
                v-model="organization.portailVisibility"
                field="portailVisibility"
              />
            </v-col>
          </v-row>
        </LayoutCommonSection>

      </UiForm>

</template>

<script setup lang="ts">

import {useEntityFetch} from "~/composables/data/useEntityFetch";
import type {AsyncData} from "#app";
import Organization from "~/models/Freemium/Organization";
import {getAssertUtils} from "~/services/asserts/getAssertUtils";
import Country from "~/models/Core/Country";
import {useAp2iRequestService} from "~/composables/data/useAp2iRequestService";

definePageMeta({
  name: 'freemium_organization_page',
})

const {apiRequestService, pending} = useAp2iRequestService()


const { fetch } = useEntityFetch()

const { data: organization } = fetch(
  Organization
) as AsyncData<Organization | null, Error | null>

const getAsserts = (key) => getAssertUtils(Organization.getAsserts(), key)

</script>