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

<template>
  <div class="content-element">
    <content-block-element-chooser-widget
      :class="['content-element__component', 'content-element__chooser']"
      v-bind="element"
      v-if="isChooser"

      @change-type="changeType"
    />
    <content-form-section
      :title="title"
      :icon="icon"
      v-else
    >
      <div class="content-element__section">
        <component
          :class="['content-element__component']"
          v-bind="element"
          :is="component"

          @change-text="changeText"

          @link-change-url="changeUrl"
          @change-url="changeUrl"

          @switch-to-document="switchToDocument"

          @assignment-change-title="changeAssignmentTitle"
          @assignment-change-assignment="changeAssignmentAssignment"
        />

        <a
          class="contents-form__remove icon-button"
          @click="$emit('remove')"
        >
          <trash-icon
            class="contents-form__trash-icon icon-button__icon"
          />
        </a>
      </div>
    </content-form-section>
  </div>
</template>

<script>
  import ContentFormSection from '@/components/content-block-form/ContentFormSection';
  const TrashIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/TrashIcon');
  const ContentBlockElementChooserWidget = () => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/ContentBlockElementChooserWidget');
  const LinkForm = () => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/LinkForm');
  const VideoForm = () => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/VideoForm');
  const ImageForm = () => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/ImageForm');
  const DocumentForm = () => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/DocumentForm');
  const AssignmentForm = () => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/AssignmentForm');
  const TextForm = () => import(/* webpackChunkName: "content-forms" */'@/components/content-forms/TextForm');

  const CHOOSER = 'content-block-element-chooser-widget';

  export default {
    props: {
      element: {
        type: Object,
        default: null
      }
    },

    components: {
      ContentFormSection,
      TrashIcon,
      ContentBlockElementChooserWidget,
      LinkForm,
      VideoForm,
      ImageForm,
      DocumentForm,
      AssignmentForm,
      TextForm,
    },

    computed: {
      isChooser() {
        return this.component === CHOOSER;
      },
      type() {
        return this.getType(this.element);
      },
      component() {
        return this.type.component;
      },
      title() {
        return this.type.title;
      },
      icon() {
        return this.type.icon;
      }
    },

    methods: {
      getType(element) {
        switch (element.type) {
          case 'link_block':
            return {
              component: 'link-form',
              title: 'Link',
              icon: 'link-icon'
            };
          case 'video_block':
            return {
              component: 'video-form',
              title: 'Video',
              icon: 'video-icon'
            };
          case 'image_url_block':
            return {
              component: 'image-form',
              title: 'Bild',
              icon: 'image-icon'
            };
          case 'text_block':
            return {
              component: 'text-form',
              title: 'Text',
              icon: 'text-icon'
            };
          case 'assignment':
            return {
              component: 'assignment-form',
              title: 'Aufgabe & Ergebnis',
              icon: 'speech-bubble-icon'
            };
          case 'document_block':
            return {
              component: 'document-form',
              title: 'Dokument',
              icon: 'document-icon'
            };
        }
        return {
          component: CHOOSER,
          title: '',
          icon: ''
        };
      },
      _updateProperty(value, key) {
        // const content = this.localContentBlock.contents[index];
        const content = this.element;
        this.update({
          ...content,
          value: {
            ...content.value,
            [key]: value,
          },
        });
      },
      changeUrl(value) {
        this._updateProperty(value, 'url');
      },
      changeText(value) {
        this._updateProperty(value, 'text');
      },
      changeAssignmentTitle(value) {
        this._updateProperty(value, 'title');
      },
      changeAssignmentAssignment(value) {
        this._updateProperty(value, 'assignment');
      },
      changeType({type, convertToList}, value) {
        let el = {
          type: type,
          value: Object.assign({}, value),
        };
        switch (type) {
          case 'text_block':
            el = {
              ...el,
              value: {
                text: '',
              },
            };
            break;
          case 'link_block':
            el = {
              ...el,
              value: {
                text: '',
                url: '',
              },
            };
            break;
          case 'video_block':
            el = {
              ...el,
              value: {
                url: '',
              },
            };
            break;
          case 'document_block':
            el = {
              ...el,
              value: Object.assign({
                url: '',
              }, value),
            };
            break;
          case 'image_url_block':
            el = {
              ...el,
              value: {
                url: '',
              },
            };
            break;
        }

        if (convertToList) {
          el = {
            type: 'content_list_item',
            contents: [el]
          };
        }
        this.update(el);
      },
      update(element) {
        this.$emit('update', element);
      },
      switchToDocument(value) {
        this.changeType('document_block', value);
      },
    }
  };
</script>

<style scoped lang="scss">
  @import '~styles/helpers';

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

    &__chooser {
      grid-column: 1 / span 2;
    }
  }
</style>