app_vue2/pages/organization/contact_points/_id.vue

<!-- Page de détails d'un point de contact -->

<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('contact_point') }}
          </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">
                  <UiInputEnum
                    field="contactType"
                    label="contactpoint_type"
                    :data="entry['contactType']"
                    enum-type="contact_point_type"
                    @update="updateRepository"
                  />
                </v-col>
                <v-col cols="12" sm="6">
                  <UiInputText
                    field="email"
                    label="email"
                    :data="entry['email']"
                    @update="updateRepository"
                  />
                </v-col>
                <v-col cols="12" sm="6">
                  <UiInputText
                    field="telphone"
                    label="telphone"
                    :data="entry['telphone']"
                    @update="updateRepository"
                  />
                </v-col>
                <v-col cols="12" sm="6">
                  <UiInputText
                    field="faxNumber"
                    label="faxNumber"
                    :data="entry['faxNumber']"
                    @update="updateRepository"
                  />
                </v-col>
                <v-col cols="12" sm="6">
                  <UiInputText
                    field="mobilPhone"
                    label="mobilPhone"
                    :data="entry['mobilPhone']"
                    @update="updateRepository"
                  />
                </v-col>
              </v-row>
            </v-container>
          </template>

          <template v-slot:form.button>
            <NuxtLink :to="{ path: '/organization', query: { accordion: 'contact_point' }}" 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, Ref } from '@nuxtjs/composition-api'
import { Repository as VuexRepository } from '@vuex-orm/core/dist/src/repository/Repository'
import { Model, Query } from '@vuex-orm/core'
import { QUERY_TYPE } from '~/types/enums'
import { repositoryHelper } from '~/services/store/repository'
import { ContactPoint } from '~/models/Core/ContactPoint'

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

    const repository: VuexRepository<Model> = repositoryHelper.getRepository(ContactPoint)
    const query: Query = repository.query()

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

    return {
      model: ContactPoint,
      query: () => query,
      id,
      loading
    }
  }

})
</script>
<style>
  .toolbarForm .v-toolbar__content{
    padding-left: 0 !important;
  }
  .toolbarForm .v-toolbar__title .v-icon{
    height: 46px;
    width: 46px;
  }
</style>