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

<template>
  <modal>
    <template #header>
      <modal-input
        :placeholder="titlePlaceholder"
        :value="localContentBlock.title"
        :error="error"
        data-cy="modal-title-input"
        @input="updateTitle"
      />
      <checkbox
        :checked="localContentBlock.isAssignment"
        :item="localContentBlock"
        :label="'Auftrag'"
        class="contents-form__task"
        v-if="taskSelection"
        @input="setContentBlockType"
      />
    </template>

    <add-content-element
      :index="-1"
      class="contents-form__add"
      @add-element="addElement"
    />
    <div
      class="contents-form__element"
      v-for="(element, index) in localContentBlock.contents"
      :key="index"
    >
      <content-element
        :element="element"
        @update="update(index, $event)"
        @remove="remove(index)"
      />

      <add-content-element
        :index="index"
        class="contents-form__add"
        @add-element="addElement"
      />
    </div>

    <template #footer>
      <div>
        <a
          :class="{'button--disabled': disableSave}"
          class="button button--primary"
          data-cy="modal-save-button"
          @click="save"
        >Speichern</a>
        <a
          class="button"
          @click="$emit('hide')"
        >Abbrechen</a>
      </div>
    </template>
  </modal>
</template>

<script>
  import {meQuery} from '@/graphql/queries';

  const ModalInput = () => import(/* webpackChunkName: "content-forms" */'@/components/ModalInput');
  const AddContentElement = () => import(/* webpackChunkName: "content-forms" */'@/components/AddContentElement');
  const ContentElement = () => import(/* webpackChunkName: "content-forms" */'@/components/content-block-form/ContentElement');

  const Modal = () => import('@/components/Modal');
  const Checkbox = () => import('@/components/ui/Checkbox');

  export default {
    props: {
      contentBlock: Object,
      blockType: {
        type: String,
        default: 'ContentBlock',
      },
      showTaskSelection: {
        type: Boolean,
        default: false,
      },
      disableSave: {
        type: Boolean,
        default: false,
      },
    },

    components: {
      ContentElement,
      Modal,
      ModalInput,
      AddContentElement,
      Checkbox,
    },

    data() {
      return {
        error: false,
        localContentBlock: Object.assign({}, {
          title: this.contentBlock.title,
          contents: [...this.contentBlock.contents],
          id: this.contentBlock.id || undefined,
          isAssignment: this.contentBlock.type && this.contentBlock.type.toLowerCase() === 'task',
        }),
        me: {},
      };
    },

    apollo: {
      me: meQuery,
    },

    computed: {
      titlePlaceholder() {
        return this.blockType === 'RoomEntry' ? 'Titel für Raumeintrag erfassen' : 'Titel für Inhaltsblock erfassen';
      },
      taskSelection() {
        return this.showTaskSelection && this.me.permissions.includes('users.can_manage_school_class_content');
      },
    },

    methods: {
      setContentBlockType(checked) {
        this.localContentBlock.isAssignment = checked;
      },
      update(index, element) {
        this.localContentBlock.contents.splice(index, 1, element);
      },
      save() {
        if (!this.disableSave) {
          if (!this.localContentBlock.title) {
            this.error = true;
            return false;
          }
          this.$emit('save', this.localContentBlock);
        }
      },
      updateTitle(title) {
        this.localContentBlock.title = title;
        this.error = false;
      },
      addElement(index) {
        this.localContentBlock.contents.splice(index + 1, 0, {
          hideAssignment: this.blockType !== 'ContentBlock',
        });
      },
      remove(index) {
        this.localContentBlock.contents.splice(index, 1);
      },

    },
  };
</script>

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

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

    &__element {

    }

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

    &__remove {
    }

    &__trash-icon {
    }

    &__add {
      grid-column: 1 / span 2;
    }

    &__task {
      margin: 15px 0 10px;
    }
  }
</style>