Add link form and remove button

client/src/components/AddContentElement.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="add-content-element">
+  <div class="add-content-element" v-on:click="$emit('add-element')">
     <add-icon class="add-content-element__icon"></add-icon>
   </div>
 </template>

client/src/components/ContentBlockChooserWidget.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="content-block-chooser-widget">
+  <div class="content-block-chooser-widget" v-on:click="$emit('change-type', index)">
     <div class="content-block-chooser-widget__link">
       <link-icon class="content-block-chooser-widget__link-icon"></link-icon>
       <div class="content-block-chooser-widget__link-title">Link</div>
@@ -36,6 +36,8 @@
   import DocumentIcon from '@/components/icons/DocumentIcon';
 
   export default {
+    props: ['element', 'index'],
+
     components: {
       LinkIcon,
       VideoIcon,
@@ -43,6 +45,13 @@
       TextIcon,
       SpeechBubbleIcon,
       DocumentIcon
+    },
+
+    methods: {
+      changeType() {
+        console.log('changeType');
+        this.element.type = 'link';
+      }
     }
   }
 </script>

client/src/components/Modal.vue

@@ -65,6 +65,7 @@
       grid-area: body;
       padding: 10px $modal-lateral-padding;
       overflow: auto;
+      width: 90%;
     }
 
     &__footer {

client/src/components/NewContentBlockWizard.vue

@@ -2,9 +2,17 @@
   <modal>
     <content-block-title-input slot="header"></content-block-title-input>
 
-    <div v-for="element in elements" :key="element.id">
+    <div v-for="(element, index) in elements" :key="index" class="new-content-block-wizard__element">
-      <component :is="type(element)"></component>
+      <component :is="type(element)"
-      <add-content-element></add-content-element>
+                 :class="{'new-content-block-wizard__chooser': type(element) === 'content-block-chooser-widget'}" :element="element" :index="index"
+                  v-on:change-type="changeType"
+      ></component>
+      <a class="new-content-block-wizard__remove" v-on:click="removeElement(index)">
+        <trash-icon v-if="type(element) !== 'content-block-chooser-widget'"
+                    class="new-content-block-wizard__trash-icon"></trash-icon>
+      </a>
+
+      <add-content-element class="new-content-block-wizard__add" v-on:add-element="addElement"></add-content-element>
     </div>
   </modal>
 </template>
@@ -14,27 +22,54 @@
   import ContentBlockChooserWidget from '@/components/ContentBlockChooserWidget';
   import ContentBlockTitleInput from '@/components/ContentBlockTitleInput';
   import AddContentElement from '@/components/AddContentElement';
+  import LinkForm from '@/components/content-forms/LinkForm';
+  import TrashIcon from '@/components/icons/TrashIcon';
 
   export default {
     components: {
       Modal,
       ContentBlockChooserWidget,
       ContentBlockTitleInput,
-      AddContentElement
+      AddContentElement,
+      LinkForm,
+      TrashIcon
     },
 
     methods: {
       type(element) {
+        switch (element.type) {
+          case 'link':
+            return 'link-form'
+        }
         return 'content-block-chooser-widget'
+      },
+      removeElement(index) {
+        this.elements.splice(index, 1);
+      },
+      addElement() {
+        this.elements.push({
+          id: 5
+        })
+      },
+      changeType(index) {
+        this.elements.splice(index, 1, {type: 'link'});
       }
     },
 
     data() {
       return {
         elements: [
-          {id: 1},
+          {
-          {id: 2},
+            id: 1,
-          {id: 3}
+            type: 'link'
+          },
+          {
+            id: 2,
+            type: 'link'
+          },
+          {
+            id: 3
+          }
         ]
       }
     }
@@ -44,10 +79,38 @@
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";
 
-  .new-content-block {
+  .new-content-block-wizard {
-    &__title {
+    /* top level does not exist, because of the modal */
-      padding: 10px 30px;
+
-      border-bottom: 1px solid $color-lightgrey;
+    &__element {
+      display: grid;
+      grid-template-columns: 1fr 50px;
+      grid-auto-rows: auto;
+      width: 97%; // reserve space for scrollbar
+    }
+
+    &__remove {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 50px;
+      height: 50px;
+    }
+
+    &__trash-icon {
+      width: 25px;
+      height: 25px;
+      fill: $color-grey;
+      cursor: pointer;
+      justify-self: center;
+    }
+
+    &__chooser {
+      grid-column: 1 / span 2;
+    }
+
+    &__add {
+      grid-column: 1 / span 2;
     }
   }
 </style>

client/src/components/content-forms/LinkForm.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="link-form">
+    <div class="link-form__property">
+      <input placeholder="Name erfassen..." class="link-form__input skillbox-input">
+    </div>
+    <div class="link-form__property">
+      <input placeholder="URL einfügen..." class="link-form__input skillbox-input">
+    </div>
+  </div>
+</template>
+
+<script>
+  import TrashIcon from '@/components/icons/TrashIcon';
+
+  export default {
+    components: {
+      TrashIcon
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  .link-form {
+    &__property {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 11px;
+    }
+    &__input {
+      width: $modal-input-width;
+    }
+  }
+</style>

client/src/components/icons/TrashIcon.vue

@@ -0,0 +1,9 @@
+<template>
+  <svg id="shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+    <path
+      d="M78,81.62A8.37,8.37,0,0,1,69.64,90H30.36A8.37,8.37,0,0,1,22,81.62V23H78V81.62ZM36.2,14.92A4.91,4.91,0,0,1,41.1,10H58.9a4.91,4.91,0,0,1,4.9,4.9V18H36.2ZM87.5,18H68.79V14.92A9.9,9.9,0,0,0,58.9,5H41.1a9.9,9.9,0,0,0-9.89,9.89V18H12.5a2.5,2.5,0,1,0,0,5H17V81.62A13.37,13.37,0,0,0,30.36,95H69.64A13.37,13.37,0,0,0,83,81.62V23H87.5a2.5,2.5,0,0,0,0-5Z"/>
+    <path d="M50,81a2.49,2.49,0,0,0,2.5-2.5V34.41a2.5,2.5,0,0,0-5,0V78.52A2.5,2.5,0,0,0,50,81Z"/>
+    <path d="M33.71,78.28a2.49,2.49,0,0,0,2.5-2.5V37.15a2.5,2.5,0,0,0-5,0V75.78A2.5,2.5,0,0,0,33.71,78.28Z"/>
+    <path d="M66.29,78.28a2.49,2.49,0,0,0,2.5-2.5V37.15a2.5,2.5,0,0,0-5,0V75.78A2.49,2.49,0,0,0,66.29,78.28Z"/>
+  </svg>
+</template>

client/src/styles/_variables.scss

@@ -48,4 +48,4 @@ $brown: #EB9E77;
 
 //modal stuff
 $modal-lateral-padding: 34px;
-$modal-input-width: 500px;
+$modal-input-width: 560px;