|
|
|
|
@@ -1,220 +0,0 @@
|
|
|
|
|
<template>
|
|
|
|
|
<q-input
|
|
|
|
|
filled
|
|
|
|
|
v-model="newTask.title"
|
|
|
|
|
label="Task Title"
|
|
|
|
|
hint="A short description of the task"
|
|
|
|
|
lazy-rules
|
|
|
|
|
:rules="[
|
|
|
|
|
(val: string | any[]) =>
|
|
|
|
|
(val && val.length > 0) || 'Please enter a title for the task',
|
|
|
|
|
]"
|
|
|
|
|
/>
|
|
|
|
|
<q-editor
|
|
|
|
|
filled
|
|
|
|
|
v-model="newTask.description"
|
|
|
|
|
label="Detailed Description"
|
|
|
|
|
hint="A detailed description of the task"
|
|
|
|
|
lazy-rules
|
|
|
|
|
placeholder="Enter a detailed description..."
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
|
|
<q-input
|
|
|
|
|
filled
|
|
|
|
|
v-model="newTask.due_date"
|
|
|
|
|
mask="date"
|
|
|
|
|
:rules="[dateRule]"
|
|
|
|
|
hint="Enter the due date"
|
|
|
|
|
lazy-rules
|
|
|
|
|
>
|
|
|
|
|
<template v-slot:append>
|
|
|
|
|
<q-icon name="event" class="cursor-pointer">
|
|
|
|
|
<q-popup-proxy cover transition-show="scale" transition-hide="scale">
|
|
|
|
|
<q-date v-model="newTask.due_date" @input="updateDateISO" today-btn>
|
|
|
|
|
<div class="row items-center justify-end">
|
|
|
|
|
<q-btn v-close-popup label="Close" color="primary" flat />
|
|
|
|
|
</div>
|
|
|
|
|
</q-date>
|
|
|
|
|
</q-popup-proxy>
|
|
|
|
|
</q-icon>
|
|
|
|
|
</template>
|
|
|
|
|
</q-input>
|
|
|
|
|
<div>
|
|
|
|
|
<q-select
|
|
|
|
|
label="Skills Required"
|
|
|
|
|
hint="Add a list of required skills, to help people find things in their ability"
|
|
|
|
|
v-model="skillTagList"
|
|
|
|
|
use-input
|
|
|
|
|
use-chips
|
|
|
|
|
multiple
|
|
|
|
|
input-debounce="250"
|
|
|
|
|
@new-value="addTag"
|
|
|
|
|
:options="skillTagOptions"
|
|
|
|
|
option-label="name"
|
|
|
|
|
option-value="$id"
|
|
|
|
|
@filter="filterSkillTags"
|
|
|
|
|
new-value-mode="add-unique"
|
|
|
|
|
>
|
|
|
|
|
</q-select>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<q-select
|
|
|
|
|
label="Tags"
|
|
|
|
|
hint="Add Tags to help with searching"
|
|
|
|
|
v-model="taskTagList"
|
|
|
|
|
use-input
|
|
|
|
|
use-chips
|
|
|
|
|
multiple
|
|
|
|
|
input-debounce="250"
|
|
|
|
|
@new-value="addTag"
|
|
|
|
|
:options="taskTagOptions"
|
|
|
|
|
option-label="name"
|
|
|
|
|
option-value="$id"
|
|
|
|
|
@filter="filterTaskTags"
|
|
|
|
|
new-value-mode="add-unique"
|
|
|
|
|
>
|
|
|
|
|
</q-select>
|
|
|
|
|
</div>
|
|
|
|
|
<q-input
|
|
|
|
|
label="Estimated Duration"
|
|
|
|
|
v-model.number="newTask.duration"
|
|
|
|
|
type="number"
|
|
|
|
|
filled
|
|
|
|
|
suffix="hrs"
|
|
|
|
|
style="max-width: 200px"
|
|
|
|
|
/>
|
|
|
|
|
<q-input
|
|
|
|
|
label="Number of Required Volunteers"
|
|
|
|
|
v-model.number="newTask.volunteers_required"
|
|
|
|
|
type="number"
|
|
|
|
|
filled
|
|
|
|
|
style="max-width: 200px"
|
|
|
|
|
/>
|
|
|
|
|
<q-select
|
|
|
|
|
label="Status of Task"
|
|
|
|
|
v-model="newTask.status"
|
|
|
|
|
:options="TASKSTATUS"
|
|
|
|
|
>
|
|
|
|
|
</q-select>
|
|
|
|
|
<div>
|
|
|
|
|
<q-select
|
|
|
|
|
label="Dependencies"
|
|
|
|
|
hint="Add a list of tasks that need to be complete before this one"
|
|
|
|
|
v-model="dependsList"
|
|
|
|
|
use-input
|
|
|
|
|
multiple
|
|
|
|
|
input-debounce="250"
|
|
|
|
|
:options="tasks"
|
|
|
|
|
option-label="title"
|
|
|
|
|
option-value="$id"
|
|
|
|
|
@filter="filterTasks"
|
|
|
|
|
>
|
|
|
|
|
</q-select>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<q-select
|
|
|
|
|
label="Boat"
|
|
|
|
|
hint="Add a boat, if applicable"
|
|
|
|
|
v-model="newTask.boat"
|
|
|
|
|
use-input
|
|
|
|
|
emit-value
|
|
|
|
|
input-debounce="250"
|
|
|
|
|
:options="boatList"
|
|
|
|
|
option-label="name"
|
|
|
|
|
option-value="$id"
|
|
|
|
|
>
|
|
|
|
|
</q-select>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<q-btn label="Submit" type="submit" color="primary" flat class="q-ml-sm" />
|
|
|
|
|
<q-btn label="Reset" type="reset" color="primary" flat class="q-ml-sm" />
|
|
|
|
|
<q-btn
|
|
|
|
|
label="Cancel"
|
|
|
|
|
color="secondary"
|
|
|
|
|
flat
|
|
|
|
|
class="q-ml-sm"
|
|
|
|
|
@click="$router.go(-1)"
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
|
|
import { reactive, ref, Ref } from 'vue';
|
|
|
|
|
import { useRouter } from 'vue-router';
|
|
|
|
|
import { useTaskStore, TASKSTATUS } from 'src/stores/task';
|
|
|
|
|
import type { TaskTag, SkillTag, Task } from 'src/stores/task';
|
|
|
|
|
import { date } from 'quasar';
|
|
|
|
|
import { Boat, useBoatStore } from 'src/stores/boat';
|
|
|
|
|
|
|
|
|
|
const props = defineProps<{ newTask: Task }>();
|
|
|
|
|
|
|
|
|
|
const taskStore = useTaskStore();
|
|
|
|
|
|
|
|
|
|
taskStore.fetchSkillTags();
|
|
|
|
|
taskStore.fetchTaskTags();
|
|
|
|
|
taskStore.fetchTasks();
|
|
|
|
|
|
|
|
|
|
const tasks = ref<Task[]>(taskStore.tasks);
|
|
|
|
|
|
|
|
|
|
const boatList = ref<Boat[]>(useBoatStore().boats);
|
|
|
|
|
|
|
|
|
|
const skillTagOptions = ref<SkillTag[]>();
|
|
|
|
|
const skillTagList = ref<SkillTag[]>([]);
|
|
|
|
|
|
|
|
|
|
const taskTagOptions = ref<TaskTag[]>();
|
|
|
|
|
const taskTagList = ref<TaskTag[]>([]);
|
|
|
|
|
|
|
|
|
|
const dependsList = ref<Task[]>([]);
|
|
|
|
|
|
|
|
|
|
function filterSkillTags(val: string, update: (cb: () => void) => void): void {
|
|
|
|
|
return filterTags(skillTagOptions, taskStore.skillTags, val, update);
|
|
|
|
|
}
|
|
|
|
|
function filterTaskTags(val: string, update: (cb: () => void) => void): void {
|
|
|
|
|
return filterTags(taskTagOptions, taskStore.taskTags, val, update);
|
|
|
|
|
}
|
|
|
|
|
function filterTasks(val: string, update: (cb: () => void) => void): void {
|
|
|
|
|
if (val === '') {
|
|
|
|
|
update(() => {
|
|
|
|
|
tasks.value = taskStore.tasks;
|
|
|
|
|
});
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
update(() => {
|
|
|
|
|
tasks.value = taskStore.filterTasks(val);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function filterTags(
|
|
|
|
|
optionVar: Ref<SkillTag[] | TaskTag[] | undefined>,
|
|
|
|
|
optionSrc: SkillTag[] | TaskTag[],
|
|
|
|
|
val: string,
|
|
|
|
|
update: (cb: () => void) => void
|
|
|
|
|
): void {
|
|
|
|
|
if (val === '') {
|
|
|
|
|
update(() => {
|
|
|
|
|
optionVar.value = optionSrc;
|
|
|
|
|
});
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
update(() => {
|
|
|
|
|
optionVar.value = optionSrc.filter((v) =>
|
|
|
|
|
v.name.toLowerCase().includes(val.toLowerCase())
|
|
|
|
|
);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function addTag(tag: string) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
// Method to update the model in ISO 8601 format
|
|
|
|
|
const updateDateISO = (value: string) => {
|
|
|
|
|
newTask.due_date = date.formatDate(value, 'YYYY-MM-DD');
|
|
|
|
|
};
|
|
|
|
|
const dateRule = (val: string) => {
|
|
|
|
|
// Check if the date is valid using Quasar's date utils if needed
|
|
|
|
|
// For simplicity, we are directly checking the date string validity
|
|
|
|
|
return (val && !isNaN(Date.parse(val))) || 'Please enter a valid date';
|
|
|
|
|
};
|
|
|
|
|
</script>
|