ayanova/src/components/inventorywidgetlist.vue

@@ -23,10 +23,10 @@
             }}</span>
           </v-toolbar-title>
           <v-spacer></v-spacer>
-          <v-btn icon @click="newItem()">
+          <v-btn v-if="this.rights.change" icon @click="newItem()">
             <v-icon>fa-plus-circle</v-icon>
           </v-btn>
-          <v-btn icon>
+          <v-btn icon @click="filterMe()">
             <v-icon>fa-filter</v-icon>
           </v-btn>
           <v-btn icon @click="getDataFromApi()">
@@ -47,21 +47,36 @@
           :rows-per-page-items="rowsPerPageItems"
           :rows-per-page-text="this.$gzlocale.get('RowsPerPage')"
           class="elevation-1"
+          select-all
         >
           <template slot="items" slot-scope="props">
-            <td class="text-xs-left">{{ props.item.name | capitalize }}</td>
-            <td class="text-xs-left">{{ props.item.serial }}</td>
-            <td class="text-xs-left">
+            <td>
+              <v-checkbox
+                v-model="props.selected"
+                primary
+                hide-details
+              ></v-checkbox>
+            </td>
+            <td class="text-xs-left" @click="editItem(props.item)">
+              {{ props.item.name | capitalize }}
+            </td>
+            <td class="text-xs-left" @click="editItem(props.item)">
+              {{ props.item.serial }}
+            </td>
+            <td class="text-xs-left" @click="editItem(props.item)">
               {{ props.item.dollarAmount | currency }}
             </td>
-            <td class="text-xs-left">{{ props.item.active | boolastext }}</td>
-            <td class="text-xs-left">{{ props.item.roles }}</td>
-            <td class="text-xs-left">{{ props.item.startDate | shortdate }}</td>
-            <td class="text-xs-left">{{ props.item.endDate | shortdate }}</td>
-            <td class="justify-center layout px-0">
-              <v-icon class="mr-3" @click="editItem(props.item)"
-                >fa-pencil-alt</v-icon
-              >
+            <td class="text-xs-left" @click="editItem(props.item)">
+              {{ props.item.active | boolastext }}
+            </td>
+            <td class="text-xs-left" @click="editItem(props.item)">
+              {{ props.item.roles }}
+            </td>
+            <td class="text-xs-left" @click="editItem(props.item)">
+              {{ props.item.startDate | shortdate }}
+            </td>
+            <td class="text-xs-left" @click="editItem(props.item)">
+              {{ props.item.endDate | shortdate }}
             </td>
           </template>
         </v-data-table>
@@ -71,12 +86,13 @@
 </template>
 
 <script>
-/*  Xeslint-disable */
+/*  eslint-disable */
 const FORM_KEY = "inventorywidgetlist";
 
 export default {
   beforeCreate() {
     var that = this;
+
     this.$gzlocale
       .fetch([
         "Widget",
@@ -97,6 +113,8 @@ export default {
         });
       })
       .then(() => {
+        //don't have access to local data object until here
+        that.rights = this.$gzrole.getRights(this, this.$gztype.Widget);
         var formSettings = that.$gzform.getFormSettings(FORM_KEY);
         /**
  * {
@@ -140,6 +158,7 @@ export default {
         appError: null,
         serverError: {}
       },
+      rights: this.$gzrole.defaultRightsObject(),
       totalItems: 0,
       Items: [],
       loading: true,
@@ -149,6 +168,7 @@ export default {
       selected: [],
       rowsPerPageItems: [5, 10, 25, 99],
       rowsPerPageText: "blah per blah",
+      selected: [],
       headers: [
         {
           text: "WidgetName",
@@ -181,6 +201,9 @@ export default {
         params: { id: 0 }
       });
     },
+    filterMe() {
+      console.log(this.selected);
+    },
     getDataFromApi() {
       var that = this;
       var listOptions = {