Restructured Project Rep
This commit is contained in:
210
pages/absenceRequests/[mode]/[[id]].vue
Normal file
210
pages/absenceRequests/[mode]/[[id]].vue
Normal file
@@ -0,0 +1,210 @@
|
||||
<script setup>
|
||||
import dayjs from "dayjs";
|
||||
import HistoryDisplay from "~/components/HistoryDisplay.vue";
|
||||
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const toast = useToast()
|
||||
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({
|
||||
approved: "Offen"
|
||||
})
|
||||
const states = ["Offen","Genehmigt", "Abgelehnt"]
|
||||
|
||||
const absenceReasons = [
|
||||
"Elternzeit",
|
||||
"Kind krank - Kinderbetreuung",
|
||||
"Krankheit",
|
||||
"Krankheit 1 Tag (mit Attest)",
|
||||
"Krankheit ab 2. Tag (mit Attest)",
|
||||
"Mutterschutz",
|
||||
"Sonderurlaub (bezahlt)",
|
||||
"Überstundenausgleich",
|
||||
"Unbezahlter Urlaub",
|
||||
"Urlaub"
|
||||
]
|
||||
|
||||
//Functions
|
||||
const setupPage = () => {
|
||||
if(mode.value === "show" || mode.value === "edit"){
|
||||
currentItem.value = dataStore.getAbsenceRequestById(Number(useRoute().params.id))
|
||||
}
|
||||
|
||||
if(mode.value === "edit") itemInfo.value = currentItem.value
|
||||
}
|
||||
|
||||
const editItem = async () => {
|
||||
router.push(`/employees/absenceRequests/edit/${currentItem.id}`)
|
||||
setupPage()
|
||||
}
|
||||
|
||||
const cancelEditorCreate = () => {
|
||||
if(currentItem.value) {
|
||||
router.push(`/absenceRequests/show/${currentItem.value.id}`)
|
||||
} else {
|
||||
router.push(`/absenceRequests/`)
|
||||
}
|
||||
}
|
||||
setupPage()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardNavbar :title="currentItem ? currentItem.name : (mode === 'create' ? 'Abwesenheit erstellen' : 'Abwesenheit bearbeiten')">
|
||||
<template #right>
|
||||
<UButton
|
||||
v-if="mode === 'edit'"
|
||||
@click="dataStore.updateItem('absencerequests',itemInfo)"
|
||||
>
|
||||
Speichern
|
||||
</UButton>
|
||||
<UButton
|
||||
v-else-if="mode === 'create'"
|
||||
@click="dataStore.createNewItem('absencerequests',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>
|
||||
<template #badge v-if="currentItem">
|
||||
<UBadge
|
||||
v-if="currentItem.approved === 'Offen'"
|
||||
color="blue"
|
||||
>{{currentItem.approved}}</UBadge>
|
||||
<UBadge
|
||||
v-else-if="currentItem.approved === 'Genehmigt'"
|
||||
color="primary"
|
||||
>{{currentItem.approved}}</UBadge>
|
||||
<UBadge
|
||||
v-else-if="currentItem.approved === 'Abgelehnt'"
|
||||
color="rose"
|
||||
>{{currentItem.approved}}</UBadge>
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
<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>Mitarbeiter: {{dataStore.profiles.find(item => item.id === currentItem.user) ? dataStore.profiles.find(item => item.id === currentItem.user).fullName : ""}}</p>
|
||||
<p>Start: {{dayjs(currentItem.start).format("DD.MM.YYYY")}}</p>
|
||||
<p>Ende: {{dayjs(currentItem.end).format("DD.MM.YYYY")}}</p>
|
||||
<p>Grund: {{currentItem.reason}}</p>
|
||||
<p>Notizen: {{currentItem.notes}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="item.label === 'Logbuch'">
|
||||
<HistoryDisplay
|
||||
type="absencerequest"
|
||||
v-if="currentItem"
|
||||
:element-id="currentItem.id"
|
||||
/>
|
||||
</div>
|
||||
</UCard>
|
||||
</template>
|
||||
</UTabs>
|
||||
<UForm v-else-if="mode == 'edit' || mode == 'create'" class="p-5" >
|
||||
<UFormGroup
|
||||
label="Status:"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="itemInfo.approved"
|
||||
:options="states"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup
|
||||
label="Grund:"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="itemInfo.reason"
|
||||
:options="absenceReasons"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup
|
||||
label="Mitarbeiter:"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="itemInfo.user"
|
||||
:options="dataStore.profiles"
|
||||
option-attribute="fullName"
|
||||
value-attribute="id"
|
||||
searchable
|
||||
:search-attributes="['fullName']"
|
||||
>
|
||||
<template #label>
|
||||
{{dataStore.getProfileById(itemInfo.user) ? dataStore.getProfileById(itemInfo.user).fullName : "Mitarbeiter auswählen"}}
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup label="Start:">
|
||||
<UPopover :popper="{ placement: 'bottom-start' }">
|
||||
<UButton
|
||||
icon="i-heroicons-calendar-days-20-solid"
|
||||
:label="itemInfo.start ? dayjs(itemInfo.start).format('DD.MM.YYYY') : 'Datum auswählen'"
|
||||
variant="outline"
|
||||
/>
|
||||
|
||||
<template #panel="{ close }">
|
||||
<LazyDatePicker v-model="itemInfo.start" @close="close" />
|
||||
</template>
|
||||
</UPopover>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup label="Ende:">
|
||||
<UPopover :popper="{ placement: 'bottom-start' }">
|
||||
<UButton
|
||||
variant="outline"
|
||||
icon="i-heroicons-calendar-days-20-solid"
|
||||
:label="itemInfo.end ? dayjs(itemInfo.end).format('DD.MM.YYYY') : 'Datum auswählen'"
|
||||
/>
|
||||
|
||||
<template #panel="{ close }">
|
||||
<LazyDatePicker v-model="itemInfo.end" @close="close" />
|
||||
</template>
|
||||
</UPopover>
|
||||
</UFormGroup>
|
||||
|
||||
|
||||
<UFormGroup
|
||||
label="Notizen:"
|
||||
>
|
||||
<UTextarea
|
||||
v-model="itemInfo.note"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
</UForm>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
140
pages/absenceRequests/index.vue
Normal file
140
pages/absenceRequests/index.vue
Normal file
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<UDashboardNavbar title="Abwesenheiten" :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(`/absenceRequests/create`)">+ Abwesenheit</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>
|
||||
<UTable
|
||||
:rows="filteredRows"
|
||||
:columns="columns"
|
||||
class="w-full"
|
||||
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
|
||||
@select="(i) => router.push(`/absenceRequests/show/${i.id}`) "
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Abwesenheiten anzuzeigen' }"
|
||||
>
|
||||
<template #approved-data="{row}">
|
||||
<span v-if="!row.approved">
|
||||
Genehmigung offen
|
||||
</span>
|
||||
<span
|
||||
v-else-if="row.approved"
|
||||
class="text-primary"
|
||||
>
|
||||
Genemigt
|
||||
</span>
|
||||
<span
|
||||
v-else
|
||||
class="text-rose"
|
||||
>
|
||||
Abgelehnt
|
||||
</span>
|
||||
</template>
|
||||
<template #user-data="{row}">
|
||||
{{dataStore.profiles.find(profile => profile.id === row.user) ? dataStore.profiles.find(profile => profile.id === row.user).fullName : ""}}
|
||||
</template>
|
||||
</UTable>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
defineShortcuts({
|
||||
'/': () => {
|
||||
//console.log(searchinput)
|
||||
//searchinput.value.focus()
|
||||
document.getElementById("searchinput").focus()
|
||||
},
|
||||
'+': () => {
|
||||
router.push("/absenceRequests/create")
|
||||
}
|
||||
})
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const router = useRouter()
|
||||
|
||||
const templateColumns = [
|
||||
{
|
||||
key: "approved",
|
||||
label: "Genehmigt",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "user",
|
||||
label: "Mitarbeiter",
|
||||
sortable: true
|
||||
},{
|
||||
key: "reason",
|
||||
label: "Grund",
|
||||
sortable: true
|
||||
},{
|
||||
key: "start",
|
||||
label: "Start",
|
||||
sortable: true
|
||||
},{
|
||||
key: "end",
|
||||
label: "Ende",
|
||||
sortable: true
|
||||
},{
|
||||
key: "note",
|
||||
label: "Notizen",
|
||||
sortable: true
|
||||
}
|
||||
]
|
||||
|
||||
const selectedColumns = ref(templateColumns)
|
||||
const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
|
||||
|
||||
const searchString = ref('')
|
||||
const filteredRows = computed(() => {
|
||||
let items = dataStore.absenceRequests
|
||||
|
||||
if(!searchString.value) {
|
||||
return items
|
||||
}
|
||||
|
||||
return items.filter(item => {
|
||||
return Object.values(item).some((value) => {
|
||||
return String(value).toLowerCase().includes(searchString.value.toLowerCase())
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
162
pages/banking/index.vue
Normal file
162
pages/banking/index.vue
Normal file
@@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<UDashboardNavbar title="Bankbuchungen">
|
||||
|
||||
</UDashboardNavbar>
|
||||
<UDashboardToolbar>
|
||||
<template #left>
|
||||
<USelectMenu
|
||||
:options="dataStore.bankAccounts"
|
||||
v-model="filterAccount"
|
||||
option-attribute="iban"
|
||||
multiple
|
||||
by="id"
|
||||
>
|
||||
<template #label>
|
||||
Konto
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</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) => {selectedStatement = i; showStatementModal = true}"
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
|
||||
>
|
||||
<template #account-data="{row}">
|
||||
{{row.account ? (dataStore.getBankAccountById(row.account).name ? dataStore.getBankAccountById(row.account).name :dataStore.getBankAccountById(row.account).iban) : ""}}
|
||||
</template>
|
||||
<template #valueDate-data="{row}">
|
||||
{{dayjs(row.valueDate).format("DD.MM.YY")}}
|
||||
</template>
|
||||
<template #amount-data="{row}">
|
||||
<span
|
||||
v-if="row.amount >= 0"
|
||||
class="text-primary-500"
|
||||
>{{String(row.amount.toFixed(2)).replace(".",",")}} €</span>
|
||||
<span
|
||||
v-else-if="row.amount < 0"
|
||||
class="text-rose-500"
|
||||
>{{String(row.amount.toFixed(2)).replace(".",",")}} €</span>
|
||||
</template>
|
||||
<template #partner-data="{row}">
|
||||
<span
|
||||
v-if="row.amount < 0"
|
||||
>
|
||||
{{row.credName}}
|
||||
</span>
|
||||
<span
|
||||
v-else-if="row.amount > 0"
|
||||
>
|
||||
{{row.debName}}
|
||||
</span>
|
||||
</template>
|
||||
</UTable>
|
||||
|
||||
<USlideover
|
||||
v-model="showStatementModal"
|
||||
>
|
||||
<UCard class="h-full">
|
||||
<template #header>
|
||||
<span v-if="selectedStatement.amount > 0">
|
||||
{{selectedStatement.debName}}
|
||||
</span>
|
||||
<span v-else-if="selectedStatement.amount < 0">
|
||||
{{selectedStatement.credName}}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<div class="truncate">
|
||||
<p>Betrag: {{String(selectedStatement.amount.toFixed(2)).replace(".",",")}} €</p>
|
||||
<p>Buchungsdatum: {{dayjs(selectedStatement.date).format("DD.MM.YYYY")}}</p>
|
||||
<p>Werstellungsdatum: {{dayjs(selectedStatement.valueDate).format("DD.MM.YYYY")}}</p>
|
||||
<p>Partner: {{selectedStatement.amount > 0 ? selectedStatement.debName : selectedStatement.credName}}</p>
|
||||
<p>Partner IBAN: {{selectedStatement.amount > 0 ? selectedStatement.debIban : selectedStatement.credIban}}</p>
|
||||
<p>Konto: {{selectedStatement.account}}</p>
|
||||
<p class="text-wrap">Beschreibung: <br>{{selectedStatement.text}}</p>
|
||||
</div>
|
||||
|
||||
<UFormGroup>
|
||||
<USelectMenu
|
||||
:options="dataStore.createddocuments"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
|
||||
|
||||
</UCard>
|
||||
|
||||
</USlideover>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import dayjs from "dayjs";
|
||||
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const router = useRouter()
|
||||
|
||||
const selectedStatement = ref(null)
|
||||
const showStatementModal = ref(false)
|
||||
|
||||
const templateColumns = [
|
||||
{
|
||||
key: "account",
|
||||
label: "Konto",
|
||||
sortable: true
|
||||
},{
|
||||
key: "valueDate",
|
||||
label: "Valuta",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "amount",
|
||||
label: "Betrag",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "partner",
|
||||
label: "Name",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "text",
|
||||
label: "Beschreibung",
|
||||
sortable: true
|
||||
}
|
||||
]
|
||||
const selectedColumns = ref(templateColumns)
|
||||
const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
|
||||
|
||||
|
||||
const searchString = ref('')
|
||||
const filterAccount = ref(dataStore.bankAccounts || [])
|
||||
|
||||
const filteredRows = computed(() => {
|
||||
return useSearch(searchString.value, dataStore.bankStatements.filter(i => filterAccount.value.find(x => x.id === i.account)))
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
138
pages/banking/statements/[[accountId]].vue
Normal file
138
pages/banking/statements/[[accountId]].vue
Normal file
@@ -0,0 +1,138 @@
|
||||
<script setup>
|
||||
import dayjs from "dayjs";
|
||||
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
const dataStore = useDataStore()
|
||||
const route = useRoute()
|
||||
const supabase = useSupabaseClient()
|
||||
|
||||
|
||||
const searchString = ref("")
|
||||
const showAssigned = ref(false)
|
||||
const selectedAccount = ref(0)
|
||||
|
||||
const filteredRows = computed(() => {
|
||||
let statements = dataStore.bankStatements
|
||||
|
||||
if(!showAssigned.value) {
|
||||
statements = statements.filter(statement => !statement.customerInvoice || !statement.vendorInvoice)
|
||||
}
|
||||
|
||||
if(selectedAccount.value !== 0) {
|
||||
statements = statements.filter(statement => statement.account === selectedAccount.value)
|
||||
}
|
||||
|
||||
if(searchString.value.length > 0) {
|
||||
statements = statements.filter(item => {
|
||||
return Object.values(item).some((value) => {
|
||||
return String(value).toLowerCase().includes(searchString.value.toLowerCase())
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
return statements
|
||||
})
|
||||
|
||||
|
||||
|
||||
const showStatementSlideover = ref(false)
|
||||
const selectedStatement = ref({})
|
||||
|
||||
const selectStatement = (statement) => {
|
||||
selectedStatement.value = statement
|
||||
showStatementSlideover.value = true
|
||||
}
|
||||
|
||||
const statementColumns = [
|
||||
{
|
||||
key:"amount",
|
||||
label: "Betrag"
|
||||
},
|
||||
{
|
||||
key:"date",
|
||||
label: "Datum",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "credName",
|
||||
label: "Empfänger"
|
||||
},
|
||||
{
|
||||
key: "debName",
|
||||
label: "Sender"
|
||||
},
|
||||
{
|
||||
key: "text",
|
||||
label: "Verwendungszweck"
|
||||
},
|
||||
]
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<USlideover
|
||||
v-model="showStatementSlideover"
|
||||
>
|
||||
<UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
|
||||
|
||||
|
||||
|
||||
|
||||
<DevOnly>
|
||||
{{selectedStatement}}
|
||||
</DevOnly>
|
||||
</UCard>
|
||||
|
||||
</USlideover>
|
||||
|
||||
<InputGroup :gap="2">
|
||||
<UInput
|
||||
v-model="searchString"
|
||||
placeholder="Suche..."
|
||||
/>
|
||||
<USelectMenu
|
||||
:options="dataStore.bankAccounts.filter(account => account.used)"
|
||||
v-model="selectedAccount"
|
||||
option-attribute="iban"
|
||||
value-attribute="id"
|
||||
>
|
||||
<template #label>
|
||||
{{dataStore.bankAccounts.find(account => account.id === selectedAccount) ? dataStore.bankAccounts.find(account => account.id === selectedAccount).iban : "Kontoauswählen"}}
|
||||
</template>
|
||||
</USelectMenu>
|
||||
<UCheckbox
|
||||
v-model="showAssigned"
|
||||
label="Zugeordnete Anzeigen"
|
||||
/>
|
||||
</InputGroup>
|
||||
|
||||
<UTable
|
||||
:rows="filteredRows"
|
||||
:columns="statementColumns"
|
||||
@select="selectStatement"
|
||||
>
|
||||
<template #amount-data="{row}">
|
||||
<span
|
||||
v-if="row.amount >= 0"
|
||||
class="text-primary-500"
|
||||
>
|
||||
{{row.amount.toFixed(2) + " €"}}
|
||||
</span>
|
||||
<span
|
||||
v-if="row.amount < 0"
|
||||
class="text-rose-600"
|
||||
>
|
||||
{{row.amount.toFixed(2) + " €"}}
|
||||
</span>
|
||||
</template>
|
||||
<template #date-data="{row}">
|
||||
{{dayjs(row.date).format("DD.MM.YY")}}
|
||||
</template>
|
||||
</UTable>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
172
pages/calendar/[mode].vue
Normal file
172
pages/calendar/[mode].vue
Normal file
@@ -0,0 +1,172 @@
|
||||
<script setup>
|
||||
import deLocale from "@fullcalendar/core/locales/de";
|
||||
import FullCalendar from "@fullcalendar/vue3";
|
||||
import dayGridPlugin from "@fullcalendar/daygrid"
|
||||
import timeGridPlugin from "@fullcalendar/timegrid"
|
||||
import resourceTimelinePlugin from "@fullcalendar/resource-timeline";
|
||||
import interactionPlugin from "@fullcalendar/interaction";
|
||||
import dayjs from "dayjs";
|
||||
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
//Config
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const mode = ref(route.params.mode || "grid")
|
||||
const supabase = useSupabaseClient()
|
||||
const dataStore = useDataStore()
|
||||
const resources = dataStore.getResources
|
||||
const eventTypes = dataStore.getEventTypes
|
||||
|
||||
|
||||
//Working
|
||||
const newEventData = ref({
|
||||
resources: [],
|
||||
resourceId: "",
|
||||
resourceType: "",
|
||||
title: "",
|
||||
type: "Umsetzung",
|
||||
start: "",
|
||||
end: null
|
||||
})
|
||||
const showNewEventModal = ref(false)
|
||||
const showEventModal = ref(false)
|
||||
const selectedEvent = ref({})
|
||||
const selectedResources = ref([])
|
||||
|
||||
|
||||
//Functions
|
||||
const convertResourceIds = () => {
|
||||
|
||||
newEventData.value.resources = selectedResources.value.map(i => {
|
||||
/*if(i.type !== 'Mitarbeiter') {
|
||||
return {id: Number(i.id.split('-')[1]), type: i.type}
|
||||
} else {
|
||||
return {id: i.id, type: i.type}
|
||||
}*/
|
||||
|
||||
if((String(i).match(/-/g) || []).length > 1) {
|
||||
return {type: "Mitarbeiter", id: i}
|
||||
} else {
|
||||
|
||||
if(i.split('-')[0] === 'I') {
|
||||
return {id: Number(i.split('-')[1]), type: "Inventar"}
|
||||
} else if(i.split('-')[0] === 'F') {
|
||||
return {id: Number(i.split('-')[1]), type: "Fahrzeug"}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
//Calendar Config
|
||||
const calendarOptionsGrid = reactive({
|
||||
locale: deLocale,
|
||||
plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
|
||||
headerToolbar: {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
right: 'dayGridMonth,timeGridWeek,timeGridDay'
|
||||
},
|
||||
initialView: "dayGridMonth",
|
||||
initialEvents: dataStore.getEvents,
|
||||
nowIndicator: true,
|
||||
height: "80vh",
|
||||
selectable: true,
|
||||
weekNumbers: true,
|
||||
select: function(info) {
|
||||
console.log(info)
|
||||
|
||||
|
||||
router.push(`/events/edit/?start=${info.startStr}&end=${info.endStr}&source=grid`)
|
||||
|
||||
},
|
||||
eventClick: function (info){
|
||||
console.log(info)
|
||||
if(info.event.title.startsWith("Abw.:")){
|
||||
router.push(`/absencerequests/show/${info.event.id}`)
|
||||
} else {
|
||||
router.push(`/events/show/${info.event.id}`)
|
||||
}
|
||||
|
||||
},
|
||||
})
|
||||
|
||||
const calendarOptionsTimeline = reactive({
|
||||
schedulerLicenseKey: "CC-Attribution-NonCommercial-NoDerivatives",
|
||||
locale: deLocale,
|
||||
plugins: [resourceTimelinePlugin, interactionPlugin],
|
||||
initialView: "resourceTimeline3Hours",
|
||||
|
||||
headerToolbar: {
|
||||
left: 'prev,next',
|
||||
center: 'title',
|
||||
right: 'resourceTimelineDay,resourceTimeline3Hours,resourceTimelineMonth'
|
||||
},
|
||||
initialEvents: dataStore.getEventsByResource,
|
||||
selectable: true,
|
||||
select: function (info) {
|
||||
router.push(`/events/edit/?start=${info.startStr}&end=${info.endStr}&resources=${JSON.stringify([info.resource.id])}&source=timeline`)
|
||||
},
|
||||
eventClick: function (info){
|
||||
if(info.event.title.startsWith("Abw.:")){
|
||||
router.push(`/absencerequests/show/${info.event.id}`)
|
||||
} else {
|
||||
router.push(`/events/show/${info.event.id}`)
|
||||
}
|
||||
},
|
||||
resourceGroupField: "type",
|
||||
resourceOrder: "-type",
|
||||
resources: resources,
|
||||
nowIndicator:true,
|
||||
views: {
|
||||
resourceTimeline3Hours: {
|
||||
type: 'resourceTimeline',
|
||||
slotDuration: {hours: 3},
|
||||
slotMinTime: "06:00:00",
|
||||
slotMaxTime: "21:00:00",
|
||||
/*duration: {days:7},*/
|
||||
buttonText: "Woche",
|
||||
visibleRange: function(currentDate) {
|
||||
// Generate a new date for manipulating in the next step
|
||||
var startDate = new Date(currentDate);
|
||||
var endDate = new Date(currentDate);
|
||||
|
||||
// Adjust the start & end dates, respectively
|
||||
startDate.setDate(startDate.getDate() - startDate.getDay() +1); // One day in the past
|
||||
endDate.setDate(startDate.getDate() + 5); // Two days into the future
|
||||
|
||||
return { start: startDate, end: endDate };
|
||||
}
|
||||
}
|
||||
},
|
||||
height: '80vh',
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
107
pages/chat.vue
Normal file
107
pages/chat.vue
Normal file
@@ -0,0 +1,107 @@
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
layout: "default"
|
||||
})
|
||||
|
||||
|
||||
import dayjs from "dayjs";
|
||||
|
||||
|
||||
const supabase = useSupabaseClient()
|
||||
const user = useSupabaseUser()
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const selectedChat = ref({})
|
||||
const messageText = ref("")
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex h-full">
|
||||
<div class="w-1/5 mr-2 scrollList">
|
||||
<a
|
||||
v-for="chat in dataStore.chats"
|
||||
@click="selectedChat = chat"
|
||||
>
|
||||
<UAlert
|
||||
:title="chat.title ? chat.title : chat.members.map(i => { if(i !== user.id) return dataStore.getProfileById(i).fullName}).join(' ')"
|
||||
:avatar="{alt: chat.members.map(i => { if(i !== user.id) return dataStore.getProfileById(i).fullName}).join(' ')}"
|
||||
:color="selectedChat.id === chat.id ? 'primary' : 'white'"
|
||||
variant="outline"
|
||||
>
|
||||
<template #title="{title}">
|
||||
{{title}} <!-- TODO: Add Unread Counter <UBadge class="ml-1">{{dataStore.getMessagesByChatId(chat.id).filter(i => !i.read ).length}}</UBadge>-->
|
||||
</template>
|
||||
</UAlert>
|
||||
|
||||
</a>
|
||||
</div>
|
||||
<div class="w-full h-full px-5 flex flex-col justify-between" v-if="selectedChat.id">
|
||||
<div class="flex flex-col mt-5 scrollList">
|
||||
|
||||
<div
|
||||
v-for="message in dataStore.getMessagesByChatId(selectedChat.id)"
|
||||
>
|
||||
<div class="flex justify-end mb-4" v-if="message.origin === user.id">
|
||||
<div
|
||||
class="mr-2 py-3 px-4 bg-primary-400 rounded-bl-3xl rounded-tl-3xl rounded-tr-xl text-white"
|
||||
>
|
||||
{{message.text}}
|
||||
</div>
|
||||
<UAvatar
|
||||
:alt="dataStore.getProfileById(message.origin) ? dataStore.getProfileById(message.origin).fullName : ''"
|
||||
size="md"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex justify-start mb-4" v-else>
|
||||
<UAvatar
|
||||
:alt="dataStore.getProfileById(message.origin) ? dataStore.getProfileById(message.origin).fullName : ''"
|
||||
size="md"
|
||||
/>
|
||||
<div
|
||||
class="ml-2 py-3 px-4 bg-gray-400 rounded-br-3xl rounded-tr-3xl rounded-tl-xl text-white"
|
||||
>
|
||||
{{message.text}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="py-5">
|
||||
<UButtonGroup class="w-full">
|
||||
<UInput
|
||||
variant="outline"
|
||||
color="primary"
|
||||
placeholder="Neue Nachricht"
|
||||
v-model="messageText"
|
||||
@keyup.enter="dataStore.createNewItem('messages',{
|
||||
text: messageText,
|
||||
origin: user.id,
|
||||
destination: selectedChat.id
|
||||
})"
|
||||
class="flex-auto"
|
||||
/>
|
||||
<UButton
|
||||
@click="dataStore.createNewItem('messages',{
|
||||
text: messageText,
|
||||
origin: user.id,
|
||||
destination: selectedChat.id
|
||||
})"
|
||||
>
|
||||
Senden
|
||||
</UButton>
|
||||
</UButtonGroup>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
226
pages/contacts/[mode]/[[id]].vue
Normal file
226
pages/contacts/[mode]/[[id]].vue
Normal file
@@ -0,0 +1,226 @@
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const toast = useToast()
|
||||
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({
|
||||
active: true
|
||||
})
|
||||
|
||||
//Functions
|
||||
const setupPage = () => {
|
||||
if(mode.value === "show" || mode.value === "edit"){
|
||||
currentItem = dataStore.getContactById(Number(useRoute().params.id))
|
||||
}
|
||||
|
||||
if(mode.value === "edit") itemInfo.value = currentItem
|
||||
|
||||
if(mode.value === "create") {
|
||||
let query = route.query
|
||||
|
||||
if(query.customer) itemInfo.value.customer = Number(query.customer)
|
||||
if(query.vendor) itemInfo.value.vendor = Number(query.vendor)
|
||||
}
|
||||
}
|
||||
|
||||
const cancelEditorCreate = () => {
|
||||
if(currentItem.value) {
|
||||
router.push(`/contacts/show/${currentItem.value.id}`)
|
||||
} else {
|
||||
router.push(`/contacts`)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
setupPage()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardNavbar :title="currentItem ? currentItem.fullName : (mode === 'create' ? 'Ansprechpartner erstellen' : 'Ansprechpartner bearbeiten')">
|
||||
<template #right>
|
||||
<UButton
|
||||
v-if="mode === 'edit'"
|
||||
@click="dataStore.updateItem('contacts',{...itemInfo, fullName: itemInfo.firstName + ' ' + itemInfo.lastName})"
|
||||
>
|
||||
Speichern
|
||||
</UButton>
|
||||
<UButton
|
||||
v-else-if="mode === 'create'"
|
||||
@click="dataStore.createNewItem('contacts',{...itemInfo, fullName: itemInfo.firstName + ' ' + itemInfo.lastName})"
|
||||
>
|
||||
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(`/contacts/edit/${currentItem.id}`)"
|
||||
>
|
||||
Bearbeiten
|
||||
</UButton>
|
||||
</template>
|
||||
<template #badge v-if="currentItem">
|
||||
<UBadge
|
||||
v-if="currentItem.active"
|
||||
>
|
||||
Kontakt aktiv
|
||||
</UBadge>
|
||||
<UBadge
|
||||
v-else
|
||||
color="red"
|
||||
>
|
||||
Kontakt inaktiv
|
||||
</UBadge>
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
<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="text-wrap mt-3">
|
||||
<p v-if="currentItem.customer">Kunde: <nuxt-link :to="`/customers/show/${currentItem.customer}`">{{dataStore.customers.find(customer => customer.id === currentItem.customer) ? dataStore.customers.find(customer => customer.id === currentItem.customer).name : "" }}</nuxt-link></p>
|
||||
<p v-if="currentItem.vendor">Lieferant: <nuxt-link :to="`/vendors/show/${currentItem.vendor}`">{{dataStore.vendors.find(vendor => vendor.id === currentItem.vendor) ? dataStore.vendors.find(vendor => vendor.id === currentItem.vendor).name : ""}}</nuxt-link></p>
|
||||
|
||||
|
||||
<p>E-Mail: {{currentItem.email}}</p>
|
||||
<p>Mobil: {{currentItem.phoneMobile}}</p>
|
||||
<p>Festnetz: {{currentItem.phoneHome}}</p>
|
||||
<p>Rolle: {{currentItem.role}}</p>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div v-else-if="item.label === 'Logbuch'">
|
||||
<HistoryDisplay
|
||||
type="contact"
|
||||
v-if="currentItem"
|
||||
:element-id="currentItem.id"
|
||||
/>
|
||||
</div>
|
||||
</UCard>
|
||||
</template>
|
||||
</UTabs>
|
||||
<UForm
|
||||
v-else-if="mode == 'edit' || mode == 'create'"
|
||||
class="p-5"
|
||||
>
|
||||
<UFormGroup
|
||||
label="Anrede:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.salutation"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Vorname:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.firstName"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Nachname:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.lastName"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup
|
||||
label="Kunde:"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="itemInfo.customer"
|
||||
option-attribute="name"
|
||||
value-attribute="id"
|
||||
:options="dataStore.customers"
|
||||
searchable
|
||||
:search-attributes="['name']"
|
||||
>
|
||||
<template #label>
|
||||
{{dataStore.customers.find(customer => customer.id === itemInfo.customer) ? dataStore.customers.find(customer => customer.id === itemInfo.customer).name : "Kunde auswählen"}}
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Lieferant:"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="itemInfo.vendor"
|
||||
option-attribute="name"
|
||||
value-attribute="id"
|
||||
:options="dataStore.vendors"
|
||||
searchable
|
||||
:search-attributes="['name']"
|
||||
>
|
||||
<template #label>
|
||||
{{dataStore.vendors.find(vendor => vendor.id === itemInfo.vendor) ? dataStore.vendors.find(vendor => vendor.id === itemInfo.vendor).name : "Lieferant auswählen"}}
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup
|
||||
label="Kontakt aktiv:"
|
||||
>
|
||||
<UCheckbox
|
||||
v-model="itemInfo.active"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup
|
||||
label="E-Mail:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.email"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Mobil:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.phoneMobile"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Festnetz:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.phoneHome"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Rolle:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.role"
|
||||
/>
|
||||
</UFormGroup>
|
||||
</UForm>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
149
pages/contacts/index.vue
Normal file
149
pages/contacts/index.vue
Normal file
@@ -0,0 +1,149 @@
|
||||
<template>
|
||||
<UDashboardNavbar title="Ansprechpartner" :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(`/contacts/create`)">+ Kontakt</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>
|
||||
|
||||
<UTable
|
||||
:rows="filteredRows"
|
||||
:columns="columns"
|
||||
class="w-full"
|
||||
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
|
||||
@select="(i) => router.push(`/contacts/show/${i.id}`)"
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Ansprechpartner anzuzeigen' }"
|
||||
>
|
||||
<template #active-data="{row}">
|
||||
<span v-if="row.active" class="text-primary-500">Aktiv</span>
|
||||
<span v-else class="text-rose">Gesperrt</span>
|
||||
</template>
|
||||
<template #customer-data="{row}">
|
||||
{{dataStore.customers.find(customer => customer.id === row.customer) ? dataStore.customers.find(customer => customer.id === row.customer).name : ''}}
|
||||
</template>
|
||||
<template #vendor-data="{row}">
|
||||
{{dataStore.vendors.find(vendor => vendor.id === row.vendor) ? dataStore.vendors.find(vendor => vendor.id === row.vendor).name : ''}}
|
||||
</template>
|
||||
</UTable>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
import {useSearch} from "~/composables/useSearch.js";
|
||||
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
defineShortcuts({
|
||||
'/': () => {
|
||||
//console.log(searchinput)
|
||||
//searchinput.value.focus()
|
||||
document.getElementById("searchinput").focus()
|
||||
},
|
||||
'+': () => {
|
||||
router.push("/contacts/create")
|
||||
}
|
||||
})
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const router = useRouter()
|
||||
|
||||
const templateColumns = [
|
||||
|
||||
{
|
||||
key: "fullName",
|
||||
label: "Name",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "customer",
|
||||
label: "Kunde",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "vendor",
|
||||
label: "Lieferant",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "role",
|
||||
label: "Rolle",
|
||||
},
|
||||
{
|
||||
key: "email",
|
||||
label: "E-Mail",
|
||||
},
|
||||
{
|
||||
key: "phoneMobile",
|
||||
label: "Mobil",
|
||||
},
|
||||
{
|
||||
key: "phoneHome",
|
||||
label: "Festnetz",
|
||||
},
|
||||
{
|
||||
key: "active",
|
||||
label: "Aktiv",
|
||||
},
|
||||
{
|
||||
key: "birtday",
|
||||
label: "Geburtstag",
|
||||
}
|
||||
]
|
||||
const selectedColumns = ref(templateColumns)
|
||||
const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
|
||||
|
||||
const searchString = ref('')
|
||||
|
||||
/*const filteredRows = computed(() => {
|
||||
if(!searchString.value) {
|
||||
return dataStore.contacts
|
||||
}
|
||||
|
||||
return dataStore.contacts.filter(item => {
|
||||
return Object.values(item).some((value) => {
|
||||
return String(value).toLowerCase().includes(searchString.value.toLowerCase())
|
||||
})
|
||||
})
|
||||
})*/
|
||||
|
||||
const filteredRows = computed(() => {
|
||||
return useSearch(searchString.value, dataStore.contacts)
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
188
pages/contracts/[mode]/[[id]].vue
Normal file
188
pages/contracts/[mode]/[[id]].vue
Normal file
@@ -0,0 +1,188 @@
|
||||
<script setup>
|
||||
import HistoryDisplay from "~/components/HistoryDisplay.vue";
|
||||
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const toast = useToast()
|
||||
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({
|
||||
name: "",
|
||||
customer: null,
|
||||
active: true
|
||||
})
|
||||
|
||||
//Functions
|
||||
const setupPage = () => {
|
||||
if(mode.value === "show" || mode.value === "edit"){
|
||||
currentItem.value = dataStore.getContractById(Number(useRoute().params.id))
|
||||
}
|
||||
|
||||
if(mode.value === "edit") itemInfo.value = currentItem.value
|
||||
|
||||
if(mode.value === "create") {
|
||||
let query = route.query
|
||||
|
||||
if(query.customer) itemInfo.value.customer = Number(query.customer)
|
||||
}
|
||||
}
|
||||
|
||||
const cancelEditorCreate = () => {
|
||||
if(currentItem.value) {
|
||||
router.push(`/contracts/show/${currentItem.value.id}`)
|
||||
} else {
|
||||
router.push(`/contracts/`)
|
||||
}
|
||||
}
|
||||
|
||||
setupPage()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardNavbar :title="currentItem ? currentItem.name : (mode === 'create' ? 'Vertrag erstellen' : 'Vertrag bearbeiten')">
|
||||
<template #right>
|
||||
<UButton
|
||||
v-if="mode === 'edit'"
|
||||
@click="dataStore.updateItem('contracts',itemInfo)"
|
||||
>
|
||||
Speichern
|
||||
</UButton>
|
||||
<UButton
|
||||
v-else-if="mode === 'create'"
|
||||
@click="dataStore.createNewItem('contracts',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(`/contracts/edit/${currentItem.id}`)"
|
||||
>
|
||||
Bearbeiten
|
||||
</UButton>
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
<UTabs
|
||||
v-if="currentItem && mode === 'show'"
|
||||
:items="[{label: 'Informationen'}, {label: 'Logbuch'}, {label: 'Dokumente'}]"
|
||||
class="p-5"
|
||||
>
|
||||
<template #item="{item}">
|
||||
<UCard class="mt-5">
|
||||
<div v-if="item.label === 'Informationen'">
|
||||
<Toolbar>
|
||||
<UButton
|
||||
v-if="mode === 'show' && currentItem.id"
|
||||
@click="editCustomer"
|
||||
>
|
||||
Bearbeiten
|
||||
</UButton>
|
||||
</Toolbar>
|
||||
|
||||
<UBadge
|
||||
v-if="currentItem.active"
|
||||
>
|
||||
Vertrag aktiv
|
||||
</UBadge>
|
||||
<UBadge
|
||||
v-else
|
||||
color="red"
|
||||
>
|
||||
Vertrag gesperrt
|
||||
</UBadge>
|
||||
|
||||
<div class="text-wrap">
|
||||
<p>Kundennummer: <nuxt-link :to="`/customers/show/${currentItem.customer}`">{{dataStore.getCustomerById(currentItem.customer).name}}</nuxt-link></p>
|
||||
</div>
|
||||
|
||||
<UDivider
|
||||
class="my-2"
|
||||
/>
|
||||
|
||||
Beschreibung:<br>
|
||||
{{currentItem.description}}<br>
|
||||
</div>
|
||||
<div v-else-if="item.label === 'Logbuch'">
|
||||
<HistoryDisplay
|
||||
type="contract"
|
||||
v-if="currentItem"
|
||||
:element-id="currentItem.id"
|
||||
/>
|
||||
</div>
|
||||
<div v-else-if="item.label === 'Dokumente'">
|
||||
<Toolbar>
|
||||
<DocumentUpload
|
||||
type="contract"
|
||||
:element-id="currentItem.id"
|
||||
/>
|
||||
</Toolbar>
|
||||
<DocumentList
|
||||
:documents="dataStore.getDocumentsByContractId(currentItem.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="Kunde:"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="itemInfo.customer"
|
||||
option-attribute="name"
|
||||
value-attribute="id"
|
||||
:options="dataStore.customers"
|
||||
searchable
|
||||
:search-attributes="['name']"
|
||||
>
|
||||
<template #label>
|
||||
{{dataStore.getCustomerById(itemInfo.customer) ? dataStore.getCustomerById(itemInfo.customer).name : "Kein Kunde ausgewählt" }}
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup
|
||||
label="Vertrag aktiv:"
|
||||
>
|
||||
<UCheckbox
|
||||
v-model="itemInfo.active"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Beschreibung:"
|
||||
>
|
||||
<UTextarea
|
||||
v-model="itemInfo.description"
|
||||
/>
|
||||
</UFormGroup>
|
||||
</UForm>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
108
pages/contracts/index.vue
Normal file
108
pages/contracts/index.vue
Normal file
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<UDashboardNavbar title="Verträge" :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(`/contracts/create`)">+ Vertrag</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>
|
||||
|
||||
<UTable
|
||||
:rows="filteredRows"
|
||||
:columns="columns"
|
||||
class="w-full"
|
||||
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
|
||||
@select="(i) => router.push(`/contracts/show/${i.id}`) "
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Verträge anzuzeigen' }"
|
||||
>
|
||||
<template #customer-data="{row}">
|
||||
{{dataStore.customers.find(customer => customer.id === row.customer) ? dataStore.customers.find(customer => customer.id === row.customer).name : row.customer }}
|
||||
</template>
|
||||
</UTable>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
defineShortcuts({
|
||||
'/': () => {
|
||||
//console.log(searchinput)
|
||||
//searchinput.value.focus()
|
||||
document.getElementById("searchinput").focus()
|
||||
},
|
||||
'+': () => {
|
||||
router.push("/contracts/create")
|
||||
}
|
||||
})
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const router = useRouter()
|
||||
|
||||
const templateColumns = [
|
||||
{
|
||||
key: 'customer',
|
||||
label: "Kundennr.:",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "name",
|
||||
label: "Name",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "description",
|
||||
label: "Beschreibung"
|
||||
}
|
||||
]
|
||||
const selectedColumns = ref(templateColumns)
|
||||
const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
|
||||
|
||||
|
||||
const searchString = ref('')
|
||||
const filteredRows = computed(() => {
|
||||
if(!searchString.value) {
|
||||
return dataStore.contracts
|
||||
}
|
||||
|
||||
return dataStore.contracts.filter(item => {
|
||||
return Object.values(item).some((value) => {
|
||||
return String(value).toLowerCase().includes(searchString.value.toLowerCase())
|
||||
})
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
1097
pages/createDocument/edit/[[id]].vue
Normal file
1097
pages/createDocument/edit/[[id]].vue
Normal file
File diff suppressed because it is too large
Load Diff
57
pages/createDocument/show/[id].vue
Normal file
57
pages/createDocument/show/[id].vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
const dataStore = useDataStore()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
const itemInfo = ref({})
|
||||
|
||||
const setupPage = () => {
|
||||
if(route.params) {
|
||||
if(route.params.id) itemInfo.value = dataStore.getCreatedDocumentById(Number(route.params.id))
|
||||
}
|
||||
}
|
||||
|
||||
setupPage()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardNavbar
|
||||
title="Erstelltes Dokument anzeigen"
|
||||
>
|
||||
|
||||
</UDashboardNavbar>
|
||||
<UDashboardToolbar>
|
||||
<template #left>
|
||||
<UButton
|
||||
@click="router.push(`/createDocument/edit/${itemInfo.id}`)"
|
||||
>
|
||||
Bearbeiten
|
||||
</UButton>
|
||||
<UButton
|
||||
:to="dataStore.documents.find(i => i.createdDocument === itemInfo.id) ? dataStore.documents.find(i => i.createdDocument === itemInfo.id).url : ''"
|
||||
target="_blank"
|
||||
>In neuen Tab anzeigen</UButton>
|
||||
</template>
|
||||
</UDashboardToolbar>
|
||||
|
||||
<object
|
||||
:data="dataStore.documents.find(i => i.createdDocument === itemInfo.id) ? dataStore.documents.find(i => i.createdDocument === itemInfo.id).url : ''"
|
||||
class="h-full"
|
||||
/>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- <DocumentDisplay
|
||||
:document-data="dataStore.documents.find(i => i.createdDocument === itemInfo.id)"
|
||||
/>-->
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
337
pages/customers/[mode]/[[id]].vue
Normal file
337
pages/customers/[mode]/[[id]].vue
Normal file
@@ -0,0 +1,337 @@
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const toast = useToast()
|
||||
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({
|
||||
name: "",
|
||||
infoData: {
|
||||
country: "Deutschland"
|
||||
},
|
||||
active: true,
|
||||
isCompany: true
|
||||
})
|
||||
|
||||
//Functions
|
||||
const setupPage = async () => {
|
||||
if(mode.value === "show" || mode.value === "edit"){
|
||||
currentItem.value = await dataStore.getCustomerById(Number(useRoute().params.id))
|
||||
}
|
||||
|
||||
if(mode.value === "edit") itemInfo.value = currentItem.value
|
||||
}
|
||||
|
||||
const editItem = async () => {
|
||||
await router.push(`/customers/edit/${currentItem.value.id}`)
|
||||
}
|
||||
|
||||
const cancelEditorCreate = () => {
|
||||
if(currentItem.value) {
|
||||
router.push(`/customers/show/${currentItem.value.id}`)
|
||||
} else {
|
||||
router.push(`/customers`)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
setupPage()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardNavbar :title="currentItem ? `Kunde: ${currentItem.name}` : (mode === 'create' ? 'Kunde erstellen' : 'Kunde bearbeiten')">
|
||||
<template #right>
|
||||
<UButton
|
||||
v-if="mode === 'edit'"
|
||||
@click="dataStore.updateItem('customers',itemInfo)"
|
||||
>
|
||||
Speichern
|
||||
</UButton>
|
||||
<UButton
|
||||
v-else-if="mode === 'create'"
|
||||
@click="dataStore.createNewItem('customers',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>
|
||||
<template #badge v-if="currentItem">
|
||||
<UBadge
|
||||
v-if="currentItem.active"
|
||||
>
|
||||
Aktiv
|
||||
</UBadge>
|
||||
<UBadge
|
||||
v-else
|
||||
color="red"
|
||||
>
|
||||
Gesperrt
|
||||
</UBadge>
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
|
||||
<UTabs
|
||||
v-if="currentItem && mode == 'show'"
|
||||
:items="[{label: 'Informationen'}, /*{label: 'Logbuch'},*/ {label: 'Projekte'},{label: 'Objekte'},{label: 'Verträge'}, {label: 'Ansprechpartner'}]"
|
||||
class="p-5"
|
||||
>
|
||||
<template #item="{item}">
|
||||
<div v-if="item.label === 'Informationen'" class="flex mt-5">
|
||||
<div class="w-1/2 mr-5">
|
||||
<UCard >
|
||||
<div class="text-wrap">
|
||||
<p>Kundennummer: {{currentItem.customerNumber}}</p>
|
||||
<p>Typ: {{currentItem.isCompany ? 'Firma' : 'Privatperson'}}</p>
|
||||
<p v-if="currentItem.infoData.street">Straße + Hausnummer: {{currentItem.infoData.street}}</p>
|
||||
<p v-if="currentItem.infoData.zip && currentItem.infoData.city">PLZ + Ort: {{currentItem.infoData.zip}} {{currentItem.infoData.city}}</p>
|
||||
<p v-if="currentItem.infoData.tel">Telefon: {{currentItem.infoData.tel}}</p>
|
||||
<p v-if="currentItem.infoData.email">E-Mail: {{currentItem.infoData.email}}</p>
|
||||
<p v-if="currentItem.infoData.web">Web: {{currentItem.infoData.web}}</p>
|
||||
<p v-if="currentItem.infoData.ustid">USt-Id: {{currentItem.infoData.ustid}}</p>
|
||||
<p>Notizen:<br> {{currentItem.notes}}</p>
|
||||
</div>
|
||||
|
||||
</UCard>
|
||||
<UCard class="mt-5">
|
||||
<Toolbar>
|
||||
<UButton
|
||||
@click="router.push(`/contacts/create?customer=${currentItem.id}`)"
|
||||
>
|
||||
+ Ansprechpartner
|
||||
</UButton>
|
||||
</Toolbar>
|
||||
<UTable
|
||||
:rows="dataStore.getContactsByCustomerId(currentItem.id)"
|
||||
@select="(row) => router.push(`/contacts/show/${row.id}`)"
|
||||
:columns="[{label: 'Anrede', key: 'salutation'},{label: 'Name', key: 'fullName'},{label: 'Rolle', key: 'role'}]"
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Ansprechpartner' }"
|
||||
|
||||
>
|
||||
|
||||
</UTable>
|
||||
</UCard>
|
||||
</div>
|
||||
<div class="w-1/2">
|
||||
<UCard class="h-full">
|
||||
<HistoryDisplay
|
||||
type="customer"
|
||||
v-if="currentItem"
|
||||
:element-id="currentItem.id"
|
||||
:render-headline="true"
|
||||
/>
|
||||
</UCard>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<UCard class="mt-5" v-else>
|
||||
<div v-if="item.label === 'Informationen'" class="flex">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div v-else-if="item.label === 'Projekte'">
|
||||
<Toolbar>
|
||||
<UButton
|
||||
@click="router.push(`/projects/create?customer=${currentItem.id}`)"
|
||||
>
|
||||
+ Projekt
|
||||
</UButton>
|
||||
</Toolbar>
|
||||
<UTable
|
||||
:rows="dataStore.getProjectsByCustomerId(currentItem.id)"
|
||||
@select="(row) => router.push(`/projects/show/${row.id}`)"
|
||||
:columns="[{label: 'Name', key: 'name'},{label: 'Phase', key: 'phase'}]"
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Projekte' }"
|
||||
|
||||
>
|
||||
<template #phase-data="{row}">
|
||||
{{row.phases ? row.phases.find(i => i.active).label : ""}}
|
||||
</template>
|
||||
</UTable>
|
||||
</div>
|
||||
<div v-else-if="item.label === 'Objekte'">
|
||||
<Toolbar>
|
||||
<UButton
|
||||
@click="router.push(`/plants/create?customer=${currentItem.id}`)"
|
||||
>
|
||||
+ Objekt
|
||||
</UButton>
|
||||
</Toolbar>
|
||||
<UTable
|
||||
:rows="dataStore.getPlantsByCustomerId(currentItem.id)"
|
||||
@select="(row) => router.push(`/plants/show/${row.id}`)"
|
||||
:columns="[{label: 'Name', key: 'name'}]"
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Objekte' }"
|
||||
|
||||
>
|
||||
|
||||
</UTable>
|
||||
</div>
|
||||
<div v-else-if="item.label === 'Verträge'">
|
||||
<Toolbar>
|
||||
<UButton
|
||||
@click="router.push(`/contracts/create?customer=${currentItem.id}`)"
|
||||
>
|
||||
+ Objekt
|
||||
</UButton>
|
||||
</Toolbar>
|
||||
<UTable
|
||||
:rows="dataStore.getContractsByCustomerId(currentItem.id)"
|
||||
@select="(row) => router.push(`/contracts/show/${row.id}`)"
|
||||
:columns="[{label: 'Name', key: 'name'},{label: 'Aktiv', key: 'active'}]"
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Verträge' }"
|
||||
|
||||
>
|
||||
|
||||
</UTable>
|
||||
</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="Kundennummer:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.customerNumber"
|
||||
placeholder="Leer lassen für automatisch generierte Nummer"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<UTooltip text="Ist ein Kunde nicht aktiv so wird er für neue Aufträge gesperrt">
|
||||
<UFormGroup
|
||||
label="Kunde aktiv:"
|
||||
>
|
||||
<UCheckbox
|
||||
v-model="itemInfo.active"
|
||||
/>
|
||||
</UFormGroup>
|
||||
</UTooltip>
|
||||
<UFormGroup
|
||||
label="Firmenkunde:"
|
||||
>
|
||||
<UCheckbox
|
||||
v-model="itemInfo.isCompany"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Notizen:"
|
||||
>
|
||||
<UTextarea
|
||||
v-model="itemInfo.notes"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup
|
||||
label="Straße + Hausnummer"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.infoData.street"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Adresszusatz"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.infoData.special"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Postleitzahl"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.infoData.zip"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Ort"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.infoData.city"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Land"
|
||||
>
|
||||
<USelectMenu
|
||||
:options="['Deutschland','Niederlande','Belgien','Italien', 'Frankreich','Irland','USA','Spanien', 'Schweden']"
|
||||
v-model="itemInfo.infoData.country"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup
|
||||
label="Telefon:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.infoData.tel"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="E-Mail:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.infoData.email"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Webseite:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.infoData.web"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="USt-Id:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.infoData.ustid"
|
||||
/>
|
||||
</UFormGroup>
|
||||
</UForm>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
134
pages/customers/index.vue
Normal file
134
pages/customers/index.vue
Normal file
@@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<UDashboardNavbar title="Kunden" :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(`/customers/create/`)">+ Kunde</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>
|
||||
|
||||
<UTable
|
||||
:rows="filteredRows"
|
||||
:columns="columns"
|
||||
class="w-full"
|
||||
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
|
||||
@select="(i) => router.push(`/customers/show/${i.id}`) "
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Kunden anzuzeigen' }"
|
||||
>
|
||||
<template #isCompany-data="{row}">
|
||||
<span v-if="row.isCompany">Firmenkunden</span>
|
||||
<span v-else>Privatkunde</span>
|
||||
</template>
|
||||
<template #active-data="{row}">
|
||||
<span v-if="row.active" class="text-primary-500">Aktiv</span>
|
||||
<span v-else class="text-rose-500">Gesperrt</span>
|
||||
</template>
|
||||
<template #address-data="{row}">
|
||||
{{row.infoData.street ? `${row.infoData.street}, ` : ''}}{{row.infoData.special ? `${row.infoData.special},` : ''}} {{row.infoData.zip ? row.infoData.zip : ""}}{{row.infoData.city ? `${row.infoData.city}, ` : ''}} {{row.infoData.country}}
|
||||
</template>
|
||||
</UTable>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
defineShortcuts({
|
||||
'/': () => {
|
||||
//console.log(searchinput)
|
||||
//searchinput.value.focus()
|
||||
document.getElementById("searchinput").focus()
|
||||
},
|
||||
'+': () => {
|
||||
router.push("/customers/create")
|
||||
}
|
||||
})
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const router = useRouter()
|
||||
|
||||
const templateColumns = [
|
||||
{
|
||||
key: 'customerNumber',
|
||||
label: "Kundennr.",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "name",
|
||||
label: "Name",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "isCompany",
|
||||
label: "Typ",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "notes",
|
||||
label: "Notizen",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "active",
|
||||
label: "Aktiv",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "address",
|
||||
label: "Adresse",
|
||||
sortable: true
|
||||
}
|
||||
]
|
||||
const selectedColumns = ref(templateColumns)
|
||||
const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
|
||||
|
||||
|
||||
const searchString = ref('')
|
||||
|
||||
const filteredRows = computed(() => {
|
||||
if(!searchString.value) {
|
||||
return dataStore.customers
|
||||
}
|
||||
|
||||
return dataStore.customers.filter(item => {
|
||||
return Object.values(item).some((value) => {
|
||||
return String(value).toLowerCase().includes(searchString.value.toLowerCase())
|
||||
})
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
200
pages/documents.vue
Normal file
200
pages/documents.vue
Normal file
@@ -0,0 +1,200 @@
|
||||
<script setup>
|
||||
|
||||
import {BlobReader, BlobWriter, ZipWriter} from "@zip.js/zip.js";
|
||||
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
const dataStore = useDataStore()
|
||||
const supabase = useSupabaseClient()
|
||||
const user = useSupabaseUser()
|
||||
const toast = useToast()
|
||||
|
||||
dataStore.fetchDocuments()
|
||||
|
||||
const uploadModalOpen = ref(false)
|
||||
const uploadInProgress = ref(false)
|
||||
const fileUploadFormData = ref({
|
||||
tags: ["Eingang"],
|
||||
path: "",
|
||||
tenant: dataStore.currentTenant
|
||||
})
|
||||
|
||||
|
||||
let tags = dataStore.getDocumentTags
|
||||
|
||||
const selectedTags = ref("Eingang")
|
||||
|
||||
|
||||
const filteredDocuments = computed(() => {
|
||||
let returnList = []
|
||||
|
||||
returnList = dataStore.documents.filter(i => i.tags.filter(t => selectedTags.value === t).length > 0)
|
||||
|
||||
//return dataStore.documents.filter(doc => doc.tags.filter(tag => selectedTags.value.find(t => t === tag)).length > 0)
|
||||
return returnList
|
||||
|
||||
})
|
||||
|
||||
const uploadFiles = async () => {
|
||||
uploadInProgress.value = true;
|
||||
|
||||
await dataStore.uploadFiles(fileUploadFormData.value, document.getElementById("fileUploadInput").files, true)
|
||||
|
||||
uploadModalOpen.value = false;
|
||||
uploadInProgress.value = false;
|
||||
}
|
||||
|
||||
const downloadSelected = async () => {
|
||||
const bucket = "files";
|
||||
|
||||
let files = []
|
||||
dataStore.documents.filter(doc => doc.selected).forEach(doc => files.push(doc.path))
|
||||
|
||||
console.log(files)
|
||||
|
||||
// If there are no files in the folder, throw an error
|
||||
if (!files || !files.length) {
|
||||
throw new Error("No files to download");
|
||||
}
|
||||
|
||||
const promises = [];
|
||||
|
||||
// Download each file in the folder
|
||||
files.forEach((file) => {
|
||||
promises.push(
|
||||
supabase.storage.from(bucket).download(`${file}`)
|
||||
);
|
||||
});
|
||||
|
||||
// Wait for all the files to download
|
||||
const response = await Promise.allSettled(promises);
|
||||
|
||||
// Map the response to an array of objects containing the file name and blob
|
||||
const downloadedFiles = response.map((result, index) => {
|
||||
if (result.status === "fulfilled") {
|
||||
|
||||
console.log(files[index].split("/")[files[index].split("/").length -1])
|
||||
|
||||
return {
|
||||
name: files[index].split("/")[files[index].split("/").length -1],
|
||||
blob: result.value.data,
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
// Create a new zip file
|
||||
const zipFileWriter = new BlobWriter("application/zip");
|
||||
const zipWriter = new ZipWriter(zipFileWriter, { bufferedWrite: true });
|
||||
|
||||
// Add each file to the zip file
|
||||
downloadedFiles.forEach((downloadedFile) => {
|
||||
if (downloadedFile) {
|
||||
zipWriter.add(downloadedFile.name, new BlobReader(downloadedFile.blob));
|
||||
}
|
||||
});
|
||||
|
||||
// Download the zip file
|
||||
const url = URL.createObjectURL(await zipWriter.close());
|
||||
const link = document.createElement("a");
|
||||
|
||||
link.href = url;
|
||||
link.setAttribute("download", "documents.zip");
|
||||
|
||||
document.body.appendChild(link);
|
||||
|
||||
link.click();
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardNavbar
|
||||
title="Dokumente"
|
||||
>
|
||||
|
||||
</UDashboardNavbar>
|
||||
<UDashboardToolbar>
|
||||
<template #left>
|
||||
<UButton @click="uploadModalOpen = true">Hochladen</UButton>
|
||||
<UButton
|
||||
@click="downloadSelected"
|
||||
:disabled="dataStore.documents.filter(doc => doc.selected).length === 0"
|
||||
>Herunterladen</UButton>
|
||||
</template>
|
||||
<template #right>
|
||||
<USelectMenu
|
||||
:options="tags"
|
||||
v-model="selectedTags"
|
||||
class="w-40"
|
||||
>
|
||||
<template #label>
|
||||
{{selectedTags}}
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</template>
|
||||
|
||||
</UDashboardToolbar>
|
||||
|
||||
<div class="scrollList">
|
||||
|
||||
<DocumentList
|
||||
:documents="filteredDocuments"
|
||||
/>
|
||||
</div>
|
||||
<USlideover
|
||||
v-model="uploadModalOpen"
|
||||
>
|
||||
|
||||
<UCard class="flex flex-col flex-1" :ui="{ body: { base: 'flex-1' }, ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
|
||||
<template #header>
|
||||
Datei Hochladen
|
||||
</template>
|
||||
|
||||
<div class="h-full">
|
||||
<UFormGroup
|
||||
label="Datei:"
|
||||
>
|
||||
<UInput
|
||||
type="file"
|
||||
id="fileUploadInput"
|
||||
multiple
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup
|
||||
label="Tags:"
|
||||
class="mt-3"
|
||||
>
|
||||
<USelectMenu
|
||||
multiple
|
||||
searchable
|
||||
searchable-placeholder="Suchen..."
|
||||
:options="tags"
|
||||
v-model="fileUploadFormData.tags"
|
||||
/>
|
||||
</UFormGroup>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<UButton
|
||||
v-if="!uploadInProgress"
|
||||
class="mt-3"
|
||||
@click="uploadFiles"
|
||||
>Hochladen</UButton>
|
||||
<UProgress
|
||||
v-else
|
||||
animation="carousel"
|
||||
/>
|
||||
</template>
|
||||
</UCard>
|
||||
</USlideover>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
<style scoped>
|
||||
|
||||
|
||||
</style>
|
||||
11
pages/editortest.vue
Normal file
11
pages/editortest.vue
Normal file
@@ -0,0 +1,11 @@
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<tiptap/>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
316
pages/email.vue
Normal file
316
pages/email.vue
Normal file
@@ -0,0 +1,316 @@
|
||||
<script setup>
|
||||
import axios from 'axios'
|
||||
const dataStore = useDataStore()
|
||||
const accounts = ref([])
|
||||
|
||||
//accounts.value = dataStore.emailAccounts.map(i => { return { label: i.emailAddress, emailEngingeId: i.emailEngineId }})
|
||||
|
||||
const mailboxes = ref({})
|
||||
const messages = ref([])
|
||||
const selectedMailbox = ref("INBOX")
|
||||
const selectedAccount = ref(null)
|
||||
const selectedMessage = ref(null)
|
||||
const setup = async () => {
|
||||
accounts.value = dataStore.emailAccounts.map((i,index) => {
|
||||
let item = { label: i.emailAddress, emailEngineId: i.emailEngineId }
|
||||
if(index === 0) {
|
||||
item.defaultOpen = true
|
||||
}
|
||||
return item
|
||||
|
||||
})
|
||||
|
||||
for await (const account of accounts.value) {
|
||||
console.log(account.emailEngineId)
|
||||
const {data,error} = await axios.get(`http://157.90.231.142:3000/v1/account/${account.emailEngineId}/mailboxes`, {headers: { 'Authorization': 'Bearer dadb572465fba648590f31557f68028a750b47b278d87c1773e8fd09670eec59'}})
|
||||
console.log(data)
|
||||
console.log(error)
|
||||
mailboxes.value[account.emailEngineId] = data.mailboxes
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
const selectMailbox = async (account, mailbox) => {
|
||||
selectedMailbox.value = mailbox
|
||||
const {data,error} = await axios.get(`http://157.90.231.142:3000/v1/account/${account}/messages?path=${ mailbox.path}`, {headers: { 'Authorization': 'Bearer dadb572465fba648590f31557f68028a750b47b278d87c1773e8fd09670eec59'}})
|
||||
console.log(data)
|
||||
console.log(error)
|
||||
messages.value = data.messages
|
||||
selectedAccount.value = account
|
||||
}
|
||||
const messageHTML = ref(null)
|
||||
const messageText = ref(null)
|
||||
const selectMessage = async (account, message) => {
|
||||
console.log(message)
|
||||
selectedMessage.value = message
|
||||
const {data,error} = await axios.get(`http://157.90.231.142:3000/v1/account/${account}/text/${message.text.id}`, {headers: { 'Authorization': 'Bearer dadb572465fba648590f31557f68028a750b47b278d87c1773e8fd09670eec59'}})
|
||||
messageHTML.value = data.html
|
||||
messageText.value = data.plain
|
||||
}
|
||||
|
||||
const addFlags = async (account, message, flags) => {
|
||||
console.log(flags)
|
||||
const {data,error} = await axios({
|
||||
method: "PUT",
|
||||
url: `http://157.90.231.142:3000/v1/account/${account}/message/${message.id}`,
|
||||
headers: { 'Authorization': 'Bearer dadb572465fba648590f31557f68028a750b47b278d87c1773e8fd09670eec59'},
|
||||
data: {
|
||||
flags: {
|
||||
add: flags
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
console.log(data)
|
||||
console.log(error)
|
||||
}
|
||||
|
||||
const removeFlags = async (account, message, flags) => {
|
||||
console.log(flags)
|
||||
const {data,error} = await axios({
|
||||
method: "PUT",
|
||||
url: `http://157.90.231.142:3000/v1/account/${account}/message/${message.id}`,
|
||||
headers: { 'Authorization': 'Bearer dadb572465fba648590f31557f68028a750b47b278d87c1773e8fd09670eec59'},
|
||||
data: {
|
||||
flags: {
|
||||
delete: flags
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
console.log(data)
|
||||
console.log(error)
|
||||
}
|
||||
|
||||
const setSeen = async (seen,message) => {
|
||||
if(seen) {
|
||||
await addFlags(selectedAccount.value,message, ["\\Seen"])
|
||||
await selectMailbox(selectedAccount.value, selectedMailbox.value)
|
||||
} else {
|
||||
await removeFlags(selectedAccount.value,message, ["\\Seen"])
|
||||
await selectMailbox(selectedAccount.value, selectedMailbox.value)
|
||||
}
|
||||
}
|
||||
|
||||
const moveTo = async (destinationPath) => {
|
||||
const {data,error} = await axios({
|
||||
method: "PUT",
|
||||
url: `http://157.90.231.142:3000/v1/account/${selectedAccount.value}/message/${selectedMessage.value.id}/move`,
|
||||
headers: { 'Authorization': 'Bearer dadb572465fba648590f31557f68028a750b47b278d87c1773e8fd09670eec59'},
|
||||
data: {
|
||||
path: destinationPath
|
||||
}
|
||||
})
|
||||
|
||||
console.log(data)
|
||||
console.log(error)
|
||||
selectedMessage.value = null
|
||||
messageHTML.value = null
|
||||
messageText.value = null
|
||||
selectMailbox(selectedAccount.value, selectedMailbox.value)
|
||||
}
|
||||
|
||||
const downloadAttachment = async (attachment) => {
|
||||
const {data,error} = await axios({
|
||||
method: "GET",
|
||||
url: `http://157.90.231.142:3000/v1/account/${selectedAccount.value}/attachment/${attachment.id}`,
|
||||
headers: { 'Authorization': 'Bearer dadb572465fba648590f31557f68028a750b47b278d87c1773e8fd09670eec59'},
|
||||
responseType: "blob"
|
||||
})
|
||||
|
||||
const downloadURL = URL.createObjectURL(new Blob([data]))
|
||||
const link = document.createElement('a')
|
||||
link.href = downloadURL
|
||||
link.setAttribute('download', attachment.filename)
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
link.remove()
|
||||
console.log(data)
|
||||
console.log(error)
|
||||
}
|
||||
|
||||
|
||||
setup()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<div class="flex flex-row">
|
||||
<div id="mailboxlist">
|
||||
<UAccordion
|
||||
:items="accounts"
|
||||
>
|
||||
<template #default="{ item, index, open }">
|
||||
<UButton variant="soft" class="mt-3">
|
||||
|
||||
<span class="truncate">{{ item.label }}</span>
|
||||
|
||||
<template #trailing>
|
||||
<UIcon
|
||||
name="i-heroicons-chevron-right-20-solid"
|
||||
class="w-5 h-5 ms-auto transform transition-transform duration-200"
|
||||
:class="[open && 'rotate-90']"
|
||||
/>
|
||||
</template>
|
||||
</UButton>
|
||||
</template>
|
||||
<template #item="{ item }">
|
||||
<div
|
||||
v-for="mailbox in mailboxes[item.emailEngineId]"
|
||||
class="my-3"
|
||||
>
|
||||
<UButton
|
||||
@click="selectMailbox(item.emailEngineId, mailbox)"
|
||||
variant="outline"
|
||||
>
|
||||
<span v-if="mailbox.name === 'Trash'">Papierkorb</span>
|
||||
<span v-else-if="mailbox.name === 'INBOX'">Eingang</span>
|
||||
<span v-else-if="mailbox.name === 'Sent'">Gesendet</span>
|
||||
<span v-else-if="mailbox.name === 'Drafts'">Entwürfe</span>
|
||||
<span v-else-if="mailbox.name === 'spambucket'">Spam</span>
|
||||
<span v-else>{{mailbox.name}}</span>
|
||||
<UBadge v-if="mailbox.messages > 0">{{mailbox.messages}}</UBadge>
|
||||
</UButton>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
</UAccordion>
|
||||
|
||||
</div>
|
||||
<UDivider orientation="vertical" class="maiLDivider"/>
|
||||
<div id="maillist">
|
||||
<div
|
||||
v-for="message in messages"
|
||||
v-if="messages.length > 0"
|
||||
>
|
||||
<div
|
||||
:class="message === selectedMessage ? ['message','text-primary-500'] : ['message']"
|
||||
@click="selectMessage(selectedAccount, message),
|
||||
!message.flags.includes('\\Seen') ? setSeen(true,message) : null"
|
||||
>
|
||||
<UChip
|
||||
position="top-left"
|
||||
:show="!message.flags.includes('\\Seen')"
|
||||
>
|
||||
<h1>{{message.from.name ||message.from.address}}</h1>
|
||||
</UChip>
|
||||
|
||||
<h3>{{message.subject}}</h3>
|
||||
</div>
|
||||
<UDivider class="my-3"/>
|
||||
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
>
|
||||
Keine E-Mails in diesem Postfach
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<UDivider orientation="vertical" class="maiLDivider"/>
|
||||
|
||||
<div id="mailcontent" v-if="selectedMessage">
|
||||
<Toolbar>
|
||||
<!--<UButton
|
||||
@click="setup"
|
||||
>Setup</UButton>
|
||||
<UButton>+ Neu</UButton>
|
||||
<UButton>Sync</UButton>
|
||||
<UButton>Papierkorb</UButton>
|
||||
<UButton>Weiterleiten</UButton>
|
||||
<UButton>Antworten</UButton>-->
|
||||
<UButton
|
||||
@click="setSeen(false,selectedMessage)"
|
||||
>
|
||||
Als Ungelesen markieren
|
||||
</UButton>
|
||||
<UButton
|
||||
@click="moveTo('INBOX.Trash')"
|
||||
icon="i-heroicons-trash"
|
||||
>
|
||||
|
||||
</UButton>
|
||||
</Toolbar>
|
||||
<UAlert
|
||||
v-if="selectedMessage"
|
||||
:title="attachment.filename"
|
||||
v-for="attachment in selectedMessage.attachments"
|
||||
class="my-3"
|
||||
:actions="[{label: 'Download', click:() => {downloadAttachment(attachment)}}]"
|
||||
>
|
||||
|
||||
</UAlert>
|
||||
<iframe
|
||||
v-if="messageHTML"
|
||||
style="width: 100%; height: 100%"
|
||||
:srcdoc="messageHTML">
|
||||
</iframe>
|
||||
<pre
|
||||
class="text-wrap"
|
||||
v-else-if="messageText">
|
||||
{{messageText}}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.maiLDivider {
|
||||
width: 5vw;
|
||||
}
|
||||
|
||||
#mailboxlist {
|
||||
width: 15vw;
|
||||
height: 95vh;
|
||||
overflow-y: scroll;
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
#mailboxlist::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#maillist {
|
||||
width: 25vw;
|
||||
height: 88vh;
|
||||
overflow-y:scroll;
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
#maillist::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#mailcontent {
|
||||
width: 55vw;
|
||||
height: 88vh;
|
||||
overflow-y:scroll;
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
#mailcontent::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.message {
|
||||
//border: 1px solid #69c350;
|
||||
margin-right: 1em;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
|
||||
.message:hover {
|
||||
background-color: #69c350;
|
||||
}
|
||||
|
||||
.message h1 {
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
467
pages/employees/timetracking.vue
Normal file
467
pages/employees/timetracking.vue
Normal file
@@ -0,0 +1,467 @@
|
||||
<script setup>
|
||||
import dayjs from "dayjs";
|
||||
import VueDatePicker from '@vuepic/vue-datepicker'
|
||||
import '@vuepic/vue-datepicker/dist/main.css'
|
||||
|
||||
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const supabase = useSupabaseClient()
|
||||
const user = useSupabaseUser()
|
||||
const toast = useToast()
|
||||
|
||||
|
||||
const timeTypes = dataStore.getTimeTypes
|
||||
const timeInfo = ref({
|
||||
user: "",
|
||||
start: "",
|
||||
end: null,
|
||||
notes: null,
|
||||
projectId: null,
|
||||
type: null
|
||||
})
|
||||
|
||||
const filterUser = ref(user.value.id || "")
|
||||
|
||||
|
||||
const filteredRows = computed(() => {
|
||||
|
||||
let times = dataStore.times
|
||||
|
||||
if(dataStore.hasRight('viewTimes')) {
|
||||
if(filterUser.value !== "") {
|
||||
times = times.filter(i => i.user === filterUser.value)
|
||||
}
|
||||
} else if(dataStore.hasRight('viewOwnTimes')) {
|
||||
times = times.filter(i => i.user === user.value.id)
|
||||
} else {
|
||||
times = []
|
||||
}
|
||||
|
||||
return times
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
const itemInfo = ref({
|
||||
user: "",
|
||||
start: new Date(),
|
||||
end: "",
|
||||
notes: null,
|
||||
projectId: null,
|
||||
type: null,
|
||||
state: "Entwurf"
|
||||
})
|
||||
|
||||
|
||||
const columns = [
|
||||
{
|
||||
key:"state",
|
||||
label: "Status",
|
||||
sortable:true
|
||||
},
|
||||
{
|
||||
key: "user",
|
||||
label: "Benutzer",
|
||||
sortable:true
|
||||
},
|
||||
{
|
||||
key:"start",
|
||||
label:"Start",
|
||||
sortable:true
|
||||
},
|
||||
{
|
||||
key:"type",
|
||||
label:"Typ",
|
||||
sortable:true
|
||||
},
|
||||
{
|
||||
key: "end",
|
||||
label: "Ende",
|
||||
sortable:true
|
||||
},
|
||||
{
|
||||
key: "duration",
|
||||
label: "Dauer",
|
||||
sortable:true
|
||||
},
|
||||
{
|
||||
key: "projectId",
|
||||
label: "Projekt",
|
||||
sortable:true
|
||||
},
|
||||
{
|
||||
key: "notes",
|
||||
label: "Notizen",
|
||||
sortable:true
|
||||
}
|
||||
]
|
||||
|
||||
const runningTimeInfo = ref({})
|
||||
const showConfigTimeModal = ref(false)
|
||||
const configTimeMode = ref("create")
|
||||
|
||||
|
||||
|
||||
const startTime = async () => {
|
||||
console.log("started")
|
||||
timeInfo.value.user = user.value.id
|
||||
timeInfo.value.start = new Date().toISOString()
|
||||
|
||||
const {data,error} = await supabase
|
||||
.from("times")
|
||||
.insert([timeInfo.value])
|
||||
.select()
|
||||
|
||||
if(error) {
|
||||
console.log(error)
|
||||
} else if(data) {
|
||||
//timeInfo.value = data[0]
|
||||
await dataStore.fetchTimes()
|
||||
runningTimeInfo.value = dataStore.times.find(time => time.user === user.value.id && !time.end)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const stopStartedTime = async () => {
|
||||
console.log(runningTimeInfo.value)
|
||||
|
||||
runningTimeInfo.value.end = new Date().toISOString()
|
||||
|
||||
const mapNumRange = (num, inMin, inMax, outMin, outMax) =>
|
||||
((num - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
|
||||
|
||||
runningTimeInfo.value.duration = Math.round(mapNumRange(Math.abs(new Date(runningTimeInfo.value.end) - new Date(runningTimeInfo.value.start))/1000/60,0,60,0,1)*100)/100
|
||||
|
||||
const {data,error} = await supabase
|
||||
.from("times")
|
||||
.update(runningTimeInfo.value)
|
||||
.eq('id',runningTimeInfo.value.id)
|
||||
.select()
|
||||
console.log(data)
|
||||
|
||||
if(error) {
|
||||
console.log(error)
|
||||
} else {
|
||||
toast.add({title: "Zeit erfolgreich gestoppt"})
|
||||
runningTimeInfo.value = {}
|
||||
dataStore.fetchTimes()
|
||||
}
|
||||
}
|
||||
|
||||
if(dataStore.times.find(time => time.user == user.value.id && !time.end)) {
|
||||
runningTimeInfo.value = dataStore.times.find(time => time.user == user.value.id && !time.end)
|
||||
}
|
||||
|
||||
|
||||
const createTime = async () => {
|
||||
const {data,error} = await supabase
|
||||
.from("times")
|
||||
.insert({...itemInfo.value, tenant: dataStore.currentTenant})
|
||||
.select()
|
||||
|
||||
if(error) {
|
||||
console.log(error)
|
||||
} else if(data) {
|
||||
itemInfo.value = {}
|
||||
toast.add({title: "Zeit erfolgreich erstellt"})
|
||||
showConfigTimeModal.value = false
|
||||
await dataStore.fetchTimes()
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
const updateTime = async () => {
|
||||
const {error} = await supabase
|
||||
.from("times")
|
||||
.update(itemInfo.value)
|
||||
.eq('id',itemInfo.value.id)
|
||||
|
||||
if(error) {
|
||||
console.log(error)
|
||||
}
|
||||
|
||||
toast.add({title: "Zeit erfolgreich gespeichert"})
|
||||
showConfigTimeModal.value = false
|
||||
await dataStore.fetchTimes()
|
||||
}
|
||||
|
||||
const format = (date) => {
|
||||
let dateFormat = dayjs(date).format("DD.MM.YY HH:mm")
|
||||
|
||||
return `${dateFormat}`;
|
||||
}
|
||||
|
||||
const getDuration = (time) => {
|
||||
const dez = dayjs(time.end).diff(time.start,'hour',true).toFixed(2)
|
||||
const hours = Math.floor(dez)
|
||||
const minutes = Math.floor((dez - hours) * 60)
|
||||
return {
|
||||
dezimal: dez,
|
||||
hours: hours,
|
||||
minutes: minutes,
|
||||
composed: `${hours}:${minutes}`
|
||||
}
|
||||
}
|
||||
|
||||
const setState = async (newState) => {
|
||||
itemInfo.value.state = newState
|
||||
await updateTime()
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardNavbar title="Zeiterfassung">
|
||||
|
||||
</UDashboardNavbar>
|
||||
<UDashboardToolbar>
|
||||
<template #left>
|
||||
<UButton
|
||||
@click="startTime"
|
||||
:disabled="runningTimeInfo.id "
|
||||
>
|
||||
Start
|
||||
</UButton>
|
||||
<UButton
|
||||
@click="stopStartedTime"
|
||||
:disabled="!runningTimeInfo.id"
|
||||
>
|
||||
Stop
|
||||
</UButton>
|
||||
<UButton
|
||||
@click="configTimeMode = 'create'; itemInfo = {start: new Date(), end: new Date(), user: user.id}; showConfigTimeModal = true"
|
||||
>
|
||||
Erstellen
|
||||
</UButton>
|
||||
<USelectMenu
|
||||
v-if="dataStore.hasRight('viewTimes')"
|
||||
:options="dataStore.profiles"
|
||||
option-attribute="fullName"
|
||||
value-attribute="id"
|
||||
v-model="filterUser"
|
||||
>
|
||||
<template #label>
|
||||
{{dataStore.getProfileById(filterUser) ? dataStore.getProfileById(filterUser).fullName : "Kein Benutzer ausgewählt"}}
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</template>
|
||||
</UDashboardToolbar>
|
||||
<div v-if="runningTimeInfo.id" class="mt-3">
|
||||
|
||||
Start: {{dayjs(runningTimeInfo.start).format("DD.MM.YY HH:mm")}}
|
||||
|
||||
<UFormGroup
|
||||
label="Notizen:"
|
||||
>
|
||||
<UTextarea
|
||||
v-model="runningTimeInfo.notes"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup
|
||||
label="Projekt:"
|
||||
>
|
||||
<USelectMenu
|
||||
:options="dataStore.projects"
|
||||
option-attribute="name"
|
||||
value-attribute="id"
|
||||
v-model="runningTimeInfo.projectId"
|
||||
>
|
||||
<template #label>
|
||||
{{ dataStore.projects.find(project => project.id === runningTimeInfo.projectId) ? dataStore.projects.find(project => project.id === runningTimeInfo.projectId).name : "Projekt auswählen" }}
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
|
||||
|
||||
<UFormGroup
|
||||
label="Kategorie:"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="runningTimeInfo.type"
|
||||
:options="timeTypes"
|
||||
option-attribute="label"
|
||||
value-attribute="label"
|
||||
>
|
||||
<template #label>
|
||||
{{runningTimeInfo.type ? runningTimeInfo.type : "Kategorie auswählen"}}
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
</div>
|
||||
|
||||
<UModal
|
||||
v-model="showConfigTimeModal"
|
||||
>
|
||||
<UCard>
|
||||
<template #header>
|
||||
Zeiteintrag {{configTimeMode === 'create' ? "erstellen" : "bearbeiten"}}
|
||||
</template>
|
||||
<UFormGroup
|
||||
label="Start:"
|
||||
>
|
||||
<VueDatePicker
|
||||
v-model="itemInfo.start"
|
||||
locale="de"
|
||||
cancel-text="Abbrechen"
|
||||
select-text="Auswählen"
|
||||
now-button-label="Jetzt"
|
||||
text-input="MM.dd.yyyy HH:mm"
|
||||
:dark="useColorMode().value !== 'light'"
|
||||
:format="format"
|
||||
:preview-format="format"
|
||||
:disabled="configTimeMode === 'create' ? false : itemInfo.state !== 'Entwurf'"
|
||||
/>
|
||||
</UFormGroup>
|
||||
{{itemInfo.state === 'Entwurf'}}{{itemInfo.state}}
|
||||
<UFormGroup
|
||||
label="Ende:"
|
||||
>
|
||||
<VueDatePicker
|
||||
v-model="itemInfo.end"
|
||||
locale="de"
|
||||
cancel-text="Abbrechen"
|
||||
select-text="Auswählen"
|
||||
now-button-label="Jetzt"
|
||||
text-input="MM.dd.yyyy HH:mm"
|
||||
:dark="useColorMode().value !== 'light'"
|
||||
:format="format"
|
||||
:preview-format="format"
|
||||
:disabled="configTimeMode === 'create' ? false : itemInfo.state !== 'Entwurf'"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Benutzer:"
|
||||
>
|
||||
<USelectMenu
|
||||
:options="dataStore.profiles"
|
||||
v-model="itemInfo.user"
|
||||
option-attribute="fullName"
|
||||
value-attribute="id"
|
||||
:disabled="(configTimeMode === 'create' ? false : itemInfo.state !== 'Entwurf') || (!dataStore.hasRight('createTime') || !dataStore.hasRight('createOwnTime'))"
|
||||
>
|
||||
<template #label>
|
||||
{{dataStore.profiles.find(profile => profile.id === itemInfo.user) ? dataStore.profiles.find(profile => profile.id === itemInfo.user).fullName : "Benutzer auswählen"}}
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Projekt:"
|
||||
>
|
||||
<USelectMenu
|
||||
:options="dataStore.projects"
|
||||
v-model="itemInfo.projectId"
|
||||
option-attribute="name"
|
||||
value-attribute="id"
|
||||
searchable
|
||||
searchable-placeholder="Suche..."
|
||||
:search-attributes="['name']"
|
||||
:disabled="configTimeMode === 'create' ? false : itemInfo.state !== 'Entwurf'"
|
||||
>
|
||||
<template #label>
|
||||
{{dataStore.projects.find(project => project.id === itemInfo.projectId) ? dataStore.projects.find(project => project.id === itemInfo.projectId).name : "Projekt auswählen"}}
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Typ:"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="itemInfo.type"
|
||||
:options="timeTypes"
|
||||
option-attribute="label"
|
||||
value-attribute="label"
|
||||
:disabled="configTimeMode === 'create' ? false : itemInfo.state !== 'Entwurf'"
|
||||
>
|
||||
<template #label>
|
||||
{{itemInfo.type ? itemInfo.type : "Kategorie auswählen"}}
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Notizen:"
|
||||
>
|
||||
<UTextarea
|
||||
v-model="itemInfo.notes"
|
||||
:disabled="configTimeMode === 'create' ? false : itemInfo.state !== 'Entwurf'"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
|
||||
<template #footer v-if="configTimeMode === 'create' || itemInfo.state === 'Entwurf'">
|
||||
<InputGroup>
|
||||
<UButton
|
||||
@click="createTime"
|
||||
v-if="configTimeMode === 'create'"
|
||||
>
|
||||
Erstellen
|
||||
</UButton>
|
||||
<UButton
|
||||
@click="updateTime"
|
||||
v-else-if="configTimeMode === 'edit'"
|
||||
v-if="itemInfo.state === 'Entwurf'"
|
||||
>
|
||||
Speichern
|
||||
</UButton>
|
||||
<UButton
|
||||
@click="setState('Eingereicht')"
|
||||
v-if="itemInfo.state === 'Entwurf'"
|
||||
>
|
||||
Einreichen
|
||||
</UButton>
|
||||
</InputGroup>
|
||||
|
||||
</template>
|
||||
</UCard>
|
||||
</UModal>
|
||||
|
||||
<UTable
|
||||
class="mt-3"
|
||||
:columns="columns"
|
||||
:rows="filteredRows"
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
|
||||
@select="(row) => {configTimeMode = 'edit';
|
||||
itemInfo = row;
|
||||
showConfigTimeModal = true}"
|
||||
>
|
||||
<template #state-data="{row}">
|
||||
<span
|
||||
v-if="row.state === 'Entwurf'"
|
||||
class="text-rose-500"
|
||||
>{{row.state}}</span>
|
||||
<span
|
||||
v-if="row.state === 'Eingereicht'"
|
||||
class="text-cyan-500"
|
||||
>{{row.state}}</span>
|
||||
<span
|
||||
v-if="row.state === 'Bestätigt'"
|
||||
class="text-primary-500"
|
||||
>{{row.state}}</span>
|
||||
</template>
|
||||
<template #user-data="{row}">
|
||||
{{dataStore.profiles.find(profile => profile.id === row.user) ? dataStore.profiles.find(profile => profile.id === row.user).fullName : row.user }}
|
||||
</template>
|
||||
|
||||
<template #start-data="{row}">
|
||||
{{dayjs(row.start).format("DD.MM.YY HH:mm")}}
|
||||
</template>
|
||||
<template #end-data="{row}">
|
||||
{{dayjs(row.end).format("DD.MM.YY HH:mm")}}
|
||||
</template>
|
||||
<template #duration-data="{row}">
|
||||
{{getDuration(row).composed}}
|
||||
</template>
|
||||
<template #projectId-data="{row}">
|
||||
{{dataStore.projects.find(project => project.id === row.projectId) ? dataStore.projects.find(project => project.id === row.projectId).name : ""}}
|
||||
</template>
|
||||
</UTable>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
226
pages/events/[mode]/[[id]].vue
Normal file
226
pages/events/[mode]/[[id]].vue
Normal file
@@ -0,0 +1,226 @@
|
||||
<script setup>
|
||||
import dayjs from "dayjs";
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const dataStore = useDataStore()
|
||||
|
||||
const mode = ref(route.params.mode || "show")
|
||||
|
||||
|
||||
const itemInfo = ref({
|
||||
resources: []
|
||||
})
|
||||
|
||||
const resourceToAdd = ref(dataStore.activeProfile.id)
|
||||
const mapResources = () => {
|
||||
console.log(itemInfo.value.resources)
|
||||
itemInfo.value.resources.map(resource => {
|
||||
console.log(resource)
|
||||
return {
|
||||
id: resource.id,
|
||||
type: resource.type
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const setupPage = () => {
|
||||
|
||||
if(mode.value === "show" || mode.value === "edit"){
|
||||
itemInfo.value = dataStore.getEventById(Number(useRoute().params.id)) || {resources: [], start: new Date(), end: new Date(), type: dataStore.getEventTypes[0].label}
|
||||
}
|
||||
|
||||
if(route.query.start) itemInfo.value.start = new Date(route.query.start.replace(" ", "+"))
|
||||
if(route.query.end) itemInfo.value.end = new Date(route.query.end.replace(" ", "+"))
|
||||
if(route.query.resources) {
|
||||
itemInfo.value.resources = JSON.parse(route.query.resources).map(resource => {
|
||||
return dataStore.getResourcesList.find(i => i.id === resource)
|
||||
})
|
||||
}
|
||||
if(route.query.project) itemInfo.value.project = route.query.project
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
setupPage()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardNavbar :title="mode === 'show' ? 'Termin: ' + itemInfo.title : 'Neuen Termin erstellen'">
|
||||
<template #right>
|
||||
<UButton
|
||||
color="rose"
|
||||
@click="router.push(route.params.id ? `/events/show/${route.params.id}` : `/events`)"
|
||||
v-if="mode === 'edit'"
|
||||
>
|
||||
Abbrechen
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
@click="dataStore.createNewItem('events',itemInfo)"
|
||||
v-if="mode === 'edit' && !route.params.id"
|
||||
>
|
||||
Erstellen
|
||||
</UButton>
|
||||
<UButton
|
||||
@click="dataStore.updateItem('events',itemInfo)"
|
||||
v-else-if="mode === 'edit' && route.params.id"
|
||||
>
|
||||
Speichern
|
||||
</UButton>
|
||||
<UButton
|
||||
v-if="mode === 'show'"
|
||||
@click="router.push(`/events/edit/${itemInfo.id}`)"
|
||||
>
|
||||
Bearbeiten
|
||||
</UButton>
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
<!-- <UDashboardToolbar>
|
||||
|
||||
</UDashboardToolbar>-->
|
||||
<UTabs
|
||||
v-if="mode === 'show'"
|
||||
:items="[{label:'Informationen'},{label:'Logbuch'}]"
|
||||
class="p-5"
|
||||
>
|
||||
<template #item="{item}">
|
||||
<UCard class="mt-5">
|
||||
<div v-if="item.label === 'Informationen'">
|
||||
{{itemInfo}}
|
||||
</div>
|
||||
<div v-if="item.label === 'Logbuch'">
|
||||
|
||||
</div>
|
||||
</UCard>
|
||||
</template>
|
||||
</UTabs>
|
||||
<UForm class="p-5" v-if="mode === 'edit'">
|
||||
<UFormGroup
|
||||
label="Titel:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.title"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Projekt:"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="itemInfo.project"
|
||||
:options="dataStore.projects"
|
||||
option-attribute="name"
|
||||
value-attribute="id"
|
||||
searchable
|
||||
searchable-placeholder="Suche..."
|
||||
:search-attributes="['name']"
|
||||
>
|
||||
<template #label>
|
||||
{{dataStore.getProjectById(itemInfo.project) ? dataStore.getProjectById(itemInfo.project).name : "Kein Projekt ausgewählt"}}
|
||||
</template>
|
||||
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Typ:"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="itemInfo.type"
|
||||
:options="dataStore.getEventTypes"
|
||||
option-attribute="label"
|
||||
value-attribute="label"
|
||||
>
|
||||
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Start:"
|
||||
>
|
||||
<UPopover :popper="{ placement: 'bottom-start' }">
|
||||
<UButton
|
||||
variant="outline"
|
||||
icon="i-heroicons-calendar-days-20-solid"
|
||||
:label="itemInfo.start ? dayjs(itemInfo.start).format('DD.MM.YYYY HH:mm') : 'Datum auswählen'"
|
||||
/>
|
||||
|
||||
<template #panel="{ close }">
|
||||
<LazyDatePicker
|
||||
v-model="itemInfo.start"
|
||||
mode="dateTime"
|
||||
/>
|
||||
</template>
|
||||
</UPopover>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Ende:"
|
||||
>
|
||||
<UPopover :popper="{ placement: 'bottom-start' }">
|
||||
<UButton
|
||||
variant="outline"
|
||||
icon="i-heroicons-calendar-days-20-solid"
|
||||
:label="itemInfo.end ? dayjs(itemInfo.end).format('DD.MM.YYYY HH:mm') : 'Datum auswählen'"
|
||||
/>
|
||||
|
||||
<template #panel="{ close }">
|
||||
<LazyDatePicker
|
||||
v-model="itemInfo.end"
|
||||
mode="dateTime"
|
||||
/>
|
||||
</template>
|
||||
</UPopover>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Resource:"
|
||||
class="w-full"
|
||||
>
|
||||
<InputGroup class="w-full">
|
||||
<USelectMenu
|
||||
v-model="resourceToAdd"
|
||||
:options="dataStore.getResourcesList"
|
||||
option-attribute="title"
|
||||
value-attribute="id"
|
||||
class="w-full"
|
||||
></USelectMenu>
|
||||
<UButton
|
||||
@click="itemInfo.resources.push(dataStore.getResourcesList.find(i => i.id === resourceToAdd))"
|
||||
:disabled="itemInfo.resources.find(i => i.id === resourceToAdd)"
|
||||
>
|
||||
+ Hinzufügen
|
||||
</UButton>
|
||||
</InputGroup>
|
||||
</UFormGroup>
|
||||
<UTable
|
||||
v-if="itemInfo.resources.length > 0"
|
||||
:rows="itemInfo.resources"
|
||||
:columns="[
|
||||
{
|
||||
key:'type',
|
||||
label: 'Type'
|
||||
}, {
|
||||
key: 'title',
|
||||
label: 'Name'
|
||||
}, {
|
||||
key: 'remove'
|
||||
}
|
||||
]"
|
||||
>
|
||||
<template #remove-data="{row}">
|
||||
<UButton
|
||||
color="rose"
|
||||
variant="outline"
|
||||
@click="itemInfo.resources = itemInfo.resources.filter(i => i.id !== row.id)"
|
||||
>
|
||||
Entfernen
|
||||
</UButton>
|
||||
</template>
|
||||
</UTable>
|
||||
|
||||
|
||||
</UForm>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
124
pages/events/index.vue
Normal file
124
pages/events/index.vue
Normal file
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<UDashboardNavbar title="Termine" :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(`/events/edit`)">+ Termin</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>
|
||||
|
||||
<UTable
|
||||
:rows="filteredRows"
|
||||
:columns="columns"
|
||||
class="w-full"
|
||||
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
|
||||
@select="(i) => router.push(`/events/show/${i.id}`) "
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Termine anzuzeigen' }"
|
||||
>
|
||||
<template #start-data="{row}">
|
||||
{{dayjs(row.start).format("DD.MM.YY HH:mm")}}
|
||||
</template>
|
||||
<template #end-data="{row}">
|
||||
{{dayjs(row.end).format("DD.MM.YY HH:mm")}}
|
||||
</template>
|
||||
<template #project-data="{row}">
|
||||
{{row.project ? dataStore.getProjectById(row.project).name: ""}}
|
||||
</template>
|
||||
</UTable>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import dayjs from "dayjs";
|
||||
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
defineShortcuts({
|
||||
'/': () => {
|
||||
//console.log(searchinput)
|
||||
//searchinput.value.focus()
|
||||
document.getElementById("searchinput").focus()
|
||||
},
|
||||
'+': () => {
|
||||
router.push("/events/edit")
|
||||
}
|
||||
})
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const router = useRouter()
|
||||
|
||||
const templateColumns = [
|
||||
{
|
||||
key: 'title',
|
||||
label: "Titel:",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "start",
|
||||
label: "Start",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "end",
|
||||
label: "Ende"
|
||||
},
|
||||
{
|
||||
key: "resources",
|
||||
label: "Resourcen"
|
||||
},
|
||||
{
|
||||
key: "project",
|
||||
label: "Projekt"
|
||||
}
|
||||
]
|
||||
const selectedColumns = ref(templateColumns)
|
||||
const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
|
||||
|
||||
|
||||
const searchString = ref('')
|
||||
const filteredRows = computed(() => {
|
||||
if(!searchString.value) {
|
||||
return dataStore.events
|
||||
}
|
||||
|
||||
return dataStore.events.filter(item => {
|
||||
return Object.values(item).some((value) => {
|
||||
return String(value).toLowerCase().includes(searchString.value.toLowerCase())
|
||||
})
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
88
pages/formSubmissions/[id].vue
Normal file
88
pages/formSubmissions/[id].vue
Normal file
@@ -0,0 +1,88 @@
|
||||
<script setup>
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const supabase = useSupabaseClient()
|
||||
|
||||
|
||||
const currentSubmission = (await supabase.from("formSubmits").select().eq('id',route.params.id)).data[0]
|
||||
const form = (await supabase.from("forms").select().eq('id',currentSubmission.formType)).data[0]
|
||||
|
||||
const formData = ref({})
|
||||
const submitted = ref(currentSubmission.submitted)
|
||||
|
||||
const submitForm = async () => {
|
||||
|
||||
submitted.value = true
|
||||
|
||||
console.log(formData.value)
|
||||
const {data,error} = await supabase
|
||||
.from("formSubmits")
|
||||
.update({values: formData.value, submitted: true})
|
||||
.eq('id',currentSubmission.id)
|
||||
.select()
|
||||
|
||||
if(error) {
|
||||
console.log(error)
|
||||
} else if( data) {
|
||||
formData.value = {}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<UForm
|
||||
v-if="!submitted"
|
||||
@submit="submitForm"
|
||||
@reset="formData = {}"
|
||||
>
|
||||
<div
|
||||
v-for="item in form.fields"
|
||||
>
|
||||
<p v-if="item.type === 'header'">{{item.label}}</p>
|
||||
<UFormGroup
|
||||
v-else-if="item.type.includes('Input')"
|
||||
:label="item.required ? item.label + '*' : item.label"
|
||||
>
|
||||
<UInput
|
||||
v-if="item.type === 'textInput'"
|
||||
v-model="formData[item.key]"
|
||||
:required="item.required"
|
||||
/>
|
||||
<UInput
|
||||
v-else-if="item.type === 'numberInput'"
|
||||
v-model="formData[item.key]"
|
||||
:required="item.required"
|
||||
type="number"
|
||||
inputmode="numeric"
|
||||
/>
|
||||
</UFormGroup>
|
||||
</div>
|
||||
|
||||
<UButton type="submit">
|
||||
Abschicken
|
||||
</UButton>
|
||||
<UButton
|
||||
type="reset"
|
||||
color="rose"
|
||||
class="m-2"
|
||||
>
|
||||
Zurücksetzen
|
||||
</UButton>
|
||||
|
||||
|
||||
</UForm>
|
||||
<div v-else>
|
||||
Dieses Formular wurde bereits abgeschickt. Möchten Sie erneut Daten abschicken, sprechen Sie bitte Ihren Ansprechpartner an, um das Formular freizuschalten.
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
11
pages/forms.vue
Normal file
11
pages/forms.vue
Normal file
@@ -0,0 +1,11 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
84
pages/index.vue
Normal file
84
pages/index.vue
Normal file
@@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<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>
|
||||
|
||||
<!-- <UDropdown :items="items">
|
||||
<UButton icon="i-heroicons-plus" size="md" class="ml-1.5 rounded-full" />
|
||||
</UDropdown>-->
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
|
||||
<!-- <UDashboardToolbar>
|
||||
<template #left>
|
||||
<!– ~/components/home/HomeDateRangePicker.vue –>
|
||||
<!– <HomeDateRangePicker v-model="range" class="-ml-2.5" />–>
|
||||
|
||||
<!– ~/components/home/HomePeriodSelect.vue –>
|
||||
<!– <HomePeriodSelect v-model="period" :range="range" />–>
|
||||
</template>
|
||||
</UDashboardToolbar>-->
|
||||
|
||||
<UDashboardPanelContent>
|
||||
<UDashboardCard
|
||||
title="Anwesenheiten"
|
||||
v-if="dataStore.getStartedWorkingTimes().length > 0"
|
||||
>
|
||||
<p v-for="time in dataStore.getStartedWorkingTimes()"><UIcon name="i-heroicons-check"/>{{dataStore.getProfileById(time.profile).fullName}}</p>
|
||||
</UDashboardCard>
|
||||
|
||||
</UDashboardPanelContent>
|
||||
</UDashboardPanel>
|
||||
</UDashboardPage>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
const dataStore = useDataStore()
|
||||
|
||||
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
|
||||
|
||||
const supabase = useSupabaseClient()
|
||||
|
||||
const user = useSupabaseUser()
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/*.cardHolder {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.card{
|
||||
width: 22vw;
|
||||
height: 40vh;
|
||||
border: 1px solid white
|
||||
}*/
|
||||
</style>
|
||||
191
pages/inventory/index.vue
Normal file
191
pages/inventory/index.vue
Normal file
@@ -0,0 +1,191 @@
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const supabase = useSupabaseClient()
|
||||
const router = useRouter()
|
||||
const mode = ref("incoming")
|
||||
const toast = useToast()
|
||||
|
||||
const inventoryChangeData = ref({
|
||||
productId: "",
|
||||
spaceId: "",
|
||||
quantity: 1
|
||||
})
|
||||
|
||||
const createMovement = async () => {
|
||||
|
||||
if(mode.value === '' || !checkSpaceId(inventoryChangeData.value.spaceId) || !checkArticle(inventoryChangeData.value.productId)){
|
||||
|
||||
} else {
|
||||
if(mode.value === 'incoming'){
|
||||
|
||||
const {error} = await supabase
|
||||
.from("movements")
|
||||
.insert([inventoryChangeData.value])
|
||||
.select()
|
||||
if(error) console.log(error)
|
||||
|
||||
|
||||
} else if (mode.value === 'outgoing'){
|
||||
inventoryChangeData.value.quantity *= -1
|
||||
|
||||
const {error} = await supabase
|
||||
.from("movements")
|
||||
.insert([inventoryChangeData.value])
|
||||
.select()
|
||||
if(error) console.log(error)
|
||||
} else if (mode.value === 'change'){}
|
||||
|
||||
|
||||
inventoryChangeData.value = {
|
||||
productId: "",
|
||||
spaceId: "",
|
||||
quantity: 1
|
||||
}
|
||||
|
||||
|
||||
dataStore.fetchMovements()
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
defineShortcuts({
|
||||
meta_enter: {
|
||||
usingInput: true,
|
||||
handler: () => {
|
||||
createMovement()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
function checkArticle(productId) {
|
||||
return dataStore.products.filter(product =>product.id === productId).length > 0;
|
||||
}
|
||||
function checkSpaceId(spaceId) {
|
||||
return dataStore.spaces.filter(space => space.id === spaceId).length > 0;
|
||||
}
|
||||
|
||||
function changeFocusToSpaceId() {
|
||||
document.getElementById('spaceIdInput').focus()
|
||||
}
|
||||
|
||||
function changeFocusToQuantity() {
|
||||
document.getElementById('quantityInput').focus()
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="main">
|
||||
|
||||
<div class="my-3">
|
||||
<UButton
|
||||
@click="mode = 'incoming'"
|
||||
class="ml-3"
|
||||
:variant="mode === 'incoming' ? 'solid' : 'outline'"
|
||||
>Wareneingang</UButton>
|
||||
<UButton
|
||||
@click="mode = 'outgoing'"
|
||||
class="ml-1"
|
||||
:variant="mode === 'outgoing' ? 'solid' : 'outline'"
|
||||
>Warenausgang</UButton>
|
||||
<!-- <UButton
|
||||
@click="mode = 'change'"
|
||||
class="ml-1"
|
||||
disabled
|
||||
:variant="mode === 'change' ? 'solid' : 'outline'"
|
||||
>Umlagern</UButton>-->
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<UFormGroup
|
||||
label="Artikel:"
|
||||
class="mt-3 w-80"
|
||||
>
|
||||
<USelectMenu
|
||||
:options="dataStore.products"
|
||||
option-attribute="name"
|
||||
value-attribute="id"
|
||||
variant="outline"
|
||||
searchable
|
||||
:search-attributes="['name','ean', 'barcode']"
|
||||
:color="checkArticle(inventoryChangeData.productId) ? 'primary' : 'rose'"
|
||||
v-model="inventoryChangeData.productId"
|
||||
v-on:select="changeFocusToSpaceId"
|
||||
>
|
||||
<template #label>
|
||||
{{dataStore.products.find(product => product.id === inventoryChangeData.productId) ? dataStore.products.find(product => product.id === inventoryChangeData.productId).name : "Bitte Artikel auswählen"}}
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup
|
||||
label="Lagerplatz:"
|
||||
class="mt-3 w-80"
|
||||
>
|
||||
<USelectMenu
|
||||
:options="dataStore.spaces"
|
||||
searchable
|
||||
option-attribute="description"
|
||||
:color="checkSpaceId(inventoryChangeData.spaceId) ? 'primary' : 'rose'"
|
||||
v-model="inventoryChangeData.spaceId"
|
||||
v-on:select="changeFocusToQuantity"
|
||||
value-attribute="id"
|
||||
>
|
||||
<template #label>
|
||||
{{dataStore.spaces.find(space => space.id === inventoryChangeData.spaceId) ? dataStore.spaces.find(space => space.id === inventoryChangeData.spaceId).description : "Kein Lagerplatz ausgewählt"}}
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup
|
||||
label="Anzahl:"
|
||||
class="mt-3 w-80"
|
||||
>
|
||||
<UInput
|
||||
variant="outline"
|
||||
color="primary"
|
||||
placeholder="Anzahl"
|
||||
v-model="inventoryChangeData.quantity"
|
||||
type="number"
|
||||
id="quantityInput"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UButton
|
||||
@click="createMovement"
|
||||
:disabled="mode === '' && checkSpaceId(inventoryChangeData.spaceId) && checkArticle(inventoryChangeData.productId)"
|
||||
class="mt-3"
|
||||
>
|
||||
Bestätigen
|
||||
</UButton>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
#main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
#left {
|
||||
width: 25vw;
|
||||
}
|
||||
|
||||
#right {
|
||||
width: 60vw;
|
||||
padding-left: 3vw;
|
||||
}
|
||||
</style>
|
||||
138
pages/inventoryitems/[mode]/[[id]].vue
Normal file
138
pages/inventoryitems/[mode]/[[id]].vue
Normal file
@@ -0,0 +1,138 @@
|
||||
<script setup>
|
||||
import HistoryDisplay from "~/components/HistoryDisplay.vue";
|
||||
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const toast = useToast()
|
||||
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({
|
||||
name: null,
|
||||
description: null
|
||||
})
|
||||
|
||||
//Functions
|
||||
const setupPage = () => {
|
||||
if(mode.value === "show" || mode.value === "edit"){
|
||||
currentItem.value = dataStore.getInventoryItemById(Number(useRoute().params.id))
|
||||
}
|
||||
|
||||
if(mode.value === "edit") itemInfo.value = currentItem.value
|
||||
}
|
||||
|
||||
const cancelEditorCreate = () => {
|
||||
if(currentItem.value) {
|
||||
router.push(`/inventoryitems/show/${currentItem.value.id}`)
|
||||
} else {
|
||||
router.push(`/inventoryitems`)
|
||||
}
|
||||
}
|
||||
|
||||
setupPage()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardNavbar :title="currentItem ? currentItem.name : (mode === 'create' ? 'Inventartikel erstellen' : 'Inventartikel bearbeiten')">
|
||||
<template #right>
|
||||
<UButton
|
||||
v-if="mode === 'edit'"
|
||||
@click="dataStore.updateItem('inventoryitems',itemInfo)"
|
||||
>
|
||||
Speichern
|
||||
</UButton>
|
||||
<UButton
|
||||
v-else-if="mode === 'create'"
|
||||
@click="dataStore.createNewItem('inventoryitems',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(`/inventoryitems/edit/${currentItem.id}`)"
|
||||
>
|
||||
Bearbeiten
|
||||
</UButton>
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
<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="text-wrap">
|
||||
<p v-if="currentItem.currentSpace">Lagerplatz: {{dataStore.getSpaceById(currentItem.currentSpace).spaceNumber}} - {{dataStore.getSpaceById(currentItem.currentSpace).description}}</p>
|
||||
<p>Beschreibung: {{currentItem.description}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="item.label === 'Logbuch'">
|
||||
<HistoryDisplay
|
||||
type="inventoryitem"
|
||||
v-if="currentItem"
|
||||
:element-id="currentItem.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="Lagerplatz:"
|
||||
>
|
||||
<USelectMenu
|
||||
:options="dataStore.spaces"
|
||||
v-model="itemInfo.currentSpace"
|
||||
value-attribute="id"
|
||||
>
|
||||
<template #option="{option}">
|
||||
<span class="truncate">{{option.spaceNumber}} - {{option.description}}</span>
|
||||
</template>
|
||||
<template #label>
|
||||
<span v-if="itemInfo.currentSpace">{{dataStore.getSpaceById(itemInfo.currentSpace).spaceNumber }} - {{dataStore.getSpaceById(itemInfo.currentSpace).description}}</span>
|
||||
<span v-else>Kein Lagerplatz ausgewählt</span>
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Beschreibung:"
|
||||
>
|
||||
<UTextarea
|
||||
v-model="itemInfo.description"
|
||||
/>
|
||||
</UFormGroup>
|
||||
</UForm>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
106
pages/inventoryitems/index.vue
Normal file
106
pages/inventoryitems/index.vue
Normal file
@@ -0,0 +1,106 @@
|
||||
<template>
|
||||
<UDashboardNavbar title="Inventar" :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(`/inventoryitems/create`)">+ Inventarartikel</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>
|
||||
|
||||
<UTable
|
||||
:rows="filteredRows"
|
||||
:columns="columns"
|
||||
class="w-full"
|
||||
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
|
||||
@select="(i) => router.push(`/inventoryitems/show/${i.id}`) "
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Inventarartikel anzuzeigen' }"
|
||||
>
|
||||
|
||||
|
||||
</UTable>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
defineShortcuts({
|
||||
'/': () => {
|
||||
//console.log(searchinput)
|
||||
//searchinput.value.focus()
|
||||
document.getElementById("searchinput").focus()
|
||||
},
|
||||
'+': () => {
|
||||
router.push("/tasks/create")
|
||||
}
|
||||
})
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const router = useRouter()
|
||||
|
||||
const templateColumns = [
|
||||
{
|
||||
key: "name",
|
||||
label: "Name",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "description",
|
||||
label: "Beschreibung",
|
||||
sortable: true
|
||||
}
|
||||
]
|
||||
const selectedColumns = ref(templateColumns)
|
||||
const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
|
||||
|
||||
|
||||
const searchString = ref('')
|
||||
const filteredRows = computed(() => {
|
||||
if(!searchString.value) {
|
||||
return dataStore.inventoryitems
|
||||
}
|
||||
|
||||
return dataStore.inventoryitems.filter(product => {
|
||||
return Object.values(product).some((value) => {
|
||||
return String(value).toLowerCase().includes(searchString.value.toLowerCase())
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
127
pages/login.vue
Normal file
127
pages/login.vue
Normal file
@@ -0,0 +1,127 @@
|
||||
<script setup >
|
||||
|
||||
definePageMeta({
|
||||
layout: "notLoggedIn"
|
||||
})
|
||||
|
||||
const supabase = useSupabaseClient()
|
||||
const user = useSupabaseUser()
|
||||
const router = useRouter()
|
||||
const colorMode = useColorMode()
|
||||
const dataStore = useDataStore()
|
||||
|
||||
const isLight = computed({
|
||||
get () {
|
||||
return colorMode.value !== 'dark'
|
||||
},
|
||||
set () {
|
||||
colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
const email = ref("")
|
||||
const password = ref("")
|
||||
|
||||
const fields = [{
|
||||
name: 'email',
|
||||
type: 'text',
|
||||
label: 'Email',
|
||||
placeholder: 'E-Mail Adresse'
|
||||
}, {
|
||||
name: 'password',
|
||||
label: 'Password',
|
||||
type: 'password',
|
||||
placeholder: 'Passwort'
|
||||
}]
|
||||
|
||||
|
||||
const onSubmit = async (data) => {
|
||||
|
||||
const {error, data:{ user}} = await supabase.auth.signInWithPassword({
|
||||
email: data.email,
|
||||
password: data.password
|
||||
})
|
||||
if(error) {
|
||||
console.log(error.toString())
|
||||
} else {
|
||||
console.log("Login Successful")
|
||||
dataStore.initializeData(user.id)
|
||||
router.push("/")
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- <div id="loginSite">
|
||||
<div id="loginForm">
|
||||
<UFormGroup
|
||||
label="E-Mail:"
|
||||
>
|
||||
<UInput
|
||||
v-model="email"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Passwort:"
|
||||
>
|
||||
<UInput
|
||||
v-model="password"
|
||||
type="password"
|
||||
@keyup.enter="onSubmit"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UButton
|
||||
@click="onSubmit"
|
||||
class="mt-3"
|
||||
>
|
||||
Einloggen
|
||||
</UButton>
|
||||
</div>
|
||||
|
||||
</div>-->
|
||||
<UCard class="max-w-sm w-full mx-auto mt-5">
|
||||
|
||||
<UColorModeImage
|
||||
light="/Logo.png"
|
||||
dark="/Logo_Dark.png"
|
||||
/>
|
||||
|
||||
<!-- <img
|
||||
:src="!isLight ? '/spaces.svg' : '/spaces_hell.svg'"
|
||||
alt="Logo"
|
||||
class="w-full mx-auto"
|
||||
/>-->
|
||||
|
||||
<UAuthForm
|
||||
title="Login"
|
||||
description="Geben Sie Ihre Anmeldedaten ein um Zugriff auf Ihren Account zu bekommen"
|
||||
align="bottom"
|
||||
:fields="fields"
|
||||
:loading="false"
|
||||
@submit="onSubmit"
|
||||
>
|
||||
|
||||
</UAuthForm>
|
||||
</UCard>
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
#loginSite {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
|
||||
}
|
||||
|
||||
#loginForm {
|
||||
width: 30vw;
|
||||
height: 30vh;
|
||||
}
|
||||
</style>
|
||||
216
pages/plants/[mode]/[[id]].vue
Normal file
216
pages/plants/[mode]/[[id]].vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<script setup>
|
||||
import HistoryDisplay from "~/components/HistoryDisplay.vue";
|
||||
import DocumentList from "~/components/DocumentList.vue";
|
||||
import DocumentUpload from "~/components/DocumentUpload.vue";
|
||||
import Toolbar from "~/components/Toolbar.vue";
|
||||
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const toast = useToast()
|
||||
const id = ref(route.params.id ? route.params.id : null )
|
||||
|
||||
const editor = useEditor({
|
||||
content: "<p>Hier kann deine Projektdokumentation stehen</p>",
|
||||
extensions: [TiptapStarterKit],
|
||||
});
|
||||
|
||||
let currentItem = ref(null)
|
||||
|
||||
//Working
|
||||
const mode = ref(route.params.mode || "show")
|
||||
const itemInfo = ref({})
|
||||
|
||||
const tabItems = [
|
||||
{
|
||||
label: "Informationen"
|
||||
},{
|
||||
label: "Logbuch"
|
||||
},{
|
||||
label: "Projekte"
|
||||
},{
|
||||
label: "Aufgaben"
|
||||
},{
|
||||
label: "Dokumente"
|
||||
},{
|
||||
label: "Dokumentation"
|
||||
}
|
||||
]
|
||||
|
||||
//Functions
|
||||
const setupPage = () => {
|
||||
if(mode.value === "show" || mode.value === "edit"){
|
||||
currentItem.value = dataStore.getPlantById(Number(useRoute().params.id))
|
||||
}
|
||||
|
||||
if(mode.value === "edit") itemInfo.value = currentItem.value
|
||||
|
||||
if(mode.value === "create") {
|
||||
let query = route.query
|
||||
if(query.customer) itemInfo.value.customer = Number(query.customer)
|
||||
}
|
||||
}
|
||||
|
||||
const cancelEditorCreate = () => {
|
||||
if(currentItem.value) {
|
||||
router.push(`/plants/show/${currentItem.value.id}`)
|
||||
} else {
|
||||
router.push(`/plants`)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
setupPage()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardNavbar :title="currentItem ? currentItem.name : (mode === 'create' ? 'Objekt erstellen' : 'Objekt bearbeiten')">
|
||||
<template #right>
|
||||
<UButton
|
||||
v-if="mode === 'edit'"
|
||||
@click="dataStore.updateItem('plants',itemInfo)"
|
||||
>
|
||||
Speichern
|
||||
</UButton>
|
||||
<UButton
|
||||
v-else-if="mode === 'create'"
|
||||
@click="dataStore.createNewItem('plants',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(`/plants/edit/${currentItem.id}`)"
|
||||
>
|
||||
Bearbeiten
|
||||
</UButton>
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
|
||||
<UTabs
|
||||
:items="tabItems"
|
||||
v-if="mode === 'show'"
|
||||
class="p-5"
|
||||
>
|
||||
<template #item="{item}">
|
||||
<UCard class="mt-5">
|
||||
<div v-if="item.label === 'Informationen'">
|
||||
<div class="text-wrap">
|
||||
<p>Kunde: <nuxt-link :to="`/customers/show/${currentItem.customer}`">{{dataStore.getCustomerById(currentItem.customer).name}}</nuxt-link></p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div v-else-if="item.label === 'Logbuch'">
|
||||
<HistoryDisplay
|
||||
type="plant"
|
||||
v-if="currentItem"
|
||||
:element-id="currentItem.id"
|
||||
/>
|
||||
</div>
|
||||
<div v-else-if="item.label === 'Projekte'">
|
||||
<Toolbar>
|
||||
<UButton
|
||||
@click="router.push(`/projects/create?plant=${currentItem.id}`)"
|
||||
>
|
||||
+ Projekt
|
||||
</UButton>
|
||||
</Toolbar>
|
||||
|
||||
<UTable
|
||||
:rows="dataStore.getProjectsByPlantId(currentItem.id)"
|
||||
:columns="[{key: 'name', label: 'Name'}]"
|
||||
@select="(row) => router.push(`/projects/show/${row.id}`)"
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Projekte' }"
|
||||
>
|
||||
|
||||
</UTable>
|
||||
|
||||
</div>
|
||||
<div v-else-if="item.label === 'Aufgaben'">
|
||||
<Toolbar>
|
||||
<UButton
|
||||
@click="router.push(`/tasks/create?plant=${currentItem.id}`)"
|
||||
>
|
||||
+ Aufgabe
|
||||
</UButton>
|
||||
</Toolbar>
|
||||
<UTable
|
||||
:rows="dataStore.getTasksByPlantId(currentItem.id)"
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Aufgaben' }"
|
||||
:columns="[{key: 'name', label: 'Name'},{key: 'categore', label: 'Kategorie'}]"
|
||||
@select="(row) => router.push(`/tasks/show/${row.id}`)"
|
||||
>
|
||||
|
||||
</UTable>
|
||||
</div>
|
||||
<div v-else-if="item.label === 'Dokumente'" class="space-y-3">
|
||||
<Toolbar>
|
||||
<DocumentUpload
|
||||
type="plant"
|
||||
:element-id="currentItem.id"
|
||||
/>
|
||||
</Toolbar>
|
||||
|
||||
<DocumentList :documents="dataStore.getDocumentsByPlantId(currentItem.id)"/>
|
||||
|
||||
</div>
|
||||
<div v-if="item.label === 'Dokumentation'">
|
||||
|
||||
<Editor/>
|
||||
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
</template>
|
||||
</UTabs>
|
||||
|
||||
<div v-if="currentItem && mode == 'show'">
|
||||
|
||||
</div>
|
||||
|
||||
<UForm
|
||||
v-else-if="mode === 'edit' || mode === 'create'"
|
||||
class="p-5"
|
||||
>
|
||||
<UFormGroup
|
||||
label="Name:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.name"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup
|
||||
label="Kundennummer:"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="itemInfo.customer"
|
||||
:options="dataStore.customers"
|
||||
option-attribute="name"
|
||||
value-attribute="id"
|
||||
searchable
|
||||
:search-attributes="['name']"
|
||||
>
|
||||
<template #label>
|
||||
{{dataStore.customers.find(customer => customer.id === itemInfo.customer) ? dataStore.customers.find(customer => customer.id === itemInfo.customer).name : "Kunde auswählen"}}
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
</UForm>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
121
pages/plants/index.vue
Normal file
121
pages/plants/index.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<UDashboardNavbar title="Objekte" :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(`/plants/create`)">+ Objekt</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(`/plants/show/${i.id}`) "
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Objekte anzuzeigen' }"
|
||||
>
|
||||
<template #customer-data="{row}">
|
||||
{{dataStore.customers.find(customer => customer.id === row.customer) ? dataStore.customers.find(customer => customer.id === row.customer).name : "" }}
|
||||
</template>
|
||||
</UTable>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
defineShortcuts({
|
||||
'/': () => {
|
||||
//console.log(searchinput)
|
||||
//searchinput.value.focus()
|
||||
document.getElementById("searchinput").focus()
|
||||
},
|
||||
'+': () => {
|
||||
router.push("/plants/create")
|
||||
}
|
||||
})
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const router = useRouter()
|
||||
|
||||
const templateColumns = [
|
||||
{
|
||||
key: "name",
|
||||
label: "Name",
|
||||
sortable: true
|
||||
},{
|
||||
key: "customer",
|
||||
label: "Kunde",
|
||||
sortable: true
|
||||
}
|
||||
]
|
||||
const selectedColumns = ref(templateColumns)
|
||||
const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
|
||||
|
||||
|
||||
const searchString = ref('')
|
||||
|
||||
const filteredRows = computed(() => {
|
||||
if(!searchString.value) {
|
||||
return dataStore.plants
|
||||
}
|
||||
|
||||
return dataStore.plants.filter(item => {
|
||||
|
||||
item.customerName = dataStore.customers.find(i => i.id === item.customer).name
|
||||
|
||||
return Object.values(item).some((value) => {
|
||||
return String(value).toLowerCase().includes(searchString.value.toLowerCase())
|
||||
})
|
||||
})
|
||||
})
|
||||
const selectItem = (item) => {
|
||||
router.push(`/plants/show/${item.id} `)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
105
pages/printing.vue
Normal file
105
pages/printing.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<script setup>
|
||||
import * as JSPM from 'jsprintmanager'
|
||||
|
||||
|
||||
let printers = ref([])
|
||||
let scanners = ref([])
|
||||
|
||||
|
||||
find().then(devices => {
|
||||
console.log(devices)
|
||||
})
|
||||
|
||||
|
||||
const doScanning = () => {
|
||||
|
||||
}
|
||||
|
||||
const doPrintZPL = () => {
|
||||
/*if(this.selected_printer === '' && !this.print2default) {
|
||||
alert("You must select a printer");
|
||||
return;
|
||||
}*/
|
||||
let cpj = new JSPM.ClientPrintJob();
|
||||
/*if ( this.print2default ) {
|
||||
cpj.clientPrinter = new JSPM.DefaultPrinter();
|
||||
} else {
|
||||
cpj.clientPrinter = new JSPM.InstalledPrinter(this.selected_printer);
|
||||
}*/
|
||||
|
||||
cpj.clientPrinter = new JSPM.InstalledPrinter("ZebraZD230");
|
||||
let cmds = "^XA";
|
||||
cmds += "^CF0,60";
|
||||
cmds += "^FO20,10^BY4^BC,200,Y,N,,U^FD0012345123451234512^FS";
|
||||
cmds += "^FO20,250^GB650,3,3^FS";
|
||||
cmds += "^CFA,30";
|
||||
cmds += "^FO20,300^FDFederspiel Technology UG^FS";
|
||||
cmds += "^XZ";
|
||||
|
||||
|
||||
cpj.printerCommands = cmds;
|
||||
cpj.sendToClient();
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*const getPrinters = () => {
|
||||
return new Promise((ok, err) => {
|
||||
let temp = [];
|
||||
if(JSPM.JSPrintManager.websocket_status == JSPM.WSStatus.Open) {
|
||||
JSPM.JSPrintManager.getPrinters().then(function (myPrinters) {
|
||||
temp = myPrinters;
|
||||
ok(temp);
|
||||
}).catch((e)=>err(e));
|
||||
} else { console.warn("JSPM WS not open"); ok(temp); }
|
||||
});
|
||||
}
|
||||
const getScanners = () => {
|
||||
return new Promise((ok, err) => {
|
||||
let scanners = [];
|
||||
if(JSPM.JSPrintManager.websocket_status === JSPM.WSStatus.Open) {
|
||||
JSPM.JSPrintManager.getScanners().then(function (myScanners) {
|
||||
printers = myScanners;
|
||||
console.log(scanners);
|
||||
ok(scanners);
|
||||
}).catch((e)=>err(e));
|
||||
} else { console.warn("JSPM WS not open"); ok(printers); }
|
||||
});
|
||||
}*/
|
||||
const initJSPM = async () => {
|
||||
JSPM.JSPrintManager.auto_reconnect = true
|
||||
await JSPM.JSPrintManager.start();
|
||||
|
||||
JSPM.JSPrintManager.WS.onStatusChanged = async () => {
|
||||
console.log("Status Changed")
|
||||
|
||||
if(JSPM.JSPrintManager.websocket_status === JSPM.WSStatus.Open){
|
||||
printers.value = await JSPM.JSPrintManager.getPrinters()
|
||||
scanners.value = await JSPM.JSPrintManager.getScanners()
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
initJSPM()
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
{{printers}}
|
||||
{{scanners}}
|
||||
|
||||
|
||||
<UButton @click="doPrintZPL">Print</UButton>
|
||||
|
||||
<UButton @click="initJSPM">Init</UButton>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
207
pages/products/[mode]/[[id]].vue
Normal file
207
pages/products/[mode]/[[id]].vue
Normal file
@@ -0,0 +1,207 @@
|
||||
<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 route = useRoute()
|
||||
const router = useRouter()
|
||||
const toast = useToast()
|
||||
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({
|
||||
unit: 1,
|
||||
tags: []
|
||||
})
|
||||
|
||||
//Functions
|
||||
const setupPage = () => {
|
||||
if(mode.value === "show" || mode.value === "edit"){
|
||||
currentItem.value = dataStore.getProductById(Number(useRoute().params.id))
|
||||
}
|
||||
|
||||
if(mode.value === "edit") itemInfo.value = currentItem.value
|
||||
|
||||
}
|
||||
|
||||
const cancelEditorCreate = () => {
|
||||
if(currentItem.value) {
|
||||
router.push(`/products/show/${currentItem.value.id}`)
|
||||
} else {
|
||||
router.push(`/products/`)
|
||||
}
|
||||
}
|
||||
|
||||
setupPage()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardNavbar :title="currentItem ? currentItem.name : (mode === 'create' ? 'Artikel erstellen' : 'Artikel bearbeiten')">
|
||||
<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/${currentItem.id}`)"
|
||||
>
|
||||
Bearbeiten
|
||||
</UButton>
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
<UTabs
|
||||
:items="[{label: 'Informationen'},{label: 'Logbuch'},{label: 'Bestand'},{label: 'Dokumente'}]"
|
||||
v-if="mode === 'show'"
|
||||
class="p-5"
|
||||
>
|
||||
<template #item="{item}">
|
||||
<UCard class="mt-5">
|
||||
<div
|
||||
v-if="item.label === 'Informationen'"
|
||||
>
|
||||
<UBadge
|
||||
v-for="tag in currentItem.tags"
|
||||
class="mr-2"
|
||||
>
|
||||
{{tag}}
|
||||
</UBadge>
|
||||
<UDivider
|
||||
class="my-2"
|
||||
/>
|
||||
<span v-if="currentItem.purchasePrice">Einkaufspreis: {{Number(currentItem.purchasePrice).toFixed(2)}} €<br></span>
|
||||
|
||||
</div>
|
||||
<div
|
||||
v-if="item.label === 'Logbuch'"
|
||||
>
|
||||
<HistoryDisplay
|
||||
type="product"
|
||||
v-if="currentItem"
|
||||
:element-id="currentItem.id"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="item.label === 'Bestand'"
|
||||
>
|
||||
Bestand: {{dataStore.getStockByProductId(currentItem.id)}} {{dataStore.units.find(unit => unit.id === currentItem.unit) ? dataStore.units.find(unit => unit.id === currentItem.unit).name : ""}}
|
||||
|
||||
</div>
|
||||
<div
|
||||
v-if="item.label === 'Dokumente'"
|
||||
>
|
||||
<Toolbar>
|
||||
<DocumentUpload
|
||||
type="product"
|
||||
:element-id="currentItem.id"
|
||||
/>
|
||||
</Toolbar>
|
||||
|
||||
|
||||
<DocumentList :documents="dataStore.getDocumentsByProductId(currentItem.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="Hersteller:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.manufacturer"
|
||||
/>
|
||||
</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="dataStore.ownTenant.tags.products"
|
||||
multiple
|
||||
>
|
||||
<template #label>
|
||||
{{itemInfo.tags.join(", ")}}
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="EAN:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.ean"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Barcode:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.barcode"
|
||||
/>
|
||||
</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>
|
||||
</UForm>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
143
pages/products/index.vue
Normal file
143
pages/products/index.vue
Normal file
@@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<UDashboardNavbar title="Artikel" :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(`/products/create`)">+ Artikel</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>
|
||||
|
||||
<UTable
|
||||
:rows="filteredRows"
|
||||
:columns="columns"
|
||||
class="w-full"
|
||||
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
|
||||
@select="(i) => router.push(`/products/show/${i.id}`) "
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Artikel anzuzeigen' }"
|
||||
>
|
||||
<template #stock-data="{row}">
|
||||
{{`${dataStore.getStockByProductId(row.id)} ${(dataStore.units.find(unit => unit.id === row.unit) ? dataStore.units.find(unit => unit.id === row.unit).name : "")}`}}
|
||||
</template>
|
||||
<template #purchasePrice-data="{row}">
|
||||
{{row.purchasePrice ? Number(row.purchasePrice).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>
|
||||
</UTable>/
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
defineShortcuts({
|
||||
'/': () => {
|
||||
//console.log(searchinput)
|
||||
//searchinput.value.focus()
|
||||
document.getElementById("searchinput").focus()
|
||||
},
|
||||
'+': () => {
|
||||
router.push("/products/create")
|
||||
}
|
||||
})
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const router = useRouter()
|
||||
|
||||
const templateColumns = [
|
||||
{
|
||||
key: "stock",
|
||||
label: "Bestand"
|
||||
},
|
||||
{
|
||||
key: "name",
|
||||
label: "Name",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "manufacturer",
|
||||
label: "Hersteller",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "unit",
|
||||
label: "Einheit",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "purchasePrice",
|
||||
label: "Einkaufspreis",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "tags",
|
||||
label: "Tags",
|
||||
sortable: true
|
||||
}
|
||||
]
|
||||
const selectedColumns = ref(templateColumns)
|
||||
const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
|
||||
|
||||
const searchString = ref('')
|
||||
|
||||
const filteredRows = computed(() => {
|
||||
if(!searchString.value) {
|
||||
return dataStore.products
|
||||
}
|
||||
|
||||
return dataStore.products.filter(product => {
|
||||
return Object.values(product).some((value) => {
|
||||
return String(value).toLowerCase().includes(searchString.value.toLowerCase())
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
97
pages/profiles/create.vue
Normal file
97
pages/profiles/create.vue
Normal file
@@ -0,0 +1,97 @@
|
||||
<script setup>
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const dataStore = useDataStore()
|
||||
|
||||
const itemInfo = ref({})
|
||||
|
||||
const createProfile = async () => {
|
||||
let data = {
|
||||
fullName: `${itemInfo.value.firstName} ${itemInfo.value.lastName}`,
|
||||
...itemInfo.value
|
||||
}
|
||||
|
||||
await dataStore.createNewItem("profiles", data)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardNavbar title="Mitarbeiter erstellen">
|
||||
<template #right>
|
||||
<UButton
|
||||
color="rose"
|
||||
@click="router.push(`/profiles`)"
|
||||
>
|
||||
Abbrechen
|
||||
</UButton>
|
||||
<UButton
|
||||
@click="createProfile"
|
||||
>
|
||||
Erstellen
|
||||
</UButton>
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
|
||||
<UForm
|
||||
class="p-5"
|
||||
>
|
||||
<UFormGroup
|
||||
label="Anrede"
|
||||
>
|
||||
<UInput
|
||||
required
|
||||
v-model="itemInfo.salutation"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Vorname"
|
||||
>
|
||||
<UInput
|
||||
required
|
||||
v-model="itemInfo.firstName"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Nachname"
|
||||
>
|
||||
<UInput
|
||||
required
|
||||
v-model="itemInfo.lastName"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Mitarbeiter Nummer"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.employeeNumber"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="E-Mail"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.email"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Handynummer"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.mobileTel"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Festnetznummer"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.fixedTel"
|
||||
/>
|
||||
</UFormGroup>
|
||||
</UForm>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
48
pages/profiles/index.vue
Normal file
48
pages/profiles/index.vue
Normal file
@@ -0,0 +1,48 @@
|
||||
<script setup>
|
||||
const dataStore = useDataStore()
|
||||
const router = useRouter()
|
||||
|
||||
|
||||
const templateColumns = [
|
||||
{
|
||||
key: 'employeeNumber',
|
||||
label: "MA-Nummer:",
|
||||
sortable: true
|
||||
},{
|
||||
key: 'fullName',
|
||||
label: "Name:",
|
||||
sortable: true
|
||||
},{
|
||||
key: "email",
|
||||
label: "E-Mail:",
|
||||
sortable: true
|
||||
}
|
||||
]
|
||||
const selectedColumns = ref(templateColumns)
|
||||
const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardNavbar title="Benutzer Einstellungen">
|
||||
<template #right>
|
||||
<UButton
|
||||
@click="router.push(`/profiles/create`)"
|
||||
>
|
||||
+ Mitarbeiter
|
||||
</UButton>
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
|
||||
<UTable
|
||||
:rows="dataStore.profiles"
|
||||
@select="(item) => router.push(`/profiles/show/${item.id}`)"
|
||||
:columns="columns"
|
||||
>
|
||||
|
||||
</UTable>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
335
pages/profiles/show/[id].vue
Normal file
335
pages/profiles/show/[id].vue
Normal file
@@ -0,0 +1,335 @@
|
||||
<script setup>
|
||||
import HistoryDisplay from "~/components/HistoryDisplay.vue";
|
||||
import dayjs from "dayjs";
|
||||
import customParseFormat from "dayjs/plugin/customParseFormat";
|
||||
import isoWeek from "dayjs/plugin/isoWeek"
|
||||
import isBetween from "dayjs/plugin/isBetween"
|
||||
dayjs.extend(customParseFormat)
|
||||
dayjs.extend(isoWeek)
|
||||
dayjs.extend(isBetween)
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const route = useRoute()
|
||||
|
||||
const itemInfo = ref({})
|
||||
|
||||
const setupPage = () => {
|
||||
if(route.params.id) itemInfo.value = dataStore.getProfileById(route.params.id)
|
||||
}
|
||||
|
||||
const selectedPresetRange = ref("Dieser Monat")
|
||||
const selectedStartDay = ref("")
|
||||
const selectedEndDay = ref("")
|
||||
|
||||
const changeRange = () => {
|
||||
let selector = "w"
|
||||
let subtract = 0
|
||||
|
||||
if(selectedPresetRange.value === "Diese Woche") {
|
||||
selector = "isoWeek"
|
||||
subtract = 0
|
||||
|
||||
} else if(selectedPresetRange.value === "Dieser Monat") {
|
||||
selector = "M"
|
||||
subtract = 0
|
||||
|
||||
} else if(selectedPresetRange.value === "Dieses Jahr") {
|
||||
selector = "y"
|
||||
subtract = 0
|
||||
} else if(selectedPresetRange.value === "Letzte Woche") {
|
||||
selector = "isoWeek"
|
||||
subtract = 1
|
||||
} else if(selectedPresetRange.value === "Letzter Monat") {
|
||||
selector = "M"
|
||||
subtract = 1
|
||||
} else if(selectedPresetRange.value === "Letztes Jahr") {
|
||||
selector = "y"
|
||||
subtract = 1
|
||||
}
|
||||
|
||||
selectedStartDay.value = dayjs().subtract(subtract,selector === "isoWeek" ? "week" : selector).startOf(selector).format("YYYY-MM-DD")
|
||||
selectedEndDay.value = dayjs().subtract(subtract,selector === "isoWeek" ? "week" : selector).endOf(selector).format("YYYY-MM-DD")
|
||||
|
||||
}
|
||||
|
||||
|
||||
const workingTimeInfo = computed(() => {
|
||||
|
||||
let times = dataStore.getWorkingTimesByProfileId(itemInfo.value.id)
|
||||
|
||||
times = times.filter(i => dayjs(i.date).isBetween(dayjs(selectedStartDay.value).subtract(1,"days"),selectedEndDay.value,'day') && i.end)
|
||||
|
||||
|
||||
|
||||
let weekFactor = 4.33
|
||||
let monthlyWorkingHours = itemInfo.value.weeklyWorkingHours * weekFactor
|
||||
|
||||
|
||||
//Eingreicht
|
||||
let sumWorkingMinutesEingereicht = 0
|
||||
times.filter(i => !i.approved).forEach(time => {
|
||||
const minutes = dayjs(time.end, "HH:mm:ss").diff(dayjs(time.start, "HH:mm:ss"),'minutes')
|
||||
sumWorkingMinutesEingereicht = sumWorkingMinutesEingereicht + minutes
|
||||
})
|
||||
|
||||
//Bestätigt
|
||||
let sumWorkingMinutesApproved = 0
|
||||
times.filter(i => i.approved).forEach(time => {
|
||||
const minutes = dayjs(time.end, "HH:mm:ss").diff(dayjs(time.start, "HH:mm:ss"),'minutes')
|
||||
sumWorkingMinutesApproved = sumWorkingMinutesApproved + minutes
|
||||
})
|
||||
//console.log(times.filter(i => i.approved).length)
|
||||
//console.log(sumWorkingMinutesApproved)
|
||||
|
||||
|
||||
//Saldo
|
||||
let saldo = (sumWorkingMinutesApproved / 60).toFixed(2) - monthlyWorkingHours
|
||||
let saldoInOfficial = ((sumWorkingMinutesApproved + sumWorkingMinutesEingereicht) / 60).toFixed(2) - monthlyWorkingHours
|
||||
|
||||
return {
|
||||
monthlyWorkingHours,
|
||||
sumWorkingMinutesEingereicht,
|
||||
sumWorkingMinutesApproved,
|
||||
saldo,
|
||||
saldoInOfficial
|
||||
}
|
||||
})
|
||||
|
||||
const getDuration = (time) => {
|
||||
const minutes = Math.floor(dayjs(time.end, "HH:mm:ss").diff(dayjs(time.start, "HH:mm:ss"),'minutes',true))
|
||||
const hours = Math.floor(minutes/60)
|
||||
return {
|
||||
//dezimal: dez,
|
||||
hours: hours,
|
||||
minutes: minutes,
|
||||
composed: `${hours}:${String(minutes % 60).padStart(2,"0")} h`
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
setupPage()
|
||||
changeRange()
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardNavbar
|
||||
:title="itemInfo.fullName"
|
||||
>
|
||||
</UDashboardNavbar>
|
||||
|
||||
<UTabs
|
||||
class="p-5"
|
||||
:items="[
|
||||
{
|
||||
label: 'Informationen'
|
||||
},{
|
||||
label: 'Logbuch'
|
||||
},{
|
||||
label: 'Zeiterfassung'
|
||||
},{
|
||||
label: 'Vertragsdaten'
|
||||
},{
|
||||
label: 'Dokumente'
|
||||
}
|
||||
]"
|
||||
>
|
||||
<template #item="{item}">
|
||||
<UCard class="mt-5">
|
||||
<div v-if="item.label === 'Informationen'">
|
||||
<Toolbar>
|
||||
<UButton
|
||||
@click="dataStore.updateItem('profiles',itemInfo)"
|
||||
>
|
||||
Speichern
|
||||
</UButton>
|
||||
</Toolbar>
|
||||
<InputGroup class="w-full">
|
||||
<UFormGroup
|
||||
label="Anrede"
|
||||
class="w-60"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.salutation"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Vorname"
|
||||
class="flex-auto"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.firstName"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Nachname"
|
||||
class="flex-auto"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.lastName"
|
||||
/>
|
||||
</UFormGroup>
|
||||
</InputGroup>
|
||||
<InputGroup class="w-full">
|
||||
<UFormGroup
|
||||
label="Mitarbeiternummer"
|
||||
class="w-60"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.employeeNumber"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="E-Mail"
|
||||
class="flex-auto"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.email"
|
||||
/>
|
||||
</UFormGroup>
|
||||
</InputGroup>
|
||||
</div>
|
||||
<div v-if="item.label === 'Logbuch'">
|
||||
<HistoryDisplay
|
||||
type="profile"
|
||||
v-if="itemInfo"
|
||||
:element-id="itemInfo.id"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="item.label === 'Zeiterfassung'">
|
||||
<Toolbar>
|
||||
<UFormGroup
|
||||
label="Vorlage:"
|
||||
>
|
||||
<USelectMenu
|
||||
:options="['Diese Woche', 'Dieser Monat', 'Dieses Jahr', 'Letzte Woche', 'Letzter Monat', 'Letztes Jahr']"
|
||||
v-model="selectedPresetRange"
|
||||
@change="changeRange"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup label="Start:" >
|
||||
<UPopover :popper="{ placement: 'bottom-start' }">
|
||||
<UButton
|
||||
icon="i-heroicons-calendar-days-20-solid"
|
||||
:label="selectedStartDay ? dayjs(selectedStartDay).format('DD.MM.YYYY') : 'Datum auswählen'"
|
||||
/>
|
||||
|
||||
<template #panel="{ close }">
|
||||
<LazyDatePicker v-model="selectedStartDay" @close="changeRange" />
|
||||
</template>
|
||||
</UPopover>
|
||||
</UFormGroup>
|
||||
<UFormGroup label="Ende:">
|
||||
<UPopover :popper="{ placement: 'bottom-start' }">
|
||||
<UButton
|
||||
icon="i-heroicons-calendar-days-20-solid"
|
||||
:label="selectedEndDay ? dayjs(selectedEndDay).format('DD.MM.YYYY') : 'Datum auswählen'"
|
||||
/>
|
||||
|
||||
<template #panel="{ close }">
|
||||
<LazyDatePicker v-model="selectedEndDay" @close="changeRange" />
|
||||
</template>
|
||||
</UPopover>
|
||||
</UFormGroup>
|
||||
</Toolbar>
|
||||
<div class="truncate">
|
||||
<p>Eingreicht: {{Math.floor(workingTimeInfo.sumWorkingMinutesEingereicht/60)}}:{{String(workingTimeInfo.sumWorkingMinutesEingereicht % 60).padStart(2,"0")}} h</p>
|
||||
<p>Bestätigt: {{Math.floor(workingTimeInfo.sumWorkingMinutesApproved/60)}}:{{String(workingTimeInfo.sumWorkingMinutesApproved % 60).padStart(2,"0")}} h</p>
|
||||
<p>Soll Stunden: {{workingTimeInfo.monthlyWorkingHours}} h</p>
|
||||
<p>Abwesend: </p>
|
||||
<p>Ausgleich:</p>
|
||||
<p>Inoffizielles Saldo: {{workingTimeInfo.saldoInOfficial}} h</p>
|
||||
<p>Saldo: {{workingTimeInfo.saldo}} h</p>
|
||||
</div>
|
||||
|
||||
<UDivider class="my-3"/>
|
||||
|
||||
<UTable
|
||||
:rows="dataStore.getWorkingTimesByProfileId(itemInfo.id)"
|
||||
class="h-80"
|
||||
:columns="[
|
||||
{
|
||||
key: 'state',
|
||||
label: 'Status'
|
||||
}, {
|
||||
key: 'date',
|
||||
label: 'Datum'
|
||||
}, {
|
||||
key: 'start',
|
||||
label: 'Start'
|
||||
}, {
|
||||
key: 'end',
|
||||
label: 'Ende'
|
||||
}, {
|
||||
key: 'duration',
|
||||
label: 'Dauer'
|
||||
}, {
|
||||
key: 'notes',
|
||||
label: 'Notizen'
|
||||
}
|
||||
]"
|
||||
>
|
||||
<template #profile-data="{row}">
|
||||
{{dataStore.profiles.find(profile => profile.id === row.profile) ? dataStore.profiles.find(profile => profile.id === row.profile).fullName : row.profile }}
|
||||
</template>
|
||||
<template #date-data="{row}">
|
||||
{{dayjs(row.date).format("DD.MM.YYYY")}}
|
||||
</template>
|
||||
|
||||
<template #start-data="{row}">
|
||||
{{dayjs(row.start, "HH:mm:ss").format("HH:mm")}} Uhr
|
||||
</template>
|
||||
<template #end-data="{row}">
|
||||
{{dayjs(row.end, "HH:mm:ss").format("HH:mm")}} Uhr
|
||||
</template>
|
||||
<template #duration-data="{row}">
|
||||
{{getDuration(row).composed}}
|
||||
</template>
|
||||
</UTable>
|
||||
|
||||
|
||||
</div>
|
||||
<div v-if="item.label === 'Vertragsdaten'">
|
||||
<Toolbar>
|
||||
<UButton
|
||||
@click="dataStore.updateItem('profiles',itemInfo)"
|
||||
>
|
||||
Speichern
|
||||
</UButton>
|
||||
</Toolbar>
|
||||
<InputGroup class="w-full">
|
||||
<UFormGroup
|
||||
label="Wöchentliche Arbeitszeit"
|
||||
class="flex-auto"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.weeklyWorkingHours"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Durchschnittliche Arbeitstage pro Woche"
|
||||
class="flex-auto"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.weeklyWorkingDays"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Urlaubstage"
|
||||
class="flex-auto"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.annualPaidLeaveDays"
|
||||
/>
|
||||
</UFormGroup>
|
||||
</InputGroup>
|
||||
</div>
|
||||
</UCard>
|
||||
</template>
|
||||
</UTabs>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
498
pages/projects/[mode]/[[id]].vue
Normal file
498
pages/projects/[mode]/[[id]].vue
Normal file
@@ -0,0 +1,498 @@
|
||||
<script setup>
|
||||
import dayjs from "dayjs";
|
||||
import HistoryDisplay from "~/components/HistoryDisplay.vue";
|
||||
import DocumentUpload from "~/components/DocumentUpload.vue";
|
||||
import DocumentList from "~/components/DocumentList.vue";
|
||||
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const supabase = useSupabaseClient()
|
||||
const user = useSupabaseUser()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const toast = useToast()
|
||||
const id = ref(route.params.id ? route.params.id : null )
|
||||
|
||||
let currentItem = ref(null)
|
||||
|
||||
const tabItems = [
|
||||
{
|
||||
key: "information",
|
||||
label: "Informationen"
|
||||
},
|
||||
{
|
||||
key: "historyDisplay",
|
||||
label: "Logbuch"
|
||||
},
|
||||
{
|
||||
key: "phases",
|
||||
label: "Phasen"
|
||||
},{
|
||||
key: "tasks",
|
||||
label: "Aufgaben"
|
||||
},/*{
|
||||
key: "forms",
|
||||
label: "Formulare"
|
||||
},*/{
|
||||
key: "documents",
|
||||
label: "Dokumente"
|
||||
},{
|
||||
key: "timetracking",
|
||||
label: "Zeiterfassung"
|
||||
},{
|
||||
key: "events",
|
||||
label: "Termine"
|
||||
}/*,{
|
||||
key: "material",
|
||||
label: "Material"
|
||||
}*/
|
||||
]
|
||||
|
||||
const timeTableRows = [
|
||||
{
|
||||
key:"user",
|
||||
label: "Benutzer"
|
||||
},{
|
||||
key:"start",
|
||||
label: "Start"
|
||||
},{
|
||||
key:"end",
|
||||
label:"Ende"
|
||||
},{
|
||||
key:"duration",
|
||||
label: "Dauer"
|
||||
},{
|
||||
key: "type",
|
||||
label: "Typ"
|
||||
},{
|
||||
key:"notes",
|
||||
label: "Notizen"
|
||||
},
|
||||
]
|
||||
|
||||
|
||||
|
||||
//Working
|
||||
const mode = ref(route.params.mode || "show")
|
||||
const itemInfo = ref({
|
||||
name: "",
|
||||
customer: 0,
|
||||
users: [dataStore.activeProfile.id]
|
||||
})
|
||||
const tags = dataStore.getDocumentTags
|
||||
|
||||
|
||||
//Functions
|
||||
const setupPage = () => {
|
||||
if(mode.value === "show" || mode.value === "edit"){
|
||||
currentItem.value = dataStore.getProjectById(Number(useRoute().params.id))
|
||||
}
|
||||
|
||||
if(mode.value === "edit") itemInfo.value = currentItem.value
|
||||
|
||||
if(mode.value === "create") {
|
||||
let query = route.query
|
||||
|
||||
if(query.customer) itemInfo.value.customer = Number(query.customer)
|
||||
|
||||
if(query.plant) {
|
||||
itemInfo.value.plant = Number(query.plant)
|
||||
itemInfo.value.customer = dataStore.getPlantById(itemInfo.value.plant).customer
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const cancelEditorCreate = () => {
|
||||
if(currentItem.value) {
|
||||
router.push(`/projects/show/${currentItem.value.id}`)
|
||||
} else {
|
||||
router.push(`/projects/`)
|
||||
}
|
||||
}
|
||||
|
||||
const projectHours = () => {
|
||||
let hours = 0
|
||||
dataStore.getTimesByProjectId(currentItem.value.id).forEach(item => {
|
||||
hours += Number(dayjs(item.end).diff(item.start,'hour',true).toFixed(2))
|
||||
})
|
||||
|
||||
return hours.toFixed(2)
|
||||
}
|
||||
|
||||
|
||||
/*const phasesTemplate = ref([{
|
||||
label: 'Erstkontakt',
|
||||
icon: 'i-heroicons-clipboard-document',
|
||||
active: true
|
||||
}, {
|
||||
label: 'Überprüfung Vor Ort',
|
||||
icon: 'i-heroicons-magnifying-glass'
|
||||
}, {
|
||||
label: 'Angebotserstellung',
|
||||
icon: 'i-heroicons-document-text'
|
||||
}, {
|
||||
label: 'Auftragsvergabe',
|
||||
icon: 'i-heroicons-document-check'
|
||||
}, {
|
||||
label: 'Umsetzung',
|
||||
icon: 'i-heroicons-wrench-screwdriver'
|
||||
},{
|
||||
label: 'Rechnungsstellung',
|
||||
icon: 'i-heroicons-document-text'
|
||||
}, {
|
||||
label: 'Abgeschlossen',
|
||||
icon: 'i-heroicons-check'
|
||||
}])*/
|
||||
const phasesTemplateSelected = ref(dataStore.phasesTemplates[0].id)
|
||||
const changeActivePhase = (phase) => {
|
||||
currentItem.value.phases = currentItem.value.phases.map(p => {
|
||||
if(p.active) delete p.active
|
||||
|
||||
if(p.label === phase.label) p.active = true
|
||||
|
||||
return p
|
||||
})
|
||||
|
||||
savePhases()
|
||||
|
||||
}
|
||||
|
||||
const savePhases = () => {
|
||||
dataStore.updateItem("projects", currentItem.value)
|
||||
}
|
||||
|
||||
const loadPhases = async () => {
|
||||
currentItem.value.phases = dataStore.phasesTemplates.find(i => i.id === phasesTemplateSelected.value).initialPhases
|
||||
await dataStore.updateItem("projects", currentItem.value)
|
||||
}
|
||||
|
||||
setupPage()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardNavbar :title="currentItem ? currentItem.name : (mode === 'create' ? 'Projekt erstellen' : 'Projekt bearbeiten')">
|
||||
<template #right>
|
||||
<UButton
|
||||
v-if="mode === 'edit'"
|
||||
@click="dataStore.updateItem('projects',itemInfo)"
|
||||
>
|
||||
Speichern
|
||||
</UButton>
|
||||
<UButton
|
||||
v-else-if="mode === 'create'"
|
||||
@click="dataStore.createNewItem('projects',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(`/projects/edit/${currentItem.id}`)"
|
||||
>
|
||||
Bearbeiten
|
||||
</UButton>
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
<UTabs
|
||||
:items="tabItems"
|
||||
v-if="currentItem && mode == 'show'"
|
||||
class="p-5"
|
||||
>
|
||||
<template #item="{ item }">
|
||||
<UCard class="mt-5">
|
||||
<div v-if="item.key === 'information'">
|
||||
|
||||
|
||||
|
||||
<div class="text-wrap">
|
||||
<p>Kunde: <nuxt-link :to="`/customers/show/${currentItem.customer}`">{{dataStore.getCustomerById(currentItem.customer).name}}</nuxt-link></p>
|
||||
<p>Objekt: <nuxt-link :to="`/plants/show/${currentItem.plant}`">{{currentItem.plant ? dataStore.getPlantById(currentItem.plant).name : ""}}</nuxt-link></p>
|
||||
<p class="">Notizen: {{currentItem.notes}}</p>
|
||||
</div>
|
||||
|
||||
<UDivider class="my-3"/>
|
||||
<h1 class="font-bold text-lg my-3">Beteiligte Benutzer:</h1>
|
||||
<UAlert
|
||||
v-for="projectUser in currentItem.users"
|
||||
:avatar="{ alt: dataStore.getProfileById(projectUser).fullName }"
|
||||
:title="dataStore.getProfileById(projectUser).fullName"
|
||||
class="mb-3"
|
||||
|
||||
/>
|
||||
</div>
|
||||
<div v-else-if="item.key === 'historyDisplay'">
|
||||
<HistoryDisplay
|
||||
type="project"
|
||||
v-if="currentItem"
|
||||
:element-id="currentItem.id"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="item.key === 'phases'" class="space-y-3">
|
||||
<UFormGroup
|
||||
label="Vorlage laden"
|
||||
v-if="currentItem.phases.length === 0"
|
||||
>
|
||||
<InputGroup>
|
||||
<USelectMenu
|
||||
:options="dataStore.phasesTemplates"
|
||||
option-attribute="name"
|
||||
value-attribute="id"
|
||||
v-model="phasesTemplateSelected"
|
||||
class="flex-auto"
|
||||
>
|
||||
|
||||
</USelectMenu>
|
||||
<UButton
|
||||
@click="loadPhases"
|
||||
>
|
||||
Vorlage laden
|
||||
</UButton>
|
||||
</InputGroup>
|
||||
</UFormGroup>
|
||||
|
||||
<UAccordion
|
||||
:items="currentItem.phases"
|
||||
>
|
||||
<template #default="{item,index,open}">
|
||||
<UButton
|
||||
variant="ghost"
|
||||
:color="item.active ? 'primary' : 'white'"
|
||||
class="mb-1"
|
||||
>
|
||||
<template #leading>
|
||||
<div class="w-6 h-6 flex items-center justify-center -my-1">
|
||||
<UIcon :name="item.icon" class="w-4 h-4 " />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<span class="truncate"> {{item.label}}</span>
|
||||
|
||||
<template #trailing>
|
||||
<UIcon
|
||||
name="i-heroicons-chevron-right-20-solid"
|
||||
class="w-5 h-5 ms-auto transform transition-transform duration-200"
|
||||
:class="[open && 'rotate-90']"
|
||||
/>
|
||||
</template>
|
||||
|
||||
</UButton>
|
||||
</template>
|
||||
<template #item="{item}">
|
||||
<InputGroup>
|
||||
<UButton
|
||||
v-if="!item.active"
|
||||
@click="changeActivePhase(item)"
|
||||
>
|
||||
Phase aktivieren
|
||||
</UButton>
|
||||
</InputGroup>
|
||||
</template>
|
||||
</UAccordion>
|
||||
</div>
|
||||
<div v-if="item.key === 'tasks'" class="space-y-3">
|
||||
<Toolbar>
|
||||
<UButton
|
||||
@click="router.push(`/tasks/create?project=${currentItem.id}`)"
|
||||
>
|
||||
+ Aufgabe
|
||||
</UButton>
|
||||
</Toolbar>
|
||||
|
||||
<UTable
|
||||
:rows="dataStore.getTasksByProjectId(currentItem.id)"
|
||||
:columns="[{key: 'name',label: 'Name'},{key: 'categorie',label: 'Kategorie'},{key: 'user',label: 'Benutzer'}]"
|
||||
@select="(row) => router.push(`/tasks/show/${row.id}`)"
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Aufgaben' }"
|
||||
|
||||
>
|
||||
<template #user-data="{row}">
|
||||
{{dataStore.profiles.find(i => i.id === row.user) ? dataStore.profiles.find(i => i.id === row.user).fullName : ""}}
|
||||
</template>
|
||||
</UTable>
|
||||
|
||||
</div>
|
||||
<div v-else-if="item.key === 'documents'" class="space-y-3">
|
||||
<Toolbar>
|
||||
<DocumentUpload
|
||||
type="project"
|
||||
:element-id="currentItem.id"
|
||||
/>
|
||||
<UButton
|
||||
@click="router.push(`/createDocument/edit?project=${currentItem.id}&type=quotes&customer=${currentItem.customer}`)"
|
||||
>
|
||||
+ Angebot
|
||||
</UButton>
|
||||
<UButton
|
||||
@click="router.push(`/createDocument/edit?project=${currentItem.id}&type=invoices&customer=${currentItem.customer}`)"
|
||||
>
|
||||
+ Rechnung
|
||||
</UButton>
|
||||
</Toolbar>
|
||||
|
||||
<UTable
|
||||
:rows="dataStore.getCreatedDocumentsByProject(currentItem.id)"
|
||||
:columns="[
|
||||
{
|
||||
label: 'Typ',
|
||||
key: 'type'
|
||||
}, {
|
||||
label: 'Status',
|
||||
key: 'state'
|
||||
}, {
|
||||
label: 'Dokumentennummer',
|
||||
key: 'documentNumber'
|
||||
}, {
|
||||
label: 'Ansprechpartner',
|
||||
key: 'createdBy'
|
||||
}
|
||||
|
||||
]"
|
||||
@select="(row) => row.state === 'Entwurf' ? router.push(`/createDocument/edit/${row.id}`) : router.push(`/createDocument/show/${row.id}`)"
|
||||
>
|
||||
<template #type-data="{row}">
|
||||
<span v-if="row.type === 'invoices'">Rechnung</span>
|
||||
<span v-if="row.type === 'quotes'">Angebot</span>
|
||||
<span v-if="row.type === 'deliveryNotes'">Lieferschein</span>
|
||||
</template>
|
||||
<template #createdBy-data="{row}">
|
||||
{{dataStore.getProfileById(row.createdBy).fullName}}
|
||||
</template>
|
||||
</UTable>
|
||||
|
||||
<DocumentList :documents="dataStore.getDocumentsByProjectId(currentItem.id)"/>
|
||||
<!--
|
||||
{{dataStore.getDocumentsByProjectId(currentItem.id)}}
|
||||
-->
|
||||
|
||||
</div>
|
||||
|
||||
<div v-else-if="item.key === 'timetracking'" class="space-y-3">
|
||||
Projekt Zeit: {{String(projectHours()).replace(".",",")}} Stunden
|
||||
<UTable
|
||||
:rows="dataStore.getTimesByProjectId(currentItem.id)"
|
||||
:columns="timeTableRows"
|
||||
:empty-state="{ icon: 'i-heroicons-clock', label: 'Noch keine Zeiten in diesem Projekt' }"
|
||||
>
|
||||
<template #user-data="{row}">
|
||||
{{dataStore.profiles.find(profile => profile.id === row.user) ? dataStore.profiles.find(profile => profile.id === row.user).fullName : row.user }}
|
||||
</template>
|
||||
<template #duration-data="{row}">
|
||||
{{(row.start && row.end) ? `${String(dayjs(row.end).diff(row.start,'hour',true).toFixed(2)).replace(".",",")} h` : ""}}
|
||||
</template>
|
||||
<template #start-data="{row}">
|
||||
{{dayjs(row.start).format("DD.MM.YY HH:mm")}}
|
||||
</template>
|
||||
<template #end-data="{row}">
|
||||
{{dayjs(row.end).format("DD.MM.YY HH:mm")}}
|
||||
</template>
|
||||
|
||||
</UTable>
|
||||
</div>
|
||||
<div v-else-if="item.key === 'events'" class="space-y-3">
|
||||
{{dataStore.getEventsByProjectId(currentItem.id).length > 0 ? dataStore.getEventsByProjectId(currentItem.id) : "Keine Termine in für dieses Projekt"}}
|
||||
|
||||
</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="Kundennummer:"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="itemInfo.customer"
|
||||
:options="dataStore.customers"
|
||||
option-attribute="name"
|
||||
value-attribute="id"
|
||||
searchable
|
||||
:search-attributes="['name']"
|
||||
>
|
||||
<template #label>
|
||||
{{dataStore.getCustomerById(itemInfo.customer) ? dataStore.getCustomerById(itemInfo.customer).name : "Kunde auswählen"}}
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup
|
||||
label="Gewerk:"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="itemInfo.measure"
|
||||
:options="dataStore.getMeasures"
|
||||
option-attribute="name"
|
||||
value-attribute="short"
|
||||
searchable
|
||||
:search-attributes="['name']"
|
||||
>
|
||||
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup
|
||||
label="Objekt:"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="itemInfo.plant"
|
||||
:options="dataStore.plants"
|
||||
option-attribute="name"
|
||||
value-attribute="id"
|
||||
searchable
|
||||
:search-attributes="['name']"
|
||||
>
|
||||
<template #label>
|
||||
{{dataStore.getPlantById(itemInfo.plant) ? dataStore.getPlantById(itemInfo.plant).name : "Objekt auswählen"}}
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Beteiligte Benutzer:"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="itemInfo.users"
|
||||
:options="dataStore.profiles"
|
||||
option-attribute="fullName"
|
||||
value-attribute="id"
|
||||
searchable
|
||||
multiple
|
||||
:search-attributes="['fullName']"
|
||||
>
|
||||
<template #label>
|
||||
{{itemInfo.users.length > 0 ? itemInfo.users.map(i => dataStore.getProfileById(i).fullName).join(", ") : "Kein Benutzer ausgewählt"}}
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup
|
||||
label="Notizen:"
|
||||
>
|
||||
<UTextarea
|
||||
v-model="itemInfo.notes"
|
||||
/>
|
||||
</UFormGroup>
|
||||
</UForm>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
176
pages/projects/index.vue
Normal file
176
pages/projects/index.vue
Normal file
@@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<UDashboardNavbar title="Projekte" :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(`/projects/create`)">+ Projekt</UButton>
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
|
||||
<UDashboardToolbar>
|
||||
<template #left>
|
||||
|
||||
|
||||
<UCheckbox
|
||||
label="Abgeschlossene anzeigen"
|
||||
v-model="showFinished"
|
||||
/>
|
||||
</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(`/projects/show/${i.id}`) "
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Projekte anzuzeigen' }"
|
||||
>
|
||||
<template #phase-data="{row}">
|
||||
{{getActivePhaseLabel(row)}}
|
||||
</template>
|
||||
<template #customer-data="{row}">
|
||||
{{dataStore.getCustomerById(row.customer) ? dataStore.getCustomerById(row.customer).name : ""}}
|
||||
</template>
|
||||
<template #plant-data="{row}">
|
||||
{{dataStore.getPlantById(row.plant) ? dataStore.getPlantById(row.plant).name : ""}}
|
||||
</template>
|
||||
<template #users-data="{row}">
|
||||
{{row.users.map(i => dataStore.getProfileById(i).fullName).join(", ")}}
|
||||
</template>
|
||||
</UTable>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
defineShortcuts({
|
||||
'/': () => {
|
||||
//console.log(searchinput)
|
||||
//searchinput.value.focus()
|
||||
document.getElementById("searchinput").focus()
|
||||
},
|
||||
'+': () => {
|
||||
router.push("/projects/create")
|
||||
}
|
||||
})
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const router = useRouter()
|
||||
|
||||
const templateColumns = [
|
||||
{
|
||||
key: "phase",
|
||||
label: "Phase"
|
||||
},
|
||||
{
|
||||
key: "measure",
|
||||
label: "Gewerk"
|
||||
},{
|
||||
key: "name",
|
||||
label: "Name"
|
||||
},
|
||||
{
|
||||
key: "customer",
|
||||
label: "Kunde",
|
||||
sortable: true
|
||||
},/*
|
||||
{
|
||||
key: "notes",
|
||||
label: "Notizen",
|
||||
sortable: true
|
||||
},*/
|
||||
{
|
||||
key: "plant",
|
||||
label: "Objekt",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "users",
|
||||
label: "Benutzer",
|
||||
sortable: true
|
||||
}
|
||||
]
|
||||
const selectedColumns = ref(templateColumns)
|
||||
const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
|
||||
|
||||
|
||||
const getActivePhaseLabel = (item) => {
|
||||
if(item.phases) {
|
||||
if(item.phases.length > 0) {
|
||||
|
||||
let activePhase = item.phases.find(i => i.active)
|
||||
|
||||
if(activePhase) {
|
||||
return activePhase.label
|
||||
} else {
|
||||
return ""
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const searchString = ref('')
|
||||
const showFinished = ref(false)
|
||||
|
||||
const filteredRows = computed(() => {
|
||||
let items = dataStore.projects
|
||||
|
||||
items = items.map(item => {
|
||||
return {
|
||||
...item,
|
||||
phaseLabel: getActivePhaseLabel(item)
|
||||
}
|
||||
})
|
||||
|
||||
if(showFinished.value) {
|
||||
items = items.filter(i => i.phaseLabel === "Abgeschlossen")
|
||||
} else {
|
||||
items = items.filter(i => i.phaseLabel !== "Abgeschlossen")
|
||||
}
|
||||
|
||||
if(!searchString.value) {
|
||||
return items
|
||||
}
|
||||
|
||||
return items.filter(project => {
|
||||
return Object.values(project).some((value) => {
|
||||
return String(value).toLowerCase().includes(searchString.value.toLowerCase())
|
||||
})
|
||||
})
|
||||
})
|
||||
</script>
|
||||
460
pages/receipts/incomingInvoices/[mode]/[[id]].vue
Normal file
460
pages/receipts/incomingInvoices/[mode]/[[id]].vue
Normal file
@@ -0,0 +1,460 @@
|
||||
<script setup>
|
||||
import InputGroup from "~/components/InputGroup.vue";
|
||||
import dayjs from "dayjs";
|
||||
import HistoryDisplay from "~/components/HistoryDisplay.vue";
|
||||
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const supabase = useSupabaseClient()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const toast = useToast()
|
||||
|
||||
const {vendors} = storeToRefs(useDataStore())
|
||||
const {fetchVendorInvoices} = useDataStore()
|
||||
|
||||
let currentVendorInvoice = ref(null)
|
||||
//let currentDocument = ref(null)
|
||||
//Working
|
||||
const mode = ref(route.params.mode || "show")
|
||||
const useNetMode = ref(true)
|
||||
|
||||
|
||||
|
||||
|
||||
//Functions
|
||||
const setupPage = async () => {
|
||||
if(mode.value === "show" || mode.value === "edit"){
|
||||
currentVendorInvoice.value = await dataStore.getIncomingInvoiceById(Number(useRoute().params.id))
|
||||
//currentDocument.value = await dataStore.getDocumentById(currentVendorInvoice.value.document)
|
||||
}
|
||||
|
||||
if(mode.value === "edit") itemInfo.value = currentVendorInvoice.value
|
||||
}
|
||||
|
||||
const currentDocument = computed(() => {
|
||||
if(currentVendorInvoice.value) {
|
||||
return dataStore.getDocumentById(currentVendorInvoice.value.document)
|
||||
|
||||
} else {
|
||||
return null
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
const itemInfo = ref({
|
||||
vendor: 0,
|
||||
expense: true,
|
||||
reference: "",
|
||||
date: null,
|
||||
dueDate: null,
|
||||
paymentType: "",
|
||||
description: "",
|
||||
state: "Entwurf",
|
||||
accounts: [
|
||||
{
|
||||
account: null,
|
||||
amountNet: null,
|
||||
amountTax: null,
|
||||
taxType: null,
|
||||
costCentre: null
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
const taxOptions = ref([
|
||||
{
|
||||
label: "19% USt",
|
||||
percentage: 19,
|
||||
key: "19"
|
||||
},{
|
||||
label: "7% USt",
|
||||
percentage: 7,
|
||||
key: "7"
|
||||
},{
|
||||
label: "Innergemeintschaftlicher Erwerb 19%",
|
||||
percentage: 0,
|
||||
key: "19I"
|
||||
},{
|
||||
label: "Innergemeintschaftlicher Erwerb 7%",
|
||||
percentage: 0,
|
||||
key: "7I"
|
||||
},{
|
||||
label: "§13b UStG",
|
||||
percentage: 0,
|
||||
key: "13B"
|
||||
},{
|
||||
label: "Keine USt",
|
||||
percentage: 0,
|
||||
key: "null"
|
||||
},
|
||||
])
|
||||
|
||||
|
||||
const totalCalculated = computed(() => {
|
||||
let totalNet = 0
|
||||
let totalAmount19Tax = 0
|
||||
let totalAmount7Tax = 0
|
||||
let totalAmount0Tax = 0
|
||||
let totalGross = 0
|
||||
|
||||
itemInfo.value.accounts.forEach(account => {
|
||||
if(account.amountNet) totalNet += account.amountNet
|
||||
|
||||
if(account.taxType === 19 && account.amountTax) {
|
||||
totalAmount19Tax += account.amountTax
|
||||
}
|
||||
})
|
||||
|
||||
totalGross = Number(totalNet + totalAmount19Tax)
|
||||
|
||||
return {
|
||||
totalNet,
|
||||
totalAmount19Tax,
|
||||
totalGross
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
const setState = async (newState) => {
|
||||
if(mode.value === 'show') {
|
||||
await dataStore.updateItem('incominginvoices',{...currentVendorInvoice.value, state: newState})
|
||||
} else if(mode.value === 'edit') {
|
||||
await dataStore.updateItem('incominginvoices',{...itemInfo.value, state: newState})
|
||||
}
|
||||
await router.push("/receipts")
|
||||
}
|
||||
|
||||
|
||||
|
||||
setupPage()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="main">
|
||||
<object
|
||||
v-if="currentDocument ? currentDocument.url : false"
|
||||
:data="currentDocument.url + '#toolbar=0&navpanes=0&scrollbar=0&statusbar=0&messages=0&scrollbar=0'"
|
||||
type="application/pdf"
|
||||
class="h-100 w-full mx-5"
|
||||
/>
|
||||
<div class="w-4/5">
|
||||
<InputGroup class="mt-3" v-if="currentVendorInvoice">
|
||||
<UButton
|
||||
@click="dataStore.updateItem('incominginvoices',itemInfo)"
|
||||
v-if="mode === 'edit'"
|
||||
>
|
||||
Speichern
|
||||
</UButton>
|
||||
<UButton
|
||||
:disabled="currentVendorInvoice.state !== 'Entwurf'"
|
||||
@click="router.push(`/incominginvoices/edit/${currentVendorInvoice.id}`)"
|
||||
v-if="mode !== 'edit'"
|
||||
>
|
||||
Bearbeiten
|
||||
</UButton>
|
||||
<UButton
|
||||
@click="setState('Entwurf')"
|
||||
v-if="currentVendorInvoice.state !== 'Entwurf'"
|
||||
color="cyan"
|
||||
>
|
||||
Status zu Entwurf
|
||||
</UButton>
|
||||
<UButton
|
||||
@click="setState('Gebucht')"
|
||||
v-if="currentVendorInvoice.state !== 'Gebucht'"
|
||||
color="rose"
|
||||
>
|
||||
Status auf Gebucht
|
||||
</UButton>
|
||||
</InputGroup>
|
||||
|
||||
<div v-if="mode === 'show'">
|
||||
{{currentVendorInvoice}}
|
||||
</div>
|
||||
|
||||
<div v-else-if="mode === 'edit'" class=" scrollContainer">
|
||||
<InputGroup class="my-3">
|
||||
<UButton
|
||||
:variant="itemInfo.expense ? 'solid' : 'outline'"
|
||||
@click="itemInfo.expense = true"
|
||||
>
|
||||
Ausgabe
|
||||
</UButton>
|
||||
<UButton
|
||||
:variant="!itemInfo.expense ? 'solid' : 'outline'"
|
||||
@click="itemInfo.expense = false"
|
||||
>
|
||||
Einnahme
|
||||
</UButton>
|
||||
</InputGroup>
|
||||
|
||||
<UFormGroup label="Lieferant:" required>
|
||||
<InputGroup>
|
||||
<USelectMenu
|
||||
v-model="itemInfo.vendor"
|
||||
:options="dataStore.vendors"
|
||||
option-attribute="name"
|
||||
value-attribute="id"
|
||||
searchable
|
||||
:search-attributes="['name','vendorNumber']"
|
||||
class="flex-auto"
|
||||
>
|
||||
<template #label>
|
||||
{{dataStore.vendors.find(vendor => vendor.id === itemInfo.vendor) ? dataStore.vendors.find(vendor => vendor.id === itemInfo.vendor).name : 'Lieferant auswählen'}}
|
||||
</template>
|
||||
</USelectMenu>
|
||||
<UButton
|
||||
@click="router.push('/vendors/create')"
|
||||
>
|
||||
+ Lieferant
|
||||
</UButton>
|
||||
</InputGroup>
|
||||
|
||||
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup
|
||||
class="mt-3"
|
||||
label="Rechnungsreferenz:"
|
||||
required
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.reference"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<InputGroup class="mt-3" gap="2">
|
||||
<UFormGroup label="Rechnungsdatum:" required>
|
||||
<UPopover :popper="{ placement: 'bottom-start' }">
|
||||
<UButton icon="i-heroicons-calendar-days-20-solid" :label="itemInfo.date ? dayjs(itemInfo.date).format('DD.MM.YYYY') : 'Datum auswählen'" />
|
||||
|
||||
<template #panel="{ close }">
|
||||
<LazyDatePicker v-model="itemInfo.date" @close="close" />
|
||||
</template>
|
||||
</UPopover>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup label="Fälligkeitsdatum:" required>
|
||||
<UPopover :popper="{ placement: 'bottom-start' }">
|
||||
<UButton icon="i-heroicons-calendar-days-20-solid" :label="itemInfo.dueDate ? dayjs(itemInfo.dueDate).format('DD.MM.YYYY') : 'Datum auswählen'" />
|
||||
|
||||
<template #panel="{ close }">
|
||||
<LazyDatePicker v-model="itemInfo.dueDate" @close="close" />
|
||||
</template>
|
||||
</UPopover>
|
||||
</UFormGroup>
|
||||
</InputGroup>
|
||||
|
||||
|
||||
|
||||
<UFormGroup label="Beschreibung:" required>
|
||||
<UTextarea
|
||||
v-model="itemInfo.description"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<InputGroup class="my-3">
|
||||
Brutto
|
||||
<UToggle
|
||||
v-model="useNetMode"
|
||||
@update:model-value="itemInfo.accounts = [{account: null,amountNet: null,amountTax: null,taxType: null}]"
|
||||
/>
|
||||
Netto
|
||||
</InputGroup>
|
||||
|
||||
<table v-if="itemInfo.accounts.length > 1">
|
||||
<tr>
|
||||
<td>Gesamt exkl. Steuer: </td>
|
||||
<td class="text-right">{{totalCalculated.totalNet.toFixed(2)}} €</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>19% Steuer: </td>
|
||||
<td class="text-right">{{totalCalculated.totalAmount19Tax.toFixed(2)}} €</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gesamt inkl. Steuer: </td>
|
||||
<td class="text-right">{{totalCalculated.totalGross.toFixed(2)}} €</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div
|
||||
class="my-3"
|
||||
v-for="(item,index) in itemInfo.accounts"
|
||||
>
|
||||
|
||||
<UFormGroup
|
||||
label="Kategorie"
|
||||
class=" mb-3"
|
||||
>
|
||||
<USelectMenu
|
||||
:options="dataStore.accounts"
|
||||
option-attribute="label"
|
||||
value-attribute="id"
|
||||
searchable
|
||||
:search-attributes="['label']"
|
||||
searchable-placeholder="Suche..."
|
||||
v-model="item.account"
|
||||
>
|
||||
<template #label>
|
||||
{{dataStore.accounts.find(account => account.id === item.account) ? dataStore.accounts.find(account => account.id === item.account).label : "Keine Kategorie ausgewählt" }}
|
||||
</template>
|
||||
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Kostenstelle"
|
||||
class=" mb-3"
|
||||
>
|
||||
<USelectMenu
|
||||
:options="dataStore.getCostCentresComposed"
|
||||
option-attribute="label"
|
||||
value-attribute="id"
|
||||
searchable
|
||||
:search-attributes="['label']"
|
||||
searchable-placeholder="Suche..."
|
||||
v-model="item.costCentre"
|
||||
>
|
||||
<template #label>
|
||||
{{dataStore.getCostCentresComposed.find(account => account.id === item.costCentre) ? dataStore.getCostCentresComposed.find(account => account.id === item.costCentre).label : "Keine Kostenstelle ausgewählt" }}
|
||||
</template>
|
||||
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
|
||||
|
||||
|
||||
<InputGroup>
|
||||
<UFormGroup
|
||||
label="Umsatzsteuer"
|
||||
class="w-32"
|
||||
:help="`Betrag: ${item.amountTax ? String(item.amountTax).replace('.',',') : '0,00'} €`"
|
||||
>
|
||||
<USelectMenu
|
||||
:options="taxOptions"
|
||||
v-model="item.taxType"
|
||||
value-attribute="key"
|
||||
option-attribute="label"
|
||||
@change="item.amountTax = Number(((item.amountNet ? item.amountNet : 0) * (Number(taxOptions.find(i => i.key === item.taxType).percentage)/100)).toFixed(2))"
|
||||
>
|
||||
<template #label>
|
||||
<span class="truncate">{{taxOptions.find(i => i.key === item.taxType) ? taxOptions.find(i => i.key === item.taxType).label : ""}}</span>
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
v-if="useNetMode"
|
||||
label="Gesamtbetrag exkl. Steuer in EUR"
|
||||
class="flex-auto"
|
||||
:help="item.taxType !== null ? `Betrag inkl. Steuern: ${String(Number(item.amountNet + item.amountTax).toFixed(2)).replace('.',',')} €` : 'Zuerst Steuertyp festlegen' "
|
||||
|
||||
>
|
||||
<UInput
|
||||
type="number"
|
||||
step="0.01"
|
||||
v-model="item.amountNet"
|
||||
:disabled="item.taxType === null"
|
||||
@keyup="item.amountTax = Number((item.amountNet * (Number(item.taxType)/100)).toFixed(2))"
|
||||
>
|
||||
<template #trailing>
|
||||
<span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
|
||||
</template>
|
||||
</UInput>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
v-else
|
||||
label="Gesamtbetrag inkl. Steuer in EUR"
|
||||
class="flex-auto"
|
||||
:help="item.taxType !== null ? `Betrag exkl. Steuern: ${item.amountNet ? String(item.amountNet.toFixed(2)).replace('.',',') : '0,00'} €` : 'Zuerst Steuertyp festlegen' "
|
||||
|
||||
>
|
||||
<UInput
|
||||
type="number"
|
||||
step="0.01"
|
||||
:disabled="item.taxType === null"
|
||||
v-model="item.amountGross"
|
||||
@keyup="item.amountNet = Number((item.amountGross / (1 + Number(item.taxType)/100)).toFixed(2)),
|
||||
item.amountTax = Number((item.amountGross - item.amountNet).toFixed(2))"
|
||||
>
|
||||
<template #trailing>
|
||||
<span class="text-gray-500 dark:text-gray-400 text-xs">EUR</span>
|
||||
</template>
|
||||
</UInput>
|
||||
|
||||
</UFormGroup>
|
||||
|
||||
|
||||
</InputGroup>
|
||||
|
||||
|
||||
<UButton
|
||||
class="mt-3"
|
||||
@click="itemInfo.accounts = [...itemInfo.accounts.slice(0,index+1),{account:null, amountNet: null, amountTax:null, taxType: null} , ...itemInfo.accounts.slice(index+1)]"
|
||||
>
|
||||
Position hinzufügen
|
||||
</UButton>
|
||||
<UButton
|
||||
v-if="index !== 0"
|
||||
class="mt-3"
|
||||
variant="ghost"
|
||||
color="rose"
|
||||
@click="itemInfo.accounts = itemInfo.accounts.filter((account,itemIndex) => itemIndex !== index)"
|
||||
>
|
||||
Position entfernen
|
||||
</UButton>
|
||||
|
||||
</div>
|
||||
<HistoryDisplay
|
||||
type="incomingInvoice"
|
||||
v-if="currentVendorInvoice"
|
||||
:element-id="currentVendorInvoice.id"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
#main {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 85vh;
|
||||
}
|
||||
|
||||
.previewDoc {
|
||||
min-width: 50vw;
|
||||
min-height: 80vh;
|
||||
}
|
||||
|
||||
.previewDoc object {
|
||||
width: 90%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.scrollContainer {
|
||||
overflow-y: scroll;
|
||||
height: 75vh;
|
||||
margin-top: 1em;
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
|
||||
.scrollContainer::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.lineItemRow {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
</style>
|
||||
285
pages/receipts/index.vue
Normal file
285
pages/receipts/index.vue
Normal file
@@ -0,0 +1,285 @@
|
||||
<template>
|
||||
<UDashboardNavbar>
|
||||
<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(`/createDocument/edit?type=quotes`)"
|
||||
>
|
||||
+ Angebot
|
||||
</UButton>
|
||||
<UButton
|
||||
@click="router.push(`/createDocument/edit?type=invoices`)"
|
||||
>
|
||||
+ Rechnung
|
||||
</UButton>
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
<UDashboardToolbar>
|
||||
<template #left>
|
||||
<UCheckbox
|
||||
v-model="showDrafts"
|
||||
label="Entwürfe Anzeigen"
|
||||
class="my-auto mr-3"
|
||||
/>
|
||||
<USelectMenu
|
||||
v-model="selectedTypes"
|
||||
icon="i-heroicons-adjustments-horizontal-solid"
|
||||
:options="templateTypes"
|
||||
multiple
|
||||
class="hidden lg:block"
|
||||
by="key"
|
||||
>
|
||||
<template #label>
|
||||
Typ
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</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="selectItem"
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Belege anzuzeigen' }"
|
||||
>
|
||||
<template #type-data="{row}">
|
||||
<span v-if="row.type === 'incomingInvoice'">Eingangsrechnung</span>
|
||||
<span v-else>{{dataStore.documentTypesForCreation[row.type].labelSingle}}</span>
|
||||
</template>
|
||||
<template #state-data="{row}">
|
||||
<span
|
||||
v-if="row.state === 'Entwurf'"
|
||||
class="text-rose-500"
|
||||
>
|
||||
{{row.state}}
|
||||
</span>
|
||||
<span
|
||||
v-if="row.state === 'Gebucht'"
|
||||
class="text-cyan-500"
|
||||
>
|
||||
{{row.state}}
|
||||
</span>
|
||||
<span
|
||||
v-if="row.state === 'Abgeschlossen'"
|
||||
class="text-primary-500"
|
||||
>
|
||||
{{row.state}}
|
||||
</span>
|
||||
</template>
|
||||
<template #partner-data="{row}">
|
||||
<span v-if="row.customer">{{dataStore.getCustomerById(row.customer) ? dataStore.getCustomerById(row.customer).name : ''}}</span>
|
||||
<span v-else-if="row.vendor">{{dataStore.getVendorById(row.vendor) ? dataStore.getVendorById(row.vendor).name : ''}}</span>
|
||||
|
||||
</template>
|
||||
<template #reference-data="{row}">
|
||||
<span v-if="row.type === 'incomingInvoice'">{{row.reference}}</span>
|
||||
<span v-else>{{row.documentNumber}}</span>
|
||||
</template>
|
||||
<template #date-data="{row}">
|
||||
<span v-if="row.date">{{row.date ? dayjs(row.date).format("DD.MM.YY") : ''}}</span>
|
||||
<span v-if="row.documentDate">{{row.documentDate ? dayjs(row.documentDate).format("DD.MM.YY") : ''}}</span>
|
||||
</template>
|
||||
<template #dueDate-data="{row}">
|
||||
<span :class="dayjs(row.dueDate).diff(dayjs()) <= 0 ? ['text-rose-500'] : '' ">{{row.dueDate ? dayjs(row.dueDate).format("DD.MM.YY") : ''}}</span>
|
||||
</template>
|
||||
<template #paid-data="{row}">
|
||||
<span v-if="row.paid" class="text-primary-500">Bezahlt</span>
|
||||
<span v-if="!row.paid" :class="dayjs(row.dueDate).diff(dayjs()) <= 0 ? ['text-rose-500'] : ['text-cyan-500'] ">Offen</span>
|
||||
</template>
|
||||
<template #amount-data="{row}">
|
||||
<div
|
||||
class="text-right font-bold"
|
||||
v-if="row.type === 'incomingInvoice'"
|
||||
>
|
||||
{{getRowAmount(row) === 0 ? '' : `${String(getRowAmount(row).toFixed(2)).replace('.',',')} €`}}
|
||||
</div>
|
||||
<div v-else class="text-right">
|
||||
{{calculateDocSum(row.rows)}} €
|
||||
</div>
|
||||
</template>
|
||||
</UTable>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import dayjs from "dayjs";
|
||||
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
defineShortcuts({
|
||||
'/': () => {
|
||||
//console.log(searchinput)
|
||||
//searchinput.value.focus()
|
||||
document.getElementById("searchinput").focus()
|
||||
}
|
||||
})
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const router = useRouter()
|
||||
|
||||
const templateColumns = [
|
||||
{
|
||||
key: 'type',
|
||||
label: "Typ",
|
||||
sortable: true
|
||||
},{
|
||||
key: 'state',
|
||||
label: "Status.",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "amount",
|
||||
label: "Betrag",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: 'partner',
|
||||
label: "Kunde / Lieferant",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "reference",
|
||||
label: "Referenz",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "date",
|
||||
label: "Datum",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "paid",
|
||||
label: "Bezahlt:",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "dueDate",
|
||||
label: "Fällig:",
|
||||
sortable: true
|
||||
},
|
||||
]
|
||||
const selectedColumns = ref(templateColumns)
|
||||
const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
|
||||
|
||||
const templateTypes = [
|
||||
{
|
||||
key: "invoices",
|
||||
label: "Rechnungen"
|
||||
}, {
|
||||
key: "quotes",
|
||||
label: "Angebote"
|
||||
}, {
|
||||
key: "deliveryNotes",
|
||||
label: "Lieferscheine"
|
||||
}
|
||||
]
|
||||
const selectedTypes = ref(templateTypes)
|
||||
const types = computed(() => templateTypes.filter((type) => selectedTypes.value.includes(type)))
|
||||
|
||||
const selectItem = (item) => {
|
||||
console.log(item)
|
||||
|
||||
if(item.type === "incomingInvoice"){
|
||||
if(item.state === "Entwurf") {
|
||||
router.push(`/receipts/incominginvoices/edit/${item.id} `)
|
||||
} else if(item.state === "Gebucht") {
|
||||
router.push(`/receipts/incominginvoices/show/${item.id}`)
|
||||
}
|
||||
} else {
|
||||
if(item.state === "Entwurf"){
|
||||
router.push(`/createDocument/edit/${item.id}`)
|
||||
} else if(item.state !== "Entwurf") {
|
||||
router.push(`/createDocument/show/${item.id}`)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
const getRowAmount = (row) => {
|
||||
let amount = 0
|
||||
|
||||
row.accounts.forEach(account => {
|
||||
amount += account.amountNet
|
||||
amount += account.amountTax
|
||||
})
|
||||
|
||||
return amount
|
||||
}
|
||||
|
||||
|
||||
const searchString = ref('')
|
||||
const showDrafts = ref(false)
|
||||
const filteredRows = computed(() => {
|
||||
let items = [...dataStore.incominginvoices.map(i => {return {...i, type: "incomingInvoice"}}),...dataStore.createddocuments]
|
||||
|
||||
items = items.filter(i => types.value.find(x => x.key === i.type))
|
||||
|
||||
if(showDrafts.value === true) {
|
||||
items = items.filter(i => i.state === "Entwurf")
|
||||
} else {
|
||||
items = items.filter(i => i.state !== "Entwurf")
|
||||
}
|
||||
|
||||
|
||||
if(!searchString.value) {
|
||||
return items
|
||||
}
|
||||
|
||||
return items.filter(item => {
|
||||
return Object.values(item).some((value) => {
|
||||
return String(value).toLowerCase().includes(searchString.value.toLowerCase())
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
const calculateDocSum = (rows) => {
|
||||
let sum = 0
|
||||
|
||||
rows.forEach(row => {
|
||||
if(row.mode !== "pagebreak") {
|
||||
sum += row.price * row.quantity * ( row.taxPercent + 100)/100
|
||||
}
|
||||
})
|
||||
|
||||
return sum.toFixed(2)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
202
pages/services/[mode]/[[id]].vue
Normal file
202
pages/services/[mode]/[[id]].vue
Normal file
@@ -0,0 +1,202 @@
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const toast = useToast()
|
||||
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({
|
||||
unit: 1,
|
||||
tags: []
|
||||
})
|
||||
|
||||
//Functions
|
||||
const setupPage = () => {
|
||||
if(mode.value === "show" || mode.value === "edit"){
|
||||
currentItem.value = dataStore.getServiceById(Number(useRoute().params.id))
|
||||
}
|
||||
|
||||
if(mode.value === "edit") itemInfo.value = currentItem.value
|
||||
}
|
||||
|
||||
const cancelEditorCreate = () => {
|
||||
if(currentItem.value) {
|
||||
router.push(`/services/show/${currentItem.value.id}`)
|
||||
} else {
|
||||
router.push(`/services/`)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
setupPage()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<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">
|
||||
<div
|
||||
v-if="item.label === 'Informationen'"
|
||||
>
|
||||
<div class="truncate">
|
||||
<p v-if="currentItem.sellingPrice">Verkaufspreis: {{String(Number(currentItem.sellingPrice).toFixed(2)).replace(".",",")}} €</p>
|
||||
<p>Beschreibung:</p>
|
||||
<pre>{{currentItem.description}}</pre>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div
|
||||
v-if="item.label === 'Logbuch'"
|
||||
>
|
||||
<HistoryDisplay
|
||||
type="product"
|
||||
v-if="currentItem"
|
||||
:element-id="currentItem.id"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="item.label === 'Bestand'"
|
||||
>
|
||||
Bestand: {{dataStore.getStockByProductId(currentItem.id)}} {{dataStore.units.find(unit => unit.id === currentItem.unit) ? dataStore.units.find(unit => unit.id === currentItem.unit).name : ""}}
|
||||
|
||||
</div>
|
||||
<div
|
||||
v-if="item.label === 'Dokumente'"
|
||||
>
|
||||
<Toolbar>
|
||||
<DocumentUpload
|
||||
type="product"
|
||||
:element-id="currentItem.id"
|
||||
/>
|
||||
</Toolbar>
|
||||
|
||||
|
||||
<DocumentList :documents="dataStore.getDocumentsByProductId(currentItem.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="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="dataStore.ownTenant.tags.products"
|
||||
multiple
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup
|
||||
label="Leistungskategorie:"
|
||||
>
|
||||
<USelectMenu
|
||||
:options="dataStore.serviceCategories"
|
||||
option-attribute="name"
|
||||
value-attribute="id"
|
||||
v-model="itemInfo.serviceCategorie"
|
||||
></USelectMenu>
|
||||
</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"
|
||||
:rows="6"
|
||||
/>
|
||||
</UFormGroup>
|
||||
</UForm>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
120
pages/services/index.vue
Normal file
120
pages/services/index.vue
Normal file
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
|
||||
<UTable
|
||||
:rows="filteredRows"
|
||||
: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 #unit-data="{row}">
|
||||
{{dataStore.units.find(unit => unit.id === row.unit) ? dataStore.units.find(unit => unit.id === row.unit).name : row.unit}}
|
||||
</template>
|
||||
</UTable>
|
||||
|
||||
</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 templateColumns = [
|
||||
{
|
||||
key: "name",
|
||||
label: "Name",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "unit",
|
||||
label: "Einheit",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "sellingPrice",
|
||||
label: "Verkaufspreis",
|
||||
sortable: true
|
||||
}/*,
|
||||
{
|
||||
key: "tags",
|
||||
label: "Tags",
|
||||
sortable: true
|
||||
}*/
|
||||
]
|
||||
const selectedColumns = ref(templateColumns)
|
||||
const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
|
||||
|
||||
const searchString = ref('')
|
||||
|
||||
const filteredRows = computed(() => {
|
||||
if(!searchString.value) {
|
||||
return dataStore.services
|
||||
}
|
||||
|
||||
return dataStore.services.filter(product => {
|
||||
return Object.values(product).some((value) => {
|
||||
return String(value).toLowerCase().includes(searchString.value.toLowerCase())
|
||||
})
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
204
pages/settings/banking/index.vue
Normal file
204
pages/settings/banking/index.vue
Normal file
@@ -0,0 +1,204 @@
|
||||
<script setup>
|
||||
|
||||
|
||||
import axios from "axios";
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const route = useRoute()
|
||||
const supabase = useSupabaseClient()
|
||||
const toast = useToast()
|
||||
|
||||
const showAddBankRequisition = ref(false)
|
||||
const bicBankToAdd = ref("")
|
||||
const bankData = ref({})
|
||||
const reqData = ref({})
|
||||
|
||||
const axiosBaseUrl = "https://backend.spaces.software"
|
||||
|
||||
const setupPage = async () => {
|
||||
if(route.query.reqId) {
|
||||
const {data,error} = await axios({
|
||||
url:`${axiosBaseUrl}/banking/requisitions/${route.query.reqId}`,
|
||||
method: "GET",
|
||||
auth: {
|
||||
username: "frontend",
|
||||
password: "Xt9Zn9RDSpdbr"
|
||||
}
|
||||
})
|
||||
|
||||
if(data) {
|
||||
reqData.value = data
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
const checkBIC = async () => {
|
||||
const {data,error} = await axios({
|
||||
url:`${axiosBaseUrl}/banking/institutions/${bicBankToAdd.value}`,
|
||||
method: "GET",
|
||||
auth: {
|
||||
username: "frontend",
|
||||
password: "Xt9Zn9RDSpdbr"
|
||||
}
|
||||
})
|
||||
|
||||
if(data) {
|
||||
bankData.value = data
|
||||
}
|
||||
|
||||
console.log(data)
|
||||
console.log(error)
|
||||
|
||||
}
|
||||
|
||||
const generateLink = async () => {
|
||||
const {data,error} = await axios({
|
||||
url:`${axiosBaseUrl}/banking/link?tenant=${dataStore.currentTenant}&institution_id=${bankData.value.id}`,
|
||||
method: "POST",
|
||||
auth: {
|
||||
username: "frontend",
|
||||
password: "Xt9Zn9RDSpdbr"
|
||||
}
|
||||
})
|
||||
|
||||
console.log(data)
|
||||
console.log(error)
|
||||
|
||||
if(data) {
|
||||
await navigateTo(data.link, {
|
||||
open: {
|
||||
target: "_blank"
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const addAccount = async (account) => {
|
||||
|
||||
let accountData = {
|
||||
accountId: account.id,
|
||||
ownerName: account.owner_name,
|
||||
iban: account.iban,
|
||||
tenant: dataStore.currentTenant,
|
||||
bankId: account.institution_id
|
||||
}
|
||||
|
||||
const {data,error} = await supabase.from("bankaccounts").insert(accountData).select()
|
||||
if(error) {
|
||||
toast.add({title: "Es gab einen Fehler bei hinzufügen des Accounts", color:"rose"})
|
||||
} else if(data) {
|
||||
toast.add({title: "Account erfolgreich hinzugefügt"})
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
setupPage()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardNavbar title="Bankkonten">
|
||||
<template #right>
|
||||
<UButton
|
||||
@click="showAddBankRequisition = true"
|
||||
>
|
||||
+ Bankverbindung
|
||||
</UButton>
|
||||
<USlideover
|
||||
v-model="showAddBankRequisition"
|
||||
>
|
||||
<UCard
|
||||
class="h-full"
|
||||
>
|
||||
<template #header>
|
||||
<p>Bankverbindung hinzufügen</p>
|
||||
</template>
|
||||
|
||||
<UFormGroup
|
||||
label="BIC:"
|
||||
class="flex-auto"
|
||||
>
|
||||
<InputGroup class="w-full">
|
||||
<UInput
|
||||
v-model="bicBankToAdd"
|
||||
class="flex-auto"
|
||||
/>
|
||||
<UButton
|
||||
@click="checkBIC"
|
||||
>
|
||||
Check
|
||||
</UButton>
|
||||
</InputGroup>
|
||||
|
||||
</UFormGroup>
|
||||
<UAlert
|
||||
v-if="bankData.id && bankData.countries.includes('DE')"
|
||||
title="Bank gefunden"
|
||||
icon="i-heroicons-check"
|
||||
color="primary"
|
||||
variant="outline"
|
||||
class="mt-3"
|
||||
/>
|
||||
<UButton
|
||||
@click="generateLink"
|
||||
class="mt-3"
|
||||
>
|
||||
Verbinden
|
||||
</UButton>
|
||||
|
||||
</UCard>
|
||||
</USlideover>
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
|
||||
<div
|
||||
v-for="account in reqData.accounts"
|
||||
class="p-2 m-3 flex justify-between"
|
||||
>
|
||||
{{account.iban}} - {{account.owner_name}}
|
||||
|
||||
<UButton
|
||||
@click="addAccount(account)"
|
||||
v-if="!dataStore.bankAccounts.find(i => i.accountId === account.id)"
|
||||
>
|
||||
+ Konto
|
||||
</UButton>
|
||||
</div>
|
||||
|
||||
<!-- <UButton @click="setupPage">Setup</UButton>
|
||||
<div v-if="route.query.reqId">
|
||||
{{reqData}}
|
||||
</div>-->
|
||||
|
||||
<UTable
|
||||
:rows="dataStore.bankAccounts"
|
||||
:columns="[
|
||||
{
|
||||
key: 'name',
|
||||
label: 'Name'
|
||||
},{
|
||||
key: 'iban',
|
||||
label: 'IBAN'
|
||||
},{
|
||||
key: 'bankId',
|
||||
label: 'Bank'
|
||||
},{
|
||||
key: 'ownerName',
|
||||
label: 'Kontoinhaber'
|
||||
},{
|
||||
key: 'balance',
|
||||
label: 'Saldo'
|
||||
},
|
||||
]"
|
||||
>
|
||||
|
||||
</UTable>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
66
pages/settings/externalDevices.vue
Normal file
66
pages/settings/externalDevices.vue
Normal file
@@ -0,0 +1,66 @@
|
||||
<script setup>
|
||||
import axios from "axios"
|
||||
const {ownTenant} = storeToRefs(useDataStore())
|
||||
|
||||
|
||||
const setupPrinter = async () => {
|
||||
console.log(ownTenant.value.labelPrinterIp)
|
||||
let printerUri = `http://${ownTenant.value.labelPrinterIp}/pstprnt`
|
||||
labelPrinterURI.value = printerUri
|
||||
console.log(printerUri)
|
||||
}
|
||||
|
||||
|
||||
/*const printLabel = async () => {
|
||||
axios
|
||||
.post(labelPrinterURI.value, `^XA^FO10,20^BCN,100^FD${}^XZ` )
|
||||
.then(console.log)
|
||||
.catch(console.log)
|
||||
|
||||
|
||||
}*/
|
||||
|
||||
|
||||
|
||||
const labelPrinterURI = ref("")
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UPage>
|
||||
<UCard>
|
||||
<template #header>
|
||||
Etikettendrucker
|
||||
</template>
|
||||
|
||||
<UFormGroup
|
||||
label="IP-Adresse:"
|
||||
>
|
||||
<UInput
|
||||
v-model="labelPrinterURI"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<UButton
|
||||
@click="setupPrinter"
|
||||
>
|
||||
Drucker Setup
|
||||
</UButton>
|
||||
<UButton
|
||||
@click="printLabel"
|
||||
>
|
||||
Druck
|
||||
</UButton>
|
||||
|
||||
</UCard>
|
||||
<!-- <UCard>
|
||||
<template #header>
|
||||
A4 Drucker
|
||||
</template>
|
||||
</UCard>-->
|
||||
</UPage>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
91
pages/settings/index.vue
Normal file
91
pages/settings/index.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
const dataStore = useDataStore()
|
||||
const supabase = useSupabaseClient()
|
||||
const router = useRouter()
|
||||
|
||||
const items = [{
|
||||
label: 'Profil',
|
||||
},{
|
||||
label: 'Projekte',
|
||||
content: 'This is the content shown for Tab1'
|
||||
}, {
|
||||
label: 'E-Mail',
|
||||
content: 'And, this is the content for Tab2'
|
||||
}, {
|
||||
label: 'Dokumente'
|
||||
}]
|
||||
|
||||
const colorMode = useColorMode()
|
||||
const isLight = computed({
|
||||
get() {
|
||||
return colorMode.value !== 'dark'
|
||||
},
|
||||
set() {
|
||||
colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardNavbar title="Einstellungen">
|
||||
|
||||
</UDashboardNavbar>
|
||||
<UTabs
|
||||
:items="items"
|
||||
class="h-100 p-5"
|
||||
>
|
||||
<template #item="{item}">
|
||||
<UCard class="mt-5">
|
||||
<div v-if="item.label === 'Profil'">
|
||||
|
||||
<UDivider
|
||||
class="my-3"
|
||||
label="Profil"
|
||||
/>
|
||||
|
||||
<InputGroup>
|
||||
<UButton
|
||||
:icon="!isLight ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
|
||||
color="white"
|
||||
variant="outline"
|
||||
aria-label="Theme"
|
||||
@click="isLight = !isLight"
|
||||
/>
|
||||
</InputGroup>
|
||||
|
||||
</div>
|
||||
<div v-else-if="item.label === 'Projekte'">
|
||||
<UDivider
|
||||
label="Phasenvorlagen"
|
||||
/>
|
||||
</div>
|
||||
<div v-else-if="item.label === 'Dokumente'">
|
||||
<UDivider
|
||||
label="Tags"
|
||||
class="mb-3"
|
||||
/>
|
||||
<InputGroup>
|
||||
<UBadge
|
||||
v-for="tag in dataStore.ownTenant.tags.documents"
|
||||
>
|
||||
{{tag}}
|
||||
</UBadge>
|
||||
</InputGroup>
|
||||
|
||||
|
||||
{{dataStore.ownTenant.tags}}
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
</template>
|
||||
</UTabs>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
101
pages/settings/numberRanges.vue
Normal file
101
pages/settings/numberRanges.vue
Normal file
@@ -0,0 +1,101 @@
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
const supabase = useSupabaseClient()
|
||||
const dataStore = useDataStore()
|
||||
|
||||
const showAddModal = ref(false)
|
||||
|
||||
const columns = [
|
||||
{
|
||||
key: "resourceType",
|
||||
label: "Typ"
|
||||
},{
|
||||
key: "prefix",
|
||||
label: "Prefix"
|
||||
},{
|
||||
key:"nextNumber",
|
||||
label:"Nächste Nummer"
|
||||
},{
|
||||
key: "suffix",
|
||||
label: "Suffix"
|
||||
}
|
||||
]
|
||||
|
||||
const resources = {
|
||||
customers: {
|
||||
label: "Kunden"
|
||||
},
|
||||
vendors: {
|
||||
label: "Lieferanten"
|
||||
},
|
||||
products: {
|
||||
label: "Artikel"
|
||||
},
|
||||
spaces: {
|
||||
label: "Lagerplätze"
|
||||
},
|
||||
invoices: {
|
||||
label: "Rechnungen"
|
||||
},
|
||||
quotes: {
|
||||
label: "Angebote"
|
||||
}
|
||||
}
|
||||
|
||||
const updateNumberRange = async (range) => {
|
||||
|
||||
const {data,error} = await supabase
|
||||
.from("numberranges")
|
||||
.update(range)
|
||||
.eq('id',range.id)
|
||||
|
||||
await dataStore.fetchNumberRanges()
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardToolbar>
|
||||
<UAlert
|
||||
title="Änderungen an diesen Werten betreffen nur neu Erstellte Einträge."
|
||||
color="rose"
|
||||
variant="outline"
|
||||
icon="i-heroicons-exclamation-triangle"
|
||||
/>
|
||||
</UDashboardToolbar>
|
||||
|
||||
<UTable
|
||||
:rows="dataStore.numberRanges"
|
||||
:columns="columns"
|
||||
>
|
||||
<template #resourceType-data="{row}">
|
||||
{{resources[row.resourceType] ? resources[row.resourceType].label : ""}}
|
||||
</template>
|
||||
<template #prefix-data="{row}">
|
||||
<UInput
|
||||
v-model="row.prefix"
|
||||
@focusout="updateNumberRange(row)"
|
||||
/>
|
||||
</template>
|
||||
<template #suffix-data="{row}">
|
||||
<UInput
|
||||
v-model="row.suffix"
|
||||
@focusout="updateNumberRange(row)"
|
||||
/>
|
||||
</template>
|
||||
<template #nextNumber-data="{row}">
|
||||
<UInput
|
||||
v-model="row.nextNumber"
|
||||
@focusout="updateNumberRange(row)"
|
||||
/>
|
||||
</template>
|
||||
</UTable>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
78
pages/settings/rights.vue
Normal file
78
pages/settings/rights.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<script setup>
|
||||
|
||||
const supabase = useSupabaseClient()
|
||||
|
||||
const data = await supabase.from("profiles").select('* , tenants (id, name)')
|
||||
console.log(data)
|
||||
|
||||
let rights = {
|
||||
createUser: {label: "Benutzer erstellen"},
|
||||
modifyUser: {label: "Benutzer bearbeiten"},
|
||||
deactivateUser: {label: "Benutzer sperren"},
|
||||
createProject: {label: "Projekt erstellen"},
|
||||
viewOwnProjects: {label: "Eigene Projekte sehen"},
|
||||
viewAllProjects: {label: "Alle Projekte sehen"},
|
||||
createTask: {label: "Aufgabe erstellen"},
|
||||
viewOwnTasks: {label:"Eigene Aufgaben sehen"},
|
||||
viewAllTasks: {label: "Alle Aufgaben sehen"},
|
||||
trackOwnTime: {label:"Eigene Zeite erfassen"},
|
||||
createOwnTime: {label:"Eigene Zeiten erstellen"},
|
||||
createTime: {label:"Zeiten erstellen"},
|
||||
viewOwnTimes: {label:"Eigene Zeiten anzeigen"},
|
||||
viewTimes: {label:"Zeiten anzeigen"},
|
||||
}
|
||||
|
||||
let roles = [
|
||||
{
|
||||
key: "tenantAdmin",
|
||||
label: "Firmenadministrator",
|
||||
rights: [
|
||||
...Object.keys(rights)
|
||||
]
|
||||
},
|
||||
{
|
||||
key:"worker",
|
||||
label: "Monteur",
|
||||
rights: [
|
||||
"viewOwnProjects",
|
||||
"createTasks",
|
||||
"viewOwnTasks"
|
||||
]
|
||||
},
|
||||
{
|
||||
key:"manager",
|
||||
label: "Vorarbeiter",
|
||||
rights: [
|
||||
"createProjects",
|
||||
"viewOwnProjects",
|
||||
"createTasks",
|
||||
"viewOwnTasks",
|
||||
]
|
||||
},
|
||||
{
|
||||
key:"booker",
|
||||
label: "Buchhalter",
|
||||
rights: [
|
||||
"createTasks",
|
||||
"viewOwnTasks",
|
||||
"createTime",
|
||||
"viewAllTimes"
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
117
pages/settings/tenant.vue
Normal file
117
pages/settings/tenant.vue
Normal file
@@ -0,0 +1,117 @@
|
||||
<script setup>
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const supabase = useSupabaseClient()
|
||||
|
||||
const features = ref(dataStore.ownTenant.features)
|
||||
const businessInfo = ref(dataStore.ownTenant.businessInfo)
|
||||
|
||||
const updateTenant = async (newData) => {
|
||||
const {data,error} = await supabase.from("tenants")
|
||||
.update(newData)
|
||||
.eq("id",dataStore.currentTenant)
|
||||
.select()
|
||||
|
||||
if (error) console.log(error)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardNavbar title="Firmeneinstellungen">
|
||||
|
||||
</UDashboardNavbar>
|
||||
<UTabs
|
||||
class="p-5"
|
||||
:items="[
|
||||
{
|
||||
label: 'Rechnung & Kontakt'
|
||||
},{
|
||||
label: 'Lizenz'
|
||||
},{
|
||||
label: 'Funktionen'
|
||||
},{
|
||||
label: 'Bankkonten'
|
||||
},{
|
||||
label: 'Tags'
|
||||
}
|
||||
]"
|
||||
>
|
||||
<template #item="{item}">
|
||||
<UCard class="mt-5">
|
||||
<div v-if="item.label === 'Rechnung & Kontakt'">
|
||||
<UForm class="w-1/2">
|
||||
<UFormGroup
|
||||
label="Firmenname:"
|
||||
>
|
||||
<UInput v-model="businessInfo.name"/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Straße + Hausnummer:"
|
||||
>
|
||||
<UInput v-model="businessInfo.street"/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="PLZ + Ort"
|
||||
class="w-full"
|
||||
>
|
||||
<InputGroup class="w-full">
|
||||
<UInput v-model="businessInfo.zip"/>
|
||||
<UInput v-model="businessInfo.city" class="flex-auto"/>
|
||||
</InputGroup>
|
||||
</UFormGroup>
|
||||
<UButton
|
||||
class="mt-3"
|
||||
@click="updateTenant({businessInfo: businessInfo})"
|
||||
>
|
||||
Speichern
|
||||
</UButton>
|
||||
</UForm>
|
||||
</div>
|
||||
<div v-else-if="item.label === 'Funktionen'">
|
||||
<UAlert
|
||||
title="Funktionen ausblenden"
|
||||
description="Nur Funktionen mit gesetztem Haken sind im Unternehmen verfügbar. Diese Einstellungen gelten für alle Mitarbeiter und sind unabhängig von Berechtigungen."
|
||||
color="rose"
|
||||
variant="outline"
|
||||
class="mb-5"
|
||||
/>
|
||||
<UCheckbox
|
||||
label="Kalendar"
|
||||
v-model="features.calendar"
|
||||
@change="updateTenant({features: features})"
|
||||
/>
|
||||
<UCheckbox
|
||||
label="Plantafel"
|
||||
v-model="features.planningBoard"
|
||||
@change="updateTenant({features: features})"
|
||||
/>
|
||||
<UCheckbox
|
||||
label="Zeiterfassung"
|
||||
v-model="features.timeTracking"
|
||||
@change="updateTenant({features: features})"
|
||||
/>
|
||||
<UCheckbox
|
||||
label="Anwesenheiten"
|
||||
v-model="features.workingTimeTracking"
|
||||
@change="updateTenant({features: features})"
|
||||
/>
|
||||
<UCheckbox
|
||||
label="Verträge"
|
||||
v-model="features.contracts"
|
||||
@change="updateTenant({features: features})"
|
||||
/>
|
||||
<UCheckbox
|
||||
label="Fahrzeuge"
|
||||
v-model="features.vehicles"
|
||||
@change="updateTenant({features: features})"
|
||||
/>
|
||||
</div>
|
||||
</UCard>
|
||||
</template>
|
||||
</UTabs>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
165
pages/spaces/[mode]/[[id]].vue
Normal file
165
pages/spaces/[mode]/[[id]].vue
Normal file
@@ -0,0 +1,165 @@
|
||||
<script setup>
|
||||
import axios from "axios";
|
||||
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const toast = useToast()
|
||||
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({
|
||||
spaceNumber: ""
|
||||
})
|
||||
const spaceTypes = ["Regalplatz", "Kiste", "Palettenplatz", "Sonstiges"]
|
||||
const spaceProducts = ref([])
|
||||
const spaceMovements = ref([])
|
||||
|
||||
//Functions
|
||||
const setupPage = async () => {
|
||||
console.log("Called Setup")
|
||||
if(mode.value === "show" || mode.value === "edit"){
|
||||
currentItem.value = await dataStore.getSpaceById(Number(useRoute().params.id))
|
||||
|
||||
spaceMovements.value = await dataStore.getMovementsBySpace(currentItem.value.id)
|
||||
spaceProducts.value = []
|
||||
spaceMovements.value.forEach(movement => {
|
||||
if(spaceProducts.value.filter(product => product.id === movement.productId).length === 0) spaceProducts.value.push(dataStore.getProductById(movement.productId))
|
||||
})
|
||||
}
|
||||
|
||||
if(mode.value === "edit") itemInfo.value = currentItem.value
|
||||
}
|
||||
|
||||
const cancelEditorCreate = () => {
|
||||
if(currentItem.value) {
|
||||
router.push(`/spaces/show/${currentItem.value.id}`)
|
||||
} else {
|
||||
router.push(`/spaces/`)
|
||||
}
|
||||
}
|
||||
|
||||
function getSpaceProductCount(productId) {
|
||||
let productMovements = spaceMovements.value.filter(movement => movement.productId === productId)
|
||||
let count = 0;
|
||||
productMovements.forEach(movement => count += movement.quantity)
|
||||
|
||||
return count
|
||||
}
|
||||
|
||||
const printSpaceLabel = async () => {
|
||||
axios
|
||||
.post(`http://${dataStore.ownTenant.value.labelPrinterIp}/pstprnt`, `^XA^FO10,20^BCN,100^FD${currentItem.value.spaceNumber}^XZ` )
|
||||
.then(console.log)
|
||||
.catch(console.log)
|
||||
}
|
||||
|
||||
|
||||
setupPage()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardNavbar :title="currentItem ? currentItem.name : (mode === 'create' ? 'Lagerplatz erstellen' : 'Lagerplatz bearbeiten')">
|
||||
<template #right>
|
||||
<UButton
|
||||
v-if="mode === 'edit'"
|
||||
@click="dataStore.updateItem('spaces',itemInfo)"
|
||||
>
|
||||
Speichern
|
||||
</UButton>
|
||||
<UButton
|
||||
v-else-if="mode === 'create'"
|
||||
@click="dataStore.createNewItem('spaces',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(`/inventory/spaces/edit/${currentItem.id}`)"
|
||||
>
|
||||
Bearbeiten
|
||||
</UButton>
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
<UTabs
|
||||
:items="[{label: 'Informationen'},{label: 'Logbuch'},{label: 'Bestand'}]"
|
||||
v-if="currentItem && mode == 'show'"
|
||||
class="p-5"
|
||||
>
|
||||
<template #item="{item}">
|
||||
<UCard class="mt-5">
|
||||
<div v-if="item.label === 'Informationen'">
|
||||
<div class="truncate">
|
||||
<span>Beschreibung: {{currentItem.description}}</span>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div v-else-if="item.label === 'Logbuch'">
|
||||
|
||||
</div>
|
||||
<div v-else-if="item.label === 'Bestand'">
|
||||
<div v-if="spaceProducts.length > 0">
|
||||
<p class="mt-5">Artikel in diesem Lagerplatz</p>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th class="text-left">Artikel</th>
|
||||
<th>Anzahl</th>
|
||||
<th>Einheit</th>
|
||||
</tr>
|
||||
<tr v-for="product in spaceProducts">
|
||||
<td>{{product.name}}</td>
|
||||
<td>{{getSpaceProductCount(product.id)}}</td>
|
||||
<td>{{dataStore.units.find(unit => unit.id === product.unit).name}}</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
<p v-else>Es befinden sich keine Artikel in diesem Lagerplatz</p>
|
||||
</div>
|
||||
</UCard>
|
||||
</template>
|
||||
</UTabs>
|
||||
<UForm
|
||||
v-else-if="mode === 'edit' || mode === 'create'"
|
||||
class="p-5"
|
||||
>
|
||||
<UFormGroup
|
||||
label="Typ:"
|
||||
>
|
||||
<USelectMenu
|
||||
:options="spaceTypes"
|
||||
v-model="itemInfo.type"
|
||||
>
|
||||
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Beschreibung.:"
|
||||
>
|
||||
<UTextarea
|
||||
v-model="itemInfo.description"
|
||||
/>
|
||||
</UFormGroup>
|
||||
</UForm>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
105
pages/spaces/index.vue
Normal file
105
pages/spaces/index.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<UDashboardNavbar title="Lagerplätze" :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(`/spaces/create`)">+ Lagerplatz</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>
|
||||
<UTable
|
||||
:rows="filteredRows"
|
||||
:columns="columns"
|
||||
class="w-full"
|
||||
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
|
||||
@select="(i) => router.push(`/spaces/show/${i.id}`) "
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Lagerplätze anzuzeigen' }"
|
||||
/>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
defineShortcuts({
|
||||
'/': () => {
|
||||
//console.log(searchinput)
|
||||
//searchinput.value.focus()
|
||||
document.getElementById("searchinput").focus()
|
||||
},
|
||||
'+': () => {
|
||||
router.push("/spaces/create")
|
||||
}
|
||||
})
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const router = useRouter()
|
||||
|
||||
const templateColumns = [
|
||||
{
|
||||
key: 'spaceNumber',
|
||||
label: "Lagerplatznr.",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "description",
|
||||
label: "Beschreibung",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "type",
|
||||
label: "Typ",
|
||||
sortable: true
|
||||
}
|
||||
]
|
||||
const selectedColumns = ref(templateColumns)
|
||||
const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
|
||||
|
||||
const searchString = ref('')
|
||||
const filteredRows = computed(() => {
|
||||
if(!searchString.value) {
|
||||
return dataStore.spaces
|
||||
}
|
||||
|
||||
return dataStore.spaces.filter(item => {
|
||||
return Object.values(item).some((value) => {
|
||||
return String(value).toLowerCase().includes(searchString.value.toLowerCase())
|
||||
})
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
187
pages/tasks/[mode]/[[id]].vue
Normal file
187
pages/tasks/[mode]/[[id]].vue
Normal file
@@ -0,0 +1,187 @@
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const toast = useToast()
|
||||
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({})
|
||||
const categories = ["Offen", "In Bearbeitung", "Dringed", "Erledigt"]
|
||||
|
||||
//Functions
|
||||
const setupPage = () => {
|
||||
if(mode.value === "show" || mode.value === "edit"){
|
||||
currentItem.value = dataStore.getTaskById(Number(useRoute().params.id))
|
||||
}
|
||||
|
||||
if(mode.value === "edit") itemInfo.value = currentItem.value
|
||||
|
||||
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)
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const editItem = async () => {
|
||||
router.push(`/tasks/edit/${currentItem.value.id}`)
|
||||
}
|
||||
|
||||
const cancelEditorCreate = () => {
|
||||
if(currentItem.value) {
|
||||
router.push(`/tasks/show/${currentItem.value.id}`)
|
||||
} else {
|
||||
router.push(`/tasks/`)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
setupPage()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardNavbar :title="currentItem ? currentItem.name : (mode === 'create' ? 'Aufgabe erstellen' : 'Aufgabe bearbeiten')">
|
||||
<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'"
|
||||
@click="editItem"
|
||||
>
|
||||
Bearbeiten
|
||||
</UButton>
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
164
pages/tasks/index.vue
Normal file
164
pages/tasks/index.vue
Normal file
@@ -0,0 +1,164 @@
|
||||
<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}">
|
||||
{{dataStore.profiles.find(i => i.id === row.user) ? dataStore.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 router = useRouter()
|
||||
|
||||
defineShortcuts({
|
||||
'/': () => {
|
||||
//console.log(searchinput)
|
||||
//searchinput.value.focus()
|
||||
document.getElementById("searchinput").focus()
|
||||
},
|
||||
'+': () => {
|
||||
router.push("/tasks/create")
|
||||
}
|
||||
})
|
||||
|
||||
const templateColumns = [
|
||||
|
||||
/*{
|
||||
key:"finish"
|
||||
},*/{
|
||||
key: "created_at",
|
||||
label: "Erstellt am:",
|
||||
sortable: true
|
||||
},{
|
||||
key: "name",
|
||||
label: "Name:",
|
||||
sortable: true
|
||||
},{
|
||||
key: "categorie",
|
||||
label: "Kategorie:",
|
||||
sortable: true
|
||||
},{
|
||||
key: "description",
|
||||
label: "Beschreibung:",
|
||||
sortable: true
|
||||
},{
|
||||
key: "user",
|
||||
label: "Benutzer:",
|
||||
sortable: true
|
||||
},{
|
||||
key: "project",
|
||||
label: "Projekt:",
|
||||
sortable: true
|
||||
},{
|
||||
key: "plant",
|
||||
label: "Objekt:",
|
||||
sortable: true
|
||||
}
|
||||
]
|
||||
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")
|
||||
|
||||
if(!searchString.value) {
|
||||
return items
|
||||
}
|
||||
|
||||
return items.filter(item => {
|
||||
return Object.values(item).some((value) => {
|
||||
return String(value).toLowerCase().includes(searchString.value.toLowerCase())
|
||||
})
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
452
pages/users/[mode]/[[id]].vue
Normal file
452
pages/users/[mode]/[[id]].vue
Normal file
@@ -0,0 +1,452 @@
|
||||
<script setup>
|
||||
import dayjs from "dayjs";
|
||||
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
|
||||
//TODO: Build User Page
|
||||
|
||||
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const supabase = useSupabaseClient()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const toast = useToast()
|
||||
const id = ref(route.params.id ? route.params.id : null )
|
||||
|
||||
let currentItem = null
|
||||
|
||||
//Working
|
||||
const mode = ref(route.params.mode || "show")
|
||||
const itemInfo = ref({})
|
||||
|
||||
const tabItems = [
|
||||
{
|
||||
label: "Informationen"
|
||||
},{
|
||||
label: "Zeiterfassung"
|
||||
},{
|
||||
label: "Rechte"
|
||||
},
|
||||
]
|
||||
|
||||
const timeSelection = ref("Heute")
|
||||
const timeColumns = [
|
||||
{
|
||||
key: "state",
|
||||
label: "Status"
|
||||
},{
|
||||
key: "user",
|
||||
label: "Benutzer"
|
||||
},{
|
||||
key: "start",
|
||||
label: "Start"
|
||||
},{
|
||||
key: "end",
|
||||
label: "Ende"
|
||||
},{
|
||||
key: "notes",
|
||||
label: "Notizen"
|
||||
},{
|
||||
key: "projectId",
|
||||
label: "Projekt"
|
||||
},{
|
||||
key: "duration",
|
||||
label: "Dauer"
|
||||
},
|
||||
]
|
||||
|
||||
const filteredTimes = computed(() => {
|
||||
let rows = dataStore.times
|
||||
rows = rows.filter(i => i.user === currentItem.id)
|
||||
|
||||
if(timeSelection.value === 'Heute') {
|
||||
rows = rows.filter(i => dayjs().isSame(i.start,'day'))
|
||||
} else if(timeSelection.value === 'Diese Woche') {
|
||||
rows = rows.filter(i => dayjs().isSame(i.start,'week'))
|
||||
} else if(timeSelection.value === 'Dieser Monat') {
|
||||
rows = rows.filter(i => dayjs().isSame(i.start,'month'))
|
||||
} else if(timeSelection.value === 'Dieses Jahr') {
|
||||
rows = rows.filter(i => dayjs().isSame(i.start,'year'))
|
||||
} else if(timeSelection.value === 'Letztes Jahr') {
|
||||
rows = rows.filter(i => dayjs().subtract(1,'year').isSame(i.start,'year'))
|
||||
}
|
||||
|
||||
return rows
|
||||
})
|
||||
|
||||
//Functions
|
||||
const setupPage = () => {
|
||||
if(mode.value === "show" || mode.value === "edit"){
|
||||
currentItem = dataStore.getProfileById(useRoute().params.id)
|
||||
}
|
||||
|
||||
itemInfo.value = currentItem
|
||||
}
|
||||
|
||||
const editItem = async () => {
|
||||
router.push(`/users/edit/${currentItem.id}`)
|
||||
setupPage()
|
||||
}
|
||||
|
||||
const cancelEditorCreate = () => {
|
||||
mode.value = "show"
|
||||
itemInfo.value = {
|
||||
id: 0,
|
||||
infoData: {}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
const getDuration = (time) => {
|
||||
const dez = dayjs(time.end).diff(time.start,'hour',true).toFixed(2)
|
||||
const hours = Math.floor(dez)
|
||||
const minutes = Math.floor((dez - hours) * 60)
|
||||
return {
|
||||
dezimal: dez,
|
||||
hours: hours,
|
||||
minutes: minutes,
|
||||
composed: `${hours}:${minutes}`
|
||||
}
|
||||
}
|
||||
|
||||
const getSelectionSum = computed(() => {
|
||||
let times = filteredTimes.value
|
||||
let sum = 0
|
||||
let sumEntwurf = 0
|
||||
let sumEingereicht = 0
|
||||
let sumBestaetigt = 0
|
||||
|
||||
times.forEach(time => {
|
||||
let duration = getDuration(time)
|
||||
|
||||
sum += Number(duration.dezimal)
|
||||
|
||||
if(time.state === 'Entwurf') {
|
||||
sumEntwurf += Number(duration.dezimal)
|
||||
} else if(time.state === 'Eingereicht') {
|
||||
sumEingereicht += Number(duration.dezimal)
|
||||
} else if(time.state === 'Bestätigt') {
|
||||
sumBestaetigt += Number(duration.dezimal)
|
||||
}
|
||||
})
|
||||
|
||||
sum = sum.toFixed(2)
|
||||
sumEntwurf = sumEntwurf.toFixed(2)
|
||||
sumEingereicht = sumEingereicht.toFixed(2)
|
||||
sumBestaetigt = sumBestaetigt.toFixed(2)
|
||||
|
||||
return {
|
||||
sum,
|
||||
sumEntwurf,
|
||||
sumEingereicht,
|
||||
sumBestaetigt
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
setupPage()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<UCard v-if="currentItem && mode == 'show'" >
|
||||
<template #header>
|
||||
{{currentItem.fullName}}
|
||||
</template>
|
||||
|
||||
<UTabs :items="tabItems">
|
||||
<template #item="{item}">
|
||||
<div
|
||||
v-if="item.label === 'Informationen'"
|
||||
class="w-full"
|
||||
>
|
||||
<InputGroup class="w-full">
|
||||
<div class="w-1/2 mr-5">
|
||||
<UFormGroup
|
||||
label="Anrede"
|
||||
>
|
||||
<UInput/>
|
||||
</UFormGroup>
|
||||
|
||||
<InputGroup>
|
||||
<UFormGroup
|
||||
label="Vorname:"
|
||||
class="flex-auto"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.firstName"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Nachnahme:"
|
||||
class="flex-auto"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.lastName"
|
||||
/>
|
||||
</UFormGroup>
|
||||
</InputGroup>
|
||||
|
||||
<UFormGroup
|
||||
label="Geburtsdatum"
|
||||
>
|
||||
<UInput/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Benutzername"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.username"
|
||||
disabled
|
||||
/>
|
||||
</UFormGroup>
|
||||
</div>
|
||||
<div class="w-1/2">
|
||||
<UFormGroup
|
||||
label="E-Mail"
|
||||
>
|
||||
<UInput/>
|
||||
</UFormGroup>
|
||||
|
||||
<InputGroup>
|
||||
<UFormGroup
|
||||
label="Telefonnummer:"
|
||||
class="w-1/2"
|
||||
>
|
||||
<UInput/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Mobilfunknummer:"
|
||||
class="w-1/2"
|
||||
>
|
||||
<UInput/>
|
||||
</UFormGroup>
|
||||
</InputGroup>
|
||||
|
||||
<UFormGroup
|
||||
label="Straße & Hausnummer"
|
||||
>
|
||||
<UInput
|
||||
class="flex-auto"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<InputGroup>
|
||||
<UFormGroup
|
||||
label="Postleitzahl:"
|
||||
class="w-40"
|
||||
>
|
||||
<UInput/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Ort:"
|
||||
class="flex-auto"
|
||||
>
|
||||
<UInput/>
|
||||
</UFormGroup>
|
||||
</InputGroup>
|
||||
</div>
|
||||
</InputGroup>
|
||||
<UButton
|
||||
class="mt-5"
|
||||
@click="dataStore.updateItem('users',itemInfo)"
|
||||
>
|
||||
Speichern
|
||||
</UButton>
|
||||
|
||||
</div>
|
||||
<div v-else-if="item.label === 'Zeiterfassung'">
|
||||
<UButtonGroup>
|
||||
<UButton
|
||||
@click="timeSelection = 'Heute'"
|
||||
:variant="timeSelection === 'Heute' ? 'solid' : 'outline'"
|
||||
>
|
||||
Heute
|
||||
</UButton>
|
||||
<UButton
|
||||
@click="timeSelection = 'Diese Woche'"
|
||||
:variant="timeSelection === 'Diese Woche' ? 'solid' : 'outline'"
|
||||
>
|
||||
Diese Woche
|
||||
</UButton>
|
||||
<UButton
|
||||
@click="timeSelection = 'Dieser Monat'"
|
||||
:variant="timeSelection === 'Dieser Monat' ? 'solid' : 'outline'"
|
||||
>
|
||||
Dieser Monat
|
||||
</UButton>
|
||||
<UButton
|
||||
@click="timeSelection = 'Dieses Jahr'"
|
||||
:variant="timeSelection === 'Dieses Jahr' ? 'solid' : 'outline'"
|
||||
>
|
||||
Dieses Jahr
|
||||
</UButton>
|
||||
<UButton
|
||||
@click="timeSelection = 'Letztes Jahr'"
|
||||
:variant="timeSelection === 'Letztes Jahr' ? 'solid' : 'outline'"
|
||||
color="rose"
|
||||
>
|
||||
Letztes Jahr
|
||||
</UButton>
|
||||
</UButtonGroup>
|
||||
<UButton
|
||||
class="ml-3"
|
||||
to="/employees/timetracking"
|
||||
>
|
||||
Zur Zeiterfassung
|
||||
</UButton>
|
||||
|
||||
<InputGroup class="w-full">
|
||||
<div>
|
||||
Summe: {{getSelectionSum.sum}}<br>
|
||||
Summe Entwurf: {{getSelectionSum.sumEntwurf}}<br>
|
||||
Summe Eingereicht: {{getSelectionSum.sumEingereicht}}<br>
|
||||
Summe Bestätigt: {{getSelectionSum.sumBestaetigt}}<br>
|
||||
</div>
|
||||
</InputGroup>
|
||||
|
||||
<UTable
|
||||
:rows="filteredTimes"
|
||||
:columns="timeColumns"
|
||||
>
|
||||
<template #state-data="{row}">
|
||||
<span
|
||||
v-if="row.state === 'Entwurf'"
|
||||
class="text-rose-500"
|
||||
>{{row.state}}</span>
|
||||
<span
|
||||
v-if="row.state === 'Eingereicht'"
|
||||
class="text-cyan-500"
|
||||
>{{row.state}}</span>
|
||||
<span
|
||||
v-if="row.state === 'Bestätigt'"
|
||||
class="text-primary-500"
|
||||
>{{row.state}}</span>
|
||||
</template>
|
||||
<template #start-data="{row}">
|
||||
<div class="text-right">{{dayjs(row.start).format("DD.MM.YY HH:mm")}}</div>
|
||||
</template>
|
||||
<template #end-data="{row}">
|
||||
<div class="text-right">{{dayjs(row.end).format("HH:mm")}}</div>
|
||||
</template>
|
||||
<template #user-data="{row}">
|
||||
{{dataStore.getProfileById(row.user) ? dataStore.getProfileById(row.user).fullName : ""}}
|
||||
</template>
|
||||
<template #duration-data="{row}">
|
||||
<div class="text-right">{{ getDuration(row).composed}} Std</div>
|
||||
</template>
|
||||
<template #projectId-data="{row}">
|
||||
{{dataStore.getProjectById(row.projectId) ? dataStore.getProjectById(row.projectId).name : ""}}
|
||||
</template>
|
||||
</UTable>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
</UTabs>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<template #footer>
|
||||
<UButton
|
||||
v-if="mode == 'show' && currentItem.id"
|
||||
@click="editItem"
|
||||
>
|
||||
Bearbeiten
|
||||
</UButton>
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
</UCard>
|
||||
<UCard v-else-if="mode == 'edit' || mode == 'create'" >
|
||||
<template #header>
|
||||
{{itemInfo.title}}
|
||||
</template>
|
||||
|
||||
<UFormGroup
|
||||
label="Titel:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.title"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup
|
||||
label="Status:"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="itemInfo.state"
|
||||
:options="states"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup
|
||||
label="Kundennummer:"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="itemInfo.customer"
|
||||
:options="dataStore.customers"
|
||||
option-attribute="name"
|
||||
value-attribute="id"
|
||||
searchable
|
||||
:search-attributes="['name']"
|
||||
>
|
||||
<template #label>
|
||||
{{dataStore.customers.find(customer => customer.id === itemInfo.customer) ? dataStore.customers.find(customer => customer.id === itemInfo.customer).name : "Kunde auswählen"}}
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
|
||||
|
||||
<UFormGroup
|
||||
label="Beschreibung:"
|
||||
>
|
||||
<UTextarea
|
||||
v-model="itemInfo.description"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
|
||||
<template #footer>
|
||||
<UButton
|
||||
v-if="mode == 'edit'"
|
||||
@click="dataStore.updateItem('users',{...itemInfo, fullName: `${itemInfo.firstName} ${itemInfo.lastName}`})"
|
||||
>
|
||||
Speichern
|
||||
</UButton>
|
||||
<!-- <UButton
|
||||
v-else-if="mode == 'create'"
|
||||
@click="dataStore.createItem()"
|
||||
>
|
||||
Erstellen
|
||||
</UButton>-->
|
||||
<UButton
|
||||
@click="cancelEditorCreate"
|
||||
color="red"
|
||||
class="ml-2"
|
||||
>
|
||||
Abbrechen
|
||||
</UButton>
|
||||
</template>
|
||||
|
||||
</UCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
43
pages/users/index.vue
Normal file
43
pages/users/index.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
const dataStore = useDataStore()
|
||||
const router = useRouter()
|
||||
|
||||
const columns = [
|
||||
{
|
||||
key:"fullName",
|
||||
label: "Name",
|
||||
},/*
|
||||
{
|
||||
key: "username",
|
||||
label: "Benutzername"
|
||||
},*/
|
||||
{
|
||||
key: "role",
|
||||
label: "Rolle"
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<UTable
|
||||
:rows="dataStore.profiles"
|
||||
:columns="columns"
|
||||
@select="(item) => router.push(`/users/show/${item.id}`)"
|
||||
>
|
||||
|
||||
</UTable>
|
||||
|
||||
<DevOnly>
|
||||
{{dataStore.profiles}}
|
||||
</DevOnly>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
214
pages/vehicles/[mode]/[[id]].vue
Normal file
214
pages/vehicles/[mode]/[[id]].vue
Normal file
@@ -0,0 +1,214 @@
|
||||
<script setup>
|
||||
import dayjs from "dayjs";
|
||||
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const toast = useToast()
|
||||
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({
|
||||
name: "",
|
||||
licensePlate: "",
|
||||
type: "",
|
||||
driver: null,
|
||||
active: true
|
||||
})
|
||||
|
||||
const tabItems = [{
|
||||
label: 'Informationen',
|
||||
},/* {
|
||||
label: 'Eingangsrechnungen',
|
||||
},*/ {
|
||||
label: 'Dokumente',
|
||||
}]
|
||||
|
||||
const incomingInvoicesColumns = [
|
||||
{
|
||||
key: "state",
|
||||
label: "Status",
|
||||
sortable: true
|
||||
},{
|
||||
key: "vendor",
|
||||
label: "Lieferant",
|
||||
sortable: true
|
||||
},{
|
||||
key: "date",
|
||||
label: "Datum",
|
||||
sortable: true
|
||||
},{
|
||||
key: "description",
|
||||
label: "Beschreibung",
|
||||
sortable: true
|
||||
},{
|
||||
key: "accounts",
|
||||
label: "Betrag",
|
||||
sortable: true
|
||||
},
|
||||
]
|
||||
|
||||
//Functions
|
||||
const setupPage = () => {
|
||||
if(mode.value === "show" || mode.value === "edit"){
|
||||
currentItem.value = dataStore.getVehicleById(Number(useRoute().params.id))
|
||||
}
|
||||
|
||||
if(mode.value === "edit") itemInfo.value = currentItem.value
|
||||
}
|
||||
|
||||
const cancelEditorCreate = () => {
|
||||
if(currentItem.value) {
|
||||
router.push(`/vehicles/show/${currentItem.value.id}`)
|
||||
} else {
|
||||
router.push(`/vehicles`)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
const getRowAmount = (row) => {
|
||||
let amount = 0
|
||||
|
||||
row.accounts.forEach(account => {
|
||||
amount += account.amountNet
|
||||
amount += account.amountTax
|
||||
})
|
||||
|
||||
return amount
|
||||
}
|
||||
|
||||
setupPage()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardNavbar :title="currentItem ? currentItem.licensePlate : (mode === 'create' ? 'Fahrzeug erstellen' : 'Fahrzeug bearbeiten')">
|
||||
<template #right>
|
||||
<UButton
|
||||
v-if="mode === 'edit'"
|
||||
@click="dataStore.updateItem('vehicles',itemInfo)"
|
||||
>
|
||||
Speichern
|
||||
</UButton>
|
||||
<UButton
|
||||
v-else-if="mode === 'create'"
|
||||
@click="dataStore.createNewItem('vehicles',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(`/vehicles/edit/${currentItem.id}`)"
|
||||
>
|
||||
Bearbeiten
|
||||
</UButton>
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
<UTabs
|
||||
:items="tabItems"
|
||||
v-if="mode === 'show'"
|
||||
class="p-5"
|
||||
>
|
||||
<template #item="{item}">
|
||||
<div v-if="item.label === 'Informationen'">
|
||||
Typ: {{currentItem.type}} <br>
|
||||
Fahrer: {{dataStore.profiles.find(profile => profile.id === currentItem.driver) ? dataStore.profiles.find(profile => profile.id === currentItem.driver).fullName : 'Kein Fahrer gewählt'}} <br>
|
||||
</div>
|
||||
<div v-else-if="item.label === 'Eingangsrechnungen'">
|
||||
<UTable
|
||||
:rows="dataStore.getIncomingInvoicesByVehicleId(currentItem.id)"
|
||||
:columns="incomingInvoicesColumns"
|
||||
@select="(row) => router.push('/receipts/show/' + row.id)"
|
||||
>
|
||||
<template #vendor-data="{row}">
|
||||
{{dataStore.getVendorById(row.vendor) ? dataStore.getVendorById(row.vendor).name : ""}}
|
||||
</template>
|
||||
<template #date-data="{row}">
|
||||
{{dayjs(row.date).format("DD.MM.YYYY")}}
|
||||
</template>
|
||||
<template #accounts-data="{row}">
|
||||
{{getRowAmount(row) ? String(getRowAmount(row).toFixed(2)).replace('.',',') + " €" : ""}}
|
||||
</template>
|
||||
</UTable>
|
||||
|
||||
</div>
|
||||
<div v-else-if="item.label === 'Dokumente'">
|
||||
<Toolbar>
|
||||
<DocumentUpload
|
||||
type="vehicle"
|
||||
:element-id="currentItem.id"
|
||||
/>
|
||||
</Toolbar>
|
||||
|
||||
<DocumentList
|
||||
:documents="dataStore.getDocumentsByVehicleId(currentItem.id)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</UTabs>
|
||||
<UForm
|
||||
v-else-if="mode == 'edit' || mode == 'create'"
|
||||
class="p-5"
|
||||
>
|
||||
|
||||
<UFormGroup
|
||||
label="Kennzeichen:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.licensePlate"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
|
||||
|
||||
<UFormGroup
|
||||
label="Fahrzeug aktiv:"
|
||||
>
|
||||
<UCheckbox
|
||||
v-model="itemInfo.active"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Typ:"
|
||||
>
|
||||
<UTextarea
|
||||
v-model="itemInfo.type"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Fahrer:"
|
||||
>
|
||||
<USelectMenu
|
||||
v-model="itemInfo.driver"
|
||||
:options="[{id: null, fullName: 'Kein Fahrer'},...dataStore.profiles]"
|
||||
option-attribute="fullName"
|
||||
value-attribute="id"
|
||||
|
||||
>
|
||||
<template #label>
|
||||
{{dataStore.profiles.find(profile => profile.id === itemInfo.driver) ? dataStore.profiles.find(profile => profile.id === itemInfo.driver).fullName : 'Kein Fahrer ausgewählt'}}
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</UFormGroup>
|
||||
</UForm>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
103
pages/vehicles/index.vue
Normal file
103
pages/vehicles/index.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<UDashboardNavbar title="Fahrzeuge" :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(`/vehicles/create`)">+ Fahrzeug</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>
|
||||
|
||||
<UTable
|
||||
:rows="filteredRows"
|
||||
:columns="columns"
|
||||
class="w-full"
|
||||
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
|
||||
@select="(i) => router.push(`/vehicles/show/${i.id}`) "
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Fahrzeuge anzuzeigen' }"
|
||||
>
|
||||
|
||||
</UTable>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
defineShortcuts({
|
||||
'/': () => {
|
||||
//console.log(searchinput)
|
||||
//searchinput.value.focus()
|
||||
document.getElementById("searchinput").focus()
|
||||
},
|
||||
'+': () => {
|
||||
router.push("/tasks/create")
|
||||
}
|
||||
})
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const router = useRouter()
|
||||
|
||||
const templateColumns = [
|
||||
{
|
||||
key: 'licensePlate',
|
||||
label: "Kennzeichen:",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "type",
|
||||
label: "Typ:",
|
||||
sortable: true
|
||||
}
|
||||
]
|
||||
const selectedColumns = ref(templateColumns)
|
||||
const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
|
||||
|
||||
const searchString = ref('')
|
||||
|
||||
const filteredRows = computed(() => {
|
||||
if(!searchString.value) {
|
||||
return dataStore.vehicles
|
||||
}
|
||||
|
||||
return dataStore.vehicles.filter(item => {
|
||||
return Object.values(item).some((value) => {
|
||||
return String(value).toLowerCase().includes(searchString.value.toLowerCase())
|
||||
})
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
226
pages/vendors/[mode]/[[id]].vue
vendored
Normal file
226
pages/vendors/[mode]/[[id]].vue
vendored
Normal file
@@ -0,0 +1,226 @@
|
||||
<script setup>
|
||||
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const toast = useToast()
|
||||
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({
|
||||
infoData: {}
|
||||
})
|
||||
|
||||
//Functions
|
||||
const setupPage = () => {
|
||||
if (mode.value === "show" || mode.value === "edit") {
|
||||
currentItem.value = dataStore.getVendorById(Number(useRoute().params.id))
|
||||
}
|
||||
|
||||
if (mode.value === "edit") itemInfo.value = currentItem.value
|
||||
}
|
||||
|
||||
const editItem = async () => {
|
||||
router.push(`/vendors/edit/${currentItem.value.id}`)
|
||||
}
|
||||
|
||||
const cancelEditorCreate = () => {
|
||||
if(currentItem.value) {
|
||||
router.push(`/vendors/show/${currentItem.value.id}`)
|
||||
} else {
|
||||
router.push(`/vendors`)
|
||||
}
|
||||
}
|
||||
|
||||
setupPage()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardNavbar :title="currentItem ? `Lieferant: ${currentItem.name}` : (mode === 'create' ? 'Lieferant erstellen' : 'Lieferant bearbeiten')">
|
||||
<template #right>
|
||||
<UButton
|
||||
v-if="mode === 'edit'"
|
||||
@click="dataStore.updateItem('vendors',itemInfo)"
|
||||
>
|
||||
Speichern
|
||||
</UButton>
|
||||
<UButton
|
||||
v-else-if="mode === 'create'"
|
||||
@click="dataStore.createNewItem('vendors',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: 'Dokumente'}]"
|
||||
v-if="currentItem && mode == 'show'"
|
||||
class="p-5"
|
||||
>
|
||||
<template #item="{item}">
|
||||
<div v-if="item.label === 'Informationen'" class="mt-5 flex">
|
||||
<div class="w-1/2 mr-5">
|
||||
<UCard>
|
||||
<div v-if="currentItem.infoData" class="text-wrap">
|
||||
<p v-if="currentItem.infoData.street">Straße + Hausnummer: {{currentItem.infoData.street}}</p>
|
||||
<p v-if="currentItem.infoData.zip && currentItem.infoData.city">PLZ + Ort: {{currentItem.infoData.zip}} {{currentItem.infoData.city}}</p>
|
||||
<p v-if="currentItem.infoData.tel">Telefon: {{currentItem.infoData.tel}}</p>
|
||||
<p v-if="currentItem.infoData.email">E-Mail: {{currentItem.infoData.email}}</p>
|
||||
<p v-if="currentItem.infoData.web">Web: {{currentItem.infoData.web}}</p>
|
||||
<p v-if="currentItem.infoData.ustid">USt-Id: {{currentItem.infoData.ustid}}</p>
|
||||
</div>
|
||||
</UCard>
|
||||
<UCard class="mt-5">
|
||||
<Toolbar>
|
||||
<UButton
|
||||
@click="router.push(`/contacts/create?vendor=${currentItem.id}`)"
|
||||
>
|
||||
+ Ansprechpartner
|
||||
</UButton>
|
||||
</Toolbar>
|
||||
<UTable
|
||||
:rows="dataStore.getContactsByVendorId(currentItem.id)"
|
||||
@select="(row) => router.push(`/contacts/show/${row.id}`)"
|
||||
:columns="[{label: 'Anrede', key: 'salutation'},{label: 'Name', key: 'fullName'},{label: 'Rolle', key: 'role'}]"
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Ansprechpartner' }"
|
||||
|
||||
>
|
||||
|
||||
</UTable>
|
||||
</UCard>
|
||||
</div>
|
||||
<div class="w-1/2">
|
||||
<UCard class="h-full">
|
||||
<HistoryDisplay
|
||||
type="vendor"
|
||||
v-if="currentItem"
|
||||
:element-id="currentItem.id"
|
||||
:render-headline="true"
|
||||
/>
|
||||
</UCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<UCard class="mt-5" v-else>
|
||||
<div v-if="item.label === 'Dokumente'">
|
||||
<InputGroup>
|
||||
<DocumentUpload
|
||||
type="vendor"
|
||||
:element-id="currentItem.id"
|
||||
/>
|
||||
</InputGroup>
|
||||
|
||||
<DocumentList
|
||||
:documents="dataStore.getDocumentsByVendorId(currentItem.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="Lieferantennr.:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.vendorNumber"
|
||||
placeholder="Leer lassen für automatisch generierte Nummer"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Straße + Hausnummer"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.infoData.street"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Postleitzahl"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.infoData.zip"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Ort"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.infoData.city"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Land"
|
||||
>
|
||||
<USelectMenu
|
||||
:options="['Deutschland','Niederlande','Belgien','Italien', 'Frankreich','Irland','USA','Spanien', 'Schweden']"
|
||||
v-model="itemInfo.infoData.country"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup
|
||||
label="Telefon:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.infoData.tel"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="E-Mail:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.infoData.email"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Webseite:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.infoData.web"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="USt-Id:"
|
||||
>
|
||||
<UInput
|
||||
v-model="itemInfo.infoData.ustid"
|
||||
/>
|
||||
</UFormGroup>
|
||||
</UForm>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
112
pages/vendors/index.vue
vendored
Normal file
112
pages/vendors/index.vue
vendored
Normal file
@@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<UDashboardNavbar title="Lieferanten" :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(`/vendors/create/`)">+ Lieferant</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>
|
||||
|
||||
<UTable
|
||||
:rows="filteredRows"
|
||||
:columns="columns"
|
||||
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
|
||||
class="w-full"
|
||||
@select="(i) => router.push(`/vendors/show/${i.id}`)"
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Lieferanten anzuzeigen' }"
|
||||
>
|
||||
<template #address-data="{row}">
|
||||
{{row.infoData.street ? `${row.infoData.street}, ` : ''}}{{row.infoData.special ? `${row.infoData.special},` : ''}} {{(row.infoData.zip || row.infoData.city) ? `${row.infoData.zip} ${row.infoData.city}, ` : ''}} {{row.infoData.country}}
|
||||
</template>
|
||||
</UTable>
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
defineShortcuts({
|
||||
'/': () => {
|
||||
//console.log(searchinput)
|
||||
//searchinput.value.focus()
|
||||
document.getElementById("searchinput").focus()
|
||||
},
|
||||
'+': () => {
|
||||
router.push("/vendors/create")
|
||||
}
|
||||
})
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const router = useRouter()
|
||||
const mode = ref("show")
|
||||
|
||||
const templateColumns = [
|
||||
{
|
||||
key: 'vendorNumber',
|
||||
label: "Lieferantennr.",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "name",
|
||||
label: "Name",
|
||||
sortable: true
|
||||
},
|
||||
{
|
||||
key: "address",
|
||||
label: "Adresse",
|
||||
sortable: true
|
||||
}
|
||||
]
|
||||
const selectedColumns = ref(templateColumns)
|
||||
const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
|
||||
|
||||
const searchString = ref('')
|
||||
|
||||
const filteredRows = computed(() => {
|
||||
if(!searchString.value) {
|
||||
return dataStore.vendors
|
||||
}
|
||||
|
||||
return dataStore.vendors.filter(item => {
|
||||
return Object.values(item).some((value) => {
|
||||
return String(value).toLowerCase().includes(searchString.value.toLowerCase())
|
||||
})
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
122
pages/workingtimes/[mode]/[[id]].vue
Normal file
122
pages/workingtimes/[mode]/[[id]].vue
Normal file
@@ -0,0 +1,122 @@
|
||||
<script setup>
|
||||
import dayjs from "dayjs";
|
||||
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const toast = useToast()
|
||||
const id = ref(route.params.id ? route.params.id : null )
|
||||
|
||||
const mode = ref(route.params.mode || "show")
|
||||
const itemInfo = ref({
|
||||
startDate: new Date(),
|
||||
endDate: new Date(),
|
||||
profile: dataStore.activeProfile.id
|
||||
})
|
||||
const oldItemInfo = ref({})
|
||||
|
||||
const setupPage = () => {
|
||||
if(route.params.id && mode.value === 'edit') {
|
||||
itemInfo.value = dataStore.getWorkingTimeById(Number(route.params.id))
|
||||
//setStartEnd()
|
||||
}
|
||||
oldItemInfo.value = itemInfo.value
|
||||
}
|
||||
|
||||
/*const setStartEnd = () => {
|
||||
console.log("test")
|
||||
console.log(String(itemInfo.value.date).split("T")[0])
|
||||
itemInfo.value.date = String(itemInfo.value.date).split("T")[0]
|
||||
itemInfo.value.start = new Date(itemInfo.value.date + "T" + itemInfo.value.start)
|
||||
itemInfo.value.end = new Date(itemInfo.value.date + "T" + itemInfo.value.end)
|
||||
}*/
|
||||
|
||||
setupPage()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardNavbar
|
||||
:title="mode === 'show' ? `Anwesenheit: ${itemInfo.profile}` : (itemInfo.id ? 'Anwesenheit bearbeiten' :'Anwesenheit erstellen')"
|
||||
>
|
||||
<template #right>
|
||||
<UButton
|
||||
color="rose"
|
||||
v-if="mode === 'edit'"
|
||||
@click="router.push('/workingtimes')"
|
||||
>
|
||||
Abbrechen
|
||||
</UButton>
|
||||
<UButton
|
||||
v-if="mode === 'edit' && itemInfo.id"
|
||||
@click="dataStore.updateItem('workingtimes',itemInfo)"
|
||||
>
|
||||
Speichern
|
||||
</UButton>
|
||||
<UButton
|
||||
v-else-if="mode === 'edit' && !itemInfo.id"
|
||||
>
|
||||
Erstellen
|
||||
</UButton>
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
|
||||
<UForm class="p-5">
|
||||
<UFormGroup
|
||||
label="Mitarbeiter:"
|
||||
>
|
||||
<USelectMenu
|
||||
:options="dataStore.profiles"
|
||||
v-model="itemInfo.profile"
|
||||
option-attribute="fullName"
|
||||
value-attribute="id"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup label="Start:">
|
||||
<UPopover :popper="{ placement: 'bottom-start' }">
|
||||
<UButton
|
||||
icon="i-heroicons-calendar-days-20-solid"
|
||||
:label="itemInfo.startDate ? dayjs(itemInfo.startDate).format('HH:mm') : 'Datum auswählen'"
|
||||
variant="outline"
|
||||
/>
|
||||
|
||||
<template #panel="{ close }">
|
||||
<LazyDatePicker v-model="itemInfo.startDate" @close="itemInfo.endDate = itemInfo.startDate" mode="dateTime"/>
|
||||
</template>
|
||||
</UPopover>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup label="Ende:">
|
||||
<UPopover :popper="{ placement: 'bottom-start' }">
|
||||
<UButton
|
||||
variant="outline"
|
||||
icon="i-heroicons-calendar-days-20-solid"
|
||||
:label="itemInfo.endDate ? dayjs(itemInfo.endDate).format('HH:mm') : 'Datum auswählen'"
|
||||
/>
|
||||
|
||||
<template #panel="{ close }">
|
||||
<LazyDatePicker v-model="itemInfo.endDate" @close="close" mode="time"/>
|
||||
</template>
|
||||
</UPopover>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Genehmigt:"
|
||||
>
|
||||
<UCheckbox
|
||||
v-model="itemInfo.approved"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UFormGroup
|
||||
label="Notizen:"
|
||||
>
|
||||
<UTextarea
|
||||
v-model="itemInfo.notes"
|
||||
/>
|
||||
</UFormGroup>
|
||||
</UForm>
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
267
pages/workingtimes/index.vue
Normal file
267
pages/workingtimes/index.vue
Normal file
@@ -0,0 +1,267 @@
|
||||
<script setup>
|
||||
import dayjs from "dayjs";
|
||||
import customParseFormat from "dayjs/plugin/customParseFormat"
|
||||
|
||||
dayjs.extend(customParseFormat)
|
||||
|
||||
definePageMeta({
|
||||
middleware: "auth"
|
||||
})
|
||||
|
||||
const dataStore = useDataStore()
|
||||
const supabase = useSupabaseClient()
|
||||
const user = useSupabaseUser()
|
||||
const toast = useToast()
|
||||
const router = useRouter()
|
||||
|
||||
|
||||
const timeInfo = ref({
|
||||
profile: "",
|
||||
start: "",
|
||||
end: null,
|
||||
notes: null,
|
||||
})
|
||||
|
||||
const filterUser = ref(dataStore.activeProfile.id || "")
|
||||
|
||||
|
||||
const filteredRows = computed(() => {
|
||||
|
||||
let times = dataStore.workingtimes
|
||||
|
||||
times = times.filter(i => i.profile === filterUser.value)
|
||||
|
||||
/*if(dataStore.hasRight('viewTimes')) {
|
||||
if(filterUser.value !== "") {
|
||||
times = times.filter(i => i.profile === filterUser.value)
|
||||
}
|
||||
} else if(dataStore.hasRight('viewOwnTimes')) {
|
||||
times = times.filter(i => i.profile === dataStore.getOwnProfile.id)
|
||||
} else {
|
||||
times = []
|
||||
}*/
|
||||
|
||||
return times
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
const itemInfo = ref({
|
||||
profile: "",
|
||||
start: new Date(),
|
||||
end: "",
|
||||
notes: null,
|
||||
})
|
||||
|
||||
|
||||
const columns = [
|
||||
{
|
||||
key:"state",
|
||||
label: "Status",
|
||||
sortable:true
|
||||
},
|
||||
{
|
||||
key: "profile",
|
||||
label: "Mitarbeiter",
|
||||
sortable:true
|
||||
},
|
||||
{
|
||||
key: "date",
|
||||
label: "Datum",
|
||||
sortable:true
|
||||
},
|
||||
{
|
||||
key:"startDate",
|
||||
label:"Start",
|
||||
sortable:true
|
||||
},
|
||||
{
|
||||
key: "endDate",
|
||||
label: "Ende",
|
||||
sortable:true
|
||||
},
|
||||
{
|
||||
key: "duration",
|
||||
label: "Dauer",
|
||||
sortable:true
|
||||
},
|
||||
{
|
||||
key: "notes",
|
||||
label: "Notizen",
|
||||
sortable:true
|
||||
}
|
||||
]
|
||||
|
||||
const runningTimeInfo = ref({})
|
||||
|
||||
const startTime = async () => {
|
||||
console.log("started")
|
||||
timeInfo.value = {
|
||||
profile: dataStore.activeProfile.id,
|
||||
startDate: dayjs(),
|
||||
tenant: dataStore.currentTenant,
|
||||
state: "Im Web gestartet"
|
||||
}
|
||||
|
||||
const {data,error} = await supabase
|
||||
.from("workingtimes")
|
||||
.insert([timeInfo.value])
|
||||
.select()
|
||||
if(error) {
|
||||
console.log(error)
|
||||
} else if(data) {
|
||||
//timeInfo.value = data[0]
|
||||
await dataStore.fetchWorkingTimes()
|
||||
runningTimeInfo.value = timeInfo.value//dataStore.times.find(time => time.profile === dataStore.activeProfile.id && !time.endDate)
|
||||
}
|
||||
}
|
||||
|
||||
const stopStartedTime = async () => {
|
||||
runningTimeInfo.value.endDate = dayjs()
|
||||
runningTimeInfo.value.state = "Im Web gestoppt"
|
||||
|
||||
const {data,error} = await supabase
|
||||
.from("workingtimes")
|
||||
.update(runningTimeInfo.value)
|
||||
.eq('id',runningTimeInfo.value.id)
|
||||
.select()
|
||||
console.log(data)
|
||||
|
||||
if(error) {
|
||||
console.log(error)
|
||||
} else {
|
||||
toast.add({title: "Zeit erfolgreich gestoppt"})
|
||||
runningTimeInfo.value = {}
|
||||
dataStore.fetchWorkingTimes()
|
||||
}
|
||||
}
|
||||
|
||||
if(dataStore.workingtimes.find(time => time.profile === dataStore.activeProfile.id && !time.endDate)) {
|
||||
runningTimeInfo.value = dataStore.workingtimes.find(time => time.profile === dataStore.activeProfile.id && !time.end)
|
||||
}
|
||||
|
||||
const getDuration = (time) => {
|
||||
const minutes = Math.floor(dayjs(time.endDate).diff(dayjs(time.startDate),'minutes',true))
|
||||
const hours = Math.floor(minutes/60)
|
||||
return {
|
||||
//dezimal: dez,
|
||||
hours: hours,
|
||||
minutes: minutes,
|
||||
composed: `${hours}:${String(minutes % 60).padStart(2,"0")} h`
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UDashboardNavbar title="Anwesenheiten">
|
||||
<template #right>
|
||||
<UButton
|
||||
@click="startTime"
|
||||
:disabled="runningTimeInfo.id "
|
||||
>
|
||||
Start
|
||||
</UButton>
|
||||
<UButton
|
||||
@click="router.push(`/workingtimes/edit`)"
|
||||
>
|
||||
Erstellen
|
||||
</UButton>
|
||||
</template>
|
||||
</UDashboardNavbar>
|
||||
<UDashboardToolbar>
|
||||
<template #left>
|
||||
|
||||
<USelectMenu
|
||||
v-if="dataStore.hasRight('viewTimes')"
|
||||
:options="dataStore.profiles"
|
||||
option-attribute="fullName"
|
||||
value-attribute="id"
|
||||
v-model="filterUser"
|
||||
>
|
||||
<template #label>
|
||||
{{dataStore.getProfileById(filterUser) ? dataStore.getProfileById(filterUser).fullName : "Kein Benutzer ausgewählt"}}
|
||||
</template>
|
||||
</USelectMenu>
|
||||
</template>
|
||||
</UDashboardToolbar>
|
||||
<div class="mx-3">
|
||||
<UAlert
|
||||
v-if="runningTimeInfo.startDate && !runningTimeInfo.endDate"
|
||||
class="my-3"
|
||||
title="Laufende Zeit:"
|
||||
>
|
||||
<template #description>
|
||||
<p>Start: {{dayjs(runningTimeInfo.startDate).format("HH:mm")}}</p>
|
||||
<p>Dauer: {{dayjs().diff(dayjs(runningTimeInfo.startDate),'minutes') > 59 ? `${Math.floor(dayjs().diff(dayjs(runningTimeInfo.startDate),'minutes') / 60)}:${dayjs().diff(dayjs(runningTimeInfo.startDate),'minutes') % 60} h` : dayjs().diff(dayjs(runningTimeInfo.startDate),'minutes') + ' min' }}</p>
|
||||
|
||||
<UFormGroup
|
||||
class="mt-2"
|
||||
label="Notizen:"
|
||||
>
|
||||
<UTextarea
|
||||
v-model="runningTimeInfo.notes"
|
||||
/>
|
||||
</UFormGroup>
|
||||
<UButton
|
||||
class="mt-3"
|
||||
@click="stopStartedTime"
|
||||
:disabled="!runningTimeInfo.id"
|
||||
>
|
||||
Stop
|
||||
</UButton>
|
||||
</template>
|
||||
</UAlert>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<UTable
|
||||
class="mt-3"
|
||||
:columns="columns"
|
||||
:rows="filteredRows"
|
||||
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Noch keine Einträge' }"
|
||||
@select="(row) => {
|
||||
router.push(`/workingtimes/edit/${row.id}`)
|
||||
/*configTimeMode = 'edit';
|
||||
itemInfo = row;
|
||||
showConfigTimeModal = true*/}"
|
||||
>
|
||||
<!-- <template #state-data="{row}">
|
||||
<span
|
||||
v-if="row.state === 'Entwurf'"
|
||||
class="text-rose-500"
|
||||
>{{row.state}}</span>
|
||||
<span
|
||||
v-if="row.state === 'Eingereicht'"
|
||||
class="text-cyan-500"
|
||||
>{{row.state}}</span>
|
||||
<span
|
||||
v-if="row.state === 'Bestätigt'"
|
||||
class="text-primary-500"
|
||||
>{{row.state}}</span>
|
||||
</template>-->
|
||||
<template #profile-data="{row}">
|
||||
{{dataStore.profiles.find(profile => profile.id === row.profile) ? dataStore.profiles.find(profile => profile.id === row.profile).fullName : row.profile }}
|
||||
</template>
|
||||
<template #date-data="{row}">
|
||||
{{dayjs(row.startDate).format("DD.MM.YYYY")}}
|
||||
</template>
|
||||
|
||||
<template #startDate-data="{row}">
|
||||
{{dayjs(row.startDate).format("HH:mm")}} Uhr
|
||||
</template>
|
||||
<template #endDate-data="{row}">
|
||||
{{row.endDate ? dayjs(row.endDate).format("HH:mm") + " Uhr" : ""}}
|
||||
</template>
|
||||
<template #duration-data="{row}">
|
||||
{{row.endDate ? getDuration(row).composed : ""}}
|
||||
</template>
|
||||
</UTable>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user