Implement work log creation and update API; add new worklog entry route and enhance worklog template with JavaScript functionality

This commit is contained in:
Yaro Kasear 2025-07-08 09:55:25 -05:00
parent 146dcafab3
commit bb564809ea
5 changed files with 209 additions and 33 deletions

View file

@ -181,6 +181,7 @@
}
} catch (err) {
console.error(err);
renderToast({ message: `Error: ${err}`, type: "danger" });
}
});
}
@ -190,7 +191,7 @@
const id = document.querySelector("#inventoryId").value;
if (!id || id === "None") {
renderToast({ message: "No item ID found to delete." });
renderToast({ message: "No item ID found to delete.", type: "danger }");
return;
}
@ -216,7 +217,8 @@
renderToast({ message: `Error: ${result.error}`, type: "danger" });
}
} catch (err) {
renderToast({ message: `Error: ${result.error}`, type: "danger" });
console.error(err);
renderToast({ message: `Error: ${err}`, type: "danger" });
}
});
}

View file

@ -5,15 +5,16 @@
{% block content %}
<nav>
<form action="POST">
{{ breadcrumbs.breadcrumb_header(
breadcrumbs=[
{'label': 'Work Log', 'url': url_for('main.list_worklog')}
],
title=title,
save_button=True
breadcrumbs=[
{'label': 'Work Log', 'url': url_for('main.list_worklog')}
],
title=title,
save_button=True,
delete_button=log.id != None
) }}
<input type="hidden" id="logId" value="{{ log.id }}">
<div class="container">
<div class="row">
<div class="col-6">
@ -36,9 +37,9 @@
{% endif %}
</label>
<select class="form-select" name="contact" id="contact">
<option>-</option>
<option value="">-</option>
{% for contact in users %}
<option data-id="{{ contact.id }}" value="{{ contact.full_name }}"{% if contact.id == log.contact_id %} selected{% endif %}>{{ contact.full_name }}
<option value="{{ contact.id }}"{% if contact.id == log.contact_id %} selected{% endif %}>{{ contact.full_name }}
</option>
{% endfor %}
</select>
@ -51,16 +52,16 @@
{% endif %}
</label>
<select id="item" name="item" class="form-select">
<option>-</option>
<option value="">-</option>
{% for item in items %}
<option data-id="{{ item.id }}" value="{{ item.identifier }}"{% if item.id == log.work_item_id %} selected{% endif %}>{{ item.identifier }}</option>
<option value="{{ item.id }}"{% if item.id == log.work_item_id %} selected{% endif %}>{{ item.identifier }}</option>
{% endfor %}
</select>
</div>
<div class="col-4">
<div class="row">
<div class="col">
<input type="checkbox" id="complete" class="form-check-input" {% if log.complete %}checked{%
<input type="checkbox" id="complete" class="form-check-input" name="complete"{% if log.complete %} checked{%
endif %}>
<label for="complete" class="form-check-label">
Complete?
@ -69,7 +70,7 @@
</div>
<div class="row">
<div class="col">
<input type="checkbox" id="followup" class="form-check-input" {% if log.followup %}checked{%
<input type="checkbox" id="followup" class="form-check-input" name="followup"{% if log.followup %} checked{%
endif %}>
<label for="followup" class="form-check-label">
Follow Up?
@ -78,7 +79,7 @@
</div>
<div class="row">
<div class="col">
<input type="checkbox" id="analysis" class="form-check-input" {% if log.analysis %}checked{%
<input type="checkbox" id="analysis" class="form-check-input" name="analysis"{% if log.analysis %} checked{%
endif %}>
<label for="analysis" class="form-check-label">
Quick Analysis?
@ -96,5 +97,94 @@
</div>
</div>
</nav>
</form>
{% endblock %}
{% block script %}
const saveButton = document.getElementById("saveButton");
const deleteButton = document.getElementById("deleteButton");
if (saveButton) {
saveButton.addEventListener("click", async (e) => {
e.preventDefault();
const payload = {
start_time: document.querySelector("input[name='start']").value,
end_time: document.querySelector("input[name='end']").value,
notes: document.querySelector("textarea[name='notes']").value,
complete: document.querySelector("input[name='complete']").checked,
analysis: document.querySelector("input[name='analysis']").checked,
followup: document.querySelector("input[name='followup']").checked,
contact_id: document.querySelector("select[name='contact']").value || null,
work_item_id: document.querySelector("select[name='item']").value || null,
};
try {
const id = document.querySelector("#logId").value;
const isEdit = id && id !== "None";
const endpoint = isEdit ? `/api/worklog/${id}` : "/api/worklog";
const method = isEdit ? "PUT" : "POST";
const response = await fetch(endpoint, {
method,
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(payload)
});
const result = await response.json();
if (result.success) {
localStorage.setItem("toastMessage", JSON.stringify({
message: isEdit ? "Work Log entry updated!" : "Work Log entry created!",
type: "success"
}));
window.location.href = `/worklog/${result.id}`;
} else {
renderToast({ message: `Error: ${result.error}`, type: "danger" });
}
} catch (err) {
console.error(err)
renderToast({ message: `Error: ${err}`, type: "danger" });
}
});
}
if (deleteButton) {
deleteButton.addEventListener("click", async () => {
const id = document.querySelector("#logId").value;
if (!id || id === "None") {
renderToast({ message: "No item ID found to delete.", type: "danger" });
return;
}
if (!confirm("Are you sure you want to delete this work log entry? This action cannot be undone.")) {
return;
}
try {
const response = await fetch(`/api/worklog/${id}`, {
method: "DELETE"
});
const result = await response.json();
if (result.success) {
localStorage.setItem("toastMessage", JSON.stringify({
message: "Work log entry deleted.",
type: "success"
}));
window.location.href = "/worklog";
} else {
renderToast({ message: `Error: ${result.error}`, type: "danger" });
}
} catch (err) {
console.log(err);
renderToast({ message: `Error: ${err}`, type: "danger" });
}
});
}
{% endblock %}