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"
                label="organization_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"
                list-value="id"
                list-label="name"
              />

              <client-only>
                <UiMapLeaflet
                  v-model:latitude="organization.latitude"
                  v-model:longitude="organization.longitude"
                  :street-address="organization.streetAddress"
                  :street-address-second="organization.streetAddressSecond"
                  :street-address-third="organization.streetAddressThird"
                  :postal-code="organization.postalCode"
                  :address-city="organization.addressCity"
                  :address-country-id="organization.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="organization.facebook" field="facebook" :rules="getAsserts('facebook')" />

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

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

              <UiInputText v-model="organization.instagram" field="instagram" :rules="getAsserts('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>