app/pages/freemium/organization.vue

<template>
      <UiFormEdition :model="Organization"
                     class="inner-container"
      >
        <template #default="{ entity : organization }">
          <div v-if="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>
          </div>
        </template>
      </UiFormEdition>

</template>

<script setup lang="ts">

import Organization from "~/models/Freemium/Organization";
import {getAssertUtils} from "~/services/asserts/getAssertUtils";
import Country from "~/models/Core/Country";

definePageMeta({
  name: 'freemium_organization_page',
})

onUnmounted(() => {
  useRepo(Organization).flush()
  useRepo(Country).flush()
})

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

</script>

<style scoped lang="scss">

.inner-container {
  max-width: 1200px;
}

</style>