contact points: show and edit ok

.gitignore

@@ -89,3 +89,4 @@ sw.*
 # Vim swap files
 *.swp
 /.project
+/todo.md

lang/breadcrumbs/fr-FR.js

@@ -2,6 +2,7 @@ export default (context, locale) => {
   return ({
     item: 'Détails',
     organization_breadcrumbs: 'Fiche de la structure',
-    address_breadcrumbs: 'Adresse postale'
+    address_breadcrumbs: 'Adresse postale',
+    contact_points_breadcrumbs: 'Points de contact'
   })
 }

lang/field/fr-FR.js

@@ -38,6 +38,8 @@ export default (context, locale) => {
     emailInvalid: 'E-mail invalide',
     telphone: 'Téléphone',
     telphoneInvalid: 'Téléphone invalide',
+    faxNumber: 'Fax',
+    faxNumberInvalid: 'Fax invalide',
     mobilPhone: 'Portable',
     mobilPhoneInvalid: 'Portable invalide',
     actions: 'Actions',
@@ -66,6 +68,7 @@ export default (context, locale) => {
     postalCode: 'Code postal',
     addressCity: 'Ville',
     country: 'Pays',
-    addresstype: 'Nature'
+    addresstype: 'Nature',
+    contactpoint_type: 'Type de contact'
   })
 }

models/Organization/OrganizationContactPoint.ts

@@ -0,0 +1,16 @@
+import { Attr, Str, HasOne, Model } from '@vuex-orm/core'
+import { AddressPostal } from '~/models/Core/AddressPostal'
+import { ContactPoint } from '~/models/Core/ContactPoint'
+
+export class OrganizationAddressPostal extends Model {
+  static entity = 'organization_contact_points'
+
+  @Attr(null)
+  id!: number | null
+
+  @HasOne(() => ContactPoint, 'id')
+  contactPoint!: ContactPoint | null
+
+  @Str('PRINCIPAL', { nullable: false })
+  type!: string
+}

pages/organization/contact_points/_id.vue

@@ -0,0 +1,131 @@
+<!-- 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>

pages/organization/index.vue

@@ -130,7 +130,7 @@ Contient toutes les informations sur l'organization courante
                             cols="4"
                           >
                             <UiCard
-                              :link="`/organization/contact-points/${item.id}`"
+                              :link="`/organization/contact_points/${item.id}`"
                               :model="models.ContactPoint"
                               :id="item.id"
                             >