refactor alert bars and system bar

components/Layout/AlertBar.vue

@@ -6,9 +6,7 @@ Contient les différentes barres d'alertes qui s'affichent dans certains cas
 
 <template>
   <main>
-    <client-only>
-      <LayoutAlertBarEnv />
-    </client-only>
+    <LayoutAlertBarEnv />
 
     <LayoutAlertBarSwitchUser />
 
@@ -28,6 +26,3 @@ Contient les différentes barres d'alertes qui s'affichent dans certains cas
   const organizationProfile = useOrganizationProfileStore()
   const { can } = useAbility()
 </script>
-
-<style scoped>
-</style>

components/Layout/AlertBar/Cotisation.vue

@@ -6,42 +6,15 @@ Barre d'alerte qui s'affiche pour donner l'état de la cotisation
 
 <template>
   <main>
-    <!-- TODO : fonctionnement à valider -->
-    <UiSystemBar v-if="showCotisationAccess" background-color="ot-info">
-      <template #bar.text>
-        <a @click="goOn('AFFILIATION')" class="text-ot-white">
-          <v-icon small>fas fa-info-circle</v-icon>
-          {{$t('cotisation_access')}}
-        </a>
-      </template>
-    </UiSystemBar>
-
-    <UiSystemBar v-else-if="showUploadInvoice" background-color="ot-info">
-      <template #bar.text>
-        <a @click="goOn('INVOICE')" class="text-ot-white">
-          <v-icon small>fas fa-info-circle</v-icon>
-          {{$t('upload_cotisation_invoice')}}
-        </a>
-      </template>
-    </UiSystemBar>
-
-    <UiSystemBar v-else-if="showRenewInsurance" background-color="ot-info">
-      <template #bar.text>
-        <a @click="goOn('INSURANCE')" class="text-ot-white">
-          <v-icon small>fas fa-info-circle</v-icon>
-          {{$t('renew_insurance_cmf')}}
-        </a>
-      </template>
-    </UiSystemBar>
-
-    <UiSystemBar v-else-if="showInsuranceSubscription" background-color="ot-info">
-      <template #bar.text>
-        <a @click="goOn('ADVERTISINGINSURANCE')" class="text-ot-white">
-          <v-icon small>fas fa-info-circle</v-icon>
-          {{$t('insurance_cmf_subscription')}}
-        </a>
-      </template>
-    </UiSystemBar>
+    <!-- TODO : vérifier le bon fonctionnement -->
+    <UiSystemBar
+        v-if="show"
+        :text="$t(alertTextKey)"
+        icon="fas fa-info-circle"
+        :on-click="alertOnClick"
+        background-color="ot-info"
+        text-color="ot-white"
+    />
   </main>
 </template>
 
@@ -50,105 +23,85 @@ import {useOrganizationProfileStore} from "~/stores/organizationProfile";
 import {Ref} from "vue";
 import UrlUtils from "~/services/utils/urlUtils";
 import {ALERT_STATE_COTISATION} from "~/types/enum/enums";
-import {useAsyncData} from "#app";
 import {useEntityFetch} from "~/composables/data/useEntityFetch";
 import Cotisation from "~/models/Organization/Cotisation";
 
-const { fetch } = useEntityFetch()
-
 const organizationProfile = useOrganizationProfileStore()
 
 const runtimeConfig = useRuntimeConfig()
 const baseLegacyUrl: string = runtimeConfig.baseUrlAdminLegacy
 
 const cotisationYear: Ref<number | null> = ref(null)
-const showCotisationAccess: Ref<Boolean> = ref(false)
-const showUploadInvoice: Ref<Boolean> = ref(false)
-const showRenewInsurance: Ref<Boolean> = ref(false)
-const showInsuranceSubscription: Ref<Boolean> = ref(false)
+
 
 /**
- * On récupère l'état des cotisations via l'API
+ * Redirige l'utilisateur vers la page des cotisations
  */
