Added Searching in Service & Product Selection
Introduced Service Categories
This commit is contained in:
@@ -13,6 +13,9 @@ definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
const showProductSelectionModal = ref(false)
|
||||
const showServiceSelectionModal = ref(false)
|
||||
|
||||
|
||||
const itemInfo = ref({
|
||||
type: "invoices",
|
||||
@@ -58,11 +61,23 @@ const itemInfo = ref({
|
||||
|
||||
const letterheads = ref([])
|
||||
const createdDocuments = ref([])
|
||||
const products = ref([])
|
||||
const productcategories = ref([])
|
||||
const selectedProductcategorie = ref(null)
|
||||
const services = ref([])
|
||||
const servicecategories = ref([])
|
||||
const selectedServicecategorie = ref(null)
|
||||
|
||||
const setupPage = async () => {
|
||||
|
||||
letterheads.value = (await useSupabaseSelect("letterheads","*")).filter(i => i.documentTypes.length === 0 || i.documentTypes.includes(itemInfo.value.type))
|
||||
createdDocuments.value = (await useSupabaseSelect("createddocuments","*"))
|
||||
services.value = (await useSupabaseSelect("services","*"))
|
||||
servicecategories.value = (await useSupabaseSelect("servicecategories","*"))
|
||||
products.value = (await useSupabaseSelect("products","*"))
|
||||
productcategories.value = (await useSupabaseSelect("productcategories","*"))
|
||||
if(productcategories.value.length > 0) selectedProductcategorie.value = productcategories.value[0].id
|
||||
if(servicecategories.value.length > 0) selectedServicecategorie.value = servicecategories.value[0].id
|
||||
|
||||
if(route.params) {
|
||||
if(route.params.id) itemInfo.value = dataStore.getCreatedDocumentById(Number(route.params.id))
|
||||
@@ -1215,24 +1230,67 @@ setupPage()
|
||||
class="w-120"
|
||||
v-else-if="row.mode === 'normal'"
|
||||
>
|
||||
<USelectMenu
|
||||
class="max-w-60"
|
||||
:options="dataStore.products"
|
||||
:color="row.product ? 'primary' : 'rose'"
|
||||
option-attribute="name"
|
||||
value-attribute="id"
|
||||
searchable
|
||||
searchable-placeholder="Suche ..."
|
||||
:search-attributes="['name']"
|
||||
v-model="row.product"
|
||||
@change="row.unit = dataStore.getProductById(row.product).unit,
|
||||
<InputGroup>
|
||||
<USelectMenu
|
||||
class="max-w-60"
|
||||
:options="products"
|
||||
:color="row.product ? 'primary' : 'rose'"
|
||||
option-attribute="name"
|
||||
value-attribute="id"
|
||||
searchable
|
||||
searchable-placeholder="Suche ..."
|
||||
:search-attributes="['name']"
|
||||
v-model="row.product"
|
||||
@change="row.unit = dataStore.getProductById(row.product).unit,
|
||||
row.price = (dataStore.getProductById(row.product).sellingPrice || 0),
|
||||
row.description = dataStore.getProductById(row.product).description"
|
||||
>
|
||||
<template #label>
|
||||
<span class="truncate">{{row.product ? dataStore.getProductById(row.product).name : "Kein Produkt ausgewählt" }}</span>
|
||||
</template>
|
||||
</USelectMenu>
|
||||
>
|
||||
<template #label>
|
||||
<span class="truncate">{{row.product ? dataStore.getProductById(row.product).name : "Kein Produkt ausgewählt" }}</span>
|
||||
</template>
|
||||
</USelectMenu>
|
||||
<UButton
|
||||
icon="i-heroicons-magnifying-glass"
|
||||
@click="showProductSelectionModal = true"
|
||||
/>
|
||||
<UModal v-model="showProductSelectionModal">
|
||||
<UCard>
|
||||
<template #header>
|
||||
Artikel Auswählen
|
||||
</template>
|
||||
|
||||
<InputGroup class="w-full">
|
||||
<UFormGroup label="Artikelkategorie:">
|
||||
<USelectMenu
|
||||
v-if="productcategories.length > 0"
|
||||
:options="[{name: 'Nicht zugeordnet',id:'not set'},...productcategories]"
|
||||
value-attribute="id"
|
||||
option-attribute="name"
|
||||
v-model="selectedProductcategorie"
|
||||
/>
|
||||
</UFormGroup>
|
||||
</InputGroup>
|
||||
<UTable
|
||||
:rows="selectedProductcategorie !== 'not set' ? products.filter(i => i.productcategories.includes(selectedProductcategorie)) : products.filter(i => i.productcategories.length === 0)"
|
||||
:columns="[
|
||||
{key: 'name',label:'Name'},
|
||||
{key: 'manufacturer',label:'Hersteller'},
|
||||
{key: 'articleNumber',label:'Artikelnummer'},
|
||||
]"
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Artikel anzuzeigen' }"
|
||||
@select=" (i) => {
|
||||
row.product = i.id
|
||||
row.unit = dataStore.getProductById(row.product).unit,
|
||||
row.price = (dataStore.getProductById(row.product).sellingPrice || 0),
|
||||
row.description = dataStore.getProductById(row.product).description
|
||||
showProductSelectionModal = false}"
|
||||
>
|
||||
|
||||
</UTable>
|
||||
</UCard>
|
||||
</UModal>
|
||||
</InputGroup>
|
||||
|
||||
<!--
|
||||
{{dataStore.getProductById(66)}}
|
||||
-->
|
||||
@@ -1241,23 +1299,65 @@ setupPage()
|
||||
class="w-120"
|
||||
v-else-if="row.mode === 'service'"
|
||||
>
|
||||
<USelectMenu
|
||||
:options="dataStore.services"
|
||||
:color="row.service ? 'primary' : 'rose'"
|
||||
option-attribute="name"
|
||||
value-attribute="id"
|
||||
searchable
|
||||
searchable-placeholder="Suche ..."
|
||||
:search-attributes="['name']"
|
||||
v-model="row.service"
|
||||
@change="row.unit = dataStore.getServiceById(row.service).unit,
|
||||
row.price = dataStore.getServiceById(row.service).sellingPrice || 0,
|
||||
row.description = dataStore.getServiceById(row.service).description"
|
||||
>
|
||||
<template #label>
|
||||
<span class="truncate">{{dataStore.getServiceById(row.service) ? dataStore.getServiceById(row.service).name : "Keine Leistung ausgewählt" }}</span>
|
||||
</template>
|
||||
</USelectMenu>
|
||||
<InputGroup>
|
||||
<USelectMenu
|
||||
:options="services"
|
||||
:color="row.service ? 'primary' : 'rose'"
|
||||
option-attribute="name"
|
||||
value-attribute="id"
|
||||
searchable
|
||||
searchable-placeholder="Suche ..."
|
||||
:search-attributes="['name']"
|
||||
v-model="row.service"
|
||||
@change="row.unit = dataStore.getServiceById(row.service).unit,
|
||||
row.price = dataStore.getServiceById(row.service).sellingPrice || 0,
|
||||
row.description = dataStore.getServiceById(row.service).description"
|
||||
>
|
||||
<template #label>
|
||||
<span class="truncate">{{dataStore.getServiceById(row.service) ? dataStore.getServiceById(row.service).name : "Keine Leistung ausgewählt" }}</span>
|
||||
</template>
|
||||
</USelectMenu>
|
||||
<UButton
|
||||
icon="i-heroicons-magnifying-glass"
|
||||
@click="showServiceSelectionModal = true"
|
||||
/>
|
||||
<UModal v-model="showServiceSelectionModal">
|
||||
<UCard>
|
||||
<template #header>
|
||||
Leistung Auswählen
|
||||
</template>
|
||||
|
||||
<InputGroup class="w-full">
|
||||
<UFormGroup label="Leistungskategorie:">
|
||||
<USelectMenu
|
||||
v-if="servicecategories.length > 0"
|
||||
:options="[{name: 'Nicht zugeordnet',id:'not set'},...servicecategories]"
|
||||
value-attribute="id"
|
||||
option-attribute="name"
|
||||
v-model="selectedServicecategorie"
|
||||
/>
|
||||
</UFormGroup>
|
||||
</InputGroup>
|
||||
<UTable
|
||||
:rows="selectedServicecategorie !== 'not set' ? services.filter(i => i.servicecategories.includes(selectedServicecategorie)) : services.filter(i => i.servicecategories.length === 0)"
|
||||
:columns="[
|
||||
{key: 'name',label:'Name'},
|
||||
{key: 'serviceNumber',label:'Leistungsnummer'},
|
||||
{key: 'sellingPrice',label:'Verkaufspreis'},
|
||||
]"
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Leistungen anzuzeigen' }"
|
||||
@select=" (i) => {
|
||||
row.service = i.id
|
||||
row.unit = dataStore.getServiceById(row.service).unit,
|
||||
row.price = dataStore.getServiceById(row.service).sellingPrice || 0,
|
||||
row.description = dataStore.getServiceById(row.service).description
|
||||
showServiceSelectionModal = false}"
|
||||
>
|
||||
|
||||
</UTable>
|
||||
</UCard>
|
||||
</UModal>
|
||||
</InputGroup>
|
||||
</td>
|
||||
<td
|
||||
class="w-20"
|
||||
|
||||
Reference in New Issue
Block a user