flfeders/FEDEO
2
1
Fork 0
Code Issues 62 Pull Requests Actions Packages Projects 21 Releases Wiki Activity

Changed Tasks List

Browse Source 
Created Time creation
Added VueDatepicker Package
This commit is contained in:
Florian Federspiel
2023-12-21 16:04:52 +01:00
parent cc636ce040
commit e792ed39c9
6 changed files with 234 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

216
spaces/pages/tasks.vue
View File

@@ -86,148 +86,126 @@
/>
</UFormGroup>
<UFormGroup
label="Benutzer ändern:"
>
<USelectMenu
:options="profiles"
@change="updateTask"
v-model="taskData.user"
option-attribute="firstName"
value-attribute="id"
>
<template #label>
{{profiles.find(profile => profile.id === taskData.user) ? profiles.find(profile => profile.id === taskData.user).firstName : 'Kein Benutzer ausgewählt'}}
</template>
</USelectMenu>
</UFormGroup>
</template>
</UCard>
</UModal>
<div id="menuBar">
<UButton
class="mb-3 mr-3"
@click="showCreateTask = true"
>
+ Aufgabe
</UButton>
<!-- <USelectMenu
:options="usersForList"
v-model="usersSelected"
multiple
placeholder="Benutzer"
class="w-40"
v-on:change="filterTasks"
>
<template #label>
<span v-if="usersSelected.length" class="truncate">{{ usersSelected.join(', ') }}</span>
<span v-else>Benutzer auswählen</span>
</template>
</USelectMenu>-->
<div class="flex items-center gap-1">
<UButton @click="showCreateTask = true">+ Aufgabe</UButton>
<UInput
v-model="searchString"
placeholder="Suche..."
/>
<UCheckbox
label="Erledigte Anzeigen"
v-model="showDoneTasks"
/>
</div>
<div v-if="viewport.isLessThan('tablet')" class="scrollList">
<a
v-for="task in tasks.filter(item => item.categorie != 'Erledigt')"
>
<UCard class="listItem">
<template #header>
<UBadge>{{task.categorie}}</UBadge> {{task.name}}
</template>
{{task.description}}
</UCard>
</a>
</div>
<div v-else>
<div id="taskCatList">
<div id="catNew">
<h3>Offene Aufgaben</h3>
<div class="taskScrollList" v-if="tasks.length > 0">
<a
v-for="taskNew in tasks.filter(task => task.categorie == 'Offen')"
@click="inspectTask(taskNew)"
>
<UCard class="listItem">
{{taskNew.name}}
<UBadge
v-for="user in taskNew.users"
class="mr-2"
>
{{user}}
</UBadge>
</UCard>
</a>
</div>
<UTable
:rows="filteredRows"
:columns="taskColumns"
@select="inspectTask"
>
<template #created_at-data="{row}">
{{ dayjs(row.created_at).format("DD.MM.YY HH:mm") }}
</template>
<template #user-data="{row}">
{{profiles.find(profile => profile.id === row.user ) ? profiles.find(profile => profile.id === row.user ).firstName : row.user}}
</template>
</UTable>
</div>
<div id="catInProgress">
<h3>Aufgaben in Bearbeitung</h3>
<div class="taskScrollList" v-if="tasks.length > 0">
<a
v-for="taskNew in tasks.filter(task => task.categorie == 'In Bearbeitung')"
@click="inspectTask(taskNew)"
>
<UCard class="listItem">
{{taskNew.name}}
<UBadge
v-for="user in taskNew.users"
class="mr-2"
>
{{user}}
</UBadge>
</UCard>
</a>
</div>
</div>
<div id="catUrgent">
<h3>Dringende Aufgaben</h3>
<div class="taskScrollList" v-if="tasks.length > 0">
<a
v-for="taskNew in tasks.filter(task => task.categorie == 'Dringend')"
@click="inspectTask(taskNew)"
>
<UCard class="listItem">
{{taskNew.name}}
<UBadge
v-for="user in taskNew.users"
class="mr-2"
>
{{user}}
</UBadge>
</UCard>
</a>
</div>
</div>
</div>
</div>
</UPage>
</template>
<script setup>
import * as dayjs from "dayjs";
definePageMeta({
middleware: "auth",
})
const viewport = useViewport()
watch(viewport.breakpoint, (newBreakpoint, oldBreakpoint) => {
console.log('Breakpoint updated:', oldBreakpoint, '->', newBreakpoint)
})
const toast = useToast()
const supabase = useSupabaseClient()
const {tasks} = storeToRefs(useDataStore())
const {tasks, profiles} = storeToRefs(useDataStore())
const {fetchTasks} = useDataStore()
let refTasks = ref([])
const taskColumns = [
{
key:"created_at",
label: "Erstellt am:",
sortable: true
},
{
key:"name",
label: "Name:",
sortable: true
},
{
key:"user",
label: "Benutzer:",
sortable: true
},
{
key:"description",
label: "Beschreibung:",
sortable: true
},
{
key:"categorie",
label: "Kategorie:",
sortable: true
}
]
const showDoneTasks = ref(false)
const searchString = ref("")
const filteredRows = computed(() => {
let usersForList = []
//users.forEach(user => usersForList.push(user.username))
const usersSelected = ref([])
usersSelected.value = usersForList
let filteredTasks = tasks.value.filter(task => !showDoneTasks.value ? task.categorie !== "Erledigt" : task.categorie === "Erledigt")
if(!searchString.value) {
return filteredTasks
}
return filteredTasks.filter(item => {
return Object.values(item).some((value) => {
return String(value).toLowerCase().includes(searchString.value.toLowerCase())
})
})
})
const showCreateTask = ref(false)
const taskCategories = ["Offen","In Bearbeitung", "Dringend","Erledigt"]
const createTaskData = ref({
name: "",
description: "",
categorie: "Offen"
categorie: "Offen",
user: ""
/*users: ["86e67794-0ea8-41b0-985a-1072e84f56e9"]*/
})
@@ -269,31 +247,11 @@ const updateTask = async () => {
}
const inspectTask = (task) => {
taskData.value = task
showTaskModal.value = true
}
const filterTasks = () => {
refTasks.value = tasks.filter(task => usersSelected.value.some(user => (task.users ? (task.users.includes(user)) : true )))
}
const finishTask = async () => {
console.log("Start")
const {error} = await supabase
.from("tasks")
.update({categorie: "Erledigt"})
.eq('id',taskData.value.id)
//console.log(data)
console.log(error)
showTaskModal.value = false
fetchTasks()
}
//filterTasks()
</script>
<style scoped>