From c6b1117778e5607c40bb4610ab8eba0ec1a085e6 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 17 Feb 2022 12:36:29 +0100
Subject: [PATCH] Add button for removal of chooser widget

---
 client/src/components/Modal.vue               |  2 +-
 .../book-navigation/NavigationSidebar.vue     |  2 +-
 .../content-block-form/ContentBlockForm.vue   | 22 +++++----
 .../content-block-form/ContentElement.vue     |  4 +-
 .../ContentBlockElementChooserWidget.vue      | 47 ++++++++++++++-----
 .../icons/{Cross.vue => CrossIcon.vue}        |  0
 .../src/components/profile/ProfileSidebar.vue |  2 +-
 client/src/layouts/FullScreenLayout.vue       |  2 +-
 client/src/layouts/SimpleLayout.vue           |  2 +-
 9 files changed, 55 insertions(+), 28 deletions(-)
 rename client/src/components/icons/{Cross.vue => CrossIcon.vue} (100%)

diff --git a/client/src/components/Modal.vue b/client/src/components/Modal.vue
index 53792191..17e5c979 100644
--- a/client/src/components/Modal.vue
+++ b/client/src/components/Modal.vue
@@ -30,7 +30,7 @@
 </template>
 
 <script>
-  const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/Cross');
+  const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon');
 
   export default {
     props: {
diff --git a/client/src/components/book-navigation/NavigationSidebar.vue b/client/src/components/book-navigation/NavigationSidebar.vue
index 88b497cd..4e838210 100644
--- a/client/src/components/book-navigation/NavigationSidebar.vue
+++ b/client/src/components/book-navigation/NavigationSidebar.vue
@@ -24,7 +24,7 @@
 
   import sidebarMixin from '@/mixins/sidebar';
 
-  const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/Cross');
+  const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon');
 
   export default {
     mixins: [sidebarMixin],
diff --git a/client/src/components/content-block-form/ContentBlockForm.vue b/client/src/components/content-block-form/ContentBlockForm.vue
index 8317c80b..db4a5fe9 100644
--- a/client/src/components/content-block-form/ContentBlockForm.vue
+++ b/client/src/components/content-block-form/ContentBlockForm.vue
@@ -63,7 +63,7 @@
                 :element="content"
                 class="content-block-form__segment"
                 @update="update(index, $event, outer)"
-                @remove="remove(outer, index)"
+                @remove="remove(outer, index, $event)"
                 @up="up(outer, index)"
                 @down="down(outer, index)"
                 @top="top(outer, index)"
@@ -83,7 +83,7 @@
           class="content-block-form__segment"
           v-else
           @update="update(outer, $event)"
-          @remove="remove(outer)"
+          @remove="remove(outer, undefined, $event)"
           @up="up(outer)"
           @down="down(outer)"
           @top="top(outer)"
@@ -220,14 +220,18 @@
           ];
         }
       },
-      remove(outer, inner) {
-        this.$modal.open('confirm')
-          .then(() => {
-            this.executeRemoval(outer, inner);
-          })
-          .catch(() => {
+      remove(outer, inner, askForConfirmation = true) {
+        if(askForConfirmation) {
+          this.$modal.open('confirm')
+            .then(() => {
+              this.executeRemoval(outer, inner);
+            })
+            .catch(() => {
 
-          });
+            });
+        } else {
+          this.executeRemoval(outer, inner);
+        }
       },
       shift(outer, inner, distance) {
         if (inner === undefined) {
diff --git a/client/src/components/content-block-form/ContentElement.vue b/client/src/components/content-block-form/ContentElement.vue
index 701ffc80..625f9b29 100644
--- a/client/src/components/content-block-form/ContentElement.vue
+++ b/client/src/components/content-block-form/ContentElement.vue
@@ -6,6 +6,7 @@
       v-bind="element"
       v-if="isChooser"
       @change-type="changeType"
+      @remove="$emit('remove', false)"
     />
     <!-- Content Forms -->
     <content-form-section
@@ -159,9 +160,6 @@
           },
         });
       },
-      debug(arg) {
-        console.log(arg);
-      },
       changeUrl(value) {
         this._updateProperty(value, 'url');
       },
diff --git a/client/src/components/content-forms/ContentBlockElementChooserWidget.vue b/client/src/components/content-forms/ContentBlockElementChooserWidget.vue
index d3d9d754..24606af5 100644
--- a/client/src/components/content-forms/ContentBlockElementChooserWidget.vue
+++ b/client/src/components/content-forms/ContentBlockElementChooserWidget.vue
@@ -1,14 +1,21 @@
 <template>
   <div class="content-block-element-chooser-widget__wrapper">
