Version 4.2.0 : Audit 4 audit (abnamro#69)

Author: ildyria

openapi.json

@@ -1,6 +1,6 @@
 {
   "name": "resc-frontend",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "author": "ABN AMRO Bank",
   "description": "Repository Scanner Frontend",
   "license": "MIT",

package.json

@@ -19,6 +19,7 @@ import {
   faThumbsDown,
   faMedal,
   faAward,
+  faClipboardCheck,
 } from '@fortawesome/free-solid-svg-icons';
 
 import { library } from '@fortawesome/fontawesome-svg-core';
@@ -45,5 +46,6 @@ export function importFA() {
     faThumbsDown,
     faMedal,
     faAward,
+    faClipboardCheck,
   );
 }

src/assets/font-awesome.ts

@@ -8,15 +8,19 @@
         :disabled="props.auditButtonDisabled"
         >AUDIT</Button
       >
-      <Button class="" severity="primary" v-on:click="isColumnSelectorVisible = true"
+      <Button
+        v-if="props.hasColumnSelector"
+        class=""
+        severity="primary"
+        v-on:click="isColumnSelectorVisible = true"
         >Columns</Button
       >
     </div>
     <div class="w-2/3 text-left">
       <InputText
         class="opacity-0 hover:opacity-100 focus:opacity-100 valid:opacity-100 w-1/2 transition-all duration-200 ease-in-out"
         id="filterFiles"
-        placeholder="filename"
+        placeholder="f:filename r:rulename rp:repository"
         v-model="filterString"
         :required="true"
       />
@@ -29,6 +33,7 @@ import InputText from 'primevue/inputtext';
 import type { Ref } from 'vue';
 
 const props = defineProps<{
+  hasColumnSelector: boolean;
   auditButtonDisabled: boolean;
 }>();
 const isAuditModalVisible = defineModel('isAuditModalVisible') as Ref<boolean>;

src/components/Findings/FindingTableHeader.vue

@@ -12,14 +12,13 @@
       v-model:is-audit-modal-visible="isAuditModalVisible"
       v-model:is-column-selector-visible="isColumnSelectorVisible"
       :audit-button-disabled="auditButtonDisabled"
+      :has-column-selector="true"
     />
 
     <table class="w-full text-left mt-2">
       <thead>
         <tr>
-          <th class="bg-teal-500/20 pl-2">
-            <!-- <Checkbox binary v-model="selection" /> -->
-          </th>
+          <th class="bg-teal-500/20 pl-2"></th>
           <th class="bg-teal-500/20"></th>
           <th
             v-for="col of fields"
@@ -101,11 +100,12 @@ import ColumnSelector from '@/components/Findings/ColumnSelector.vue';
 import FindingTableHeader from './FindingTableHeader.vue';
 import { useFiltering } from '@/composables/useFiltering';
 import { useColumnFiltering } from '@/composables/useColumnFiltering';
-import { dispatchError, dispatchMessage } from '@/configuration/config';
+import { dispatchError } from '@/configuration/config';
 import Panel from 'primevue/panel';
 import Checkbox from 'primevue/checkbox';
 import Button from 'primevue/button';
 import FindingStatusBadge from '../Common/FindingStatusBadge.vue';
+import { useAuditFunctions } from '@/composables/useAuditFunctions';
 
 const props = defineProps<{
   findings: DetailedFindingRead[] | undefined;
@@ -128,22 +128,32 @@ const { filterString, filteredList } = useFiltering(findingList);
 
 setTableFields();
 
-function toggleExpand(idx: number) {
-  selectedIndex.value = idx;
-  expanded.value = expanded.value === idx ? -1 : idx;
-}
-
-function toggleAllCheckboxes() {
-  if (filteredList.value === undefined) {
-    return;
-  }
-
-  if (selection.value.length < filteredList.value.length) {
-    selection.value = filteredList.value.map((f) => f.id_);
-  } else {
-    selection.value = [];
-  }
-}
+const {
+  toggleExpand,
+  toggleAllCheckboxes,
+  selectDown,
+  selectUp,
+  openDetails,
+  closeDetails,
+  openCommitUrl,
+  toggleSelect,
+  markAsFalsePositive,
+  markAsTruePositive,
+  markAsGone,
+  markAllAsFalsePositive,
+  markAllAsTruePositive,
+  markAllAsGone,
+  auditThis,
+} = useAuditFunctions(
+  selection,
+  selectedIndex,
+  expanded,
+  // @ts-expect-error
+  filteredList,
+  isAuditModalVisible,
+  (item) => item.id_,
+  sendUpdate,
+);
 
 function updateAudit(status: FindingStatus, comment: string) {
   updateVisualBadge(selection.value, status, comment);
@@ -170,101 +180,6 @@ function updateVisualBadge(selectedIds: number[], status: FindingStatus, comment
   selection.value = selection.value.filter((s) => s !== selectedIds[0]);
 }
 
-function getCurrentFindingSelected(): DetailedFindingRead {
-  if (filteredList.value === undefined) {
-    dispatchMessage('List is empty');
-    throw new Error('oups!');
-  }
-
-  return filteredList.value[selectedIndex.value];
-}
-
-function selectDown(): boolean {
-  if (filteredList.value === undefined) {
-    return false;
-  }
-
-  selectedIndex.value = ((selectedIndex.value ?? -1) + 1) % filteredList.value.length;
-  expanded.value = expanded.value === -1 ? -1 : selectedIndex.value;
-
-  return true;
-}
-
-function selectUp(): boolean {
-  if (filteredList.value === undefined) {
-    return false;
-  }
-
-  selectedIndex.value =
-    (selectedIndex.value + filteredList.value.length - 1) % filteredList.value.length;
-  expanded.value = expanded.value === -1 ? -1 : selectedIndex.value;
-
-  return true;
-}
-
-function openDetails() {
-  expanded.value = selectedIndex.value;
-}
-
-function closeDetails() {
-  expanded.value = -1;
-}
-
-function openCommitUrl() {
-  const url = getCurrentFindingSelected()?.commit_url;
-  if (url !== undefined && url !== null) {
-    window.open(url, '_blank')?.focus();
-  }
-}
-
-function toggleSelect() {
-  const item = getCurrentFindingSelected();
-  if (selection.value.filter((idx) => idx === item.id_).length > 0) {
-    selection.value = selection.value.filter((idx) => idx !== item.id_);
-  } else {
-    selection.value.push(item.id_);
-  }
-}
-
-function markAsFalsePositive() {
-  const item = getCurrentFindingSelected();
-  sendUpdate([item.id_], 'FALSE_POSITIVE');
-  selectDown();
-}
-
-function markAsTruePositive() {
-  const item = getCurrentFindingSelected();
-  sendUpdate([item.id_], 'TRUE_POSITIVE');
-  selectDown();
-}
-
-function markAsGone() {
-  const item = getCurrentFindingSelected();
-  sendUpdate([item.id_], 'NOT_ACCESSIBLE');
-  selectDown();
-}
-
-function markAllAsFalsePositive() {
-  sendUpdate(selection.value, 'FALSE_POSITIVE');
-}
-
-function markAllAsTruePositive() {
-  sendUpdate(selection.value, 'TRUE_POSITIVE');
-}
-
-function markAllAsGone() {
-  sendUpdate(selection.value, 'NOT_ACCESSIBLE');
-}
-
-function auditThis() {
-  if (selection.value.length > 0) {
-    isAuditModalVisible.value = true;
-    return;
-  }
-
-  openDetails();
-}
-
 function sendUpdate(selectedIds: number[], status: FindingStatus) {
   FindingsService.auditFindings(selectedIds, status, '')
     .then(() => {

src/components/Findings/FindingsTable.vue

@@ -75,4 +75,14 @@ export const sidebarMenu = [
       },
     },
   },
+  {
+    href: '/audits',
+    title: 'AUDIT',
+    icon: {
+      element: 'font-awesome-icon',
+      attributes: {
+        icon: 'clipboard-check',
+      },
+    },
+  },
 ];

src/components/Navigation/Navigation.ts

@@ -5,7 +5,7 @@
         <td>
           {{ DateUtils.formatDate(data.timestamp) }}
         </td>
-        <td>{{ data.auditor }}</td>
+        <td>{{ userFormat(data.auditor) }}</td>
         <td>
           <FindingStatusBadge :status="data.status ?? 'NOT_ANALYZED'" />
         </td>
@@ -24,12 +24,14 @@ import FindingsService from '@/services/findings-service';
 import type { AuditRead, DetailedFindingRead } from '@/services/shema-to-types';
 import { onMounted, ref } from 'vue';
 import { dispatchError } from '@/configuration/config';
+import { useFormatter } from '@/composables/useFormatter';
 
 type Props = {
   finding: DetailedFindingRead;
 };
 const props = defineProps<Props>();
 
+const { userFormat } = useFormatter();
 const finding = ref(props.finding);
 const auditList = ref<AuditRead[] | undefined>(undefined);
 const totalRows = ref(0);