parameters page layout revision

components/Layout/Parameters/ActivitiesTab.vue

@@ -1,11 +0,0 @@
-<template>
-  <p>Activities form</p>
-</template>
-
-<script setup lang="ts">
-
-</script>
-
-<style scoped lang="scss">
-
-</style>

components/Layout/Parameters/BillingTab.vue

@@ -1,11 +0,0 @@
-<template>
-  <p>Billing form</p>
-</template>
-
-<script setup lang="ts">
-
-</script>
-
-<style scoped lang="scss">
-
-</style>

components/Layout/Parameters/EducationTab.vue

@@ -1,11 +0,0 @@
-<template>
-  Education form
-</template>
-
-<script setup lang="ts">
-
-</script>
-
-<style scoped lang="scss">
-
-</style>

components/Layout/Parameters/General.vue

@@ -0,0 +1,92 @@
+<template>
+  <LayoutContainer>
+    <UiLoadingPanel v-if="pending" />
+    <UiForm
+        v-else
+        :model="Parameters"
+        :entity="parameters"
+    >
+      <v-row>
+        <v-col cols="6">
+          <UiInputDatePicker
+              v-model="parameters.financialDate"
+              label="start_date_of_financial_season"
+              field="financialDate"
+          />
+        </v-col>
+
+        <v-col cols="6">
+          <UiInputDatePicker
+              v-model="parameters.musicalDate"
+              label="start_date_of_activity_season"
+              field="musicalDate"
+          />
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col cols="6">
+          <UiInputDatePicker
+              v-model="parameters.startCourseDate"
+              label="start_date_of_courses"
+              field="startCourseDate"
+          />
+        </v-col>
+        <v-col cols="6">
+          <UiInputDatePicker
+              v-model="parameters.endCourseDate"
+              label="end_date_of_courses"
+              field="endCourseDate"
+          />
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <v-col cols="6">
+          <UiInputCheckbox
+              v-model="parameters.showAdherentList"
+              field="showAdherentList"
+              label="show_adherents_list_and_their_coordinates"
+          />
+        </v-col>
+        <v-col cols="6">
+          <UiInputCheckbox
+              v-model="parameters.studentsAreAdherents"
+              field="showAdherentList"
+              label="students_are_also_association_members"
+          />
+        </v-col>
+      </v-row>
+
+      <v-row>
+        <UiInputCombobox
+            v-model="parameters.timezone"
+            field="timezone"
+            :items="['Europe/Paris', 'Europe/Zurich', 'Indian/Reunion']"
+        />
+      </v-row>
+    </UiForm>
+  </LayoutContainer>
+</template>
+
+<script setup lang="ts">
+import Parameters from "~/models/Organization/Parameters";
+import {useEntityFetch} from "~/composables/data/useEntityFetch";
+import {useOrganizationProfileStore} from "~/stores/organizationProfile";
+import {AsyncData} from "#app";
+
+const { fetch } = 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>
+</script>
+
+<style scoped lang="scss">
+
+
+</style>

components/Layout/Parameters/OrganizationPageTab.vue

@@ -1,11 +0,0 @@
-<template>
-
-</template>
-
-<script setup lang="ts">
-
-</script>
-
-<style scoped lang="scss">
-
-</style>

components/Layout/Parameters/PlacesTab.vue

@@ -1,11 +0,0 @@
-<template>
-  <p>Places form</p>
-</template>
-
-<script setup lang="ts">
-
-</script>
-
-<style scoped lang="scss">
-
-</style>

components/Layout/Parameters/PreferencesTab.vue

