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

Added New Viewport Config

Browse Source
This commit is contained in:
Florian Federspiel
2023-12-11 20:30:10 +01:00
parent 2721a3b2d4
commit 2dd31690e5
4 changed files with 107 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
spaces/pages/planningBoard.vue
View File

@@ -4,6 +4,14 @@ import dayGridPlugin from '@fullcalendar/daygrid'
import resourceTimelinePlugin from '@fullcalendar/resource-timeline'
import deLocale from '@fullcalendar/core/locales/de'
import interactionPlugin from '@fullcalendar/interaction'
import listPlugin from '@fullcalendar/list';
const viewport = useViewport()
watch(viewport.breakpoint, (newBreakpoint, oldBreakpoint) => {
console.log('Breakpoint updated:', oldBreakpoint, '->', newBreakpoint)
})
const supabase = useSupabaseClient()
@@ -37,9 +45,15 @@ const createEvent = async () => {
}
const calendarOptionsList = reactive({
locale: deLocale,
plugins: [listPlugin],
initialView: "listWeek",
initialEvents: events,
nowIndicator: true
})
const calendarOptions = reactive({
const calendarOptionsTimeline = reactive({
schedulerLicenseKey: "CC-Attribution-NonCommercial-NoDerivatives",
locale: deLocale,
plugins: [resourceTimelinePlugin, interactionPlugin],
@@ -140,12 +154,21 @@ const calendarOptions = reactive({
</UCard>
</UModal>
<FullCalendar
:options="calendarOptions"
/>
<div v-if="viewport.isLessThan('tablet')">
<FullCalendar
:options="calendarOptionsList"
/>
</div>
<div v-else>
<FullCalendar
:options="calendarOptionsTimeline"
/>
</div>
</div>
</template>
<style scoped>
</style>

130
spaces/pages/tasks.vue
View File

@@ -112,72 +112,84 @@
</USelectMenu>-->
</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>
<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>
<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="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 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 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>
</UPage>
@@ -189,6 +201,12 @@ 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())