app/components/Layout/Parameters/Website.vue

<template>
  <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('subdomains_history') }} : </div>
            <UiLoadingPanel v-if="subdomainsPending" />
            <v-table v-else 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>

          </div>

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


        <v-col cols="6">
          <!-- les publicationDirectors sont des entités Access -->
          <UiInputAutocomplete
              field="publicationDirectors"
              itemTitle="person.name"
          />

          <UiInputCheckbox
            v-model="parameters.desactivateOpentalentSiteWeb"
            field="desactivateOpentalentSiteWeb"
          />

          <UiInputText
              v-model="parameters.otherWebsite"
              field="otherWebsite"
          />
        </v-col>
      </v-row>
    </UiForm>
  </LayoutContainer>
</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";
import ApiResource from "~/models/ApiResource";

const router = useRouter()

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.items.length < 3)



const goToEditPage = (id: number) => {
  router.push(`parameters/subdomains/${id}`)
}

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


}

</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>