@@ -1,106 +0,0 @@
-<template>
-
-  <LayoutContainer>
-    <v-col cols="12" sm="12" md="12">
-      <UiLoadingPanel v-if="pending" />
-      <UiForm
-          v-else-if="parameters !== null"
-          :model="Parameters"
-          :entity="parameters"
-      >
-        <v-expansion-panels :multiple="true" v-model="openedPanels">
-
-          <UiExpansionPanel title="general_parameters" icon="fas fa-info">
-            <LayoutParametersPreferencesTabGeneralParameters :parameters="parameters" />
-          </UiExpansionPanel>
-
-          <UiExpansionPanel title="website" icon="fas fa-info">
-            <LayoutParametersPreferencesTabWebsite :parameters="parameters" />
-          </UiExpansionPanel>
-
-          <UiExpansionPanel title="teaching" icon="fas fa-info">
-          </UiExpansionPanel>
-
-          <UiExpansionPanel title="intranet_access" icon="fas fa-info">
-          </UiExpansionPanel>
-
-          <UiExpansionPanel title="educationNotations" icon="fas fa-info">
-          </UiExpansionPanel>
-
-          <UiExpansionPanel title="bulletin" icon="fas fa-info">
-          </UiExpansionPanel>
-
-          <UiExpansionPanel title="educationTimings" icon="fas fa-info">
-          </UiExpansionPanel>
-
-          <UiExpansionPanel title="attendances" icon="fas fa-info">
-          </UiExpansionPanel>
-
-          <UiExpansionPanel title="residenceAreas" icon="fas fa-info">
-          </UiExpansionPanel>
-
-          <UiExpansionPanel title="sms_option" icon="fas fa-info">
-          </UiExpansionPanel>
-
-          <UiExpansionPanel title="super_admin" icon="fas fa-info">
-          </UiExpansionPanel>
-        </v-expansion-panels>
-      </UiForm>
-      <span v-else>
-        {{ $t('an_error_happened') }}
-      </span>
-    </v-col>
-  </LayoutContainer>
-
-
-
-
-
-</template>
-
-<script setup lang="ts">
-
-// On déplie les expansion panels dans le onMounted en attendant la résolution du bug : https://github.com/vuetifyjs/vuetify/issues/16427#issuecomment-1380927133
-// TODO: quand le bug ci dessus est résolu, remplacer par `const openedPanels: Ref<Array<string>> = ref(['informations', 'bills', 'more_features'])`
-import {Ref} from "@vue/reactivity";
-import {useEntityFetch} from "~/composables/data/useEntityFetch";
-import {useOrganizationProfileStore} from "~/stores/organizationProfile";
-import Parameters from "~/models/Organization/Parameters";
-import {AsyncData} from "#app";
-import ApiResource from "~/models/ApiResource";
-
-const openedPanels: Ref<Array<string>> = ref([])
-onMounted(() => {
-  openedPanels.value = [
-    'general_parameters',
-    'website',
-    'teaching',
-    'intranet_access',
-    'educationNotations',
-    'bulletin',
-    'educationTimings',
-    'attendances',
-    'residenceAreas',
-    'sms_option',
-    'super_admin',
-  ]
-})
-
-const { fetch } = 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>
-
-
-
-
-</script>
-
-<style scoped lang="scss">
-
-</style>

components/Layout/Parameters/PreferencesTab/GeneralParameters.vue

@@ -1,80 +0,0 @@
-<template>
-  <v-container>
-    <v-row>
-      <v-col cols="6">
-        <UiInputDatePicker
-            v-model="parameters.financialDate"
-            label="start_date_of_financial_season"
-            field="financialDate"
-        />
-      </v-col>
-
-      <v-col cols="6">
-        <UiInputDatePicker
-            v-model="parameters.musicalDate"
-            label="start_date_of_activity_season"
-            field="musicalDate"
-        />
-      </v-col>
-    </v-row>
-
-    <v-row>
-      <v-col cols="6">
-        <UiInputDatePicker
-            v-model="parameters.startCourseDate"
-            label="start_date_of_courses"
-            field="startCourseDate"
-        />
-      </v-col>
-      <v-col cols="6">
-        <UiInputDatePicker
-            v-model="parameters.endCourseDate"
-            label="end_date_of_courses"
-            field="endCourseDate"
-        />
-      </v-col>
-    </v-row>
-
-    <v-row>
-      <v-col cols="6">
-        <UiInputCheckbox
-            v-model="parameters.showAdherentList"
-            field="showAdherentList"
-            label="show_adherents_list_and_their_coordinates"
-        />
-      </v-col>
-      <v-col cols="6">
-        <UiInputCheckbox
-            v-model="parameters.studentsAreAdherents"
-            field="showAdherentList"
-            label="students_are_also_association_members"
-        />
-      </v-col>
-    </v-row>
-
-    <v-row>
-      <UiInputCombobox
-          v-model="parameters.timezone"
-          field="timezone"
-          :items="['Europe/Paris', 'Europe/Zurich', 'Indian/Reunion']"
-      />
-    </v-row>
-
-  </v-container>
-</template>
-
-<script setup lang="ts">
-import {PropType} from "@vue/runtime-core";
-import Parameters from "~/models/Organization/Parameters";
-
-const props = defineProps({
-  parameters: {
-    type: Object as PropType<Parameters>,
-    required: true
-  }
-})
-</script>
-
-<style scoped lang="scss">
-
-</style>

components/Layout/Parameters/PreferencesTab/Website.vue

@@ -1,51 +0,0 @@
-<template>
-  <v-container>
-    <v-row>
-      <v-col cols="6">
-        <div>{{ $t('your_opentalent_website_is')}} : </div>
-        <div class="mb-1">{{ organizationProfile.website }}</div>
-
-        <div>{{ $t('record_a_new_subdomain')}}</div>
-        <v-text-field class="mb-1"></v-text-field>
-
-        <UiInputText
-          v-model="parameters.otherWebsite"
-          field="otherWebsite"
-        />
-      </v-col>
-
-
-      <v-col cols="6">
-        <div>{{ $t('subdomains_history') }}</div>
-        <div>...</div>
-
-        <UiInputCheckbox
-          v-model="parameters.desactivateOpentalentSiteWeb"
-          field="desactivateOpentalentSiteWeb"
-        />
-
-        <UiInputAutocomplete field="publicationDirectors"/>
-      </v-col>
-    </v-row>
-  </v-container>
-</template>
-
-<script setup lang="ts">
-import {PropType} from "@vue/runtime-core";
-import {useOrganizationProfileStore} from "~/stores/organizationProfile";
-import Parameters from "~/models/Organization/Parameters";
-
-const props = defineProps({
-  parameters: {
-    type: Object as PropType<Parameters>,
-    required: true
-  }
-})
-
-const organizationProfile = useOrganizationProfileStore()
-
-</script>
-
-<style scoped lang="scss">
-
-</style>

