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

Rebuild General Layout to Nuxt UI PRO Dashboard

Browse Source
This commit is contained in:
Florian Federspiel
2024-02-22 22:23:15 +01:00
parent c6e0854544
commit 96d4ee7356
14 changed files with 897 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
spaces/pages/calendar/[mode].vue
View File

@@ -287,19 +287,28 @@ const calendarOptionsTimeline = reactive({
</UModal>
<div v-if="mode === 'grid'">
<FullCalendar
:options="calendarOptionsGrid"
/>
</div>
<div v-else-if="mode === 'timeline'">
<FullCalendar
:options="calendarOptionsTimeline"
/>
</div>
<UDashboardPage>
<UDashboardPanel grow>
<UDashboardNavbar :title="currentItem ? currentItem.name : ''">
<template #right>
</template>
</UDashboardNavbar>
<div v-if="mode === 'grid'" class="p-5">
<FullCalendar
:options="calendarOptionsGrid"
/>
</div>
<div v-else-if="mode === 'timeline'" class="p-5">
<FullCalendar
:options="calendarOptionsTimeline"
/>
</div>
</UDashboardPanel>
</UDashboardPage>
</template>
<style scoped>

69
spaces/pages/index.vue
View File

@@ -1,26 +1,45 @@
<template>
<div class="cardHolder">
<div class="card">
<h1 class="text-center text-4xl">Aufgaben</h1>
<p class="text-center text-6xl mt-5">{{openTasks}}</p>
</div><div class="card">
<UDashboardPage>
<UDashboardPanel grow>
<UDashboardNavbar title="Home">
<template #right>
<UTooltip text="Notifications" :shortcuts="['N']">
<UButton color="gray" variant="ghost" square @click="isNotificationsSlideoverOpen = true">
<UChip color="red" inset>
<UIcon name="i-heroicons-bell" class="w-5 h-5" />
</UChip>
</UButton>
</UTooltip>
</div><div class="card">
<UDropdown :items="items">
<UButton icon="i-heroicons-plus" size="md" class="ml-1.5 rounded-full" />
</UDropdown>
</template>
</UDashboardNavbar>
</div><div class="card">
<!-- <UDashboardToolbar>
<template #left>
&lt;!&ndash; ~/components/home/HomeDateRangePicker.vue &ndash;&gt;
&lt;!&ndash; <HomeDateRangePicker v-model="range" class="-ml-2.5" />&ndash;&gt;
</div><div class="card">
&lt;!&ndash; ~/components/home/HomePeriodSelect.vue &ndash;&gt;
&lt;!&ndash; <HomePeriodSelect v-model="period" :range="range" />&ndash;&gt;
</template>
</UDashboardToolbar>-->
</div><div class="card">
<UDashboardPanelContent>
<!-- ~/components/home/HomeChart.vue -->
<!-- <HomeChart :period="period" :range="range" />
</div>
<br>
</div>
<div class="grid lg:grid-cols-2 lg:items-start gap-8 mt-8">
&lt;!&ndash; ~/components/home/HomeSales.vue &ndash;&gt;
<HomeSales />
&lt;!&ndash; ~/components/home/HomeCountries.vue &ndash;&gt;
<HomeCountries />
</div>-->
</UDashboardPanelContent>
</UDashboardPanel>
</UDashboardPage>
</template>
<script setup>
@@ -28,6 +47,18 @@ definePageMeta({
middleware: "auth"
})
const { isNotificationsSlideoverOpen } = useDashboard()
const items = [[{
label: 'Aufgabe',
icon: 'i-heroicons-paper-airplane',
to: '/tasks/create'
}, {
label: 'Kunde',
icon: 'i-heroicons-user-plus',
to: '/customers/create'
}]]
const {getOpenTasksCount} = useDataStore()
const openTasks = getOpenTasksCount
@@ -38,7 +69,7 @@ const user = useSupabaseUser()
</script>
<style scoped>
.cardHolder {
/*.cardHolder {
display: flex;
flex-direction: row;
flex-wrap: wrap;
@@ -49,5 +80,5 @@ const user = useSupabaseUser()
width: 22vw;
height: 40vh;
border: 1px solid white
}
}*/
</style>

33
spaces/pages/planningBoard.vue
View File

@@ -122,6 +122,28 @@ const calendarOptionsTimeline = reactive({
</script>
<template>
<UDashboardPage>
<UDashboardPanel grow>
<UDashboardNavbar :title="currentItem ? currentItem.name : ''">
<template #right>
</template>
</UDashboardNavbar>
<div v-if="viewport.isLessThan('tablet')">
<FullCalendar
:options="calendarOptionsList"
/>
</div>
<div v-else>
<FullCalendar
:options="calendarOptionsTimeline"
/>
</div>
</UDashboardPanel>
</UDashboardPage>
<div>
<UModal
v-model="openNewEventModal"
@@ -229,16 +251,7 @@ const calendarOptionsTimeline = reactive({
</UModal>
<div v-if="viewport.isLessThan('tablet')">
<FullCalendar
:options="calendarOptionsList"
/>
</div>
<div v-else>
<FullCalendar
:options="calendarOptionsTimeline"
/>
</div>
</div>

178
spaces/pages/tasks/[mode]/[[id]].vue
View File

@@ -1,4 +1,6 @@
<script setup>
import dayjs from "dayjs";
definePageMeta({
middleware: "auth"
})
@@ -75,7 +77,177 @@ setupPage()
</script>
<template>
<h1
<UDashboardPage>
<UDashboardPanel grow>
<UDashboardNavbar :title="currentItem ? currentItem.name : ''">
<template #right>
<UButton
v-if="mode === 'edit'"
@click="dataStore.updateItem('tasks',itemInfo)"
>
Speichern
</UButton>
<UButton
v-else-if="mode === 'create'"
@click="dataStore.createNewItem('tasks',itemInfo)"
>
Erstellen
</UButton>
<UButton
@click="cancelEditorCreate"
color="red"
class="ml-2"
v-if="mode === 'edit' || mode === 'create'"
>
Abbrechen
</UButton>
<UButton
v-if="mode === 'show' && currentItem.id"
@click="editItem"
>
Bearbeiten
</UButton>
</template>
</UDashboardNavbar>
<!-- <UDashboardToolbar>
<template #left>
&lt;!&ndash; <UButton @click="router.push(`/tasks/create`)">+ Aufgabe</UButton>
<UInput
v-model="searchString"
placeholder="Suche..."
/>&ndash;&gt;
<UCheckbox
label="Erledigte Anzeigen"
v-model="showDone"
/>
</template>
<template #right>
<USelectMenu
v-model="selectedColumns"
icon="i-heroicons-adjustments-horizontal-solid"
:options="templateColumns"
multiple
class="hidden lg:block"
>
<template #label>
Spalten
</template>
</USelectMenu>
</template>
</UDashboardToolbar>-->
<UTabs
:items="[{label: 'Informationen'},{label: 'Logbuch'}]"
v-if="currentItem && mode === 'show'"
class="p-5"
>
<template #item="{item}">
<UCard class="mt-5">
<div v-if="item.label === 'Informationen'">
<div class="truncate">
<p>Kategorie: {{currentItem.categorie}}</p>
<p v-if="currentItem.project">Projekt: <nuxt-link :to="`/projects/show/${currentItem.project}`">{{dataStore.getProjectById(currentItem.project).name}}</nuxt-link></p>
<p>Beschreibung: {{currentItem.description}}</p>
</div>
</div>
<!-- TODO: Logbuch Tasks -->
</UCard>
</template>
</UTabs>
<UForm v-else-if="mode === 'edit' || mode === 'create' " class="p-5">
<UFormGroup
label="Name:"
>
<UInput
v-model="itemInfo.name"
/>
</UFormGroup>
<UFormGroup
label="Kategorie:"
>
<USelectMenu
v-model="itemInfo.categorie"
:options="categories"
/>
</UFormGroup>
<UFormGroup
label="Benutzer:"
>
<USelectMenu
v-model="itemInfo.user"
:options="dataStore.profiles"
option-attribute="fullName"
value-attribute="id"
searchable-placeholder="Suche..."
searchable
:search-attributes="['fullName']"
>
<template #label>
{{dataStore.getProfileById(itemInfo.user) ? dataStore.getProfileById(itemInfo.user).fullName : "Kein Benutzer ausgewählt"}}
</template>
</USelectMenu>
</UFormGroup>
<UFormGroup
label="Projekt:"
>
<USelectMenu
v-model="itemInfo.project"
:options="dataStore.projects"
option-attribute="name"
value-attribute="id"
searchable-placeholder="Suche..."
searchable
:search-attributes="['name']"
>
<template #label>
{{dataStore.getProjectById(itemInfo.project) ? dataStore.getProjectById(itemInfo.project).name : "Kein Projekt ausgewählt"}}
</template>
</USelectMenu>
</UFormGroup>
<UFormGroup
label="Objekt:"
>
<USelectMenu
v-model="itemInfo.plant"
:options="dataStore.plants"
option-attribute="name"
value-attribute="id"
searchable-placeholder="Suche..."
searchable
:search-attributes="['name']"
>
<template #label>
{{dataStore.getPlantById(itemInfo.plant) ? dataStore.getPlantById(itemInfo.plant).name : "Kein Objekt ausgewählt"}}
</template>
</USelectMenu>
</UFormGroup>
<UFormGroup
label="Beschreibung:"
>
<UTextarea
v-model="itemInfo.description"
/>
</UFormGroup>
</UForm>
</UDashboardPanel>
</UDashboardPage>
<!-- <h1
class="mb-3 truncate font-bold text-2xl"
v-if="currentItem"
>Aufgabe: {{currentItem.name}}</h1>
@@ -108,7 +280,7 @@ setupPage()
</div>
</div>
<!-- TODO: Logbuch Tasks -->
&lt;!&ndash; TODO: Logbuch Tasks &ndash;&gt;
</UCard>
</template>
</UTabs>
@@ -220,7 +392,7 @@ setupPage()
</UButton>
</template>
</UCard>
</UCard>-->
</template>
<style scoped>

97
spaces/pages/tasks/index.vue
View File

@@ -1,25 +1,64 @@
<template>
<UDashboardPage>
<UDashboardPanel grow>
<UDashboardNavbar title="Aufgaben" :badge="filteredRows.length">
<template #right>
<UInput
ref="input"
v-model="searchString"
icon="i-heroicons-funnel"
autocomplete="off"
placeholder="Suche..."
class="hidden lg:block"
@keydown.esc="$event.target.blur()"
>
<template #trailing>
<UKbd value="/" />
</template>
</UInput>
<div>
<Toolbar>
<UButton @click="router.push(`/tasks/create`)">+ Aufgabe</UButton>
<UButton @click="router.push(`/tasks/create`)">+ Aufgabe</UButton>
</template>
</UDashboardNavbar>
<UInput
v-model="searchString"
placeholder="Suche..."
/>
<UDashboardToolbar>
<template #left>
<!-- <UButton @click="router.push(`/tasks/create`)">+ Aufgabe</UButton>
<UInput
v-model="searchString"
placeholder="Suche..."
/>-->
<UCheckbox
label="Erledigte Anzeigen"
v-model="showDone"
/>
</template>
<template #right>
<USelectMenu
v-model="selectedColumns"
icon="i-heroicons-adjustments-horizontal-solid"
:options="templateColumns"
multiple
class="hidden lg:block"
>
<template #label>
Spalten
</template>
</USelectMenu>
</template>
</UDashboardToolbar>
<UCheckbox
label="Erledigte Anzeigen"
v-model="showDone"
/>
</Toolbar>
<div class="table">
<UTable
v-model:sort="sort"
:rows="filteredRows"
:columns="columns"
@select="selectItem"
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
sort-mode="manual"
class="w-full"
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
@select="(i) => router.push(`/tasks/show/${i.id}`) "
>
<template #finish-data="{row}">
<UButton
@@ -44,27 +83,37 @@
{{dataStore.getPlantById(row.plant) ? dataStore.getPlantById(row.plant).name : "" }}
</template>
</UTable>
</div>
</div>
</UDashboardPanel>
</UDashboardPage>
</template>
<script setup>
<script lang="ts" setup>
import dayjs from "dayjs";
definePageMeta({
middleware: "auth"
})
const input = ref<{ input: HTMLInputElement }>()
const dataStore = useDataStore()
const router = useRouter()
const mode = ref("show")
const columns = [
{
defineShortcuts({
'/': () => {
input.value?.input?.focus()
},
'+': () => {
router.push("/tasks/create")
}
})
const templateColumns = [
/*{
key:"finish"
},{
},*/{
key: "created_at",
label: "Erstellt am:",
sortable: true
@@ -95,6 +144,10 @@ const columns = [
}
]
const selectedColumns = ref(templateColumns)
const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
const searchString = ref('')
const showDone = ref(false)

11
spaces/pages/test.vue Normal file
View File

@@ -0,0 +1,11 @@
<script setup lang="ts">
</script>
<template>
test
</template>
<style scoped>
</style>