Deprecated following as non standardEntity tasks, products, productcategories, services, servicecategories

This commit is contained in:
2024-12-22 22:13:34 +01:00
parent 61110da453
commit 1ba3d9c3e9
20 changed files with 287 additions and 63 deletions

View File

@@ -0,0 +1,179 @@
<script setup>
import HistoryDisplay from "~/components/HistoryDisplay.vue";
import DocumentList from "~/components/DocumentList.vue";
import DocumentUpload from "~/components/DocumentUpload.vue";
import {useSupabaseSelect} from "~/composables/useSupabase.js";
import dayjs from "dayjs";
definePageMeta({
middleware: "auth"
})
defineShortcuts({
'backspace': () => {
router.push("/productcategories")
},
'arrowleft': () => {
if(openTab.value > 0){
openTab.value -= 1
}
},
'arrowright': () => {
if(openTab.value < 3) {
openTab.value += 1
}
},
})
const dataStore = useDataStore()
const route = useRoute()
const router = useRouter()
const toast = useToast()
const id = ref(route.params.id ? route.params.id : null )
//Working
const mode = ref(route.params.mode || "show")
const itemInfo = ref({})
const openTab = ref(0)
//Functions
const setupPage = async () => {
if(mode.value === "show" || mode.value === "edit"){
itemInfo.value = await useSupabaseSelectSingle("productcategories",route.params.id,"*")
}
}
const cancelEditorCreate = () => {
if(itemInfo.value) {
router.push(`/productcategories/show/${itemInfo.value.id}`)
} else {
router.push(`/productcategories/`)
}
}
setupPage()
</script>
<template>
<UDashboardNavbar
:ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
>
<template #left>
<UButton
icon="i-heroicons-chevron-left"
variant="outline"
@click="router.push(`/productcategories`)"
>
Artikelkategorien
</UButton>
</template>
<template #center>
<h1
v-if="itemInfo"
class="text-xl font-medium"
>{{itemInfo.name ? `Artikelkategorie: ${itemInfo.name}` : (mode === 'create' ? 'Artikelkategorie erstellen' : 'Artikelkategorie bearbeiten')}}</h1>
</template>
<template #right>
<UButton
v-if="mode === 'edit'"
@click="dataStore.updateItem('productcategories',itemInfo)"
>
Speichern
</UButton>
<UButton
v-else-if="mode === 'create'"
@click="dataStore.createNewItem('productcategories',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(`/productcategories/edit/${itemInfo.id}`)"
>
Bearbeiten
</UButton>
</template>
</UDashboardNavbar>
<UTabs
:items="[{label: 'Informationen'}]"
v-if="mode === 'show' && itemInfo"
class="p-5"
v-model="openTab"
>
<template #item="{item}">
<div v-if="item.label === 'Informationen'" class="mr-5 flex flex-row">
<div class="w-1/2 mr-5">
<UCard>
<table class="w-full">
<tr>
<td>Name: </td>
<td>{{itemInfo.name}}</td>
</tr>
<tr>
<td>Beschreibung:</td>
<td>{{itemInfo.description}}</td>
</tr>
</table>
</UCard>
</div>
<div class="w-1/2">
<UCard>
<HistoryDisplay
type="product"
v-if="itemInfo"
:element-id="itemInfo.id"
render-headline
/>
</UCard>
</div>
</div>
</template>
</UTabs>
<UForm
v-else-if="mode == 'edit' || mode == 'create'"
class="p-5"
>
<UFormGroup
label="Name:"
>
<UInput
v-model="itemInfo.name"
autofocus
/>
</UFormGroup>
<UFormGroup
label="Beschreibung:"
>
<UTextarea
v-model="itemInfo.description"
/>
</UFormGroup>
</UForm>
</template>
<style scoped>
td {
border-bottom: 1px solid lightgrey;
vertical-align: top;
padding-bottom: 0.15em;
padding-top: 0.15em;
}
</style>

View File

@@ -0,0 +1,24 @@
<template>
<EntityList
:items="items"
type="productcategories"
/>
</template>
<script setup>
definePageMeta({
middleware: "auth"
})
const items = ref([])
const setupPage = async () => {
items.value = await useSupabaseSelect("productcategories","*")
}
setupPage()
</script>
<style scoped>
</style>

View File

