oys/bab-app
1
0
Fork 0
Code Issues 29 Pull Requests Actions Packages Projects 1 Releases 2 Wiki Activity

Updates to Tasks

Browse Source
This commit is contained in:
Patrick Toal
2024-04-08 10:18:55 -04:00
parent 5d9dbb0653
commit 6ab1aa26b1
5 changed files with 108 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/task/TaskEditComponent.vue
View File

@@ -1,5 +1,5 @@
<template>
<q-form @submit="onSubmit" @reset="onReset" class="q-gutter-md">
<q-form @submit="onSubmit" class="q-gutter-md">
<q-input
filled
v-model="modifiedTask.title"
@@ -52,6 +52,9 @@
use-input
use-chips
multiple
clearable
emit-value
map-options
input-debounce="250"
@new-value="addTag"
:options="skillTagOptions"
@@ -70,13 +73,14 @@
use-input
use-chips
multiple
clearable
emit-value
map-options
input-debounce="250"
@new-value="addTag"
:options="taskTagOptions"
option-label="name"
option-value="$id"
@filter="filterTaskTags"
new-value-mode="add-unique"
>
</q-select>
</div>
@@ -108,6 +112,9 @@
v-model="modifiedTask.depends_on"
use-input
multiple
clearable
emit-value
map-options
input-debounce="250"
:options="tasks"
option-label="title"
@@ -122,6 +129,9 @@
hint="Add a boat, if applicable"
v-model="modifiedTask.boat"
use-input
clearable
emit-value
map-options
input-debounce="250"
:options="boatList"
option-label="name"
@@ -137,7 +147,6 @@
flat
class="q-ml-sm"
/>
<q-btn label="Reset" type="reset" color="primary" flat class="q-ml-sm" />
<q-btn
label="Cancel"
color="secondary"
@@ -173,20 +182,17 @@ const defaultTask = <Task>{
depends_on: [],
};
taskStore.fetchTasks();
const { taskId } = props;
const targetTask = taskId && taskStore.tasks.find((t) => t.$id === taskId);
const modifiedTask = reactive(targetTask ? targetTask : defaultTask);
taskStore.fetchSkillTags();
taskStore.fetchTaskTags();
taskStore.fetchTasks();
const tasks = ref<Task[]>(taskStore.tasks);
let tasks = taskStore.tasks;
const boatList = ref<Boat[]>(useBoatStore().boats);
const skillTagOptions = ref<SkillTag[]>();
const taskTagOptions = ref<TaskTag[]>();
const skillTagOptions = ref<SkillTag[]>(taskStore.skillTags);
const taskTagOptions = ref<TaskTag[]>(taskStore.taskTags);
function filterSkillTags(val: string, update: (cb: () => void) => void): void {
return filterTags(skillTagOptions, taskStore.skillTags, val, update);
@@ -197,13 +203,13 @@ function filterTaskTags(val: string, update: (cb: () => void) => void): void {
function filterTasks(val: string, update: (cb: () => void) => void): void {
if (val === '') {
update(() => {
tasks.value = taskStore.tasks;
tasks = taskStore.tasks;
});
return;
}
update(() => {
tasks.value = taskStore.filterTasks(val);
tasks = taskStore.filterTasksByTitle(val);
});
}
@@ -242,17 +248,18 @@ const dateRule = (val: string) => {
const router = useRouter();
async function onSubmit() {
console.log(modifiedTask);
//console.log(modifiedTask);
try {
await taskStore.addTask(modifiedTask);
console.log('Created Task');
if (modifiedTask.$id) {
await taskStore.updateTask(modifiedTask);
console.log('Updated Task: ' + modifiedTask.$id);
} else {
await taskStore.addTask(modifiedTask);
console.log('Created Task');
}
router.go(-1);
} catch (error) {
console.error('Failed to create new Task: ', error);
}
}
function onReset() {
return;
}
</script>

71
src/components/task/TaskTableComponent.vue
View File

@@ -9,6 +9,7 @@
no-results-label="The filter didn't uncover any results"
selection="multiple"
v-model:selected="selected"
@row-click="onRowClick"
>
<template v-slot:top>
<q-btn
@@ -43,37 +44,28 @@
</q-tr>
</template>
<template v-slot:body="props">
<q-tr :props="props">
<q-td key="desc" auto-width>
<q-checkbox dense v-model="props.selected"></q-checkbox>
</q-td>
<q-td v-for="col in props.cols" :key="col.name" :props="props">
<div v-if="col.name == 'skills'" class="q-gutter-sm">
<q-badge
v-for="skill in props.row.required_skills"
:key="skill"
:color="skill.tagColour"
text-color="white"
>
{{ skill.name }}
</q-badge>
</div>
<div v-else-if="col.name == 'tags'" class="q-gutter-sm">
<q-badge
v-for="tag in props.row.tags"
:key="tag"
:color="tag.colour"
text-color="white"
>
{{ tag.name }}
</q-badge>
</div>
<div v-else>
{{ col.value }}
</div>
</q-td>
</q-tr>
<template v-slot:body-cell-skills="props">
<q-td :props="props" class="q-gutter-sm">
<q-badge
v-for="skill in props.value"
:key="skill"
:color="skill.tagColour"
text-color="white"
:label="skill.name"
/>
</q-td>
</template>
<template v-slot:body-cell-tags="props">
<q-td :props="props" class="q-gutter-sm">
<q-badge
v-for="tag in props.value"
:key="tag"
:color="tag.colour"
text-color="white"
:label="tag.name"
/>
</q-td>
</template>
</q-table>
</div>
@@ -84,8 +76,9 @@ import { defineProps, ref } from 'vue';
import { useTaskStore, Task } from 'src/stores/task';
import { QTableProps, date, useQuasar } from 'quasar';
import { useBoatStore } from 'src/stores/boat';
import BoatPickerComponent from '../boat/BoatPickerComponent.vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const selected = ref([]);
const loading = ref(false); // Placeholder
const columns = <QTableProps['columns']>[
@@ -116,14 +109,15 @@ const columns = <QTableProps['columns']>[
name: 'skills',
align: 'left',
label: 'Skills',
field: 'required_skills',
field: (row) =>
row.required_skills.map((s: string) => taskStore.getSkillById(s)),
sortable: false,
},
{
name: 'tags',
align: 'left',
label: 'Tags',
field: 'tags',
field: (row) => row.tags.map((s: string) => taskStore.getTaskTagById(s)),
sortable: false,
},
{
@@ -156,7 +150,7 @@ const columns = <QTableProps['columns']>[
format: (val) => {
return (
val
.map((t: string) => lookupTaskFromId(t))
.map((t: string) => taskStore.getTaskById(t))
.filter((t: Task) => t)
.map((t: Task) => t.title)
.join(', ') || null
@@ -168,11 +162,10 @@ const columns = <QTableProps['columns']>[
const props = defineProps<{ tasks: Task[] }>();
const taskStore = useTaskStore();
const $q = useQuasar();
taskStore.fetchTaskTags();
taskStore.fetchSkillTags();
function lookupTaskFromId(id: string): Task {
return taskStore.tasks.find((t) => t.$id === id) || undefined;
function onRowClick(evt: Event, row: Task) {
console.log(row);
router.push({ name: 'edit-task', params: { id: row.$id } });
}
function deleteTasks() {

5
src/pages/task/TaskEditPage.vue
View File

@@ -2,12 +2,15 @@
<ToolbarComponent pageTitle="Tasks" />
<q-page padding>
<div class="q-pa-md" style="max-width: 400px">
<TaskEditComponent />
<TaskEditComponent :taskId="taskId" />
</div>
</q-page>
</template>
<script setup lang="ts">
const taskId = useRoute().params.id as string;
console.log(taskId);
import ToolbarComponent from 'src/components/ToolbarComponent.vue';
import TaskEditComponent from 'src/components/task/TaskEditComponent.vue';
import { useRoute } from 'vue-router';
</script>

2
src/router/routes.ts
View File

@@ -57,7 +57,7 @@ const routes: RouteRecordRaw[] = [
name: 'task-index',
},
{
path: 'edit',
path: '/:id/edit',
component: () => import('pages/task/TaskEditPage.vue'),
name: 'edit-task',
},

86
src/stores/task.ts
View File

@@ -1,23 +1,27 @@
import { defineStore } from 'pinia';
import { AppwriteIds, databases, ID } from 'src/boot/appwrite';
import type { Models } from 'appwrite';
import { Boat } from './boat';
export const TASKSTATUS = ['ready', 'complete', 'waiting', 'archived'];
export interface Task extends Partial<Models.Document> {
title: string;
description: string;
required_skills: SkillTag[];
tags: TaskTag[];
/* Array of Appwrite Document IDs */
required_skills: string[];
/* Array of Appwrite Document IDs */
tags: string[];
due_date: string;
duration: number;
/* Array of Appwrite Document IDs */
volunteers: string[];
volunteers_required: number;
status: string;
depends_on: Task[];
boat?: Boat;
} // TODO: convert some of these strings into objects.
/* Array of Appwrite Document IDs */
depends_on: string[];
/* Appwrite ID of a Boat resource */
boat?: string[];
}
export interface TaskTag extends Models.Document {
name: string;
@@ -46,24 +50,7 @@ export const useTaskStore = defineStore('tasks', {
AppwriteIds.databaseId,
AppwriteIds.collectionIdTask
);
this.tasks = response.documents.map((document) => {
// TODO: Should this be a GraphQL query, instead?
// Map over `required_skills` and replace each skill ID with the corresponding skill object from `this.skillTags`
const updatedRequiredSkills = document.required_skills.map(
(skillId: string) =>
this.skillTags.find((skillTag) => skillTag.$id === skillId) || {}
);
const updatedTaskTags = document.tags.map((tagid: string) =>
this.taskTags.find((taskTag) => taskTag.$id === tagid)
);
// Update the `required_skills` property of the document with the new array of skill objects
return {
...document,
required_skills: updatedRequiredSkills,
tags: updatedTaskTags,
};
}) as Task[];
this.tasks = response.documents as Task[];
} catch (error) {
console.error('Failed to fetch tasks', error);
}
@@ -112,10 +99,6 @@ export const useTaskStore = defineStore('tasks', {
},
async addTask(task: Task) {
const newTask = <Models.Document>{ ...task };
newTask.required_skills = task.required_skills.map((s) => s['$id']);
newTask.tags = task.tags.map((s) => s['$id']);
newTask.depends_on = task.depends_on.map((d) => d['$id']);
newTask.boat = task.boat?.$id;
try {
const response = await databases.createDocument(
AppwriteIds.databaseId,
@@ -128,9 +111,32 @@ export const useTaskStore = defineStore('tasks', {
console.error('Failed to add task:', error);
}
},
async updateTask(task: Task) {
const newTask = <Partial<Models.Document>>{
...task,
id: undefined,
$databaseId: undefined,
$collectionId: undefined,
};
if (!task.$id) {
console.error('No Task ID!');
return;
}
try {
const response = await databases.updateDocument(
AppwriteIds.databaseId,
AppwriteIds.collectionIdTask,
task.$id,
newTask
);
this.tasks.push(response as Task);
} catch (error) {
console.error('Failed to update task:', error);
}
},
// TODO: Enhance this store to include offline caching, and subscription notification when items change on the server.
filterTasks(searchQuery: string) {
filterTasksByTitle(searchQuery: string) {
const result = this.tasks.filter((task) =>
task.title.toLowerCase().includes(searchQuery.toLowerCase())
);
@@ -140,20 +146,14 @@ export const useTaskStore = defineStore('tasks', {
},
// Add more actions as needed (e.g., updateTask, deleteTask)
getters: {
// A getter to reconstruct the hierarchical structure from flat task data
taskHierarchy: (state) => {
function buildHierarchy(
tasks: Task[],
parentId: string | null = null
): Task[] {
return tasks
.filter((task) => task.parentId === parentId)
.map((task) => ({
...task,
subtasks: buildHierarchy(tasks, task.$id), // Assuming $id is the task ID field
}));
}
return buildHierarchy(state.tasks);
getTaskById: (state) => (id: string) => {
return state.tasks.find((task) => task.$id === id) || null;
},
getTaskTagById: (state) => (id: string) => {
return state.taskTags.find((tag) => tag.$id === id) || null;
},
getSkillById: (state) => (id: string) => {
return state.skillTags.find((tag) => tag.$id === id) || null;
},
},
});