make subscription page responsive, minor fixes

pages/subscription.vue

@@ -13,16 +13,23 @@ Page 'Mon abonnement'
               <v-table>
                 <tbody>
                 <tr>
-                  <td>{{ $t('client_id') }}</td>
-                  <td>{{ dolibarrAccount ? dolibarrAccount.clientNumber : '-' }}</td>
+                  <td v-if="smAndUp">{{ $t('client_id') }}</td>
+                  <td class="py-2">
+                    <h5 v-if="!smAndUp" class="text-decoration-underline py-2">{{ $t('client_id') }}</h5>
+                    <span>{{ dolibarrAccount ? dolibarrAccount.clientNumber : '-' }}</span>
+                  </td>
                 </tr>
                 <tr>
-                  <td>{{ $t('version') }}</td>
-                  <td>{{ dolibarrAccount ? $t(dolibarrAccount.product) : '-' }}</td>
+                  <td v-if="smAndUp">{{ $t('version') }}</td>
+                  <td class="py-2">
+                    <h5 v-if="!smAndUp" class="text-decoration-underline py-2">{{ $t('version') }}</h5>
+                    <span>{{ dolibarrAccount ? $t(dolibarrAccount.product) : '-' }}</span>
+                  </td>
                 </tr>
                 <tr v-if="dolibarrAccount && dolibarrAccount.contract">
-                  <td>{{ $t('services') }}</td>
+                  <td v-if="smAndUp">{{ $t('services') }}</td>
                   <td class="py-2">
+                    <h5 v-if="!smAndUp" class="text-decoration-underline py-2">{{ $t('services') }}</h5>
                     <div
                         v-for="line in dolibarrAccount.contract.lines"
                         :key="line.id"
@@ -33,8 +40,9 @@ Page 'Mon abonnement'
                   </td>
                 </tr>
                 <tr v-if="$can('manage', 'texto')">
-                  <td>{{ $t('remaining_sms_credit') }}</td>
-                  <td>
+                  <td v-if="smAndUp">{{ $t('remaining_sms_credit') }}</td>
+                  <td class="py-2">
+                    <h5 v-if="!smAndUp" class="text-decoration-underline py-2">{{ $t('remaining_sms_credit') }}</h5>
                     <span v-if="!mobytPending && mobytStatus !== null && mobytStatus.active">
                       {{ mobytStatus.money.toLocaleString($i18n.locale, { style: 'currency', currency: 'EUR' }) }}
                       {{ $t('convert_price_to_sms', { nb_sms: mobytStatus.amount }) }}
@@ -78,190 +86,192 @@ Page 'Mon abonnement'
         <UiExpansionPanel title="more_features" icon="fas fa-plus">
           <v-container id="products-section" fluid class="container">
             <v-row>
-              <v-table>
-                <template #default>
-                  <thead>
-                  <tr>
-                    <th v-if="organizationProfile.isArtistProduct">
-                      {{ $t('PRODUCT_ARTIST_PREMIUM') }}
-                    </th>
-                    <th v-if="organizationProfile.isArtist">
-                      {{ $t('PRODUCT_SCHOOL') }}
-                    </th>
-                    <th>
-                      {{ $t('sms') }}
-                    </th>
-                    <th>
-                      {{ $t('website') }}
-                    </th>
-                  </tr>
-                  </thead>
-                  <tbody>
-                  <tr class="center-td-content">
-                    <td v-if="organizationProfile.isArtistProduct">
-                      <nuxt-img src="/images/Artist-Square.jpg" />
-                    </td>
-                    <td v-if="organizationProfile.isArtist">
-                      <nuxt-img src="/images/School-Square.jpg" />
-                    </td>
-                    <td>
-                      <nuxt-img src="/images/sms_big.png" />
-                    </td>
-                    <td>
-                      <nuxt-img src="/images/nom-de-domaine.jpg" />
-                    </td>
-                  </tr>
-                  <tr>
-                    <!-- Opentalent Artist Premium -->
-                    <td v-if="organizationProfile.isArtistProduct">
-                      <p>
-                        {{ $t('get_more_functionalities_with_version') }} <b>{{ $t('PRODUCT_ARTIST_PREMIUM') }}</b>
-                      </p>
-
-                      <!-- Cmf member -->
-                      <div v-if="organizationProfile.isCmf">
+              <div style="overflow-x:scroll;">
+                <v-table style="min-width: 600px;">
+                  <template #default>
+                    <thead>
+                      <tr>
+                        <th v-if="organizationProfile.isArtistProduct">
+                          {{ $t('PRODUCT_ARTIST_PREMIUM') }}
+                        </th>
+                        <th v-if="organizationProfile.isArtist">
+                          {{ $t('PRODUCT_SCHOOL') }}
+                        </th>
+                        <th>
+                          {{ $t('sms') }}
+                        </th>
+                        <th>
+                          {{ $t('website') }}
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                    <tr class="center-td-content">
+                      <td v-if="organizationProfile.isArtistProduct">
+                        <nuxt-img src="/images/Artist-Square.jpg" />
+                      </td>
+                      <td v-if="organizationProfile.isArtist">
+                        <nuxt-img src="/images/School-Square.jpg" />
+                      </td>
+                      <td>
+                        <nuxt-img src="/images/sms_big.png" />
+                      </td>
+                      <td>
+                        <nuxt-img src="/images/nom-de-domaine.jpg" />
+                      </td>
+                    </tr>
+                    <tr>
+                      <!-- Opentalent Artist Premium -->
+                      <td v-if="organizationProfile.isArtistProduct">
                         <p>
