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