+    <button
+      class="content-block-element-chooser-widget__remove-button icon-button"
+      @click="remove"
+    >
+      <cross-icon class="icon-button__icon" />
+    </button>
+    <h3 class="content-block-element-chooser-widget__heading">
+      Neuer Inhalt
+    </h3>
     <template
       v-if="includeListOption"
     >
-      <h3 class="content-block-element-chooser-widget__heading">
-        Neuer Inhalt
-      </h3>
       <checkbox
         class="content-block-element-chooser-widget__list-toggle"
         :checked="convertToList"
+        data-cy="convert-to-list-checkbox"
         label="Neues Aufzählungszeichen hinzufügen"
         @input="convertToList=$event"
       />
@@ -98,6 +105,7 @@
 
   import formElementIcons from '@/components/ui/form-element-icons';
   import TitleIcon from '@/components/icons/TitleIcon';
+  import CrossIcon from '@/components/icons/CrossIcon';
 
   export default {
     props: {
@@ -105,30 +113,34 @@
       index: {},
       hideAssignment: {
         type: Boolean,
-        default: false
+        default: false,
       },
       includeListOption: {
         type: Boolean,
-        default: false
-      }
+        default: false,
+      },
     },
 
     components: {
+      CrossIcon,
       TitleIcon,
       Checkbox,
-      ...formElementIcons
+      ...formElementIcons,
     },
 
     data: () => ({
-      convertToList: false
+      convertToList: false,
     }),
 
     methods: {
       changeType(type) {
         this.$emit('change-type', {
           type,
-          convertToList: this.convertToList
+          convertToList: this.convertToList,
         });
+      },
+      remove() {
+        this.$emit('remove');
       }
     },
   };
@@ -148,10 +160,11 @@
     grid-column-gap: 0px;
     font-family: $sans-serif-font-family;
     text-align: center;
-    //border: 2px solid $color-silver-dark;
-    //border-radius: 12px;
     position: relative;
 
+    // grid position in wrapper element
+    grid-column: 1 / span 2;
+
     /*IE10+*/
     & > :nth-child(1) {
       -ms-grid-column: 1;
@@ -182,13 +195,25 @@
       -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
     }
 
+    &__wrapper {
+      display: grid;
+      grid-template-columns: 1fr 50px;
+    }
+
+    &__remove-button {
+      grid-column: 2;
+    }
+
     &__heading {
       @include heading-4;
       margin-bottom: $medium-spacing;
+      grid-column: 1;
+      grid-row: 1;
     }
 
     &__list-toggle {
       margin-bottom: $medium-spacing;
+      grid-column: 1;
     }
 
     &__link {
diff --git a/client/src/components/icons/Cross.vue b/client/src/components/icons/CrossIcon.vue
similarity index 100%
rename from client/src/components/icons/Cross.vue
rename to client/src/components/icons/CrossIcon.vue
diff --git a/client/src/components/profile/ProfileSidebar.vue b/client/src/components/profile/ProfileSidebar.vue
index 9fb89388..4f6e2cc7 100644
--- a/client/src/components/profile/ProfileSidebar.vue
+++ b/client/src/components/profile/ProfileSidebar.vue
@@ -84,7 +84,7 @@
   import me from '@/mixins/me';
   import LogoutWidget from '@/components/LogoutWidget';
   import {MY_TEAM} from '@/router/me.names';
-  const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/Cross');
+  const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon');
 
   export default {
 
diff --git a/client/src/layouts/FullScreenLayout.vue b/client/src/layouts/FullScreenLayout.vue
index d5332483..3d5d3d9b 100644
--- a/client/src/layouts/FullScreenLayout.vue
+++ b/client/src/layouts/FullScreenLayout.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script>
-  const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/Cross');
+  const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon');
 
   export default {
     components: {
diff --git a/client/src/layouts/SimpleLayout.vue b/client/src/layouts/SimpleLayout.vue
index 58ac47a2..8b897e35 100644
--- a/client/src/layouts/SimpleLayout.vue
+++ b/client/src/layouts/SimpleLayout.vue
@@ -20,7 +20,7 @@
 <script>
   import SimpleFooter from '@/layouts/SimpleFooter';
   import enableFooter from '@/helpers/footer';
-  const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/Cross');
+  const Cross = () => import(/* webpackChunkName: "icons" */'@/components/icons/CrossIcon');
 
   export default {
     components: {