Remove Broken component
This commit is contained in:
@@ -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>
|
|
||||||
Reference in New Issue
Block a user