PMCORE-3078

resources/assets/js/components/dataViews/vueCardView/VueCardView.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="pm-vue-card-view">
+              
+  </div>
+</template>
+
+<script>
+export default {
+  name: "VueCardView",
+  props: [],
+  data() {
+    return {
+
+    };
+  },
+  methods: {
+    classBtn(cls) {
+      return "btn btn-slim btn-force-radius v-btn-header " + cls;
+    },
+  },
+};
+</script>
+
+<style>
+.pm-vue-card-view {
+
+}
+
+</style>

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

@@ -0,0 +1,85 @@
+<template>
+  <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>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "MultiviewHeader",
+  props: [],
+  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",
+          },
+        ],
+      },
+    };
+  },
+  methods: {
+    classBtn(cls) {
+      return "btn btn-slim btn-force-radius v-btn-header " + cls;
+    },
+  },
+};
+</script>
+
+<style>
+.pm-multiview-header {
+}
+.pm-multiview-header-title {
+}
+.pm-multiview-header-actions {
+  float: right;
+}
+.pm-multiview-header-button {
+  background-color: transparent;
+  border-color: white;
+  font-size: 1.6rem;
+  color: #007bff;
+  display: inline-block;
+  padding: 0px 7px 0px 7px;
+}
+</style>

resources/assets/js/home/Todo.vue

@@ -8,6 +8,7 @@
       @onRemoveFilter="onRemoveFilter"
       @onUpdateFilters="onUpdateFilters"
     />
+    <multiview-header/>
     <v-server-table
       :data="tableData"
       :columns="columns"
@@ -60,6 +61,7 @@ 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";
 
 export default {
   name: "Todo",
@@ -69,6 +71,7 @@ export default {
     ModalNewRequest,
     TaskCell,
     CasesFilter,
+    MultiviewHeader
   },
   props: ["defaultOption", "filters"],
   data() {