app_vue2/components/Form/Parameters/SubdomainNew.vue

<!-- Component d'un formulaire pour la saisie d'un nouveau subdomain -->
<template>
  <main>
    <LayoutContainer>
      <v-card class="mb-5 mt-4">
        <FormToolbar title="subdomain" icon="fa-at"/>

        <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="6">
                  <div>{{ $t('pleaseEnterYourNewSubdomain')}} :</div>
                </v-col>
              </v-row>
              <v-row>
                <v-col cols="12" sm="6">
                  <UiInputText
                    field="subdomain"
                    label="subdomain"
                    :data="entry['subdomain']"
                    type="string"
                    :rules="rules().subdomainRules"
                    :error="subdomainError"
                    :error-message="subdomainErrorMessage"
                    @update="checkSubdomainHook($event, updateRepository)"
                  />
                </v-col>

              </v-row>
            </v-container>

          </template>

          <template #form.button>
            <NuxtLink :to="{ path: '/parameters/communication'}" 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, computed, useContext, useFetch} from '@nuxtjs/composition-api'
import { Repository as VuexRepository } from '@vuex-orm/core/dist/src/repository/Repository'
import { Query, Model } from '@vuex-orm/core'
import {QUERY_TYPE, SUBMIT_TYPE} from '~/types/enums'
import { repositoryHelper } from '~/services/store/repository'
import {AnyJson, ApiResponse, MobytUserStatus} from "~/types/interfaces";
import {Subdomain} from "~/models/Organization/Subdomain";
import {useValidator} from "~/composables/form/useValidator";

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

    const { subdomainError, subdomainErrorMessage, checkSubdomainUnity } = useValidator($dataProvider, i18n).useHandleSubdomain()

    const submitActions = computed(() => {
      let actions:AnyJson = {}
      actions[SUBMIT_TYPE.SAVE_AND_BACK] = { path: `/parameters/communication` }
      return actions
    })

    // TODO: unity error message don't show up
    // TODO: submit is not blocked even when subdomain is invalid
    const checkSubdomainHook = async (subdomain: string, updateRepository: any) => {
      const valid = (subdomain?.match(/^[\w\-]{2,60}$/) !== null)
      console.log('valid: ' + valid)
      if (!valid) {
        return
      }
      await checkSubdomainUnity(subdomain)
      console.log('unity error: ' + subdomainError.value + ' - ' + subdomainErrorMessage.value)
      if (!subdomainError.value) {
        updateRepository(subdomain, 'subdomain')
      }
    }

    /** todo Computed properties needs to be returned as functions until nuxt3 : https://github.com/nuxt-community/composition-api/issues/207 **/
    return {
      model: Subdomain,
      query: () => query,
      rules: () => getRules(i18n),
      panel: 0,
      submitActions,
      subdomainError,
      subdomainErrorMessage,
      checkSubdomainHook
    }
  },
  beforeDestroy() {
    repositoryHelper.cleanRepository(Subdomain)
  }
})

function getRules (i18n: any) {
  return {
    subdomainRules: [
      (subdomain: string) => (subdomain?.length <= 60 && subdomain?.length >= 2) || i18n.t('subdomain_need_to_have_0_to_60_cars'),
      (subdomain: string) => subdomain?.match(/^[\w\-]+$/) !== null || i18n.t('subdomain_can_not_contain_spaces_or_special_cars'),
    ]
  }
}
</script>