test summernote editor

resources/assets/js/components/CustomActions.vue

@@ -0,0 +1,38 @@
+ <template>
+    <div class="custom-actions">
+        <button class="view" @click="itemAction('view-item', rowData, rowIndex)">
+        </button>
+        <a  class="edit" @click="itemAction('edit-item', rowData, rowIndex)">          
+        </a>
+        <a class="delete" @click="itemAction('delete-item', rowData, rowIndex)">        
+        </a>
+    </div>
+  </template>
+
+<script>
+export default {
+  props: {
+    rowData: {
+      type: Object,
+      required: true
+    },
+    rowIndex: {
+      type: Number
+    }
+  },
+  methods: {
+    itemAction(action, data, index) {
+      console.log("custom-actions: " + action, data.full_name, index);
+    }
+  }
+};
+</script>
+
+<style>
+.custom-actions button.ui.button {
+  padding: 8px 8px;
+}
+.custom-actions button.ui.button > i.icon {
+  margin: auto !important;
+}
+</style>

resources/assets/js/components/MyVuetable.vue

@@ -5,15 +5,23 @@
   <vuetable ref="vuetable"
     api-url="/api/persons"
     v-bind:fields="fields" pagination-path=""
+    v-bind:css="css.table"
   ></vuetable>
 </template>
 
 <script>
 import Vuetable from "vuetable-2/src/components/Vuetable";
+import VuetablePagination from 'vuetable-2/src/components/VuetablePagination'
+import VuetablePaginationInfo from 'vuetable-2/src/components/VuetablePaginationInfo'
+import CustomActions from './CustomActions'
+
+Vue.component('custom-actions', CustomActions)
 
 export default {
   components: {
-    Vuetable
+    Vuetable,
+     VuetablePagination,
+    VuetablePaginationInfo, 
   },
   data() {
     return {
@@ -36,29 +44,16 @@ export default {
         {
           name: "__component:custom-actions",
           title: "Actions",
-          titleClass: "text-center",
-          dataClass: "text-center"
+          // titleClass: "text-center",
+          // dataClass: "text-center"
         }
       ],
       css: {
         table: {
-          tableClass: "table table-bordered table-striped table-hover",
+          tableClass: "table pure-table pure-table-horizontal",
           ascendingIcon: "glyphicon glyphicon-chevron-up",
           descendingIcon: "glyphicon glyphicon-chevron-down"
-        },
-        pagination: {
-          wrapperClass: "pagination",
-          activeClass: "active",
-          disabledClass: "disabled",
-          pageClass: "page",
-          linkClass: "link",
-          icons: {
-            first: "",
-            prev: "",
-            next: "",
-            last: ""
-          }
-        },
+        },       
         icons: {
           first: "glyphicon glyphicon-step-backward",
           prev: "glyphicon glyphicon-chevron-left",
@@ -69,6 +64,44 @@ export default {
       sortOrder: [{ field: "email", sortField: "email", direction: "asc" }],
       moreParams: {}
     };
-  }
+  }//data end
 };
-</script>
+</script>
+
+<style>
+.pagination {
+  margin: 0;
+  float: right;
+}
+.pagination a.page {
+  border: 1px solid lightgray;
+  border-radius: 3px;
+  padding: 5px 10px;
+  margin-right: 2px;
+}
+.pagination a.page.active {
+  color: white;
+  background-color: #337ab7;
+  border: 1px solid lightgray;
+  border-radius: 3px;
+  padding: 5px 10px;
+  margin-right: 2px;
+}
+.pagination a.btn-nav {
+  border: 1px solid lightgray;
+  border-radius: 3px;
+  padding: 5px 7px;
+  margin-right: 2px;
+}
+.pagination a.btn-nav.disabled {
+  color: lightgray;
+  border: 1px solid lightgray;
+  border-radius: 3px;
+  padding: 5px 7px;
+  margin-right: 2px;
+  cursor: not-allowed;
+}
+.pagination-info {
+  float: left;
+}
+</style>

resources/views/settings/license/edit.blade.php

@@ -24,4 +24,17 @@
     </div>
 
 </div>
-@stop
+@stop
+
+@section("after-scripts")
+    <script type="text/javascript">
+        // Backend.Pages.init();
+    </script>
+     <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-lite.css" rel="stylesheet">
+     <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-lite.js"></script>
+     <script>
+        $(document).ready(function() {
+            $('#desc_markup').summernote();
+        });
+      </script>
+@endsection

resources/views/settings/page/edit.blade.php

@@ -95,4 +95,11 @@
     <script type="text/javascript">
         // Backend.Pages.init();
     </script>
+     <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-lite.css" rel="stylesheet">
+     <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-lite.js"></script>
+     <script>
+        $(document).ready(function() {
+            $('#description').summernote();
+        });
+      </script>
 @endsection

resources/views/welcome.blade.php

@@ -11,10 +11,15 @@
         <title>{{ config('app.name', 'Laravel') }}</title>
 
         <!-- Fonts -->
-        <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
+        <link rel='stylesheet' href="{{ asset('css/pure-min.css') }}" />
+    <link rel='stylesheet' href="{{ asset('css/grids-responsive-min.css') }}" />   
+   <!-- Styles -->
+    <link rel='stylesheet' href="{{ asset('css/font-awesome.css') }}" />
+        <link rel="stylesheet" type="text/css" href="{{ asset('/backend/style.css') }}">
+    <link rel="stylesheet" type="text/css" href="{{ asset('/backend/pagination.css') }}">
 
-        <!-- Styles -->
-        <link href="{{ asset('css/app.css') }}" rel="stylesheet">
+        
+    
     </head>
     <body>
         <div id="app">