From 655c76cf135335dd1c7c5c74c53f681413a7fbb0 Mon Sep 17 00:00:00 2001
From: Henry Jonas <hjonathan.sge@gmail.com>
Date: Tue, 24 Sep 2024 14:38:17 -0400
Subject: [PATCH] FOUR-18545: Use the current counter My Request (current API)

---
 .../cases/casesMain/CasesDataSection.vue      |  2 +-
 .../cases/casesMain/CasesMain.vue             | 19 ++++-
 .../cases/casesMain/config/columns.js         | 16 ++--
 .../jscomposition/cases/casesMain/routes.js   |  4 +-
 .../cases/casesMain/system/Breadcrums.vue     | 46 ----------
 .../cases/casesMain/system/index.js           |  7 --
 .../system/table/cell/CaseTitleCell.vue       | 46 ----------
 .../system/table/cell/ParticipantsCell.vue    | 83 ------------------
 .../system/table/cell/StatusCell.vue          | 70 ---------------
 .../table/cell/TruncatedOptionsCell.vue       | 85 -------------------
 .../casesMain/system/table/cell/index.js      | 11 ---
 .../cases/casesMain/system/table/index.js     |  1 -
 .../cases/casesMain/utils/counters.js         |  8 +-
 routes/web.php                                |  7 +-
 14 files changed, 32 insertions(+), 373 deletions(-)
 delete mode 100644 resources/jscomposition/cases/casesMain/system/Breadcrums.vue
 delete mode 100644 resources/jscomposition/cases/casesMain/system/index.js
 delete mode 100644 resources/jscomposition/cases/casesMain/system/table/cell/CaseTitleCell.vue
 delete mode 100644 resources/jscomposition/cases/casesMain/system/table/cell/ParticipantsCell.vue
 delete mode 100644 resources/jscomposition/cases/casesMain/system/table/cell/StatusCell.vue
 delete mode 100644 resources/jscomposition/cases/casesMain/system/table/cell/TruncatedOptionsCell.vue
 delete mode 100644 resources/jscomposition/cases/casesMain/system/table/cell/index.js
 delete mode 100644 resources/jscomposition/cases/casesMain/system/table/index.js

