Break out component for refactoring
All checks were successful
Build BAB Application Deployment Artifact / build (push) Successful in 1m53s
All checks were successful
Build BAB Application Deployment Artifact / build (push) Successful in 1m53s
This commit is contained in:
261
src/components/task/TaskEditComponent.vue
Normal file
261
src/components/task/TaskEditComponent.vue
Normal file
@@ -0,0 +1,261 @@
|
|||||||
|
<template>
|
||||||
|
<q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
|
||||||
|
<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>
|
||||||
|
</q-form>
|
||||||
|
</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 newTask = reactive<Task>({
|
||||||
|
description: '',
|
||||||
|
due_date: date.formatDate(Date.now(), 'YYYY-MM-DD'),
|
||||||
|
required_skills: [],
|
||||||
|
title: '',
|
||||||
|
tags: [],
|
||||||
|
duration: 0,
|
||||||
|
volunteers: [],
|
||||||
|
volunteers_required: 0,
|
||||||
|
status: 'ready',
|
||||||
|
depends_on: [],
|
||||||
|
boat: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
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';
|
||||||
|
};
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
async function onSubmit() {
|
||||||
|
console.log(newTask);
|
||||||
|
try {
|
||||||
|
// It would probably be more performant to store the tags as objects in the
|
||||||
|
// form, and then extract the ID's before submitting.
|
||||||
|
newTask.required_skills = skillTagList.value.map((s) => s['$id']);
|
||||||
|
newTask.tags = taskTagList.value.map((s) => s['$id']);
|
||||||
|
newTask.depends_on = dependsList.value.map((d) => d['$id']) as string[];
|
||||||
|
await taskStore.addTask(newTask);
|
||||||
|
console.log('Created Task');
|
||||||
|
router.go(-1);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to create new Task: ', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function onReset() {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -1,166 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<toolbar-component pageTitle="Tasks" />
|
<ToolbarComponent pageTitle="Tasks" />
|
||||||
<q-page padding>
|
<q-page padding>
|
||||||
<div class="q-pa-md" style="max-width: 400px">
|
<div class="q-pa-md" style="max-width: 400px">
|
||||||
<q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
|
<TaskEditComponent />
|
||||||
<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>
|
|
||||||
</q-form>
|
|
||||||
</div>
|
</div>
|
||||||
</q-page>
|
</q-page>
|
||||||
</template>
|
</template>
|
||||||
@@ -168,115 +10,4 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import ToolbarComponent from 'src/components/ToolbarComponent.vue';
|
import ToolbarComponent from 'src/components/ToolbarComponent.vue';
|
||||||
import TaskEditComponent from 'src/components/task/TaskEditComponent.vue';
|
import TaskEditComponent from 'src/components/task/TaskEditComponent.vue';
|
||||||
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 newTask = reactive<Task>({
|
|
||||||
description: '',
|
|
||||||
due_date: date.formatDate(Date.now(), 'YYYY-MM-DD'),
|
|
||||||
required_skills: [],
|
|
||||||
title: '',
|
|
||||||
tags: [],
|
|
||||||
duration: 0,
|
|
||||||
volunteers: [],
|
|
||||||
volunteers_required: 0,
|
|
||||||
status: 'ready',
|
|
||||||
depends_on: [],
|
|
||||||
boat: '',
|
|
||||||
});
|
|
||||||
|
|
||||||
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';
|
|
||||||
};
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
async function onSubmit() {
|
|
||||||
console.log(newTask);
|
|
||||||
try {
|
|
||||||
// It would probably be more performant to store the tags as objects in the
|
|
||||||
// form, and then extract the ID's before submitting.
|
|
||||||
newTask.required_skills = skillTagList.value.map((s) => s['$id']);
|
|
||||||
newTask.tags = taskTagList.value.map((s) => s['$id']);
|
|
||||||
newTask.depends_on = dependsList.value.map((d) => d['$id']) as string[];
|
|
||||||
await taskStore.addTask(newTask);
|
|
||||||
console.log('Created Task');
|
|
||||||
router.go(-1);
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to create new Task: ', error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function onReset() {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user