FOUR-18631: Review the comments Component

resources/jscomposition/base/ui/CollapsableContainer.vue

@@ -0,0 +1,49 @@
+<template>
+  <div
+    class="tw-flex tw-transition-all tw-duration-500"
+    :class="{ '!tw-w-0' : collapse}">
+    <slot name="left">
+      <div class="tw-relative tw-group tw-w-3">
+        <div class="tw-transition tw-duration-250 tw-w-[2px] tw-h-full">
+          <div
+            :class="{
+              'tw-visible' : collapse,
+              'tw-invisible' : !collapse,
+            }"
+            class="hover:tw-cursor-pointer tw-z-10
+            tw-transition-all tw-duration-250 group-hover:tw-ease-in
+            tw-flex tw-justify-center tw-items-center tw-text-[8px]
+            tw-border tw-border-gray-300 hover:tw-bg-gray-200 tw-bg-white group-hover:tw-visible
+            tw-absolute tw-left-[-12px] tw-top-[41px] tw-w-6 tw-h-6 tw-rounded-full"
+            @click.prevent="onClick">
+            <i
+              class="fa"
+              :class="{ 'fa-chevron-right' : !collapse, 'fa-chevron-left' : collapse }" />
+          </div>
+        </div>
+      </div>
+    </slot>
+
+    <div
+      class="tw-flex tw-w-full tw-transition-all tw-duration-500"
+      :class="{
+        'tw-opacity-0' : collapse,
+        'tw-opacity-100' : !collapse,
+      }">
+      <slot
+        name="default" />
+    </div>
+
+    <slot name="right" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const collapse = ref(false);
+
+const onClick = () => {
+  collapse.value = !collapse.value;
+};
+</script>

resources/jscomposition/base/ui/index.js

@@ -1,8 +1,10 @@
 import Badge from "./Badge.vue";
-import SimplePopover from "./SimplePopover.vue";
 import AppAvatar from "./AppAvatar.vue";
 import AppPopover from "./AppPopover.vue";
+import CollapsableContainer from "./CollapsableContainer.vue";
 
 export default {};
 
-export { Badge, SimplePopover, AppAvatar, AppPopover};
+export {
+  Badge, AppAvatar, AppPopover, CollapsableContainer,
+};

resources/jscomposition/cases/casesDetail/components/CaseDetail.vue

@@ -1,9 +1,7 @@
 <template>
-  <div class="tw-pb-4">
-    <Tabs
-      :tab-default="tabDefault"
-      :tabs="tabs" />
-  </div>
+  <Tabs
+    :tab-default="tabDefault"
+    :tabs="tabs" />
 </template>
 
 <script>

resources/jscomposition/cases/casesDetail/components/Tabs.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="tw-block">
+  <div class="tw-flex tw-flex-col tw-pointer-events-auto">
     <nav
-      class="tw-mb-px tw-flex tw-space-x-8"
+      class="tw-mb-px tw-flex tw-space-x-2 tw-border-b tw-border-gray-300"
       aria-label="Tabs">
       <template v-for="(tab, index) in tabs">
         <a
@@ -18,8 +18,10 @@
         </a>
       </template>
     </nav>
-    <div class="tw-mt-3">
-      <component :is="content" />
+    <div class="tw-grow tw-overflow-hidden">
+      <slot :name="`${tabSelected}`">
+        <component :is="content" />
+      </slot>
     </div>
   </div>
 </template>

resources/jscomposition/cases/casesDetail/components/TaskTable.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="tw-w-full tw-space-y-3 tw-flex tw-flex-col tw-overflow-hidden">
+  <div class="tw-flex tw-flex-col tw-w-full tw-py-3 tw-overflow-hidden tw-space-y-3">
     <SortTable
       id="task-table"
       :columns="columnsConfig"
       :data="data"
-      class="tw-grow tw-overflow-y-scroll"
+      class="tw-grow tw-overflow-y-scroll tw-overflow-hidden"
       @changeFilter="onChangeFilter" />
 
     <Pagination

resources/jscomposition/cases/casesDetail/edit.js

@@ -1,12 +1,14 @@
 import Vue from "vue";
 import CaseDetail from "./components/CaseDetail.vue";
+import Tabs from "./components/Tabs.vue";
 import Timeline from "../../../js/components/Timeline.vue";
+import { CollapsableContainer } from "../../base";
 
 Vue.component("Timeline", Timeline);
 
 new Vue({
   el: "#case-detail",
-  components: { CaseDetail },
+  components: { CaseDetail, Tabs, CollapsableContainer },
   data() {
     return {
       activeTab: "pending",
@@ -18,25 +20,35 @@ new Vue({
         automaticLayout: true,
       },
       showJSONEditor: false,
-      data: data,
-      requestId: requestId,
-      request: request,
-      files: files,
+      data,
+      requestId,
+      request,
+      files,
       refreshTasks: 0,
-      canCancel: canCancel,
-      canViewPrint: canViewPrint,
+      canCancel,
+      canViewPrint,
       status: "ACTIVE",
       userRequested: [],
-      errorLogs: errorLogs,
+      errorLogs,
       disabled: false,
       retryDisabled: false,
       packages: [],
-      processId: processId,
-      canViewComments: canViewComments,
+      processId,
+      canViewComments,
       isObjectLoading: false,
       showTree: false,
       showTabs: true,
       showInfo: true,
+      tabDefault: "details",
+      tabs: [
+        {
+          name: "Details", href: "#details", current: "details", show: true, content: null,
+        },
+        {
+          name: "Comments", href: "#comments", current: "comments", show: true, content: null,
+        },
+      ],
+      headerModel: false,
     };
   },
   computed: {
@@ -202,7 +214,7 @@ new Vue({
     updateRequestData() {
       const data = JSON.parse(this.jsonData);
       ProcessMaker.apiClient.put(`requests/${this.requestId}`, {
-        data: data,
+        data,
       }).then(() => {
         this.fieldsToUpdate.splice(0);
         ProcessMaker.alert(this.$t("The request data was saved."), "success");
@@ -278,7 +290,7 @@ new Vue({
       }
     },
     okCancel() {
-      //single click
+      // single click
       if (this.disabled) {
         return;
       }
@@ -314,7 +326,8 @@ new Vue({
             ProcessMaker.alert(this.$t("Request Completed"), "success");
             window.location.reload();
           });
-        });
+        },
+      );
     },
     retryRequest() {
       const apiRequest = () => {
@@ -351,12 +364,13 @@ new Vue({
     rollback(errorTaskId, rollbackToName) {
       ProcessMaker.confirmModal(
         this.$t("Confirm"),
-        this.$t("Are you sure you want to rollback to the task @{{name}}? Warning! This request will continue as the current published process version.",
+        this.$t(
+          "Are you sure you want to rollback to the task @{{name}}? Warning! This request will continue as the current published process version.",
           { name: rollbackToName },
         ),
         "default",
         () => {
-          ProcessMaker.apiClient.post(`tasks/${errorTaskId}/rollback`).then(response => {
+          ProcessMaker.apiClient.post(`tasks/${errorTaskId}/rollback`).then((response) => {
             window.location.reload();
           });
         },