Changed to new Layout System

This commit is contained in:
2024-02-23 19:30:43 +01:00
parent 96d4ee7356
commit 0d86e4c4f9
32 changed files with 1690 additions and 2214 deletions

View File

@@ -1,14 +1,9 @@
<script setup>
import HistoryDisplay from "~/components/HistoryDisplay.vue";
import DocumentList from "~/components/DocumentList.vue";
import DocumentUpload from "~/components/DocumentUpload.vue";
definePageMeta({
middleware: "auth"
})
const dataStore = useDataStore()
const supabase = useSupabaseClient()
const route = useRoute()
const router = useRouter()
const toast = useToast()
@@ -16,8 +11,6 @@ const id = ref(route.params.id ? route.params.id : null )
let currentItem = ref(null)
//Working
const mode = ref(route.params.mode || "show")
const itemInfo = ref({
@@ -32,21 +25,13 @@ const setupPage = () => {
}
if(mode.value === "edit") itemInfo.value = currentItem.value
}
const editItem = async () => {
router.push(`/services/edit/${currentItem.value.id}`)
setupPage()
}
const cancelEditorCreate = () => {
mode.value = "show"
itemInfo.value = {
id: 0,
if(currentItem.value) {
router.push(`/services/show/${currentItem.value.id}`)
} else {
router.push(`/services/`)
}
}
@@ -56,13 +41,40 @@ setupPage()
</script>
<template>
<h1
class="mb-3 truncate font-bold text-2xl"
v-if="currentItem "
>Leistung: {{currentItem.name}}</h1>
<UDashboardNavbar :title="currentItem ? currentItem.name : (mode === 'create' ? 'Leistung erstellen' : 'Leistung bearbeiten')">
<template #right>
<UButton
v-if="mode === 'edit'"
@click="dataStore.updateItem('services',itemInfo)"
>
Speichern
</UButton>
<UButton
v-else-if="mode === 'create'"
@click="dataStore.createNewItem('services',itemInfo)"
>
Erstellen
</UButton>
<UButton
@click="cancelEditorCreate"
color="red"
class="ml-2"
v-if="mode === 'edit' || mode === 'create'"
>
Abbrechen
</UButton>
<UButton
v-if="mode === 'show'"
@click="router.push(`/services/edit/${currentItem.id}`)"
>
Bearbeiten
</UButton>
</template>
</UDashboardNavbar>
<UTabs
:items="[{label: 'Informationen'},{label: 'Logbuch'},{label: 'Dokumente'}]"
v-if="mode === 'show'"
class="p-5"
>
<template #item="{item}">
<UCard class="mt-5">
@@ -86,7 +98,7 @@ setupPage()
<UDivider
class="my-2"
/>-->
<span v-if="currentItem.sellingPrice">Verkaufspreis: {{Number(currentItem.sellingPrice).toFixed(2)}} <br></span>
<span v-if="currentItem.sellingPrice">Verkaufspreis: {{String(Number(currentItem.sellingPrice).toFixed(2)).replace(".",",")}} <br></span>
</div>
<div
@@ -120,11 +132,10 @@ setupPage()
</UCard>
</template>
</UTabs>
<UCard v-else-if="mode == 'edit' || mode == 'create'" >
<template #header v-if="mode === 'edit'">
{{itemInfo.name}}
</template>
<UForm
v-else-if="mode == 'edit' || mode == 'create'"
class="p-5"
>
<UFormGroup
label="Name:"
>
@@ -179,31 +190,7 @@ setupPage()
</template>
</UInput>
</UFormGroup>
<template #footer>
<UButton
v-if="mode == 'edit'"
@click="dataStore.updateItem('products',itemInfo)"
>
Speichern
</UButton>
<UButton
v-else-if="mode == 'create'"
@click="dataStore.createNewItem('products',itemInfo)"
>
Erstellen
</UButton>
<UButton
@click="cancelEditorCreate"
color="red"
class="ml-2"
>
Abbrechen
</UButton>
</template>
</UCard>
</UForm>
</template>
<style scoped>

View File

@@ -1,34 +1,54 @@
<template>
<Toolbar>
<UButton @click="router.push(`/services/create/`)">+ Leistung</UButton>
<UDashboardNavbar title="Leistungen" :badge="filteredRows.length">
<template #right>
<UInput
id="searchinput"
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>
<UInput
v-model="searchString"
placeholder="Suche..."
/>
</Toolbar>
<UButton @click="router.push(`/services/create`)">+ Leistung</UButton>
</template>
</UDashboardNavbar>
<UDashboardToolbar>
<template #right>
<USelectMenu
v-model="selectedColumns"
icon="i-heroicons-adjustments-horizontal-solid"
:options="templateColumns"
multiple
class="hidden lg:block"
by="key"
>
<template #label>
Spalten
</template>
</USelectMenu>
</template>
</UDashboardToolbar>
<div class="table">
<UTable
:rows="filteredRows"
:columns="itemColumns"
@select="selectItem"
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
:columns="columns"
class="w-full"
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
@select="(i) => router.push(`/services/show/${i.id}`) "
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Leistungen anzuzeigen' }"
>
<template #sellingPrice-data="{row}">
{{row.sellingPrice ? Number(row.sellingPrice).toFixed(2) + " €" : ""}}
</template>
<!-- <template #tags-data="{row}">
<UBadge
v-if="row.tags.length > 0"
v-for="tag in row.tags"
class="mr-2"
>
{{tag}}
</UBadge>
<span v-else>-</span>
</template>-->
<template #unit-data="{row}">
{{dataStore.units.find(unit => unit.id === row.unit) ? dataStore.units.find(unit => unit.id === row.unit).name : row.unit}}
</template>
@@ -38,15 +58,26 @@
</template>
<script setup>
definePageMeta({
middleware: "auth"
})
defineShortcuts({
'/': () => {
//console.log(searchinput)
//searchinput.value.focus()
document.getElementById("searchinput").focus()
},
'+': () => {
router.push("/services/create")
}
})
const dataStore = useDataStore()
const supabase = useSupabaseClient()
const router = useRouter()
const itemColumns = [
const templateColumns = [
{
key: "name",
label: "Name",
@@ -68,11 +99,8 @@ const itemColumns = [
sortable: true
}*/
]
const selectItem = (item) => {
console.log(item)
router.push(`/services/show/${item.id} `)
}
const selectedColumns = ref(templateColumns)
const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
const searchString = ref('')
@@ -87,8 +115,6 @@ const filteredRows = computed(() => {
})
})
})
</script>
<style scoped>