Refactor contents form modal and add new component for room entries

client/src/App.vue

@@ -11,6 +11,7 @@
   import Modal from '@/components/Modal';
   import NewContentBlockWizard from '@/components/content-block-form/NewContentBlockWizard';
   import EditContentBlockWizard from '@/components/content-block-form/EditContentBlockWizard';
+  import NewRoomEntryWizard from '@/components/rooms/room-entries/NewRoomEntryWizard';
 
   export default {
     name: 'App',
@@ -20,7 +21,8 @@
       SimpleLayout,
       Modal,
       NewContentBlockWizard,
-      EditContentBlockWizard
+      EditContentBlockWizard,
+      NewRoomEntryWizard
     },
 
     computed: {

client/src/components/ModalInput.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="content-block-title-input">
+  <div class="modal-input">
-    <input placeholder="Titel für Inhaltsblock erfassen"
+    <input :placeholder="placeholder"
-           class="content-block-title-input__inputfield skillbox-input"
+           class="modal-input__inputfield skillbox-input"
            :class="{'skillbox-input--error': error}"
-           :value="title"
+           :value="value"
-           v-on:input="$emit('update-title', $event.target.value)">
+           v-on:input="$emit('input', $event.target.value)">
-    <div class="content-block-title-input__error" v-if="error">
+    <div class="modal-input__error" v-if="error">
       Für Inhaltsblöcke muss zwingend ein Titel erfasst werden.
     </div>
   </div>
@@ -13,7 +13,7 @@
 
 <script>
   export default {
-    props: ['title', 'error']
+    props: ['value', 'error', 'placeholder']
   }
 </script>
 
@@ -21,7 +21,7 @@
   @import "@/styles/_variables.scss";
   @import "@/styles/_functions.scss";
 
-  .content-block-title-input {
+  .modal-input {
     &__inputfield {
       width: $modal-input-width;
     }

client/src/components/content-block-form/ContentsForm.vue

@@ -1,16 +1,25 @@
 <template>
   <modal>
-    <content-block-title-input slot="header" v-on:update-title="updateTitle" :title="localContentBlock.title"
+    <template slot="header">
-                               :error="error"></content-block-title-input>
+      <modal-input v-on:input="updateTitle"
-    <add-content-element class="content-block-form__add"
+                   :placeholder="titlePlaceholder"
+                   :value="localContentBlock.title"
+                   :error="error"></modal-input>
+
+      <modal-input v-if="blockType === 'RoomEntry'"
+                   placeholder="Untertitel für Raumeintrag erfassen"
+                   v-model="localContentBlock.subtitle"></modal-input>
+    </template>
+
+    <add-content-element class="contents-form__add"
                          v-on:add-element="addElement"
                          :index="-1"
     ></add-content-element>
-    <div v-for="(element, index) in localContentBlock.contents" :key="index" class="content-block-form__element">
+    <div v-for="(element, index) in localContentBlock.contents" :key="index" class="contents-form__element">
       <component
-        class="content-block-form__element-component"
+        class="contents-form__element-component"
         :is="type(element)"
-        :class="{'content-block-form__chooser': type(element) === 'content-block-element-chooser-widget'}"
+        :class="{'contents-form__chooser': type(element) === 'content-block-element-chooser-widget'}"
         :element="element" v-bind="element" :index="index"
         v-on:change-type="changeType"
         v-on:link-change-url="changeLinkUrl"
@@ -20,12 +29,12 @@
         v-on:image-change-url="changeImageUrl"
         v-on:video-change-url="changeVideoUrl">
       </component>
-      <a class="content-block-form__remove" v-on:click="removeElement(index)">
+      <a class="contents-form__remove" v-on:click="removeElement(index)">
         <trash-icon v-if="type(element) !== 'content-block-element-chooser-widget'"
-                    class="content-block-form__trash-icon"></trash-icon>
+                    class="contents-form__trash-icon"></trash-icon>
       </a>
 
-      <add-content-element class="content-block-form__add"
+      <add-content-element class="contents-form__add"
                            v-on:add-element="addElement"
                            :index="index"
       ></add-content-element>
@@ -41,7 +50,7 @@
 <script>
   import Modal from '@/components/Modal';
   import ContentBlockElementChooserWidget from '@/components/content-forms/ContentBlockElementChooserWidget';
-  import ContentBlockTitleInput from '@/components/ContentBlockTitleInput';
+  import ModalInput from '@/components/ModalInput';
   import AddContentElement from '@/components/AddContentElement';
   import LinkForm from '@/components/content-forms/LinkForm';
   import VideoForm from '@/components/content-forms/VideoForm';
@@ -52,12 +61,18 @@
   import TrashIcon from '@/components/icons/TrashIcon';
 
   export default {
-    props: ['content-block'],
+    props: {
+      'content-block': Object,
+      'block-type': {
+        type: String,
+        default: 'ContentBlock'
+      }
+    },
 
     components: {
       Modal,
       ContentBlockElementChooserWidget,
-      ContentBlockTitleInput,
+      ModalInput,
       AddContentElement,
       LinkForm,
       VideoForm,
@@ -74,11 +89,18 @@
         localContentBlock: Object.assign({}, {
           title: this.contentBlock.title,
           contents: [...this.contentBlock.contents],
-          id: this.contentBlock.id || undefined
+          id: this.contentBlock.id || undefined,
+          subtitle: this.contentBlock.subtitle
         })
       }
     },
 
+    computed: {
+      titlePlaceholder() {
+        return this.blockType === 'RoomEntry' ? 'Titel für Raumeintrag erfassen' : 'Titel für Inhaltsblock erfassen';
+      }
+    },
+
     methods: {
       type(element) {
         switch (element.type) {
@@ -200,7 +222,7 @@
 <style scoped lang="scss">
   @import "@/styles/_variables.scss";
 
-  .content-block-form {
+  .contents-form {
     /* top level does not exist, because of the modal */
 
     &__element {

client/src/components/content-block-form/EditContentBlockWizard.vue

@@ -1,13 +1,13 @@
 <template>
-  <content-block-form
+  <contents-form
     :content-block="contentBlock"
     @save="saveContentBlock"
     @hide="hideModal"
-  ></content-block-form>
+  ></contents-form>
 </template>
 
 <script>
-  import ContentBlockForm from '@/components/content-block-form/ContentBlockForm';
+  import ContentsForm from '@/components/content-block-form/ContentsForm';
 
   import store from '@/store/index';
 
@@ -17,7 +17,7 @@
 
   export default {
     components: {
-      ContentBlockForm
+      ContentsForm
     },
 
     methods: {

client/src/components/content-block-form/NewContentBlockWizard.vue

@@ -1,13 +1,13 @@
 <template>
-  <content-block-form
+  <contents-form
     :content-block="contentBlock"
     @save="saveContentBlock"
     @hide="hideModal"
-  ></content-block-form>
+  ></contents-form>
 </template>
 
 <script>
-  import ContentBlockForm from '@/components/content-block-form/ContentBlockForm';
+  import ContentsForm from '@/components/content-block-form/ContentsForm';
 
   import store from '@/store/index';
 
@@ -16,7 +16,7 @@
 
   export default {
     components: {
-      ContentBlockForm
+      ContentsForm
     },
 
     methods: {

client/src/components/rooms/room-entries/NewRoomEntryWizard.vue

@@ -0,0 +1,37 @@
+<template>
+  <contents-form
+    :content-block="entry"
+    @save="saveEntry"
+    block-type="RoomEntry"
+    @hide="hideModal"
+  ></contents-form>
+</template>
+
+<script>
+  import ContentsForm from '@/components/content-block-form/ContentsForm';
+
+  export default {
+    components: {
+      ContentsForm
+    },
+
+    data() {
+      return {
+        entry: {
+          title: '',
+          subtitle: '',
+          contents: []
+        }
+      }
+    },
+
+    methods: {
+      saveEntry(entry) {
+        console.log(entry);
+      },
+      hideModal() {
+        this.$store.dispatch('hideModal');
+      },
+    }
+  }
+</script>