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>