🚧 Creates copy part of move item

src/components/InteractiveEditor/MoveItemTo.vue

@@ -0,0 +1,132 @@
+<template>
+  <modal
+    :name="modalName" @closed="close"
+    :resizable="true" width="40%" height="40%" classes="dashy-modal">
+    <div class="move-menu-inner">
+      <h3 class="move-title">Move or Copy Item</h3>
+      <p class="item-id">Editing {{ itemId }}</p>
+      <Radio
+        v-model="operation"
+        :options="['Move', 'Copy']"
+        label="Operation Type"
+        :initialOption="operation"
+      />
+      <Select
+        v-model="selectedSection"
+        :options="sectionList"
+        :initialOption="currentSection"
+        label="Destination"
+      />
+      <Radio
+        v-model="appendTo"
+        :options="['Begining', 'End']"
+        label="Append To"
+        :initialOption="appendTo"
+      />
+      <div class="button-wrapper">
+        <Button class="save-move" :click="save">
+          {{ $t('interactive-editor.menu.save-stage-btn') }}
+          <SaveIcon />
+        </Button>
+        <Button class="save-move" :click="close">
+          {{ $t('interactive-editor.menu.cancel-stage-btn') }}
+          <CancelIcon />
+        </Button>
+      </div>
+    </div>
+  </modal>
+</template>
+
+<script>
+import Select from '@/components/FormElements/Select';
+import Radio from '@/components/FormElements/Radio';
+import Button from '@/components/FormElements/Button';
+import SaveIcon from '@/assets/interface-icons/save-config.svg';
+import CancelIcon from '@/assets/interface-icons/config-close.svg';
+import StoreKeys from '@/utils/StoreMutations';
+import { modalNames } from '@/utils/defaults';
+
+export default {
+  name: 'MoveItemTo',
+  components: {
+    Select,
+    Radio,
+    Button,
+    SaveIcon,
+    CancelIcon,
+  },
+  props: {
+    itemId: String, // Unique ID for item
+    initialSection: String, // The current section
+  },
+  data() {
+    return {
+      selectedSection: '',
+      operation: 'Move',
+      appendTo: 'End',
+      modalName: `${modalNames.MOVE_ITEM_TO}-${this.itemId}`,
+    };
+  },
+  computed: {
+    sections() {
+      return this.$store.getters.sections;
+    },
+    sectionList() {
+      return this.sections.map((section) => section.name);
+    },
+    currentSection() {
+      let sectionName = '';
+      this.sections.forEach((section) => {
+        section.items.forEach((item) => {
+          if (item.id === this.itemId) sectionName = section.name;
+        });
+      });
+      return sectionName;
+    },
+  },
+  methods: {
+    save() {
+      const item = this.$store.getters.getItemById(this.itemId);
+      // Copy item to new section
+      const copyPayload = { item, toSection: this.selectedSection };
+      this.$store.commit(StoreKeys.COPY_ITEM, copyPayload);
+      // Remove item from previous section
+      if (this.operation === 'Move') {
+        // TODO: Remove
+      }
+      this.close();
+    },
+    close() {
+      this.$modal.hide(this.modalName);
+      this.$store.commit(StoreKeys.SET_MODAL_OPEN, false);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.move-menu-inner {
+  padding: 1rem;
+  background: var(--interactive-editor-background);
+  color: var(--interactive-editor-color);
+  height: 100%;
+  overflow-y: auto;
+  h3.move-title {
+    margin: 0.25rem 0;
+  }
+  p.item-id {
+    font-size: 1rem;
+    font-style: italic;
+    margin: 0.25rem 0;
+    opacity: var(--dimming-factor);
+  }
+  .button-wrapper {
+    display: flex;
+    width: fit-content;
+    margin: 1.5rem auto;
+    button {
+      margin: 0 0.5rem;
+    }
+  }
+}
+</style>