aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/Editor
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/Editor')
-rw-r--r--src/components/Editor/EditorPane.vue54
-rw-r--r--src/components/Editor/Quest/Modal/DuplicateQuestModal.vue69
-rw-r--r--src/components/Editor/Quest/Modal/RenameQuestModal.vue12
-rw-r--r--src/components/Editor/Quest/QuestOptionsPanel.vue7
4 files changed, 130 insertions, 12 deletions
diff --git a/src/components/Editor/EditorPane.vue b/src/components/Editor/EditorPane.vue
index 22458cb..21d1f80 100644
--- a/src/components/Editor/EditorPane.vue
+++ b/src/components/Editor/EditorPane.vue
@@ -9,15 +9,17 @@ import CategoryChildrenOptionsPanel from '@/components/Editor/Category/CategoryC
import Button from '@/components/Control/Button.vue';
import DeleteQuestModal from '@/components/Editor/Quest/Modal/DeleteQuestModal.vue';
import RenameQuestModal from '@/components/Editor/Quest/Modal/RenameQuestModal.vue';
+import DuplicateQuestModal from '@/components/Editor/Quest/Modal/DuplicateQuestModal.vue';
const sessionStore = useSessionStore();
const selectedType = computed(() => sessionStore.editor.selected.type);
const selectedId = computed(() => sessionStore.editor.selected.id);
+
const selectedName = computed(() => {
- if (selectedType.value === 'Quest') {
+ if (selectedType.value === 'Quest' && selectedId.value) {
return sessionStore.getQuestById(selectedId.value)?.display.name;
- } else if (selectedType.value === 'Category') {
+ } else if (selectedType.value === 'Category' && selectedId.value) {
return sessionStore.getCategoryById(selectedId.value)?.display.name;
} else {
return '';
@@ -25,6 +27,8 @@ const selectedName = computed(() => {
});
const categoryFromSelectedQuest = computed(() => {
+ if (!selectedId.value || selectedType.value !== 'Quest') return null;
+
const quest = sessionStore.getQuestById(selectedId.value);
if (quest) {
return sessionStore.getCategoryById(quest.options.category) || null;
@@ -35,6 +39,25 @@ const categoryFromSelectedQuest = computed(() => {
const showDeleteModal = ref(false);
const showRenameModal = ref(false);
+const showDuplicateModal = ref(false);
+
+const renameQuest = (oldId: string, newId: string) => {
+ sessionStore.changeQuestId(oldId, newId);
+ sessionStore.editor.selected.id = newId;
+ showRenameModal.value = false;
+};
+
+const deleteQuest = (questId: string) => {
+ sessionStore.deleteQuest(questId);
+ sessionStore.setEditorSelected(null, null);
+ showDeleteModal.value = false;
+};
+
+const duplicateQuest = (oldId: string, newId: string) => {
+ sessionStore.duplicateQuest(oldId, newId);
+ sessionStore.editor.selected.id = newId;
+ showDuplicateModal.value = false;
+};
</script>
<template>
@@ -67,6 +90,12 @@ const showRenameModal = ref(false);
:label="'YAML'"
></Button>
<Button
+ v-if="selectedType === 'Quest'"
+ :icon="['fas', 'fa-copy']"
+ :label="'Duplicate'"
+ @click="showDuplicateModal = true"
+ ></Button>
+ <Button
:icon="['fas', 'fa-pen']"
:label="'Rename'"
@click="showRenameModal = true"
@@ -76,6 +105,12 @@ const showRenameModal = ref(false);
:label="'Delete'"
@click="showDeleteModal = true"
></Button>
+ <Button
+ type="solid"
+ :disabled="true"
+ :icon="['fas', 'fa-save']"
+ :label="'Save'"
+ ></Button>
</span>
</div>
@@ -89,15 +124,26 @@ const showRenameModal = ref(false);
</div>
<DeleteQuestModal
- v-if="selectedType === 'Quest'"
+ v-if="selectedType === 'Quest' && selectedId"
v-model="showDeleteModal"
+ :key="`delete-quest-${selectedId}`"
:questId="selectedId"
+ @delete="() => selectedId && deleteQuest(selectedId)"
/>
<RenameQuestModal
- v-if="selectedType === 'Quest'"
+ v-if="selectedType === 'Quest' && selectedId"
v-model="showRenameModal"
+ :key="`rename-quest-${selectedId}`"
:questId="selectedId"
+ @update="newId => selectedId && renameQuest(selectedId, newId)"
/>
+ <DuplicateQuestModal
+ v-if="selectedType === 'Quest' && selectedId"
+ v-model="showDuplicateModal"
+ :key="`duplicate-quest-${selectedId}`"
+ :questId="selectedId"
+ @duplicate="newId => selectedId && duplicateQuest(selectedId, newId)"
+ />
</template>
<style scoped>
diff --git a/src/components/Editor/Quest/Modal/DuplicateQuestModal.vue b/src/components/Editor/Quest/Modal/DuplicateQuestModal.vue
new file mode 100644
index 0000000..bcd3782
--- /dev/null
+++ b/src/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
diff --git a/src/components/Editor/Quest/Modal/RenameQuestModal.vue b/src/components/Editor/Quest/Modal/RenameQuestModal.vue
index 5b1e0ed..2ad1481 100644
--- a/src/components/Editor/Quest/Modal/RenameQuestModal.vue
+++ b/src/components/Editor/Quest/Modal/RenameQuestModal.vue
@@ -1,7 +1,8 @@
<script setup lang="ts">
import Modal from '@/components/Control/Modal.vue';
import Button from '@/components/Control/Button.vue';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
+import { useSessionStore } from '@/stores/session';
const model = defineModel();
@@ -11,7 +12,14 @@ const props = defineProps({
questId: String,
});
+const session = useSessionStore();
+
const newQuestId = ref(props.questId);
+
+const isDuplicate = computed(() => {
+ return session.getQuestById(newQuestId.value!) !== undefined;
+});
+
</script>
<template>
@@ -26,6 +34,7 @@ const newQuestId = ref(props.questId);
<label for="new-type">New quest ID</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
@@ -37,6 +46,7 @@ const newQuestId = ref(props.questId);
type="solid"
:icon="['fas', 'fa-check']"
:label="'Rename'"
+ :disabled="isDuplicate"
@click="emit('update', newQuestId)"
></Button>
</div>
diff --git a/src/components/Editor/Quest/QuestOptionsPanel.vue b/src/components/Editor/Quest/QuestOptionsPanel.vue
index 3c1e599..a462126 100644
--- a/src/components/Editor/Quest/QuestOptionsPanel.vue
+++ b/src/components/Editor/Quest/QuestOptionsPanel.vue
@@ -3,7 +3,6 @@ import { useSessionStore, type EditorQuest } from '@/stores/session';
import { computed, ref } from 'vue';
import EditorOptionsPanel from '@/components/Editor/EditorOptionsPanel.vue';
import Checkbox from '@/components/Control/Checkbox.vue';
-import DeleteQuestModal from '@/components/Editor/Quest/Modal/DeleteQuestModal.vue';
const props = defineProps<{
questId: string;
@@ -21,7 +20,6 @@ const knownQuests = computed(() => {
return sessionStore.session.quests.map((quest) => quest.id);
});
-const showDeleteModal = ref(false);
</script>
<template>
@@ -124,11 +122,6 @@ const showDeleteModal = ref(false);
</div>
</div>
</EditorOptionsPanel>
-
- <DeleteQuestModal
- v-model="showDeleteModal"
- :questId="props.questId"
- />
</template>
<style src="vue-multiselect/dist/vue-multiselect.css" />
generated by cgit v1.2.3-70-g09d2 (git 2.51.2) at 2025-11-25 05:04:40 +0000