diff options
Diffstat (limited to 'components/Editor/Quest/Modal/DuplicateQuestModal.vue')
| -rw-r--r-- | components/Editor/Quest/Modal/DuplicateQuestModal.vue | 69 |
1 files changed, 69 insertions, 0 deletions
diff --git a/components/Editor/Quest/Modal/DuplicateQuestModal.vue b/components/Editor/Quest/Modal/DuplicateQuestModal.vue new file mode 100644 index 0000000..bcd3782 --- /dev/null +++ b/components/Editor/Quest/Modal/DuplicateQuestModal.vue @@ -0,0 +1,69 @@ +<script setup lang="ts"> +import Modal from '@/components/Control/Modal.vue'; +import Button from '@/components/Control/Button.vue'; +import { computed, ref } from 'vue'; +import { useSessionStore } from '@/stores/session'; + +const model = defineModel(); + +const emit = defineEmits(['duplicate']); + +const props = defineProps({ + questId: String, +}); + +const session = useSessionStore(); + +const newQuestId = ref(props.questId); + +const isDuplicate = computed(() => { + return session.getQuestById(newQuestId.value!) !== undefined; +}); + +</script> + +<template> + <Modal v-model="model"> + <template v-slot:header> + <h2>Duplicate '{{ questId }}'</h2> + </template> + + <template v-slot:body> + <div id="body"> + <div class="option-group"> + <label for="new-type">ID of new quest</label> + <input id="new-type" name="new-type" type="text" v-model="newQuestId" /> + </div> + <p v-if="isDuplicate" class="error-text">Name is not unique.</p> + <p>A Quest ID must be unique, alphanumeric, and not contain any spaces.</p> + <div id="confirm" class="control-group"> + <Button + :icon="['fas', 'fa-times']" + :label="'Cancel'" + @click="model = false" + ></Button> + <Button + type="solid" + :icon="['fas', 'fa-check']" + :label="'Duplicate'" + :disabled="isDuplicate" + @click="emit('duplicate', newQuestId)" + ></Button> + </div> + </div> + </template> + </Modal> +</template> + +<style scoped> +#confirm { + display: flex; + justify-content: flex-end; +} + +#body { + display: flex; + flex-direction: column; + gap: 0.5rem; +} +</style>
\ No newline at end of file |