app_vue2/components/Form/Organization/ContactPoint.vue

<template>
  <main>
    <LayoutContainer>
      <v-card class="mb-5">
        <FormToolbar title="contact_point" icon="fa-phone"/>

        <UiForm
          :id="id"
          :model="model"
          :query="query()"
          :submitActions="submitActions">
        >
          <template #form.input="{entry, updateRepository}">
            <v-container 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">
                  <UiInputEmail
                    field="email"
                    label="email"
                    :data="entry['email']"
                    @update="updateRepository"
                  />
                </v-col>
                <v-col cols="12" sm="6">
                  <UiInputPhone
                    field="telphone"
                    :label="$t('telphone')"
                    :data="entry['telphone']"
                    @update="updateRepository"
                  />
                </v-col>
                <v-col cols="12" sm="6">
                  <UiInputPhone
                    field="faxNumber"
                    :label="$t('faxNumber')"
                    :data="entry['faxNumber']"
                    @update="updateRepository"
                  />
                </v-col>
                <v-col cols="12" sm="6">
                  <UiInputPhone
                    field="mobilPhone"
                    :label="$t('mobilPhone')"
                    :data="entry['mobilPhone']"
                    @update="updateRepository"
                  />
                </v-col>
              </v-row>
            </v-container>
          </template>

          <template #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 {computed, defineComponent} from "@nuxtjs/composition-api";
import {repositoryHelper} from "~/services/store/repository";
import {ContactPoint} from "~/models/Core/ContactPoint";
import {Repository as VuexRepository} from "@vuex-orm/core/dist/src/repository/Repository";
import {Model, Query} from "@vuex-orm/core";
import {AnyJson} from "~/types/interfaces";
import {SUBMIT_TYPE} from "~/types/enums";

export default defineComponent({
  props: {
    id:{
      type: [Number, String],
      required: true
    }
  },
  setup () {
    const repository: VuexRepository<Model> = repositoryHelper.getRepository(ContactPoint)
    const query: Query = repository.query()

    const submitActions = computed(() => {
      let actions:AnyJson = {}
      actions[SUBMIT_TYPE.SAVE_AND_BACK] = { path: `/organization`, query: { accordion: 'contact_point' } }
      actions[SUBMIT_TYPE.SAVE] = { path: `/organization/contact_points/` }
      return actions
    })

    return {
      model: ContactPoint,
      query: () => query,
      submitActions
    }
  },
  beforeDestroy() {
    repositoryHelper.cleanRepository(ContactPoint)
  },
})
</script>

<style scoped>

</style>