@@ -0,0 +1,354 @@
<script setup>
import HistoryDisplay from "~/components/HistoryDisplay.vue";
import DocumentList from "~/components/DocumentList.vue";
import DocumentUpload from "~/components/DocumentUpload.vue";
import {useSupabaseSelect} from "~/composables/useSupabase.js";
definePageMeta({
middleware: "auth"
})
defineShortcuts({
'backspace': () => {
router.push("/products")
},
'arrowleft': () => {
if(openTab.value > 0){
openTab.value -= 1
}
},
'arrowright': () => {
if(openTab.value < 3) {
openTab.value += 1
}
},
})
const dataStore = useDataStore()
const profileStore = useProfileStore()
const supabase = useSupabaseClient()
const route = useRoute()
const router = useRouter()
const toast = useToast()
const id = ref(route.params.id ? route.params.id : null )
//Working
const mode = ref(route.params.mode || "show")
const itemInfo = ref({
unit: 1,
tags: [],
productcategories: []
})
const openTab = ref(0)
const productcategories = ref([])
const units = ref([])
//Functions
const setupPage = async () => {
if(mode.value === "show" || mode.value === "edit"){
itemInfo.value = await useSupabaseSelectSingle("products",route.params.id,"*")
}
productcategories.value = await useSupabaseSelect("productcategories","*")
units.value = (await supabase.from("units").select()).data
console.log(units.value[0])
}
const cancelEditorCreate = () => {
if(itemInfo.value) {
router.push(`/products/show/${itemInfo.value.id}`)
} else {
router.push(`/products/`)
}
}
const printLabel = async (content) => {
const label = await useSupabaseSelectSingle("printLabels",1,'*')
usePrintLabel('0dbe30f3-3008-4cde-8a7c-e785b1c22bfc','ZD411',useGenerateZPL(label.handlebarsZPL,{barcode:itemInfo.value.articleNumber }))
}
setupPage()
</script>
<template>
<UDashboardNavbar
:ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
>
<template #left>
<UButton
icon="i-heroicons-chevron-left"
variant="outline"
@click="router.push(`/products`)"
>
Artikel
</UButton>
</template>
<template #center>
<h1
v-if="itemInfo"
class="text-xl font-medium"
>{{itemInfo.name ? `Artikel: ${itemInfo.name}` : (mode === 'create' ? 'Artikel erstellen' : 'Artikel bearbeiten')}}</h1>
</template>
<template #right>
<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"
v-if="mode === 'edit' || mode === 'create'"
>
Abbrechen
</UButton>
<UButton
v-if="mode === 'show'"
@click=" router.push(`/products/edit/${itemInfo.id}`)"
>
Bearbeiten
</UButton>
</template>
</UDashboardNavbar>
<UTabs
:items="[{label: 'Informationen'},{label: 'Bestand'},{label: 'Dokumente'}]"
v-if="mode === 'show' && itemInfo"
class="p-5"
v-model="openTab"
>
<template #item="{item}">
<div v-if="item.label === 'Informationen'" class="mt-5 flex flex-row">
<div class="w-1/2 mr-5">
<UCard>
<UBadge
v-for="tag in itemInfo.tags"
class="mr-2"
>
{{tag}}
</UBadge>
<UDivider
class="my-2"
/>
<!--
<UButton @click="printLabel(itemInfo.ean)">Print Label</UButton>
-->
<table class="w-full">
<tr>
<td>Name:</td>
<td>{{itemInfo.name}}</td>
</tr>
<tr>
<td>Hersteller:</td>
<td>{{itemInfo.manufacturer}}</td>
</tr>
<tr>
<td>Herstellernummer:</td>
<td>{{itemInfo.manufacturerNumber}}</td>
</tr>
<tr>
<td>Einheit:</td>
<td>{{units.find(i => i.id === itemInfo.unit) ? units.find(i => i.id === itemInfo.unit).name : ""}}</td>
</tr>
<tr>
<td>Tags:</td>
<td>{{itemInfo.tags.join(", ")}}</td>
</tr>
<tr>
<td>Artikelkategorien:</td>
<td>{{itemInfo.productcategories.map(i => productcategories.find(x => x.id === i).name).join(", ")}}</td>
</tr>
<tr>
<td>EAN:</td>
<td>{{itemInfo.ean}}</td>
</tr>
<tr>
<td>Verkaufspreis:</td>
<td>{{itemInfo.sellingPrice}}</td>
</tr>
<tr>
<td>Beschreibung:</td>
<td>{{itemInfo.description}}</td>
</tr>
</table>
</UCard>
</div>
<div class="w-1/2">
<UCard>
<HistoryDisplay
type="product"
v-if="itemInfo"
:element-id="itemInfo.id"
render-headline
/>
</UCard>
</div>
</div>
<div
v-if="item.label === 'Bestand'"
>
<UCard class="mt-5">
Bestand: {{dataStore.getStockByProductId(itemInfo.id)}} {{dataStore.units.find(unit => unit.id === itemInfo.unit) ? dataStore.units.find(unit => unit.id === itemInfo.unit).name : ""}}
</UCard>
</div>
<div
v-if="item.label === 'Dokumente'"
>
<UCard class="mt-5">
<Toolbar>
<DocumentUpload
type="product"
:element-id="itemInfo.id"
/>
</Toolbar>
<DocumentList :documents="dataStore.getDocumentsByProductId(itemInfo.id)"/>
</UCard>
</div>
</template>
</UTabs>
<UForm
v-else-if="mode == 'edit' || mode == 'create'"
class="p-5"
>
<UFormGroup
label="Name:"
>
<UInput
v-model="itemInfo.name"
autofocus
/>
</UFormGroup>
<UFormGroup
label="Hersteller:"
>
<UInput
v-model="itemInfo.manufacturer"
/>
</UFormGroup>
<UFormGroup
label="Hersteller Nr.:"
>
<UInput
v-model="itemInfo.manufacturerNumber"
/>
</UFormGroup>
<UFormGroup
label="Einheit:"
>
<USelectMenu
v-model="itemInfo.unit"
:options="dataStore.units"
option-attribute="name"
value-attribute="id"
>
<template #label>
{{dataStore.units.find(unit => unit.id === itemInfo.unit) ? dataStore.units.find(unit => unit.id === itemInfo.unit).name : itemInfo.unit }}
</template>
</USelectMenu>
</UFormGroup>
<UFormGroup
label="Tags:"
>
<USelectMenu
v-model="itemInfo.tags"
:options="profileStore.ownTenant.tags.products"
multiple
>
<template #label>
{{itemInfo.tags.length > 0 ? itemInfo.tags.join(", ") : "Keine Tags ausgewählt"}}
</template>
</USelectMenu>
</UFormGroup>
<UFormGroup
label="Artikelkategorien:"
>
<USelectMenu
v-model="itemInfo.productcategories"
:options="productcategories"
value-attribute="id"
option-attribute="name"
multiple
>
<template #label>
{{itemInfo.productcategories.length > 0 ? itemInfo.productcategories.map(i => productcategories.find(x => x.id === i).name).join(", ") : "Keine Kategorien ausgewählt"}}
</template>
</USelectMenu>
</UFormGroup>
<UFormGroup
label="EAN:"
>
<UInput
v-model="itemInfo.ean"
/>
</UFormGroup>
<!-- <UFormGroup
label="Barcode:"
>
<UInput
v-model="itemInfo.barcode"
/>
</UFormGroup>-->
<UFormGroup
label="Einkaufspreis:"
>
<UInput
v-model="itemInfo.purchasePrice"
type="number"
steps="0.01"
>
<template #trailing>
<span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
</template>
</UInput>
</UFormGroup>
<UFormGroup
label="Verkaufspreis:"
>
<UInput
v-model="itemInfo.sellingPrice"
type="number"
steps="0.01"
>
<template #trailing>
<span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
</template>
</UInput>
</UFormGroup>
<UFormGroup
label="Beschreibung:"
>
<UTextarea
v-model="itemInfo.description"
/>
</UFormGroup>
</UForm>
</template>
<style scoped>
td {
border-bottom: 1px solid lightgrey;
vertical-align: top;
padding-bottom: 0.15em;
padding-top: 0.15em;
}
</style>

