app_vue2/pages/organization/address/_id.vue

<template>
  <main>
    <v-skeleton-loader
      type="text"
      v-if="loading"
    ></v-skeleton-loader>
    <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 :model="model" :id="id" :query="query()">
          <template v-slot:form.input="{entry, updateRepository}">

            <v-skeleton-loader
              type="text"
              v-if="loading"
            ></v-skeleton-loader>
            <v-container v-else fluid class="container">
              <v-row>
                <v-col cols="12" sm="12">
                  <UiInputAutocomplete
                    field="owner"
                    label="addressOwner"
                    itemValue="@id"
                    :itemText="['cp', 'city']"
                    v-on:update="updateAddressFromOwner"/>
                </v-col>

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

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

            <UiMap :zoom=12 :address="addressItem" v-on:updateAddress="updateAddress"></UiMap>

          </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 {OrganizationAddressPostal} from "~/models/Organization/OrganizationAddressPostal";
  import {QUERY_TYPE} from "~/types/enums";
  import {repositoryHelper} from "~/services/store/repository";
  import {queryHelper} from "~/services/store/query";
  import {AnyJson} from "~/types/interfaces";
  import {AddressPostal} from "~/models/Core/AddressPostal";
  import {Repository as VuexRepository} from "@vuex-orm/core/dist/src/repository/Repository";
  import {Model, Query} from "@vuex-orm/core";

  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: 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: 0px !important;
  }
  .toolbarForm .v-toolbar__title .v-icon{
    height: 46px;
    width: 46px;
  }

</style>