Merge pull request #5652 from mohamalnadi/boac-6345-new

BOAC-6345 - add table for inactive peer advisors

Author: lyttam

src/components/peer/reports/PeerAdvisingCurrentMonthReport.vue

@@ -15,117 +15,51 @@
       </div>
     </div>
     <div class="mt-4 w-100">
-      <table v-if="notesReport.currentMonth.peerAdvisors.length" class="border-sm w-100">
-        <thead>
-          <tr>
-            <th
-              :aria-sort="getPeerAdvisorAriaSort('name', sortOptions)"
-              class="bg-grey-lighten-2 border-sm w-90"
-              scope="col"
-            >
-              <v-btn
-                id="sort-current-month-peer-advisors-by-name"
-                :append-icon="sortOptions.sortBy === 'name' ? (sortOptions.sortDesc ? mdiMenuDown : mdiMenuUp) : undefined"
-                aria-label="Sort by Peer Advisor"
-                block
-                class="sort-col-btn font-weight-bold text-no-wrap v-table-sort-btn-override"
-                :class="{'icon-visible': sortOptions.sortBy === 'name'}"
-                color="body"
-                density="compact"
-                size="small"
-                text="Peer Advisor"
-                variant="plain"
-                @click="onSortName"
-              />
-            </th>
-            <th
-              :aria-sort="getPeerAdvisorAriaSort('noteCount', sortOptions)"
-              class="bg-grey-lighten-2 border-sm text-right"
-              scope="col"
-            >
-              <v-btn
-                id="sort-current-month-peer-advisors-by-note-count"
-                :append-icon="sortOptions.sortBy === 'noteCount' ? (sortOptions.sortDesc ? mdiMenuDown : mdiMenuUp) : undefined"
-                aria-label="Sort by Notes"
-                block
-                class="sort-col-btn font-weight-bold justify-end ml-auto text-no-wrap v-table-sort-btn-override"
-                :class="{'icon-visible': sortOptions.sortBy === 'noteCount'}"
-                color="body"
-                density="compact"
-                size="small"
-                text="Notes"
-                variant="plain"
-                @click="onSortNoteCount"
-              />
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr
-            v-for="peerAdvisor in sortedPeerAdvisors"
-            :id="`tr-current-month-peer-advisor-${peerAdvisor.uid}`"
-            :key="peerAdvisor.uid"
-          >
-            <td
-              :id="`td-current-month-peer-advisor-${peerAdvisor.uid}-name`"
-              :class="{
-                'demo-mode-blur': currentUser.inDemoMode,
-                'font-weight-medium text-red': peerAdvisor.deletedAt && !currentUser.inDemoMode
-              }"
-              class="border-sm w-90"
-            >
-              {{ peerAdvisor.name }}
-              <span v-if="peerAdvisor.deletedAt" class="text-medium-emphasis">
-                (deleted on <Date :id="`peer-advisor-${peerAdvisor.uid}-deleted-at`" :date="peerAdvisor.deletedAt" />)
-              </span>
-            </td>
-            <td
-              :id="`td-current-month-peer-advisor-${peerAdvisor.uid}-note-count`"
-              class="border-sm text-no-wrap text-right"
-            >
-              <NotesCreatedByPeerAdvisor
-                v-if="get(peerAdvisor, 'noteCount')"
-                :header-text="`${pluralize('note', toInt(get(peerAdvisor, 'noteCount') || 0), {1: 'One'})} created by ${currentUser.inDemoMode ? '...' : peerAdvisor.name}`"
-                :peer-advising-department="notesReport.peerAdvisingDepartment"
-                :timeframe="notesReport.currentMonth"
-                :user="peerAdvisor"
-              />
-              <span v-if="!get(peerAdvisor, 'noteCount')" :class="{'font-weight-medium text-red': peerAdvisor.deletedAt}">
-                0<span class="sr-only"> notes created in {{ notesReport.currentMonth.label }}</span>
-              </span>
-            </td>
-          </tr>
-        </tbody>
-      </table>
+      <PeerAdvisorMonthlyNoteCountTable
+        id-prefix="current-month-active"
+        :peer-advisors="partitionedPeerAdvisors.active"
+        :peer-advising-department="notesReport.peerAdvisingDepartment"
+        section-label="Active Peer Advisors"
+        :sort-options="activeSortOptions"
+        :timeframe="notesReport.currentMonth"
+        @sort-name="onSortActiveName"
+        @sort-note-count="onSortActiveNoteCount"
+      />
       <div
-        v-if="!notesReport.currentMonth.peerAdvisors.length"
+        v-if="!partitionedPeerAdvisors.active.length"
         class="font-weight-550 pa-3 text-medium-emphasis"
       >
         <span class="font-weight-bold">{{ notesReport.peerAdvisingDepartment.name }}</span>
         has had no active Peer Advisors in the current month.
       </div>
