skillbox/client/src/components/NewContentBlockWizard.vue

<template>
  <modal>
    <content-block-title-input slot="header" v-on:update-title="updateTitle" :title="title"></content-block-title-input>
    <add-content-element class="new-content-block-wizard__add"
                         v-on:add-element="addElement"
                         :index="-1"
    ></add-content-element>
    <div v-for="(element, index) in elements" :key="index" class="new-content-block-wizard__element">
      <component
        class="new-content-block-wizard__element-component"
        :is="type(element)"
        :class="{'new-content-block-wizard__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:video-change-url="changeVideoUrl">
      </component>
      <a class="new-content-block-wizard__remove" v-on:click="removeElement(index)">
        <trash-icon v-if="type(element) !== 'content-block-element-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"
                           :index="index"
      ></add-content-element>
    </div>

    <div slot="footer">
      <a class="button" v-on:click="saveContentBlock">Speichern</a>
      <a class="button" v-on:click="hideModal">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';

  import NEW_CONTENT_BLOCK_MUTATION from '@/graphql/gql/mutations/addContentBlock.gql';

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

    methods: {
      type(element) {
        switch (element.type) {
          case 'link_block':
            return 'link-form';
          case 'video_block':
            return 'video-form';
          case 'image':
            return 'image-form';
          case 'text_block':
            return 'text-form';
          case 'exercise':
            return 'exercise-form';
          case 'document':
            return 'document-form';
        }
        return 'content-block-element-chooser-widget'
      },
      _updateProperty(value, index, key) {
        this.elements.splice(index, 1, {
          ...this.elements[index],
          [key]: value
        });
      },
      changeLinkUrl(value, index) {
        this._updateProperty(value, index, 'url')
      },
      changeLinkText(value, index) {
        this._updateProperty(value, index, 'text')
      },
      changeVideoUrl(value, index) {
        this._updateProperty(value, index, 'url')
      },
      changeTextValue(value, index) {
        this._updateProperty(value, index, 'text')
      },
      removeElement(index) {
        this.elements.splice(index, 1);
      },
      addElement(index) {
        this.elements.splice(index + 1, 0, {})
      },
      updateTitle(title) {
        this.title = title;
      },
      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;
        }

        this.elements.splice(index, 1, el);
      },
      hideModal() {
        this.$store.dispatch('resetContentBlock');
        this.$store.dispatch('hideModal');
      },
      saveContentBlock() {
        this.$apollo.mutate({
          mutation: NEW_CONTENT_BLOCK_MUTATION,
          variables: {
            input: {
              contentBlock: {
                title: this.title,
                contents: this.elements
              },
              after: this.$store.state.contentBlockPosition.after,
              parent: this.$store.state.contentBlockPosition.parent
            }
          },
          update: () => {
            this.$store.dispatch('updateContentBlocks');
            this.hideModal();
          }
        });
      }
    },

    data() {
      return {
        title: '',
        elements: [
          {}
          // {
          //   type: 'image'
          // },
          // {
          //   type: 'video',
          //   url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
          // },
          // {
          //   type: 'video',
          //   url: 'https://vimeo.com/267384185'
          // }
        ]
      }
    }
  }
</script>

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

  .new-content-block-wizard {
    /* 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>