diff --git a/resources/jscomposition/cases/casesMain/CasesDataSection.vue b/resources/jscomposition/cases/casesMain/CasesDataSection.vue
index 77cea166ee..d4040f7f21 100644
--- a/resources/jscomposition/cases/casesMain/CasesDataSection.vue
+++ b/resources/jscomposition/cases/casesMain/CasesDataSection.vue
@@ -38,7 +38,7 @@ export default defineComponent({
   props: {
     listId: {
       type: String,
-      default: () => "myCases",
+      default: () => "",
     },
   },
   setup(props) {
diff --git a/resources/jscomposition/cases/casesMain/CasesMain.vue b/resources/jscomposition/cases/casesMain/CasesMain.vue
index e2e5b86daa..8fd2746a4d 100644
--- a/resources/jscomposition/cases/casesMain/CasesMain.vue
+++ b/resources/jscomposition/cases/casesMain/CasesMain.vue
@@ -42,21 +42,32 @@ export default defineComponent({
       pages.value.pop();
       pages.value.push({ name: counter.header, current: true });
 
-      router.push({ path: counter.url }).catch((e) => {});
+      router.push({ path: counter.url }).catch((e) => { });
     };
 
-    onMounted(async () => {
+    const initCounters = async () => {
       let currentCounter = [];
       const resCounters = await getCounters();
+
       countersData.value = formatCounters(resCounters);
+      currentCounter = countersData.value.find((counter) => counter.url === route.path) ?? countersData.value[0];
+
+      currentCounter.active = true;
+    };
 
-      currentCounter = countersData.value.find((counter) => counter.url === route.path);
+    const initBreadcrums = () => {
+      const currentCounter = countersData.value.find((e) => e.active) ?? countersData.value[0];
       pages.value = [
         configHomeBreadcrum(),
         { name: "Cases", href: "/cases", current: false },
       ];
-      currentCounter = currentCounter ?? countersData.value.find((counter) => counter.url.includes("/my-cases"));
+
       pages.value.push({ name: currentCounter.header, current: true });
+    };
+
+    onMounted(async () => {
+      await initCounters();
+      initBreadcrums();
     });
 
     return {
diff --git a/resources/jscomposition/cases/casesMain/config/columns.js b/resources/jscomposition/cases/casesMain/config/columns.js
index 88cb37bcce..a1746b0f1e 100644
--- a/resources/jscomposition/cases/casesMain/config/columns.js
+++ b/resources/jscomposition/cases/casesMain/config/columns.js
@@ -67,7 +67,7 @@ export const caseNumberColumn = () => ({
     component: LinkCell,
     params: {
       click: (row, column, columns) => {
-        window.document.location = `cases/${row.case_number}`;
+        window.document.location = `/cases/${row.case_number}`;
       },
     },
   }),
@@ -82,7 +82,7 @@ export const caseTitleColumn = () => ({
     component: CaseTitleCell,
     params: {
       click: (row, column, columns) => {
-        window.document.location = `cases/${row.case_number}`;
+        window.document.location = `/cases/${row.case_number}`;
       },
     },
   }),
@@ -119,7 +119,7 @@ export const taskColumn = () => ({
     component: TruncatedOptionsCell,
     params: {
       click: (option, row, column, columns) => {
-        window.document.location = `tasks/${option.id}/edit`;
+        window.document.location = `/tasks/${option.id}/edit`;
       },
     },
   }),
@@ -138,7 +138,7 @@ export const participantsColumn = () => ({
     component: ParticipantsCell,
     params: {
       click: (option, row, column, columns) => {
-        window.document.location = `profile/${option.id}`;
+        window.document.location = `/profile/${option.id}`;
       },
     },
   }),
@@ -188,7 +188,7 @@ export const completedColumn = () => ({
 
 export const getColumns = (type) => {
   const columnsDefinition = {
-    "my-cases": [
+    default: [
       caseNumberColumn(),
       caseTitleColumn(),
       processColumn(),
@@ -198,7 +198,7 @@ export const getColumns = (type) => {
       startedColumn(),
       completedColumn(),
     ],
-    "in-progress": [
+    in_progress: [
       caseNumberColumn(),
       caseTitleColumn(),
       processColumn(),
@@ -217,7 +217,7 @@ export const getColumns = (type) => {
       startedColumn(),
       completedColumn(),
     ],
-    "all-cases": [
+    all: [
       caseNumberColumn(),
       caseTitleColumn(),
       processColumn(),
@@ -229,5 +229,5 @@ export const getColumns = (type) => {
     ],
   };
 
-  return columnsDefinition[type] || columnsDefinition.myCases;
+  return columnsDefinition[type] || columnsDefinition.default;
 };
diff --git a/resources/jscomposition/cases/casesMain/routes.js b/resources/jscomposition/cases/casesMain/routes.js
index e21e05406e..cea03cba52 100644
--- a/resources/jscomposition/cases/casesMain/routes.js
+++ b/resources/jscomposition/cases/casesMain/routes.js
@@ -6,7 +6,7 @@ export default {};
 export const routes = [
   {
     name: "cases",
-    path: "/cases-main",
+    path: "/cases",
     component: CasesMain,
     props(route) {
       return {};
@@ -18,7 +18,7 @@ export const routes = [
         component: CasesDataSection,
         props(route) {
           return {
-            listId: route.params?.id || "my-cases",
+            listId: route.params?.id || "",
           };
         },
       },
diff --git a/resources/jscomposition/cases/casesMain/system/Breadcrums.vue b/resources/jscomposition/cases/casesMain/system/Breadcrums.vue
deleted file mode 100644
index a302a27c55..0000000000
--- a/resources/jscomposition/cases/casesMain/system/Breadcrums.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-  <nav class="tw-flex tw-text-xs tw-text-gray-400 hover:tw-text-gray-500">
-    <ol class="tw-flex tw-items-center tw-space-x-1">
-      <li>
-        <div>
-          <a href="#" class="">
-            <i class="fa-solid fa-house"></i>
-            <span class="sr-only">Home</span>
-          </a>
-        </div>
-      </li>
-      <li v-for="page in pages" :key="page.name">
-        <div class="tw-flex tw-items-center">
-          <svg
-            class="tw-h-5 tw-w-5 tw-flex-shrink-0"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            aria-hidden="true">
-            <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
-          </svg>
-          <a
-            :href="page.href"
-            class="tw-text-gray-500 hover:tw-text-gray-700"
-            :aria-current="page.current ? 'page' : undefined"
-            >{{ page.name }}</a
-          >
-        </div>
-      </li>
-    </ol>
-  </nav>
-</template>
-<script>
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  setup() {
-    const pages = [
-      { name: "Projects", href: "#", current: false },
-      { name: "Project Nero", href: "#", current: true },
-    ];
-    return {
-      pages,
-    };
-  },
-});
-</script>
diff --git a/resources/jscomposition/cases/casesMain/system/index.js b/resources/jscomposition/cases/casesMain/system/index.js
deleted file mode 100644
index 462c7f79f3..0000000000
--- a/resources/jscomposition/cases/casesMain/system/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Breadcrums from "./Breadcrums.vue";
-
-export * from "./table/index"
-
-export default {};
-
-export { Breadcrums };
diff --git a/resources/jscomposition/cases/casesMain/system/table/cell/CaseTitleCell.vue b/resources/jscomposition/cases/casesMain/system/table/cell/CaseTitleCell.vue
deleted file mode 100644
index 07c430d5c2..0000000000
--- a/resources/jscomposition/cases/casesMain/system/table/cell/CaseTitleCell.vue
+++ /dev/null
@@ -1,46 +0,0 @@
-<template>
-  <div>
-    <div
-      v-if="row.case_title_formatted"
-      class="tw-text-nowrap tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis"
-      :style="{ width: column.width + 'px' }"
-      v-html="row.case_title_formatted" />
-    <slot
-      v-else
-      :columns="columns"
-      :column="column"
-      :row="row">
-      {{ getValue() }}
-    </slot>
-  </div>
-</template>
-<script>
-import { defineComponent } from "vue";
-export default defineComponent({
-  props: {
-    columns: {
-      type: Array,
-      default: () => [],
-    },
-    column: {
-      type: Object,
-      default: () => ({}),
-    },
-    row: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  setup() {
-    const getValue = () => {
-      if (isFunction(props.column?.formatter)) {
-        return props.column?.formatter(props.row, props.column, props.columns);
-      }
-      return get(props.row, props.column?.field) || "";
-    };
-    return {
-      getValue,
-    };
-  },
-});
-</script>
diff --git a/resources/jscomposition/cases/casesMain/system/table/cell/ParticipantsCell.vue b/resources/jscomposition/cases/casesMain/system/table/cell/ParticipantsCell.vue
deleted file mode 100644
index ae7ba0a69e..0000000000
--- a/resources/jscomposition/cases/casesMain/system/table/cell/ParticipantsCell.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<template>
-  <div class="tw-overflow-hidden tw-flex -tw-space-x-1 tw-items-center tw-justify-center">
-    <div
-      v-for="(participant, index) in participants"
-      class="tw-group">
-      <AppPopover
-        position="bottom"
-        :hover="true">
-        <AppAvatar
-          :key="index"
-          :class="`${participant.color}`"
-          :initials="participant.name[0]"
-          class="tw-cursor-pointer">
-        </AppAvatar>
-
-        <template #content>
-          <div class="tw-p-2 tw-rounded-lg tw-border tw-border-gray-300 tw-bg-white">
-            {{ participant.name }}
-          </div>
-        </template>
-      </AppPopover>
-    </div>
-
-    <span
-      v-if="participants.length == 1"
-      class="tw-px-2">
-      {{ participants[0].name }}
-    </span>
-  </div>
-</template>
-<script>
-import { defineComponent, computed, ref } from "vue";
-import { AppAvatar, AppPopover } from "../../../base";
-
-const colors = [
-  "tw-bg-green-500",
-  "tw-bg-gray-400",
-  "tw-bg-yellow-500",
-  "tw-bg-emerald-500",
-  "tw-bg-red-500",
-  "tw-bg-blue-500",
-  "tw-bg-gray-500",
-  "tw-bg-purple-500",
-];
-
-const getRandomInt = (max) => {
-  return Math.floor(Math.random() * max);
-};
-
-export default defineComponent({
-  components: {
-    AppPopover,
-    AppAvatar,
-  },
-  props: {
-    columns: {
-      type: Array,
-      default: () => [],
-    },
-    column: {
-      type: Object,
-      default: () => ({}),
-    },
-    row: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  setup(props, { emit }) {
-    const participants = computed(() => {
-      const response = props.row[props.column.field].map((e) => ({
-        ...e,
-        color: colors[getRandomInt(colors.length - 1)],
-      }));
-      return response;
-    });
-
-    return {
-      participants,
-    };
-  },
-});
-</script>
diff --git a/resources/jscomposition/cases/casesMain/system/table/cell/StatusCell.vue b/resources/jscomposition/cases/casesMain/system/table/cell/StatusCell.vue
deleted file mode 100644
index b904ce8470..0000000000
--- a/resources/jscomposition/cases/casesMain/system/table/cell/StatusCell.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<template>
-  <div class="tw-flex tw-justify-center">
-    <span
-      :class="`tw-inline-flex tw-items-center tw-text-xs tw-border-1 tw-rounded-lg
-        tw-bg-${color}-100 tw-px-2 tw-py-1 tw-text-${color}-500`">
-      {{ label }}
-    </span>
-  </div>
-</template>
-<script>
-import { defineComponent, computed } from "vue";
-
-export const statuses = {
-  DRAFT: {
-    color: "yellow",
-    label: "Draft",
-  },
-  CANCELED: {
-    color: "red",
-    label: "Canceled",
-  },
-  COMPLETED: {
-    color: "blue",
-    label: "Completed",
-  },
-  ERROR: {
-    color: "red",
-    label: "Error",
-  },
-  IN_PROGRESS: {
-    color: "green",
-    label: "In progress",
-  },
-};
-
-export default defineComponent({
-  props: {
-    columns: {
-      type: Array,
-      default: () => [],
-    },
-    column: {
-      type: Object,
-      default: () => ({}),
-    },
-    row: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  setup(props, { emit }) {
-    const color = computed(() => {
-      return (
-        statuses[props.row[props.column.field]].color || statuses.IN_PROGRESS.color
-      );
-    });
-
-    const label = computed(() => {
-      return (
-        statuses[props.row[props.column.field]].label || statuses.IN_PROGRESS.label
-      );
-    });
-
-    return {
-      color,
-      label,
-    };
-  },
-});
-</script>
diff --git a/resources/jscomposition/cases/casesMain/system/table/cell/TruncatedOptionsCell.vue b/resources/jscomposition/cases/casesMain/system/table/cell/TruncatedOptionsCell.vue
deleted file mode 100644
index 77be8e0a5f..0000000000
--- a/resources/jscomposition/cases/casesMain/system/table/cell/TruncatedOptionsCell.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-  <div class="tw-flex tw-relative tw-text-nowrap tw-whitespace-nowrap"
-		:style="{ width: column.width + 'px' }">
-    <div class="tw-overflow-hidden tw-text-ellipsis ">
-			{{ row[column.field][0].name }}
-		</div>
-
-    <AppPopover
-		  v-model="show"
-      :hover="false"
-      position="bottom"
-      class="!tw-absolute -tw-right-3">
-      <div
-        class="hover:tw-bg-gray-200 tw-bg-white tw-px-2 tw-rounded-md hover:tw-cursor-pointer"
-        @click.prevent.stop="onClick">
-        <i class="fa-solid fa-ellipsis-vertical"></i>
-      </div>
-
-      <template #content>
-        <ul
-          class="tw-bg-white tw-list-none tw-text-gray-600 tw-overflow-hidden tw-rounded-lg tw-w-50 tw-text-sm tw-border tw-border-gray-300">
-          <li
-            v-for="(option, index) in optionsModel"
-            :key="index"
-            class="hover:tw-bg-gray-100"
-            @click.prevent.stop="onClickOption(option, index)">
-            <span class="tw-flex tw-py-2 tw-px-4 transition duration-300 hover:tw-bg-gray-200 hover:tw-cursor-pointer">
-              {{ option.name || option.id }}
-            </span>
-          </li>
-        </ul>
-      </template>
-    </AppPopover>
-  </div>
-</template>
-<script>
-import { defineComponent, nextTick, ref } from "vue";
-import { AppPopover } from "../../../base/index";
-
-const isTruncated = (element) => {
-  return element.scrollWidth > element.clientWidth;
-};
-
-export default defineComponent({
-  components: {
-    AppPopover,
-  },
-  props: {
-    columns: {
-      type: Array,
-      default: () => [],
-    },
-    column: {
-      type: Object,
-      default: () => ({}),
-    },
-    row: {
-      type: Object,
-      default: () => ({}),
-    },
-  },
-  setup(props, { emit }) {
-    const show = ref(false);
-    const optionsModel = ref(props.row[props.column.field]);
-
-    const onClick = () => {
-      show.value = !show.value;
-    };
-
-    const onClickOption = (option, index) => {};
-
-    const onClose = () => {
-      show.value = false;
-    };
-
-    return {
-      show,
-      optionsModel,
-      onClose,
-      onClickOption,
-      onClick,
-    };
-  },
-});
-</script>
diff --git a/resources/jscomposition/cases/casesMain/system/table/cell/index.js b/resources/jscomposition/cases/casesMain/system/table/cell/index.js
deleted file mode 100644
index 3c33f8bb4f..0000000000
--- a/resources/jscomposition/cases/casesMain/system/table/cell/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import ParticipantsCell from "./ParticipantsCell.vue"
-import TruncatedOptionsCell from "./TruncatedOptionsCell.vue"
-import StatusCell from "./StatusCell.vue"
-import CaseTitleCell from "./CaseTitleCell.vue"
-
-export {
-  ParticipantsCell,
-  TruncatedOptionsCell,
-  StatusCell,
-  CaseTitleCell
-}
diff --git a/resources/jscomposition/cases/casesMain/system/table/index.js b/resources/jscomposition/cases/casesMain/system/table/index.js
deleted file mode 100644
index 08ba296b39..0000000000
--- a/resources/jscomposition/cases/casesMain/system/table/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./cell/index"
\ No newline at end of file
diff --git a/resources/jscomposition/cases/casesMain/utils/counters.js b/resources/jscomposition/cases/casesMain/utils/counters.js
index b6ae790eae..4de961bad1 100644
--- a/resources/jscomposition/cases/casesMain/utils/counters.js
+++ b/resources/jscomposition/cases/casesMain/utils/counters.js
@@ -9,21 +9,21 @@ export const formatCounters = (data) => {
       body: data.myCases.toString(),
       color: "amber",
       icon: "far fa-user",
-      url: "/cases-main/my-cases",
+      url: "/cases",
     },
     {
       header: t("In progress"),
       body: data.inProgress.toString(),
       color: "green",
       icon: "fas fa-list",
-      url: "/cases-main/in-progress",
+      url: "/cases/in_progress",
     },
     {
       header: t("Completed"),
       body: data.completed.toString(),
       color: "blue",
       icon: "far fa-check-circle",
-      url: "/cases-main/completed",
+      url: "/cases/completed",
     },
   ];
 
@@ -33,7 +33,7 @@ export const formatCounters = (data) => {
       body: data.allCases.toString(),
       color: "purple",
       icon: "far fa-clipboard",
-      url: "/cases-main/all-cases",
+      url: "/cases/all",
     });
   }
 
diff --git a/routes/web.php b/routes/web.php
index 58c7f94ded..5d652f693e 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -139,12 +139,9 @@
     Route::get('cases', [CasesController::class, 'index'])->name('cases.index')->middleware('no-cache');
     Route::get('cases/{request}', [CasesController::class, 'edit'])->name('cases.edit');
     // This is a temporary API the engine team will create the API
-    Route::get('cases-main/{type?}', [CasesController::class, 'index'])->name('cases-main.index')
-    ->where('type', 'my-cases|in-progress|completed|all-cases')
+    Route::get('cases/{type?}', [CasesController::class, 'index'])->name('cases-main.index')
+    ->where('type', 'in_progress|completed|all')
     ->middleware('no-cache'); 
-    Route::get('cases/{type?}', [RequestController::class, 'index'])->name('cases_by_type')
-        ->where('type', 'all|in_progress|completed')
-        ->middleware('no-cache');
     // Requests
     Route::get('requests', [RequestController::class, 'index'])
         ->name('requests.index')