Corrige l'utilisation des <router-link> avec leur nouvelle API

Robert-2 · Jan 26, 2021 · ba9ea34 · ba9ea34
1 parent 6b8c804
commit ba9ea34
Show file tree

Hide file tree

Showing 21 changed files with 227 additions and 160 deletions.
diff --git a/client/src/components/EventBilling/EventBilling.vue b/client/src/components/EventBilling/EventBilling.vue
@@ -84,7 +84,6 @@
                 :key="beneficiaries[0].id"
                 :to="`/beneficiaries/${beneficiaries[0].id}`"
                 :title="$t('action-edit')"
-                tag="a"
               >
                 {{ beneficiaries[0].full_name }}
               </router-link>

diff --git a/client/src/components/EventOverview/EventOverview.vue b/client/src/components/EventOverview/EventOverview.vue
@@ -31,15 +31,13 @@
                 <router-link
                   :to="`/beneficiaries/${beneficiary.id}`"
                   :title="$t('action-edit')"
-                  tag="a"
                 >
                   {{ beneficiary.full_name }}
                 </router-link>
                 <router-link
                   v-if="beneficiary.company"
                   :to="`/companies/${beneficiary.company_id}`"
                   :title="$t('action-edit')"
-                  tag="a"
                 >
                   ({{ beneficiary.company.legal_name }})
                 </router-link>
@@ -64,7 +62,6 @@
                 <router-link
                   :key="technician.id"
                   :to="`/technicians/${technician.id}`"
-                  tag="a"
                   class="EventOverview__info__link"
                   :title="$t('action-edit')"
                 >

diff --git a/client/src/components/MainHeader/TopMenu/TopMenu.scss b/client/src/components/MainHeader/TopMenu/TopMenu.scss
@@ -24,6 +24,8 @@
     right: 0;
     width: $main-header-dropdown-width;
     z-index: 99;
+    margin: 0;
+    padding: 0;
     background: $bg-color-main-header;
     box-shadow: -2px 6px 6px rgba(0, 0, 0, 0.25);
     transform-origin: 50% 0%;
@@ -44,6 +46,15 @@
         font-size: $side-nav-icon-size;
         margin-right: $content-padding-small-vertical;
       }