-                          <b>{{ $t('for_only_x_eur_ttc_by_month', { price: formatCurrency(7.25, 'EUR') }) }} *</b>
+                          {{ $t('get_more_functionalities_with_version') }} <b>{{ $t('PRODUCT_ARTIST_PREMIUM') }}</b>
                         </p>
-                        <div><i>* {{ $t('yearly_paid_giving_x_eur_ttc_per_year', { price: formatCurrency(87.00, 'EUR') }) }}</i></div>
-                        <div><i>{{ $t('only_for_cmf_members') }} ({{ $t('public_price_x_ttc_a_year', { price: formatCurrency(168.00, 'EUR') }) }})</i></div>
-                      </div>
 
-                      <!-- Not a cmf member -->
-                      <div v-else>
-                        <p>
-                          <b>{{ $t('for_only_x_eur_ttc_by_month', { price: formatCurrency(14.00, 'EUR') }) }} *</b>
+                        <!-- Cmf member -->
+                        <div v-if="organizationProfile.isCmf">
+                          <p>
+                            <b>{{ $t('for_only_x_eur_ttc_by_month', { price: formatCurrency(7.25, 'EUR') }) }} *</b>
+                          </p>
+                          <div><i>* {{ $t('yearly_paid_giving_x_eur_ttc_per_year', { price: formatCurrency(87.00, 'EUR') }) }}</i></div>
+                          <div><i>{{ $t('only_for_cmf_members') }} ({{ $t('public_price_x_ttc_a_year', { price: formatCurrency(168.00, 'EUR') }) }})</i></div>
+                        </div>
+
+                        <!-- Not a cmf member -->
+                        <div v-else>
+                          <p>
+                            <b>{{ $t('for_only_x_eur_ttc_by_month', { price: formatCurrency(14.00, 'EUR') }) }} *</b>
+                          </p>
+                          <p>
+                            <i>
+                              * {{ $t('yearly_paid_giving_x_eur_ttc_per_year', { price: formatCurrency(168.00, 'EUR') }) }}
+                            </i>
+                          </p>
+                        </div>
+
+                        <p class="mt-3">
+                          <a href="/resources/Fiche_produit_Opentalent_Artist.pdf" target="_blank">
+                            {{ $t('product_sheet') }} {{ $t('PRODUCT_ARTIST_PREMIUM') }}
+                          </a>
+                        </p>
+
+                        <p v-if="organizationProfile.isCmf" class="mt-3">
+                          <a href="/resources/BDC_Artist_Premium_CMF.pdf">
+                            <b>{{ $t('download_cmf_order_form') }}</b>
+                          </a>
+                        </p>
+                        <p v-else class="mt-3">
+                          <a href="/resources/BDC_Artist_Premium_Public.pdf">
+                            <b>{{ $t('download_order_form') }}</b>
+                          </a>
                         </p>
+                      </td>
+
+                      <!-- Opentalent School Premium -->
+                      <td v-if="organizationProfile.isArtist">
                         <p>
