skillbox/client/src/pages/createContentBlock.vue

<template>
  <div class="create-content-block content-list__parent">
    <div class="create-content-block__content">
      <h1 class="heading-1 create-content-block__heading">
        Inhaltsblock erfassen
      </h1>

      <toggle
        :bordered="false"
        :checked="true"
        class="create-content-block__task-toggle"
        label="Inhaltsblock als Auftrag formatieren"
      />

      <content-form-section title="Titel">
        <input-with-label
          :value="title"
          label="Name"
          placeholder="z.B. Auftrag 3"
          @input="title=$event"
        />
      </content-form-section>
      <add-content-link
        class="create-content-block__segment"
        @click="addBlock(0)"
      />
      <div
        class="content-list content-list--creator create-content-block__segment"
        v-for="(block, outer) in blocks"
        :key="block.id"
      >
        <ol
          class="content-list__item create-content-block__segment"
          v-if="block.type === 'content_list_item'"
        >
          <li
            class="create-content-block__segment"
            v-for="(content, index) in block.contents"
            :key="content.id"
          >
            <content-element
              :element="content"
              class="create-content-block__segment"
              @update="update(index, $event, outer)"
              @remove="remove(outer, index)"
            />

            <add-content-link
              class="create-content-block__add-button"
              @click="addBlock(outer, index)"
            />
          </li>
        </ol>
        <content-element
          :element="block"
          class="create-content-block__segment"
          v-else
          @update="update(outer, $event)"
          @remove="remove(outer)"
        />

        <add-content-link
          class="create-content-block__segment"
          @click="addBlock(outer)"
        />
      </div>

      <footer class="create-content-block__footer">
        <a class="button button--primary">Speichern</a>
        <a class="button">Abbrechen</a>
      </footer>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import Toggle from '@/components/ui/Toggle';
  import ContentFormSection from '@/components/content-block-form/ContentFormSection';
  import InputWithLabel from '@/components/ui/InputWithLabel';
  import AddContentLink from '@/components/content-block-form/AddContentLink';
  import ContentElement from '@/components/content-block-form/ContentElement';

  export default Vue.extend({
    components: {
      ContentElement,
      AddContentLink,
      InputWithLabel,
      ContentFormSection,
      Toggle,
    },

    data: () => ({
      title: '',
      blocks: [
        {
          id: 23,
          type: 'content_list_item',
          contents: [
            {
              id: 2,
            }
          ]
        }
      ],
    }),
    mounted() {
      // this.addBlock(0);
    },

    methods: {
       update(index, element, parent) {
        console.log(index, element, parent);
        if (parent === undefined) {
          console.log('parent undefined');
          this.blocks = [
            ...this.blocks.slice(0, index),
            element,
            ...this.blocks.slice(index + 1)
          ];
        } else {
          console.log('parent yes');
          const parentBlock = this.blocks[parent];
          this.blocks = [
            ...this.blocks.slice(0, parent),
            {
              ...parentBlock,
              contents: [
                ...parentBlock.contents.slice(0, index),
                element,
                ...parentBlock.contents.slice(index + 1),
              ]
            },
            ...this.blocks.slice(parent + 1)
          ];
        }
        console.log('updating', index, element);
        // this.blocks.splice(index, 1, element);
      },
      addBlock(outerIndex, innerIndex) {
        console.log('add block', outerIndex, innerIndex);
        // this.blocks.splice(outerIndex, 0, {});
        if (innerIndex !== undefined) {
          console.log('inner');
          const block = this.blocks[outerIndex];
          this.blocks = [
            ...this.blocks.slice(0, outerIndex),
            {
              ...block,
              contents: [
                ...block.contents.slice(0, innerIndex + 1),
                {
                  id: -1,
                  type: 'content-block-element-chooser-widget',
                },
                ...block.contents.slice(innerIndex + 1)
              ]
            },
            ...this.blocks.slice(outerIndex + 1)
          ];
        } else {
          console.log('outer');
          this.blocks = [
            ...this.blocks.slice(0, outerIndex + 1),
            {
              id: -1,
              type: 'content-block-element-chooser-widget',
              includeListOption: true
            },
            ...this.blocks.slice(outerIndex + 1)
          ];
        }
      },
      remove(outer, inner) {
         if (inner === undefined) {
           this.blocks = [
             ...this.blocks.slice(0, outer),
             ...this.blocks.slice(outer + 1)
           ];
         } else {
           this.blocks = [
             ...this.blocks.slice(0, outer),
             {
               ...this.blocks[outer],
               contents: [
                 ...this.blocks[outer].contents.slice(0, inner),
                 ...this.blocks[outer].contents.slice(inner+1),
               ]
             },
             ...this.blocks.slice(outer + 1)
           ];

         }
      },
    },
  });
</script>

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

  .create-content-block {
    width: 800px;
    max-width: 100%;
    display: grid;
    grid-template-columns: 800px;
    grid-template-rows: 1fr auto;
    grid-template-areas:
      'content'
      'footer';

    &__heading {
      @include heading-1;
    }

    &__task-toggle {
      margin-bottom: $large-spacing;
    }

    &__add-button {
    }

    &__segment {
      margin-bottom: $large-spacing;
      :last-child {
        margin-bottom: 0;
      }
    }

    &__content {
      grid-area: content;
      overflow-x: visible;
      overflow-y: auto;
      padding: 10px;
    }

    &__footer {
      margin-top: auto;
      grid-area: footer;
    }
  }
</style>