components/Layout/Parameters/TagsTab.vue

@@ -1,11 +0,0 @@
-<template>
-  <p>Tags form</p>
-</template>
-
-<script setup lang="ts">
-
-</script>
-
-<style scoped lang="scss">
-
-</style>

components/Layout/Parameters/Website.vue

@@ -0,0 +1,65 @@
+<template>
+  <LayoutContainer>
+    <UiLoadingPanel v-if="pending" />
+    <UiForm
+        v-else
+        :model="Parameters"
+        :entity="parameters"
+    >
+      <v-col cols="6" class="d-flex flex-column">
+        <div>{{ $t('your_opentalent_website_is')}} : </div>
+        <div class="mb-1">{{ organizationProfile.website }}</div>
+
+        <v-btn :disabled="true" class="my-2">
+          {{ $t('record_a_new_subdomain')}}
+        </v-btn>
+
+        <div class="flex-extend" />
+
+        <UiInputText
+          v-model="parameters.otherWebsite"
+          field="otherWebsite"
+        />
+      </v-col>
+
+
+      <v-col cols="6">
+        <div>{{ $t('subdomains_history') }}</div>
+        <ul>
+          <li>foo</li>
+          <li>bar</li>
+          <li>boo</li>
+        </ul>
+
+        <UiInputCheckbox
+          v-model="parameters.desactivateOpentalentSiteWeb"
+          field="desactivateOpentalentSiteWeb"
+        />
+
+        <UiInputAutocomplete field="publicationDirectors"/>
+      </v-col>
+    </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";
+
+const { fetch } = 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>
+
+</script>
+
+<style scoped lang="scss">
+
+</style>

pages/parameters.vue

@@ -8,7 +8,8 @@ Page Paramètres
           v-model="currentTab"
           bg-color="primary"
           color="on-primary"
-          grow
+          :grow="true"
+          density="default"
       >
         <v-tab v-for="tab in tabs" :value="tab">
           {{ $t(tab) }}
@@ -17,32 +18,39 @@ Page Paramètres
 
       <v-card-text>
         <v-window v-model="currentTab">
-          <v-window-item value="organization_page">
-            <LayoutParametersOrganizationPageTab />
+          <v-window-item value="general_parameters">
+            <LayoutParametersGeneral />
           </v-window-item>
 
-          <v-window-item value="preferences">
-            <LayoutParametersPreferencesTab />
+          <v-window-item value="website">
+            <LayoutParametersWebsite />
           </v-window-item>
 
-          <v-window-item value="places">
-            <LayoutParametersPlacesTab />
+          <v-window-item value="teaching">
           </v-window-item>
 
-          <v-window-item value="education">
-            <LayoutParametersEducationTab />
+          <v-window-item value="intranet_access">
           </v-window-item>
 
-          <v-window-item value="tags">
-            <LayoutParametersTagsTab />
+          <v-window-item value="educationNotations">
           </v-window-item>
 
-          <v-window-item value="activities">
-            <LayoutParametersActivitiesTab />
+          <v-window-item value="bulletin">
           </v-window-item>
 
-          <v-window-item value="billing">
-            <LayoutParametersBillingTab />
+          <v-window-item value="educationTimings">
+          </v-window-item>
+
+          <v-window-item value="attendances">
+          </v-window-item>
+
+          <v-window-item value="residenceAreas">
+          </v-window-item>
+
+          <v-window-item value="sms_option">
+          </v-window-item>
+
+          <v-window-item value="super_admin">
           </v-window-item>
         </v-window>
       </v-card-text>
@@ -55,17 +63,25 @@ Page Paramètres
   const currentTab: Ref<string | null> = ref(null)
 
   const tabs = [
-      'organization_page',
-      'preferences',
-      'places',
-      'education',
-      'tags',
-      'activities',
-      'billing'
+    'general_parameters',
+    'website',
+    'teaching',
+    'intranet_access',
+    'educationNotations',
+    'bulletin',
+    'educationTimings',
+    'attendances',
+    'residenceAreas',
+    'sms_option',
+    'super_admin',
   ]
 
 </script>
 
 <style scoped lang="scss">
 
+:deep(.v-tabs .v-btn__content) {
+  text-transform: capitalize;
+  letter-spacing: 0.04em;
+}
 </style>