-                          <i>
-                            * {{ $t('yearly_paid_giving_x_eur_ttc_per_year', { price: formatCurrency(168.00, 'EUR') }) }}
-                          </i>
+                          {{ $t('switch_to_version') }} <b>{{ $t('PRODUCT_SCHOOL_PREMIUM') }}</b> {{ $t('and_benefit') }} :
+                        </p>
+
+                        <ul class="mb-2">
+                          <li>{{ $t('of_accounts_for_teachers_and_students') }}</li>
+                          <li>{{ $t('of_a_complete_website') }}</li>
+                        </ul>
+
+                        <!-- Cmf member -->
+                        <div v-if="organizationProfile.isCmf">
+                          <p><b>{{ $t('starting_from_x_eur_ttc_per_month', { price: formatCurrency(26.50, 'EUR') }) }} *</b></p>
+                          <div><i>* {{ $t('yearly_paid_giving_x_eur_ttc_per_year', { price: formatCurrency(318.00, 'EUR') }) }}</i></div>
+                          <div><i>{{ $t('version_x_up_to_x_students', { product: $t('PRODUCT_SCHOOL_PREMIUM'), max_students: '69' }) }}</i></div>
+                          <div><i>{{ $t('excluding_license_and_training_fees') }}.</i></div>
+                          <div><i>{{ $t('only_for_cmf_members') }} ({{ $t('public_price_x_ttc_a_year', { price: formatCurrency(529.20, 'EUR') }) }})</i></div>
+                        </div>
+                        <!-- Not cmf member -->
+                        <div v-else>
+                          <p>{{ $t('starting_from_x_eur_ttc_per_month', { price: formatCurrency(44.10, 'EUR') }) }} *</p>
+                          <div><i>* {{ $t('yearly_paid_giving_x_eur_ttc_per_year', { price: formatCurrency(529.20, 'EUR') }) }}</i></div>
+                          <div><i>{{ $t('version_x_up_to_x_students', { product: $t('PRODUCT_SCHOOL_PREMIUM'), max_students: '69' }) }}</i></div>
+                          <div><i>{{ $t('excluding_license_and_training_fees') }}.</i></div>
+                        </div>
+
+                        <p class="mt-4">
+                          <a href="/resources/Fiche_produit_Opentalent_School.pdf" target="_blank">
+                            {{ $t('product_sheet') }} {{ $t('PRODUCT_SCHOOL') }}
+                          </a>
                         </p>
-                      </div>
-
-                      <p class="mt-3">
-                        <a href="/resources/Fiche_produit_Opentalent_Artist.pdf" target="_blank">
-                          {{ $t('product_sheet') }} {{ $t('PRODUCT_ARTIST_PREMIUM') }}
-                        </a>
-                      </p>
-
-                      <p v-if="organizationProfile.isCmf" class="mt-3">
-                        <a href="/resources/BDC_Artist_Premium_CMF.pdf">
-                          <b>{{ $t('download_cmf_order_form') }}</b>
-                        </a>
-                      </p>
-                      <p v-else class="mt-3">
-                        <a href="/resources/BDC_Artist_Premium_Public.pdf">
-                          <b>{{ $t('download_order_form') }}</b>
-                        </a>
-                      </p>
-                    </td>
-
-                    <!-- Opentalent School Premium -->
-                    <td v-if="organizationProfile.isArtist">
-                      <p>
-                        {{ $t('switch_to_version') }} <b>{{ $t('PRODUCT_SCHOOL_PREMIUM') }}</b> {{ $t('and_benefit') }} :
-                      </p>
-
-                      <ul class="mb-2">
-                        <li>{{ $t('of_accounts_for_teachers_and_students') }}</li>
-                        <li>{{ $t('of_a_complete_website') }}</li>
-                      </ul>
-
-                      <!-- Cmf member -->
-                      <div v-if="organizationProfile.isCmf">
-                        <p><b>{{ $t('starting_from_x_eur_ttc_per_month', { price: formatCurrency(26.50, 'EUR') }) }} *</b></p>
-                        <div><i>* {{ $t('yearly_paid_giving_x_eur_ttc_per_year', { price: formatCurrency(318.00, 'EUR') }) }}</i></div>
-                        <div><i>{{ $t('version_x_up_to_x_students', { product: $t('PRODUCT_SCHOOL_PREMIUM'), max_students: '69' }) }}</i></div>
-                        <div><i>{{ $t('excluding_license_and_training_fees') }}.</i></div>
-                        <div><i>{{ $t('only_for_cmf_members') }} ({{ $t('public_price_x_ttc_a_year', { price: formatCurrency(529.20, 'EUR') }) }})</i></div>
-                      </div>
-                      <!-- Not cmf member -->
-                      <div v-else>
-                        <p>{{ $t('starting_from_x_eur_ttc_per_month', { price: formatCurrency(44.10, 'EUR') }) }} *</p>
-                        <div><i>* {{ $t('yearly_paid_giving_x_eur_ttc_per_year', { price: formatCurrency(529.20, 'EUR') }) }}</i></div>
-                        <div><i>{{ $t('version_x_up_to_x_students', { product: $t('PRODUCT_SCHOOL_PREMIUM'), max_students: '69' }) }}</i></div>
-                        <div><i>{{ $t('excluding_license_and_training_fees') }}.</i></div>
-                      </div>
-
-                      <p class="mt-4">
-                        <a href="/resources/Fiche_produit_Opentalent_School.pdf" target="_blank">
-                          {{ $t('product_sheet') }} {{ $t('PRODUCT_SCHOOL') }}
-                        </a>
-                      </p>
-
-                      <p>
-                        {{ $t('contact_us_at') }} <a href="tel:+33972126017">0 972 126 017</a>, {{ $t('or_by_mail_at') }}
-                        <a href="mailto:contact@opentalent.fr">contact@opentalent.fr</a>
-                      </p>
-                    </td>
-
-                    <!-- SMS -->
-                    <td>
-                      <p><b>{{ $t('send_sms') }} {{ $t('to_your_members_from_app') }}</b></p>
-
-                      <!-- Cmf member -->
-                      <div v-if="organizationProfile.isCmf">
-                        <p><b>{{ $t('starting_from_x_eur_ttc_per_sms', { price: formatCurrency(0.10, 'EUR') }) }} *</b></p>
-                        <p><i>* {{ $t('for_x_sms', { amount: '5000' }) }}</i></p>
 
                         <p>
