app/pages/parameters/index.vue

<!--
Page Paramètres
-->
<template>
  <LayoutContainer>
    <v-col cols="12" sm="12" md="12">
      <v-tabs
          :model-value="currentTab"
          bg-color="primary"
          color="on-primary"
          :grow="true"
          density="default"
          @update:model-value="onTabUpdate"
      >
        <v-tab v-for="tab in tabs" :value="tab">
          {{ $t(tab) }}
        </v-tab>
      </v-tabs>

      <v-card-text>
        <v-window v-model="currentTab">
          <v-window-item value="general_parameters">
            <LayoutParametersGeneral />
          </v-window-item>

          <v-window-item value="website">
            <LayoutParametersWebsite />
          </v-window-item>

          <v-window-item v-if="organizationProfile.isSchool" value="teaching">
            <LayoutParametersTeaching />
          </v-window-item>

          <v-window-item v-if="organizationProfile.isSchool" value="intranet_access">
            <LayoutParametersIntranet />
          </v-window-item>

          <v-window-item v-if="organizationProfile.isSchool" value="educationNotations">
            <LayoutParametersEducationNotation />
          </v-window-item>

          <v-window-item v-if="organizationProfile.isSchool" value="bulletin">
            <LayoutParametersBulletin />
          </v-window-item>

          <v-window-item v-if="organizationProfile.isSchool" value="educationTimings">
          </v-window-item>

          <v-window-item v-if="organizationProfile.isSchool" value="attendances">
            <LayoutParametersAttendances />
          </v-window-item>

          <v-window-item v-if="organizationProfile.isSchool" value="residenceAreas">
          </v-window-item>

          <v-window-item v-if="organizationProfile.hasModule('Sms')" value="sms_option">
            <LayoutParametersSms />
          </v-window-item>

          <v-window-item value="super_admin">
            <LayoutParametersSuperAdmin/>
          </v-window-item>
        </v-window>
      </v-card-text>

    </v-col>
  </LayoutContainer>
</template>

<script setup lang="ts">

  import {useOrganizationProfileStore} from "~/stores/organizationProfile";

  const organizationProfile = useOrganizationProfileStore()

  const tabs = [
    'general_parameters',
    'website',
    organizationProfile.isSchool ? 'teaching' : null,
    organizationProfile.isSchool ? 'intranet_access' : null,
    organizationProfile.isSchool ? 'educationNotations': null,
    organizationProfile.isSchool ? 'bulletin' : null,
    organizationProfile.isSchool ? 'educationTimings' : null,
    organizationProfile.isSchool ? 'attendances' : null,
    organizationProfile.isSchool ? 'residenceAreas' : null,
    organizationProfile.hasModule('Sms') ? 'sms_option' : null,
    'super_admin',

  ].filter((v) => v !== null)

  const router = useRouter()
  const route = useRoute()
  let mounted = false


  /**
   * Update the current route's query with a new value for 'tab' parameter
   * @param tab
   */
  const updateQuery = (tab: string) => {
    router.replace({ query: { ...route.query, tab } })
  }

  const currentTab: Ref<string | null> = ref(null)

  onMounted(() => {
    if (!route.query || !route.query.tab || !tabs.includes(route.query.tab as string)) {
      updateQuery(tabs[0] ?? 'general_parameters')
    }
    currentTab.value = route.query.tab as string
    mounted = true
  })

  const onTabUpdate = (tab: string) => {
    if (!mounted) {
      return
    }
    updateQuery(tab)
    currentTab.value = tab
  }
</script>

<style scoped lang="scss">

:deep(.v-tabs .v-btn__content) {
  text-transform: capitalize;
  letter-spacing: 0.04em;
}
</style>