app_vue2/components/Layout/AlertBar/Cotisation.vue

<!--
Cotisation bar : Barre qui s'affiche pour donner l'état de la cotisation
-->

<template>
  <main>
    <UiSystemBar color="ot_info" v-if="show_cotisation_access">
      <template #bar.text>
        <a @click="goOn('AFFILIATION')" class="ot_white--text">
          <v-icon small>fas fa-exclamation-triangle</v-icon> {{$t('cotisation_access')}}
        </a>
      </template>
    </UiSystemBar>

    <UiSystemBar color="ot_info" v-else-if="show_upload_invoice">
      <template #bar.text>
        <a @click="goOn('INVOICE')" class="ot_white--text">
          <v-icon small>fas fa-exclamation-triangle</v-icon> {{$t('upload_cotisation_invoice')}}
        </a>
      </template>
    </UiSystemBar>

    <UiSystemBar color="ot_info" v-else-if="show_renew_insurance">
      <template #bar.text>
        <a @click="goOn('INSURANCE')" class="ot_white--text">
          <v-icon small>fas fa-exclamation-triangle</v-icon> {{$t('renew_insurance_cmf')}}
        </a>
      </template>
    </UiSystemBar>

    <UiSystemBar color="ot_info" v-else-if="show_insurance_subscription">
      <template #bar.text>
        <a @click="goOn('ADVERTISINGINSURANCE')" class="ot_white--text">
          <v-icon small>fas fa-exclamation-triangle</v-icon> {{$t('insurance_cmf_subscription')}}
        </a>
      </template>
    </UiSystemBar>
  </main>
</template>

<script lang="ts">
import { defineComponent, useFetch, useContext, Ref, ref} from '@nuxtjs/composition-api'
import {ALERT_STATE_COTISATION, QUERY_TYPE} from "~/types/enums";
import {organizationState} from "~/types/interfaces";

export default defineComponent({
  setup () {
    const {$dataProvider, store, $config} = useContext()
    const profileOrganization:organizationState = store.state.profile.organization

    const baseLegacyUrl:string = $config.baseURL_adminLegacy
    const show_cotisation_access: Ref<Boolean> = ref(false)
    const show_upload_invoice: Ref<Boolean> = ref(false)
    const show_renew_insurance: Ref<Boolean> = ref(false)
    const show_insurance_subscription: Ref<Boolean> = ref(false)
    const cotisation_year: Ref<Number> = ref(0)

    /**
     * On récupère l'état des cotisations via l'API
     */
    useFetch(async () => {
      const response = await $dataProvider.invoke({
        type: QUERY_TYPE.DEFAULT,
        id: profileOrganization.id,
        url: 'cotisations'
      })
      cotisation_year.value = response.data.cotisationYear
      handleShow(response.data.alertState)
    })

    /**
     * Suivant l'état de l'alerte on affiche tel ou tel message
     * @param alertState
     */
    const handleShow = (alertState: ALERT_STATE_COTISATION) =>{
      switch(alertState){
        case ALERT_STATE_COTISATION.AFFILIATION :
          show_cotisation_access.value = true
          break;
        case ALERT_STATE_COTISATION.INVOICE :
          show_upload_invoice.value = true
          break;
        case ALERT_STATE_COTISATION.INSURANCE :
          show_renew_insurance.value = true
          break;
        case ALERT_STATE_COTISATION.ADVERTISINGINSURANCE :
          show_insurance_subscription.value = true
          break;
      }
    }

    /**
     * Suivant le bandeau, une action différente est réalisée
     * @param type
     */
    const goOn = (type: ALERT_STATE_COTISATION) => {
      switch(type){
        case ALERT_STATE_COTISATION.AFFILIATION :
          window.location.href = `${baseLegacyUrl}/cotisation/cotisation_steps/${profileOrganization.id}/steps/1`
          break;
        case ALERT_STATE_COTISATION.INVOICE :
          window.open(`${baseLegacyUrl}/cotisation/invoice/${cotisation_year.value}`, '_blank')
          break;
        case ALERT_STATE_COTISATION.INSURANCE :
          window.location.href = `${baseLegacyUrl}/cotisation/insuranceedit`
          break;
        case ALERT_STATE_COTISATION.ADVERTISINGINSURANCE :
          window.open('https://www.cmf-musique.org/services/assurances/assurance-de-groupe/', '_blank')
          break;
      }
    }

    return{
      show_cotisation_access,
      show_upload_invoice,
      show_renew_insurance,
      show_insurance_subscription,
      goOn
    }
  }
})
</script>