Feature/four 14245

resources/js/common/PMColumnFilterPopoverCommonMixin.js

@@ -2,6 +2,10 @@ import { get, cloneDeep } from "lodash";
 
 const PMColumnFilterCommonMixin = {
   props: {
+    autosaveFilter: {
+      type: Boolean,
+      default: true
+    },
     advancedFilterProp: {
       type: Object,
       default: null
@@ -55,7 +59,9 @@ const PMColumnFilterCommonMixin = {
         order
       };
 
-      ProcessMaker.apiClient.put(url, config);
+      if (!this.autosaveFilter) {
+        ProcessMaker.apiClient.put(url, config);
+      }
       window.ProcessMaker.advanced_filter = config;
       window.ProcessMaker.EventBus.$emit("advanced-filter-updated");
     },

resources/js/components/PMTable.vue

@@ -67,7 +67,7 @@
     methods: {
       tableRowMouseover(row, rowIndex) {
         let container = this.$refs.filterTable.$el;
-        let scrolledWidth = container.scrollWidth - container.clientWidth;
+        let scrolledWidth = container.scrollWidth - container.clientWidth - container.scrollLeft;
         this.$emit('onRowMouseover', row, scrolledWidth, rowIndex);
       },
       getSlotName(field) {

resources/js/processes-catalogue/components/ProcessTab.vue

@@ -4,23 +4,33 @@
       id="tabs-custom"
       pills
       lazy
-    >
+      @input="onTabChanged"
+      >
       <b-tab
         :title="$t('My Requests')"
         active
-      >
-        <request-tab
-          :currentUser="currentUser"
-          :process="process"
-        ></request-tab>
+        >
+        <requests-listing
+          ref="requestList"
+          :filter="filterRequest"
+          :columns="columnsRequest"
+          :pmql="fullPmqlRequest"
+          :autosaveFilter="false"
+          ></requests-listing>
       </b-tab>
       <b-tab
         :title="$t('My Tasks')"
-      >
-        <task-tab
-          :currentUser="currentUser"
-          :process="process"
-        ></task-tab>
+        >
+        <tasks-list
+          ref="taskList"
+          :filter="filterTask"
+          :pmql="fullPmqlTask" 
+          :columns="columnsTask"
+          :disable-tooltip="false"
+          :disable-quick-fill-tooltip="false"
+          :fetch-on-created="false"
+          :autosaveFilter="false"
+          ></tasks-list>
       </b-tab>
     </b-tabs>
   </div>
@@ -29,10 +39,14 @@
 <script>
 import RequestTab from "./RequestTab.vue";
 import TaskTab from "./TaskTab.vue";
+import RequestsListing from "../../requests/components/RequestsListing.vue";
+import TasksList from "../../tasks/components/TasksList.vue";
 export default {
   components: {
     RequestTab,
     TaskTab,
+      RequestsListing,
+      TasksList
   },
   props: {
     currentUser: {
@@ -42,6 +56,65 @@ export default {
       type: Object,
     },
   },
+  data() {
+    return {
+      filterRequest: "",
+      fullPmqlRequest: `(user_id = ${ProcessMaker.user.id}) AND (process_id = ${this.process.id})`,
+      columnsRequest: [
+        {
+          label: "Case #",
+          field: "case_number",
+          sortable: true,
+          default: true,
+          width: 80
+        },
+        {
+          label: "Case title",
+          field: "case_title",
+          sortable: true,
+          default: true,
+          truncate: true,
+          width: 220
+        },
+        {
+          label: "Status",
+          field: "status",
+          sortable: true,
+          default: true,
+          width: 100,
+          filter_subject: {type: 'Status'}
+        },
+        {
+          label: "Started",
+          field: "initiated_at",
+          format: "datetime",
+          sortable: true,
+          default: true,
+          width: 160
+        },
+        {
+          label: "Completed",
+          field: "completed_at",
+          format: "datetime",
+          sortable: true,
+          default: true,
+          width: 160
+        },
+      ],
+      filterTask: "",
+      fullPmqlTask: `(user_id = ${ProcessMaker.user.id}) AND (process_id = ${this.process.id})`,
+      columnsTask: window.Processmaker.defaultColumns || null
+    };
+  },
+  methods: {
+    onTabChanged(activeTabIndex) {
+      if (activeTabIndex === 1) {
+        this.$nextTick(() => {
+          this.$refs.taskList.fetch();
+        });
+      }
+    }
+  }
 };
 </script>
 <style>

resources/js/processes-catalogue/components/ProcessesCatalogue.vue

@@ -383,10 +383,9 @@ export default {
 }
 .processes-info {
   width: 100%;
-  margin-right: 16px;
+  margin-right: -16px;
   height: calc(100vh - 145px);
-  padding-left: 32px;
-
+  overflow-x: hidden;
   @media (max-width: $lp-breakpoint) {
     padding-left: 0;
   }

resources/js/tasks/components/QuickFillPreview.vue

@@ -139,18 +139,18 @@
           <template v-slot:tooltip="{ tooltipRowData, previewTasks }">
             <b-button
               v-if="propFromButton === 'previewTask'"
-              class="icon-button"
               :aria-label="$t('Quick fill Preview')"
               variant="light"
+              size="sm"
               @click="previewTasks(tooltipRowData, 93, 'previewTask')"
             >
               <i class="fas fa-eye" />
             </b-button>
             <b-button
               v-if="propFromButton === 'fullTask'"
-              class="icon-button"
               :aria-label="$t('Quick fill Preview')"
               variant="light"
+              size="sm"
               @click="
                 previewTasks(tooltipRowData, 50, 'fullTask');
                 setTask();
@@ -160,9 +160,9 @@
             </b-button>
             <b-button
               v-if="propFromButton === 'inboxRules'"
-              class="icon-button"
               :aria-label="$t('Quick fill Preview')"
               variant="light"
+              size="sm"
               @click="previewTasks(tooltipRowData, 50, 'inboxRules')"
             >
               <i class="fas fa-eye" />

resources/js/tasks/components/TaskListRowButtons.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="pm-task-row-buttons">
+    <PMFloatingButtons ref="pmFloatingButtons">
+      <template v-slot:content>
+        <slot name="body">
+          <span v-for="(button, index) in buttons" :key="index">
+            <b-button :id="button.id + rowIndex"
+                      v-if="button.show"
+                      aria-label="button.title"
+                      @click="onClick(button)"
+                      variant="light"
+                      size="sm">
+              <i v-if="button.icon" 
+                 :class="button.icon"/>
+              <img v-else-if="button.imgSrc"
+                   :src="button.imgSrc"
+                   :alt="button.title"/>
+            </b-button>
+            <b-tooltip
+              :target="button.id + rowIndex"
+              :title="button.title"
+              custom-class="task-hover-tooltip"
+              placement="bottom"
+              :delay="0"
+              boundary="viewport"
+              :no-fade="true"
+              />
+            <div v-if="index < buttons.length - 1 && button.show" 
+                 class="task-vertical-separator">
+            </div>
+          </span>
+        </slot>
+      </template>
+    </PMFloatingButtons>
+  </div>
+</template>
+
+<script>
+  import PMFloatingButtons from "../../components/PMFloatingButtons.vue";
+  export default {
+    components: {
+      PMFloatingButtons
+    },
+    props: {
+      buttons: null,
+      row: null,
+      rowIndex: null,
+      colIndex: null,
+      showButtons: null
+    },
+    methods: {
+      show() {
+        this.triggerFloatingButtons(() => {
+          if (!this.showButtons) {
+            return;
+          }
+          this.$refs.pmFloatingButtons.show();
+        });
+      },
+      close() {
+        this.triggerFloatingButtons(() => {
+          this.$refs.pmFloatingButtons.close();
+        });
+      },
+      setMargin(size) {
+        this.$refs.pmFloatingButtons.$el.style.marginRight = size + "px";
+      },
+      disableFloatingButtons(state) {
+        this.$root["inbox-rule-row-button-floating-disable"] = state;
+      },
+      triggerFloatingButtons(callback) {
+        if (this.$root["inbox-rule-row-button-floating-disable"] === true) {
+          return;
+        }
+        callback();
+      },
+      onClick(button) {
+        this.disableFloatingButtons(false);
+        button.click(this.row);
+      }
+    }
+  };
+</script>
+
+<style scoped>
+  .pm-task-row-buttons {
+    position: relative;
+    display: math;
+  }
+  .task-vertical-separator {
+    display: inline;
+    border-left: 1px solid #ccc;
+    margin-left: 4px;
+    margin-right: 4px;
+    vertical-align: middle;
+  }
+</style>
+<style>
+  .task-hover-tooltip {
+    opacity: 1 !important;
+  }
+  .task-hover-tooltip .tooltip-inner {
+    background-color: #F2F6F7;
+    color: #556271;
+    box-shadow: -5px 5px 5px rgba(0, 0, 0, 0.3);
+    border-radius: 7px;
+    padding: 9px 12px 9px 12px;
+    border: 1px solid #CDDDEE
+  }
+  .task-hover-tooltip .arrow::before {
+    border-bottom-color: #CDDDEE !important;
+  }
+  .task-hover-tooltip .arrow::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    border-width: 0 .4rem .4rem;
+    transform: translateY(3px);
+    border-color: transparent;
+    border-style: solid;
+    border-bottom-color: #F2F6F7;
+  }
+</style>