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="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>

          </template>

          <template v-slot:form.button>
            <NuxtLink :to="{ path: '/organization', query: { accordion: 'address_postal' }}" class="no-decoration">
              <v-btn class="mr-4 ot_danger ot_white--text">
                Retour
              </v-btn>
            </NuxtLink>
          </template>
        </UiForm>
      </v-card>
    </LayoutContainer>
  </main>
</template>


<script lang="ts">
  import {defineComponent, useContext, useFetch, ref, computed} from '@nuxtjs/composition-api'
  import {OrganizationAddressPostal} from "~/models/Organization/OrganizationAddressPostal";
  import {QUERY_TYPE} from "~/types/enums";
  import {useRepositoryHelper} from "~/use/store/useRepository";

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

      const repository = useRepositoryHelper.getRepository(OrganizationAddressPostal)
      const query = computed(() => repository.with('addressPostal', (query) => {
        query.with('addressCountry')
      }))

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

      return {
        model: OrganizationAddressPostal,
        query: () => query,
        id,
        loading,
        panel: 0
      }
    },
  })
</script>
<style>
  .toolbarForm .v-toolbar__content{
    padding-left: 0px !important;
  }
  .toolbarForm .v-toolbar__title .v-icon{
    height: 46px;
    width: 46px;
  }

</style>