Patrick Toal
ea785887a1
Some checks failed
Build BAB Application Deployment Artifact / build (push) Failing after 2m1s
368 lines
9.8 KiB
Vue
368 lines
9.8 KiB
Vue
<template>
|
|
<div class="q-pa-sm">
|
|
<q-table
|
|
:rows="tasks"
|
|
:columns="columns"
|
|
:grid="$q.screen.xs"
|
|
dense
|
|
row-key="$id"
|
|
flatten
|
|
no-data-label="I didn't find anything for you"
|
|
no-results-label="The filter didn't uncover any results"
|
|
selection="multiple"
|
|
v-model:selected="selected"
|
|
:filter="searchFilter"
|
|
:filter-method="filterRows"
|
|
>
|
|
<template v-slot:top>
|
|
<q-select
|
|
style="width: 250px"
|
|
multiple
|
|
use-chips
|
|
clearable
|
|
label="Skills Filter"
|
|
input-debounce="250"
|
|
:options="skillTagOptions"
|
|
v-model="searchFilter.skillTags"
|
|
option-label="name"
|
|
option-value="$id"
|
|
>
|
|
</q-select>
|
|
<q-select
|
|
style="width: 250px"
|
|
multiple
|
|
use-chips
|
|
clearable
|
|
label="Tag Filter"
|
|
input-debounce="250"
|
|
:options="taskTagOptions"
|
|
v-model="searchFilter.taskTags"
|
|
option-label="name"
|
|
option-value="$id"
|
|
>
|
|
<template v-slot: prepend>
|
|
<q-icon name="wrench"></q-icon>
|
|
</template>
|
|
</q-select>
|
|
<q-space />
|
|
<q-input
|
|
flatten
|
|
debounce="300"
|
|
color="primary"
|
|
clearable
|
|
v-model="searchFilter.title"
|
|
>
|
|
<template v-slot:append>
|
|
<q-icon name="search" />
|
|
</template>
|
|
</q-input>
|
|
</template>
|
|
<template v-slot:header="props">
|
|
<q-tr :props="props">
|
|
<q-th key="desc" auto-width>
|
|
<q-checkbox dense v-model="props.selected"></q-checkbox>
|
|
</q-th>
|
|
<q-th v-for="col in props.cols" :key="col.name" :props="props">
|
|
{{ col.label }}
|
|
</q-th>
|
|
</q-tr>
|
|
</template>
|
|
|
|
<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>
|
|
<template v-slot:body-cell-actions="props">
|
|
<q-td :props="props" class="q-gutter-sm">
|
|
<q-btn
|
|
label="Sign Up"
|
|
size="sm"
|
|
color="primary"
|
|
:to="{ name: 'signup-task', params: { id: props.value } }"
|
|
/>
|
|
<q-btn
|
|
label="Edit"
|
|
size="sm"
|
|
color="primary"
|
|
:to="{ name: 'edit-task', params: { id: props.value } }"
|
|
/>
|
|
</q-td>
|
|
</template>
|
|
<template v-slot:item="props">
|
|
<div
|
|
class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
|
|
:style="props.selected ? 'transform: scale(0.95);' : ''"
|
|
>
|
|
<q-card
|
|
bordered
|
|
flat
|
|
:class="
|
|
props.selected
|
|
? $q.dark.isActive
|
|
? 'bg-grey-9'
|
|
: 'bg-grey-2'
|
|
: ''
|
|
"
|
|
>
|
|
<q-card-section>
|
|
<q-checkbox
|
|
dense
|
|
v-model="props.selected"
|
|
:label="props.row.name"
|
|
/>
|
|
</q-card-section>
|
|
<q-separator />
|
|
<q-list dense>
|
|
<q-item
|
|
v-for="col in props.cols.filter((col:Boat) => col.name !== 'desc')"
|
|
:key="col.name"
|
|
>
|
|
<q-item-section>
|
|
<q-item-label>{{ col.label }}</q-item-label>
|
|
</q-item-section>
|
|
<q-item-section side>
|
|
<q-item-label caption v-if="col.name === 'skills'">
|
|
<q-chip
|
|
size="sm"
|
|
v-for="skill in col.value"
|
|
outline
|
|
color="primary"
|
|
:key="skill.$id"
|
|
>{{ skill.name }}</q-chip
|
|
></q-item-label
|
|
>
|
|
<q-item-label caption v-else-if="col.name === 'tags'">
|
|
<q-chip
|
|
size="sm"
|
|
v-for="tag in col.value"
|
|
outline
|
|
color="primary"
|
|
:key="tag.$id"
|
|
>{{ tag.name }}</q-chip
|
|
></q-item-label
|
|
>
|
|
<q-item-label caption v-else-if="col.name === 'actions'">
|
|
<q-btn
|
|
label="Sign Up"
|
|
size="sm"
|
|
color="primary"
|
|
:to="{ name: 'signup-task', params: { id: col.value } }"
|
|
/>
|
|
<q-btn
|
|
label="Edit"
|
|
size="sm"
|
|
color="primary"
|
|
:to="{ name: 'edit-task', params: { id: col.value } }"
|
|
/>
|
|
</q-item-label>
|
|
<q-item-label v-else caption>{{ col.value }}</q-item-label>
|
|
</q-item-section>
|
|
</q-item>
|
|
</q-list>
|
|
</q-card>
|
|
</div>
|
|
</template>
|
|
</q-table>
|
|
<q-page-sticky position="bottom-right" :offset="[18, 18]">
|
|
<q-fab
|
|
v-model="fabShow"
|
|
vertical-actions-align="right"
|
|
color="primary"
|
|
glossy
|
|
icon="keyboard_arrow_up"
|
|
direction="up"
|
|
>
|
|
<q-fab-action
|
|
color="primary"
|
|
:disable="loading"
|
|
label="New Task"
|
|
to="/task/edit"
|
|
icon="add"
|
|
/>
|
|
<q-fab-action
|
|
v-if="tasks.length !== 0"
|
|
class="q-ml-sm"
|
|
color="primary"
|
|
:disable="loading"
|
|
label="Delete task(s)"
|
|
@click="deleteTasks"
|
|
icon="delete"
|
|
/> </q-fab
|
|
></q-page-sticky>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, defineProps, ref } from 'vue';
|
|
import { useTaskStore, Task, SkillTag, TaskTag } from 'src/stores/task';
|
|
import { QTableProps, date, useQuasar } from 'quasar';
|
|
import { Boat, useBoatStore } from 'src/stores/boat';
|
|
|
|
const selected = ref([]);
|
|
const loading = ref(false); // Placeholder
|
|
const fabShow = ref(false);
|
|
const columns = <QTableProps['columns']>[
|
|
{
|
|
name: 'title',
|
|
required: true,
|
|
label: 'Title',
|
|
align: 'left',
|
|
field: 'title',
|
|
sortable: true,
|
|
},
|
|
{
|
|
name: 'due_date',
|
|
align: 'left',
|
|
label: 'Due Date',
|
|
field: 'due_date',
|
|
format: (val) => date.formatDate(val, 'MMM DD, YYYY'),
|
|
sortable: true,
|
|
},
|
|
{
|
|
name: 'status',
|
|
align: 'left',
|
|
label: 'Status',
|
|
field: 'status',
|
|
sortable: true,
|
|
},
|
|
{
|
|
name: 'skills',
|
|
align: 'left',
|
|
label: 'Skills',
|
|
field: (row) =>
|
|
row.required_skills.map((s: string) => taskStore.getSkillById(s)),
|
|
sortable: false,
|
|
},
|
|
{
|
|
name: 'tags',
|
|
align: 'left',
|
|
label: 'Tags',
|
|
field: (row) => row.tags.map((s: string) => taskStore.getTaskTagById(s)),
|
|
sortable: false,
|
|
},
|
|
{
|
|
name: 'boat',
|
|
align: 'left',
|
|
label: 'Boat',
|
|
field: (row) =>
|
|
useBoatStore().boats.find((boat) => boat.$id === row.boat)?.name,
|
|
sortable: true,
|
|
},
|
|
{
|
|
name: 'volunteers',
|
|
align: 'left',
|
|
label: "People Req'd",
|
|
field: 'volunteers_required',
|
|
sortable: false,
|
|
},
|
|
{
|
|
name: 'signedup',
|
|
align: 'left',
|
|
label: 'Signed Up',
|
|
field: (row) => row.volunteers.length,
|
|
sortable: false,
|
|
},
|
|
{
|
|
name: 'depends',
|
|
align: 'left',
|
|
label: 'Dependent Tasks',
|
|
field: 'depends_on',
|
|
format: (val) => {
|
|
return (
|
|
val
|
|
.map((t: string) => taskStore.getTaskById(t))
|
|
.filter((t: Task) => t)
|
|
.map((t: Task) => t.title)
|
|
.join(', ') || null
|
|
);
|
|
},
|
|
},
|
|
{ name: 'actions', align: 'center', label: 'Actions', field: '$id' },
|
|
];
|
|
|
|
defineProps<{ tasks: Task[] }>();
|
|
const taskStore = useTaskStore();
|
|
const $q = useQuasar();
|
|
|
|
interface SearchObject {
|
|
title: string;
|
|
skillTags: SkillTag[];
|
|
taskTags: TaskTag[];
|
|
}
|
|
|
|
const searchFilter = ref<SearchObject>({
|
|
title: '',
|
|
skillTags: [],
|
|
taskTags: [],
|
|
});
|
|
|
|
const skillTagOptions = ref<SkillTag[]>(taskStore.skillTags);
|
|
const taskTagOptions = ref<TaskTag[]>(taskStore.taskTags);
|
|
|
|
// function onRowClick(evt: Event, row: Task) {
|
|
// router.push({ name: 'edit-task', params: { id: row.$id } });
|
|
// }
|
|
// TODO: Implement server side search
|
|
const filterRows = computed(
|
|
() => (rows: readonly Task[], terms: SearchObject) => {
|
|
return rows
|
|
.filter((row) =>
|
|
terms.title
|
|
? row.title.toLowerCase().includes(terms.title.toLowerCase())
|
|
: true
|
|
)
|
|
.filter((row) =>
|
|
terms.skillTags && terms.skillTags.length > 0
|
|
? row.required_skills.some((req_skill) =>
|
|
terms.skillTags.map((t) => t.$id).includes(req_skill)
|
|
)
|
|
: true
|
|
)
|
|
.filter((row) =>
|
|
terms.taskTags && terms.taskTags.length > 0
|
|
? row.tags.some((tag) =>
|
|
terms.taskTags.map((t) => t.$id).includes(tag)
|
|
)
|
|
: true
|
|
);
|
|
}
|
|
);
|
|
|
|
function deleteTasks() {
|
|
confirmDelete(selected.value);
|
|
}
|
|
function confirmDelete(tasks: Task[]) {
|
|
$q.dialog({
|
|
title: 'Confirm',
|
|
message:
|
|
'You are about to delete ' + tasks.length + ' tasks. Are you sure?',
|
|
cancel: true,
|
|
persistent: true,
|
|
}).onOk(() => {
|
|
selected.value.map((task: Task) => {
|
|
taskStore.deleteTask(task);
|
|
return;
|
|
});
|
|
});
|
|
}
|
|
</script>
|