Initial release
This commit is contained in:
odweta
@@ -0,0 +1,13 @@
|
||||
FROM node:latest
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY package.json package-lock.json ./
|
||||
|
||||
RUN npm ci
|
||||
|
||||
COPY . .
|
||||
|
||||
CMD ["npm", "run", "serve"]
|
||||
|
||||
EXPOSE 3001
|
||||
@@ -0,0 +1,26 @@
|
||||
TAG := fakturovac
|
||||
|
||||
.PHONY: build, run, test, preview
|
||||
|
||||
build:
|
||||
docker compose build
|
||||
|
||||
test:
|
||||
npm test
|
||||
|
||||
run:
|
||||
docker compose up --remove-orphans
|
||||
|
||||
rund:
|
||||
docker compose up -d --remove-orphans
|
||||
|
||||
kill:
|
||||
docker compose -p $(TAG) down
|
||||
|
||||
build-and-run: build run
|
||||
|
||||
test-and-run: test run
|
||||
|
||||
deploy: kill build test rund
|
||||
|
||||
deploy-no-kill: build test rund
|
||||
@@ -0,0 +1,6 @@
|
||||
name: fakturovac
|
||||
services:
|
||||
app:
|
||||
build: .
|
||||
ports:
|
||||
- "3001:3001"
|
||||
Generated
+5900
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"name": "Fakturovac",
|
||||
"version": "1.0.0",
|
||||
"description": "A simple app for creating and managing invoices.",
|
||||
"type": "commonjs",
|
||||
"main": "src/server.js",
|
||||
"scripts": {
|
||||
"test": "jest --runInBand",
|
||||
"test:watch": "jest --watch",
|
||||
"serve": "node src/server.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"express": "5.2.1",
|
||||
"node-fetch": "3.3.2",
|
||||
"pg": "^8.11.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"jest": "30.5.1",
|
||||
"supertest": "7.2.2"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
const express = require('express');
|
||||
const path = require('path');
|
||||
|
||||
const app = express();
|
||||
|
||||
// specifying the folder with the static content - html+css
|
||||
app.use(express.static(__dirname + '/static'));
|
||||
|
||||
app.get('/', (req, res) => {
|
||||
res.sendFile(path.join(__dirname, '/static/index.html'));
|
||||
});
|
||||
|
||||
module.exports = app;
|
||||
@@ -0,0 +1,7 @@
|
||||
const app = require('./app');
|
||||
|
||||
const port = 3001;
|
||||
|
||||
app.listen(port, () => {
|
||||
console.log(`App listening on port ${port}`);
|
||||
});
|
||||
@@ -0,0 +1,152 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<title>Fakturovač</title>
|
||||
</head>
|
||||
<body>
|
||||
<main id="main-container">
|
||||
<div>
|
||||
<form id="main-form">
|
||||
<h2>Fakturovač</h2>
|
||||
<!--
|
||||
ico
|
||||
jmeno
|
||||
prijmeni
|
||||
ulice, c.p.
|
||||
psc
|
||||
mesto
|
||||
|
||||
^^^ x2 - dodavatel, odberatel
|
||||
|
||||
----------
|
||||
|
||||
cislo uctu
|
||||
iban
|
||||
swift
|
||||
|
||||
----------
|
||||
|
||||
polozky
|
||||
+ popis
|
||||
+ mnozstvi
|
||||
+ merna jednotka MJ
|
||||
+ cena za MJ
|
||||
|
||||
----------
|
||||
|
||||
total soucet
|
||||
-->
|
||||
<div class="form-chapter supplier-customer-section">
|
||||
<div id="dodavatelWrapper" class="form-part">
|
||||
<h3>Dodavatel</h3>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="dodavatelIco">IČO</label>
|
||||
<input id="dodavatelIco" name="dodavatelIco" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="dodavatelJmeno">Jméno</label>
|
||||
<input id="dodavatelJmeno" name="dodavatelJmeno" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="dodavatelPrijmeni">Příjmení</label>
|
||||
<input id="dodavatelPrijmeni" name="dodavatelPrijmeni" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="dodavatelUliceCp">Ulice a číslo popisné</label>
|
||||
<input id="dodavatelUliceCp" name="dodavatelUliceCp" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="dodavatelPsc">PSČ</label>
|
||||
<input id="dodavatelPsc" name="dodavatelPsc" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="dodavatelMesto">Město</label>
|
||||
<input id="dodavatelMesto" name="dodavatelMesto" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="odberatelWrapper" class="form-part">
|
||||
<h3>Odběratel</h3>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="odberatelIco">IČO</label>
|
||||
<input id="odberatelIco" name="odberatelIco" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="odberatelJmeno">Jméno</label>
|
||||
<input id="odberatelJmeno" name="odberatelJmeno" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="odberatelPrijmeni">Příjmení</label>
|
||||
<input id="odberatelPrijmeni" name="odberatelPrijmeni" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="odberatelUliceCp">Ulice a číslo popisné</label>
|
||||
<input id="odberatelUliceCp" name="odberatelUliceCp" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="odberatelPsc">PSČ</label>
|
||||
<input id="odberatelPsc" name="odberatelPsc" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="odberatelMesto">Město</label>
|
||||
<input id="odberatelMesto" name="odberatelMesto" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="form-chapter second-row">
|
||||
<div class="form-part">
|
||||
<button type="button" id="addItemButton">Přidat položku</button>
|
||||
<div id="itemsContainer"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-chapter third-row">
|
||||
<div class="form-part">
|
||||
<div class="form-group">
|
||||
<label for="cisloUctu">Číslo účtu</label>
|
||||
<input id="cisloUctu" name="cisloUctu" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="iban">IBAN</label>
|
||||
<input id="iban" name="iban" />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="swift">SWIFT</label>
|
||||
<input id="swift" name="swift" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="total">Celková částka</label>
|
||||
<output id="total" name="total">0.00</output>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="button" id="printInvoiceButton">
|
||||
Vygenerovat a vytisknout fakturu
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,264 @@
|
||||
const addItemButton = document.getElementById("addItemButton");
|
||||
const itemsContainer = document.getElementById("itemsContainer");
|
||||
const printInvoiceButton = document.getElementById("printInvoiceButton");
|
||||
|
||||
let itemIndex = 0;
|
||||
|
||||
const escapeHtml = (value) => String(value ?? "")
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
|
||||
const getValue = (id) => {
|
||||
const field = document.getElementById(id);
|
||||
return ("value" in field ? field.value : field.textContent).trim();
|
||||
};
|
||||
|
||||
const updateTotal = () => {
|
||||
const total = Array.from(itemsContainer.querySelectorAll(".invoice-item"))
|
||||
.reduce((sum, item) => {
|
||||
const quantity = Number(item.querySelector('[name$="[mnozstvi]"]').value) || 0;
|
||||
const unitPrice = Number(item.querySelector('[name$="[cenaZaMj]"]').value) || 0;
|
||||
return sum + quantity * unitPrice;
|
||||
}, 0);
|
||||
|
||||
document.getElementById("total").textContent = total.toFixed(2);
|
||||
};
|
||||
|
||||
const getPersonName = (prefix) => [
|
||||
getValue(`${prefix}Jmeno`),
|
||||
getValue(`${prefix}Prijmeni`)
|
||||
].filter(Boolean).join(" ");
|
||||
|
||||
const getAddress = (prefix) => [
|
||||
getValue(`${prefix}UliceCp`),
|
||||
[getValue(`${prefix}Psc`), getValue(`${prefix}Mesto`)].filter(Boolean).join(" ")
|
||||
].filter(Boolean).join(", ");
|
||||
|
||||
const renderPerson = (prefix) => [
|
||||
getPersonName(prefix),
|
||||
getValue(`${prefix}Ico`) ? `IČO: ${getValue(`${prefix}Ico`)}` : "",
|
||||
getAddress(prefix)
|
||||
].filter(Boolean).map(escapeHtml).join("<br>");
|
||||
|
||||
const renderItems = () => Array.from(itemsContainer.querySelectorAll(".invoice-item"))
|
||||
.map((item) => {
|
||||
const values = Array.from(item.querySelectorAll("input")).map((input) => input.value.trim());
|
||||
return `<tr class="invoice-row">
|
||||
<td>${escapeHtml(values[0])}</td>
|
||||
<td>${escapeHtml(values[1])}</td>
|
||||
<td>${escapeHtml(values[2])}</td>
|
||||
<td>${escapeHtml(values[3])}</td>
|
||||
</tr>`;
|
||||
}).join("");
|
||||
|
||||
const normalizeIban = (value) => value.replace(/\s+/g, "").toUpperCase();
|
||||
|
||||
const domesticAccountToIban = (accountNumber) => {
|
||||
const match = accountNumber.replace(/\s+/g, "")
|
||||
.match(/^(?:(\d{1,6})-)?(\d{1,10})\/(\d{4})$/);
|
||||
|
||||
if (!match) {
|
||||
return "";
|
||||
}
|
||||
|
||||
const bban = `${match[3]}${(match[1] || "").padStart(6, "0")}${match[2].padStart(10, "0")}`;
|
||||
const remainder = `${bban}123500`.split("").reduce(
|
||||
(value, digit) => (value * 10 + Number(digit)) % 97,
|
||||
0
|
||||
);
|
||||
const checkDigits = String(98 - remainder).padStart(2, "0");
|
||||
|
||||
return `CZ${checkDigits}${bban}`;
|
||||
};
|
||||
|
||||
const buildPaymentQrPayload = (accountNumber, iban, swift, total) => {
|
||||
const preferredAccount = normalizeIban(accountNumber);
|
||||
const fallbackAccount = normalizeIban(iban);
|
||||
const paymentAccount = /^([A-Z]{2})\d{2}[A-Z0-9]{10,32}$/.test(preferredAccount)
|
||||
? preferredAccount
|
||||
: domesticAccountToIban(accountNumber) || fallbackAccount;
|
||||
|
||||
if (!/^([A-Z]{2})\d{2}[A-Z0-9]{10,32}$/.test(paymentAccount)) {
|
||||
return "";
|
||||
}
|
||||
|
||||
return [
|
||||
"SPD*1.0",
|
||||
`ACC:${paymentAccount}`,
|
||||
`AM:${Number(total || 0).toFixed(2)}`,
|
||||
"CC:CZK",
|
||||
swift && `X-SWIFT:${normalizeIban(swift)}`
|
||||
].filter(Boolean).join("*");
|
||||
};
|
||||
|
||||
const buildInvoiceHtml = () => {
|
||||
const accountNumber = getValue("cisloUctu");
|
||||
const iban = getValue("iban");
|
||||
const swift = getValue("swift");
|
||||
const qrPayload = buildPaymentQrPayload(
|
||||
accountNumber,
|
||||
iban,
|
||||
swift,
|
||||
getValue("total")
|
||||
);
|
||||
const qrMarkup = qrPayload
|
||||
? `<img class="qr-code" src="https://api.qrserver.com/v1/create-qr-code/?size=220x220&data=${encodeURIComponent(qrPayload)}" alt="QR kód platebních údajů">`
|
||||
: "<p>Platební QR kód vyžaduje platný IBAN. Číslo účtu bez IBANu nelze bezpečně převést.</p>";
|
||||
const paymentDetails = [
|
||||
accountNumber && `Číslo účtu: ${accountNumber}`,
|
||||
iban && `IBAN: ${iban}`,
|
||||
swift && `SWIFT: ${swift}`
|
||||
].filter(Boolean).map(escapeHtml).join("<br>");
|
||||
|
||||
return `<!DOCTYPE html>
|
||||
<html lang="cs">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Faktura</title>
|
||||
<style>
|
||||
@page { size: A4; margin: 18mm; }
|
||||
* { box-sizing: border-box; }
|
||||
body { color: #202124; font: 14px Arial, sans-serif; margin: 0; }
|
||||
h1 { font-size: 30px; margin: 0 0 28px; }
|
||||
h2 { font-size: 16px; margin: 0 0 8px; }
|
||||
.parties { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 28px; }
|
||||
.party, .payment { border-top: 2px solid #202124; padding-top: 10px; }
|
||||
table { border-collapse: separate; border-spacing: 0; margin-top: 24px; width: 100%; }
|
||||
th, td { padding: 9px 6px; text-align: left; }
|
||||
th { background: #f1f1f1; border-bottom: 1px solid #aeb8c0; }
|
||||
.invoice-row td { border-bottom: 1px solid #c8c8c8; }
|
||||
.invoice-row:nth-child(even) { background: #f4f7fb; }
|
||||
.total { font-size: 18px; font-weight: bold; margin-top: 22px; text-align: right; }
|
||||
.payment-row { align-items: start; display: flex; gap: 28px; justify-content: space-between; margin-top: 36px; }
|
||||
.qr-code { height: 180px; width: 180px; }
|
||||
.qr-placeholder { color: #666; max-width: 220px; }
|
||||
@media print { .qr-placeholder { color: #202124; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Faktura</h1>
|
||||
<div class="parties">
|
||||
<section class="party"><h2>Dodavatel</h2>${renderPerson("dodavatel") || "Neuvedeno"}</section>
|
||||
<section class="party"><h2>Odběratel</h2>${renderPerson("odberatel") || "Neuvedeno"}</section>
|
||||
</div>
|
||||
<table>
|
||||
<thead><tr><th>Popis</th><th>Množství</th><th>MJ</th><th>Cena za MJ</th></tr></thead>
|
||||
<tbody>${renderItems() || "<tr><td colspan=\"4\">Žádné položky</td></tr>"}</tbody>
|
||||
</table>
|
||||
<p class="total">Celková částka: ${escapeHtml(getValue("total")) || "0"}</p>
|
||||
<div class="payment-row">
|
||||
<section class="payment"><h2>Platební údaje</h2>${paymentDetails || "Neuvedeno"}</section>
|
||||
<div class="qr-placeholder">${qrMarkup}</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>`;
|
||||
};
|
||||
|
||||
printInvoiceButton.addEventListener("click", () => {
|
||||
const printWindow = window.open("about:blank", "_blank");
|
||||
|
||||
if (!printWindow) {
|
||||
window.alert("Povolte prosím vyskakovací okna pro tisk faktury.");
|
||||
return;
|
||||
}
|
||||
|
||||
printWindow.document.open();
|
||||
printWindow.document.write(buildInvoiceHtml());
|
||||
printWindow.document.close();
|
||||
printWindow.addEventListener("load", () => printWindow.print(), { once: true });
|
||||
});
|
||||
|
||||
addItemButton.addEventListener("click", () => {
|
||||
itemIndex++;
|
||||
|
||||
const item = document.createElement("div");
|
||||
item.classList.add("invoice-item");
|
||||
|
||||
item.innerHTML = `
|
||||
<div class="form-group">
|
||||
<label for="polozka${itemIndex}Popis">Popis</label>
|
||||
<input
|
||||
id="polozka${itemIndex}Popis"
|
||||
name="polozky[${itemIndex}][popis]"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="polozka${itemIndex}Mnozstvi">Množství</label>
|
||||
<input
|
||||
id="polozka${itemIndex}Mnozstvi"
|
||||
name="polozky[${itemIndex}][mnozstvi]"
|
||||
type="number"
|
||||
min="0"
|
||||
step="0.01"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="polozka${itemIndex}MernaJednotka">
|
||||
Měrná jednotka
|
||||
</label>
|
||||
<input
|
||||
id="polozka${itemIndex}MernaJednotka"
|
||||
name="polozky[${itemIndex}][mernaJednotka]"
|
||||
type="text"
|
||||
placeholder="ks"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="polozka${itemIndex}CenaZaMj">
|
||||
Cena za MJ
|
||||
</label>
|
||||
<input
|
||||
id="polozka${itemIndex}CenaZaMj"
|
||||
name="polozky[${itemIndex}][cenaZaMj]"
|
||||
type="number"
|
||||
min="0"
|
||||
step="0.01"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="delete-item-button"
|
||||
aria-label="Smazat položku"
|
||||
title="Smazat položku"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M3 6h18"></path>
|
||||
<path d="M8 6V4h8v2"></path>
|
||||
<path d="M19 6l-1 14H6L5 6"></path>
|
||||
<path d="M10 11v5"></path>
|
||||
<path d="M14 11v5"></path>
|
||||
</svg>
|
||||
</button>
|
||||
`;
|
||||
|
||||
const deleteButton = item.querySelector(".delete-item-button");
|
||||
|
||||
deleteButton.addEventListener("click", () => {
|
||||
item.remove();
|
||||
updateTotal();
|
||||
});
|
||||
|
||||
itemsContainer.appendChild(item);
|
||||
updateTotal();
|
||||
});
|
||||
|
||||
itemsContainer.addEventListener("input", updateTotal);
|
||||
@@ -0,0 +1,265 @@
|
||||
:root {
|
||||
--ink: #17202a;
|
||||
--muted-ink: #65717d;
|
||||
--navy: #183b56;
|
||||
--blue: #2b6f8f;
|
||||
--paper: #fffdf8;
|
||||
--cream: #f5efe5;
|
||||
--line: #d8d4cc;
|
||||
--shadow: 0 18px 45px rgba(33, 48, 61, 0.12);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
padding: 3rem 1.25rem;
|
||||
color: var(--ink);
|
||||
background: linear-gradient(135deg, #e9f1f3 0%, #f7f2e9 52%, #e7edf1 100%);
|
||||
font-family: "Trebuchet MS", "Segoe UI", sans-serif;
|
||||
}
|
||||
|
||||
#main-container {
|
||||
width: min(100%, 980px);
|
||||
margin: 0 auto;
|
||||
padding: 2.5rem clamp(1.25rem, 4vw, 4rem);
|
||||
background: var(--paper);
|
||||
border: 1px solid rgba(24, 59, 86, 0.12);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
#main-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
#main-form > h2 {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
color: var(--navy);
|
||||
font-family: Georgia, serif;
|
||||
font-size: clamp(2rem, 5vw, 3.5rem);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.02em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.form-chapter {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 2rem;
|
||||
width: 100%;
|
||||
max-width: 820px;
|
||||
}
|
||||
|
||||
.form-chapter:not(.supplier-customer-section) {
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.form-part {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
margin-bottom: 0.25rem;
|
||||
color: var(--muted-ink);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
padding: 0.65rem 0.7rem;
|
||||
color: var(--ink);
|
||||
background: #fff;
|
||||
border: 1px solid #c8d0d5;
|
||||
border-radius: 0.25rem;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
border-color: var(--blue);
|
||||
outline: 2px solid rgba(43, 111, 143, 0.18);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.form-group output {
|
||||
min-height: 1.5rem;
|
||||
padding: 0.25rem 0;
|
||||
color: var(--navy);
|
||||
font-family: Georgia, serif;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.second-row {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.second-row > .form-part,
|
||||
.second-row > .form-group {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
|
||||
.third-row {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.third-row > .form-part,
|
||||
.third-row > .form-group {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.supplier-customer-section {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
column-gap: 2rem;
|
||||
width: 100%;
|
||||
max-width: 820px;
|
||||
}
|
||||
|
||||
.supplier-customer-section > h2 {
|
||||
grid-column: 1 / -1;
|
||||
margin: 0 0 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.form-part h3 {
|
||||
margin-top: 0;
|
||||
color: var(--navy);
|
||||
font-family: Georgia, serif;
|
||||
font-size: 1.35rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
#itemsContainer {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.invoice-item {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 1fr 1fr auto;
|
||||
align-items: end;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
margin-top: 1.5rem;
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 0.25rem;
|
||||
box-shadow: 0 3px 10px rgba(33, 48, 61, 0.04);
|
||||
}
|
||||
|
||||
.invoice-item:nth-child(even) {
|
||||
background: #f4f7fb;
|
||||
}
|
||||
|
||||
.invoice-item:nth-child(odd) {
|
||||
background: #fffaf0;
|
||||
}
|
||||
|
||||
.invoice-item .form-group {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.invoice-item input {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.delete-item-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
padding: 0;
|
||||
color: #a53c36;
|
||||
background: transparent;
|
||||
border: 1px solid #c47a72;
|
||||
border-radius: 0.25rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.delete-item-button:hover {
|
||||
color: white;
|
||||
background-color: #a53c36;
|
||||
}
|
||||
|
||||
.delete-item-button:focus-visible {
|
||||
outline: 2px solid #2563eb;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
#printInvoiceButton {
|
||||
align-self: center;
|
||||
color: #fff;
|
||||
background: var(--navy);
|
||||
border: 0;
|
||||
border-radius: 0.25rem;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
font-weight: 700;
|
||||
padding: 0.75rem 1rem;
|
||||
transition: background-color 160ms ease, transform 160ms ease;
|
||||
}
|
||||
|
||||
#printInvoiceButton:hover {
|
||||
background: var(--blue);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
#addItemButton {
|
||||
align-self: flex-start;
|
||||
color: var(--navy);
|
||||
background: transparent;
|
||||
border: 1px solid var(--blue);
|
||||
border-radius: 0.25rem;
|
||||
cursor: pointer;
|
||||
font: inherit;
|
||||
font-weight: 700;
|
||||
padding: 0.6rem 0.85rem;
|
||||
}
|
||||
|
||||
#addItemButton:hover {
|
||||
color: #fff;
|
||||
background: var(--blue);
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
body {
|
||||
padding: 1rem 0.5rem;
|
||||
}
|
||||
|
||||
#main-container {
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
|
||||
.supplier-customer-section {
|
||||
grid-template-columns: 1fr;
|
||||
row-gap: 1rem;
|
||||
}
|
||||
|
||||
.invoice-item {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.delete-item-button {
|
||||
justify-self: end;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
// const request = require("supertest");
|
||||
// const app = require("../src/app");
|
||||
|
||||
// describe("GET /search", () => {
|
||||
// afterEach(() => {
|
||||
// jest.restoreAllMocks();
|
||||
// });
|
||||
|
||||
// test("returns 400 when query is missing", async () => {
|
||||
// const response = await request(app).get("/search");
|
||||
|
||||
// expect(response.status).toBe(400);
|
||||
// expect(response.text).toBe("Missing search query");
|
||||
// });
|
||||
|
||||
// test("returns filtered search results", async () => {
|
||||
// global.fetch = jest.fn().mockResolvedValue({
|
||||
// json: jest.fn().mockResolvedValue({
|
||||
// results: [
|
||||
// {
|
||||
// url: "https://example.com",
|
||||
// title: "Example",
|
||||
// content: "Content",
|
||||
// irrelevant: "removed"
|
||||
// }
|
||||
// ]
|
||||
// })
|
||||
// });
|
||||
|
||||
// const response = await request(app)
|
||||
// .get("/search")
|
||||
// .query({ query: "nodejs" });
|
||||
|
||||
// expect(response.status).toBe(200);
|
||||
// expect(response.headers["content-type"]).toMatch(/application\/json/);
|
||||
// expect(response.headers["content-disposition"]).toContain(
|
||||
// 'attachment; filename="output.json"'
|
||||
// );
|
||||
|
||||
// expect(response.body).toEqual([
|
||||
// {
|
||||
// url: "https://example.com",
|
||||
// title: "Example",
|
||||
// content: "Content"
|
||||
// }
|
||||
// ]);
|
||||
// });
|
||||
// });
|
||||
Reference in New Issue
Block a user