solve conflicts

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

@@ -1,6 +1,6 @@
 <template>
   <div class="pm-vue-card">
-    <div class="card" style="width: 18rem">
+    <div class="card pm-vue-card-inside" style="width: 20rem">
       <div class="card-body">
         <slot> </slot>
       </div>
@@ -13,8 +13,7 @@ export default {
   name: "VueCardView",
   props: ["columns", "item"],
   data() {
-    return {
-    };
+    return {};
   },
   methods: {
     classBtn(cls) {
@@ -27,5 +26,15 @@ export default {
 <style>
 .pm-vue-card {
   display: inline-block;
+  padding: 0.7rem;
+}
+.pm-vue-card-inside {
+  border-left: solid lightseagreen;
+  color: #212529;
+  background-color: #f8f9fa;
+}
+
+.pm-vue-card-inside:hover {
+  background-color: #cfd9e4;
 }
 </style>

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

@@ -1,7 +1,10 @@
 <template>
-  <div class="pm-vue-card-view">
+  <div class="pm-vue-card-view" :height="height">
     <div class="pm-vue-card-view-container">
-      <div>
+      <div
+        class="pm-vue-card-view-body"
+        :style="{height: height + 'px'}"
+      >
         <vue-card v-for="item in data" :key="item.id">
           <slot
             v-for="column in options.columns"
@@ -12,6 +15,10 @@
           ></slot>
         </vue-card>
       </div>
+
+      <div class="pm-vue-card-view-footer">
+        <a @click="viewMore" class="list-group-item">View more</a>
+      </div>
     </div>
   </div>
 </template>
@@ -28,7 +35,6 @@ export default {
   props: ["options"],
   data() {
     return {
- 
     };
   },
   mounted() {
@@ -44,8 +50,19 @@ export default {
 
 <style>
 .pm-vue-card-view {
+  font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 0.9rem;
 }
 
-.pm-vue-card-view-container {
+.pm-vue-card-view-body {
+  border: 1px solid rgba(0, 0, 0, 0.125);
+  padding-bottom: 5px;
+  margin-top: 5px;
+  overflow-y: auto;
+}
+
+.pm-vue-card-view-footer {
+  text-align: center;
+  line-height: 1.25;
 }
 </style>

resources/assets/js/components/dataViews/vueCardView/VueCardViewMixins.js

@@ -2,6 +2,7 @@ export default {
   data() {
     let that = this;
     return {
+      height: 0,
       config: {
         page: 1
       },
@@ -9,8 +10,8 @@ export default {
     }
   },
   mounted: function () {
-    console.log("jonas");
     this.getData();
+    this.getBodyHeight();
   },
   methods: {
     /**
@@ -19,11 +20,8 @@ export default {
     getData() {
       let options = _.extend({}, this.config, this.options),
         that = this;
-      console.log("GETTTTTTTTTT");
-
       this.options.requestFunction(options)
         .then((data) => {
-          console.log("jonas vue car view");
           that.data = data.data;
         })
         .catch(() => {
@@ -34,7 +32,21 @@ export default {
      * Get data when press the button more view
      */
     viewMore() {
+      let options = _.extend({}, this.config, this.options, { page: this.config.page + 1 }),
+        that = this;
+      this.options.requestFunctionViewMore(options)
+        .then((data) => {
+          if (data.data && data.data.length != 0) {
+            that.data = that.data.concat(data.data);
+            that.config.page += 1;
+          }
+        })
+        .catch(() => {
 
+        });
+    },
+    getBodyHeight() {
+      this.height = window.innerHeight - this.$root.$el.clientHeight;
     }
   }
 }