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

Basic Task Display

Browse Source
This commit is contained in:
Patrick Toal
2024-03-30 11:45:59 -04:00
parent 435438aaa8
commit d752898865
11 changed files with 169 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@@ -13,7 +13,7 @@
"build": "quasar build"
},
"dependencies": {
"@quasar/extras": "^1.16.4",
"@quasar/extras": "^1.16.11",
"appwrite": "^13.0.0",
"pinia": "^2.1.7",
"vue": "3",
@@ -31,7 +31,7 @@
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-vue": "^9.0.0",
"prettier": "^2.5.1",
"quasar": "^2.14.6",
"quasar": "^2.15.2",
"typescript": "^4.5.4",
"workbox-build": "^7.0.0",
"workbox-cacheable-response": "^7.0.0",

1
quasar.config.js
View File

@@ -9,6 +9,7 @@
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-js
const { configure } = require('quasar/wrappers');
const path = require('path');
module.exports = configure(function (/* ctx */) {
return {

2
src/boot/appwrite.ts
View File

@@ -21,6 +21,8 @@ client
const AppwriteIds = {
databaseId: '65ee1cbf9c2493faf15f',
collectionIdTask: '65ee1cd5b550023fae4f',
collectionIdTaskTags: '65ee21d72d5c8007c34c',
collectionIdSkillTags: '66072582a74d94a4bd01',
};
const account = new Account(client);

6
src/components/task/NewTaskComponent.vue Normal file
View File

@@ -0,0 +1,6 @@
<template>
<div>My component</div>
</template>
<script setup lang="ts">
</script>

19
src/components/task/TaskComponent.vue
View File

@@ -1,6 +1,23 @@
<template>
<div>My component</div>
<q-item-section>
<q-item-label overline>{{ task.title }}</q-item-label>
<q-item-label caption lines="2">{{ task.description }} </q-item-label>
<q-item-label caption>Due: {{ task.dueDate }}</q-item-label>
</q-item-section>
<q-expansion-item
v-if="task.subtasks && task.subtasks.length"
expand-separator
label="Subtasks"
default-opened
>
<TaskListComponent :tasks="task.subtasks" />
</q-expansion-item>
<!-- TODO: Add date formatting Mixin? https://jerickson.net/how-to-format-dates-in-vue-3/ -->
</template>
<script setup lang="ts">
import { defineProps } from 'vue';
import type { Task } from 'src/stores/task';
const props = defineProps<{ task: Task }>();
</script>

28
src/components/task/TaskListComponent.vue
View File

@@ -1,30 +1,9 @@
<template>
<div class="q-pa-md" style="max-width: 350px">
<q-list>
<q-item v-for="task in tasks" :key="task.id">
<q-expansion-item
v-if="task.subtasks && task.subtasks.length"
expand-separator
label="Subtasks"
default-opened
>
{{ task }}
<q-expansion-item
:header-inset-level="1"
expand-separator
label="Subtasks"
default-opened
>
<TaskList :tasks="task.subtasks" />
</q-expansion-item>
</q-expansion-item>
<q-item-section v-else>
<q-item-label overline>{{ task.title }}</q-item-label>
<q-item-label caption lines="2">{{ task.description }} </q-item-label>
<q-item-label caption>Due: {{ task.dueDate }}</q-item-label>
<!-- TODO: Add date formatting Mixin? https://jerickson.net/how-to-format-dates-in-vue-3/ -->
</q-item-section>
</q-item>
<div v-for="task in tasks" :key="task.id">
<TaskComponent :task="task" />
</div>
</q-list>
</div>
</template>
@@ -32,6 +11,7 @@
<script setup lang="ts">
import { defineProps } from 'vue';
import type { Task } from 'src/stores/task';
import TaskComponent from './TaskComponent.vue';
const props = defineProps<{ tasks: Task[] }>();
</script>

87
src/components/task/TaskTableComponent.vue Normal file
View File

@@ -0,0 +1,87 @@
<template>
<div class="q-pa-md">
<q-table
:rows="tasks"
:columns="columns"
row-key="$id"
no-data-label="I didn't find anything for you"
no-results-label="The filter didn't uncover any results"
>
<template v-slot:top>
<q-btn
color="primary"
:disable="loading"
label="New Task"
@click="newTask"
/>
<q-btn
v-if="tasks.length !== 0"
class="q-ml-sm"
color="primary"
:disable="loading"
label="Delete task(s)"
@click="deleteTask"
/>
<q-space />
<q-input
borderless
dense
debounce="300"
color="primary"
v-model="filter"
>
<template v-slot:append>
<q-icon name="search" />
</template>
</q-input>
</template>
</q-table>
<q-table :rows="taskStore.skillTags"></q-table>
<q-table :rows="taskStore.taskTags"></q-table>
</div>
</template>
<script setup lang="ts">
import { defineProps, ref } from 'vue';
import { useTaskStore, Task } from 'src/stores/task';
import type { QTableProps } from 'quasar';
const loading = ref(false); // Placeholder
const columns = <QTableProps['columns']>[
{
name: 'title',
required: true,
label: 'Title',
align: 'left',
field: 'title',
sortable: true,
},
{
name: 'description',
align: 'left',
label: 'Description',
field: 'description',
sortable: false,
},
{
name: 'status',
align: 'left',
label: 'Status',
field: 'status',
sortable: true,
},
];
const props = defineProps<{ tasks: Task[] }>();
const taskStore = useTaskStore();
taskStore.fetchTaskTags();
taskStore.fetchSkillTags();
function newTask() {
return;
}
function deleteTask() {
return;
}
const filter = ref('');
</script>

6
src/pages/TaskPage.vue
View File

@@ -1,15 +1,19 @@
<template>
<toolbar-component pageTitle="Tasks" />
<q-page padding>
<TaskListComponent :tasks="taskStore.taskHierarchy" />
<TaskListComponent v-if="$q.screen.lt.sm" :tasks="taskStore.tasks" />
<TaskTableComponent v-else :tasks="taskStore.tasks" />
</q-page>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useTaskStore } from 'stores/task';
import ToolbarComponent from 'src/components/ToolbarComponent.vue';
import TaskListComponent from 'src/components/task/TaskListComponent.vue';
import TaskTableComponent from 'src/components/task/TaskTableComponent.vue';
const taskStore = useTaskStore();
taskStore.fetchTasks(); // Fetch on mount
</script>

35
src/stores/task.ts
View File

@@ -11,9 +11,20 @@ export interface Task extends Models.Document {
completed: boolean;
}
export interface TaskTag extends Models.Document {
name: string;
description: string;
}
export interface SkillTag extends Models.Document {
name: string;
description: string;
}
export const useTaskStore = defineStore('tasks', {
state: () => ({
tasks: [] as Task[],
taskTags: [] as TaskTag[],
skillTags: [] as SkillTag[],
}),
actions: {
@@ -28,6 +39,30 @@ export const useTaskStore = defineStore('tasks', {
console.error('Failed to fetch tasks', error);
}
},
async fetchTaskTags() {
// This is fine for a small number of tags, but more than a few hundred tags, we'd need to optimize
try {
const response = await databases.listDocuments(
AppwriteIds.databaseId,
AppwriteIds.collectionIdTaskTags
);
this.taskTags = response.documents as TaskTag[];
} catch (error) {
console.error('Failed to fetch tasks', error);
}
},
async fetchSkillTags() {
// This is fine for a small number of tags, but more than a few hundred tags, we'd need to optimize
try {
const response = await databases.listDocuments(
AppwriteIds.databaseId,
AppwriteIds.collectionIdSkillTags
);
this.skillTags = response.documents as SkillTag[];
} catch (error) {
console.error('Failed to fetch tasks', error);
}
},
async addTask(task: Task) {
try {
const response = await databases.createDocument(

2
tsconfig.json
View File

@@ -3,4 +3,4 @@
"compilerOptions": {
"baseUrl": "."
}
}
}

16
yarn.lock
View File

@@ -1115,10 +1115,10 @@
vite "^2.9.13"
webpack-merge "^5.8.0"
"@quasar/extras@^1.16.4":
version "1.16.9"
resolved "https://registry.npmjs.org/@quasar/extras/-/extras-1.16.9.tgz"
integrity sha512-SlOhwzXyPQHWgQIS2ncyDdYdksCJvUYNtgsDQqzAKEG3r3d/ejOxvThle79HTK3Q6HB+gQWFG21Ux00Osr5XSw==
"@quasar/extras@^1.16.11":
version "1.16.11"
resolved "https://registry.yarnpkg.com/@quasar/extras/-/extras-1.16.11.tgz#84b1efb9097a6e58c3ebfdd5da83ac658056a35c"
integrity sha512-sbTBHOA+Hi7ah0P6qSm+xfRXqwJ94ct3NKA3Lkq3iNPYuHD7VXbSWtP2eA7Cu9Fd0WjVoPbngf6yFGg46U3IfQ==
"@quasar/quasar-app-extension-qcalendar@^4.0.0-beta.15":
version "4.0.0-beta.16"
@@ -4151,10 +4151,10 @@ qs@6.11.0:
dependencies:
side-channel "^1.0.4"
quasar@^2.14.6:
version "2.14.7"
resolved "https://registry.yarnpkg.com/quasar/-/quasar-2.14.7.tgz#dac7a16a4275f01b9c4be43948413a92fa10c801"
integrity sha512-xp4qpEmiGmXMfImWpA/WSeIHT6RojtxJDHtJcuuJCUmUknaC5UOXsd0aRtQghIQ1WCkx/Fhhg5qmyQuuDx6uEg==
quasar@^2.15.2:
version "2.15.2"
resolved "https://registry.yarnpkg.com/quasar/-/quasar-2.15.2.tgz#8c945c87d8723696614a56a17ffcc041d8a26ab6"
integrity sha512-euCm5Elo5SfGNRY18HvKAknkBwesoUAFhZ6BxmliiEVHGes53ZcUKnMwZU/XsRhwiC6VQzBBSk/U0iEcdp/NyA==
queue-microtask@^1.2.2:
version "1.2.3"