diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Control/Button.vue | 48 | ||||
| -rw-r--r-- | src/components/Editor/EditorPane.vue | 54 | ||||
| -rw-r--r-- | src/components/Editor/Quest/Modal/DuplicateQuestModal.vue | 69 | ||||
| -rw-r--r-- | src/components/Editor/Quest/Modal/RenameQuestModal.vue | 12 | ||||
| -rw-r--r-- | src/components/Editor/Quest/QuestOptionsPanel.vue | 7 |
5 files changed, 168 insertions, 22 deletions
diff --git a/src/components/Control/Button.vue b/src/components/Control/Button.vue index 044cca1..efd91c2 100644 --- a/src/components/Control/Button.vue +++ b/src/components/Control/Button.vue @@ -1,5 +1,5 @@ <script setup lang="ts"> -defineProps({ +const props = defineProps({ type: { type: String, required: false, @@ -7,11 +7,20 @@ defineProps({ }, label: String, icon: Array<String>, + disabled: Boolean, }); + +const emit = defineEmits(['click']); + +const onClick = (event: MouseEvent) => { + if (!props.disabled) { + emit('click', event); + } +}; </script> <template> - <a id="button" :class="{text: type === 'text', solid: type === 'solid'}" > + <a id="button" :class="{text: type === 'text', solid: type === 'solid', disabled: disabled}" @click.stop="onClick"> <font-awesome-icon :icon="icon" /> {{ label }} </a> @@ -31,6 +40,19 @@ defineProps({ transition: color 0.3s; font-weight: 700; cursor: pointer; + + &.disabled { + color: var(--color-text-mute); + cursor: not-allowed; + } + + &:hover { + color: var(--color-primary-dark); + } + + &.disabled:hover { + color: var(--color-text-mute); + } } .solid { @@ -41,14 +63,20 @@ defineProps({ border-radius: 4px; font-weight: 700; cursor: pointer; + + &.disabled { + background-color: var(--color-border); + color: var(--color-text-mute); + cursor: not-allowed; + } + + &:hover { + background-color: var(--color-primary-dark); + } + + &.disabled:hover { + background-color: var(--color-border); + } } -.text:hover { - color: var(--color-primary-dark); -} - -.solid:hover { - background-color: var(--color-primary-dark); -} - </style>
\ No newline at end of file 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" /> |