app_vue2/pages/parameters/subdomain/_id.vue

<!-- Page de détails d'un sous-domaine -->
<template>
  <main>
    <LayoutContainer>
      <v-card class="mb-5 mt-4">
        <FormToolbar title="subdomain" icon="fa-at"/>

        <v-container fluid class="container pa-6">
          <v-row>
            <v-col cols="12" sm="12">
              <v-skeleton-loader
                v-if="fetchState.pending"
                type="text"
              />
              <div v-else>
                <div>
                  {{ $t('youRegisteredTheFollowingSubdomain')}} :
                </div>

                <div class="pa-8">
                  <b>{{ entry.subdomain }}</b> <span class="grey--text">.opentalent.fr</span>
                </div>

                <div>
                  <div v-if="entry.active">
                    <v-icon class="ot_green--text icon small mr-2">
                      fa-solid fa-check
                    </v-icon>
                    {{ $t('subdomainIsCurrentlyActive') }}
                  </div>
                  <div v-else>
                    {{ $t('doYouWantToActivateThisSubdomain') }} ?
                  </div>
                </div>

                <div class="mt-6 d-flex flex-row">
                  <v-btn to="/parameters/communication" class="mr-12">{{ $t('back') }}</v-btn>
                  <div v-if="!entry.active">
                    <v-btn color="primary" @click="activateAndQuit(entry)">{{ $t('activate') }}</v-btn>
                  </div>
                </div>

              </div>
            </v-col>
          </v-row>
        </v-container>
      </v-card>
    </LayoutContainer>
  </main>
</template>

<script lang="ts">
import {computed, ComputedRef, defineComponent, useContext, useRouter} from '@nuxtjs/composition-api'
import {useDataUtils} from "~/composables/data/useDataUtils";
import {Subdomain} from "~/models/Organization/Subdomain";
import {Repository as VuexRepository} from "@vuex-orm/core/dist/src/repository/Repository";
import {Model, Query} from "@vuex-orm/core";
import {repositoryHelper} from "~/services/store/repository";
import {AnyJson} from "~/types/interfaces";
import {queryHelper} from "~/services/store/query";
import {QUERY_TYPE} from "~/types/enums";

export default defineComponent({
  name: 'EditFormParametersSubdomain',
  setup () {
    const {$dataProvider, $dataPersister, route} = useContext()
    const {getItemToEdit} = useDataUtils($dataProvider)
    const id = parseInt(route.value.params.id)
    const {fetchState} = getItemToEdit(id, Subdomain)
    const router = useRouter();

    const repository: VuexRepository<Model> = repositoryHelper.getRepository(Subdomain)
    const query: ComputedRef<Query> = computed(() => repository.query())
    const entry: ComputedRef<AnyJson> = computed(() => {
      return queryHelper.getFlattenEntry(query.value, id)
    })

    const submit = async () => {
      await $dataPersister.invoke({
        type: QUERY_TYPE.MODEL,
        model: Subdomain,
        id: id,
        idTemp: null,
        query: query.value
      })
    }

    const activateAndQuit = async function() {
      repositoryHelper.updateStoreFromField(Subdomain, entry.value, true, 'active')
      await submit()
      router.push('/parameters/communication')
    }

    return {
      id,
      fetchState,
      entry,
      activateAndQuit
    }
  },
  beforeDestroy() {
    repositoryHelper.cleanRepository(Subdomain)
  }
})
</script>