From bfb957ea5a1dd10ca096bc41b1eda5cc970cfed7 Mon Sep 17 00:00:00 2001
From: Henry Jordan <jonathan.quispe@processmaker.com>
Date: Thu, 8 Jul 2021 15:00:07 +0000
Subject: [PATCH] update Cards

---
 .../dataViews/vueCardView/VueCard.vue         |  50 +++++
 .../dataViews/vueCardView/VueCardView.vue     |  30 ++-
 .../vueCardView/VueCardViewMixins.js          |   0
 .../js/components/headers/MultiviewHeader.vue |  66 ++----
 resources/assets/js/home/Home.vue             |   2 +-
 resources/assets/js/home/{ => Inbox}/Todo.vue | 200 ++++++++++--------
 .../assets/js/home/Inbox/defaultMixins.js     |  43 ++++
 7 files changed, 244 insertions(+), 147 deletions(-)
 create mode 100644 resources/assets/js/components/dataViews/vueCardView/VueCardViewMixins.js
 rename resources/assets/js/home/{ => Inbox}/Todo.vue (64%)
 create mode 100644 resources/assets/js/home/Inbox/defaultMixins.js

diff --git a/resources/assets/js/components/dataViews/vueCardView/VueCard.vue b/resources/assets/js/components/dataViews/vueCardView/VueCard.vue
index e69de29bb..ba086a600 100644
--- a/resources/assets/js/components/dataViews/vueCardView/VueCard.vue
+++ b/resources/assets/js/components/dataViews/vueCardView/VueCard.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="pm-vue-card">
+    <div class="card" style="width: 18rem">
+      <div class="card-body">
+        <h5 class="card-title">Card title</h5>
+        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
+        <span v-for="column in columns" :key="column">
+          <slot :name="column" :item="item"></slot>
+        </span>
+
+        <a href="#" class="card-link">Card link</a>
+        <a href="#" class="card-link">Another link</a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "VueCardView",
+  props: ["columns", "item"],
+  data() {
+    return {
+      headings: {
+        detail: "",
+        case_number: this.$i18n.t("ID_MYCASE_NUMBER"),
+        case_title: this.$i18n.t("ID_CASE_TITLE"),
+        process_name: this.$i18n.t("ID_PROCESS_NAME"),
+        task: this.$i18n.t("ID_TASK"),
+        current_user: this.$i18n.t("ID_CURRENT_USER"),
+        due_date: this.$i18n.t("ID_DUE_DATE"),
+        delegation_date: this.$i18n.t("ID_DELEGATION_DATE"),
+        priority: this.$i18n.t("ID_PRIORITY"),
+        actions: "",
+      },
+    };
+  },
+  methods: {
+    classBtn(cls) {
+      return "btn btn-slim btn-force-radius v-btn-header " + cls;
+    },
+  },
+};
+</script>
+
+<style>
+.pm-vue-card {
+  display: inline-block;
+}
+</style>
diff --git a/resources/assets/js/components/dataViews/vueCardView/VueCardView.vue b/resources/assets/js/components/dataViews/vueCardView/VueCardView.vue
index 017132045..8f5c12c2c 100644
--- a/resources/assets/js/components/dataViews/vueCardView/VueCardView.vue
+++ b/resources/assets/js/components/dataViews/vueCardView/VueCardView.vue
@@ -1,18 +1,39 @@
 <template>
   <div class="pm-vue-card-view">