-                          <b>
-                            <a href="/resources/BDC_SMS_CMF.pdf" target="_blank">
-                              {{ $t('download_cmf_order_form') }}
+                          {{ $t('contact_us_at') }} <a href="tel:+33972126017">0 972 126 017</a>, {{ $t('or_by_mail_at') }}
+                          <a href="mailto:contact@opentalent.fr">contact@opentalent.fr</a>
+                        </p>
+                      </td>
+
+                      <!-- SMS -->
+                      <td>
+                        <p><b>{{ $t('send_sms') }} {{ $t('to_your_members_from_app') }}</b></p>
+
+                        <!-- Cmf member -->
+                        <div v-if="organizationProfile.isCmf">
+                          <p><b>{{ $t('starting_from_x_eur_ttc_per_sms', { price: formatCurrency(0.10, 'EUR') }) }} *</b></p>
+                          <p><i>* {{ $t('for_x_sms', { amount: '5000' }) }}</i></p>
+
+                          <p>
+                            <b>
+                              <a href="/resources/BDC_SMS_CMF.pdf" target="_blank">
+                                {{ $t('download_cmf_order_form') }}
+                              </a>
+                            </b>
+                          </p>
+                        </div>
+                        <!-- Not cmf member -->
+                        <div v-else>
+                          <p><b>{{ $t('starting_from_x_eur_ttc_per_sms', { price: formatCurrency(0.12, 'EUR') }) }} *</b></p>
+                          <p><i>* {{ $t('for_x_sms', { amount: '5000' }) }}</i></p>
+
+                          <p>
+                            <a href="/resources/BDC_SMS_Public.pdf" target="_blank">
+                              <b>{{ $t('download_order_form') }}</b>
                             </a>
-                          </b>
+                          </p>
+                        </div>
+                      </td>
+
+                      <!-- Custom domain -->
+                      <td>
+                        <p>
+                          <b>{{ $t('get_your_own_domain_and_up_to_five_emails_for_only_x_eur_ttc_per_month', { price: formatCurrency(34.80, 'EUR') }) }}</b>
                         </p>
