ayanova/src/views/home-dashboard.vue

@@ -1,7 +1,7 @@
 <template>
   <v-row v-if="formState.ready">
     <gz-error :errorBoxMessage="formState.errorBoxMessage"></gz-error>
-    <v-col>
+    <v-col cols="12" v-if="showSelector">
       <v-dialog
         scrollable
         max-width="600px"
@@ -19,7 +19,7 @@
               <v-list-item
                 v-for="item in availableItems()"
                 :key="item.id"
-                @click="addItem(item.id)"
+                @click="addItem(item)"
               >
                 <v-list-item-title>{{ item.title }}</v-list-item-title>
               </v-list-item>
@@ -127,8 +127,15 @@ export default {
     dashMoveEnd: function(item) {
       console.log("home-dashboard:dashMoveEnd", item);
     },
-    dashRemove: function(item) {
-      console.log("home-dashboard:dashRemove", item);
+    dashRemove: function(id) {
+      let index = this.getEffectiveViewItemIndexById(id);
+      console.log(id);
+      console.log("remove effective index for item is ", index);
+      if (index == -1) {
+        return;
+      }
+      this.effectiveView.splice(index, 1);
+      //
     },
     dashRefresh: function(item) {
       console.log(
@@ -136,8 +143,21 @@ export default {
         item
       );
     },
+    getEffectiveViewItemIndexById: function(id) {
+      return this.effectiveView.findIndex(z => z.id == id);
+    },
+    addItem: function(item) {
+      this.showSelector = false;
+      //add to effective view
+      this.effectiveView.push(item);
+      //save effective view as saved View
+    },
     availableItems: function() {
-      return DashRegistry.availableItems(); //minus effectiveView
+      let allItems = DashRegistry.availableItems();
+      let newItems = allItems.filter(
+        z => !this.effectiveView.find(m => m.id == z.id)
+      );
+      return newItems;
     },
     async getDataFromApi() {
       let vm = this;