View File

@@ -0,0 +1,27 @@
<template>
<EntityList
:items="items"
type="products"
/>
</template>
<script setup>
definePageMeta({
middleware: "auth"
})
const items = ref([])
const productcategories = ref([])
const setupPage = async () => {
items.value = await useSupabaseSelect("products","*, unit(name)")
productcategories.value = await useSupabaseSelect("productcategories", "*")
}
setupPage()
</script>
<style scoped>
</style>

View File

@@ -0,0 +1,179 @@
<script setup>
import HistoryDisplay from "~/components/HistoryDisplay.vue";
import DocumentList from "~/components/DocumentList.vue";
import DocumentUpload from "~/components/DocumentUpload.vue";
import {useSupabaseSelect} from "~/composables/useSupabase.js";
import dayjs from "dayjs";
definePageMeta({
middleware: "auth"
})
defineShortcuts({
'backspace': () => {
router.push("/servicecategories")
},
'arrowleft': () => {
if(openTab.value > 0){
openTab.value -= 1
}
},
'arrowright': () => {
if(openTab.value < 3) {
openTab.value += 1
}
},
})
const dataStore = useDataStore()
const route = useRoute()
const router = useRouter()
const toast = useToast()
const id = ref(route.params.id ? route.params.id : null )
//Working
const mode = ref(route.params.mode || "show")
const itemInfo = ref({})
const openTab = ref(0)
//Functions
const setupPage = async () => {
if(mode.value === "show" || mode.value === "edit"){
itemInfo.value = await useSupabaseSelectSingle("servicecategories",route.params.id,"*")
}
}
const cancelEditorCreate = () => {
if(itemInfo.value) {
router.push(`/servicecategories/show/${itemInfo.value.id}`)
} else {
router.push(`/servicecategories/`)
}
}
setupPage()
</script>
<template>
<UDashboardNavbar
:ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
>
<template #left>
<UButton
icon="i-heroicons-chevron-left"
variant="outline"
@click="router.push(`/servicecategories`)"
>
Leistungskategorien
</UButton>
</template>
<template #center>
<h1
v-if="itemInfo"
class="text-xl font-medium"
>{{itemInfo.name ? `Leistungskategorie: ${itemInfo.name}` : (mode === 'create' ? 'Leistungskategorie erstellen' : 'Leistungskategorie bearbeiten')}}</h1>
</template>
<template #right>
<UButton
v-if="mode === 'edit'"
@click="dataStore.updateItem('servicecategories',itemInfo)"
>
Speichern
</UButton>
<UButton
v-else-if="mode === 'create'"
@click="dataStore.createNewItem('servicecategories',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(`/servicecategories/edit/${itemInfo.id}`)"
>
Bearbeiten
</UButton>
</template>
</UDashboardNavbar>
<UTabs
:items="[{label: 'Informationen'}]"
v-if="mode === 'show' && itemInfo"
class="p-5"
v-model="openTab"
>
<template #item="{item}">
<div v-if="item.label === 'Informationen'" class="mr-5 flex flex-row">
<div class="w-1/2 mr-5">
<UCard>
<table class="w-full">
<tr>
<td>Name: </td>
<td>{{itemInfo.name}}</td>
</tr>
<tr>
<td>Beschreibung:</td>
<td>{{itemInfo.description}}</td>
</tr>
</table>
</UCard>
</div>
<div class="w-1/2">
<UCard>
<HistoryDisplay
type="product"
v-if="itemInfo"
:element-id="itemInfo.id"
render-headline
/>
</UCard>
</div>
</div>
</template>
</UTabs>
<UForm
v-else-if="mode == 'edit' || mode == 'create'"
class="p-5"
>
<UFormGroup
label="Name:"
>
<UInput
v-model="itemInfo.name"
autofocus
/>
</UFormGroup>
<UFormGroup
label="Beschreibung:"
>
<UTextarea
v-model="itemInfo.description"
/>
</UFormGroup>
</UForm>
</template>
<style scoped>
td {
border-bottom: 1px solid lightgrey;
vertical-align: top;
padding-bottom: 0.15em;
padding-top: 0.15em;
}
</style>