-                      </div>
-                      <!-- Not cmf member -->
-                      <div v-else>
-                        <p><b>{{ $t('starting_from_x_eur_ttc_per_sms', { price: formatCurrency(0.12, 'EUR') }) }} *</b></p>
-                        <p><i>* {{ $t('for_x_sms', { amount: '5000' }) }}</i></p>
+
+                        <p>{{ $t('example') }} :</p>
+                        <table>
+                          <tbody>
+                          <tr>
+                            <td style="width: 190px;">
+                              {{ $t('domain_name') }} :
+                            </td>
+                            <td>
+                              <i>{{ $t('dummy_domain_name') }}</i>
+                            </td>
+                          </tr>
+                          <tr>
+                            <td>{{ $t('associated_mail_address') }} : </td>
+                            <td>
+                              <i>{{ $t('dummy_email_address') }}</i>
+                            </td>
+                          </tr>
+                          </tbody>
+                        </table>
 
                         <p>
-                          <a href="/resources/BDC_SMS_Public.pdf" target="_blank">
+                          <a href="/resources/BDC_Nom_de_domaine.pdf" target="_blank">
                             <b>{{ $t('download_order_form') }}</b>
                           </a>
                         </p>
-                      </div>
-                    </td>
-
-                    <!-- Custom domain -->
-                    <td>
-                      <p>
-                        <b>{{ $t('get_your_own_domain_and_up_to_five_emails_for_only_x_eur_ttc_per_month', { price: formatCurrency(34.80, 'EUR') }) }}</b>
-                      </p>
-
-                      <p>{{ $t('example') }} :</p>
-                      <table>
-                        <tbody>
-                        <tr>
-                          <td style="width: 190px;">
-                            {{ $t('domain_name') }} :
-                          </td>
-                          <td>
-                            <i>{{ $t('dummy_domain_name') }}</i>
-                          </td>
-                        </tr>
-                        <tr>
-                          <td>{{ $t('associated_mail_address') }} : </td>
-                          <td>
-                            <i>{{ $t('dummy_email_address') }}</i>
-                          </td>
-                        </tr>
-                        </tbody>
-                      </table>
-
-                      <p>
-                        <a href="/resources/BDC_Nom_de_domaine.pdf" target="_blank">
-                          <b>{{ $t('download_order_form') }}</b>
-                        </a>
-                      </p>
-                    </td>
-                  </tr>
-                  </tbody>
-                </template>
-              </v-table>
+                      </td>
+                    </tr>
+                    </tbody>
+                  </template>
+                </v-table>
+              </div>
             </v-row>
           </v-container>
         </UiExpansionPanel>
@@ -279,6 +289,7 @@ Page 'Mon abonnement'
   import {Ref} from "@vue/reactivity";
   import {useAbilityUtils} from "~/composables/utils/useAbilityUtils";
   import {useAccessProfileStore} from "~/stores/accessProfile";
+  import {useDisplay} from "vuetify";
 
   const ability = useAbility()
 
@@ -289,7 +300,9 @@ Page 'Mon abonnement'
 
   const showDolibarrPanel = computed(() => !dolibarrPending.value && dolibarrAccount.value && dolibarrAccount.value.bills.length > 0)
 
-  // On ouvre les panneaux dans le onMounted en attendant la résolution du bug : https://github.com/vuetifyjs/vuetify/issues/16427#issuecomment-1380927133
+  const { smAndUp } = useDisplay()
+
+  // 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'])`
   const openedPanels: Ref<Array<string>> = ref([])
   onMounted(() => {

services/data/imageManager.ts

@@ -50,7 +50,6 @@ class ImageManager {
         const query = [new Date().getTime().toString()]
 
         const response: any = await this.apiRequestService.get(imageUrl, query)
-        // console.log(response)
 
         if(!response || response.size === 0) {
             console.error('Error: image ' + id + ' not found or invalid')

services/rights/abilityUtils.ts

@@ -61,7 +61,6 @@ class AbilityUtils {
 
                     //On les store puis on update le service ability pour le mettre à jour.
                     this.accessProfile.abilities = abilities
-                    console.log(abilities)
 
                     this.ability.update(abilities)
 
@@ -180,10 +179,6 @@ class AbilityUtils {
      * @param ability
      */
     hasRoleAbility(ability: AbilitiesType): boolean {
-        // console.log(ability, this.abilitiesByRoles.some((candidate: AbilitiesType) => {
-        //     return candidate.subject === ability.subject && (candidate.action === ability.action || candidate.action === 'manage')
-        // }))
-
         return this.abilitiesByRoles.some((candidate: AbilitiesType) => {
             return candidate.subject === ability.subject &&
                 (candidate.action === ability.action || candidate.action === 'manage') // 'manage' permet aussi l'action 'read'