-useAsyncData(async () => {
+const goToCotisation = () => {
   if (!organizationProfile.id) {
     throw new Error('missing organization id')
   }
-  const { data: cotisation } = await fetch(Cotisation, organizationProfile.id)
+  window.location.href = UrlUtils.join(baseLegacyUrl, '/cotisation/cotisation_steps', organizationProfile.id, 'steps/1')
+}
 
-  if (cotisation.value !== null) {
-    cotisationYear.value = cotisation.value.cotisationYear
-    handleShow(cotisation.value.alertState)
+/**
+ * Ouvre la page facturation dans un nouvel onglet
+ */
+const openInvoiceWindow = () => {
+  if (!cotisationYear.value) {
+    throw new Error('no cotisation year defined')
   }
-})
+  window.open(UrlUtils.join(baseLegacyUrl, 'cotisation/invoice', cotisationYear.value), '_blank')
+}
 
 /**
- * Suivant l'état de l'alerte on affiche tel ou tel message
- * @param alertState
+ * Redirige l'utilisateur vers la page des assurances
  */
-const handleShow = (alertState: ALERT_STATE_COTISATION) =>{
-  switch(alertState){
-    case ALERT_STATE_COTISATION.AFFILIATION :
-      showCotisationAccess.value = true
-      break;
-    case ALERT_STATE_COTISATION.INVOICE :
-      showUploadInvoice.value = true
-      break;
-    case ALERT_STATE_COTISATION.INSURANCE :
-      showRenewInsurance.value = true
-      break;
-    case ALERT_STATE_COTISATION.ADVERTISINGINSURANCE :
-      showInsuranceSubscription.value = true
-      break;
-  }
+const goToInsurancePage = () => {
+  window.location.href = UrlUtils.join(baseLegacyUrl, 'cotisation/insuranceedit')
 }
 
 /**
- * Suivant le bandeau, une action différente est réalisée
- * @param type
+ * Redirige (dans un nouvel onglet) l'utilsateur vers le site web de la CMF
  */
-const goOn = (type: ALERT_STATE_COTISATION) => {
-  switch(type){
+const openCmfSubscriptionPage = () => {
+  window.open('https://www.cmf-musique.org/services/assurances/assurance-de-groupe/', '_blank')
+}
+
+// On récupère l'état des cotisations via l'API
+if (!organizationProfile.id) {
+  throw new Error('missing organization id')
+}
+
+const { fetch } = useEntityFetch()
+const { data: cotisation } = await fetch(Cotisation, organizationProfile.id)
+
+const show: Ref<boolean> = ref(false)
+const alertTextKey: Ref<string> = ref('')
+const alertOnClick: Ref<() => void> = ref(() => {})
+
+if (cotisation.value !== null) {
+  cotisationYear.value = cotisation.value.cotisationYear
+  show.value = true
+
+  switch(cotisation.value.alertState) {
     case ALERT_STATE_COTISATION.AFFILIATION :
-      if (!organizationProfile.id) {
-        throw new Error('missing organization id')
-      }
-      window.location.href = UrlUtils.join(baseLegacyUrl, '/cotisation/cotisation_steps', organizationProfile.id, 'steps/1')
+      alertTextKey.value = 'cotisation_access'
+      alertOnClick.value = goToCotisation
       break;
     case ALERT_STATE_COTISATION.INVOICE :
-      if (!cotisationYear.value) {
-        throw new Error('no cotisation year defined')
-      }
-      window.open(
-          UrlUtils.join(baseLegacyUrl, 'cotisation/invoice', cotisationYear.value),
-          '_blank'
-      )
+      alertTextKey.value = 'upload_cotisation_invoice'
+      alertOnClick.value = openInvoiceWindow
       break;
     case ALERT_STATE_COTISATION.INSURANCE :
-      window.location.href = UrlUtils.join(baseLegacyUrl, 'cotisation/insuranceedit')
+      alertTextKey.value = 'renew_insurance_cmf'
+      alertOnClick.value = goToInsurancePage
       break;
     case ALERT_STATE_COTISATION.ADVERTISINGINSURANCE :
-      window.open(
-          'https://www.cmf-musique.org/services/assurances/assurance-de-groupe/',
-          '_blank'
-      )
+      alertTextKey.value = 'insurance_cmf_subscription'
+      alertOnClick.value = openCmfSubscriptionPage
       break;
   }
 }
-</script>
-
-<style scoped lang="scss">
-.v-system-bar {
-  font-size: 14px;
-}
 
-.v-icon {
-  height: 20px;
-  margin: 0 6px;
-}
-
-a {
-  // Je ne sais pas pourquoi il faut le préciser, mais sans ça le pointeur n'est pas bon
-  cursor: pointer;
-}
-</style>
+</script>

components/Layout/AlertBar/Env.vue

@@ -5,26 +5,19 @@ Barre d'alerte qui s'affiche lorsque l'utilisateur n'est pas dans un environneme
 -->
 
 <template>
-  <UiSystemBar v-if="show" background-color="ot-warning" text-color="ot-white">
-    <template>
-      <v-icon small>fas fa-exclamation-triangle</v-icon>
-      {{ $t('not_production_environment', { env }) }}
-    </template>
-  </UiSystemBar>
+  <UiSystemBar
+      v-if="show"
+      :text="$t('not_production_environment', { env: env })"
+      icon="fas fa-exclamation-triangle"
+      background-color="ot-warning"
+      text-color="ot-white" />
 </template>
 
 <script setup lang="ts">
-  const env = process.env.NODE_ENV
-  const show = (env !== 'production')
-</script>
+  const runtimeConfig = useRuntimeConfig()
 
-<style scoped>
-.v-system-bar {
-  font-size: 14px;
-}
+  const env = runtimeConfig.env ?? 'unknown'
 
-.v-icon {
-  height: 20px;
-  margin: 0 6px;
-}
-</style>
+  console.log(env)
+  const show = env !== 'production'
+</script>

components/Layout/AlertBar/SuperAdmin.vue

@@ -6,18 +6,13 @@ Barre d'alerte qui s'affiche lorsque l'utilisateur est un super admin en mode sw
 
 <template>
   <!-- TODO : fonctionnement à valider -->
-  <UiSystemBar v-if="show" color="ot-danger">
-    <template #bar.text>
-      <v-icon small>
-        fas fa-exclamation-triangle
-      </v-icon>
-
-      <span>{{ $t('super_admin_switch_account') }}</span>
-
-      <a v-if="url" :href="url" class="text-ot-black text-decoration-none">
-        <strong>{{ $t('click_here') }}</strong>
-      </a>
-    </template>
+  <UiSystemBar v-if="show" text-color="ot-danger">
+    <v-icon small>fas fa-exclamation-triangle</v-icon>
+    <span>{{ $t('super_admin_switch_account') }}</span>
+
+    <a v-if="url" :href="url" class="text-ot-black text-decoration-none">
+      <strong>{{ $t('click_here') }}</strong>
+    </a>
   </UiSystemBar>
 </template>
 

components/Layout/AlertBar/SwitchUser.vue

@@ -6,13 +6,11 @@ Barre qui s'affiche lorsque l'utilisateur possède un compte multi user
 
 <template>
   <!-- TODO : fonctionnement à valider -->
-  <UiSystemBar v-if="show" color="ot-info">
-    <template #bar.text>
-      <v-icon small icon="fas fa-info-circle" />
-      <span v-html="$t('multi_account_alert', { fullname })" />
-      <v-icon class="ml-1" small icon="fa fa-users" />
-      {{$t('multi_account_alert_next')}}
-    </template>
+  <UiSystemBar v-if="show" text-color="ot-info">
+    <v-icon small icon="fas fa-info-circle" />
+    <span v-html="$t('multi_account_alert', { fullname })" />
+    <v-icon class="ml-1" small icon="fa fa-users" />
+    {{$t('multi_account_alert_next')}}
   </UiSystemBar>
 </template>
 

components/Layout/AlertBar/SwitchYear.vue

@@ -6,16 +6,14 @@ Barre d'alerte qui s'affiche lorsque l'utilisateur n'est pas sur l'année couran
 
 <template>
   <!-- TODO : fonctionnement à valider -->
-  <UiSystemBar v-if="show" color="ot-warning">
-    <template #bar.text>
-      {{$t('not_current_year')}}
-
-      <a @click="resetYear">
-        <strong class="text-ot-black">
-          {{$t('not_current_year_reset')}}
-        </strong>
-      </a>
-    </template>
+  <UiSystemBar v-if="show" text-color="ot-warning">
+    {{$t('not_current_year')}}
+
+    <a @click="resetYear">
+      <strong class="text-ot-black">
+        {{$t('not_current_year_reset')}}
+      </strong>
+    </a>
   </UiSystemBar>
 </template>
 

components/Ui/SystemBar.vue

@@ -4,28 +4,69 @@ System bars
 
 <template>
   <v-system-bar
-      dark
       height="50"
-      :class="'d-flex flex-row justify-center align-center text-center bg-' + backgroundColor + ' text-' + textColor"
+      :class="'d-flex flex-row justify-center align-center text-center ' + classes"
+      @click="onClick !== undefined ? onClick() : null"
   >
-    <slot name="bar.text" />
+    <slot>
+      <v-icon v-if="icon" small :icon="icon" />
+      {{ text }}
+    </slot>
   </v-system-bar>
 </template>
 
 <script setup lang="ts">
-const props = defineProps({
-  backgroundColor: {
-    type: String,
-    required: false,
-    default: '#eeeeee'
-  },
-  textColor: {
-    type: String,
-    required: false,
-    default: '#5f5f5f'
-  }
-})
+  const props = defineProps({
+    text: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    icon: {
+      type: String,
+      required: false,
+      default: undefined
+    },
+    backgroundColor: {
+      type: String,
+      required: false,
+      default: '#eeeeee'
+    },
+    textColor: {
+      type: String,
+      required: false,
+      default: '#5f5f5f'
+    },
+    onClick: {
+      type: Function,
+      required: false,
+      default: undefined
+    },
+  })
+
+  // TODO: voir si possible d'utiliser les variables sass à la place?
+  const classes = [
+    'bg-' + props.backgroundColor,
+    'text-' + props.textColor,
+    (props.onClick !== undefined ? 'clickable' : '')
+  ].join(' ')
 </script>
 
 <style scoped lang="scss">
+.v-system-bar {
+  font-size: 14px;
+}
+
+.v-icon {
+  height: 20px;
+  margin: 0 6px;
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+.clickable:hover {
+  text-decoration: underline;
+}
 </style>