aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/Editor/Quest/QuestTasksOptionsPanel.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/Editor/Quest/QuestTasksOptionsPanel.vue')
-rw-r--r--src/components/Editor/Quest/QuestTasksOptionsPanel.vue25
1 files changed, 24 insertions, 1 deletions
diff --git a/src/components/Editor/Quest/QuestTasksOptionsPanel.vue b/src/components/Editor/Quest/QuestTasksOptionsPanel.vue
index 12b1263..a79e636 100644
--- a/src/components/Editor/Quest/QuestTasksOptionsPanel.vue
+++ b/src/components/Editor/Quest/QuestTasksOptionsPanel.vue
@@ -1,9 +1,10 @@
<script setup lang="ts">
import { useSessionStore, type EditorQuest } from '@/stores/session';
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
import EditorOptionsPanel from '@/components/Editor/EditorOptionsPanel.vue';
import TaskConfiguration from '@/components/Editor/Quest/Task/TaskConfiguration.vue';
import Button from '@/components/Control/Button.vue';
+import AddTaskModal from './Task/Modal/AddTaskModal.vue';
const props = defineProps<{
questId: string;
@@ -14,6 +15,19 @@ const sessionStore = useSessionStore();
const quest = computed(() => {
return sessionStore.getQuestById(props.questId) as EditorQuest;
});
+
+const showAddTaskModal = ref(false);
+
+const addTask = (newId: string, newType: string) => {
+ sessionStore.getQuestById(props.questId)!.tasks[newId] = {
+ id: newId,
+ config: {
+ type: newType,
+ },
+ };
+
+ showAddTaskModal.value = false;
+};
</script>
<template>
@@ -21,6 +35,7 @@ const quest = computed(() => {
<div id="options">
<h2>Tasks <code>({{ Object.keys(quest.tasks).length }})</code></h2>
+ <p v-if="Object.keys(quest.tasks).length === 0" class="error-text">This quest does not have any tasks.</p>
<TaskConfiguration v-for="(task, taskId) in quest.tasks" :key="taskId" :taskId="String(taskId)" :quest="quest" />
<div id="controls">
@@ -29,10 +44,18 @@ const quest = computed(() => {
:icon="['fas', 'fa-plus']"
type="solid"
label="Add task"
+ @click="showAddTaskModal = true"
/>
</div>
</div>
</EditorOptionsPanel>
+
+ <AddTaskModal
+ v-if="quest"
+ v-model="showAddTaskModal"
+ :questId="questId"
+ @add="addTask"
+ />
</template>