Merge branch 'features/priority_column' into dev

Author: achappard

app/Repositories/Bugs/BugRepository.php

@@ -47,6 +47,7 @@ public function getAllBugsPaginatedForProject(Project $project, Request $request
     public function getAllFollowedBugsPaginated(Request $request, int $nb_per_page = 10): LengthAwarePaginator
     {
         $query = Bug::with(['project'])
+            ->withCount('bug_comments')
             ->whereHas('user_followers', function ($q) {
                 $q->where('user_id', auth()->id());
             })

resources/js/Helpers/bug.js

@@ -27,8 +27,16 @@ const getStatusObject = (id) => {
     return status
 }
 
-const nb_notes = (nb_responses) => {
-    return nb_responses - 1;
+const nb_notes = (nb_responses) => nb_responses - 1;
+const nb_notes_labels = (bug) => {
+    const nbAddtionalNotes = nb_notes(bug.bug_comments_count);
+    return nbAddtionalNotes > 1 ? `${nbAddtionalNotes} notes` : `${nbAddtionalNotes} note`;
+
+}
+
+const bug_priority_class = (bug) => {
+    const prioObj = getPriorityObject(bug.priority)
+    return `text-bg-priority-${prioObj.weight}`;
 }
 
 const format_text = (text) => {
@@ -37,4 +45,4 @@ const format_text = (text) => {
     return text.replace(/\n/g, '<br>')
 }
 
-export {getPriorityObject, getStatusObject, nb_notes, format_text}
+export {getPriorityObject, getStatusObject, nb_notes,nb_notes_labels, bug_priority_class, format_text}

resources/js/Pages/Dashboard.vue

@@ -57,7 +57,8 @@
                       <th :class="sortingClass('project', params)" @click="sort('project')">Projet</th>
                       <th :class="sortingClass('title', params)" @click="sort('title')">Titre</th>
                       <th :class="sortingClass('status', params)" @click="sort('status')">Statut</th>
-                      <th>Assigné à</th>
+                      <th style="width: 200px">Assigné à</th>
+                      <th style="width: 100px" :class="sortingClass('priority', params)" @click="sort('priority')">Priorité</th>
                       <th :class="sortingClass('date', params)" @click="sort('date')">Date</th>
                   </tr>
               </thead>
@@ -73,13 +74,13 @@
                           {{bug.project.name}}
                           </Link>
                       </td>
-                      <td class="align-middle">
+                      <td >
                           <p class="mb-0 d-flex flex-column align-items-start">
                               <Link :href="route('projects.bug.show', [bug.project.slug, bug.id])" class="fw-bold bug_title d-flex align-items-center">
                                   <StarIcon class="size-1 text-status-in_progress me-1"/>
                                   {{ bug.title }}
                               </Link>
-                              <small class="text-secondary">{{ getPriorityObject(bug.priority)?.extended_label}}</small>
+                              <small class="text-secondary"><ChatBubbleLeftIcon class="size-1"/> {{nb_notes_labels(bug)}}</small>
                           </p>
                       </td>
                       <td class="align-middle">
@@ -92,6 +93,14 @@
                           </div>
                           <em class="mb-0 opacity-75" v-else>Non assigné</em>
                       </td>
+                      <td class="align-middle">
+                          <div class="priority rounded-pill"
+                               data-bs-toggle="tooltip"
+                               data-bs-placement="bottom"
+                               :data-bs-title="getPriorityObject(bug.priority)?.extended_label"
+                               :class="bug_priority_class(bug)"></div>
+
+                      </td>
                       <td class="text-sm text-secondary">
                           <InfoDateBug :bug="bug"/>
                       </td>
@@ -117,15 +126,17 @@ import {Link, usePage, router} from "@inertiajs/vue3";
 import CardProject from "@/Components/ui/project/CardProject.vue";
 import Pagination from "@/Components/ui/Pagination.vue";
 import {sortingClass} from "@/Helpers/datatable.js";
-import {getPriorityObject} from "@/Helpers/bug.js";
+import {bug_priority_class, getPriorityObject, nb_notes_labels} from "@/Helpers/bug.js";
 import {StarIcon} from "@heroicons/vue/24/solid/index.js";
 import BagdeStatusBug from "@/Components/ui/bug/BagdeStatusBug.vue";
 import InfoDateBug from "@/Components/ui/bug/InfoDateBug.vue";
-import {computed, ref, watch} from "vue";
+import {computed, onMounted, onUnmounted, ref, watch} from "vue";
 import {pickBy, throttle} from "lodash";
 import InputLabel from "@/Components/ui/form/InputLabel.vue";
 import FormSelect from "@/Components/ui/form/FormSelect.vue";
 import TextInput from "@/Components/ui/form/TextInput.vue";
+import {ChatBubbleLeftIcon} from "@heroicons/vue/24/outline/index.js";
+import {disposeToolTips, enableToolTips} from "@/Helpers/bs_tooltips.js";
 
 const props = defineProps({
     projects:{
@@ -206,4 +217,8 @@ watch(params, throttle(function () {
     //request
     router.get(route('dashboard'), my_params, {replace: true, preserveState: true})
 }, 300), {deep: true})
+
+const tooltipList = ref([]);
+onMounted(() => enableToolTips(tooltipList))
+onUnmounted(() => disposeToolTips(tooltipList))
 </script>

resources/js/Pages/SingleProject/SingleProjectIndex.vue

@@ -46,8 +46,8 @@
                         <th :class="sortingClass('id', params)" @click="sort('id')">#</th>
                         <th :class="sortingClass('title', params)" @click="sort('title')">Titre</th>
                         <th :class="sortingClass('status', params)" @click="sort('status')">Statut</th>
-                        <th>Notes</th>
                         <th>Assigné à</th>
+                        <th style="width: 100px" :class="sortingClass('priority', params)" @click="sort('priority')">Priorité</th>
                         <th :class="sortingClass('date', params)" @click="sort('date')">Date</th>
                     </tr>
                     </thead>
@@ -64,23 +64,29 @@
                                     <StarIcon class="size-1 text-status-in_progress me-1" v-if="bug.is_followed_by_me"/>
                                     {{ bug.title }}
                                 </Link>
-                                <small class="text-secondary">{{ getPriorityObject(bug.priority)?.extended_label}}</small>
+
+                                <small class="text-secondary"><ChatBubbleLeftIcon class="size-1"/> {{nb_notes_labels(bug)}}</small>
 
                             </p>
                         </td>
                         <td class="align-middle">
                             <BagdeStatusBug :bug="bug"/>
                         </td>
-
-                        <td class="text-secondary text-sm text-center align-middle"><span class="badge text-bg-secondary rounded-pill">{{nb_notes(bug.bug_comments_count)}}</span></td>
                         <td class="text-secondary text-sm text-center align-middle">
                             <div class="d-flex align-items-center" v-if="bug.assigned_user">
                                 <Avatar :user="bug.assigned_user" class="me-1 bordered"/>
                                 {{ bug.assigned_user.full_name }}
                             </div>
                             <em class="mb-0 opacity-75" v-else>Non assigné</em>
                         </td>
+                        <td class="align-middle">
+                            <div class="priority rounded-pill"
+                                 data-bs-toggle="tooltip"
+                                 data-bs-placement="bottom"
+                                 :data-bs-title="getPriorityObject(bug.priority)?.extended_label"
+                                 :class="bug_priority_class(bug)"></div>
 
+                        </td>
                         <td class="text-sm text-secondary">
                             <InfoDateBug :bug="bug"/>
                         </td>
@@ -101,7 +107,7 @@
 import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
 import {PlusCircleIcon} from "@heroicons/vue/24/outline/index.js";
 import Card from "@/Components/ui/Card.vue";
-import {computed, ref, watch} from "vue";
+import {computed, onMounted, onUnmounted, ref, watch} from "vue";
 import {router, Link, usePage} from "@inertiajs/vue3";
 import InfoDateBug from "@/Components/ui/bug/InfoDateBug.vue";
 import BagdeStatusBug from "@/Components/ui/bug/BagdeStatusBug.vue";
@@ -113,7 +119,9 @@ import {pickBy, throttle} from "lodash";
 import FormSelect from "@/Components/ui/form/FormSelect.vue";
 import Avatar from "@/Components/ui/user/avatar.vue";
 import {StarIcon} from "@heroicons/vue/24/solid/index.js";
-import {getPriorityObject, nb_notes} from "../../Helpers/bug.js";
+import {bug_priority_class, getPriorityObject, nb_notes, nb_notes_labels} from "../../Helpers/bug.js";
+import {ChatBubbleLeftIcon} from "@heroicons/vue/24/outline/index.js";
+import {disposeToolTips, enableToolTips} from "@/Helpers/bs_tooltips.js";
 
 const props = defineProps({
     project: {
@@ -186,6 +194,9 @@ watch(params, throttle(function () {
     //request
     router.get(route('projects.show', props.project.slug), my_params, {replace: true, preserveState: true})
 }, 300), {deep: true})
+const tooltipList = ref([]);
+onMounted(() => enableToolTips(tooltipList))
+onUnmounted(() => disposeToolTips(tooltipList))
 </script>
 
 <style scoped>

resources/scss/components/_bug.scss

@@ -1,5 +1,5 @@
 .bug_title{
-    width: 500px; /* Définit la largeur maximale de l'élément */
+    width: 450px; /* Définit la largeur maximale de l'élément */
     overflow: hidden; /* Cache le texte qui dépasse la largeur */
     white-space: nowrap; /* Empêche le texte de se répartir sur plusieurs lignes */
     text-overflow: ellipsis; /* Ajoute les points de suspension */
@@ -21,9 +21,8 @@
         }
     }
 }
-.dropZone{
-   /* background: $light;
-    height: 100%;
-    border: 1px solid darken($light, 10%);
-    border-radius: .5rem;*/
+.priority{
+    width: 27px;
+    height: 8px;
+    margin: 0 auto;
 }