[SUMMER] feature/FOUR-15725 Improve Tables View for tasks and cases

resources/js/common/PMColumnFilterPopoverCommonMixin.js

@@ -266,7 +266,7 @@ const PMColumnFilterCommonMixin = {
         this.tableHeaders[i].sortDesc = false;
       }
       for (let i in this.tableHeaders) {
-        if (this.tableHeaders[i].field === this.orderBy) {
+        if (this.orderBy.endsWith(this.tableHeaders[i].field)) {
           let sort = this.sortOrder[0].direction;
           this.tableHeaders[i].sortAsc = (sort.toLowerCase() === "asc");
           this.tableHeaders[i].sortDesc = (sort.toLowerCase() === "desc");

resources/js/components/PMColumnFilterPopover/PMColumnFilterIconAsc.vue

@@ -1,5 +1,5 @@
 <template>
-  <svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M7.50002 2H9.50002C9.63263 2 9.75981 1.94732 9.85358 1.85355C9.94735 1.75979 10 1.63261 10 1.5V0.5C10 0.367392 9.94735 0.240215 9.85358 0.146447C9.75981 0.0526784 9.63263 0 9.50002 0H7.50002C7.36742 0 7.24024 0.0526784 7.14647 0.146447C7.0527 0.240215 7.00002 0.367392 7.00002 0.5V1.5C7.00002 1.63261 7.0527 1.75979 7.14647 1.85355C7.24024 1.94732 7.36742 2 7.50002 2ZM7.50002 6H11.5C11.6326 6 11.7598 5.94732 11.8536 5.85355C11.9473 5.75979 12 5.63261 12 5.5V4.5C12 4.36739 11.9473 4.24021 11.8536 4.14645C11.7598 4.05268 11.6326 4 11.5 4H7.50002C7.36742 4 7.24024 4.05268 7.14647 4.14645C7.0527 4.24021 7.00002 4.36739 7.00002 4.5V5.5C7.00002 5.63261 7.0527 5.75979 7.14647 5.85355C7.24024 5.94732 7.36742 6 7.50002 6ZM15.5 12H7.50002C7.36742 12 7.24024 12.0527 7.14647 12.1464C7.0527 12.2402 7.00002 12.3674 7.00002 12.5V13.5C7.00002 13.6326 7.0527 13.7598 7.14647 13.8536C7.24024 13.9473 7.36742 14 7.50002 14H15.5C15.6326 14 15.7598 13.9473 15.8536 13.8536C15.9473 13.7598 16 13.6326 16 13.5V12.5C16 12.3674 15.9473 12.2402 15.8536 12.1464C15.7598 12.0527 15.6326 12 15.5 12ZM7.50002 10H13.5C13.6326 10 13.7598 9.94732 13.8536 9.85355C13.9473 9.75979 14 9.63261 14 9.5V8.5C14 8.36739 13.9473 8.24021 13.8536 8.14645C13.7598 8.05268 13.6326 8 13.5 8H7.50002C7.36742 8 7.24024 8.05268 7.14647 8.14645C7.0527 8.24021 7.00002 8.36739 7.00002 8.5V9.5C7.00002 9.63261 7.0527 9.75979 7.14647 9.85355C7.24024 9.94732 7.36742 10 7.50002 10ZM5.50002 10H4.00002V0.5C4.00002 0.367392 3.94735 0.240215 3.85358 0.146447C3.75981 0.0526784 3.63263 0 3.50002 0H2.50002C2.36742 0 2.24024 0.0526784 2.14647 0.146447C2.0527 0.240215 2.00002 0.367392 2.00002 0.5V10H0.500024C0.0565866 10 -0.167788 10.5387 0.147212 10.8534L2.64721 13.8534C2.74097 13.9471 2.8681 13.9998 3.00065 13.9998C3.1332 13.9998 3.26033 13.9471 3.35409 13.8534L5.85409 10.8534C6.16721 10.5394 5.9444 10 5.50002 10Z" fill="#6A7888"/>
+  <svg width="16" height="14" viewBox="0 0 16 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7.50002 2H9.50002C9.63263 2 9.75981 1.94732 9.85358 1.85355C9.94735 1.75979 10 1.63261 10 1.5V0.5C10 0.367392 9.94735 0.240215 9.85358 0.146447C9.75981 0.0526784 9.63263 0 9.50002 0H7.50002C7.36742 0 7.24024 0.0526784 7.14647 0.146447C7.0527 0.240215 7.00002 0.367392 7.00002 0.5V1.5C7.00002 1.63261 7.0527 1.75979 7.14647 1.85355C7.24024 1.94732 7.36742 2 7.50002 2ZM7.50002 6H11.5C11.6326 6 11.7598 5.94732 11.8536 5.85355C11.9473 5.75979 12 5.63261 12 5.5V4.5C12 4.36739 11.9473 4.24021 11.8536 4.14645C11.7598 4.05268 11.6326 4 11.5 4H7.50002C7.36742 4 7.24024 4.05268 7.14647 4.14645C7.0527 4.24021 7.00002 4.36739 7.00002 4.5V5.5C7.00002 5.63261 7.0527 5.75979 7.14647 5.85355C7.24024 5.94732 7.36742 6 7.50002 6ZM15.5 12H7.50002C7.36742 12 7.24024 12.0527 7.14647 12.1464C7.0527 12.2402 7.00002 12.3674 7.00002 12.5V13.5C7.00002 13.6326 7.0527 13.7598 7.14647 13.8536C7.24024 13.9473 7.36742 14 7.50002 14H15.5C15.6326 14 15.7598 13.9473 15.8536 13.8536C15.9473 13.7598 16 13.6326 16 13.5V12.5C16 12.3674 15.9473 12.2402 15.8536 12.1464C15.7598 12.0527 15.6326 12 15.5 12ZM7.50002 10H13.5C13.6326 10 13.7598 9.94732 13.8536 9.85355C13.9473 9.75979 14 9.63261 14 9.5V8.5C14 8.36739 13.9473 8.24021 13.8536 8.14645C13.7598 8.05268 13.6326 8 13.5 8H7.50002C7.36742 8 7.24024 8.05268 7.14647 8.14645C7.0527 8.24021 7.00002 8.36739 7.00002 8.5V9.5C7.00002 9.63261 7.0527 9.75979 7.14647 9.85355C7.24024 9.94732 7.36742 10 7.50002 10ZM5.50002 10H4.00002V0.5C4.00002 0.367392 3.94735 0.240215 3.85358 0.146447C3.75981 0.0526784 3.63263 0 3.50002 0H2.50002C2.36742 0 2.24024 0.0526784 2.14647 0.146447C2.0527 0.240215 2.00002 0.367392 2.00002 0.5V10H0.500024C0.0565866 10 -0.167788 10.5387 0.147212 10.8534L2.64721 13.8534C2.74097 13.9471 2.8681 13.9998 3.00065 13.9998C3.1332 13.9998 3.26033 13.9471 3.35409 13.8534L5.85409 10.8534C6.16721 10.5394 5.9444 10 5.50002 10Z"/>
   </svg>
 </template>

resources/js/components/PMColumnFilterPopover/PMColumnFilterIconDesc.vue

@@ -1,5 +1,5 @@
 <template>
-  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M9.49996 13H7.49996C7.36735 13 7.24018 13.0527 7.14641 13.1464C7.05264 13.2402 6.99996 13.3674 6.99996 13.5V14.5C6.99996 14.6326 7.05264 14.7598 7.14641 14.8536C7.24018 14.9473 7.36735 15 7.49996 15H9.49996C9.63257 15 9.75975 14.9473 9.85351 14.8536C9.94728 14.7598 9.99996 14.6326 9.99996 14.5V13.5C9.99996 13.3674 9.94728 13.2402 9.85351 13.1464C9.75975 13.0527 9.63257 13 9.49996 13ZM0.499961 5H1.99996V14.5C1.99996 14.6326 2.05264 14.7598 2.14641 14.8536C2.24018 14.9473 2.36735 15 2.49996 15H3.49996C3.63257 15 3.75975 14.9473 3.85351 14.8536C3.94728 14.7598 3.99996 14.6326 3.99996 14.5V5H5.49996C5.94402 5 6.16809 4.46125 5.8534 4.14656L3.3534 1.14656C3.25964 1.05287 3.13251 1.00023 2.99996 1.00023C2.86741 1.00023 2.74028 1.05287 2.64652 1.14656L0.146524 4.14656C-0.167226 4.46063 0.0552737 5 0.499961 5ZM13.5 5H7.49996C7.36735 5 7.24018 5.05268 7.14641 5.14645C7.05264 5.24021 6.99996 5.36739 6.99996 5.5V6.5C6.99996 6.63261 7.05264 6.75979 7.14641 6.85355C7.24018 6.94732 7.36735 7 7.49996 7H13.5C13.6326 7 13.7597 6.94732 13.8535 6.85355C13.9473 6.75979 14 6.63261 14 6.5V5.5C14 5.36739 13.9473 5.24021 13.8535 5.14645C13.7597 5.05268 13.6326 5 13.5 5ZM11.5 9H7.49996C7.36735 9 7.24018 9.05268 7.14641 9.14645C7.05264 9.24021 6.99996 9.36739 6.99996 9.5V10.5C6.99996 10.6326 7.05264 10.7598 7.14641 10.8536C7.24018 10.9473 7.36735 11 7.49996 11H11.5C11.6326 11 11.7597 10.9473 11.8535 10.8536C11.9473 10.7598 12 10.6326 12 10.5V9.5C12 9.36739 11.9473 9.24021 11.8535 9.14645C11.7597 9.05268 11.6326 9 11.5 9ZM15.5 1H7.49996C7.36735 1 7.24018 1.05268 7.14641 1.14645C7.05264 1.24021 6.99996 1.36739 6.99996 1.5V2.5C6.99996 2.63261 7.05264 2.75979 7.14641 2.85355C7.24018 2.94732 7.36735 3 7.49996 3H15.5C15.6326 3 15.7597 2.94732 15.8535 2.85355C15.9473 2.75979 16 2.63261 16 2.5V1.5C16 1.36739 15.9473 1.24021 15.8535 1.14645C15.7597 1.05268 15.6326 1 15.5 1Z" fill="#6A7888"/>
+  <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9.49996 13H7.49996C7.36735 13 7.24018 13.0527 7.14641 13.1464C7.05264 13.2402 6.99996 13.3674 6.99996 13.5V14.5C6.99996 14.6326 7.05264 14.7598 7.14641 14.8536C7.24018 14.9473 7.36735 15 7.49996 15H9.49996C9.63257 15 9.75975 14.9473 9.85351 14.8536C9.94728 14.7598 9.99996 14.6326 9.99996 14.5V13.5C9.99996 13.3674 9.94728 13.2402 9.85351 13.1464C9.75975 13.0527 9.63257 13 9.49996 13ZM0.499961 5H1.99996V14.5C1.99996 14.6326 2.05264 14.7598 2.14641 14.8536C2.24018 14.9473 2.36735 15 2.49996 15H3.49996C3.63257 15 3.75975 14.9473 3.85351 14.8536C3.94728 14.7598 3.99996 14.6326 3.99996 14.5V5H5.49996C5.94402 5 6.16809 4.46125 5.8534 4.14656L3.3534 1.14656C3.25964 1.05287 3.13251 1.00023 2.99996 1.00023C2.86741 1.00023 2.74028 1.05287 2.64652 1.14656L0.146524 4.14656C-0.167226 4.46063 0.0552737 5 0.499961 5ZM13.5 5H7.49996C7.36735 5 7.24018 5.05268 7.14641 5.14645C7.05264 5.24021 6.99996 5.36739 6.99996 5.5V6.5C6.99996 6.63261 7.05264 6.75979 7.14641 6.85355C7.24018 6.94732 7.36735 7 7.49996 7H13.5C13.6326 7 13.7597 6.94732 13.8535 6.85355C13.9473 6.75979 14 6.63261 14 6.5V5.5C14 5.36739 13.9473 5.24021 13.8535 5.14645C13.7597 5.05268 13.6326 5 13.5 5ZM11.5 9H7.49996C7.36735 9 7.24018 9.05268 7.14641 9.14645C7.05264 9.24021 6.99996 9.36739 6.99996 9.5V10.5C6.99996 10.6326 7.05264 10.7598 7.14641 10.8536C7.24018 10.9473 7.36735 11 7.49996 11H11.5C11.6326 11 11.7597 10.9473 11.8535 10.8536C11.9473 10.7598 12 10.6326 12 10.5V9.5C12 9.36739 11.9473 9.24021 11.8535 9.14645C11.7597 9.05268 11.6326 9 11.5 9ZM15.5 1H7.49996C7.36735 1 7.24018 1.05268 7.14641 1.14645C7.05264 1.24021 6.99996 1.36739 6.99996 1.5V2.5C6.99996 2.63261 7.05264 2.75979 7.14641 2.85355C7.24018 2.94732 7.36735 3 7.49996 3H15.5C15.6326 3 15.7597 2.94732 15.8535 2.85355C15.9473 2.75979 16 2.63261 16 2.5V1.5C16 1.36739 15.9473 1.24021 15.8535 1.14645C15.7597 1.05268 15.6326 1 15.5 1Z"/>
   </svg>
 </template>

resources/js/components/PMColumnFilterPopover/PMColumnFilterIconThreeDots.vue

@@ -1,5 +1,27 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
-    <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/>
-  </svg>
+  <span>
+    <svg v-if="!columnSortAsc && !columnSortDesc && !filterApplied" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
+      <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/>
+    </svg>
+    <PMColumnFilterIconAsc v-if="columnSortAsc"></PMColumnFilterIconAsc>
+    <PMColumnFilterIconDesc v-if="columnSortDesc"></PMColumnFilterIconDesc>
+    <i v-if="filterApplied" class="fas fa-filter"></i>
+  </span>
 </template>
+<script>
+
+import PMColumnFilterIconAsc from './PMColumnFilterIconAsc.vue';
+import PMColumnFilterIconDesc from './PMColumnFilterIconDesc.vue';
+
+export default {
+  components: {
+    PMColumnFilterIconAsc,
+    PMColumnFilterIconDesc
+  },
+  props: [
+    "columnSortAsc",
+    "columnSortDesc",
+    "filterApplied",
+  ],
+};
+</script>

resources/js/components/PMColumnFilterPopover/PMColumnFilterPopover.vue

@@ -4,7 +4,11 @@
               variant="link"
               size="sm"
               class="pm-filter-popover-button">
-      <PMColumnFilterIconThreeDots></PMColumnFilterIconThreeDots>
+      <PMColumnFilterIconThreeDots
+        :columnSortAsc="columnSortAsc"
+        :columnSortDesc="columnSortDesc"
+        :filterApplied="filterApplied"
+      />
     </b-button>
     <b-popover :container="container"
                :boundary="boundary"
@@ -40,9 +44,24 @@
   export default {
     components: {
       PMColumnFilterForm,
-      PMColumnFilterIconThreeDots
+      PMColumnFilterIconThreeDots,
     },
-    props: ["container", "boundary", "id", "type", "value", "format", "formatRange", "operators", "viewConfig", "sort", "hideSortingButtons"],
+    props: [
+      "container",
+      "boundary",
+      "id",
+      "type",
+      "value",
+      "format",
+      "formatRange",
+      "operators",
+      "viewConfig",
+      "sort",
+      "hideSortingButtons",
+      "columnSortAsc",
+      "columnSortDesc",
+      "filterApplied",
+    ],
     data() {
       return {
         popoverShow: false

resources/js/components/shared/FilterTable.vue

@@ -21,7 +21,8 @@
             :id="`${tableName}-column-${index}`"
             :key="index"
             class="pm-table-ellipsis-column"
-            :class="{ 'pm-table-filter-applied': column.filterApplied }"
+            :class="{ 'pm-table-filter-applied': column.filterApplied || column.sortAsc || column.sortDesc }"
+            :style="{ width: column.fixed_width + 'px' }"
           >
             <div
               class="pm-table-column-header"
@@ -37,7 +38,8 @@
             <div
               v-if="index !== visibleHeaders.length - 1"
               class="pm-table-column-resizer"
-              @mousedown="startResize($event, index)"
+              :class="{ 'resizable': column.resizable === undefined || column.resizable }"
+              @mousedown="column.resizable === undefined || column.resizable ? startResize($event, index) : null"
             />
             <b-tooltip
               v-if="column.tooltip"
@@ -74,6 +76,7 @@
           <slot :name="`row-${rowIndex}`">
             <td
               v-for="(header, index) in visibleHeaders"
+              :class="{ 'pm-table-filter-applied-tbody': column.sortAsc || column.sortDesc }"
               :key="index"
             >
               <template v-if="containsHTML(getNestedPropertyValue(row, header))">
@@ -301,9 +304,12 @@ export default {
   transform: translateY(-50%);
   height: 85%;
   width: 10px;
-  cursor: col-resize;
+  cursor: default;
   border-right: 1px solid rgba(0, 0, 0, 0.125);
 }
+.pm-table-column-resizer.resizable {
+  cursor: col-resize;
+}
 .pm-table-filter {
   width: 100%;
   max-height: 400px;
@@ -321,12 +327,17 @@ export default {
   height: 56px;
 }
 .pm-table-filter th:hover {
-  background-color: #FAFBFC;
+  background-color: #F2F8FE;
   color: #1572C2;
 }
 .pm-table-filter tbody tr:hover {
-  background-color: #FAFBFC;
-  color: #1572C2;
+  background-color: #EFF5FB;
+}
+.pm-table-filter tbody tr a {
+  color: #566877;
+}
+.pm-table-filter tbody tr a:hover {
+  color: #1990FF;
 }
 .pm-table-filter thead {
   position: sticky;
@@ -358,6 +369,10 @@ export default {
   opacity: 0;
   visibility: hidden;
 }
+.pm-table-filter-applied .pm-table-filter-button {
+  opacity: 1;
+  visibility: visible;
+}
 .pm-table-ellipsis-column:hover .pm-table-filter-button {
   opacity: 1;
   visibility: visible;
@@ -401,26 +416,38 @@ export default {
   color: #1572C2;
   background-color: #F2F8FE !important;
 }
+.pm-table-filter-applied-tbody {
+  background-color: rgba(247, 249, 251, 1) !important;
+}
 .pm-table-unread-row {
-  font-weight: bold;
+  background-color: #FFFDEA;
 }
 .status-success {
-  background-color: rgba(78, 160, 117, 0.2);
-  color: rgba(78, 160, 117, 1);
+  background-color: rgba(200, 240, 207, 1);
+  color: rgba(0, 0, 0, 0.75);
   width: 100px;
   border-radius: 5px;
+  padding: 7px;
 }
 .status-danger {
-  background-color:rgba(237, 72, 88, 0.2);
-  color: rgba(237, 72, 88, 1);
+  background-color:rgba(255, 199, 199, 1);
+  color: rgba(0, 0, 0, 0.75);
   width: 100px;
   border-radius: 5px;
+  padding: 7px;
 }
 .status-primary {
-  background: rgba(21, 114, 194, 0.2);
-  color: rgba(21, 114, 194, 1);
+  background: rgba(184, 220, 247, 1);
+  color: rgba(0, 0, 0, 0.75);
   width: 100px;
   border-radius: 5px;
+  padding: 7px;
+}
+.status-warning {
+  background: rgba(249, 232, 195, 1);
+  color: rgba(0, 0, 0, 0.75);
+  border-radius: 5px;
+  padding: 7px;
 }
 @-moz-document url-prefix() {
   .pm-table-truncate {