From a51fe264e5a1756bb8646934f798ef4e1d072096 Mon Sep 17 00:00:00 2001
From: Henry Jonas <hjonathan.sge@gmail.com>
Date: Fri, 27 Sep 2024 15:50:26 -0400
Subject: [PATCH 1/3] FOUR-18631: SPIKE: Review the comments Component

---
 .../base/ui/CollapsableContainer.vue          |  49 +++++++
 .../jscomposition/base/ui/SimplePopover.vue   | 120 ------------------
 resources/jscomposition/base/ui/index.js      |   6 +-
 .../casesDetail/components/CaseDetail.vue     |   8 +-
 .../cases/casesDetail/components/Tabs.vue     |  10 +-
 .../casesDetail/components/TaskTable.vue      |   4 +-
 .../jscomposition/cases/casesDetail/edit.js   |  16 ++-
 7 files changed, 79 insertions(+), 134 deletions(-)
 create mode 100644 resources/jscomposition/base/ui/CollapsableContainer.vue
 delete mode 100644 resources/jscomposition/base/ui/SimplePopover.vue

diff --git a/resources/jscomposition/base/ui/CollapsableContainer.vue b/resources/jscomposition/base/ui/CollapsableContainer.vue
new file mode 100644
index 0000000000..0e5cdf5d78
--- /dev/null
+++ b/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 group-hover:tw-bg-blue-300">
+          <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>
diff --git a/resources/jscomposition/base/ui/SimplePopover.vue b/resources/jscomposition/base/ui/SimplePopover.vue
deleted file mode 100644
index f5010f50ec..0000000000
--- a/resources/jscomposition/base/ui/SimplePopover.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<template>
-  <transition :name="animation">
-    <div
-      v-if="showModel"
-      class="tw-block tw-mt-1 tw-rounded-lg tw-absolute tw-z-10 tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-inset tw-ring-gray-300">
-      <slot></slot>
-    </div>
-  </transition>
-</template>
-
-<script>
-import { defineComponent, ref, computed, onMounted, onUnmounted } from "vue";
-
-export default defineComponent({
-  props: {
-    animation: {
-      type: String,
-      default: () => "fade",
-    },
-    show: {
-      type: Boolean,
-      default: () => false,
-    },
-  },
-  emits: ["input", "close"],
-  setup(props, { emit }) {
-    const showModel = computed(() => {
-      return props.show;
-    });
-
-    const addBodyListener = () => {
-      emit("close", true);
-    };
-
-    onMounted(() => {
-      document.body.addEventListener("click", addBodyListener);
-    });
-
-    onUnmounted(() => {
-      document.body.removeEventListener("click", addBodyListener);
-    });
-
-    return {
-      showModel,
-    };
-  },
-});
-</script>
-
-<style scoped>
-/* Animations */
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.1s;
-}
-.fade-enter,
-.fade-leave-to {
-  opacity: 0;
-}
-
-/* Slide-in-up animation*/
-.slide-in-up-enter-active,
-.slide-in-up-leave-active {
-  transition: all 0.5s;
-  transform: translateY(0);
-}
-.slide-in-up-enter,
-.slide-in-up-leave-to {
-  opacity: 0;
-  transform: translateY(20px);
-}
-
-/* Slide-in-right animation*/
-.slide-in-right-enter-active,
-.slide-in-right-leave-active {
-  transition: all 0.5s;
-  transform: translateX(0);
-}
-.slide-in-right-enter,
-.slide-in-right-leave-to {
-  opacity: 0;
-  transform: translateX(20px);
-}
-
-/* Slide-in-left animation*/
-.slide-in-left-enter-active,
-.slide-in-left-leave-active {
-  transition: all 0.5s;
-  transform: translateX(0);
-}
-.slide-in-left-enter,
-.slide-in-left-leave-to {
-  opacity: 0;
-  transform: translateX(-20px);
-}
-
-/* Scale animation*/
-.scale-enter-active,
-.scale-leave-active {
-  transition: all 0.5s;
-  transform: scale(1);
-}
-.scale-enter,
-.scale-leave-to {
-  opacity: 0;
-  transform: scale(0);
-}
-
-/* Rotate animation*/
-.rotate-enter-active,
-.rotate-leave-active {
-  transition: all 0.5s;
-  transform: scale(1) rotate(-360deg);
-}
-.rotate-enter,
-.rotate-leave-to {
-  opacity: 0;
-  transform: scale(0) rotate(360deg);
-}
-</style>
diff --git a/resources/jscomposition/base/ui/index.js b/resources/jscomposition/base/ui/index.js
index 73f3a8c79c..3ecdf6bdb9 100644
--- a/resources/jscomposition/base/ui/index.js
+++ b/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,
+};
diff --git a/resources/jscomposition/cases/casesDetail/components/CaseDetail.vue b/resources/jscomposition/cases/casesDetail/components/CaseDetail.vue
index 35f4511670..b568e843a3 100644
--- a/resources/jscomposition/cases/casesDetail/components/CaseDetail.vue
+++ b/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>
diff --git a/resources/jscomposition/cases/casesDetail/components/Tabs.vue b/resources/jscomposition/cases/casesDetail/components/Tabs.vue
index 8d1a8514bb..5c9cc509c6 100644
--- a/resources/jscomposition/cases/casesDetail/components/Tabs.vue
+++ b/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>
diff --git a/resources/jscomposition/cases/casesDetail/components/TaskTable.vue b/resources/jscomposition/cases/casesDetail/components/TaskTable.vue
index 5cd0f71eec..fd5689f016 100644
--- a/resources/jscomposition/cases/casesDetail/components/TaskTable.vue
+++ b/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
diff --git a/resources/jscomposition/cases/casesDetail/edit.js b/resources/jscomposition/cases/casesDetail/edit.js
index e8cb4cd9db..3187f35a13 100644
--- a/resources/jscomposition/cases/casesDetail/edit.js
+++ b/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",
@@ -37,6 +39,18 @@ new Vue({
       showTree: false,
       showTabs: true,
       showInfo: true,
+
+      tabDefault: 'details',
+      tabs : [
+        {
+          name: "Details", href: "#tasks", current: "details", show: true, content: null,
+        },
+        {
+          name: "Comments", href: "#comments", current: "comments", show: true, content: null,
+        },
+      ],
+      headerModel: false
+
     };
   },
   computed: {

From 0cce03499d7759b76294236d356deb117eeb87cc Mon Sep 17 00:00:00 2001
From: Henry Jonas <hjonathan.sge@gmail.com>
Date: Fri, 27 Sep 2024 15:54:57 -0400
Subject: [PATCH 2/3] FOUR-18631: SPIKE: Review the comments Component

---
 .../base/ui/CollapsableContainer.vue          |   2 +-
 resources/views/cases/edit.blade.php          | 154 +++++++++++++++++-
 2 files changed, 152 insertions(+), 4 deletions(-)

diff --git a/resources/jscomposition/base/ui/CollapsableContainer.vue b/resources/jscomposition/base/ui/CollapsableContainer.vue
index 0e5cdf5d78..ac6b97f0ce 100644
--- a/resources/jscomposition/base/ui/CollapsableContainer.vue
+++ b/resources/jscomposition/base/ui/CollapsableContainer.vue
@@ -4,7 +4,7 @@
     :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 group-hover:tw-bg-blue-300">
+        <div class="tw-transition tw-duration-250 tw-w-[2px] tw-h-full">
           <div
             :class="{
               'tw-visible' : collapse,
diff --git a/resources/views/cases/edit.blade.php b/resources/views/cases/edit.blade.php
index 17f9346c91..c3c0657790 100644
--- a/resources/views/cases/edit.blade.php
+++ b/resources/views/cases/edit.blade.php
@@ -1,4 +1,4 @@
-@extends('layouts.layout')
+@extends('layouts.layout',['content_margin' => '', 'overflow-auto' => ''])
 
 @section('title')
   {{ __('Case Detail') }}
@@ -15,8 +15,156 @@
 @endsection
 
 @section('content')
-<div id="case-detail" class="containe-fluid mr-3 ml-3 px-3 bg-light">
-  <case-detail></case-detail>
+<div id="case-detail" class="tw-p-4 tw-flex tw-overflow-hidden tw-space-x-2 tw-grow tw-h-full">
+    <case-detail class="tw-overflow-hidden tw-border tw-border-gray-200 tw-shadow-md tw-px-3
+      tw-flex-1 tw-bg-white tw-rounded-2xl">
+    </case-detail>
+
+    <collapsable-container class="tw-w-80">
+      <template>
+        <div class="tw-w-full tw-flex tw-border tw-border-gray-200 tw-shadow-md tw-px-3
+          tw-bg-white tw-rounded-2xl">
+            <Tabs
+              class="tw-w-full"
+              :tab-default="tabDefault"
+              :tabs="tabs" >
+
+              <template #details>
+                <ul class="tw-w-full tw-space-y-3 tw-py-3 tw-text-gray-500">
+                  @if ($canCancel == true && $request->status === 'ACTIVE')
+                    <li class="tw-flex tw-items-center tw-justify-center">
+                      <button type="button" class="tw-w-full tw-border tw-border-gray-300 tw-px-3 tw-py-2
+                        tw-shadow-sm tw-rounded-md" @click="onCancel" aria-haspopup="dialog">
+                        <i class="fas fa-ban"></i>  
+                        <span>{{ __('Cancel Request') }}</span>
+                      </button>
+                    </li>
+                  @endif
+
+                  <div :class="classStatusCard">
+                    <span style="margin:0; padding:0; line-height:1">@{{ __(statusLabel) }}</span>
+                  </div>
+
+                  <li class="tw-px-4 tw-py-3 tw-border-b tw-border-gray-300">
+                    <p class="section-title">@{{ __(labelDate) }}:</p>
+                    <i class="far fa-calendar-alt"></i>
+                    <small>@{{ moment(statusDate).format() }}</small>
+                  </li>
+
+                  @if ($request->user_id)
+                    <li class="tw-px-4 tw-py-3 tw-border-b tw-border-gray-300">
+                      <p class="section-title">{{ __('Requested By') }}:</p>
+                      <avatar-image
+                        v-if="userRequested"
+                        size="32"
+                        class="d-inline-flex pull-left align-items-center"
+                        :input-data="requestBy"
+                        display-name="true"
+                      ></avatar-image>
+                      <span v-if="!userRequested">{{ __('Web Entry') }}</span>
+                    </li>
+                  @endif
+
+                  <li class="tw-px-4 tw-py-3 tw-border-b tw-border-gray-300">
+                    <p class="section-title">{{ __('Process') }}</p>
+                    {{ $request->name }}
+                    <p class="launchpad-link">
+                      <a href="{{route('process.browser.index', [$request->process_id])}}">
+                        {{ __('Open Process Launchpad') }}
+                      </a>
+                    </p>
+                  </li>
+                  
+                  @if ($request->participants->count())
+                    <li class="tw-px-4 tw-py-3 tw-border-b tw-border-gray-300">
+                      <p class="section-title">{{ __('Participants') }}:</p>
+                      <avatar-image
+                        size="32"
+                        class="d-inline-flex pull-left align-items-center"
+                        :input-data="participants"
+                        hide-name="true"
+                      ></avatar-image>
+                    </li>
+                  @endif
+
+                  @if ($canManuallyComplete == true)
+                    <li class="tw-px-4 tw-py-3 tw-border-b tw-border-gray-300">
+                      <p class="section-title">{{ __('Manually Complete Request') }}</p>
+                      <button
+                        type="button"
+                        class="btn btn-outline-success btn-block"
+                        data-toggle="modal"
+                        @click="completeRequest"
+                      >
+                        <i class="fas fa-stop-circle"></i> {{ __('Complete') }}
+                      </button>
+                    </li>
+                  @endif
+                  @if ($canRetry === true)
+                    <li class="tw-px-4 tw-py-3 tw-border-b tw-border-gray-300">
+                      <p class="section-title">{{ __('Retry Request') }}</p>
+                      <button id="retryRequestButton" type="button" class="btn btn-outline-info btn-block"
+                        data-toggle="modal" :disabled="retryDisabled" @click="retryRequest">
+                        <i class="fas fa-sync"></i> {{ __('Retry') }}
+                      </button>
+                    </li>
+                  @endif
+                  @if ($eligibleRollbackTask)
+                    @can('rollback', $errorTask)
+                      <li
+                        v-if="{{ $isProcessManager ? 'true' : 'false' }} ||
+                          {{ Auth::user()->is_administrator ? 'true' : 'false' }}"
+                        class="list-group-item"
+                      >
+                        <p class="section-title">{{ __('Rollback Request') }}</p>
+                          <button
+                            id="retryRequestButton"
+                            type="button"
+                            class="btn btn-outline-info btn-block"
+                            data-toggle="modal"
+                            @click="rollback({{ $errorTask->id }}, '{{ $eligibleRollbackTask->element_name }}')"
+                          >
+                            <i class="fas fa-undo"></i> {{ __('Rollback') }}
+                          </button>
+                          <small>{{ __('Rollback to task') }}: <b>{{ $eligibleRollbackTask->element_name }}</b> ({{ $eligibleRollbackTask->element_id }})</small>
+                        </li>
+                      @endcan
+                    @endif
+                    @if ($request->parentRequest)
+                      <li class="list-group-item">
+                        <p class="section-title">{{ __('Parent Request') }}</p>
+                        <i :class="requestStatusClass('{{ $request->parentRequest->status }}')"></i>
+                        <a href="/requests/{{ $request->parentRequest->getKey() }}">{{ $request->parentRequest->name }}</a>
+                      </li>
+                    @endif
+                    @if (count($request->childRequests))
+                      <li class="list-group-item">
+                        <p class="section-title">{{ __('Child Requests') }}</p>
+                        @foreach ($request->childRequests as $childRequest)
+                          <div>
+                            <i :class="requestStatusClass('{{ $childRequest->status }}')"></i>
+                            <a href="/requests/{{ $childRequest->getKey() }}">{{ $childRequest->name }}</a>
+                          </div>
+                        @endforeach
+                      </li>
+                    @endif
+                </ul>
+              </template>
+
+              <template #comments v-if="panCommentInVueOptionsComponents">
+                <comment-container
+                  class="tw-grow tw-overflow-hidden"
+                  :commentable_id="requestId"
+                  commentable_type="{{ get_class($request) }}"
+                  name="{{ $request->name }}"
+                  :readonly="request.status === 'COMPLETED'"
+                />
+              </template>
+            </Tabs>
+        </div>
+      </template>
+    </collapsable-container>
+
 </div>
 @endsection
 

From a40ba16c4cca7dd0dad3b26f017f5a0b330bf5c7 Mon Sep 17 00:00:00 2001
From: Henry Jonas <hjonathan.sge@gmail.com>
Date: Mon, 30 Sep 2024 09:16:52 -0400
Subject: [PATCH 3/3] FOUR-18631: SPIKE: Review the comments Component

---
 .../base/ui/CollapsableContainer.vue          |  2 +-
 .../jscomposition/cases/casesDetail/edit.js   | 42 +++++++++----------
 2 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/resources/jscomposition/base/ui/CollapsableContainer.vue b/resources/jscomposition/base/ui/CollapsableContainer.vue
index ac6b97f0ce..b3fc74dcae 100644
--- a/resources/jscomposition/base/ui/CollapsableContainer.vue
+++ b/resources/jscomposition/base/ui/CollapsableContainer.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="tw-flex tw-transition-all tw-duration-500"
-    :class="{ 'tw-w-0' : collapse}">
+    :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">
diff --git a/resources/jscomposition/cases/casesDetail/edit.js b/resources/jscomposition/cases/casesDetail/edit.js
index 3187f35a13..50e0eae0fc 100644
--- a/resources/jscomposition/cases/casesDetail/edit.js
+++ b/resources/jscomposition/cases/casesDetail/edit.js
@@ -8,7 +8,7 @@ Vue.component("Timeline", Timeline);
 
 new Vue({
   el: "#case-detail",
-  components: { CaseDetail, Tabs, CollapsableContainer},
+  components: { CaseDetail, Tabs, CollapsableContainer },
   data() {
     return {
       activeTab: "pending",
@@ -20,37 +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 : [
+      tabDefault: "details",
+      tabs: [
         {
-          name: "Details", href: "#tasks", current: "details", show: true, content: null,
+          name: "Details", href: "#details", current: "details", show: true, content: null,
         },
         {
           name: "Comments", href: "#comments", current: "comments", show: true, content: null,
         },
       ],
-      headerModel: false
-
+      headerModel: false,
     };
   },
   computed: {
@@ -216,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");
@@ -292,7 +290,7 @@ new Vue({
       }
     },
     okCancel() {
-      //single click
+      // single click
       if (this.disabled) {
         return;
       }
@@ -328,7 +326,8 @@ new Vue({
             ProcessMaker.alert(this.$t("Request Completed"), "success");
             window.location.reload();
           });
-        });
+        },
+      );
     },
     retryRequest() {
       const apiRequest = () => {
@@ -365,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();
           });
         },