Compare commits

..

8 Commits

Author SHA1 Message Date
e7554fa2cc .gitea/ISSUE_TEMPLATE/feature_request.md aktualisiert
All checks were successful
Build and Push Docker Images / build-backend (push) Successful in 16s
Build and Push Docker Images / build-frontend (push) Successful in 16s
2026-01-22 17:42:28 +00:00
7c1fabf58a .gitea/ISSUE_TEMPLATE/bug_report.md aktualisiert
All checks were successful
Build and Push Docker Images / build-backend (push) Successful in 17s
Build and Push Docker Images / build-frontend (push) Successful in 16s
2026-01-22 17:40:58 +00:00
1203b6cbd1 .gitea/ISSUE_TEMPLATE/bug_report.md aktualisiert
All checks were successful
Build and Push Docker Images / build-backend (push) Successful in 16s
Build and Push Docker Images / build-frontend (push) Successful in 16s
2026-01-15 11:39:03 +00:00
525f2906fb .gitea/ISSUE_TEMPLATE/feature_request.md aktualisiert
Some checks failed
Build and Push Docker Images / build-frontend (push) Has been cancelled
Build and Push Docker Images / build-backend (push) Has been cancelled
2026-01-15 11:38:50 +00:00
b105382abf .gitea/ISSUE_TEMPLATE/bug_report.md aktualisiert
All checks were successful
Build and Push Docker Images / build-backend (push) Successful in 16s
Build and Push Docker Images / build-frontend (push) Successful in 15s
2026-01-15 11:38:00 +00:00
b1cdec7d17 Merge pull request 'Added feature request template' (#62) from dev into main
All checks were successful
Build and Push Docker Images / build-backend (push) Successful in 17s
Build and Push Docker Images / build-frontend (push) Successful in 16s
Reviewed-on: #62
2026-01-15 11:31:57 +00:00
f1d512b2e5 Merge pull request 'dev' (#61) from dev into main
All checks were successful
Build and Push Docker Images / build-backend (push) Successful in 17s
Build and Push Docker Images / build-frontend (push) Successful in 16s
Reviewed-on: #61
2026-01-15 11:29:15 +00:00
db21b43120 Merge pull request 'dev' (#40) from dev into main
All checks were successful
Build and Push Docker Images / build-backend (push) Successful in 18s
Build and Push Docker Images / build-frontend (push) Successful in 16s
Reviewed-on: #40
2026-01-08 22:21:06 +00:00
16 changed files with 1373 additions and 1287 deletions

View File

@@ -2,37 +2,18 @@
name: 🐛 Bug Report name: 🐛 Bug Report
about: Erstelle einen Bericht, um uns zu helfen, das Projekt zu verbessern. about: Erstelle einen Bericht, um uns zu helfen, das Projekt zu verbessern.
title: '[BUG] ' title: '[BUG] '
labels: bug labels: Problem
assignees: '' assignees: ''
--- ---
**Beschreibung** **Beschreibung**
Eine klare und prägnante Beschreibung des Fehlers.
**Reproduktion** **Reproduktion**
Schritte, um den Fehler zu reproduzieren:
Entweder:
1. Gehe zu '...'
2. Klicke auf '...'
3. Scrolle runter zu '...'
4. Siehe Fehler
Oder Link zur Seite
**Erwartetes Verhalten**
Eine klare Beschreibung dessen, was du erwartet hast.
**Screenshots** **Screenshots**
Falls zutreffend, füge hier Screenshots oder Gifs hinzu, um das Problem zu verdeutlichen.
**Achtung: Achte bitte auf Datenschutz deiner Daten sowie der Daten deiner Kunden. Sollten ein Screenshot nur mit Daten möglich sein, schwärze diese bitte vor dem Upload.** **Achtung: Achte bitte auf Datenschutz deiner Daten sowie der Daten deiner Kunden. Sollten ein Screenshot nur mit Daten möglich sein, schwärze diese bitte vor dem Upload.**
**Umgebung:**
- Betriebssystem: [z.B. Windows, macOS, Linux]
- Browser / Version (falls relevant): [z.B. Chrome 120]
- Projekt-Version: [z.B. v1.0.2]
**Zusätzlicher Kontext**
Füge hier alle anderen Informationen zum Problem hinzu.

View File

@@ -2,19 +2,16 @@
name: ✨ Feature Request name: ✨ Feature Request
about: Schlage eine Idee für dieses Projekt vor. about: Schlage eine Idee für dieses Projekt vor.
title: '[FEATURE] ' title: '[FEATURE] '
labels: enhancement labels: Funktionswunsch
assignees: '' assignees: ''
--- ---
**Ist dein Feature-Wunsch mit einem Problem verbunden?** **Ist dein Feature-Wunsch mit einem Problem verbunden?**
Eine klare Beschreibung des Problems (z.B. "Ich bin immer genervt, wenn...").
**Lösungsvorschlag** **Lösungsvorschlag**
Eine klare Beschreibung dessen, was du dir wünschst und wie es funktionieren soll.
**Alternativen** **Alternativen**
Hast du über alternative Lösungen oder Workarounds nachgedacht?
**Zusätzlicher Kontext**
Hier ist Platz für weitere Informationen, Skizzen oder Beispiele von anderen Tools.

View File

@@ -10,23 +10,30 @@ import {
or or
} from "drizzle-orm" } from "drizzle-orm"
import { resourceConfig } from "../../utils/resource.config";
import { useNextNumberRangeNumber } from "../../utils/functions";
import {resourceConfig} from "../../utils/resource.config";
import {useNextNumberRangeNumber} from "../../utils/functions";
import {stafftimeentries} from "../../../db/schema";
// ------------------------------------------------------------- // -------------------------------------------------------------
// SQL Suche auf mehreren Feldern (Haupttabelle + Relationen) // SQL Volltextsuche auf mehreren Feldern
// ------------------------------------------------------------- // -------------------------------------------------------------
function buildSearchCondition(columns: any[], search: string) {
function buildSearchCondition(table: any, columns: string[], search: string) {
if (!search || !columns.length) return null if (!search || !columns.length) return null
const term = `%${search.toLowerCase()}%` const term = `%${search.toLowerCase()}%`
const conditions = columns const conditions = columns
.map((colName) => table[colName])
.filter(Boolean) .filter(Boolean)
.map((col) => ilike(col, term)) .map((col) => ilike(col, term))
if (conditions.length === 0) return null if (conditions.length === 0) return null
// @ts-ignore
return or(...conditions) return or(...conditions)
} }
@@ -47,86 +54,96 @@ export default async function resourceRoutes(server: FastifyInstance) {
asc?: string asc?: string
} }
const { resource } = req.params as { resource: string } const {resource} = req.params as {resource: string}
const config = resourceConfig[resource] const table = resourceConfig[resource].table
const table = config.table
// WHERE-Basis
let whereCond: any = eq(table.tenant, tenantId) let whereCond: any = eq(table.tenant, tenantId)
let q = server.db.select().from(table).$dynamic()
const searchCols: any[] = (config.searchColumns || []).map(c => table[c]) // 🔍 SQL Search
if(search) {
const searchCond = buildSearchCondition(
table,
resourceConfig[resource].searchColumns,
search.trim()
)
if (config.mtoLoad) { if (searchCond) {
config.mtoLoad.forEach(rel => { whereCond = and(whereCond, searchCond)
const relConfig = resourceConfig[rel + "s"] || resourceConfig[rel] }
if (relConfig) {
const relTable = relConfig.table
// FIX: Nur joinen, wenn es keine Self-Reference ist (verhindert ERROR 42712)
if (relTable !== table) {
// @ts-ignore
q = q.leftJoin(relTable, eq(table[rel], relTable.id))
if (relConfig.searchColumns) {
relConfig.searchColumns.forEach(c => {
if (relTable[c]) searchCols.push(relTable[c])
})
}
}
}
})
} }
if (search) { // Base Query
const searchCond = buildSearchCondition(searchCols, search.trim()) let q = server.db.select().from(table).where(whereCond)
if (searchCond) whereCond = and(whereCond, searchCond)
}
q = q.where(whereCond)
// Sortierung
if (sort) { if (sort) {
const col = (table as any)[sort] const col = (table as any)[sort]
if (col) { if (col) {
q = ascQuery === "true" ? q.orderBy(asc(col)) : q.orderBy(desc(col)) //@ts-ignore
q = ascQuery === "true"
? q.orderBy(asc(col))
: q.orderBy(desc(col))
} }
} }
const queryData = await q const queryData = await q
// Transformation: Falls Joins genutzt wurden, das Hauptobjekt extrahieren
const rows = queryData.map(r => r[resource] || r.table || r);
// RELATION LOADING // RELATION LOADING (MANY-TO-ONE)
let data = [...rows]
if(config.mtoLoad) { let ids = {}
let ids: any = {} let lists = {}
let lists: any = {} let maps = {}
let maps: any = {} let data = [...queryData]
config.mtoLoad.forEach(rel => {
ids[rel] = [...new Set(rows.map(r => r[rel]).filter(Boolean))]; if(resourceConfig[resource].mtoLoad) {
resourceConfig[resource].mtoLoad.forEach(relation => {
ids[relation] = [...new Set(queryData.map(r => r[relation]).filter(Boolean))];
}) })
for await (const rel of config.mtoLoad) {
const relConf = resourceConfig[rel + "s"] || resourceConfig[rel]; for await (const relation of resourceConfig[resource].mtoLoad ) {
const relTab = relConf.table console.log(relation)
lists[rel] = ids[rel].length ? await server.db.select().from(relTab).where(inArray(relTab.id, ids[rel])) : [] lists[relation] = ids[relation].length ? await server.db.select().from(resourceConfig[relation + "s"].table).where(inArray(resourceConfig[relation + "s"].table.id, ids[relation])) : []
maps[rel] = Object.fromEntries(lists[rel].map((i: any) => [i.id, i]));
} }
data = rows.map(row => {
let toReturn = { ...row } resourceConfig[resource].mtoLoad.forEach(relation => {
config.mtoLoad.forEach(rel => { maps[relation] = Object.fromEntries(lists[relation].map(i => [i.id, i]));
toReturn[rel] = row[rel] ? maps[rel][row[rel]] : null })
data = queryData.map(row => {
let toReturn = {
...row
}
resourceConfig[resource].mtoLoad.forEach(relation => {
toReturn[relation] = row[relation] ? maps[relation][row[relation]] : null
}) })
return toReturn return toReturn
}); });
} }
if(config.mtmListLoad) { if(resourceConfig[resource].mtmListLoad) {
for await (const relation of config.mtmListLoad) { for await (const relation of resourceConfig[resource].mtmListLoad) {
const relTable = resourceConfig[relation].table console.log(relation)
const parentKey = resource.substring(0, resource.length - 1) console.log(resource.substring(0,resource.length-1))
const relationRows = await server.db.select().from(relTable).where(inArray(relTable[parentKey], data.map(i => i.id)))
data = data.map(row => ({ const relationRows = await server.db.select().from(resourceConfig[relation].table).where(inArray(resourceConfig[relation].table[resource.substring(0,resource.length-1)],data.map(i => i.id)))
...row,
[relation]: relationRows.filter(i => i[parentKey] === row.id) console.log(relationRows.length)
}))
data = data.map(row => {
let toReturn = {
...row
}
toReturn[relation] = relationRows.filter(i => i[resource.substring(0,resource.length-1)] === row.id)
return toReturn
})
} }
} }
@@ -138,130 +155,212 @@ export default async function resourceRoutes(server: FastifyInstance) {
} }
}) })
// ------------------------------------------------------------- // -------------------------------------------------------------
// PAGINATED LIST // PAGINATED LIST
// ------------------------------------------------------------- // -------------------------------------------------------------
server.get("/resource/:resource/paginated", async (req, reply) => { server.get("/resource/:resource/paginated", async (req, reply) => {
try { try {
const tenantId = req.user?.tenant_id; const tenantId = req.user?.tenant_id;
if (!tenantId) return reply.code(400).send({ error: "No tenant selected" }); if (!tenantId) {
return reply.code(400).send({ error: "No tenant selected" });
const { resource } = req.params as { resource: string };
const config = resourceConfig[resource];
const table = config.table;
const { queryConfig } = req;
const { pagination, sort, filters } = queryConfig;
const { search, distinctColumns } = req.query as { search?: string; distinctColumns?: string; };
let whereCond: any = eq(table.tenant, tenantId);
const searchCols: any[] = (config.searchColumns || []).map(c => table[c]);
let countQuery = server.db.select({ value: count(table.id) }).from(table).$dynamic();
let mainQuery = server.db.select().from(table).$dynamic();
if (config.mtoLoad) {
config.mtoLoad.forEach(rel => {
const relConfig = resourceConfig[rel + "s"] || resourceConfig[rel];
if (relConfig) {
const relTable = relConfig.table;
// FIX: Self-Reference Check
if (relTable !== table) {
countQuery = countQuery.leftJoin(relTable, eq(table[rel], relTable.id));
// @ts-ignore
mainQuery = mainQuery.leftJoin(relTable, eq(table[rel], relTable.id));
if (relConfig.searchColumns) {
relConfig.searchColumns.forEach(c => {
if (relTable[c]) searchCols.push(relTable[c]);
});
}
}
}
});
} }
if (search) { const {resource} = req.params as {resource: string};
const searchCond = buildSearchCondition(searchCols, search.trim());
if (searchCond) whereCond = and(whereCond, searchCond); const {queryConfig} = req;
const {
pagination,
sort,
filters,
paginationDisabled
} = queryConfig;
const { search, distinctColumns } = req.query as {
search?: string;
distinctColumns?: string;
};
let table = resourceConfig[resource].table
let whereCond: any = eq(table.tenant, tenantId);
if(search) {
const searchCond = buildSearchCondition(
table,
resourceConfig[resource].searchColumns,
search.trim()
)
if (searchCond) {
whereCond = and(whereCond, searchCond)
}
} }
if (filters) { if (filters) {
for (const [key, val] of Object.entries(filters)) { for (const [key, val] of Object.entries(filters)) {
const col = (table as any)[key]; const col = (table as any)[key];
if (!col) continue; if (!col) continue;
whereCond = Array.isArray(val) ? and(whereCond, inArray(col, val)) : and(whereCond, eq(col, val as any));
if (Array.isArray(val)) {
whereCond = and(whereCond, inArray(col, val));
} else {
whereCond = and(whereCond, eq(col, val as any));
}
} }
} }
const totalRes = await countQuery.where(whereCond); // -----------------------------------------------
// COUNT (for pagination)
// -----------------------------------------------
const totalRes = await server.db
.select({ value: count(table.id) })
.from(table)
.where(whereCond);
const total = Number(totalRes[0]?.value ?? 0); const total = Number(totalRes[0]?.value ?? 0);
// -----------------------------------------------
// DISTINCT VALUES (regardless of pagination)
// -----------------------------------------------
const distinctValues: Record<string, any[]> = {};
if (distinctColumns) {
for (const colName of distinctColumns.split(",").map(c => c.trim())) {
const col = (table as any)[colName];
if (!col) continue;
const rows = await server.db
.select({ v: col })
.from(table)
.where(eq(table.tenant, tenantId));
const values = rows
.map(r => r.v)
.filter(v => v != null && v !== "");
distinctValues[colName] = [...new Set(values)].sort();
}
}
// PAGINATION
const offset = pagination?.offset ?? 0; const offset = pagination?.offset ?? 0;
const limit = pagination?.limit ?? 100; const limit = pagination?.limit ?? 100;
mainQuery = mainQuery.where(whereCond).offset(offset).limit(limit); // SORTING
let orderField: any = null;
let direction: "asc" | "desc" = "asc";
if (sort?.length > 0) { if (sort?.length > 0) {
const s = sort[0]; const s = sort[0];
const col = (table as any)[s.field]; const col = (table as any)[s.field];
if (col) { if (col) {
mainQuery = s.direction === "asc" ? mainQuery.orderBy(asc(col)) : mainQuery.orderBy(desc(col)); orderField = col;
direction = s.direction === "asc" ? "asc" : "desc";
} }
} }
const rawRows = await mainQuery; // MAIN QUERY (Paginated)
// Transformation für Drizzle Joins let q = server.db
let rows = rawRows.map(r => r[resource] || r.table || r); .select()
.from(table)
.where(whereCond)
.offset(offset)
.limit(limit);
const distinctValues: Record<string, any[]> = {}; if (orderField) {
if (distinctColumns) { //@ts-ignore
for (const colName of distinctColumns.split(",").map(c => c.trim())) { q = direction === "asc"
const col = (table as any)[colName]; ? q.orderBy(asc(orderField))
if (!col) continue; : q.orderBy(desc(orderField));
const dRows = await server.db.select({ v: col }).from(table).where(eq(table.tenant, tenantId));
distinctValues[colName] = [...new Set(dRows.map(r => r.v).filter(v => v != null && v !== ""))].sort();
}
} }
let data = [...rows]; const rows = await q;
if (config.mtoLoad) {
let ids: any = {}; if (!rows.length) {
let lists: any = {}; return {
let maps: any = {}; data: [],
config.mtoLoad.forEach(rel => { queryConfig: {
ids[rel] = [...new Set(rows.map(r => r[rel]).filter(Boolean))]; ...queryConfig,
}); total,
for await (const rel of config.mtoLoad) { totalPages: 0,
const relConf = resourceConfig[rel + "s"] || resourceConfig[rel]; distinctValues
const relTab = relConf.table; }
lists[rel] = ids[rel].length ? await server.db.select().from(relTab).where(inArray(relTab.id, ids[rel])) : []; };
maps[rel] = Object.fromEntries(lists[rel].map((i: any) => [i.id, i])); }
let data = [...rows]
//Many to One
if(resourceConfig[resource].mtoLoad) {
let ids = {}
let lists = {}
let maps = {}
resourceConfig[resource].mtoLoad.forEach(relation => {
ids[relation] = [...new Set(rows.map(r => r[relation]).filter(Boolean))];
})
for await (const relation of resourceConfig[resource].mtoLoad ) {
lists[relation] = ids[relation].length ? await server.db.select().from(resourceConfig[relation + "s"].table).where(inArray(resourceConfig[relation + "s"].table.id, ids[relation])) : []
} }
resourceConfig[resource].mtoLoad.forEach(relation => {
maps[relation] = Object.fromEntries(lists[relation].map(i => [i.id, i]));
})
data = rows.map(row => { data = rows.map(row => {
let toReturn = { ...row }; let toReturn = {
config.mtoLoad.forEach(rel => { ...row
toReturn[rel] = row[rel] ? maps[rel][row[rel]] : null; }
});
return toReturn; resourceConfig[resource].mtoLoad.forEach(relation => {
toReturn[relation] = row[relation] ? maps[relation][row[relation]] : null
})
return toReturn
}); });
} }
if (config.mtmListLoad) { if(resourceConfig[resource].mtmListLoad) {
for await (const relation of config.mtmListLoad) { for await (const relation of resourceConfig[resource].mtmListLoad) {
const relTable = resourceConfig[relation].table; console.log(relation)
const parentKey = resource.substring(0, resource.length - 1);
const relationRows = await server.db.select().from(relTable).where(inArray(relTable[parentKey], data.map(i => i.id))); const relationRows = await server.db.select().from(resourceConfig[relation].table).where(inArray(resourceConfig[relation].table[resource.substring(0,resource.length-1)],data.map(i => i.id)))
data = data.map(row => ({
...row, console.log(relationRows)
[relation]: relationRows.filter(i => i[parentKey] === row.id)
})); data = data.map(row => {
let toReturn = {
...row
}
toReturn[relation] = relationRows.filter(i => i[resource.substring(0,resource.length-1)] === row.id)
return toReturn
})
} }
} }
// -----------------------------------------------
// RETURN DATA
// -----------------------------------------------
return { return {
data, data,
queryConfig: { ...queryConfig, total, totalPages: Math.ceil(total / limit), distinctValues } queryConfig: {
...queryConfig,
total,
totalPages: Math.ceil(total / limit),
distinctValues
}
}; };
} catch (err) { } catch (err) {
@@ -270,8 +369,9 @@ export default async function resourceRoutes(server: FastifyInstance) {
} }
}); });
// ------------------------------------------------------------- // -------------------------------------------------------------
// DETAIL // DETAIL (mit JOINS)
// ------------------------------------------------------------- // -------------------------------------------------------------
server.get("/resource/:resource/:id/:no_relations?", async (req, reply) => { server.get("/resource/:resource/:id/:no_relations?", async (req, reply) => {
try { try {
@@ -279,7 +379,7 @@ export default async function resourceRoutes(server: FastifyInstance) {
const tenantId = req.user?.tenant_id const tenantId = req.user?.tenant_id
if (!tenantId) return reply.code(400).send({ error: "No tenant selected" }) if (!tenantId) return reply.code(400).send({ error: "No tenant selected" })
const { resource, no_relations } = req.params as { resource: string, no_relations?: boolean } const {resource, no_relations} = req.params as { resource: string, no_relations?: boolean }
const table = resourceConfig[resource].table const table = resourceConfig[resource].table
const projRows = await server.db const projRows = await server.db
@@ -291,32 +391,40 @@ export default async function resourceRoutes(server: FastifyInstance) {
if (!projRows.length) if (!projRows.length)
return reply.code(404).send({ error: "Resource not found" }) return reply.code(404).send({ error: "Resource not found" })
let data = { ...projRows[0] } // ------------------------------------
// LOAD RELATIONS
// ------------------------------------
if (!no_relations) { let ids = {}
if (resourceConfig[resource].mtoLoad) { let lists = {}
for await (const relation of resourceConfig[resource].mtoLoad) { let maps = {}
if (data[relation]) { let data = {
const relConf = resourceConfig[relation + "s"] || resourceConfig[relation]; ...projRows[0]
const relTable = relConf.table }
const relData = await server.db.select().from(relTable).where(eq(relTable.id, data[relation]))
data[relation] = relData[0] || null if(!no_relations) {
if(resourceConfig[resource].mtoLoad) {
for await (const relation of resourceConfig[resource].mtoLoad ) {
if(data[relation]) {
data[relation] = (await server.db.select().from(resourceConfig[relation + "s"].table).where(eq(resourceConfig[relation + "s"].table.id, data[relation])))[0]
} }
} }
} }
if (resourceConfig[resource].mtmLoad) { if(resourceConfig[resource].mtmLoad) {
for await (const relation of resourceConfig[resource].mtmLoad) { for await (const relation of resourceConfig[resource].mtmLoad ) {
const relTable = resourceConfig[relation].table console.log(relation)
const parentKey = resource.substring(0, resource.length - 1) data[relation] = await server.db.select().from(resourceConfig[relation].table).where(eq(resourceConfig[relation].table[resource.substring(0,resource.length - 1)],id))
data[relation] = await server.db.select().from(relTable).where(eq(relTable[parentKey], id))
} }
} }
} }
return data return data
} catch (err) { } catch (err) {
console.error("ERROR /resource/:resource/:id", err) console.error("ERROR /resource/projects/:id", err)
return reply.code(500).send({ error: "Internal Server Error" }) return reply.code(500).send({ error: "Internal Server Error" })
} }
}) })
@@ -324,59 +432,132 @@ export default async function resourceRoutes(server: FastifyInstance) {
// Create // Create
server.post("/resource/:resource", async (req, reply) => { server.post("/resource/:resource", async (req, reply) => {
try { try {
if (!req.user?.tenant_id) return reply.code(400).send({ error: "No tenant selected" }); if (!req.user?.tenant_id) {
const { resource } = req.params as { resource: string }; return reply.code(400).send({error: "No tenant selected"});
const body = req.body as Record<string, any>; }
const config = resourceConfig[resource];
const table = config.table; const {resource} = req.params as { resource: string };
const body = req.body as Record<string, any>;
let createData = { ...body, tenant: req.user.tenant_id, archived: false };
const table = resourceConfig[resource].table
if (config.numberRangeHolder && !body[config.numberRangeHolder]) {
const result = await useNextNumberRangeNumber(server, req.user.tenant_id, resource) let createData = {
createData[config.numberRangeHolder] = result.usedNumber ...body,
tenant: req.user.tenant_id,
archived: false, // Standardwert
}
console.log(resourceConfig[resource].numberRangeHolder)
if (resourceConfig[resource].numberRangeHolder && !body[resourceConfig[resource]]) {
const result = await useNextNumberRangeNumber(server, req.user.tenant_id, resource)
console.log(result)
createData[resourceConfig[resource].numberRangeHolder] = result.usedNumber
}
const normalizeDate = (val: any) => {
const d = new Date(val)
return isNaN(d.getTime()) ? null : d
} }
const normalizeDate = (val: any) => { const d = new Date(val); return isNaN(d.getTime()) ? null : d; }
Object.keys(createData).forEach((key) => { Object.keys(createData).forEach((key) => {
if (key.toLowerCase().includes("date") && key !== "deliveryDateType") createData[key] = normalizeDate(createData[key]) if(key.toLowerCase().includes("date") && key !== "deliveryDateType") createData[key] = normalizeDate(createData[key])
}) })
const [created] = await server.db.insert(table).values(createData).returning() const [created] = await server.db
.insert(table)
.values(createData)
.returning()
/*await insertHistoryItem(server, {
entity: resource,
entityId: data.id,
action: "created",
created_by: req.user.user_id,
tenant_id: req.user.tenant_id,
oldVal: null,
newVal: data,
text: `${dataType.labelSingle} erstellt`,
});*/
return created; return created;
} catch (error) { } catch (error) {
console.error(error); console.log(error)
reply.status(500); reply.status(500)
} }
}); });
// Update // UPDATE (inkl. Soft-Delete/Archive)
server.put("/resource/:resource/:id", async (req, reply) => { server.put("/resource/:resource/:id", async (req, reply) => {
try { try {
const { resource, id } = req.params as { resource: string; id: string } const {resource, id} = req.params as { resource: string; id: string }
const body = req.body as Record<string, any> const body = req.body as Record<string, any>
const tenantId = req.user?.tenant_id
const userId = req.user?.user_id
if (!tenantId || !userId) return reply.code(401).send({ error: "Unauthorized" }) const tenantId = (req.user as any)?.tenant_id
const userId = (req.user as any)?.user_id
if (!tenantId || !userId) {
return reply.code(401).send({error: "Unauthorized"})
}
const table = resourceConfig[resource].table const table = resourceConfig[resource].table
const normalizeDate = (val: any) => { const d = new Date(val); return isNaN(d.getTime()) ? null : d; }
let data = { ...body, updated_at: new Date().toISOString(), updated_by: userId } //TODO: HISTORY
const normalizeDate = (val: any) => {
const d = new Date(val)
return isNaN(d.getTime()) ? null : d
}
let data = {...body, updated_at: new Date().toISOString(), updated_by: userId}
//@ts-ignore //@ts-ignore
delete data.updatedBy; delete data.updatedAt; delete data.updatedBy
//@ts-ignore
delete data.updatedAt
console.log(data)
Object.keys(data).forEach((key) => { Object.keys(data).forEach((key) => {
if ((key.includes("_at") || key.includes("At") || key.toLowerCase().includes("date")) && key !== "deliveryDateType") { console.log(key)
if(key.includes("_at") || key.includes("At") || key.toLowerCase().includes("date")) {
data[key] = normalizeDate(data[key]) data[key] = normalizeDate(data[key])
} }
}) })
const [updated] = await server.db.update(table).set(data).where(and(eq(table.id, id), eq(table.tenant, tenantId))).returning() console.log(data)
const [updated] = await server.db
.update(table)
.set(data)
.where(and(
eq(table.id, id),
eq(table.tenant, tenantId)))
.returning()
//const diffs = diffObjects(oldItem, newItem);
/*for (const d of diffs) {
await insertHistoryItem(server, {
entity: resource,
entityId: id,
action: d.type,
created_by: userId,
tenant_id: tenantId,
oldVal: d.oldValue ? String(d.oldValue) : null,
newVal: d.newValue ? String(d.newValue) : null,
text: `Feld "${d.label}" ${d.typeLabel}: ${d.oldValue ?? ""} → ${d.newValue ?? ""}`,
});
}*/
return updated return updated
} catch (err) { } catch (err) {
console.error(err) console.log("ERROR /resource/projects/:id", err)
} }
}) })
}
}

View File

@@ -36,7 +36,7 @@ import {
export const resourceConfig = { export const resourceConfig = {
projects: { projects: {
searchColumns: ["name","customerRef","projectNumber","notes"], searchColumns: ["name"],
mtoLoad: ["customer","plant","contract","projecttype"], mtoLoad: ["customer","plant","contract","projecttype"],
mtmLoad: ["tasks", "files","createddocuments"], mtmLoad: ["tasks", "files","createddocuments"],
table: projects, table: projects,
@@ -61,7 +61,6 @@ export const resourceConfig = {
}, },
plants: { plants: {
table: plants, table: plants,
searchColumns: ["name"],
mtoLoad: ["customer"], mtoLoad: ["customer"],
mtmLoad: ["projects","tasks","files"], mtmLoad: ["projects","tasks","files"],
}, },

View File

@@ -1,235 +0,0 @@
<template>
<div
ref="el"
:style="style"
class="fixed z-[999] w-72 bg-white dark:bg-gray-900 shadow-2xl rounded-xl border border-gray-200 dark:border-gray-800 p-4 select-none touch-none"
>
<div class="flex items-center justify-between mb-4 cursor-move border-b pb-2 dark:border-gray-800">
<div class="flex items-center gap-2 text-gray-500">
<UIcon name="i-heroicons-calculator" />
<span class="text-xs font-bold uppercase tracking-wider">Kalkulator</span>
</div>
<div class="flex items-center gap-1">
<UTooltip text="Verlauf">
<UButton
color="gray"
variant="ghost"
:icon="showHistory ? 'i-heroicons-clock-solid' : 'i-heroicons-clock'"
size="xs"
@click="showHistory = !showHistory"
/>
</UTooltip>
<UTooltip text="Schließen (Esc)">
<UButton
color="gray"
variant="ghost"
icon="i-heroicons-x-mark"
size="xs"
@click="store.isOpen = false"
/>
</UTooltip>
</div>
</div>
<div v-if="!showHistory">
<div
class="bg-gray-100 dark:bg-gray-800 p-3 rounded-lg mb-4 text-right border border-gray-200 dark:border-gray-700 cursor-pointer group relative"
@click="copyDisplay"
>
<div class="text-[10px] text-gray-500 h-4 font-mono uppercase tracking-tighter">
Speicher: {{ Number(store.memory).toFixed(2).replace('.', ',') }}
</div>
<div class="text-2xl font-mono truncate tracking-tighter">{{ store.display }}</div>
<div class="absolute inset-0 flex items-center justify-center bg-primary-500/10 opacity-0 group-hover:opacity-100 transition-opacity rounded-lg">
<span class="text-[10px] font-bold text-primary-600 uppercase">
{{ copied ? 'Kopiert!' : 'Klicken zum Kopieren' }}
</span>
</div>
</div>
<div class="grid grid-cols-4 gap-2">
<UTooltip text="Brutto (+19%)"><UButton color="green" variant="soft" block size="xs" @click="applyTax(19)">+19%</UButton></UTooltip>
<UTooltip text="Brutto (+7%)"><UButton color="green" variant="soft" block size="xs" @click="applyTax(7)">+7%</UButton></UTooltip>
<UTooltip text="Netto (-19%)"><UButton color="rose" variant="soft" block size="xs" @click="removeTax(19)">-19%</UButton></UTooltip>
<UTooltip text="Netto (-7%)"><UButton color="rose" variant="soft" block size="xs" @click="removeTax(7)">-7%</UButton></UTooltip>
<UTooltip text="Löschen"><UButton color="gray" variant="ghost" block @click="clear">C</UButton></UTooltip>
<UTooltip text="Speicher +"><UButton color="gray" variant="ghost" block @click="addToSum">M+</UButton></UTooltip>
<UTooltip text="Speicher Reset"><UButton color="gray" variant="ghost" block @click="store.memory = 0">MC</UButton></UTooltip>
<UButton color="primary" variant="soft" @click="setOperator('/')">/</UButton>
<UButton v-for="n in [7, 8, 9]" :key="n" color="white" @click="appendNumber(n)">{{ n }}</UButton>
<UButton color="primary" variant="soft" @click="setOperator('*')">×</UButton>
<UButton v-for="n in [4, 5, 6]" :key="n" color="white" @click="appendNumber(n)">{{ n }}</UButton>
<UButton color="primary" variant="soft" @click="setOperator('-')">-</UButton>
<UButton v-for="n in [1, 2, 3]" :key="n" color="white" @click="appendNumber(n)">{{ n }}</UButton>
<UButton color="primary" variant="soft" @click="setOperator('+')">+</UButton>
<UButton color="white" class="col-span-2" @click="appendNumber(0)">0</UButton>
<UButton color="white" @click="addComma">,</UButton>
<UButton color="primary" block @click="calculate">=</UButton>
</div>
</div>
<div v-else class="h-[270px] flex flex-col animate-in fade-in duration-200">
<div class="flex-1 overflow-y-auto space-y-2 pr-1 custom-scrollbar">
<div v-if="store.history.length === 0" class="text-center text-gray-400 text-xs mt-10 italic">
Keine Berechnungen im Verlauf
</div>
<div
v-for="(item, i) in store.history" :key="i"
class="p-2 bg-gray-50 dark:bg-gray-800 rounded text-right border-l-2 border-primary-500 cursor-pointer hover:bg-primary-50 dark:hover:bg-primary-900/20 transition-colors"
@click="useHistoryItem(item.result)"
>
<div class="text-[10px] text-gray-400">{{ item.expression }} =</div>
<div class="text-sm font-bold">{{ item.result }}</div>
</div>
</div>
<UButton
color="gray"
variant="ghost"
size="xs"
block
class="mt-2"
icon="i-heroicons-trash"
@click="store.history = []"
>
Verlauf leeren
</UButton>
</div>
</div>
</template>
<script setup>
import { useDraggable, useClipboard } from '@vueuse/core'
import { useCalculatorStore } from '~/stores/calculator'
const store = useCalculatorStore()
const { copy, copied } = useClipboard()
const el = ref(null)
const { style } = useDraggable(el, {
initialValue: { x: window.innerWidth - 350, y: 150 },
})
const shouldResetDisplay = ref(false)
const showHistory = ref(false)
const previousValue = ref(null)
const lastOperator = ref(null)
// --- Logik ---
const appendNumber = (num) => {
if (store.display === '0' || shouldResetDisplay.value) {
store.display = String(num)
shouldResetDisplay.value = false
} else {
store.display += String(num)
}
}
const addComma = () => {
if (!store.display.includes(',')) {
store.display += ','
}
}
const setOperator = (op) => {
previousValue.value = parseFloat(store.display.replace(',', '.'))
lastOperator.value = op
shouldResetDisplay.value = true
}
const calculate = () => {
if (lastOperator.value === null) return
const currentVal = parseFloat(store.display.replace(',', '.'))
const prevVal = previousValue.value
let result = 0
switch (lastOperator.value) {
case '+': result = prevVal + currentVal; break
case '-': result = prevVal - currentVal; break
case '*': result = prevVal * currentVal; break
case '/': result = currentVal !== 0 ? prevVal / currentVal : 0; break
}
const expression = `${prevVal} ${lastOperator.value} ${currentVal}`
const resultString = String(Number(result.toFixed(4))).replace('.', ',')
store.addHistory(expression, resultString)
store.display = resultString
lastOperator.value = null
shouldResetDisplay.value = true
}
const clear = () => {
store.display = '0'
previousValue.value = null
lastOperator.value = null
}
const applyTax = (percent) => {
const current = parseFloat(store.display.replace(',', '.'))
store.display = (current * (1 + percent / 100)).toFixed(2).replace('.', ',')
}
const removeTax = (percent) => {
const current = parseFloat(store.display.replace(',', '.'))
store.display = (current / (1 + percent / 100)).toFixed(2).replace('.', ',')
}
const addToSum = () => {
store.memory += parseFloat(store.display.replace(',', '.'))
shouldResetDisplay.value = true
}
const copyDisplay = () => {
copy(store.display)
}
const useHistoryItem = (val) => {
store.display = val
showHistory.value = false
}
// --- Shortcuts ---
defineShortcuts({
'0': () => appendNumber(0),
'1': () => appendNumber(1),
'2': () => appendNumber(2),
'3': () => appendNumber(3),
'4': () => appendNumber(4),
'5': () => appendNumber(5),
'6': () => appendNumber(6),
'7': () => appendNumber(7),
'8': () => appendNumber(8),
'9': () => appendNumber(9),
'comma': addComma,
'plus': () => setOperator('+'),
'minus': () => setOperator('-'),
'enter': { usingInput: true, handler: calculate },
'backspace': () => {
store.display = store.display.length > 1 ? store.display.slice(0, -1) : '0'
},
// Escape schließt nun das Fenster via Store
'escape': {
usingInput: true,
whenever: [computed(() => store.isOpen)],
handler: () => { store.isOpen = false }
}
})
</script>
<style scoped>
.custom-scrollbar::-webkit-scrollbar {
width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
@apply bg-transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
@apply bg-gray-200 dark:bg-gray-700 rounded-full;
}
</style>

View File

@@ -1,39 +1,42 @@
<script setup> <script setup>
const route = useRoute() const route = useRoute()
const auth = useAuthStore() const auth = useAuthStore()
const { has } = usePermission()
// Lokaler State für den Taschenrechner const {has} = usePermission()
const showCalculator = ref(false)
const links = computed(() => { const links = computed(() => {
return [ return [
...(auth.profile?.pinned_on_navigation || []).map(pin => { ...(auth.profile?.pinned_on_navigation || []).map(pin => {
if (pin.type === "external") { if(pin.type === "external") {
return { return {
label: pin.label, label: pin.label,
to: pin.link, to: pin.link,
icon: pin.icon, icon: pin.icon,
target: "_blank", target: "_blank",
pinned: true pinned: true
}
}else if(pin.type === "standardEntity") {
return {
label: pin.label,
to: `/standardEntity/${pin.datatype}/show/${pin.id}`,
icon: pin.icon,
pinned: true
}
} }
} else if (pin.type === "standardEntity") { }),
return {
label: pin.label,
to: `/standardEntity/${pin.datatype}/show/${pin.id}`,
icon: pin.icon,
pinned: true
}
}
}),
... false ? [{
label: "Support Tickets",
to: "/support",
icon: "i-heroicons-rectangle-stack",
}] : [],
{ {
id: 'dashboard', id: 'dashboard',
label: "Dashboard", label: "Dashboard",
to: "/", to: "/",
icon: "i-heroicons-home" icon: "i-heroicons-home"
}, }, {
{
id: 'historyitems', id: 'historyitems',
label: "Logbuch", label: "Logbuch",
to: "/historyitems", to: "/historyitems",
@@ -45,11 +48,31 @@ const links = computed(() => {
icon: "i-heroicons-rectangle-stack", icon: "i-heroicons-rectangle-stack",
defaultOpen: false, defaultOpen: false,
children: [ children: [
...has("tasks") ? [{ ... has("tasks") ? [{
label: "Aufgaben", label: "Aufgaben",
to: "/standardEntity/tasks", to: "/standardEntity/tasks",
icon: "i-heroicons-rectangle-stack" icon: "i-heroicons-rectangle-stack"
}] : [], }] : [],
/*... true ? [{
label: "Plantafel",
to: "/calendar/timeline",
icon: "i-heroicons-calendar-days"
}] : [],
... true ? [{
label: "Kalender",
to: "/calendar/grid",
icon: "i-heroicons-calendar-days"
}] : [],
... true ? [{
label: "Termine",
to: "/standardEntity/events",
icon: "i-heroicons-calendar-days"
}] : [],*/
/*{
label: "Dateien",
to: "/files",
icon: "i-heroicons-document"
},*/
] ]
}, },
{ {
@@ -61,12 +84,12 @@ const links = computed(() => {
label: "Dateien", label: "Dateien",
to: "/files", to: "/files",
icon: "i-heroicons-document" icon: "i-heroicons-document"
}, { },{
label: "Anschreiben", label: "Anschreiben",
to: "/createdletters", to: "/createdletters",
icon: "i-heroicons-document", icon: "i-heroicons-document",
disabled: true disabled: true
}, { },{
label: "Boxen", label: "Boxen",
to: "/standardEntity/documentboxes", to: "/standardEntity/documentboxes",
icon: "i-heroicons-archive-box", icon: "i-heroicons-archive-box",
@@ -90,44 +113,62 @@ const links = computed(() => {
to: "/email/new", to: "/email/new",
icon: "i-heroicons-envelope", icon: "i-heroicons-envelope",
disabled: true disabled: true
} }/*, {
label: "Logbücher",
to: "/communication/historyItems",
icon: "i-heroicons-book-open"
}, {
label: "Chats",
to: "/chats",
icon: "i-heroicons-chat-bubble-left"
}*/
] ]
}, },
...(has("customers") || has("vendors") || has("contacts")) ? [{ ... (has("customers") || has("vendors") || has("contacts")) ? [{
label: "Kontakte", label: "Kontakte",
defaultOpen: false, defaultOpen: false,
icon: "i-heroicons-user-group", icon: "i-heroicons-user-group",
children: [ children: [
...has("customers") ? [{ ... has("customers") ? [{
label: "Kunden", label: "Kunden",
to: "/standardEntity/customers", to: "/standardEntity/customers",
icon: "i-heroicons-user-group" icon: "i-heroicons-user-group"
}] : [], }] : [],
...has("vendors") ? [{ ... has("vendors") ? [{
label: "Lieferanten", label: "Lieferanten",
to: "/standardEntity/vendors", to: "/standardEntity/vendors",
icon: "i-heroicons-truck" icon: "i-heroicons-truck"
}] : [], }] : [],
...has("contacts") ? [{ ... has("contacts") ? [{
label: "Ansprechpartner", label: "Ansprechpartner",
to: "/standardEntity/contacts", to: "/standardEntity/contacts",
icon: "i-heroicons-user-group" icon: "i-heroicons-user-group"
}] : [], }] : [],
] ]
}] : [], },] : [],
{ {
label: "Mitarbeiter", label: "Mitarbeiter",
defaultOpen: false, defaultOpen:false,
icon: "i-heroicons-user-group", icon: "i-heroicons-user-group",
children: [ children: [
...true ? [{ ... true ? [{
label: "Zeiten", label: "Zeiten",
to: "/staff/time", to: "/staff/time",
icon: "i-heroicons-clock", icon: "i-heroicons-clock",
}] : [], }] : [],
/*... has("absencerequests") ? [{
label: "Abwesenheiten",
to: "/standardEntity/absencerequests",
icon: "i-heroicons-document-text"
}] : [],*/
/*{
label: "Fahrten",
to: "/trackingTrips",
icon: "i-heroicons-map"
},*/
] ]
}, },
...[{ ... [{
label: "Buchhaltung", label: "Buchhaltung",
defaultOpen: false, defaultOpen: false,
icon: "i-heroicons-chart-bar-square", icon: "i-heroicons-chart-bar-square",
@@ -136,23 +177,23 @@ const links = computed(() => {
label: "Ausgangsbelege", label: "Ausgangsbelege",
to: "/createDocument", to: "/createDocument",
icon: "i-heroicons-document-text" icon: "i-heroicons-document-text"
}, { },{
label: "Serienvorlagen", label: "Serienvorlagen",
to: "/createDocument/serialInvoice", to: "/createDocument/serialInvoice",
icon: "i-heroicons-document-text" icon: "i-heroicons-document-text"
}, { },{
label: "Eingangsbelege", label: "Eingangsbelege",
to: "/incomingInvoices", to: "/incomingInvoices",
icon: "i-heroicons-document-text", icon: "i-heroicons-document-text",
}, { },{
label: "Kostenstellen", label: "Kostenstellen",
to: "/standardEntity/costcentres", to: "/standardEntity/costcentres",
icon: "i-heroicons-document-currency-euro" icon: "i-heroicons-document-currency-euro"
}, { },{
label: "Buchungskonten", label: "Buchungskonten",
to: "/accounts", to: "/accounts",
icon: "i-heroicons-document-text", icon: "i-heroicons-document-text",
}, { },{
label: "zusätzliche Buchungskonten", label: "zusätzliche Buchungskonten",
to: "/standardEntity/ownaccounts", to: "/standardEntity/ownaccounts",
icon: "i-heroicons-document-text" icon: "i-heroicons-document-text"
@@ -164,39 +205,48 @@ const links = computed(() => {
}, },
] ]
}], }],
...has("inventory") ? [{ ... has("inventory") ? [{
label: "Lager", label: "Lager",
icon: "i-heroicons-puzzle-piece", icon: "i-heroicons-puzzle-piece",
defaultOpen: false, defaultOpen: false,
children: [ children: [
...has("spaces") ? [{ /*{
label: "Vorgänge",
to: "/inventory",
icon: "i-heroicons-square-3-stack-3d"
},{
label: "Bestände",
to: "/inventory/stocks",
icon: "i-heroicons-square-3-stack-3d"
},*/
... has("spaces") ? [{
label: "Lagerplätze", label: "Lagerplätze",
to: "/standardEntity/spaces", to: "/standardEntity/spaces",
icon: "i-heroicons-square-3-stack-3d" icon: "i-heroicons-square-3-stack-3d"
}] : [], }] : [],
] ]
}] : [], },] : [],
{ {
label: "Stammdaten", label: "Stammdaten",
defaultOpen: false, defaultOpen: false,
icon: "i-heroicons-clipboard-document", icon: "i-heroicons-clipboard-document",
children: [ children: [
...has("products") ? [{ ... has("products") ? [{
label: "Artikel", label: "Artikel",
to: "/standardEntity/products", to: "/standardEntity/products",
icon: "i-heroicons-puzzle-piece" icon: "i-heroicons-puzzle-piece"
}] : [], }] : [],
...has("productcategories") ? [{ ... has("productcategories") ? [{
label: "Artikelkategorien", label: "Artikelkategorien",
to: "/standardEntity/productcategories", to: "/standardEntity/productcategories",
icon: "i-heroicons-puzzle-piece" icon: "i-heroicons-puzzle-piece"
}] : [], }] : [],
...has("services") ? [{ ... has("services") ? [{
label: "Leistungen", label: "Leistungen",
to: "/standardEntity/services", to: "/standardEntity/services",
icon: "i-heroicons-wrench-screwdriver" icon: "i-heroicons-wrench-screwdriver"
}] : [], }] : [],
...has("servicecategories") ? [{ ... has("servicecategories") ? [{
label: "Leistungskategorien", label: "Leistungskategorien",
to: "/standardEntity/servicecategories", to: "/standardEntity/servicecategories",
icon: "i-heroicons-wrench-screwdriver" icon: "i-heroicons-wrench-screwdriver"
@@ -211,17 +261,17 @@ const links = computed(() => {
to: "/standardEntity/hourrates", to: "/standardEntity/hourrates",
icon: "i-heroicons-user-group" icon: "i-heroicons-user-group"
}, },
...has("vehicles") ? [{ ... has("vehicles") ? [{
label: "Fahrzeuge", label: "Fahrzeuge",
to: "/standardEntity/vehicles", to: "/standardEntity/vehicles",
icon: "i-heroicons-truck" icon: "i-heroicons-truck"
}] : [], }] : [],
...has("inventoryitems") ? [{ ... has("inventoryitems") ? [{
label: "Inventar", label: "Inventar",
to: "/standardEntity/inventoryitems", to: "/standardEntity/inventoryitems",
icon: "i-heroicons-puzzle-piece" icon: "i-heroicons-puzzle-piece"
}] : [], }] : [],
...has("inventoryitems") ? [{ ... has("inventoryitems") ? [{
label: "Inventargruppen", label: "Inventargruppen",
to: "/standardEntity/inventoryitemgroups", to: "/standardEntity/inventoryitemgroups",
icon: "i-heroicons-puzzle-piece" icon: "i-heroicons-puzzle-piece"
@@ -229,21 +279,26 @@ const links = computed(() => {
] ]
}, },
...has("projects") ? [{ ... has("projects") ? [{
label: "Projekte", label: "Projekte",
to: "/standardEntity/projects", to: "/standardEntity/projects",
icon: "i-heroicons-clipboard-document-check" icon: "i-heroicons-clipboard-document-check"
}] : [], },] : [],
...has("contracts") ? [{ ... has("contracts") ? [{
label: "Verträge", label: "Verträge",
to: "/standardEntity/contracts", to: "/standardEntity/contracts",
icon: "i-heroicons-clipboard-document" icon: "i-heroicons-clipboard-document"
}] : [], }] : [],
...has("plants") ? [{ ... has("plants") ? [{
label: "Objekte", label: "Objekte",
to: "/standardEntity/plants", to: "/standardEntity/plants",
icon: "i-heroicons-clipboard-document" icon: "i-heroicons-clipboard-document"
}] : [], },] : [],
/*... has("checks") ? [{
label: "Überprüfungen",
to: "/standardEntity/checks",
icon: "i-heroicons-magnifying-glass"
},] : [],*/
{ {
label: "Einstellungen", label: "Einstellungen",
defaultOpen: false, defaultOpen: false,
@@ -253,57 +308,67 @@ const links = computed(() => {
label: "Nummernkreise", label: "Nummernkreise",
to: "/settings/numberRanges", to: "/settings/numberRanges",
icon: "i-heroicons-clipboard-document-list", icon: "i-heroicons-clipboard-document-list",
}, { },/*{
label: "Rollen",
to: "/roles",
icon: "i-heroicons-key"
},*/{
label: "E-Mail Konten", label: "E-Mail Konten",
to: "/settings/emailaccounts", to: "/settings/emailaccounts",
icon: "i-heroicons-envelope", icon: "i-heroicons-envelope",
}, { },{
label: "Bankkonten", label: "Bankkonten",
to: "/settings/banking", to: "/settings/banking",
icon: "i-heroicons-currency-euro", icon: "i-heroicons-currency-euro",
}, { },{
label: "Textvorlagen", label: "Textvorlagen",
to: "/settings/texttemplates", to: "/settings/texttemplates",
icon: "i-heroicons-clipboard-document-list", icon: "i-heroicons-clipboard-document-list",
}, { },/*{
label: "Eigene Felder",
to: "/settings/ownfields",
icon: "i-heroicons-clipboard-document-list"
},*/{
label: "Firmeneinstellungen", label: "Firmeneinstellungen",
to: "/settings/tenant", to: "/settings/tenant",
icon: "i-heroicons-building-office", icon: "i-heroicons-building-office",
}, { },{
label: "Projekttypen", label: "Projekttypen",
to: "/projecttypes", to: "/projecttypes",
icon: "i-heroicons-clipboard-document-list", icon: "i-heroicons-clipboard-document-list",
}, { },{
label: "Export", label: "Export",
to: "/export", to: "/export",
icon: "i-heroicons-clipboard-document-list" icon: "i-heroicons-clipboard-document-list"
} }
] ]
}, }
] ]
}) })
// nur Items mit Children → für Accordion
const accordionItems = computed(() => const accordionItems = computed(() =>
links.value.filter(item => Array.isArray(item.children) && item.children.length > 0) links.value.filter(item => Array.isArray(item.children) && item.children.length > 0)
) )
// nur Items ohne Children → als Buttons
const buttonItems = computed(() => const buttonItems = computed(() =>
links.value.filter(item => !item.children || item.children.length === 0) links.value.filter(item => !item.children || item.children.length === 0)
) )
</script> </script>
<template> <template>
<!-- Standalone Buttons -->
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
<UButton <UButton
v-for="item in buttonItems" v-for="item in buttonItems"
:key="item.label" :key="item.label"
variant="ghost" :variant="item.pinned ? 'ghost' : 'ghost'"
:color="(item.to && route.path === item.to) ? 'primary' : (item.pinned ? 'amber' : 'gray')" :color="(item.to && route.path === item.to) ? 'primary' : (item.pinned ? 'amber' : 'gray')"
:icon="item.pinned ? 'i-heroicons-star' : item.icon" :icon="item.pinned ? 'i-heroicons-star' : item.icon"
class="w-full" class="w-full"
:to="item.to" :to="item.to"
:target="item.target" :target="item.target"
@click="item.click ? item.click() : null"
> >
<UIcon <UIcon
v-if="item.pinned" v-if="item.pinned"
@@ -313,9 +378,8 @@ const buttonItems = computed(() =>
{{ item.label }} {{ item.label }}
</UButton> </UButton>
</div> </div>
<UDivider/>
<UDivider class="my-2"/> <!-- Accordion für die Items mit Children -->
<UAccordion <UAccordion
:items="accordionItems" :items="accordionItems"
:multiple="false" :multiple="false"
@@ -323,7 +387,7 @@ const buttonItems = computed(() =>
> >
<template #default="{ item, open }"> <template #default="{ item, open }">
<UButton <UButton
variant="ghost" :variant="'ghost'"
:color="(item.children?.some(c => route.path.includes(c.to))) ? 'primary' : 'gray'" :color="(item.children?.some(c => route.path.includes(c.to))) ? 'primary' : 'gray'"
:icon="item.icon" :icon="item.icon"
class="w-full" class="w-full"
@@ -351,13 +415,56 @@ const buttonItems = computed(() =>
:to="child.to" :to="child.to"
:target="child.target" :target="child.target"
:disabled="child.disabled" :disabled="child.disabled"
@click="child.click ? child.click() : null"
> >
{{ child.label }} {{ child.label }}
</UButton> </UButton>
</div> </div>
</template> </template>
</UAccordion> </UAccordion>
<!-- <UAccordion
:items="links"
:multiple="false"
>
<template #default="{ item, index, open }">
<UButton
:variant="item.pinned ? 'ghost' : 'ghost'"
:color="(item.to && route.path === item.to) || (item.children?.some(c => route.path.includes(c.to))) ? 'primary' : (item.pinned ? 'amber' : 'gray')"
:icon="item.pinned ? 'i-heroicons-star' : item.icon"
class="w-full"
:to="item.to"
:target="item.target"
>
<UIcon
v-if="item.pinned"
:name="item.icon" class="w-5 h-5 me-2" />
{{ item.label }}
<template v-if="item.children" #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 class="flex flex-col" v-if="item.children?.length > 0">
<UButton
v-for="child in item.children"
:key="child.label"
variant="ghost"
:color="child.to === route.path ? 'primary' : 'gray'"
:icon="child.icon"
class="ml-4"
:to="child.to"
:target="child.target"
>
{{ child.label }}
</UButton>
</div>
</template>
</UAccordion>-->
<Calculator v-if="showCalculator" v-model="showCalculator"/>
</template> </template>

View File

@@ -1,20 +1,21 @@
<script setup> <script setup>
import MainNav from "~/components/MainNav.vue"; import MainNav from "~/components/MainNav.vue";
import dayjs from "dayjs"; import dayjs from "dayjs";
import GlobalMessages from "~/components/GlobalMessages.vue"; import GlobalMessages from "~/components/GlobalMessages.vue";
import TenantDropdown from "~/components/TenantDropdown.vue"; import TenantDropdown from "~/components/TenantDropdown.vue";
import LabelPrinterButton from "~/components/LabelPrinterButton.vue"; import LabelPrinterButton from "~/components/LabelPrinterButton.vue";
import {useCalculatorStore} from '~/stores/calculator'
const dataStore = useDataStore() const dataStore = useDataStore()
const colorMode = useColorMode() const colorMode = useColorMode()
const {isHelpSlideoverOpen} = useDashboard() const { isHelpSlideoverOpen } = useDashboard()
const router = useRouter() const router = useRouter()
const route = useRoute() const route = useRoute()
const auth = useAuthStore() const auth = useAuthStore()
const labelPrinter = useLabelPrinterStore() const labelPrinter = useLabelPrinterStore()
const calculatorStore = useCalculatorStore()
const month = dayjs().format("MM") const month = dayjs().format("MM")
@@ -23,108 +24,91 @@ const actions = [
id: 'new-customer', id: 'new-customer',
label: 'Kunde hinzufügen', label: 'Kunde hinzufügen',
icon: 'i-heroicons-user-group', icon: 'i-heroicons-user-group',
to: "/customers/create", to: "/customers/create" ,
}, },
{ {
id: 'new-vendor', id: 'new-vendor',
label: 'Lieferant hinzufügen', label: 'Lieferant hinzufügen',
icon: 'i-heroicons-truck', icon: 'i-heroicons-truck',
to: "/vendors/create", to: "/vendors/create" ,
}, },
{ {
id: 'new-contact', id: 'new-contact',
label: 'Ansprechpartner hinzufügen', label: 'Ansprechpartner hinzufügen',
icon: 'i-heroicons-user-group', icon: 'i-heroicons-user-group',
to: "/contacts/create", to: "/contacts/create" ,
}, },
{ {
id: 'new-task', id: 'new-task',
label: 'Aufgabe hinzufügen', label: 'Aufgabe hinzufügen',
icon: 'i-heroicons-rectangle-stack', icon: 'i-heroicons-rectangle-stack',
to: "/tasks/create", to: "/tasks/create" ,
}, },
{ {
id: 'new-plant', id: 'new-plant',
label: 'Objekt hinzufügen', label: 'Objekt hinzufügen',
icon: 'i-heroicons-clipboard-document', icon: 'i-heroicons-clipboard-document',
to: "/plants/create", to: "/plants/create" ,
}, },
{ {
id: 'new-product', id: 'new-product',
label: 'Artikel hinzufügen', label: 'Artikel hinzufügen',
icon: 'i-heroicons-puzzle-piece', icon: 'i-heroicons-puzzle-piece',
to: "/products/create", to: "/products/create" ,
}, },
{ {
id: 'new-project', id: 'new-project',
label: 'Projekt hinzufügen', label: 'Projekt hinzufügen',
icon: 'i-heroicons-clipboard-document-check', icon: 'i-heroicons-clipboard-document-check',
to: "/projects/create", to: "/projects/create" ,
} }
] ]
const groups = computed(() => [
{
key: 'actions',
commands: actions
}, {
key: "customers",
label: "Kunden",
commands: dataStore.customers.map(item => {
return {id: item.id, label: item.name, to: `/customers/show/${item.id}`}
})
}, {
key: "vendors",
label: "Lieferanten",
commands: dataStore.vendors.map(item => {
return {id: item.id, label: item.name, to: `/vendors/show/${item.id}`}
})
}, {
key: "contacts",
label: "Ansprechpartner",
commands: dataStore.contacts.map(item => {
return {id: item.id, label: item.fullName, to: `/contacts/show/${item.id}`}
})
}, {
key: "products",
label: "Artikel",
commands: dataStore.products.map(item => {
return {id: item.id, label: item.name, to: `/products/show/${item.id}`}
})
}, {
key: "tasks",
label: "Aufgaben",
commands: dataStore.tasks.map(item => {
return {id: item.id, label: item.name, to: `/tasks/show/${item.id}`}
})
}, {
key: "plants",
label: "Objekte",
commands: dataStore.plants.map(item => {
return {id: item.id, label: item.name, to: `/plants/show/${item.id}`}
})
}, {
key: "projects",
label: "Projekte",
commands: dataStore.projects.map(item => {
return {id: item.id, label: item.name, to: `/projects/show/${item.id}`}
})
}
].filter(Boolean))
// --- Footer Links nutzen jetzt den zentralen Calculator Store --- const groups = computed(() => [
const footerLinks = computed(() => [ {
{ key: 'actions',
label: 'Taschenrechner', commands: actions
icon: 'i-heroicons-calculator', },{
click: () => calculatorStore.toggle() key: "customers",
}, label: "Kunden",
{ commands: dataStore.customers.map(item => { return {id: item.id, label: item.name, to: `/customers/show/${item.id}`}})
label: 'Hilfe & Info', },{
icon: 'i-heroicons-question-mark-circle', key: "vendors",
click: () => isHelpSlideoverOpen.value = true label: "Lieferanten",
} commands: dataStore.vendors.map(item => { return {id: item.id, label: item.name, to: `/vendors/show/${item.id}`}})
]) },{
key: "contacts",
label: "Ansprechpartner",
commands: dataStore.contacts.map(item => { return {id: item.id, label: item.fullName, to: `/contacts/show/${item.id}`}})
},{
key: "products",
label: "Artikel",
commands: dataStore.products.map(item => { return {id: item.id, label: item.name, to: `/products/show/${item.id}`}})
},{
key: "tasks",
label: "Aufgaben",
commands: dataStore.tasks.map(item => { return {id: item.id, label: item.name, to: `/tasks/show/${item.id}`}})
},{
key: "plants",
label: "Objekte",
commands: dataStore.plants.map(item => { return {id: item.id, label: item.name, to: `/plants/show/${item.id}`}})
},{
key: "projects",
label: "Projekte",
commands: dataStore.projects.map(item => { return {id: item.id, label: item.name, to: `/projects/show/${item.id}`}})
}
].filter(Boolean))
const footerLinks = [
/*{
label: 'Invite people',
icon: 'i-heroicons-plus',
to: '/settings/members'
}, */{
label: 'Hilfe & Info',
icon: 'i-heroicons-question-mark-circle',
click: () => isHelpSlideoverOpen.value = true
}]
</script> </script>
@@ -146,24 +130,24 @@ const footerLinks = computed(() => [
v-else v-else
/> />
<div class="flex justify-center mb-6"> <div class="flex justify-center mb-6">
<UIcon name="i-heroicons-exclamation-triangle-solid" class="w-16 h-16 text-yellow-500"/> <UIcon name="i-heroicons-exclamation-triangle-solid" class="w-16 h-16 text-yellow-500" />
</div> </div>
<h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-4"> <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
Wartungsarbeiten Wartungsarbeiten
</h1> </h1>
<p class="text-gray-600 dark:text-gray-300 mb-8"> <p class="text-gray-600 dark:text-gray-300 mb-8">
Dieser FEDEO Mandant wird derzeit gewartet. Bitte versuche es in einigen Minuten erneut oder verwende einen Dieser FEDEO Mandant wird derzeit gewartet. Bitte versuche es in einigen Minuten erneut oder verwende einen anderen Mandanten.
anderen Mandanten.
</p> </p>
<div class="mx-auto text-left flex flex-row justify-between my-3" v-for="tenant in auth.tenants"> <div class="mx-auto text-left flex flex-row justify-between my-3" v-for="tenant in auth.tenants">
{{ tenant.name }} {{tenant.name}}
<UButton <UButton
:disabled="tenant.locked" :disabled="tenant.locked"
@click="auth.switchTenant(tenant.id)" @click="auth.switchTenant(tenant.id)"
>Wählen >Wählen</UButton>
</UButton>
</div> </div>
</UCard> </UCard>
</UContainer> </UContainer>
</div> </div>
@@ -183,7 +167,7 @@ const footerLinks = computed(() => [
v-else v-else
/> />
<div class="flex justify-center mb-6"> <div class="flex justify-center mb-6">
<UIcon name="i-heroicons-exclamation-triangle-solid" class="w-16 h-16 text-yellow-500"/> <UIcon name="i-heroicons-exclamation-triangle-solid" class="w-16 h-16 text-yellow-500" />
</div> </div>
<h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-4"> <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
@@ -192,6 +176,8 @@ const footerLinks = computed(() => [
<p class="text-gray-600 dark:text-gray-300 mb-8"> <p class="text-gray-600 dark:text-gray-300 mb-8">
FEDEO wird derzeit gewartet. Bitte versuche es in einigen Minuten erneut. FEDEO wird derzeit gewartet. Bitte versuche es in einigen Minuten erneut.
</p> </p>
</UCard> </UCard>
</UContainer> </UContainer>
</div> </div>
@@ -211,33 +197,32 @@ const footerLinks = computed(() => [
v-else v-else
/> />
<div class="flex justify-center mb-6"> <div class="flex justify-center mb-6">
<UIcon name="i-heroicons-credit-card" class="w-16 h-16 text-red-600"/> <UIcon name="i-heroicons-credit-card" class="w-16 h-16 text-red-600" />
</div> </div>
<h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-4"> <h1 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
Kein Aktives Abonnement für diesen Mandant. Kein Aktives Abonnement für diesen Mandant.
</h1> </h1>
<p class="text-gray-600 dark:text-gray-300 mb-8"> <p class="text-gray-600 dark:text-gray-300 mb-8">
Bitte wenden Sie sich an den FEDEO Support um ein Abonnement zu erhalten oder verwenden Sie einen anderen Bitte wenden Sie sich an den FEDEO Support um ein Abonnement zu erhalten oder verwenden Sie einen anderen Mandanten.
Mandanten.
</p> </p>
<div class="mx-auto text-left flex flex-row justify-between my-3" v-for="tenant in auth.tenants"> <div class="mx-auto text-left flex flex-row justify-between my-3" v-for="tenant in auth.tenants">
{{ tenant.name }} {{tenant.name}}
<UButton <UButton
:disabled="tenant.locked" :disabled="tenant.locked"
@click="auth.switchTenant(tenant.id)" @click="auth.switchTenant(tenant.id)"
>Wählen >Wählen</UButton>
</UButton>
</div> </div>
</UCard> </UCard>
</UContainer> </UContainer>
</div> </div>
<UDashboardLayout class="safearea" v-else> <UDashboardLayout class="safearea" v-else >
<UDashboardPanel :width="250" :resizable="{ min: 200, max: 300 }" collapsible> <UDashboardPanel :width="250" :resizable="{ min: 200, max: 300 }" collapsible>
<UDashboardNavbar style="margin-top: env(safe-area-inset-top, 10px) !important;" <UDashboardNavbar style="margin-top: env(safe-area-inset-top, 10px) !important;" :class="['!border-transparent']" :ui="{ left: 'flex-1' }">
:class="['!border-transparent']" :ui="{ left: 'flex-1' }">
<template #left> <template #left>
<TenantDropdown class="w-full"/> <TenantDropdown class="w-full" />
</template> </template>
</UDashboardNavbar> </UDashboardNavbar>
@@ -245,17 +230,24 @@ const footerLinks = computed(() => [
<MainNav/> <MainNav/>
<div class="flex-1"/> <div class="flex-1" />
<template #footer> <template #footer>
<div class="flex flex-col gap-3 w-full"> <div class="flex flex-col gap-3 w-full">
<UColorModeButton/>
<UColorModeButton />
<LabelPrinterButton/> <LabelPrinterButton/>
<UDashboardSidebarLinks :links="footerLinks"/>
<UDivider class="sticky bottom-0"/>
<!-- Footer Links -->
<UDashboardSidebarLinks :links="footerLinks" />
<UDivider class="sticky bottom-0" />
<UserDropdown style="margin-bottom: env(safe-area-inset-bottom, 10px) !important;"/> <UserDropdown style="margin-bottom: env(safe-area-inset-bottom, 10px) !important;"/>
</div> </div>
</template> </template>
@@ -264,13 +256,13 @@ const footerLinks = computed(() => [
<UDashboardPage> <UDashboardPage>
<UDashboardPanel grow> <UDashboardPanel grow>
<slot/> <slot />
</UDashboardPanel> </UDashboardPanel>
</UDashboardPage> </UDashboardPage>
<HelpSlideover/>
<Calculator v-if="calculatorStore.isOpen"/>
<HelpSlideover/>
</UDashboardLayout> </UDashboardLayout>
</div> </div>
@@ -286,32 +278,37 @@ const footerLinks = computed(() => [
v-if="month === '12'" v-if="month === '12'"
/> />
<UColorModeImage <UColorModeImage
light="/Logo.png" light="/Logo.png"
dark="/Logo_Dark.png" dark="/Logo_Dark.png"
class="w-1/3 mx-auto my-10" class="w-1/3 mx-auto my-10"
v-else v-else
/> />
<div v-if="!auth.activeTenant" class="w-1/2 mx-auto text-center"> <div v-if="!auth.activeTenant" class="w-1/2 mx-auto text-center">
<h3 class="text-center font-bold text-2xl mb-5">Kein Aktiver Mandant. Bitte wählen Sie ein Mandant.</h3> <!-- Tenant Selection -->
<div class="mx-auto w-1/2 flex flex-row justify-between my-3" v-for="tenant in auth.tenants"> <h3 class="text-center font-bold text-2xl mb-5">Kein Aktiver Mandant. Bitte wählen Sie ein Mandant.</h3>
<span class="text-left">{{ tenant.name }}</span> <div class="mx-auto w-1/2 flex flex-row justify-between my-3" v-for="tenant in auth.tenants">
<UButton <span class="text-left">{{tenant.name}}</span>
<UButton
@click="auth.switchTenant(tenant.id)" @click="auth.switchTenant(tenant.id)"
>Wählen >Wählen</UButton>
</UButton> </div>
</div> <UButton
<UButton variant="outline"
variant="outline" color="rose"
color="rose"
@click="auth.logout()" @click="auth.logout()"
>Abmelden >Abmelden</UButton>
</UButton>
</div> </div>
<div v-else> <div v-else>
<UProgress animation="carousel" class="w-3/4 mx-auto mt-10"/> <UProgress animation="carousel" class="w-3/4 mx-auto mt-10" />
</div> </div>
</div> </div>
</template> </template>
<style scoped>
</style>

View File

@@ -1,9 +1,14 @@
<script setup> <script setup>
const {$api, $dayjs} = useNuxtApp() import dayjs from "dayjs";
// Zugriff auf $api und Toast Notification
const { $api } = useNuxtApp()
const toast = useToast() const toast = useToast()
defineShortcuts({ defineShortcuts({
'/': () => document.getElementById("searchinput").focus() '/': () => {
document.getElementById("searchinput").focus()
}
}) })
const tempStore = useTempStore() const tempStore = useTempStore()
@@ -13,280 +18,238 @@ const route = useRoute()
const bankstatements = ref([]) const bankstatements = ref([])
const bankaccounts = ref([]) const bankaccounts = ref([])
const filterAccount = ref([]) const filterAccount = ref([])
// Status für den Lade-Button
const isSyncing = ref(false) const isSyncing = ref(false)
const loadingDocs = ref(true) // Startet im Ladezustand
// Zeitraum-Optionen
const periodOptions = [
{label: 'Aktueller Monat', key: 'current_month'},
{label: 'Letzter Monat', key: 'last_month'},
{label: 'Aktuelles Quartal', key: 'current_quarter'},
{label: 'Letztes Quartal', key: 'last_quarter'},
{label: 'Benutzerdefiniert', key: 'custom'}
]
// Initialisierungswerte
const selectedPeriod = ref(periodOptions[0])
const dateRange = ref({
start: $dayjs().startOf('month').format('YYYY-MM-DD'),
end: $dayjs().endOf('month').format('YYYY-MM-DD')
})
const setupPage = async () => { const setupPage = async () => {
loadingDocs.value = true bankstatements.value = (await useEntities("bankstatements").select("*, statementallocations(*)", "date", false))
try { bankaccounts.value = await useEntities("bankaccounts").select()
const [statements, accounts] = await Promise.all([ if(bankaccounts.value.length > 0) filterAccount.value = bankaccounts.value
useEntities("bankstatements").select("*, statementallocations(*)", "valueDate", false),
useEntities("bankaccounts").select()
])
bankstatements.value = statements
bankaccounts.value = accounts
if (bankaccounts.value.length > 0 && filterAccount.value.length === 0) {
filterAccount.value = bankaccounts.value
}
// Erst nach dem Laden der Daten die Store-Werte anwenden
const savedBanking = tempStore.settings?.['banking'] || {}
if (savedBanking.periodKey) {
const found = periodOptions.find(p => p.key === savedBanking.periodKey)
if (found) selectedPeriod.value = found
}
if (savedBanking.range) {
dateRange.value = savedBanking.range
}
} catch (err) {
console.error("Setup Error:", err)
} finally {
loadingDocs.value = false
}
} }
// Watcher für Schnellwahlen & Persistenz // Funktion für den Bankabruf
watch([selectedPeriod, dateRange], ([newPeriod, newRange], [oldPeriod, oldRange]) => {
const now = $dayjs()
// Nur berechnen, wenn sich die Periode geändert hat
if (newPeriod.key !== oldPeriod?.key) {
switch (newPeriod.key) {
case 'current_month':
dateRange.value = {start: now.startOf('month').format('YYYY-MM-DD'), end: now.endOf('month').format('YYYY-MM-DD')}
break
case 'last_month':
const lastMonth = now.subtract(1, 'month')
dateRange.value = {start: lastMonth.startOf('month').format('YYYY-MM-DD'), end: lastMonth.endOf('month').format('YYYY-MM-DD')}
break
case 'current_quarter':
dateRange.value = {start: now.startOf('quarter').format('YYYY-MM-DD'), end: now.endOf('quarter').format('YYYY-MM-DD')}
break
case 'last_quarter':
const lastQuarter = now.subtract(1, 'quarter')
dateRange.value = {start: lastQuarter.startOf('quarter').format('YYYY-MM-DD'), end: lastQuarter.endOf('quarter').format('YYYY-MM-DD')}
break
}
}
// Speichern im Store
tempStore.modifyBankingPeriod(selectedPeriod.value.key, dateRange.value)
}, { deep: true })
const syncBankStatements = async () => { const syncBankStatements = async () => {
isSyncing.value = true isSyncing.value = true
try { try {
await $api('/api/functions/services/bankstatementsync', {method: 'POST'}) await $api('/api/functions/services/bankstatementsync', { method: 'POST' })
toast.add({title: 'Erfolg', description: 'Bankdaten synchronisiert.', color: 'green'})
toast.add({
title: 'Erfolg',
description: 'Bankdaten wurden erfolgreich synchronisiert.',
icon: 'i-heroicons-check-circle',
color: 'green'
})
// Wichtig: Daten neu laden, damit die neuen Buchungen direkt sichtbar sind
await setupPage() await setupPage()
} catch (error) { } catch (error) {
toast.add({title: 'Fehler', description: 'Fehler beim Abruf.', color: 'red'}) console.error(error)
toast.add({
title: 'Fehler',
description: 'Beim Abrufen der Bankdaten ist ein Fehler aufgetreten.',
icon: 'i-heroicons-exclamation-circle',
color: 'red'
})
} finally { } finally {
isSyncing.value = false isSyncing.value = false
} }
} }
const templateColumns = [ const templateColumns = [
{key: "account", label: "Konto"}, {
{key: "valueDate", label: "Valuta"}, key: "account",
{key: "amount", label: "Betrag"}, label: "Konto"
{key: "openAmount", label: "Offen"}, },{
{key: "partner", label: "Name"}, key: "valueDate",
{key: "text", label: "Beschreibung"} label: "Valuta"
},
{
key: "amount",
label: "Betrag"
},
{
key: "openAmount",
label: "Offener Betrag"
},
{
key: "partner",
label: "Name"
},
{
key: "text",
label: "Beschreibung"
}
] ]
const selectedColumns = ref(templateColumns)
const columns = computed(() => templateColumns.filter((column) => selectedColumns.value.includes(column)))
const searchString = ref(tempStore.searchStrings["bankstatements"] || '')
const selectedFilters = ref(tempStore.filters?.["banking"]?.["main"] || ['Nur offene anzeigen'])
const shouldShowMonthDivider = (row, index) => { const searchString = ref(tempStore.searchStrings["bankstatements"] ||'')
if (index === 0) return true;
const prevRow = filteredRows.value[index - 1]; const clearSearchString = () => {
return $dayjs(row.valueDate).format('MMMM YYYY') !== $dayjs(prevRow.valueDate).format('MMMM YYYY'); tempStore.clearSearchString("bankstatements")
searchString.value = ''
} }
const displayCurrency = (value, currency = "€") => {
return `${Number(value).toFixed(2).replace(".",",")} ${currency}`
}
const calculateOpenSum = (statement) => { const calculateOpenSum = (statement) => {
const allocated = statement.statementallocations?.reduce((acc, curr) => acc + curr.amount, 0) || 0; let startingAmount = 0
return (statement.amount - allocated).toFixed(2);
statement.statementallocations.forEach(item => {
startingAmount += item.amount
})
return (statement.amount - startingAmount).toFixed(2)
} }
const selectedFilters = ref(tempStore.filters?.["banking"]?.["main"] ? tempStore.filters["banking"]["main"] : ['Nur offene anzeigen'])
const filteredRows = computed(() => { const filteredRows = computed(() => {
if (!bankstatements.value.length) return [] let temp = bankstatements.value
let temp = [...bankstatements.value] if(route.query.filter) {
console.log(route.query.filter)
temp = temp.filter(i => JSON.parse(route.query.filter).includes(i.id))
} else {
if(selectedFilters.value.includes("Nur offene anzeigen")){
temp = temp.filter(i => Number(calculateOpenSum(i)) !== 0)
}
// Filterung nach Datum if(selectedFilters.value.includes("Nur positive anzeigen")){
if (dateRange.value.start) { temp = temp.filter(i => i.amount >= 0)
temp = temp.filter(i => $dayjs(i.valueDate).isSameOrAfter($dayjs(dateRange.value.start), 'day')) }
}
if (dateRange.value.end) { if(selectedFilters.value.includes("Nur negative anzeigen")){
temp = temp.filter(i => $dayjs(i.valueDate).isSameOrBefore($dayjs(dateRange.value.end), 'day')) temp = temp.filter(i => i.amount < 0)
}
} }
// Status Filter return useSearch(searchString.value, temp.filter(i => filterAccount.value.find(x => x.id === i.account)))
if (selectedFilters.value.includes("Nur offene anzeigen")) {
temp = temp.filter(i => Number(calculateOpenSum(i)) !== 0)
}
if (selectedFilters.value.includes("Nur positive anzeigen")) {
temp = temp.filter(i => i.amount >= 0)
}
if (selectedFilters.value.includes("Nur negative anzeigen")) {
temp = temp.filter(i => i.amount < 0)
}
// Konto Filter & Suche
let results = temp.filter(i => filterAccount.value.find(x => x.id === i.account))
if (searchString.value) {
results = useSearch(searchString.value, results)
}
return results.sort((a, b) => $dayjs(b.valueDate).unix() - $dayjs(a.valueDate).unix())
}) })
const displayCurrency = (value) => `${Number(value).toFixed(2).replace(".", ",")}` setupPage()
onMounted(() => {
setupPage()
})
</script> </script>
<template> <template>
<UDashboardNavbar title="Bankbuchungen" :badge="filteredRows.length"> <UDashboardNavbar title="Bankbuchungen" :badge="filteredRows.length">
<template #right> <template #right>
<UButton <UButton
label="Bankabruf" label="Bankabruf"
icon="i-heroicons-arrow-path" icon="i-heroicons-arrow-path"
color="primary"
variant="solid"
:loading="isSyncing" :loading="isSyncing"
@click="syncBankStatements" @click="syncBankStatements"
class="mr-2" class="mr-2"
/> />
<UInput <UInput
id="searchinput" id="searchinput"
name="searchinput"
v-model="searchString" v-model="searchString"
icon="i-heroicons-magnifying-glass" icon="i-heroicons-funnel"
autocomplete="off"
placeholder="Suche..." placeholder="Suche..."
class="hidden lg:block"
@keydown.esc="$event.target.blur()"
@change="tempStore.modifySearchString('bankstatements',searchString)" @change="tempStore.modifySearchString('bankstatements',searchString)"
>
<template #trailing>
<UKbd value="/" />
</template>
</UInput>
<UButton
icon="i-heroicons-x-mark"
variant="outline"
color="rose"
@click="clearSearchString()"
v-if="searchString.length > 0"
/> />
</template> </template>
</UDashboardNavbar> </UDashboardNavbar>
<UDashboardToolbar> <UDashboardToolbar>
<template #left> <template #left>
<div class="flex items-center gap-3"> <USelectMenu
<USelectMenu :options="bankaccounts"
:options="bankaccounts" v-model="filterAccount"
v-model="filterAccount" option-attribute="iban"
option-attribute="iban" multiple
multiple by="id"
by="id" :ui-menu="{ width: 'min-w-max' }"
placeholder="Konten" >
class="w-48" <template #label>
/> Konto
<UDivider orientation="vertical" class="h-6"/> </template>
<div class="flex items-center gap-2"> </USelectMenu>
<USelectMenu
v-model="selectedPeriod"
:options="periodOptions"
class="w-44"
icon="i-heroicons-calendar-days"
/>
<div v-if="selectedPeriod.key === 'custom'" class="flex items-center gap-1">
<UInput type="date" v-model="dateRange.start" size="xs" class="w-32"/>
<UInput type="date" v-model="dateRange.end" size="xs" class="w-32"/>
</div>
<div v-else class="text-xs text-gray-400 hidden sm:block italic">
{{ $dayjs(dateRange.start).format('DD.MM.') }} - {{ $dayjs(dateRange.end).format('DD.MM.YYYY') }}
</div>
</div>
</div>
</template> </template>
<template #right> <template #right>
<USelectMenu <USelectMenu
icon="i-heroicons-adjustments-horizontal" icon="i-heroicons-adjustments-horizontal-solid"
multiple multiple
v-model="selectedFilters" v-model="selectedFilters"
:options="['Nur offene anzeigen','Nur positive anzeigen','Nur negative anzeigen']" :options="['Nur offene anzeigen','Nur positive anzeigen','Nur negative anzeigen']"
:color="selectedFilters.length > 0 ? 'primary' : 'white'"
:ui-menu="{ width: 'min-w-max' }"
@change="tempStore.modifyFilter('banking','main',selectedFilters)" @change="tempStore.modifyFilter('banking','main',selectedFilters)"
/> >
<template #label>
Filter
</template>
</USelectMenu>
</template> </template>
</UDashboardToolbar> </UDashboardToolbar>
<UTable
:rows="filteredRows"
:columns="columns"
class="w-full"
:ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
@select="(i) => router.push(`/banking/statements/edit/${i.id}`)"
:empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Buchungen anzuzeigen' }"
>
<div class="overflow-y-auto relative" style="height: calc(100vh - 200px)"> <template #account-data="{row}">
<div v-if="loadingDocs" class="p-20 flex flex-col items-center justify-center"> {{row.account ? bankaccounts.find(i => i.id === row.account).iban : ""}}
<UProgress animation="carousel" class="w-1/3 mb-4" /> </template>
<span class="text-sm text-gray-500 italic">Bankbuchungen werden geladen...</span> <template #valueDate-data="{row}">
</div> {{dayjs(row.valueDate).format("DD.MM.YY")}}
</template>
<table v-else class="w-full text-left border-collapse"> <template #amount-data="{row}">
<thead class="sticky top-0 bg-white dark:bg-gray-900 z-10 shadow-sm"> <span
<tr class="text-xs font-semibold text-gray-500 uppercase"> v-if="row.amount >= 0"
<th v-for="col in templateColumns" :key="col.key" class="p-4 border-b dark:border-gray-800"> class="text-primary-500"
{{ col.label }} >{{String(row.amount.toFixed(2)).replace(".",",")}} </span>
</th> <span
</tr> v-else-if="row.amount < 0"
</thead> class="text-rose-500"
<tbody> >{{String(row.amount.toFixed(2)).replace(".",",")}} </span>
<template v-for="(row, index) in filteredRows" :key="row.id"> </template>
<tr v-if="shouldShowMonthDivider(row, index)"> <template #openAmount-data="{row}">
<td colspan="6" class="bg-gray-50 dark:bg-gray-800/50 p-2 pl-4 text-sm font-bold text-primary-600 border-y dark:border-gray-800"> {{displayCurrency(calculateOpenSum(row))}}
<div class="flex items-center gap-2"> </template>
<UIcon name="i-heroicons-calendar" class="w-4 h-4"/> <template #partner-data="{row}">
{{ $dayjs(row.valueDate).format('MMMM YYYY') }} <span
</div> v-if="row.amount < 0"
</td> >
</tr> {{row.credName}}
<tr </span>
class="hover:bg-gray-50 dark:hover:bg-gray-800/30 cursor-pointer border-b dark:border-gray-800 text-sm group" <span
@click="router.push(`/banking/statements/edit/${row.id}`)" v-else-if="row.amount > 0"
> >
<td class="p-4 text-[10px] text-gray-400 font-mono truncate max-w-[150px]"> {{row.debName}}
{{ row.account ? bankaccounts.find(i => i.id === row.account)?.iban : "" }} </span>
</td> </template>
<td class="p-4 whitespace-nowrap">{{ $dayjs(row.valueDate).format("DD.MM.YY") }}</td> </UTable>
<td class="p-4 font-semibold">
<span :class="row.amount >= 0 ? 'text-green-600 dark:text-green-400' : 'text-rose-600 dark:text-rose-400'">
{{ displayCurrency(row.amount) }}
</span>
</td>
<td class="p-4 text-gray-400 italic text-xs">
{{ Number(calculateOpenSum(row)) !== 0 ? displayCurrency(calculateOpenSum(row)) : '-' }}
</td>
<td class="p-4 truncate max-w-[180px] font-medium">
{{ row.amount < 0 ? row.credName : row.debName }}
</td>
<td class="p-4 text-gray-500 truncate max-w-[350px] text-xs">
{{ row.text }}
</td>
</tr>
</template>
<tr v-if="filteredRows.length === 0">
<td colspan="6" class="p-32 text-center text-gray-400">
<div class="flex flex-col items-center">
<UIcon name="i-heroicons-magnifying-glass-circle" class="w-12 h-12 mb-3 opacity-20"/>
<p class="font-medium">Keine Buchungen gefunden</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<PageLeaveGuard :when="isSyncing"/> <PageLeaveGuard :when="isSyncing"/>
</template> </template>
<style scoped>
</style>

View File

@@ -1387,7 +1387,7 @@ const saveDocument = async (state, resetup = false) => {
endText: itemInfo.value.endText, endText: itemInfo.value.endText,
rows: itemInfo.value.rows, rows: itemInfo.value.rows,
contactPerson: itemInfo.value.contactPerson, contactPerson: itemInfo.value.contactPerson,
createddocument: itemInfo.value.createddocument, linkedDocument: itemInfo.value.linkedDocument,
agriculture: itemInfo.value.agriculture, agriculture: itemInfo.value.agriculture,
letterhead: itemInfo.value.letterhead, letterhead: itemInfo.value.letterhead,
usedAdvanceInvoices: itemInfo.value.usedAdvanceInvoices, usedAdvanceInvoices: itemInfo.value.usedAdvanceInvoices,

View File

@@ -8,6 +8,7 @@
class="hidden lg:block" class="hidden lg:block"
icon="i-heroicons-funnel" icon="i-heroicons-funnel"
placeholder="Suche..." placeholder="Suche..."
@change="tempStore.modifySearchString('createddocuments',searchString)"
@keydown.esc="$event.target.blur()" @keydown.esc="$event.target.blur()"
> >
<template #trailing> <template #trailing>
@@ -29,7 +30,22 @@
</template> </template>
</UDashboardNavbar> </UDashboardNavbar>
<UDashboardToolbar> <UDashboardToolbar>
<template #right> <template #right>
<!-- <USelectMenu
v-model="selectedColumns"
:options="templateColumns"
by="key"
class="hidden lg:block"
icon="i-heroicons-adjustments-horizontal-solid"
multiple
@change="tempStore.modifyColumns('createddocuments',selectedColumns)"
>
<template #label>
Spalten
</template>
</USelectMenu>-->
<USelectMenu <USelectMenu
v-if="selectableFilters.length > 0" v-if="selectableFilters.length > 0"
v-model="selectedFilters" v-model="selectedFilters"
@@ -141,31 +157,6 @@
<script setup> <script setup>
import dayjs from "dayjs"; import dayjs from "dayjs";
import { ref, computed, watch } from 'vue';
const dataStore = useDataStore()
const tempStore = useTempStore()
const router = useRouter()
const type = "createddocuments"
const dataType = dataStore.dataTypes[type]
const items = ref([])
const selectedItem = ref(0)
const activeTabIndex = ref(0)
// Debounce-Logik für die Suche
const searchString = ref(tempStore.searchStrings['createddocuments'] || '')
const debouncedSearchString = ref(searchString.value)
let debounceTimeout = null
watch(searchString, (newVal) => {
clearTimeout(debounceTimeout)
debounceTimeout = setTimeout(() => {
debouncedSearchString.value = newVal
tempStore.modifySearchString('createddocuments', newVal)
}, 300) // 300ms warten nach dem letzten Tastendruck
})
defineShortcuts({ defineShortcuts({
'/': () => { '/': () => {
@@ -177,6 +168,10 @@ defineShortcuts({
'Enter': { 'Enter': {
usingInput: true, usingInput: true,
handler: () => { handler: () => {
// Zugriff auf das aktuell sichtbare Element basierend auf Tab und Selektion
const currentList = getRowsForTab(selectedTypes.value[activeTabIndex.value]?.key || 'drafts')
// Fallback auf globale Liste falls nötig, aber Logik sollte auf Tab passen
if (filteredRows.value[selectedItem.value]) { if (filteredRows.value[selectedItem.value]) {
router.push(`/createDocument/show/${filteredRows.value[selectedItem.value].id}`) router.push(`/createDocument/show/${filteredRows.value[selectedItem.value].id}`)
} }
@@ -198,6 +193,17 @@ defineShortcuts({
} }
}) })
const dataStore = useDataStore()
const tempStore = useTempStore()
const router = useRouter()
const type = "createddocuments"
const dataType = dataStore.dataTypes[type]
const items = ref([])
const selectedItem = ref(0)
const activeTabIndex = ref(0)
const setupPage = async () => { const setupPage = async () => {
items.value = (await useEntities("createddocuments").select("*, customer(id,name), statementallocations(id,amount),linkedDocument(*)", "documentNumber", true, true)) items.value = (await useEntities("createddocuments").select("*, customer(id,name), statementallocations(id,amount),linkedDocument(*)", "documentNumber", true, true))
} }
@@ -216,9 +222,10 @@ const templateColumns = [
{key: "dueDate", label: "Fällig"} {key: "dueDate", label: "Fällig"}
] ]
// Eigene Spalten für Entwürfe: Referenz raus, Status rein
const draftColumns = [ const draftColumns = [
{key: 'type', label: "Typ"}, {key: 'type', label: "Typ"},
{key: 'state', label: "Status"}, {key: 'state', label: "Status"}, // Status wieder drin
{key: 'partner', label: "Kunde"}, {key: 'partner', label: "Kunde"},
{key: "date", label: "Erstellt am"}, {key: "date", label: "Erstellt am"},
{key: "amount", label: "Betrag"} {key: "amount", label: "Betrag"}
@@ -235,11 +242,31 @@ const getColumnsForTab = (tabKey) => {
} }
const templateTypes = [ const templateTypes = [
{ key: "drafts", label: "Entwürfe" }, {
{ key: "invoices", label: "Rechnungen" }, key: "drafts",
{ key: "quotes", label: "Angebote" }, label: "Entwürfe"
{ key: "deliveryNotes", label: "Lieferscheine" }, },
{ key: "confirmationOrders", label: "Auftragsbestätigungen" } {
key: "invoices",
label: "Rechnungen"
},
/*,{
key: "cancellationInvoices",
label: "Stornorechnungen"
},{
key: "advanceInvoices",
label: "Abschlagsrechnungen"
},*/
{
key: "quotes",
label: "Angebote"
}, {
key: "deliveryNotes",
label: "Lieferscheine"
}, {
key: "confirmationOrders",
label: "Auftragsbestätigungen"
}
] ]
const selectedTypes = ref(tempStore.filters["createddocuments"] ? tempStore.filters["createddocuments"] : templateTypes) const selectedTypes = ref(tempStore.filters["createddocuments"] ? tempStore.filters["createddocuments"] : templateTypes)
const types = computed(() => { const types = computed(() => {
@@ -247,9 +274,10 @@ const types = computed(() => {
}) })
const selectItem = (item) => { const selectItem = (item) => {
console.log(item)
if (item.state === "Entwurf") { if (item.state === "Entwurf") {
router.push(`/createDocument/edit/${item.id}`) router.push(`/createDocument/edit/${item.id}`)
} else { } else if (item.state !== "Entwurf") {
router.push(`/createDocument/show/${item.id}`) router.push(`/createDocument/show/${item.id}`)
} }
} }
@@ -258,19 +286,24 @@ const displayCurrency = (value, currency = "€") => {
return `${Number(value).toFixed(2).replace(".", ",")} ${currency}` return `${Number(value).toFixed(2).replace(".", ",")} ${currency}`
} }
const searchString = ref(tempStore.searchStrings['createddocuments'] || '')
const clearSearchString = () => { const clearSearchString = () => {
tempStore.clearSearchString('createddocuments') tempStore.clearSearchString('createddocuments')
searchString.value = '' searchString.value = ''
debouncedSearchString.value = ''
} }
const selectableFilters = ref(dataType.filters.map(i => i.name)) const selectableFilters = ref(dataType.filters.map(i => i.name))
const selectedFilters = ref(dataType.filters.filter(i => i.default).map(i => i.name) || []) const selectedFilters = ref(dataType.filters.filter(i => i.default).map(i => i.name) || [])
const filteredRows = computed(() => { const filteredRows = computed(() => {
let tempItems = items.value.filter(i => types.value.find(x => { let tempItems = items.value.filter(i => types.value.find(x => {
// 1. Draft Tab Logic
if (x.key === 'drafts') return i.state === 'Entwurf' if (x.key === 'drafts') return i.state === 'Entwurf'
// 2. Global Draft Exclusion (drafts shouldn't be in other tabs)
if (i.state === 'Entwurf' && x.key !== 'drafts') return false if (i.state === 'Entwurf' && x.key !== 'drafts') return false
// 3. Normal Type Logic
if (x.key === 'invoices') return ['invoices', 'advanceInvoices', 'cancellationInvoices'].includes(i.type) if (x.key === 'invoices') return ['invoices', 'advanceInvoices', 'cancellationInvoices'].includes(i.type)
return x.key === i.type return x.key === i.type
})) }))
@@ -291,16 +324,22 @@ const filteredRows = computed(() => {
}) })
} }
// Hier nutzen wir nun den debounced Wert für die lokale Suche tempItems = useSearch(searchString.value, tempItems)
const results = useSearch(debouncedSearchString.value, tempItems.slice().reverse())
return results return useSearch(searchString.value, tempItems.slice().reverse())
}) })
const getRowsForTab = (tabKey) => { const getRowsForTab = (tabKey) => {
return filteredRows.value.filter(row => { return filteredRows.value.filter(row => {
if (tabKey === 'drafts') return row.state === 'Entwurf' if (tabKey === 'drafts') {
return row.state === 'Entwurf'
}
if (row.state === 'Entwurf') return false if (row.state === 'Entwurf') return false
if (tabKey === 'invoices') return ['invoices', 'advanceInvoices', 'cancellationInvoices'].includes(row.type)
if (tabKey === 'invoices') {
return ['invoices', 'advanceInvoices', 'cancellationInvoices'].includes(row.type)
}
return row.type === tabKey return row.type === tabKey
}) })
} }
@@ -310,4 +349,7 @@ const isPaid = (item) => {
item.statementallocations.forEach(allocation => amountPaid += allocation.amount) item.statementallocations.forEach(allocation => amountPaid += allocation.amount)
return Number(amountPaid.toFixed(2)) === useSum().getCreatedDocumentSum(item, items.value) return Number(amountPaid.toFixed(2)) === useSum().getCreatedDocumentSum(item, items.value)
} }
</script> </script>
<style scoped>
</style>

View File

@@ -17,18 +17,11 @@ const dataStore = useDataStore()
const itemInfo = ref({}) const itemInfo = ref({})
const linkedDocument =ref({}) const linkedDocument =ref({})
const links = ref([])
const setupPage = async () => { const setupPage = async () => {
if(route.params) { if(route.params) {
if(route.params.id) itemInfo.value = await useEntities("createddocuments").selectSingle(route.params.id,"*,files(*),linkedDocument(*), statementallocations(bs_id)") if(route.params.id) itemInfo.value = await useEntities("createddocuments").selectSingle(route.params.id,"*,files(*),linkedDocument(*), statementallocations(bs_id)")
if(itemInfo.value.type === "invoices"){ console.log(itemInfo.value)
const createddocuments = await useEntities("createddocuments").select()
console.log(createddocuments)
links.value = createddocuments.filter(i => i.createddocument?.id === itemInfo.value.id)
console.log(links.value)
}
linkedDocument.value = await useFiles().selectDocument(itemInfo.value.files[0].id) linkedDocument.value = await useFiles().selectDocument(itemInfo.value.files[0].id)
} }
@@ -87,23 +80,17 @@ const openBankstatements = () => {
> >
E-Mail E-Mail
</UButton> </UButton>
<UTooltip <UButton
@click="router.push(`/createDocument/edit/?createddocument=${itemInfo.id}&loadMode=storno`)"
variant="outline"
color="rose"
v-if="itemInfo.type === 'invoices' || itemInfo.type === 'advanceInvoices'" v-if="itemInfo.type === 'invoices' || itemInfo.type === 'advanceInvoices'"
:text="links.find(i => i.type === 'cancellationInvoices') ? 'Bereits stoniert' : ''"
> >
<UButton Stornieren
@click="router.push(`/createDocument/edit/?createddocument=${itemInfo.id}&loadMode=storno`)" </UButton>
variant="outline"
color="rose"
:disabled="links.find(i => i.type === 'cancellationInvoices')"
>
Stornieren
</UButton>
</UTooltip>
<UButton <UButton
v-if="itemInfo.project" v-if="itemInfo.project"
@click="router.push(`/standardEntity/projects/show/${itemInfo.project?.id}`)" @click="router.push(`/standardEntity/projects/show/${itemInfo.project}`)"
icon="i-heroicons-link" icon="i-heroicons-link"
variant="outline" variant="outline"
> >
@@ -111,36 +98,12 @@ const openBankstatements = () => {
</UButton> </UButton>
<UButton <UButton
v-if="itemInfo.customer" v-if="itemInfo.customer"
@click="router.push(`/standardEntity/customers/show/${itemInfo.customer?.id}`)" @click="router.push(`/standardEntity/customers/show/${itemInfo.customer}`)"
icon="i-heroicons-link" icon="i-heroicons-link"
variant="outline" variant="outline"
> >
Kunde Kunde
</UButton> </UButton>
<UButton
v-if="itemInfo.plant"
@click="router.push(`/standardEntity/plants/show/${itemInfo.plant?.id}`)"
icon="i-heroicons-link"
variant="outline"
>
Objekt
</UButton>
<UButton
v-if="itemInfo.contract"
@click="router.push(`/standardEntity/contracts/show/${itemInfo.contract?.id}`)"
icon="i-heroicons-link"
variant="outline"
>
Vertrag
</UButton>
<UButton
v-if="itemInfo.contact"
@click="router.push(`/standardEntity/contacts/show/${itemInfo.contact?.id}`)"
icon="i-heroicons-link"
variant="outline"
>
Ansprechpartner
</UButton>
<UButton <UButton
v-if="itemInfo.createddocument" v-if="itemInfo.createddocument"
@click="router.push(`/createDocument/show/${itemInfo.createddocument}`)" @click="router.push(`/createDocument/show/${itemInfo.createddocument}`)"

View File

@@ -1,28 +1,47 @@
<script setup> <script setup>
import { ref, computed, watch } from 'vue';
import {BlobReader, BlobWriter, ZipWriter} from "@zip.js/zip.js";
import DocumentDisplayModal from "~/components/DocumentDisplayModal.vue"; import DocumentDisplayModal from "~/components/DocumentDisplayModal.vue";
import DocumentUploadModal from "~/components/DocumentUploadModal.vue"; import DocumentUploadModal from "~/components/DocumentUploadModal.vue";
import dayjs from "dayjs"; import dayjs from "dayjs";
import arraySort from "array-sort"; import arraySort from "array-sort";
// --- Shortcuts ---
defineShortcuts({ defineShortcuts({
'/': () => document.getElementById("searchinput").focus(), '+': () => {
'+': () => { uploadModalOpen.value = true }, //Hochladen
uploadModalOpen.value = true
},
'Enter': { 'Enter': {
usingInput: true, usingInput: true,
handler: () => { handler: () => {
const entry = renderedFileList.value[selectedFileIndex.value] let entry = renderedFileList.value[selectedFileIndex.value]
if (!entry) return
if (entry.type === "file") showFile(entry.id) if(entry.type === "file") {
else if (entry.type === "folder") changeFolder(folders.value.find(i => i.id === entry.id)) showFile(entry.id)
} else if(createFolderModalOpen.value === false && entry.type === "folder") {
changeFolder(currentFolders.value.find(i => i.id === entry.id))
} else if(createFolderModalOpen.value === true) {
createFolder()
}
} }
}, },
'arrowdown': () => { 'arrowdown': () => {
if (selectedFileIndex.value < renderedFileList.value.length - 1) selectedFileIndex.value++ if(selectedFileIndex.value < renderedFileList.value.length - 1) {
selectedFileIndex.value += 1
} else {
selectedFileIndex.value = 0
}
}, },
'arrowup': () => { 'arrowup': () => {
if (selectedFileIndex.value > 0) selectedFileIndex.value-- if(selectedFileIndex.value === 0) {
selectedFileIndex.value = renderedFileList.value.length - 1
} else {
selectedFileIndex.value -= 1
}
} }
}) })
@@ -31,362 +50,486 @@ const tempStore = useTempStore()
const router = useRouter() const router = useRouter()
const route = useRoute() const route = useRoute()
const modal = useModal() const modal = useModal()
const auth = useAuthStore() const auth = useAuthStore()
const uploadModalOpen = ref(false)
const createFolderModalOpen = ref(false)
const uploadInProgress = ref(false)
const fileUploadFormData = ref({
tags: ["Eingang"],
path: "",
tenant: auth.activeTenant,
folder: null
})
const files = useFiles() const files = useFiles()
// --- State --- const displayMode = ref("list")
const displayModes = ref([{label: 'Liste',key:'list', icon: 'i-heroicons-list-bullet'},{label: 'Kacheln',key:'rectangles', icon: 'i-heroicons-squares-2x2'}])
const documents = ref([]) const documents = ref([])
const folders = ref([]) const folders = ref([])
const filetags = ref([]) const filetags = ref([])
const currentFolder = ref(null) const currentFolder = ref(null)
const loadingDocs = ref(true)
const loadingDocs = ref(false)
const isDragTarget = ref(false)
const loaded = ref(false) const loaded = ref(false)
const displayMode = ref("list")
const displayModes = [
{ label: 'Liste', key: 'list', icon: 'i-heroicons-list-bullet' },
{ label: 'Kacheln', key: 'rectangles', icon: 'i-heroicons-squares-2x2' }
]
const createFolderModalOpen = ref(false)
const createFolderData = ref({ name: '', standardFiletype: null, standardFiletypeIsOptional: true })
const selectedFiles = ref({})
const selectedFileIndex = ref(0)
// --- Search & Debounce ---
const searchString = ref(tempStore.searchStrings["files"] || '')
const debouncedSearch = ref(searchString.value)
let debounceTimeout = null
watch(searchString, (val) => {
clearTimeout(debounceTimeout)
debounceTimeout = setTimeout(() => {
debouncedSearch.value = val
tempStore.modifySearchString('files', val)
}, 300)
})
// --- Logic ---
const setupPage = async () => { const setupPage = async () => {
loadingDocs.value = true folders.value = await useEntities("folders").select()
const [fRes, dRes, tRes] = await Promise.all([
useEntities("folders").select(),
files.selectDocuments(),
useEntities("filetags").select()
])
folders.value = fRes
documents.value = dRes
filetags.value = tRes
if (route.query?.folder) { documents.value = await files.selectDocuments()
currentFolder.value = folders.value.find(i => i.id === route.query.folder) || null
filetags.value = await useEntities("filetags").select()
if(route.query) {
if(route.query.folder) {
currentFolder.value = await useEntities("folders").selectSingle(route.query.folder)
}
} }
const dropZone = document.getElementById("drop_zone")
dropZone.ondragover = function (event) {
modal.open(DocumentUploadModal,{fileData: {folder: currentFolder.value.id, type: currentFolder.value.standardFiletype, typeEnabled: currentFolder.value.standardFiletypeIsOptional}, onUploadFinished: () => {
setupPage()
}})
event.preventDefault()
}
dropZone.ondragleave = function (event) {
isDragTarget.value = false
}
dropZone.ondrop = async function (event) {
event.preventDefault()
}
loadingDocs.value = false loadingDocs.value = false
loaded.value = true loaded.value = true
} }
setupPage()
onMounted(() => setupPage())
const currentFolders = computed(() => { const currentFolders = computed(() => {
return folders.value if(folders.value.length > 0) {
.filter(i => currentFolder.value ? i.parent === currentFolder.value.id : !i.parent)
.sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: 'base' })) let tempFolders = folders.value.filter(i => currentFolder.value ? i.parent === currentFolder.value.id : !i.parent)
return tempFolders
} else return []
}) })
const breadcrumbLinks = computed(() => { const breadcrumbLinks = computed(() => {
const links = [{ label: "Home", icon: "i-heroicons-home", click: () => changeFolder(null) }]
if (currentFolder.value) { if(currentFolder.value) {
let path = [] let parents = []
let curr = currentFolder.value
while (curr) { const addParent = (parent) => {
path.unshift({ parents.push(parent)
label: curr.name, if(parent.parent) {
icon: "i-heroicons-folder", addParent(folders.value.find(i => i.id === parent.parent))
click: () => changeFolder(folders.value.find(f => f.id === curr.id)) }
})
curr = folders.value.find(f => f.id === curr.parent)
} }
return [...links, ...path]
if(currentFolder.value.parent) {
addParent(folders.value.find(i => i.id === currentFolder.value.parent))
}
return [{
label: "Home",
click: () => {
changeFolder(null)
},
icon: "i-heroicons-folder"
},
...parents.map(i => {
return {
label: folders.value.find(x => x.id === i.id).name,
click: () => {
changeFolder(i)
},
icon: "i-heroicons-folder"
}
}).reverse(),
{
label: currentFolder.value.name,
click: () => {
changeFolder(currentFolder.value)
},
icon: "i-heroicons-folder"
}]
} else {
return [{
label: "Home",
click: () => {
changeFolder(null)
},
icon: "i-heroicons-folder"
}]
} }
return links
}) })
const renderedFileList = computed(() => { const filteredDocuments = computed(() => {
const folderList = currentFolders.value.map(i => ({
label: i.name,
id: i.id,
type: "folder",
createdAt: i.createdAt
}))
const fileList = documents.value return documents.value.filter(i => currentFolder.value ? i.folder === currentFolder.value.id : !i.folder)
.filter(i => currentFolder.value ? i.folder === currentFolder.value.id : !i.folder)
.map(i => ({
label: i.path.split("/").pop(),
id: i.id,
type: "file",
createdAt: i.createdAt
}))
.sort((a, b) => a.label.localeCompare(b.label, undefined, { sensitivity: 'base' }))
let combined = [...folderList, ...fileList]
if (debouncedSearch.value) {
combined = useSearch(debouncedSearch.value, combined)
}
return combined
}) })
const changeFolder = async (folder) => { const changeFolder = async (newFolder) => {
currentFolder.value = folder loadingDocs.value = true
await router.push(folder ? `/files?folder=${folder.id}` : `/files`) currentFolder.value = newFolder
}
if(newFolder) {
fileUploadFormData.value.folder = newFolder.id
await router.push(`/files?folder=${newFolder.id}`)
} else {
fileUploadFormData.value.folder = null
await router.push(`/files`)
}
const createFolder = async () => {
await useEntities("folders").create({
parent: currentFolder.value?.id,
name: createFolderData.value.name,
standardFiletype: createFolderData.value.standardFiletype,
standardFiletypeIsOptional: createFolderData.value.standardFiletypeIsOptional
})
createFolderModalOpen.value = false
createFolderData.value = { name: '', standardFiletype: null, standardFiletypeIsOptional: true }
setupPage() setupPage()
} }
const showFile = (fileId) => { const createFolderData = ref({})
modal.open(DocumentDisplayModal, { const createFolder = async () => {
documentData: documents.value.find(i => i.id === fileId), const res = await useEntities("folders").create({
onUpdatedNeeded: () => setupPage() parent: currentFolder.value ? currentFolder.value.id : undefined,
name: createFolderData.value.name,
}) })
createFolderModalOpen.value = false
setupPage()
} }
const downloadSelected = async () => { const downloadSelected = async () => {
const ids = Object.keys(selectedFiles.value).filter(k => selectedFiles.value[k])
await useFiles().downloadFile(undefined, ids) let files = []
files = filteredDocuments.value.filter(i => selectedFiles.value[i.id] === true).map(i => i.path)
await useFiles().downloadFile(undefined,Object.keys(selectedFiles.value))
}
const searchString = ref(tempStore.searchStrings["files"] ||'')
const renderedFileList = computed(() => {
let files = filteredDocuments.value.map(i => {
return {
label: i.path.split("/")[i.path.split("/").length -1],
id: i.id,
type: "file"
}
})
arraySort(files, (a,b) => {
let aVal = a.path ? a.path.split("/")[a.path.split("/").length -1] : null
let bVal = b.path ? b.path.split("/")[b.path.split("/").length -1] : null
if(aVal && bVal) {
return aVal.localeCompare(bVal)
} else if(!aVal && bVal) {
return 1
} else {
return -1
}
}, {reverse: true})
if(searchString.value.length > 0) {
files = useSearch(searchString.value, files)
}
let folders = currentFolders.value.map(i => {
return {
label: i.name,
id: i.id,
type: "folder"
}
})
arraySort(folders, "label")
/*folders.sort(function(a, b) {
// Compare the 2 dates
if (a.name < b.name) return -1;
if (a.name > b.name) return 1;
return 0;
});*/
return [...folders,...files]
})
const selectedFileIndex = ref(0)
const showFile = (fileId) => {
modal.open(DocumentDisplayModal,{
documentData: documents.value.find(i => i.id === fileId),
onUpdatedNeeded: setupPage()
})
}
const selectedFiles = ref({});
const selectAll = () => {
if(Object.keys(selectedFiles.value).find(i => selectedFiles.value[i] === true)) {
selectedFiles.value = {}
} else {
selectedFiles.value = Object.fromEntries(filteredDocuments.value.map(i => i.id).map(k => [k,true]))
}
} }
const clearSearchString = () => { const clearSearchString = () => {
searchString.value = ''
debouncedSearch.value = ''
tempStore.clearSearchString("files") tempStore.clearSearchString("files")
searchString.value = ''
} }
const selectAll = (event) => {
if (event.target.checked) {
const obj = {}
renderedFileList.value.filter(e => e.type === 'file').forEach(e => obj[e.id] = true)
selectedFiles.value = obj
} else {
selectedFiles.value = {}
}
}
</script> </script>
<template> <template>
<UDashboardNavbar title="Dateien">
<UDashboardNavbar
title="Dateien"
>
<template #right> <template #right>
<UInput <UInput
id="searchinput" id="searchinput"
v-model="searchString" v-model="searchString"
icon="i-heroicons-magnifying-glass" icon="i-heroicons-funnel"
autocomplete="off" autocomplete="off"
placeholder="Suche..." placeholder="Suche..."
class="hidden lg:block w-64" class="hidden lg:block"
@keydown.esc="$event.target.blur()" @keydown.esc="$event.target.blur()"
@change="tempStore.modifySearchString('files',searchString)"
> >
<template #trailing> <template #trailing>
<div class="flex items-center gap-1"> <UKbd value="/" />
<UKbd value="/" />
<UButton
v-if="searchString.length > 0"
icon="i-heroicons-x-mark"
variant="ghost"
color="gray"
size="xs"
@click="clearSearchString"
/>
</div>
</template> </template>
</UInput> </UInput>
<UButton
icon="i-heroicons-x-mark"
variant="outline"
color="rose"
@click="clearSearchString()"
v-if="searchString.length > 0"
/>
</template> </template>
</UDashboardNavbar> </UDashboardNavbar>
<UDashboardToolbar>
<UDashboardToolbar class="sticky top-0 z-10 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800">
<template #left> <template #left>
<UBreadcrumb :links="breadcrumbLinks" :ui="{ ol: 'gap-x-2', li: 'text-sm' }" /> <UBreadcrumb
:links="breadcrumbLinks"
/>
</template> </template>
<template #right> <template #right>
<USelectMenu <USelectMenu
v-model="displayMode" :options="displayModes"
:options="displayModes" value-attribute="key"
value-attribute="key" option-attribute="label"
class="w-32" v-model="displayMode"
:ui-menu="{ width: 'min-w-max'}"
> >
<template #label> <template #label>
<UIcon :name="displayModes.find(i => i.key === displayMode).icon" class="w-4 h-4" /> <UIcon class="w-5 h-5" :name="displayModes.find(i => i.key === displayMode).icon"/>
<span>{{ displayModes.find(i => i.key === displayMode).label }}</span>
</template> </template>
</USelectMenu> </USelectMenu>
<UButtonGroup size="sm">
<UButton
icon="i-heroicons-document-plus"
color="primary"
@click="modal.open(DocumentUploadModal, {
fileData: {
folder: currentFolder?.id,
type: currentFolder?.standardFiletype,
typeEnabled: currentFolder?.standardFiletypeIsOptional
},
onUploadFinished: () => setupPage()
})"
>Datei</UButton>
<UButton
icon="i-heroicons-folder-plus"
color="white"
@click="createFolderModalOpen = true"
>Ordner</UButton>
</UButtonGroup>
<UButton <UButton
v-if="Object.values(selectedFiles).some(Boolean)" :disabled="!currentFolder"
icon="i-heroicons-cloud-arrow-down" @click="modal.open(DocumentUploadModal,{fileData: {folder: currentFolder.id, type: currentFolder.standardFiletype, typeEnabled: currentFolder.standardFiletypeIsOptional}, onUploadFinished: () => {setupPage()}})"
color="gray" >+ Datei</UButton>
variant="solid" <UButton
@click="createFolderModalOpen = true"
variant="outline"
>+ Ordner</UButton>
<UButton
@click="downloadSelected" @click="downloadSelected"
>Download</UButton> icon="i-heroicons-cloud-arrow-down"
</template> variant="outline"
</UDashboardToolbar> v-if="Object.keys(selectedFiles).find(i => selectedFiles[i] === true)"
>Herunterladen</UButton>
<div id="drop_zone" class="flex-1 overflow-hidden flex flex-col relative"> <UModal v-model="createFolderModalOpen">
<div v-if="!loaded" class="p-10 flex justify-center"> <UCard :ui="{ body: { base: 'space-y-4' } }">
<UProgress animation="carousel" class="w-1/2" /> <template #header>
</div> <div class="flex items-center justify-between">
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
<UDashboardPanelContent v-else class="p-0 overflow-y-auto"> Ordner Erstellen
<div v-if="displayMode === 'list'" class="min-w-full inline-block align-middle"> </h3>
<table class="min-w-full divide-y divide-gray-300 dark:divide-gray-700"> <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="createFolderModalOpen = false" />
<thead class="bg-gray-50 dark:bg-gray-800 sticky top-0 z-20">
<tr>
<th scope="col" class="py-3.5 pl-4 pr-3 sm:pl-6 w-10">
<UCheckbox @change="selectAll" />
</th>
<th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 dark:text-white sm:pl-6">Name</th>
<th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 dark:text-white">Erstellt am</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200 dark:divide-gray-800 bg-white dark:bg-gray-900">
<tr
v-for="(entry, index) in renderedFileList"
:key="entry.id"
class="hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer transition-colors"
:class="{'bg-primary-50 dark:bg-primary-900/10': index === selectedFileIndex}"
@click="entry.type === 'folder' ? changeFolder(entry) : showFile(entry.id)"
>
<td class="relative w-12 px-6 sm:w-16 sm:px-8" @click.stop>
<UCheckbox v-if="entry.type === 'file'" v-model="selectedFiles[entry.id]" />
</td>
<td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
<div class="flex items-center">
<UIcon
:name="entry.type === 'folder' ? 'i-heroicons-folder-solid' : 'i-heroicons-document-text'"
class="flex-shrink-0 h-5 w-5 mr-3"
:class="entry.type === 'folder' ? 'text-primary-500' : 'text-gray-400'"
/>
<span class="font-medium text-gray-900 dark:text-white truncate max-w-md">
{{ entry.label }}
</span>
</div>
</td>
<td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 dark:text-gray-400">
{{ dayjs(entry.createdAt).format("DD.MM.YY · HH:mm") }}
</td>
</tr>
</tbody>
</table>
</div>
<div v-else class="p-6">
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-4">
<div
v-for="folder in currentFolders"
:key="folder.id"
class="group relative bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-4 flex flex-col items-center hover:border-primary-500 transition-all cursor-pointer"
@click="changeFolder(folder)"
>
<UIcon name="i-heroicons-folder-solid" class="w-12 h-12 text-primary-500 mb-2 group-hover:scale-110 transition-transform" />
<span class="text-sm font-medium text-center truncate w-full">{{ folder.name }}</span>
</div> </div>
</template>
<div <UFormGroup label="Name des Ordners" required>
v-for="doc in renderedFileList.filter(e => e.type === 'file')" <UInput
:key="doc.id" v-model="createFolderData.name"
class="group relative bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-4 flex flex-col items-center hover:border-primary-500 transition-all cursor-pointer" placeholder="z.B. Rechnungen 2024"
@click="showFile(doc.id)" autofocus
> />
<UCheckbox v-model="selectedFiles[doc.id]" class="absolute top-2 left-2 opacity-0 group-hover:opacity-100 transition-opacity" @click.stop />
<UIcon name="i-heroicons-document-text" class="w-12 h-12 text-gray-400 mb-2 group-hover:scale-110 transition-transform" />
<span class="text-sm font-medium text-center truncate w-full">{{ doc.label }}</span>
</div>
</div>
</div>
</UDashboardPanelContent>
</div>
<UModal v-model="createFolderModalOpen">
<UCard>
<template #header>
<div class="flex items-center justify-between">
<h3 class="text-lg font-bold">Ordner erstellen</h3>
<UButton color="gray" variant="ghost" icon="i-heroicons-x-mark" @click="createFolderModalOpen = false" />
</div>
</template>
<div class="space-y-4">
<UFormGroup label="Name" required>
<UInput v-model="createFolderData.name" placeholder="Name eingeben..." autofocus @keyup.enter="createFolder" />
</UFormGroup> </UFormGroup>
<UFormGroup label="Standard-Dateityp"> <UFormGroup
label="Standard Dateityp"
>
<USelectMenu <USelectMenu
v-model="createFolderData.standardFiletype" v-model="createFolderData.standardFiletype"
:options="filetags" :options="filetags"
option-attribute="name" option-attribute="name"
value-attribute="id" value-attribute="id"
placeholder="Kein Standard" searchable
/> searchable-placeholder="Typ suchen..."
placeholder="Kein Standard-Typ"
clear-search-on-close
>
<template #label>
<span v-if="createFolderData.standardFiletype">
{{ filetags.find(t => t.id === createFolderData.standardFiletype)?.name }}
</span>
<span v-else class="text-gray-400">Kein Typ ausgewählt</span>
</template>
</USelectMenu>
</UFormGroup> </UFormGroup>
<UCheckbox <div v-if="createFolderData.standardFiletype">
v-if="createFolderData.standardFiletype" <UCheckbox
v-model="createFolderData.standardFiletypeIsOptional" v-model="createFolderData.standardFiletypeIsOptional"
label="Typ ist optional" name="isOptional"
/> label="Dateityp ist optional"
</div> help="Wenn deaktiviert, MUSS der Nutzer beim Upload diesen Typ verwenden."
/>
</div>
<template #footer> <template #footer>
<div class="flex justify-end gap-2"> <div class="flex justify-end gap-2">
<UButton color="gray" variant="soft" @click="createFolderModalOpen = false">Abbrechen</UButton> <UButton color="gray" variant="ghost" @click="createFolderModalOpen = false">
<UButton color="primary" :disabled="!createFolderData.name" @click="createFolder">Erstellen</UButton> Abbrechen
</UButton>
<UButton @click="createFolder" :disabled="!createFolderData.name">
Erstellen
</UButton>
</div>
</template>
</UCard>
</UModal>
</template>
</UDashboardToolbar>
<div id="drop_zone" class="h-full scrollList" >
<div v-if="loaded">
<UDashboardPanelContent>
<div v-if="displayMode === 'list'">
<table class="w-full">
<thead>
<tr>
<td>
<UCheckbox
v-if="renderedFileList.find(i => i.type === 'file')"
@change="selectAll"
/>
</td>
<td class="font-bold">Name</td>
<td class="font-bold">Erstellt am</td>
</tr>
</thead>
<tr v-for="(entry,index) in renderedFileList">
<td>
<UCheckbox
v-if="entry.type === 'file'"
v-model="selectedFiles[entry.id]"
/>
</td>
<td>
<UIcon class="mr-1" :name="entry.type === 'folder' ? 'i-heroicons-folder' : 'i-heroicons-document'"/>
<a
style="cursor: pointer"
:class="[...index === selectedFileIndex ? ['text-primary', 'text-xl'] : ['dark:text-white','text-black','text-xl']]"
@click="entry.type === 'folder' ? changeFolder(currentFolders.find(i => i.id === entry.id)) : showFile(entry.id)"
>{{entry.label}}</a>
</td>
<td>
<span v-if="entry.type === 'file'" class="text-xl">{{dayjs(documents.find(i => i.id === entry.id).createdAt).format("DD.MM.YY HH:mm")}}</span>
<span v-if="entry.type === 'folder'" class="text-xl">{{dayjs(currentFolders.find(i => i.id === entry.id).createdAt).format("DD.MM.YY HH:mm")}}</span>
</td>
</tr>
</table>
</div> </div>
</template> <div v-else-if="displayMode === 'rectangles'">
</UCard> <div class="flex flex-row w-full flex-wrap" v-if="currentFolders.length > 0">
</UModal> <a
class="w-1/6 folderIcon flex flex-col p-5 m-2"
v-for="folder in currentFolders"
@click="changeFolder(folder)"
>
<UIcon
name="i-heroicons-folder"
class="w-20 h-20"
/>
<span class="text-center truncate">{{folder.name}}</span>
</a>
</div>
<UDivider class="my-5" v-if="currentFolder">{{currentFolder.name}}</UDivider>
<UDivider class="my-5" v-else>Ablage</UDivider>
<div v-if="!loadingDocs">
<DocumentList
v-if="filteredDocuments.length > 0"
:documents="filteredDocuments"
@selectDocument="(info) => console.log(info)"
/>
<UAlert
v-else
class="mt-5 w-1/2 mx-auto"
icon="i-heroicons-light-bulb"
title="Keine Dokumente vorhanden"
color="primary"
variant="outline"
/>
</div>
<UProgress
animation="carousel"
v-else
class="w-2/3 my-5 mx-auto"
/>
</div>
</UDashboardPanelContent>
</div>
<UProgress animation="carousel" v-else class="w-5/6 mx-auto mt-5"/>
</div>
</template> </template>
<style scoped> <style scoped>
#drop_zone::after { .folderIcon {
content: 'Datei hierher ziehen'; border: 1px solid lightgrey;
@apply absolute inset-0 flex items-center justify-center bg-primary-500/10 border-4 border-dashed border-primary-500 opacity-0 pointer-events-none transition-opacity z-50 rounded-xl m-4; border-radius: 10px;
color: dimgrey;
} }
#drop_zone:hover::after { .folderIcon:hover {
/* In der setupPage Logik wird das Modal getriggert, border: 1px solid #69c350;
dieser Style dient nur der visuellen Hilfe */ color: #69c350;
} }
/* Custom Table Shadows & Borders */ tr:nth-child(odd) {
table { background-color: rgba(0, 0, 0, 0.05);
border-collapse: separate;
border-spacing: 0;
} }
</style> </style>

View File

@@ -56,7 +56,7 @@
> >
<display-open-tasks/> <display-open-tasks/>
</UDashboardCard> </UDashboardCard>
<!-- <UDashboardCard <UDashboardCard
title="Label Test" title="Label Test"
> >
<UButton <UButton
@@ -70,7 +70,7 @@
> >
Label Drucken Label Drucken
</UButton> </UButton>
</UDashboardCard>--> </UDashboardCard>
</UPageGrid> </UPageGrid>
</UDashboardPanelContent> </UDashboardPanelContent>
</template> </template>

View File

@@ -3,16 +3,10 @@ import duration from 'dayjs/plugin/duration'
import relativeTime from 'dayjs/plugin/relativeTime' import relativeTime from 'dayjs/plugin/relativeTime'
import localizedFormat from 'dayjs/plugin/localizedFormat' import localizedFormat from 'dayjs/plugin/localizedFormat'
import 'dayjs/locale/de' import 'dayjs/locale/de'
import quarterOfYear from 'dayjs/plugin/quarterOfYear'
import isSameOrAfter from "dayjs/plugin/isSameOrAfter"
import isSameOrBefore from "dayjs/plugin/isSameOrBefore"
dayjs.extend(duration) dayjs.extend(duration)
dayjs.extend(relativeTime) dayjs.extend(relativeTime)
dayjs.extend(localizedFormat) dayjs.extend(localizedFormat)
dayjs.extend(quarterOfYear)
dayjs.extend(isSameOrAfter)
dayjs.extend(isSameOrBefore)
dayjs.locale('de') dayjs.locale('de')
export default defineNuxtPlugin(() => { export default defineNuxtPlugin(() => {

View File

@@ -1,40 +0,0 @@
import { defineStore } from 'pinia'
export const useCalculatorStore = defineStore('calculator', () => {
const tempStore = useTempStore()
// Initialisierung aus dem TempStore
const isOpen = ref(false)
const display = computed({
get: () => tempStore.settings?.calculator?.display || '0',
set: (val) => tempStore.modifySettings('calculator', { ...tempStore.settings.calculator, display: val })
})
const memory = computed({
get: () => tempStore.settings?.calculator?.memory || 0,
set: (val) => tempStore.modifySettings('calculator', { ...tempStore.settings.calculator, memory: val })
})
const history = computed({
get: () => tempStore.filters?.calculator?.history || [],
set: (val) => tempStore.modifyFilter('calculator', 'history', val)
})
function toggle() {
isOpen.value = !isOpen.value
}
function addHistory(expression: string, result: string) {
const newHistory = [{ expression, result }, ...history.value].slice(0, 10)
history.value = newHistory
}
return {
isOpen,
display,
memory,
history,
toggle,
addHistory
}
})

View File

@@ -1,7 +1,8 @@
import { defineStore } from 'pinia' import {defineStore} from 'pinia'
// @ts-ignore // @ts-ignore
export const useTempStore = defineStore('temp', () => { export const useTempStore = defineStore('temp', () => {
const auth = useAuthStore() const auth = useAuthStore()
const searchStrings = ref({}) const searchStrings = ref({})
@@ -19,21 +20,21 @@ export const useTempStore = defineStore('temp', () => {
filters: filters.value filters: filters.value
} }
await useNuxtApp().$api(`/api/profiles/${auth.profile.id}`, { await useNuxtApp().$api(`/api/profiles/${auth.profile.id}`,{
method: 'PUT', method: 'PUT',
body: { temp_config: config } body: {temp_config: config}
}) })
} }
function setStoredTempConfig(config) { function setStoredTempConfig (config) {
searchStrings.value = config.searchStrings || {} searchStrings.value = config.searchStrings
columns.value = config.columns || {} columns.value = config.columns
pages.value = config.pages || {} pages.value = config.pages
settings.value = config.settings || {} settings.value = config.settings
filters.value = config.filters || {} filters.value = config.filters || {}
} }
function modifySearchString(type, input) { function modifySearchString(type,input) {
searchStrings.value[type] = input searchStrings.value[type] = input
storeTempConfig() storeTempConfig()
} }
@@ -43,36 +44,28 @@ export const useTempStore = defineStore('temp', () => {
storeTempConfig() storeTempConfig()
} }
function modifyFilter(domain, type, input) { function modifyFilter(domain,type,input) {
if (!filters.value[domain]) filters.value[domain] = {} if(!filters.value[domain]) filters.value[domain] = {}
filters.value[domain][type] = input filters.value[domain][type] = input
storeTempConfig() storeTempConfig()
} }
function modifyColumns(type, input) { function modifyColumns(type,input) {
columns.value[type] = input columns.value[type] = input
storeTempConfig() storeTempConfig()
} }
function modifyPages(type, input) { function modifyPages(type,input) {
pages.value[type] = input pages.value[type] = input
storeTempConfig() storeTempConfig()
} }
function modifySettings(type, input) { function modifySettings(type,input) {
settings.value[type] = input settings.value[type] = input
storeTempConfig() storeTempConfig()
} }
// Spezifisch für das Banking-Datum
function modifyBankingPeriod(periodKey, range) {
if (!settings.value['banking']) settings.value['banking'] = {}
settings.value['banking'].periodKey = periodKey
settings.value['banking'].range = range
storeTempConfig()
}
return { return {
setStoredTempConfig, setStoredTempConfig,
@@ -86,7 +79,8 @@ export const useTempStore = defineStore('temp', () => {
modifyPages, modifyPages,
pages, pages,
modifySettings, modifySettings,
modifyBankingPeriod, // Neue Funktion exportiert
settings settings
} }
}) })