86 lines
2 KiB
Vue
86 lines
2 KiB
Vue
<template>
|
|
<VList class="swablab-tasks" v-if="!loading">
|
|
<VListGroup v-for="status in fields.find(f => f.field == 'status')?.meta?.options?.choices" :key="status.value" open
|
|
active arrowPlacement>
|
|
<template #activator>
|
|
<VListItem>
|
|
{{ status.text }} ({{items.filter(i => i.status == status.value).length}})
|
|
</VListItem>
|
|
</template>
|
|
|
|
<VListItem v-for="item in items.filter(i => i.status == status.value)" :key="item.id" clickable
|
|
@click="router.push(`${collection}/${item.id}`)">
|
|
<VListItemIcon>
|
|
<VIcon
|
|
:name="fields.find(f => f.field == 'category')?.meta?.options?.choices.find((c: any) => c.value == item.category).icon"
|
|
:color="item.priority == 'high' ? 'orange' : item.priority == 'low' ? 'dimgrey' : ''" />
|
|
</VListItemIcon>
|
|
<VListItemContent>
|
|
{{ item.title }}
|
|
</VListItemContent>
|
|
|
|
<VIcon v-if="item.responsibles.length == 0" name="person_search" color="green" />
|
|
<VIcon v-if="item.responsibles.find(x => x.directus_users_id == me)" name="person_pin_circle" color="blue" />
|
|
<VChip v-if="item.date_due" small>
|
|
<display-datetime format="short" :value="item.date_due" use24 />
|
|
</VChip>
|
|
</VListItem>
|
|
</VListGroup>
|
|
</VList>
|
|
</template>
|
|
|
|
<style>
|
|
.swablab-tasks {
|
|
--v-list-padding: 12px;
|
|
}
|
|
|
|
.swablab-tasks .v-list-group>.items {
|
|
padding: var(--v-list-padding);
|
|
}
|
|
|
|
.swablab-tasks .v-chip {
|
|
margin-left: 6px;
|
|
}
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import { Field } from '@directus/types';
|
|
import { defineComponent, PropType } from 'vue';
|
|
|
|
type Task = {
|
|
id: string
|
|
title: string
|
|
status: string
|
|
date_due?: string
|
|
priority: string
|
|
category: string
|
|
description: string
|
|
responsibles: {
|
|
directus_users_id: {
|
|
id: string
|
|
}
|
|
}[]
|
|
}
|
|
|
|
export default defineComponent({
|
|
inheritAttrs: false,
|
|
props: {
|
|
collection: String,
|
|
items: {
|
|
type: Array as PropType<Task[]>,
|
|
required: true,
|
|
},
|
|
loading: Boolean,
|
|
error: Array,
|
|
router: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
fields: {
|
|
type: Array as PropType<Field[]>,
|
|
required: true,
|
|
},
|
|
me: Object,
|
|
}
|
|
})
|
|
</script>
|