Store a single saved signature per user, like supplier #12
+11
-25
@@ -362,51 +362,37 @@ app.delete('/api/payment-presets/:id', requireAuth, async (req, res, next) => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
const signaturePresetResponse = (row) => ({
|
app.get('/api/signature', requireAuth, async (req, res, next) => {
|
||||||
id: row.id,
|
|
||||||
name: row.name,
|
|
||||||
dataUrl: row.data_url
|
|
||||||
});
|
|
||||||
|
|
||||||
app.get('/api/signature-presets', requireAuth, async (req, res, next) => {
|
|
||||||
try {
|
try {
|
||||||
const result = await pool.query(
|
const result = await pool.query('SELECT * FROM signature_profiles WHERE user_id = $1', [req.userId]);
|
||||||
'SELECT * FROM signature_presets WHERE user_id = $1 ORDER BY name',
|
res.json({ signature: result.rowCount ? result.rows[0].data_url : null });
|
||||||
[req.userId]
|
|
||||||
);
|
|
||||||
res.json({ presets: result.rows.map(signaturePresetResponse) });
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
next(error);
|
next(error);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
app.post('/api/signature-presets', requireAuth, async (req, res, next) => {
|
app.put('/api/signature', requireAuth, async (req, res, next) => {
|
||||||
try {
|
try {
|
||||||
const name = String(req.body.name || '').trim();
|
|
||||||
const dataUrl = req.body.dataUrl;
|
const dataUrl = req.body.dataUrl;
|
||||||
if (!name) {
|
|
||||||
res.status(400).json({ error: 'Zadejte název podpisu.' });
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
if (!isValidSignatureDataUrl(dataUrl)) {
|
if (!isValidSignatureDataUrl(dataUrl)) {
|
||||||
res.status(400).json({ error: 'Podpis musí být platný obrázek JPG nebo PNG.' });
|
res.status(400).json({ error: 'Podpis musí být platný obrázek JPG nebo PNG.' });
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const result = await pool.query(`
|
const result = await pool.query(`
|
||||||
INSERT INTO signature_presets (user_id, name, data_url)
|
INSERT INTO signature_profiles (user_id, data_url)
|
||||||
VALUES ($1, $2, $3)
|
VALUES ($1, $2)
|
||||||
ON CONFLICT (user_id, name) DO UPDATE SET data_url = EXCLUDED.data_url
|
ON CONFLICT (user_id) DO UPDATE SET data_url = EXCLUDED.data_url
|
||||||
RETURNING *
|
RETURNING *
|
||||||
`, [req.userId, name, dataUrl]);
|
`, [req.userId, dataUrl]);
|
||||||
res.status(201).json({ preset: signaturePresetResponse(result.rows[0]) });
|
res.json({ signature: result.rows[0].data_url });
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
next(error);
|
next(error);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
app.delete('/api/signature-presets/:id', requireAuth, async (req, res, next) => {
|
app.delete('/api/signature', requireAuth, async (req, res, next) => {
|
||||||
try {
|
try {
|
||||||
await pool.query('DELETE FROM signature_presets WHERE id = $1 AND user_id = $2', [req.params.id, req.userId]);
|
await pool.query('DELETE FROM signature_profiles WHERE user_id = $1', [req.userId]);
|
||||||
res.status(204).end();
|
res.status(204).end();
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
next(error);
|
next(error);
|
||||||
|
|||||||
@@ -90,10 +90,21 @@ const initializeDatabase = () => {
|
|||||||
UNIQUE (user_id, name)
|
UNIQUE (user_id, name)
|
||||||
);
|
);
|
||||||
|
|
||||||
|
CREATE TABLE IF NOT EXISTS signature_profiles (
|
||||||
|
user_id INTEGER PRIMARY KEY REFERENCES users(id) ON DELETE CASCADE,
|
||||||
|
data_url TEXT NOT NULL
|
||||||
|
);
|
||||||
|
|
||||||
ALTER TABLE supplier_profiles ADD COLUMN IF NOT EXISTS nazev_spolecnosti TEXT NOT NULL DEFAULT '';
|
ALTER TABLE supplier_profiles ADD COLUMN IF NOT EXISTS nazev_spolecnosti TEXT NOT NULL DEFAULT '';
|
||||||
ALTER TABLE supplier_profiles ADD COLUMN IF NOT EXISTS typ_subjektu TEXT NOT NULL DEFAULT 'osoba';
|
ALTER TABLE supplier_profiles ADD COLUMN IF NOT EXISTS typ_subjektu TEXT NOT NULL DEFAULT 'osoba';
|
||||||
ALTER TABLE clients ADD COLUMN IF NOT EXISTS nazev_spolecnosti TEXT NOT NULL DEFAULT '';
|
ALTER TABLE clients ADD COLUMN IF NOT EXISTS nazev_spolecnosti TEXT NOT NULL DEFAULT '';
|
||||||
ALTER TABLE clients ADD COLUMN IF NOT EXISTS typ_subjektu TEXT NOT NULL DEFAULT 'osoba';
|
ALTER TABLE clients ADD COLUMN IF NOT EXISTS typ_subjektu TEXT NOT NULL DEFAULT 'osoba';
|
||||||
|
|
||||||
|
INSERT INTO signature_profiles (user_id, data_url)
|
||||||
|
SELECT DISTINCT ON (user_id) user_id, data_url
|
||||||
|
FROM signature_presets
|
||||||
|
ORDER BY user_id, created_at DESC
|
||||||
|
ON CONFLICT (user_id) DO NOTHING;
|
||||||
`).catch((error) => {
|
`).catch((error) => {
|
||||||
schemaPromise = undefined;
|
schemaPromise = undefined;
|
||||||
throw error;
|
throw error;
|
||||||
|
|||||||
@@ -338,26 +338,19 @@
|
|||||||
<div class="form-chapter signature-row">
|
<div class="form-chapter signature-row">
|
||||||
<div class="form-group signature-group">
|
<div class="form-group signature-group">
|
||||||
<label for="signatureInput">Podpis (nepovinné)</label>
|
<label for="signatureInput">Podpis (nepovinné)</label>
|
||||||
<div class="form-group">
|
|
||||||
<label for="signaturePresetSelect">Uložený podpis</label>
|
|
||||||
<select id="signaturePresetSelect">
|
|
||||||
<option value="">Vyberte podpis</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div id="signatureDropzone" class="signature-dropzone" tabindex="0" role="button" aria-label="Nahrát podpis kliknutím nebo přetažením souboru">
|
<div id="signatureDropzone" class="signature-dropzone" tabindex="0" role="button" aria-label="Nahrát podpis kliknutím nebo přetažením souboru">
|
||||||
<img id="signaturePreview" class="signature-preview" alt="Náhled podpisu" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" hidden />
|
<img id="signaturePreview" class="signature-preview" alt="Náhled podpisu" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" hidden />
|
||||||
<p id="signatureDropzoneText" class="signature-dropzone-text">Přetáhněte sem obrázek podpisu (420×210 px, JPG nebo PNG) nebo klikněte pro výběr souboru</p>
|
<p id="signatureDropzoneText" class="signature-dropzone-text">Přetáhněte sem obrázek podpisu (420×210 px, JPG nebo PNG) nebo klikněte pro výběr souboru</p>
|
||||||
<input type="file" id="signatureInput" accept="image/png,image/jpeg" hidden />
|
<input type="file" id="signatureInput" accept="image/png,image/jpeg" hidden />
|
||||||
</div>
|
</div>
|
||||||
<div class="signature-save-row">
|
|
||||||
<input id="signaturePresetName" type="text" placeholder="Název podpisu" aria-label="Název podpisu" />
|
|
||||||
<button type="button" id="saveSignaturePresetButton">Uložit podpis</button>
|
|
||||||
<button type="button" id="deleteSignaturePresetButton" class="secondary-button" disabled>Smazat</button>
|
|
||||||
</div>
|
|
||||||
<div class="signature-actions">
|
<div class="signature-actions">
|
||||||
<button type="button" id="removeSignatureButton" class="secondary-button" hidden>Odstranit podpis</button>
|
<button type="button" id="removeSignatureButton" class="secondary-button" hidden>Odstranit podpis</button>
|
||||||
</div>
|
</div>
|
||||||
<p id="signatureStatus" class="signature-status" role="status" aria-live="polite"></p>
|
<div class="saved-data-actions">
|
||||||
|
<button type="button" id="saveSignatureButton">Uložit podpis</button>
|
||||||
|
<button type="button" id="loadSignatureButton" class="secondary-button">Načíst uložený</button>
|
||||||
|
<span id="signatureStatus" class="signature-status" role="status" aria-live="polite"></span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
+32
-69
@@ -57,10 +57,8 @@ const signaturePreview = document.getElementById("signaturePreview");
|
|||||||
const signatureDropzoneText = document.getElementById("signatureDropzoneText");
|
const signatureDropzoneText = document.getElementById("signatureDropzoneText");
|
||||||
const removeSignatureButton = document.getElementById("removeSignatureButton");
|
const removeSignatureButton = document.getElementById("removeSignatureButton");
|
||||||
const signatureStatus = document.getElementById("signatureStatus");
|
const signatureStatus = document.getElementById("signatureStatus");
|
||||||
const signaturePresetSelect = document.getElementById("signaturePresetSelect");
|
const saveSignatureButton = document.getElementById("saveSignatureButton");
|
||||||
const signaturePresetName = document.getElementById("signaturePresetName");
|
const loadSignatureButton = document.getElementById("loadSignatureButton");
|
||||||
const saveSignaturePresetButton = document.getElementById("saveSignaturePresetButton");
|
|
||||||
const deleteSignaturePresetButton = document.getElementById("deleteSignaturePresetButton");
|
|
||||||
const loadPaymentPresetButton = document.getElementById("loadPaymentPresetButton");
|
const loadPaymentPresetButton = document.getElementById("loadPaymentPresetButton");
|
||||||
const deletePaymentPresetButton = document.getElementById("deletePaymentPresetButton");
|
const deletePaymentPresetButton = document.getElementById("deletePaymentPresetButton");
|
||||||
|
|
||||||
@@ -82,7 +80,6 @@ let itemIndex = 0;
|
|||||||
let clients = [];
|
let clients = [];
|
||||||
let invoices = [];
|
let invoices = [];
|
||||||
let paymentPresets = [];
|
let paymentPresets = [];
|
||||||
let signaturePresets = [];
|
|
||||||
let currentInvoiceId = null;
|
let currentInvoiceId = null;
|
||||||
let isRegistrationMode = false;
|
let isRegistrationMode = false;
|
||||||
let signatureDataUrl = null;
|
let signatureDataUrl = null;
|
||||||
@@ -110,22 +107,31 @@ const applySignaturePreview = (dataUrl) => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const renderSignaturePresetOptions = (selectedId = signaturePresetSelect.value) => {
|
const saveSignature = async () => {
|
||||||
signaturePresetSelect.innerHTML = "<option value=\"\">Vyberte podpis</option>";
|
if (!signatureDataUrl) {
|
||||||
signaturePresets.forEach((preset) => {
|
setSignatureStatus("Nejprve nahrajte podpis.", true);
|
||||||
const option = document.createElement("option");
|
return;
|
||||||
option.value = preset.id;
|
}
|
||||||
option.textContent = preset.name;
|
try {
|
||||||
signaturePresetSelect.appendChild(option);
|
await apiRequest("/api/signature", {
|
||||||
});
|
method: "PUT",
|
||||||
signaturePresetSelect.value = selectedId;
|
body: JSON.stringify({ dataUrl: signatureDataUrl })
|
||||||
deleteSignaturePresetButton.disabled = !signaturePresetSelect.value;
|
});
|
||||||
|
setSignatureStatus("Podpis byl uložen.");
|
||||||
|
} catch (error) {
|
||||||
|
setSignatureStatus(error.message, true);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const loadSignaturePresets = async () => {
|
const loadSignature = async () => {
|
||||||
const response = await apiRequest("/api/signature-presets");
|
const { signature } = await apiRequest("/api/signature");
|
||||||
signaturePresets = response.presets;
|
if (signature) {
|
||||||
renderSignaturePresetOptions();
|
applySignaturePreview(signature);
|
||||||
|
setSignatureStatus("Uloženo na serveru");
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
setSignatureStatus("Zatím není uložený podpis");
|
||||||
|
return false;
|
||||||
};
|
};
|
||||||
|
|
||||||
const readImageDimensions = (dataUrl) => new Promise((resolve, reject) => {
|
const readImageDimensions = (dataUrl) => new Promise((resolve, reject) => {
|
||||||
@@ -185,49 +191,11 @@ signatureInput.addEventListener("change", () => {
|
|||||||
handleSignatureFile(signatureInput.files[0]);
|
handleSignatureFile(signatureInput.files[0]);
|
||||||
signatureInput.value = "";
|
signatureInput.value = "";
|
||||||
});
|
});
|
||||||
signaturePresetSelect.addEventListener("change", () => {
|
saveSignatureButton.addEventListener("click", saveSignature);
|
||||||
const preset = signaturePresets.find(({ id }) => String(id) === signaturePresetSelect.value);
|
loadSignatureButton.addEventListener("click", async () => {
|
||||||
deleteSignaturePresetButton.disabled = !preset;
|
|
||||||
if (preset) {
|
|
||||||
signaturePresetName.value = preset.name;
|
|
||||||
applySignaturePreview(preset.dataUrl);
|
|
||||||
setSignatureStatus("Uložený podpis načten.");
|
|
||||||
}
|
|
||||||
});
|
|
||||||
saveSignaturePresetButton.addEventListener("click", async () => {
|
|
||||||
if (!signatureDataUrl) {
|
|
||||||
setSignatureStatus("Nejprve nahrajte nebo vyberte podpis.", true);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
try {
|
try {
|
||||||
const response = await apiRequest("/api/signature-presets", {
|
await loadSignature();
|
||||||
method: "POST",
|
setSignatureStatus("Podpis načten.");
|
||||||
body: JSON.stringify({
|
|
||||||
name: signaturePresetName.value,
|
|
||||||
dataUrl: signatureDataUrl
|
|
||||||
})
|
|
||||||
});
|
|
||||||
const preset = response.preset;
|
|
||||||
signaturePresets = [
|
|
||||||
...signaturePresets.filter((entry) => entry.id !== preset.id && entry.name !== preset.name),
|
|
||||||
preset
|
|
||||||
].sort((left, right) => left.name.localeCompare(right.name));
|
|
||||||
renderSignaturePresetOptions(String(preset.id));
|
|
||||||
signaturePresetName.value = preset.name;
|
|
||||||
setSignatureStatus("Podpis byl uložen.");
|
|
||||||
} catch (error) {
|
|
||||||
setSignatureStatus(error.message, true);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
deleteSignaturePresetButton.addEventListener("click", async () => {
|
|
||||||
if (!signaturePresetSelect.value) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
try {
|
|
||||||
await apiRequest(`/api/signature-presets/${signaturePresetSelect.value}`, { method: "DELETE" });
|
|
||||||
signaturePresets = signaturePresets.filter(({ id }) => String(id) !== signaturePresetSelect.value);
|
|
||||||
signaturePresetName.value = "";
|
|
||||||
renderSignaturePresetOptions();
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
setSignatureStatus(error.message, true);
|
setSignatureStatus(error.message, true);
|
||||||
}
|
}
|
||||||
@@ -448,9 +416,6 @@ const clearInvoiceEditor = () => {
|
|||||||
paymentPresetSelect.value = "";
|
paymentPresetSelect.value = "";
|
||||||
paymentPresetName.value = "";
|
paymentPresetName.value = "";
|
||||||
deletePaymentPresetButton.disabled = true;
|
deletePaymentPresetButton.disabled = true;
|
||||||
signaturePresetSelect.value = "";
|
|
||||||
signaturePresetName.value = "";
|
|
||||||
deleteSignaturePresetButton.disabled = true;
|
|
||||||
["cisloUctu", "iban", "swift"].forEach((id) => {
|
["cisloUctu", "iban", "swift"].forEach((id) => {
|
||||||
document.getElementById(id).value = "";
|
document.getElementById(id).value = "";
|
||||||
});
|
});
|
||||||
@@ -480,9 +445,6 @@ const loadInvoiceIntoEditor = (invoice) => {
|
|||||||
document.getElementById(id).value = invoice.data.payment?.[id] || "";
|
document.getElementById(id).value = invoice.data.payment?.[id] || "";
|
||||||
});
|
});
|
||||||
applySignaturePreview(invoice.data.signature || null);
|
applySignaturePreview(invoice.data.signature || null);
|
||||||
signaturePresetSelect.value = "";
|
|
||||||
signaturePresetName.value = "";
|
|
||||||
deleteSignaturePresetButton.disabled = true;
|
|
||||||
setSignatureStatus("");
|
setSignatureStatus("");
|
||||||
itemsContainer.replaceChildren();
|
itemsContainer.replaceChildren();
|
||||||
itemIndex = 0;
|
itemIndex = 0;
|
||||||
@@ -521,8 +483,9 @@ const loadInvoices = async () => {
|
|||||||
renderInvoiceList();
|
renderInvoiceList();
|
||||||
};
|
};
|
||||||
|
|
||||||
const openNewInvoice = () => {
|
const openNewInvoice = async () => {
|
||||||
clearInvoiceEditor();
|
clearInvoiceEditor();
|
||||||
|
await loadSignature();
|
||||||
showInvoiceScreen("editor");
|
showInvoiceScreen("editor");
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -709,7 +672,7 @@ deleteClientButton.addEventListener("click", async () => {
|
|||||||
const showInvoiceApp = async () => {
|
const showInvoiceApp = async () => {
|
||||||
authScreen.hidden = true;
|
authScreen.hidden = true;
|
||||||
document.getElementById("main-container").hidden = false;
|
document.getElementById("main-container").hidden = false;
|
||||||
await Promise.all([loadSupplier(), loadClients(), loadInvoices(), loadPaymentPresets(), loadSignaturePresets(), loadNumberingSettings()]);
|
await Promise.all([loadSupplier(), loadClients(), loadInvoices(), loadPaymentPresets(), loadSignature(), loadNumberingSettings()]);
|
||||||
showInvoiceScreen("list");
|
showInvoiceScreen("list");
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@@ -682,56 +682,6 @@ body {
|
|||||||
margin-top: 0.5rem;
|
margin-top: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.signature-save-row {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: minmax(0, 1fr) auto auto;
|
|
||||||
gap: 0.5rem;
|
|
||||||
margin-top: 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.signature-save-row input {
|
|
||||||
min-width: 0;
|
|
||||||
padding: 0.55rem 0.7rem;
|
|
||||||
color: var(--ink);
|
|
||||||
background: #fff;
|
|
||||||
border: 1px solid #c8d0d5;
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
font: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.signature-save-row button {
|
|
||||||
padding: 0.55rem 0.7rem;
|
|
||||||
color: var(--navy);
|
|
||||||
background: transparent;
|
|
||||||
border: 1px solid var(--blue);
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
cursor: pointer;
|
|
||||||
font: inherit;
|
|
||||||
font-size: 0.85rem;
|
|
||||||
font-weight: 700;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.signature-save-row button:hover:not(:disabled) {
|
|
||||||
color: #fff;
|
|
||||||
background: var(--blue);
|
|
||||||
}
|
|
||||||
|
|
||||||
.signature-save-row .secondary-button {
|
|
||||||
color: #8c3c36;
|
|
||||||
border-color: #c47a72;
|
|
||||||
}
|
|
||||||
|
|
||||||
.signature-save-row .secondary-button:hover:not(:disabled) {
|
|
||||||
color: #fff;
|
|
||||||
background: #a53c36;
|
|
||||||
}
|
|
||||||
|
|
||||||
.signature-save-row button:disabled {
|
|
||||||
cursor: not-allowed;
|
|
||||||
opacity: 0.45;
|
|
||||||
}
|
|
||||||
|
|
||||||
.signature-status {
|
.signature-status {
|
||||||
margin: 0.4rem 0 0;
|
margin: 0.4rem 0 0;
|
||||||
min-height: 1.1rem;
|
min-height: 1.1rem;
|
||||||
@@ -1013,10 +963,6 @@ select:focus {
|
|||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
.signature-save-row {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delete-item-button {
|
.delete-item-button {
|
||||||
justify-self: end;
|
justify-self: end;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user