app_vue2/pages/organization/address/_id.vue

<template>
  <main>
    <v-skeleton-loader
      v-if="loading"
      type="text"
    />
    <LayoutContainer v-else>
      <v-card class="margin-bottom-20">
        <v-toolbar flat class="ot_light_grey toolbarForm" dark dense rounded>
          <v-toolbar-title class="ot_dark_grey--text form_main_title">
            <v-icon class="ot_white--text ot_green icon">
              fa-globe-europe
            </v-icon>
            {{ $t('address_postal') }}
          </v-toolbar-title>
        </v-toolbar>

        <UiForm :id="id" :model="model" :query="query()">
          <template v-slot:form.input="{entry, updateRepository}">
            <v-skeleton-loader
              v-if="loading"
              type="text"
            />
            <v-container v-else fluid class="container">
              <v-row>
                <v-col cols="12" sm="12">
                  <UiInputAutocomplete
                    field="owner"
                    label="addressOwner"
                    item-value="@id"
                    :item-text="['cp', 'city']"
                    @update="updateAddressFromOwner"
                  />
                </v-col>

                <v-col cols="12" sm="6">
                  <UiInputEnum field="type" label="addresstype" :data="entry['type']" enum-type="address_postal_organization" @update="updateRepository" />
                </v-col>

                <v-col cols="12" sm="6">
                  <UiInputText field="addressPostal.streetAddress" label="streetAddress" :data="entry['addressPostal.streetAddress']" @update="updateRepository" />
                </v-col>
                <v-col cols="12" sm="6">
                  <UiInputText field="addressPostal.streetAddressSecond" label="streetAddressSecond" :data="entry['addressPostal.streetAddressSecond']" @update="updateRepository" />
                </v-col>
                <v-col cols="12" sm="6">
                  <UiInputText field="addressPostal.streetAddressThird" label="streetAddressThird" :data="entry['addressPostal.streetAddressThird']" @update="updateRepository" />
                </v-col>
                <v-col cols="12" sm="6">
                  <UiInputText field="addressPostal.postalCode" label="postalCode" :data="entry['addressPostal.postalCode']" @update="updateRepository" />
                </v-col>
                <v-col cols="12" sm="6">
                  <UiInputText field="addressPostal.addressCity" label="addressCity" :data="entry['addressPostal.addressCity']" @update="updateRepository" />
                </v-col>
              </v-row>
            </v-container>

            <UiMap :zoom="12" :address="addressItem" @updateAddress="updateAddress" />
          </template>

          <template v-slot:form.button>
            <NuxtLink :to="{ path: '/organization', query: { accordion: 'address_postal' }}" class="no-decoration">
              <v-btn class="mr-4 ot_light_grey ot_grey--text">
                {{ $t('back') }}
              </v-btn>
            </NuxtLink>
          </template>
        </UiForm>
      </v-card>
    </LayoutContainer>
  </main>
</template>

<script lang="ts">
import { defineComponent, useContext, useFetch, ref, computed, Ref, ComputedRef } from '@nuxtjs/composition-api'
import { Repository as VuexRepository } from '@vuex-orm/core/dist/src/repository/Repository'
import { Model, Query } from '@vuex-orm/core'
import { OrganizationAddressPostal } from '~/models/Organization/OrganizationAddressPostal'
import { QUERY_TYPE } from '~/types/enums'
import { repositoryHelper } from '~/services/store/repository'
import { queryHelper } from '~/services/store/query'
import { AddressPostal } from '~/models/Core/AddressPostal'

export default defineComponent({
  name: 'organization_address',
  setup () {
    const { route, $dataProvider } = useContext()
    const loading:Ref<boolean> = ref(true)
    const id:number = parseInt(route.value.params.id)

    const repository: VuexRepository<Model> = repositoryHelper.getRepository(OrganizationAddressPostal)
    const query:Query = repository.with('addressPostal', (query) => {
      query.with('addressCountry')
    })

    useFetch(async () => {
      await $dataProvider.invoke({
        type: QUERY_TYPE.MODEL,
        model: OrganizationAddressPostal,
        id
      })
      loading.value = false
    })

    const addressItem:ComputedRef<AddressPostal|null> = computed(() => {
      const organizationAddressPostal = queryHelper.getFirstItem(query) as OrganizationAddressPostal
      return organizationAddressPostal.addressPostal
    })

    const updateAddress = (address: AddressPostal) => {
      const organizationAddressPostal = queryHelper.getFirstItem(query) as OrganizationAddressPostal
      organizationAddressPostal.addressPostal = address
      repositoryHelper.persist(OrganizationAddressPostal, organizationAddressPostal)
    }

    /** Computed proprieties needs to be return as function until nuxt3 : https://github.com/nuxt-community/composition-api/issues/207 **/
    return {
      model: OrganizationAddressPostal,
      query: () => query,
      id,
      loading,
      panel: 0,
      addressItem,
      updateAddress,
      updateAddressFromOwner: (data:any) => {
        console.log(data)
      }
    }
  }
})
</script>
<style>
  .toolbarForm .v-toolbar__content{
    padding-left: 0 !important;
  }
  .toolbarForm .v-toolbar__title .v-icon{
    height: 46px;
    width: 46px;
  }

</style>