skillbox/client/src/components/content-block-form/ContentBlockForm.vue

<template>
  <modal>
    <content-block-title-input slot="header" v-on:update-title="updateTitle" :title="contentBlock.title"
                               :error="error"></content-block-title-input>
    <add-content-element class="content-block-form__add"
                         v-on:add-element="addElement"
                         :index="-1"
    ></add-content-element>
    <div v-for="(element, index) in contentBlock.elements" :key="index" class="content-block-form__element">
      <component
        class="content-block-form__element-component"
        :is="type(element)"
        :class="{'content-block-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"
        v-on:link-change-text="changeLinkText"
        v-on:text-change-value="changeTextValue"
        v-on:document-change-url="changeDocumentUrl"
        v-on:video-change-url="changeVideoUrl">
      </component>
      <a class="content-block-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>
      </a>

      <add-content-element class="content-block-form__add"
                           v-on:add-element="addElement"
                           :index="index"
      ></add-content-element>
    </div>

    <div slot="footer">
      <a class="button" v-on:click="save">Speichern</a>
      <a class="button" v-on:click="$emit('hide')">Abbrechen</a>
    </div>
  </modal>
</template>

<script>
  import Modal from '@/components/Modal';
  import ContentBlockElementChooserWidget from '@/components/content-forms/ContentBlockElementChooserWidget';
  import ContentBlockTitleInput from '@/components/ContentBlockTitleInput';
  import AddContentElement from '@/components/AddContentElement';
  import LinkForm from '@/components/content-forms/LinkForm';
  import VideoForm from '@/components/content-forms/VideoForm';
  import ImageForm from '@/components/content-forms/ImageForm';
  import DocumentForm from '@/components/content-forms/DocumentForm';
  import ExerciseForm from '@/components/content-forms/ExerciseForm';
  import TextForm from '@/components/content-forms/TextForm';
  import TrashIcon from '@/components/icons/TrashIcon';

  export default {
    props: ['content-block'],

    components: {
      Modal,
      ContentBlockElementChooserWidget,
      ContentBlockTitleInput,
      AddContentElement,
      LinkForm,
      VideoForm,
      ImageForm,
      DocumentForm,
      ExerciseForm,
      TextForm,
      TrashIcon
    },

    data() {
      return {
        error: false,
        localContentBlock: Object.assign({}, this.contentBlock)
      }
    },

    methods: {
      type(element) {
        switch (element.type) {
          case 'link_block':
            return 'link-form';
          case 'video_block':
            return 'video-form';
          case 'image_block':
            return 'image-form';
          case 'text_block':
            return 'text-form';
          case 'exercise':
            return 'exercise-form';
          case 'document_block':
            return 'document-form';
        }
        return 'content-block-element-chooser-widget'
      },
      _updateProperty(value, index, key) {
        this.localContentBlock.elements.splice(index, 1, {
          ...this.localContentBlock.elements[index],
          [key]: value
        });
      },
      changeLinkUrl(value, index) {
        this._updateProperty(value, index, 'url')
      },
      changeLinkText(value, index) {
        // debugger;
        this._updateProperty(value, index, 'text')
      },
      changeVideoUrl(value, index) {
        this._updateProperty(value, index, 'url')
      },
      changeDocumentUrl(value, index) {
        this._updateProperty(value, index, 'url')
      },
      changeTextValue(value, index) {
        this._updateProperty(value, index, 'text')
      },
      removeElement(index) {
        this.localContentBlock.elements.splice(index, 1);
      },
      addElement(index) {
        this.localContentBlock.elements.splice(index + 1, 0, {})
      },
      updateTitle(title) {
        this.localContentBlock.title = title;
        this.error = false;
      },
      changeType(index, type) {
        let el = {
          type: type
        };
        switch (type) {
          case 'text_block':
            el = {
              ...el,
              text: ''
            };
            break;
          case 'link_block':
            el = {
              ...el,
              text: '',
              url: ''
            };
            break;
          case 'video_block':
            el = {
              ...el,
              url: ''
            };
            break;
          case 'document_block':
            el = {
              ...el,
              url: ''
            };
            break;
        }

        this.localContentBlock.elements.splice(index, 1, el);
      },
      save() {
        if (!this.localContentBlock.title) {
          this.error = true;
          return false;
        }
        this.$emit('save', this.localContentBlock);
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "@/styles/_variables.scss";

  .content-block-form {
    /* top level does not exist, because of the modal */

    &__element {
      display: grid;
      grid-template-columns: 1fr 50px;
      grid-auto-rows: auto;
      /*width: 95%; // reserve space for scrollbar*/
    }

    &__element-component {
      margin-bottom: 25px;
    }

    &__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>