app/pages/parameters/website.vue

<template>
  <NuxtLayout name="parameters">
    <LayoutContainer>
      <UiLoadingPanel v-if="pending" />
      <UiForm
          v-else
          :model="Parameters"
          :entity="parameters"
      >
        <v-row>
          <v-col cols="6">
            <div class="mb-6">
              <div>{{ $t('your_opentalent_website_address_is')}} : </div>
              <div class="ma-2 text-primary">
                <strong>{{ organizationProfile.website }}</strong>
              </div>
            </div>

            <div class="mb-6">
              <div>{{ $t('your_subdomains') }} : </div>
              <UiLoadingPanel v-if="subdomainsPending" />
              <div v-else>
                <v-table class="my-2">
                  <tbody>
                    <tr
                        v-for="subdomain in subdomains.items"
                        :key="subdomain.id"
                        :title="subdomain.subdomain"
                        class="subdomainItem"
                        @click="goToEditPage(subdomain.id)"
                    >
                      <td>{{ subdomain.subdomain }}</td>
                      <td>
                          <span v-if="subdomain.active">
                            <v-icon class="text-success icon">
                              fa-solid fa-check
                            </v-icon> {{ $t('active') }}
                          </span>
                      </td>

                    </tr>

                  </tbody>

                </v-table>

                <v-btn
                    :disabled="!canAddNewSubdomain"
                    class="my-2"
                    @click="onAddSubdomainClick"
                >
                  {{ $t('record_a_new_subdomain')}}
                </v-btn>
              </div>
            </div>
          </v-col>

          <v-col cols="6">
              <!-- les publicationDirectors sont des entités Access -->
              <UiInputAutocompleteAccesses
                  v-model="parameters.publicationDirectors"
                  field="publicationDirectors"
                  multiple
                  chips
              />

            <div class="my-8" v-if="!organizationProfile.isCmf">
              <v-btn
                v-if="!parameters.desactivateOpentalentSiteWeb"
                color="error"
                @click="showWebsiteDeactivationDialog=true"
              >
                {{ $t('deactivateOpentalentSiteWeb') }}
              </v-btn>
              <v-btn
                v-else
                color="primary"
                @click="reactivateWebsite"
              >
                {{ $t('reactivateOpentalentSiteWeb') }}
              </v-btn>

              <LazyLayoutDialog :show="showWebsiteDeactivationDialog">
                <template #dialogTitle>
                  {{ $t('please_confirm')}}
                </template>
                <template #dialogText>
                  <v-col>
                    <div>{{ $t('yourOpentalentWebsiteWillBeDeactivatedOnceYouLlHaveSaved')}}.</div>
                    <span>{{ $t('doYouWantToContinue')}} ?</span>
                  </v-col>
                </template>
                <template #dialogBtn>
                  <v-btn
                      class="theme-neutral-soft mr-4"
                      @click="showWebsiteDeactivationDialog=false"
                  >
                    {{ $t('cancel') }}
                  </v-btn>
                  <v-btn
                      class="theme-primary"
                      @click="showWebsiteDeactivationDialog=false; deactivateWebsite()"
                  >
                    {{ $t('yes') }}
                  </v-btn>
                </template>
              </LazyLayoutDialog>
            </div>

            <div>
              <UiInputText
                  v-model="parameters.otherWebsite"
                  field="otherWebsite"
              />
            </div>
          </v-col>
        </v-row>
      </UiForm>
    </LayoutContainer>
  </NuxtLayout>
</template>

<script setup lang="ts">
import {useOrganizationProfileStore} from "~/stores/organizationProfile";
import Parameters from "~/models/Organization/Parameters";
import {useEntityFetch} from "~/composables/data/useEntityFetch";
import {AsyncData} from "#app";
import Subdomain from "~/models/Organization/Subdomain";

/**
 * Disable the default layout, the page will use the layout defined with <NuxtLayout />
 * @see https://nuxt.com/docs/guide/directory-structure/layouts#overriding-a-layout-on-a-per-page-basis
 */
definePageMeta({
  layout: false,
});

const i18n = useI18n()

const { fetch, fetchCollection } = useEntityFetch()

const organizationProfile = useOrganizationProfileStore()

if (organizationProfile.parametersId === null) {
  throw new Error('Missing organization parameters id')
}

const { data: parameters, pending } = fetch(Parameters, organizationProfile.parametersId) as AsyncData<Parameters, Parameters | true>

const { data: subdomains, pending: subdomainsPending } = fetchCollection(Subdomain, null, ref({ 'organization' : organizationProfile.id }) )

const canAddNewSubdomain: ComputedRef<boolean> = computed(() => subdomains.value && subdomains.value.items.length < 3)

const goToEditPage = (id: number) => {
  console.log(parameters.value)
  navigateTo(`parameters/subdomains/${id}`)
}

const onAddSubdomainClick = () => {
  if (!canAddNewSubdomain) {
    throw new Error('Max number of subdomains reached')
  }
  navigateTo('/parameters/subdomains/new')
}

const showWebsiteDeactivationDialog: Ref<boolean> = ref(false)


const deactivateWebsite = () => {
  parameters.value.desactivateOpentalentSiteWeb = true
}

const reactivateWebsite = () => {
  parameters.value.desactivateOpentalentSiteWeb = false
}
</script>

<style scoped lang="scss">
.v-table {
  background: transparent;
}
.subdomainItem {
  cursor: pointer;
}
.subdomainItem:hover {
  background: rgb(var(--v-theme-neutral));
}
.subdomainItem .icon {
  font-size: 12px;
}

</style>