-              
+    <div class="pm-vue-card-view-container">
+      <div v-for="item in data" :columns="columns" :key="item" :data="item">
+        asdasd {{item}}
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import VueCard from "./VueCard.vue";
 export default {
   name: "VueCardView",
-  props: [],
+  components: {
+    VueCard,
+  },
+  props: ["data"],
   data() {
     return {
-
+      columns: [
+        "detail",
+        "case_number",
+        "case_title",
+        "process_name",
+        "task",
+        "due_date",
+        "delegation_date",
+        "priority",
+        "actions",
+      ],
     };
   },
+  mounted(){
+    console.log(this.data);
+  },
   methods: {
     classBtn(cls) {
       return "btn btn-slim btn-force-radius v-btn-header " + cls;
@@ -23,7 +44,8 @@ export default {
 
 <style>
 .pm-vue-card-view {
-
 }
 
+.pm-vue-card-view-container {
+}
 </style>
diff --git a/resources/assets/js/components/dataViews/vueCardView/VueCardViewMixins.js b/resources/assets/js/components/dataViews/vueCardView/VueCardViewMixins.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/resources/assets/js/components/headers/MultiviewHeader.vue b/resources/assets/js/components/headers/MultiviewHeader.vue
index 29956442d..d7402e3aa 100644
--- a/resources/assets/js/components/headers/MultiviewHeader.vue
+++ b/resources/assets/js/components/headers/MultiviewHeader.vue
@@ -2,19 +2,21 @@
   <div class="pm-multiview-header">
     <div class="pm-multiview-header-title"></div>
     <div class="pm-multiview-header-actions">
-      <button
-        v-for="action in data.actions"
-        :key="action.id"
-        @click="action.onClick(action)"
-        class="pm-multiview-header-button"
-        :title="action.title"
-      >
-        <div>
-          <span>
-            <i :class="action.icon"></i>
-          </span>
-        </div>
-      </button>
+      <div>
+        <button
+          v-for="action in data.actions"
+          :key="action.id"
+          @click="action.onClick(action)"
+          class="pm-multiview-header-button"
+          :title="action.title"
+        >
+          <div>
+            <span>
+              <i :class="action.icon"></i>
+            </span>
+          </div>
+        </button>
+      </div>
     </div>
   </div>
 </template>
@@ -22,41 +24,9 @@
 <script>
 export default {
   name: "MultiviewHeader",
-  props: [],
+  props: ["data"],
   data() {
-    return {
-      data: {
-        actions: [
-          {
-            id: "view-grid",
-            title: "Grid",
-            onClick(action) {
-              console.log("action");
-              console.log(action);
-            },
-            icon: "fas fa-table",
-          },
-          {
-            id: "view-list",
-            title: "List",
-            onClick(action) {
-              console.log("action");
-              console.log(action);
-            },
-            icon: "fas fa-list",
-          },
-          {
-            id: "view-card",
-            title: "Card",
-            onClick(action) {
-              console.log("action");
-              console.log(action);
-            },
-            icon: "fas fa-th",
-          },
-        ],
-      },
-    };
+    return {};
   },
   methods: {
     classBtn(cls) {
@@ -72,7 +42,7 @@ export default {
 .pm-multiview-header-title {
 }
 .pm-multiview-header-actions {
-  float: right;
+  text-align: end;
 }
 .pm-multiview-header-button {
   background-color: transparent;
diff --git a/resources/assets/js/home/Home.vue b/resources/assets/js/home/Home.vue
index 68b3022ab..c780de3ee 100644
--- a/resources/assets/js/home/Home.vue
+++ b/resources/assets/js/home/Home.vue
@@ -40,7 +40,7 @@
 import CustomSidebar from "./../components/menu/CustomSidebar";
 import MyCases from "./MyCases";
 import MyDocuments from "./MyDocuments";
-import Todo from "./Todo";
+import Todo from "./Inbox/Todo.vue";
 import Draft from "./Draft";
 import Paused from "./Paused";
 import Unassigned from "./Unassigned";
diff --git a/resources/assets/js/home/Todo.vue b/resources/assets/js/home/Inbox/Todo.vue
similarity index 64%
rename from resources/assets/js/home/Todo.vue
rename to resources/assets/js/home/Inbox/Todo.vue
index a07bcc155..acfc8150a 100644
--- a/resources/assets/js/home/Todo.vue
+++ b/resources/assets/js/home/Inbox/Todo.vue
@@ -8,8 +8,9 @@
       @onRemoveFilter="onRemoveFilter"
       @onUpdateFilters="onUpdateFilters"
     />
-    <multiview-header/>
+    <multiview-header :data="dataMultiviewHeader" />
     <v-server-table
+      v-if="typeView === 'GRID'"
       :data="tableData"
       :columns="columns"
       :options="options"
@@ -35,7 +36,7 @@
         <TaskCell :data="props.row.TASK" />
       </div>
       <div slot="current_user" slot-scope="props">
-        {{ props.row.USERNAME_DISPLAY_FORMAT}}
+        {{ props.row.USERNAME_DISPLAY_FORMAT }}
       </div>
       <div slot="due_date" slot-scope="props">
         {{ props.row.DUE_DATE }}
@@ -50,28 +51,35 @@
         </button>
       </div>
     </v-server-table>
+    <VueCardView v-if="typeView === 'CARD'" :data="tableData">
+
+    </VueCardView>
   </div>
 </template>
 
 <script>
-import HeaderCounter from "../components/home/HeaderCounter.vue";
-import ButtonFleft from "../components/home/ButtonFleft.vue";
-import ModalNewRequest from "./ModalNewRequest.vue";
-import TaskCell from "../components/vuetable/TaskCell.vue";
-import CasesFilter from "../components/search/CasesFilter";
-import api from "./../api/index";
-import utils from "./../utils/utils";
-import MultiviewHeader from "./../components/headers/MultiviewHeader.vue";
+import HeaderCounter from "../../components/home/HeaderCounter.vue";
+import ButtonFleft from "../../components/home/ButtonFleft.vue";
+import ModalNewRequest from "../ModalNewRequest.vue";
+import TaskCell from "../../components/vuetable/TaskCell.vue";
+import CasesFilter from "../../components/search/CasesFilter";
+import api from "../../api/index";
+import utils from "../../utils/utils";
+import MultiviewHeader from "../../components/headers/MultiviewHeader.vue";
+import VueCardView from "../../components/dataViews/vueCardView/VueCardView.vue";
+import defaultMixins from "./defaultMixins";
 
 export default {
   name: "Todo",
+  mixins: [defaultMixins],
   components: {
     HeaderCounter,
     ButtonFleft,
     ModalNewRequest,
     TaskCell,
     CasesFilter,
-    MultiviewHeader
+    MultiviewHeader,
+    VueCardView,
   },
   props: ["defaultOption", "filters"],
   data() {
@@ -110,13 +118,13 @@ export default {
           actions: "",
         },
         texts: {
-            count:this.$i18n.t("ID_SHOWING_FROM_RECORDS_COUNT"),
-            first: this.$i18n.t("ID_FIRST"),
-            last: this.$i18n.t("ID_LAST"),
-            filter: this.$i18n.t("ID_FILTER") + ":",
-            limit: this.$i18n.t("ID_RECORDS") + ":",
-            page: this.$i18n.t("ID_PAGE") + ":",
-            noResults: this.$i18n.t("ID_NO_MATCHING_RECORDS")
+          count: this.$i18n.t("ID_SHOWING_FROM_RECORDS_COUNT"),
+          first: this.$i18n.t("ID_FIRST"),
+          last: this.$i18n.t("ID_LAST"),
+          filter: this.$i18n.t("ID_FILTER") + ":",
+          limit: this.$i18n.t("ID_RECORDS") + ":",
+          page: this.$i18n.t("ID_PAGE") + ":",
+          noResults: this.$i18n.t("ID_NO_MATCHING_RECORDS"),
         },
         selectable: {
           mode: "single",
@@ -134,12 +142,12 @@ export default {
       clickCount: 0,
       singleClickTimer: null,
       statusTitle: {
-          "ON_TIME": this.$i18n.t("ID_IN_PROGRESS"),
-          "OVERDUE": this.$i18n.t("ID_TASK_OVERDUE"),
-          "DRAFT": this.$i18n.t("ID_IN_DRAFT"),
-          "PAUSED": this.$i18n.t("ID_PAUSED"),
-          "UNASSIGNED": this.$i18n.t("ID_UNASSIGNED")
-      }
+        ON_TIME: this.$i18n.t("ID_IN_PROGRESS"),
+        OVERDUE: this.$i18n.t("ID_TASK_OVERDUE"),
+        DRAFT: this.$i18n.t("ID_IN_DRAFT"),
+        PAUSED: this.$i18n.t("ID_PAUSED"),
+        UNASSIGNED: this.$i18n.t("ID_UNASSIGNED"),
+      },
     };
   },
   created() {
@@ -165,72 +173,72 @@ export default {
      * Initialize filters
      */
     initFilters() {
-       let params;
-        if(this.defaultOption) {
-            params = utils.getAllUrlParams(this.defaultOption);
-              if (params && params.openapplicationuid) {
-                this.$emit("onUpdateFilters", [
-                    {
-                        fieldId: "caseNumber",
-                        filterVar: "caseNumber",
-                        label: "",
-                        options:[],
-                        value: params.openapplicationuid,
-                        autoShow: false
-                    }
-                ]);
-              }
+      let params;
+      if (this.defaultOption) {
+        params = utils.getAllUrlParams(this.defaultOption);
+        if (params && params.openapplicationuid) {
+          this.$emit("onUpdateFilters", [
+            {
+              fieldId: "caseNumber",
+              filterVar: "caseNumber",
+              label: "",
+              options: [],
+              value: params.openapplicationuid,
+              autoShow: false,
+            },
+          ]);
         }
+      }
     },
     /**
      * Open a case when the component was mounted
      */
     openDefaultCase() {
-        let params;
-        if(this.defaultOption) {
-            params = utils.getAllUrlParams(this.defaultOption);
-            if (params && params.app_uid && params.del_index) {
-                this.openCase({
-                    APP_UID: params.app_uid,
-                    DEL_INDEX: params.del_index
-                });
-                this.$emit("cleanDefaultOption");
-            }
-            //force to search in the parallel tasks
-            if (params && params.openapplicationuid) {
-                this.onUpdateFilters({
-                    params: [
-                        {
-                            fieldId: "caseNumber",
-                            filterVar: "caseNumber",
-                            label: "",
-                            options:[],
-                            value: params.openapplicationuid,
-                            autoShow: false
-                        }
-                    ],
-                    refresh: false
-                });
-                this.$emit("cleanDefaultOption");                
-            }
+      let params;
+      if (this.defaultOption) {
+        params = utils.getAllUrlParams(this.defaultOption);
+        if (params && params.app_uid && params.del_index) {
+          this.openCase({
+            APP_UID: params.app_uid,
+            DEL_INDEX: params.del_index,
+          });
+          this.$emit("cleanDefaultOption");
         }
+        //force to search in the parallel tasks
+        if (params && params.openapplicationuid) {
+          this.onUpdateFilters({
+            params: [
+              {
+                fieldId: "caseNumber",
+                filterVar: "caseNumber",
+                label: "",
+                options: [],
+                value: params.openapplicationuid,
+                autoShow: false,
+              },
+            ],
+            refresh: false,
+          });
+          this.$emit("cleanDefaultOption");
+        }
+      }
     },
     /**
      * On row click event handler
      * @param {object} event
      */
     onRowClick(event) {
-        let self = this;
-        self.clickCount += 1;
-        if (self.clickCount === 1) {
-            self.singleClickTimer = setTimeout(function() {
-                self.clickCount = 0;            
-            }, 400);
-        } else if (self.clickCount === 2) {
-            clearTimeout(self.singleClickTimer);
-            self.clickCount = 0;
-            self.openCase(event.row);
-        }
+      let self = this;
+      self.clickCount += 1;
+      if (self.clickCount === 1) {
+        self.singleClickTimer = setTimeout(function () {
+          self.clickCount = 0;
+        }, 400);
+      } else if (self.clickCount === 2) {
+        clearTimeout(self.singleClickTimer);
+        self.clickCount = 0;
+        self.openCase(event.row);
+      }
     },
     /**
      * Get cases todo data
@@ -276,19 +284,23 @@ export default {
           CASE_NUMBER: v.APP_NUMBER,
           CASE_TITLE: v.DEL_TITLE,
           PROCESS_NAME: v.PRO_TITLE,
-          TASK: [{
-            TITLE: v.TAS_TITLE,
-            CODE_COLOR: v.TAS_COLOR,
-            COLOR: v.TAS_COLOR_LABEL,
-            DELAYED_TITLE: v.TAS_STATUS === "OVERDUE" ?
-              this.$i18n.t("ID_DELAYED") + ":" : this.statusTitle[v.TAS_STATUS],
-            DELAYED_MSG: v.TAS_STATUS === "OVERDUE" ? v.DELAY : ""
-          }],
+          TASK: [
+            {
+              TITLE: v.TAS_TITLE,
+              CODE_COLOR: v.TAS_COLOR,
+              COLOR: v.TAS_COLOR_LABEL,
+              DELAYED_TITLE:
+                v.TAS_STATUS === "OVERDUE"
+                  ? this.$i18n.t("ID_DELAYED") + ":"
+                  : this.statusTitle[v.TAS_STATUS],
+              DELAYED_MSG: v.TAS_STATUS === "OVERDUE" ? v.DELAY : "",
+            },
+          ],
           USERNAME_DISPLAY_FORMAT: utils.userNameDisplayFormat({
-              userName: v.USR_LASTNAME,
-              firstName: v.USR_LASTNAME,
-              lastName: v.USR_LASTNAME,
-              format: window.config.FORMATS.format || null
+            userName: v.USR_LASTNAME,
+            firstName: v.USR_LASTNAME,
+            lastName: v.USR_LASTNAME,
+            format: window.config.FORMATS.format || null,
           }),
           DUE_DATE: v.DEL_TASK_DUE_DATE_LABEL,
           DELEGATION_DATE: v.DEL_DELEGATE_DATE_LABEL,
@@ -312,7 +324,7 @@ export default {
         DEL_INDEX: item.DEL_INDEX,
         PRO_UID: item.PRO_UID,
         TAS_UID: item.TAS_UID,
-        ACTION: "todo"
+        ACTION: "todo",
       });
       this.$emit("onUpdatePage", "XCase");
     },
@@ -331,11 +343,11 @@ export default {
             PRO_UID: item.PRO_UID,
             TAS_UID: item.TAS_UID,
             APP_NUMBER: item.CASE_NUMBER,
-            ACTION: "todo"
+            ACTION: "todo",
           });
           that.$emit("onUpdatePage", "case-detail");
         });
-      });  
+      });
     },
     onRemoveFilter(data) {},
     onUpdateFilters(data) {
@@ -349,9 +361,9 @@ export default {
     /**
      * update view in component
      */
-    updateView(){
+    updateView() {
       this.$refs["vueTable"].getData();
-    }
+    },
   },
 };
 </script>
diff --git a/resources/assets/js/home/Inbox/defaultMixins.js b/resources/assets/js/home/Inbox/defaultMixins.js
new file mode 100644
index 000000000..26eea2676
--- /dev/null
+++ b/resources/assets/js/home/Inbox/defaultMixins.js
@@ -0,0 +1,43 @@
+export default {
+  data() {
+    let that = this;
+    return {
+      typeView: "GRID",
+      dataMultiviewHeader: {
+        actions: [
+          {
+            id: "view-grid",
+            title: "Grid",
+            onClick(action) {
+              that.typeView = "GRID";
+            },
+            icon: "fas fa-table",
+          },
+          {
+            id: "view-list",
+            title: "List",
+            onClick(action) {
+              that.typeView = "LIST";
+            },
+            icon: "fas fa-list",
+          },
+          {
+            id: "view-card",
+            title: "Card",
+            onClick(action) {
+              that.typeView = "CARD";
+            },
+            icon: "fas fa-th",
+          },
+        ],
+      }
+    }
+  },
+  created: function () {
+
+  },
+  methods: {
+
+  }
+}
+