Amélioration de l'édition de la grille

NextDom · May 8, 2020 · 8a338e1 · 8a338e1
1 parent d8b7acc
commit 8a338e1
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 24 deletions.
diff --git a/src/dash/src/components/GridContainer.vue b/src/dash/src/components/GridContainer.vue
@@ -2,10 +2,10 @@
   <div v-bind:style="gridStyle" class="grid-container" v-bind:class="previewClass">
     <span class="grid-group-btns" v-if="$store.getters.editMode && gridData.children.length === 0">
       <v-hover v-model="divideHorizontallyPreview">
-        <v-btn id="fab-vertical" fab color="success" v-on:click="divide('horizontal')">&#9707;</v-btn>
+        <v-btn class="fab-vertical" fab color="success" v-on:click="divide('horizontal')">&#9707;</v-btn>
       </v-hover>
       <v-hover v-model="divideVerticallyPreview">
-        <v-btn id="fab-horizontal" fab color="success" v-on:click="divide('vertical')">&#9707;</v-btn>
+        <v-btn class="fab-horizontal" fab color="success" v-on:click="divide('vertical')">&#9707;</v-btn>
       </v-hover>
       <v-tooltip bottom>
         <template v-slot:activator="{ on }">
@@ -15,16 +15,24 @@
         </template>
         <span>Ajouter un élément</span>
       </v-tooltip>
+      <v-hover v-model="hoverDeleteState" v-if="root !== '0'">
+        <v-btn fab color="error" v-on:click="$emit('delete')">
+          <v-icon>mdi-delete</v-icon>
+        </v-btn>
+      </v-hover>
     </span>
     <template v-else-if="gridData.children.length === 1">
       <Widget v-bind:widgetData="gridData.children[0].widgetData" />
     </template>
-    <!-- TODO: Faire un v-for -->
     <template v-else-if="gridData.children.length === 2">
-      <GridContainer v-model="gridData.children[0]" />
-    </template>
-    <template v-if="gridData.children.length === 2">
-      <GridContainer v-model="gridData.children[1]" />
+      <GridContainer
+        v-for="(child, index) in gridData.children"
+        v-model="gridData.children[index]"
+        v-bind:key="`container-${root}${index.toString()}`"
+        v-bind:root="root + index"
+        v-on:delete="deleteChildren"
+        v-on:setDeletePreviewState="setDeletePreviewState"
+      />
     </template>
   </div>
 </template>
@@ -38,11 +46,17 @@ export default {
     Widget
   },
   props: {
-    value: Object
+    value: Object,
+    root: {
+      type: String,
+      default: "0"
+    }
   },
   data: () => ({
     divideHorizontallyPreview: false,
-    divideVerticallyPreview: false
+    divideVerticallyPreview: false,
+    deletePreviewState: false,
+    hoverDeleteState: false
   }),
   mounted() {
     this.$eventBus.$on("addedWidget", widgetId => {
@@ -56,6 +70,11 @@ export default {
       }
     });
   },
+  watch: {
+    hoverDeleteState: function(newValue) {
+      this.$emit("setDeletePreviewState", newValue);
+    }
+  },
   computed: {
     gridData: {
       get() {
@@ -72,6 +91,9 @@ export default {
       if (this.divideVerticallyPreview) {
         return "vertical-divide-preview";
       }
+      if (this.deletePreviewState) {
+        return "delete-preview";
+      }
       return "";
     },
     gridStyle() {
@@ -116,6 +138,13 @@ export default {
     addWidget() {
       this.$store.commit("setGridEventCaller", this.gridData.id);
       this.$eventBus.$emit("showAddItemWizard");
+    },
+    deleteChildren() {
+      this.deletePreviewState = false;
+      this.gridData.children = [];
+    },
+    setDeletePreviewState(state) {
+      this.deletePreviewState = state;
     }
   }
 };
@@ -128,9 +157,23 @@ export default {
   display: flex;
   position: relative;
 }
+
 .grid-container > div {
   flex: 1 1 auto;
 }
+
+.grid-group-btns {
+  display: none;
+}
+
+.grid-container:hover > .grid-group-btns,
+.grid-group-btns:hover {
+  position: absolute;
+  display: block;
+  width: max-content;
+  z-index: 9999;
+}
+
 .horizontal-grid {
   flex-direction: row;
 }
@@ -163,13 +206,23 @@ export default {
   transform: translate(-50%, -50%);
 }
 
-#fab-vertical span,
-#fab-horizontal span {
+.fab-vertical span,
+.fab-horizontal span {
   font-size: 2.5rem;
   margin-top: -0.5rem;
 }
 
-#fab-horizontal {
+.fab-horizontal {
   transform: rotateZ(90deg);
 }
+
+.delete-preview::after {
+  pointer-events: none;
+  position: absolute;
+  content: "";
+  display: block;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(255, 0, 0, 0.2);
+}
 </style>
diff --git a/src/dash/src/components/GridDash.vue b/src/dash/src/components/GridDash.vue
@@ -1,5 +1,5 @@
 <template>
-  <GridContainer v-model="gridData" v-bind:parentId="parentId" />
+  <GridContainer v-model="gridData" root="0" />
 </template>
 
 <script>
@@ -12,17 +12,6 @@ export default {
   props: {
     value: Object
   },
-  data: () => ({
-    /*
-    gridData: {
-      id: "0",
-      children: [],
-      orientation: "horizontal",
-      type: "grid"
-    },
-  */
-    parentId: "0"
-  }),
   mounted() {
     this.$store.commit("setDashType", "grid");
   },