update Cards

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>

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>

resources/assets/js/components/headers/MultiviewHeader.vue

@@ -2,6 +2,7 @@
   <div class="pm-multiview-header">
     <div class="pm-multiview-header-title"></div>
     <div class="pm-multiview-header-actions">
+      <div>
         <button
           v-for="action in data.actions"
           :key="action.id"
@@ -17,46 +18,15 @@
         </button>
       </div>
     </div>
+  </div>
 </template>
 
 <script>
 export default {
   name: "MultiviewHeader",
-  props: [],
+  props: ["data"],
   data() {
-    return {
+    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",
-          },
-        ],
-      },
-    };
   },
   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;

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";

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"
@@ -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 HeaderCounter from "../../components/home/HeaderCounter.vue";
-import ButtonFleft from "../components/home/ButtonFleft.vue";
+import ButtonFleft from "../../components/home/ButtonFleft.vue";
-import ModalNewRequest from "./ModalNewRequest.vue";
+import ModalNewRequest from "../ModalNewRequest.vue";
-import TaskCell from "../components/vuetable/TaskCell.vue";
+import TaskCell from "../../components/vuetable/TaskCell.vue";
-import CasesFilter from "../components/search/CasesFilter";
+import CasesFilter from "../../components/search/CasesFilter";
-import api from "./../api/index";
+import api from "../../api/index";
-import utils from "./../utils/utils";
+import utils from "../../utils/utils";
-import MultiviewHeader from "./../components/headers/MultiviewHeader.vue";
+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() {
@@ -116,7 +124,7 @@ export default {
           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")
+          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"),
+        ON_TIME: this.$i18n.t("ID_IN_PROGRESS"),
-          "OVERDUE": this.$i18n.t("ID_TASK_OVERDUE"),
+        OVERDUE: this.$i18n.t("ID_TASK_OVERDUE"),
-          "DRAFT": this.$i18n.t("ID_IN_DRAFT"),
+        DRAFT: this.$i18n.t("ID_IN_DRAFT"),
-          "PAUSED": this.$i18n.t("ID_PAUSED"),
+        PAUSED: this.$i18n.t("ID_PAUSED"),
-          "UNASSIGNED": this.$i18n.t("ID_UNASSIGNED")
+        UNASSIGNED: this.$i18n.t("ID_UNASSIGNED"),
-      }
+      },
     };
   },
   created() {
@@ -176,8 +184,8 @@ export default {
               label: "",
               options: [],
               value: params.openapplicationuid,
-                        autoShow: false
+              autoShow: false,
-                    }
+            },
           ]);
         }
       }
@@ -192,7 +200,7 @@ export default {
         if (params && params.app_uid && params.del_index) {
           this.openCase({
             APP_UID: params.app_uid,
-                    DEL_INDEX: params.del_index
+            DEL_INDEX: params.del_index,
           });
           this.$emit("cleanDefaultOption");
         }
@@ -206,10 +214,10 @@ export default {
                 label: "",
                 options: [],
                 value: params.openapplicationuid,
-                            autoShow: false
+                autoShow: false,
-                        }
+              },
             ],
-                    refresh: false
+            refresh: false,
           });
           this.$emit("cleanDefaultOption");
         }
@@ -276,19 +284,23 @@ export default {
           CASE_NUMBER: v.APP_NUMBER,
           CASE_TITLE: v.DEL_TITLE,
           PROCESS_NAME: v.PRO_TITLE,
-          TASK: [{
+          TASK: [
+            {
               TITLE: v.TAS_TITLE,
               CODE_COLOR: v.TAS_COLOR,
               COLOR: v.TAS_COLOR_LABEL,
-            DELAYED_TITLE: v.TAS_STATUS === "OVERDUE" ?
+              DELAYED_TITLE:
-              this.$i18n.t("ID_DELAYED") + ":" : this.statusTitle[v.TAS_STATUS],
+                v.TAS_STATUS === "OVERDUE"
-            DELAYED_MSG: v.TAS_STATUS === "OVERDUE" ? v.DELAY : ""
+                  ? 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
+            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,7 +343,7 @@ 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");
         });
@@ -351,7 +363,7 @@ export default {
      */
     updateView() {
       this.$refs["vueTable"].getData();
-    }
+    },
   },
 };
 </script>

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: {
+
+  }
+}
+