View File

@@ -0,0 +1,24 @@
<template>
<EntityList
:items="items"
type="servicecategories"
/>
</template>
<script setup>
definePageMeta({
middleware: "auth"
})
const items = ref([])
const setupPage = async () => {
items.value = await useSupabaseSelect("servicecategories","*")
}
setupPage()
</script>
<style scoped>
</style>

View File

@@ -0,0 +1,266 @@
<script setup>
definePageMeta({
middleware: "auth"
})
defineShortcuts({
'backspace': () => {
router.push("/services")
},
'arrowleft': () => {
if(openTab.value > 0){
openTab.value -= 1
}
},
'arrowright': () => {
if(openTab.value < 3) {
openTab.value += 1
}
},
})
const dataStore = useDataStore()
const profileStore = useProfileStore()
const route = useRoute()
const router = useRouter()
const toast = useToast()
const supabase = useSupabaseClient()
const id = ref(route.params.id ? route.params.id : null )
//Working
const mode = ref(route.params.mode || "show")
const itemInfo = ref({
unit: 1,
tags: [],
servicecategories: []
})
const openTab = ref(0)
const servicecategories = ref([])
const units = ref([])
//Functions
const setupPage = async () => {
if(mode.value === "show"){
itemInfo.value = await useSupabaseSelectSingle("services",useRoute().params.id, "*")
} else if(mode.value === "edit") {
itemInfo.value = await useSupabaseSelectSingle("services",useRoute().params.id)
}
servicecategories.value = await useSupabaseSelect("servicecategories","*")
units.value = (await supabase.from("units").select()).data
}
setupPage()
</script>
<template>
<UDashboardNavbar :title="itemInfo ? itemInfo.name : (mode === 'create' ? 'Leistung erstellen' : 'Leistung bearbeiten')">
<template #left>
<UButton
icon="i-heroicons-chevron-left"
variant="outline"
@click="router.push(`/services`)"
>
Leistungen
</UButton>
</template>
<template #center>
<h1
v-if="itemInfo"
class="text-xl font-medium"
>{{itemInfo.name ? `Leistung: ${itemInfo.name}` : (mode === 'create' ? 'Leistung erstellen' : 'Leistung bearbeiten')}}</h1>
</template>
<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="itemInfo.value ? router.push(`/services/show/${itemInfo.value.id}`) : router.push(`/services/`)"
color="red"
class="ml-2"
v-if="mode === 'edit' || mode === 'create'"
>
Abbrechen
</UButton>
<UButton
v-if="mode === 'show'"
@click="router.push(`/services/edit/${itemInfo.id}`)"
>
Bearbeiten
</UButton>
</template>
</UDashboardNavbar>
<UTabs
:items="[{label: 'Informationen'},{label: 'Dokumente'}]"
v-if="mode === 'show'"
class="p-5"
v-model="openTab"
>
<template #item="{item}">
<div v-if="item.label === 'Informationen'" class="mt-5 flex flex-row">
<div class="w-1/2 mr-5">
<UCard>
<table class="w-full">
<tr>
<td>Name:</td>
<td>{{itemInfo.name}}</td>
</tr>
<tr>
<td>Leistungsnummer:</td>
<td>{{itemInfo.serviceNumber}}</td>
</tr>
<tr>
<td>Verkaufpreis:</td>
<td>{{itemInfo.sellingPrice && itemInfo.sellingPrice.toFixed(2).replace(".", ",") + " €"}}</td>
</tr>
<tr>
<td>Einheit:</td>
<td>{{units.find(i => i.id === itemInfo.unit) ? units.find(i => i.id === itemInfo.unit).name : itemInfo.unit}}</td>
</tr>
<tr>
<td>Tags:</td>
<td>{{itemInfo.tags.join(", ")}}</td>
</tr>
<tr>
<td>Leistungskategorien:</td>
<td>{{itemInfo.servicecategories ? itemInfo.servicecategories.map(i => servicecategories.find(x => x.id === i).name).join(", ") : ""}}</td>
</tr>
<tr>
<td>Beschreibung:</td>
<td>{{itemInfo.description}}</td>
</tr>
</table>
</UCard>
</div>
<div class="w-1/2">
<UCard>
<HistoryDisplay
render-headline
type="product"
v-if="itemInfo"
:element-id="itemInfo.id"
/>
</UCard>
</div>
</div>
<div
v-if="item.label === 'Dokumente'"
class="mt-5"
>
<UCard>
<Toolbar>
<DocumentUpload
type="product"
:element-id="itemInfo.id"
/>
</Toolbar>
<DocumentList :documents="dataStore.getDocumentsByProductId(itemInfo.id)"/>
</UCard>
</div>
</template>
</UTabs>
<UForm
v-else-if="mode == 'edit' || mode == 'create'"
class="p-5"
>
<UFormGroup
label="Name:"
>
<UInput
v-model="itemInfo.name"
/>
</UFormGroup>
<UFormGroup
label="Leistungsnummer:"
>
<UInput
v-model="itemInfo.serviceNumber"
/>
</UFormGroup>
<UFormGroup
label="Einheit:"
>
<USelectMenu
v-model="itemInfo.unit"
:options="dataStore.units"
option-attribute="name"
value-attribute="id"
>
<template #label>
{{dataStore.units.find(unit => unit.id === itemInfo.unit) ? dataStore.units.find(unit => unit.id === itemInfo.unit).name : itemInfo.unit }}
</template>
</USelectMenu>
</UFormGroup>
<UFormGroup
label="Tags:"
>
<USelectMenu
v-model="itemInfo.tags"
:options="profileStore.ownTenant.tags.products"
multiple
/>
</UFormGroup>
<UFormGroup
label="Leistungskategorie:"
>
<USelectMenu
:options="servicecategories"
option-attribute="name"
value-attribute="id"
v-model="itemInfo.servicecategories"
multiple
>
<template #label>
{{itemInfo.servicecategories && itemInfo.servicecategories.length > 0 ? itemInfo.servicecategories.map(i => servicecategories.find(x => x.id === i).name).join(", ") : "Keine Kategorien ausgewählt"}}
</template>
</USelectMenu>
</UFormGroup>
<UFormGroup
label="Verkaufspreis:"
>
<UInput
v-model="itemInfo.sellingPrice"
type="number"
steps="0.001"
>
<template #trailing>
<span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
</template>
</UInput>
</UFormGroup>
<UFormGroup
label="Beschreibung:"
>
<UTextarea
v-model="itemInfo.description"
:rows="6"
/>
</UFormGroup>
</UForm>
</template>
<style scoped>
td {
border-bottom: 1px solid lightgrey;
vertical-align: top;
padding-bottom: 0.15em;
padding-top: 0.15em;
}
</style>