+      <PeerAdvisorMonthlyNoteCountTable
+        id-prefix="current-month-deleted"
+        add-top-margin
+        :is-deleted-section="true"
+        :peer-advisors="partitionedPeerAdvisors.deleted"
+        :peer-advising-department="notesReport.peerAdvisingDepartment"
+        section-label="Deleted Peer Advisors"
+        :sort-options="deletedSortOptions"
+        :timeframe="notesReport.currentMonth"
+        @sort-name="onSortDeletedName"
+        @sort-note-count="onSortDeletedNoteCount"
+      />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import type {PropType} from 'vue'
 import {computed, ref} from 'vue'
-import {get} from 'lodash'
-import {mdiMenuDown, mdiMenuUp} from '@mdi/js'
 import type {PeerAdvisingManagerReport} from '@/lib/types-peer-advising'
-import Date from '@/components/util/Date.vue'
-import NotesCreatedByPeerAdvisor from '@/components/peer/note/NotesCreatedByPeerAdvisor.vue'
+import PeerAdvisorMonthlyNoteCountTable from '@/components/peer/reports/PeerAdvisorMonthlyNoteCountTable.vue'
 import PillCount from '@/components/util/PillCount.vue'
 import {
-  defaultPeerAdvisorSortOptions,
-  getPeerAdvisorAriaSort,
-  sortPeerAdvisors,
+  defaultPeerAdvisorNameSortOptions,
+  partitionPeerAdvisors,
   togglePeerAdvisorSort
 } from '@/lib/peer-advisor-sort'
 import type {PeerAdvisorSortOptions} from '@/lib/peer-advisor-sort'
-import {pluralize, toInt} from '@/lib/utils'
-import {useContextStore} from '@/stores/context'
 
 const props = defineProps({
   notesReport: {
@@ -134,61 +68,26 @@ const props = defineProps({
   }
 })
 
-const currentUser = useContextStore().currentUser
-const sortOptions = ref<PeerAdvisorSortOptions>(defaultPeerAdvisorSortOptions())
+const activeSortOptions = ref<PeerAdvisorSortOptions>(defaultPeerAdvisorNameSortOptions())
+const deletedSortOptions = ref<PeerAdvisorSortOptions>(defaultPeerAdvisorNameSortOptions())
 
-const sortedPeerAdvisors = computed(() => {
-  return sortPeerAdvisors(props.notesReport.currentMonth.peerAdvisors, sortOptions.value)
+const partitionedPeerAdvisors = computed(() => {
+  return partitionPeerAdvisors(props.notesReport.currentMonth.peerAdvisors)
 })
 
-const onSortName = () => {
-  sortOptions.value = togglePeerAdvisorSort('name', sortOptions.value)
+const onSortActiveName = () => {
+  activeSortOptions.value = togglePeerAdvisorSort('name', activeSortOptions.value)
 }
 
-const onSortNoteCount = () => {
-  sortOptions.value = togglePeerAdvisorSort('noteCount', sortOptions.value)
+const onSortActiveNoteCount = () => {
+  activeSortOptions.value = togglePeerAdvisorSort('noteCount', activeSortOptions.value)
 }
-</script>
 
-<style scoped>
-table {
-  border: 1px solid;
-  border-collapse: collapse;
-}
-th {
-  border: 1px solid;
-  font-size: 14px;
-  padding: 6px 12px;
-}
-td {
-  border: 1px solid;
-  padding: 6px 12px;
+const onSortDeletedName = () => {
+  deletedSortOptions.value = togglePeerAdvisorSort('name', deletedSortOptions.value)
 }
-.sort-col-btn {
-  height: 28px !important;
-  letter-spacing: normal !important;
-  margin: 0 4px 0 -.1em;
-  min-width: 0px !important;
-  padding: 0 2px 0 4px;
-}
-</style>
 
-<style>
-.v-table-sort-btn-override .v-btn__append {
-  margin-inline: 2px 1px !important;
-}
-.v-table-sort-btn-override .v-btn__append .v-icon {
-  opacity: 0;
+const onSortDeletedNoteCount = () => {
+  deletedSortOptions.value = togglePeerAdvisorSort('noteCount', deletedSortOptions.value)
 }
-.v-table-sort-btn-override .v-btn__content {
-  text-align: left;
-}
-.v-table-sort-btn-override:active .v-btn__append .v-icon,
-.v-table-sort-btn-override:hover .v-btn__append .v-icon,
-.v-table-sort-btn-override:focus .v-btn__append .v-icon {
-  opacity: var(--v-medium-emphasis-opacity);
-}
-.v-table-sort-btn-override.icon-visible .v-btn__append .v-icon {
-  opacity: 1;
-}
-</style>
+</script>