subdomains: add interface full design

components/Form/Parameters/SubdomainNew.vue

@@ -0,0 +1,100 @@
+<!-- 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']"
+                    @update="updateRepository"
+                    type="string"
+                    :rules="rules().subdomainRules"
+                  />
+                </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} from '@nuxtjs/composition-api'
+import { Repository as VuexRepository } from '@vuex-orm/core/dist/src/repository/Repository'
+import { Query, Model } from '@vuex-orm/core'
+import { SUBMIT_TYPE} from '~/types/enums'
+import { repositoryHelper } from '~/services/store/repository'
+import {AnyJson} from "~/types/interfaces";
+import {Subdomain} from "~/models/Organization/Subdomain";
+
+export default defineComponent({
+  props: {
+    id:{
+      type: [Number, String],
+      required: true
+    }
+  },
+  setup () {
+    const {app:{i18n}} = useContext()
+    const repository: VuexRepository<Model> = repositoryHelper.getRepository(Subdomain)
+    const query: Query = repository.query()
+
+    const submitActions = computed(() => {
+      let actions:AnyJson = {}
+      actions[SUBMIT_TYPE.SAVE_AND_BACK] = { path: `/parameters/communication` }
+      return actions
+    })
+
+    /** 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
+    }
+  },
+  beforeDestroy() {
+    repositoryHelper.cleanRepository(Subdomain)
+  }
+})
+
+function getRules (i18n: any) {
+  return {
+    subdomainRules: [
+      (subdomain: string) => (subdomain?.length <= 60) || i18n.t('subdomain_need_to_have_less_than_60_cars'),
+      (subdomain: string) => (true) || i18n.t('this_subdomain_is_already_used'),
+    ]
+  }
+}
+</script>

components/Form/Parameters/Subdomains.vue

@@ -0,0 +1,98 @@
+<!-- Liste des sous-domaines -->
+<template>
+  <main>
+    <LayoutContainer>
+      <v-container class="container">
+        <div>
+          <span>{{ $t('yourSubdomains') }} : </span>
+        </div>
+        <v-skeleton-loader
+          v-if="fetchState.pending"
+          type="image"
+        />
+        <div v-else>
+          <v-simple-table class="my-2">
+            <template v-slot:default>
+              <tbody>
+                <tr
+                  v-for="subdomain in subdomains"
+                  :key="subdomain.id"
+                  class="subdomainItem"
+                  @click="$router.push('/parameters/subdomain/' + subdomain.id)"
+                >
+                    <td>{{ subdomain.subdomain }}</td>
+                    <td>
+                      <span v-if="subdomain.active">
+                        <v-icon class="ot_green--text icon">
+                          fa-solid fa-check
+                        </v-icon> {{ $t('active') }}
+                      </span>
+                    </td>
+                </tr>
+              </tbody>
+            </template>
+          </v-simple-table>
+          <v-btn
+            v-if="subdomains.length < 3"
+            class="ot_white--text ot_green float-left"
+          >
+            <NuxtLink to="/parameters/subdomain/new" class="no-decoration">
+              <v-icon class="mr-1">fa-plus-circle</v-icon>
+              <span>{{$t('add')}}</span>
+            </NuxtLink>
+          </v-btn>
+        </div>
+      </v-container>
+    </LayoutContainer>
+  </main>
+</template>
+
+<script lang="ts">
+import {computed, ComputedRef, defineComponent, ref, Ref, useContext} from '@nuxtjs/composition-api'
+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 {Subdomain} from "~/models/Organization/Subdomain";
+import {useDataUtils} from "~/composables/data/useDataUtils";
+import {Collection} from "@vuex-orm/core/dist/src/data/Data";
+import {queryHelper} from "~/services/store/query";
+import { Parameters } from '~/models/Organization/Parameters';
+
+export default defineComponent({
+  props: {
+    parametersId: {
+      type: [Number, String],
+      required: true
+    }
+  },
+  setup (props) {
+    const parametersId: Ref<number> = ref(parseInt(props.parametersId as string))
+    const { $dataProvider, app: { $router } } = useContext()
+    const { getCollection } = useDataUtils($dataProvider)
+
+    const { fetchState } = getCollection(Subdomain, Parameters, parametersId.value)
+
+    const repository: VuexRepository<Model> = repositoryHelper.getRepository(Subdomain)
+    const query: ComputedRef<Query> = computed(() => repository.query())
+    const subdomains: ComputedRef<Collection> = computed(() => queryHelper.getCollection(query.value))
+
+    return {
+      subdomains,
+      fetchState,
+      $router
+    }
+  },
+  beforeDestroy() {
+    repositoryHelper.cleanRepository(Subdomain)
+  }
+})
+
+</script>
+<style scoped>
+  .subdomainItem {
+    cursor: pointer;
+  }
+  .subdomainItem .icon {
+    font-size: 12px;
+  }
+</style>

lang/content/parameters/fr-FR.js

@@ -2,6 +2,14 @@ export default (context, locale) => {
   return ({
     'help_super_admin': 'Le compte super-admin possède tous les droits de gestion sur votre logiciel. On l’utilise surtout pour la gestion de votre site internet et, à la première connexion au logiciel, afin de créer des comptes pour tous membres de votre structure. Enfin, il peut également être utile en cas de dépannage dans certaines situations particulières.',
     yourWebsiteAddressIs: 'L\'adresse de votre site web est',
-    areYourSureYouWantToDisableYourOpentalentWebsite: 'Êtes-vous sûr(e) de vouloir désactiver votre site web Opentalent'
+    areYourSureYouWantToDisableYourOpentalentWebsite: 'Êtes-vous sûr(e) de vouloir désactiver votre site web Opentalent',
+    youRegisteredTheFollowingSubdomain: 'Vous avez enregistré le sous-domaine suivant',
+    subdomainIsCurrentlyActive: 'Le sous-domaine est actuellement actif',
+    doYouWantToActivateThisSubdomain: 'Voulez-vous activer ce sous-domaine',
+    activate: 'Activer',
+    active: 'Actif',
+    pleaseEnterYourNewSubdomain: 'Veuillez saisir votre nouveau sous-domaine',
+    subdomain_need_to_have_less_than_60_cars: 'Un sous-domaine ne peut pas comporter plus de 60 caractères',
+    this_subdomain_is_already_used: 'Ce sous-domaine est déjà utilisé'
   })
 }

lang/field/fr-FR.js

@@ -37,7 +37,7 @@ export default (context, locale) => {
     publicationDirectors: 'Directeur(s) de publication',
     otherWebsite: 'Autre site web',
     newSubDomain: 'Nouveau sous domaine',
-    subDomainHistorical: 'Historique de vos sous domaine(s)',
+    yourSubdomains: 'Vos sous-domaines',
     timezone: 'Fuseau horaire',
     qrCode: 'QrCode pour la licence',
     studentsAreAdherents: 'Les élèves sont également adhérents de l\'association',
@@ -130,5 +130,6 @@ export default (context, locale) => {
     contactpoint_type: 'Type de contact',
     phoneNumberInvalid: 'Numéro de téléphone invalide',
     logo: 'Logo',
+    subdomain: 'Sous-domaine',
   })
 }

pages/parameters/communication.vue

@@ -53,10 +53,12 @@
                   </lazy-LayoutDialog>
                 </v-col>
 
-                <v-col cols="12" sm="6" v-if="entry['desactivateOpentalentSiteWeb'] === false">
-                  <span>{{ $t('subDomainHistorical') }} : </span>
-<!--                    <span>{{ entry['subdomains'] }}</span>-->
-                  <FormParametersSubdomain :parametersId="entry['id']" />
+                <v-col
+                  cols="12"
+                  sm="6"
+                  v-if="entry['desactivateOpentalentSiteWeb'] === false"
+                >
+                  <FormParametersSubdomains :parametersId="entry['id']"></FormParametersSubdomains>
                 </v-col>
 
                 <v-col cols="12" sm="6">
@@ -116,6 +118,7 @@ import {useAccessesProvider} from "~/composables/data/useAccessesProvider";
 import {repositoryHelper} from "~/services/store/repository";
 import {Query} from "@vuex-orm/core";
 import UrlBuilder from "~/services/connection/urlBuilder";
+import {Subdomain} from "~/models/Organization/Subdomain";
 
 export default defineComponent({
   name: 'communication',
@@ -134,6 +137,9 @@ export default defineComponent({
     const repository = repositoryHelper.getRepository(Parameters)
     const query: ComputedRef<Query> = computed(() => repository.query())
 
+    const subdomainsRepository = repositoryHelper.getRepository(Subdomain)
+    const subdomainsQuery = computed(() => subdomainsRepository.query())
+
     /**
      * Build the URL of the current website of the organization
      * Anywhere else, you can rely on organizationProfile.getWebsite(), but here this url has to be
@@ -182,7 +188,9 @@ export default defineComponent({
       desactivateOpentalentSiteWeb,
       showSiteWebConfirmationDialog,
       reactivateOpentalentSiteWeb,
-      UrlBuilder
+      UrlBuilder,
+      Subdomain,
+      subdomainsQuery: () => subdomainsQuery.value
     }
   }
 })

pages/parameters/subdomain/_id.vue

@@ -1,25 +1,88 @@
-<!-- Page de détails d'un temps d'enseignement -->
+<!-- Page de détails d'un sous-domaine -->
 <template>
   <main>
-    <FormParametersSubdomain :id="id" v-if="!fetchState.pending"></FormParametersSubdomain>
+    <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">{{ $t('activate') }}</v-btn>
+                  </div>
+                </div>
+
+              </div>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-card>
+    </LayoutContainer>
   </main>
 </template>
 
 <script lang="ts">
-import {defineComponent, useContext} from '@nuxtjs/composition-api'
+import {computed, ComputedRef, defineComponent, useContext} from '@nuxtjs/composition-api'
 import {useDataUtils} from "~/composables/data/useDataUtils";
-import {EducationTiming} from "~/models/Education/EducationTiming";
+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";
 
 export default defineComponent({
-  name: 'EditFormParametersEducationTiming',
+  name: 'EditFormParametersSubdomain',
   setup () {
-    const {$dataProvider, route} = useContext()
+    const {$dataProvider, route, app: { $router }} = useContext()
     const {getItemToEdit} = useDataUtils($dataProvider)
     const id = parseInt(route.value.params.id)
-    const {fetchState} = getItemToEdit(id, EducationTiming)
+    const {fetchState} = getItemToEdit(id, Subdomain)
+
+    const repository: VuexRepository<Model> = repositoryHelper.getRepository(Subdomain)
+    const query: Query = repository.query()
+    const entry: ComputedRef<AnyJson> = computed(() => {
+      return queryHelper.getFlattenEntry(query, id)
+    })
+
+    const activateAndQuit = function() {
+      repositoryHelper.updateStoreFromField(Subdomain, entry.value, '1', 'active')
+      $router.push('/parameters/communication')
+    }
+
     return {
       id,
-      fetchState
+      fetchState,
+      entry,
+      activateAndQuit: () => activateAndQuit()
     }
   }
 })

pages/parameters/subdomain/new.vue

@@ -0,0 +1,38 @@
+<!-- Page de création d'un nouveau sous-domaine -->
+<template>
+  <main>
+    <v-skeleton-loader
+      v-if="loading"
+      type="text"
+    />
+    <div v-else>
+      <FormParametersSubdomainNew :id="item.id"></FormParametersSubdomainNew>
+    </div>
+  </main>
+</template>
+
+<script lang="ts">
+import {defineComponent, useContext} from '@nuxtjs/composition-api'
+import {useDataUtils} from "~/composables/data/useDataUtils";
+import {ResidenceArea} from "~/models/Billing/ResidenceArea";
+import {Subdomain} from "~/models/Organization/Subdomain";
+
+export default defineComponent({
+  name: 'NewFormParametersSubdomain',
+  setup () {
+    const {$dataProvider, store} = useContext()
+    const {createItem} = useDataUtils($dataProvider)
+    const {create, loading, item} = createItem(store, Subdomain)
+
+    if(process.client){
+      const itemToCreate: Subdomain = new Subdomain()
+      create(itemToCreate)
+    }
+
+    return {
+      loading,
+      item
+    }
+  }
+})
+</script>