View File

@@ -0,0 +1,25 @@
<template>
<EntityList
:items="items"
type="services"
/>
</template>
<script setup>
definePageMeta({
middleware: "auth"
})
const items = ref([])
const setupPage = async () => {
items.value = await useSupabaseSelect("services","*, unit(name)")
}
setupPage()
</script>
<style scoped>
</style>

View File

@@ -0,0 +1,211 @@
<script setup>
definePageMeta({
middleware: "auth"
})
const dataStore = useDataStore()
const profileStore = useProfileStore()
const route = useRoute()
const router = useRouter()
const toast = useToast()
const id = ref(route.params.id ? route.params.id : null )
//Working
const mode = ref(route.params.mode || "show")
const itemInfo = ref({
profile: profileStore.activeProfile.id
})
const oldItemInfo = ref({})
const categories = ["Offen", "In Bearbeitung", "Dringed", "Erledigt"]
//Functions
const setupPage = () => {
if(mode.value === "show" || mode.value === "edit"){
itemInfo.value = dataStore.getTaskById(Number(useRoute().params.id))
}
if(mode.value === "create") {
let query = route.query
if(query.project) itemInfo.value.project = Number(query.project)
if(query.plant) itemInfo.value.plant = Number(query.plant)
}
if(itemInfo.value) oldItemInfo.value = JSON.parse(JSON.stringify(itemInfo.value))
}
const editItem = async () => {
router.push(`/tasks/edit/${itemInfo.value.id}`)
}
const cancelEditorCreate = () => {
if(itemInfo.value) {
router.push(`/tasks/show/${itemInfo.value.id}`)
} else {
router.push(`/tasks/`)
}
}
setupPage()
</script>
<template>
<UDashboardNavbar :title="itemInfo ? itemInfo.name : (mode === 'create' ? 'Aufgabe erstellen' : 'Aufgabe bearbeiten')">
<template #left>
<UButton
icon="i-heroicons-chevron-left"
variant="outline"
@click="router.push(`/tasks`)"
>
Aufgaben
</UButton>
</template>
<template #center>
<h1
v-if="itemInfo"
:class="['text-xl','font-medium'/*, ... itemInfo.categorie === 'Erledigt' ? ['text-primary'] : ['text-rose-500']*/]"
>{{itemInfo ? `Aufgabe: ${itemInfo.name}` : (mode === 'create' ? 'Aufgabe erstellen' : 'Aufgabe bearbeiten')}}</h1>
</template>
<template #right>
<UButton
v-if="mode === 'edit'"
@click="dataStore.updateItem('tasks',itemInfo,oldItemInfo)"
>
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'"
@click="editItem"
>
Bearbeiten
</UButton>
</template>
</UDashboardNavbar>
<UTabs
:items="[{label: 'Informationen'},{label: 'Logbuch'}]"
v-if="itemInfo && mode === 'show'"
class="p-5"
>
<template #item="{item}">
<UCard class="mt-5">
<div v-if="item.label === 'Informationen'">
<div class="truncate">
<p>Kategorie: {{itemInfo.categorie}}</p>
<p v-if="itemInfo.project">Projekt: <nuxt-link :to="`/projects/show/${itemInfo.project}`">{{dataStore.getProjectById(itemInfo.project).name}}</nuxt-link></p>
<p>Beschreibung: <br><pre v-html="itemInfo.description"></pre></p>
</div>
</div>
<div v-else-if="item.label === 'Logbuch'">
<HistoryDisplay
type="task"
v-if="itemInfo"
:element-id="itemInfo.id"
/>
</div>
</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.profile"
:options="profileStore.profiles"
option-attribute="fullName"
value-attribute="id"
searchable-placeholder="Suche..."
searchable
:search-attributes="['fullName']"
>
<template #label>
{{profileStore.getProfileById(itemInfo.profile) ? profileStore.getProfileById(itemInfo.profile).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>
</template>
<style scoped>
</style>

View File

@@ -0,0 +1,129 @@
<template>
<UDashboardNavbar title="Aufgaben" :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>
<UButton @click="router.push(`/tasks/create`)">+ Aufgabe</UButton>
</template>
</UDashboardNavbar>
<UDashboardToolbar>
<template #left>
<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"
by="key"
>
<template #label>
Spalten
</template>
</USelectMenu>
</template>
</UDashboardToolbar>
<UTable
:rows="filteredRows"
:columns="columns"
class="w-full"
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
@select="(i) => router.push(`/tasks/show/${i.id}`) "
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Aufgaben anzuzeigen' }"
>
<template #finish-data="{row}">
<UButton
icon="i-heroicons-check"
variant="ghost"
@click="markAsFinished(row)"
/>
</template>
<template #created_at-data="{row}">
{{row.created_at ? dayjs(row.created_at).format("DD.MM.YY HH:mm") : ''}}
</template>
<template #user-data="{row}">
{{profileStore.profiles.find(i => i.id === row.user) ? profileStore.profiles.find(i => i.id === row.user).fullName : ""}}
</template>
<template #project-data="{row}">
{{dataStore.projects.find(i => i.id === row.project) ? dataStore.projects.find(i => i.id === row.project).name : ""}}
</template>
<template #customer-data="{row}">
{{dataStore.customers.find(customer => customer.id === row.customer) ? dataStore.customers.find(customer => customer.id === row.customer).name : "" }}
</template>
<template #plant-data="{row}">
{{dataStore.getPlantById(row.plant) ? dataStore.getPlantById(row.plant).name : "" }}
</template>
</UTable>
</template>
<script setup>
import dayjs from "dayjs";
definePageMeta({
middleware: "auth"
})
const dataStore = useDataStore()
const profileStore = useProfileStore()
const router = useRouter()
defineShortcuts({
'/': () => {
//console.log(searchinput)
//searchinput.value.focus()
document.getElementById("searchinput").focus()
},
'+': () => {
router.push("/tasks/create")
}
})
const templateColumns = [
/*{
key:"finish"
},*/
]
const selectedColumns = ref(templateColumns)
const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
const markAsFinished = (item) => {
dataStore.updateItem("tasks", {...item, categorie: "Erledigt"})
}
const searchString = ref('')
const showDone = ref(false)
const filteredRows = computed(() => {
let items = dataStore.tasks
items = items.filter(i => showDone.value === true ? i.categorie === "Erledigt" : i.categorie !== "Erledigt")
return useSearch(searchString.value, items)
})
</script>
<style scoped>
</style>