+
+      &--active {
+        background-color: $bg-color-side-menu-item-active;
+        color: $link-active-color;
+
+        &:hover {
+          background-color: $bg-color-side-menu-item-active;
+        }
+      }
     }
 
     &--open {

diff --git a/client/src/components/MainHeader/TopMenu/TopMenu.vue b/client/src/components/MainHeader/TopMenu/TopMenu.vue
@@ -5,35 +5,38 @@
       <i v-show="!isDropdownMenuOpen" class="fas fa-chevron-down" />
       <i v-show="isDropdownMenuOpen" class="fas fa-chevron-up" />
     </div>
-    <div
+    <ul
       class="TopMenu__dropdown"
       :class="{ 'TopMenu__dropdown--open': isDropdownMenuOpen }"
     >
       <div class="TopMenu__dropdown__nickname">{{ nickname }}</div>
-      <router-link
-        to="/profile"
-        tag="div"
-        class="TopMenu__dropdown__item"
-      >
-        <i class="fas fa-user-alt" />
-        {{$t('your-profile')}}
+      <router-link to="/profile" custom v-slot="{ navigate, isActive }">
+        <li
+          @click="navigate"
+          class="TopMenu__dropdown__item"
+          :class="{ 'TopMenu__dropdown__item--active': isActive }"
+        >
+          <i class="fas fa-user-alt" />
+          {{$t('your-profile')}}
+        </li>
       </router-link>
-      <router-link
-        to="/settings"
-        tag="div"
-        class="TopMenu__dropdown__item"
-      >
-        <i class="fas fa-cogs" />
-        {{$t('your-settings')}}
+      <router-link to="/settings" custom v-slot="{ navigate, isActive }">
+        <li
+          @click="navigate"
+          class="TopMenu__dropdown__item"
+          :class="{ 'TopMenu__dropdown__item--active': isActive }"
+        >
+          <i class="fas fa-cogs" />
+          {{$t('your-settings')}}
+        </li>
       </router-link>
       <div
         class="TopMenu__dropdown__item"
         @click="logout"
       >
-        <i class="fas fa-power-off" />
-          {{$t('logout-quit')}}
+        <i class="fas fa-power-off" /> {{$t('logout-quit')}}
       </div>
-    </div>
+    </ul>
   </div>
 </template>
 

diff --git a/client/src/components/MultipleItem/MultipleItem.vue b/client/src/components/MultipleItem/MultipleItem.vue
@@ -53,12 +53,10 @@
           </span>
           <div v-if="search.length >= minSearchCharacters">
             <p>{{ $t('no-result-found-try-another-search') }}</p>
-            <router-link
-              :to="createItemPath"
-              tag="button"
-              class="success"
-            >
-              {{ $t('create-select-item-label', { label: $t(label) }) }}
+            <router-link :to="createItemPath" v-slot="{ navigate }" custom>
+              <button @click="navigate" class="success">
+                {{ $t('create-select-item-label', { label: $t(label) }) }}
+              </button>
             </router-link>
           </div>
         </template>

diff --git a/client/src/components/PersonForm/PersonForm.vue b/client/src/components/PersonForm/PersonForm.vue
@@ -42,10 +42,12 @@
         <router-link
           v-if="person.company_id"
           :to="`/companies/${person.company_id}`"
-          class="PersonForm__company__edit-btn info"
-          tag="button"
+          v-slot="{ navigate }"
+          custom
         >
-          <i class="fas fa-edit" /> {{ $t('page-companies.edit-btn') }}
+          <button class="PersonForm__company__edit-btn info" @click="navigate">
+            <i class="fas fa-edit" /> {{ $t('page-companies.edit-btn') }}
+          </button>
         </router-link>
       </div>
       <router-link to="/companies/new" class="PersonForm__add-company">

diff --git a/client/src/components/SideNav/SideMenu/SideMenu.vue b/client/src/components/SideNav/SideMenu/SideMenu.vue
@@ -2,75 +2,123 @@
   <div class="SideMenu">
     <router-link
       to="/"
-      tag="li"
       exact
-      class="SideMenu__item"
+      custom
+      v-slot="{ navigate, isActive }"
     >
-      <i class="fas fa-calendar-alt" /><br>
-      <span class="SideMenu__item__title">{{$t('page-calendar.title')}}</span>
+      <li
+        @click="navigate"
+        class="SideMenu__item"
+        :class="{ 'SideMenu__item--active': isActive }"
+      >
+        <i class="fas fa-calendar-alt" /><br>
+        <span class="SideMenu__item__title">{{$t('page-calendar.title')}}</span>
+      </li>
     </router-link>
     <router-link
       v-if="isAdmin || isMember"
       to="/materials"
-      tag="li"
-      class="SideMenu__item"
+      custom
+      v-slot="{ navigate, isActive }"
     >
-      <i class="fas fa-box" /><br>
-      <span class="SideMenu__item__title">{{$t('page-materials.title')}}</span>
+      <li
+        @click="navigate"
+        class="SideMenu__item"
+        :class="{ 'SideMenu__item--active': isActive }"
+      >
+        <i class="fas fa-box" /><br>
+        <span class="SideMenu__item__title">{{$t('page-materials.title')}}</span>
+      </li>
     </router-link>
     <router-link
       v-if="isAdmin || isMember"
       to="/technicians"
-      tag="li"
-      class="SideMenu__item"
+      custom
+      v-slot="{ navigate, isActive }"
     >
-      <i class="fas fa-people-carry" /><br>
-      <span class="SideMenu__item__title">{{$t('page-technicians.title')}}</span>
+      <li
+        @click="navigate"
+        class="SideMenu__item"
+        :class="{ 'SideMenu__item--active': isActive }"
+      >
+        <i class="fas fa-people-carry" /><br>
+        <span class="SideMenu__item__title">{{$t('page-technicians.title')}}</span>
+      </li>
     </router-link>
     <router-link
       v-if="isAdmin || isMember"
       to="/beneficiaries"
-      tag="li"
-      class="SideMenu__item"
+      custom
+      v-slot="{ navigate, isActive }"
     >
-      <i class="fas fa-address-book" /><br>
-      <span class="SideMenu__item__title">{{$t('page-beneficiaries.title')}}</span>
+      <li
+        @click="navigate"
+        class="SideMenu__item"
+        :class="{ 'SideMenu__item--active': isActive }"
+      >
+        <i class="fas fa-address-book" /><br>
+        <span class="SideMenu__item__title">{{$t('page-beneficiaries.title')}}</span>
+      </li>
     </router-link>
     <router-link
       v-if="isAdmin"
       to="/categories"
-      tag="li"
-      class="SideMenu__item"
+      custom
+      v-slot="{ navigate, isActive }"
     >
-      <i class="fas fa-sitemap" /><br>
-      <span class="SideMenu__item__title">{{$t('page-categories.title')}}</span>
+      <li
+        @click="navigate"
+        class="SideMenu__item"
+        :class="{ 'SideMenu__item--active': isActive }"
+      >
+        <i class="fas fa-sitemap" /><br>
+        <span class="SideMenu__item__title">{{$t('page-categories.title')}}</span>
+      </li>
     </router-link>
     <router-link
       v-if="isAdmin"
       to="/tags"
-      tag="li"
-      class="SideMenu__item"
+      custom
+      v-slot="{ navigate, isActive }"
     >
-      <i class="fas fa-tags" /><br>
-      <span class="SideMenu__item__title">{{$t('page-tags.title')}}</span>
+      <li
+        @click="navigate"
+        class="SideMenu__item"
+        :class="{ 'SideMenu__item--active': isActive }"
+      >
+        <i class="fas fa-tags" /><br>
+        <span class="SideMenu__item__title">{{$t('page-tags.title')}}</span>
+      </li>
     </router-link>
     <router-link
       v-if="isAdmin"
       to="/parks"
-      tag="li"
-      class="SideMenu__item"
+      custom
+      v-slot="{ navigate, isActive }"
     >
-      <i class="fas fa-industry" /><br>
-      <span class="SideMenu__item__title">{{$t('page-parks.title')}}</span>
+      <li
+        @click="navigate"
+        class="SideMenu__item"
+        :class="{ 'SideMenu__item--active': isActive }"
+      >
+        <i class="fas fa-industry" /><br>
+        <span class="SideMenu__item__title">{{$t('page-parks.title')}}</span>
+      </li>
     </router-link>
     <router-link
       v-if="isAdmin"
       to="/users"
-      tag="li"
-      class="SideMenu__item"
+      custom
+      v-slot="{ navigate, isActive }"
     >
-      <i class="fas fa-users-cog" /><br>
-      <span class="SideMenu__item__title">{{$t('page-users.title')}}</span>
+      <li
+        @click="navigate"
+        class="SideMenu__item"
+        :class="{ 'SideMenu__item--active': isActive }"
+      >
+        <i class="fas fa-users-cog" /><br>
+        <span class="SideMenu__item__title">{{$t('page-users.title')}}</span>
+      </li>
     </router-link>
   </div>
 </template>

diff --git a/client/src/pages/Beneficiaries/Beneficiaries.vue b/client/src/pages/Beneficiaries/Beneficiaries.vue
@@ -11,11 +11,16 @@
       <div class="header-page__actions">
         <router-link
           :to="`/beneficiaries/new`"
-          tag="button"
-          class="Beneficiaries__create success"
+          v-slot="{ navigate }"
+          custom
         >
-          <i class="fas fa-user-plus" />
-          {{ $t('page-beneficiaries.action-add') }}
+          <button
+            class="Beneficiaries__create success"
+            @click="navigate"
+          >
+            <i class="fas fa-user-plus" />
+            {{ $t('page-beneficiaries.action-add') }}
+          </button>
         </router-link>
       </div>
     </div>
@@ -32,7 +37,6 @@
             v-if="beneficiary.row.company"
             v-tooltip="$t('action-edit')"
             :to="`/companies/${beneficiary.row.company.id}`"
-            tag="a"
           >
             {{ beneficiary.row.company.legal_name }}
             <i class="fas fa-edit" />
@@ -72,10 +76,12 @@
             v-if="!isTrashDisplayed"
             v-tooltip="$t('action-edit')"
             :to="`/beneficiaries/${beneficiary.row.id}`"
-            tag="button"
-            class="item-actions__button info"
+            v-slot="{ navigate }"
+            custom
           >
-            <i class="fas fa-edit" />
+            <button class="item-actions__button info" @click="navigate">
+              <i class="fas fa-edit" />
+            </button>
           </router-link>
           <button
             v-if="!isTrashDisplayed"

diff --git a/client/src/pages/Calendar/EventDetails/EventDetails.vue b/client/src/pages/Calendar/EventDetails/EventDetails.vue
@@ -45,15 +45,13 @@
                 <router-link
                   :to="`/beneficiaries/${beneficiary.id}`"
                   :title="$t('action-edit')"
-                  tag="a"
                 >
                   {{ beneficiary.name }}
                 </router-link>
                 <router-link
                   v-if="beneficiary.company"
                   :to="`/companies/${beneficiary.company_id}`"
                   :title="$t('action-edit')"
-                  tag="a"
                 >
                   ({{ beneficiary.company }})
                 </router-link>
@@ -70,7 +68,6 @@
                 <router-link
                   :to="`/technicians/${assignee.id}`"
                   :title="$t('action-edit')"
-                  tag="a"
                 >
                   {{ assignee.name }}
                 </router-link>
@@ -157,10 +154,12 @@
           <router-link
             v-if="!event.isPast"
             :to="`/events/${event.id}`"
-            tag="button"
-            class="info"
+            v-slot="{ navigate }"
+            custom
           >
-            <i class="fas fa-edit" /> {{ $t('page-events.edit-event') }}
+            <button @click="navigate" class="info">
+              <i class="fas fa-edit" /> {{ $t('page-events.edit-event') }}
+            </button>
           </router-link>
         </div>
       </div>