diff options
| author | Leonardo Bishop <me@leonardobishop.com> | 2024-03-12 17:48:23 +0000 |
|---|---|---|
| committer | Leonardo Bishop <me@leonardobishop.com> | 2024-03-12 17:48:23 +0000 |
| commit | addf95bc7e1e694cd9ba7797c8b0847bfecaf54c (patch) | |
| tree | 422e96cb24eb3b3ec9d4c96de555b8fa14239c59 /components/editor/task/modal/EditorTaskModalCreate.vue | |
| parent | 8664ad155c89d47affd94f8b0385ebf39841f1f8 (diff) | |
Add nuxt prefixes back to component file names
Diffstat (limited to 'components/editor/task/modal/EditorTaskModalCreate.vue')
| -rw-r--r-- | components/editor/task/modal/EditorTaskModalCreate.vue | 77 |
1 files changed, 77 insertions, 0 deletions
diff --git a/components/editor/task/modal/EditorTaskModalCreate.vue b/components/editor/task/modal/EditorTaskModalCreate.vue new file mode 100644 index 0000000..30e4cca --- /dev/null +++ b/components/editor/task/modal/EditorTaskModalCreate.vue @@ -0,0 +1,77 @@ +<script setup lang="ts"> +import { computed, ref } from 'vue'; +import { useSessionStore } from '@/stores/session'; +import { validateTaskId } from '@/lib/util'; + +const model = defineModel(); + +const emit = defineEmits(['add']); + +const session = useSessionStore(); + +const props = defineProps({ + questId: { + type: String, + required: true, + }, +}); + +const knownTasks = computed(() => session.getQuestById(props.questId)!.tasks); +const knownTaskTypes = computed(() => session.getKnownTaskTypes()); + +const newId = ref(''); +const newType = ref(''); +const unknownTaskType = computed(() => !knownTaskTypes.value.includes(newType.value)); +const invalidTaskId = computed(() => !validateTaskId(newId.value)); +const duplicateTaskId = computed(() => knownTasks.value[newId.value] !== undefined); + +const newTypeDescription = computed(() => session.getTaskDefinitionByTaskType(newType.value)?.description); +</script> + +<template> + <Modal v-model="model"> + <template v-slot:header> + <h2>Add new task</h2> + </template> + + <template v-slot:body> + <div id="body"> + <div class="option-group"> + <label for="new-type">Task ID</label> + <input id="new-id" name="new-id" type="text" v-model="newId" /> + <p v-if="invalidTaskId" class="error-text">Invalid task ID.</p> + <p v-if="duplicateTaskId" class="error-text">Task ID already exists.</p> + </div> + <div class="option-group"> + <label for="new-type">Task type</label> + <multiselect id="new-type" v-model="newType" :options="knownTaskTypes" :searchable="true" + placeholder="Select a new type"></multiselect> + <p v-if="unknownTaskType" class="error-text">Invalid task type.</p> + </div> + <p v-if="newTypeDescription">{{ newTypeDescription }}</p> + <p>A task ID must be unique, alphanumeric, and not contain any spaces.</p> + <div id="confirm" class="control-group"> + <Button :icon="['fas', 'times']" :label="'Cancel'" @click="model = false"></Button> + <Button type="solid" :icon="['fas', 'check']" :label="'Confirm'" + :disabled="unknownTaskType || invalidTaskId || duplicateTaskId" + @click="emit('add', newId, newType)"></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 |
