inventory/templates/user.html

<!-- templates/user.html -->
{% extends "layout.html" %}

{% block title %}{{ title }}{% endblock %}

{% block content %}


{{ breadcrumbs.breadcrumb_header(
    title=title,
    breadcrumbs=[
        {'label': 'Users', 'url': url_for('main.list_users')}
    ],
    save_button = True
) }}
{% if not user.active %}
<div class="alert alert-danger">This user is inactive. You will not be able to make any changes to this record.</div>
{% endif %}

<input type="hidden" id="userId" value="{{ user.id }}">
<div class="container">
    <form action="POST">
        <div class="row">
            <div class="col-6">
                <label for="lastName" class="form-label">Last Name</label>
                <input type="text" class="form-control" id="lastName" name="lastName" placeholder="Doe" value="{{ user.last_name if user.last_name else '' }}"{% if not user.active %} disabled readonly{% endif %}>
            </div>

            <div class="col-6">
                <label for="firstName" class="form-label">First Name</label>
                <input type="text" class="form-control" id="firstName" name="firstName" placeholder="John" value="{{ user.first_name if user.first_name else '' }}"{% if not user.active %} disabled readonly{% endif %}>
            </div>
        </div>

        <div class="row mt-2">
            <div class="col-6">
                <label for="supervisor" class="form-label">
                    Supervisor
                    {% if user.supervisor %}
                    {{ links.entry_link('user', user.supervisor_id) }}
                    {% endif %}
                </label>
                <select class="form-select" id="supervisor" name="supervisor"
                    value="{{ supervisor.id if supervisor else '' }}"{% if not user.active %} disabled readonly{% endif %}>
                    <option>-</option>
                    {% for supervisor in users %}
                    <option value="{{ supervisor.id }}"{% if supervisor.id==user.supervisor_id %} selected{% endif %}>
                        {{ supervisor.full_name }}</option>
                    {% endfor %}
                </select>
            </div>

            <div class="col-6">
                <label for="location" class="form-label">Location</label>
                <select class="form-select" id="location" name="location"{% if not user.active %} disabled readonly{% endif %}>
                    <option>-</option>
                    {% for location in rooms %}
                    <option value="{{ location.id }}"{% if location.id==user.location_id %} selected{% endif %}>{{
                        location.full_name }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
        <div class="row mt-4">
            <div class="col-6">
                <input type="checkbox" class="form-check-input" id="activeCheck" name="activeCheck"{% if user.active %} checked{% endif %}>
                <label for="activeCheck" class="form-check-label">Active</label>
            </div>
            <div class="col-6">
                <input type="checkbox" class="form-check-input" id="staffCheck" name="staffCheck"{% if user.staff %} checked{% endif %}{% if not user.active %} disabled readonly{% endif %}>
                <label for="staffCheck" class="form-check-label">Staff</label>
            </div>
        </div>
    </form>
    <div class="row mt-3">
        {% if inventory_rows %}
        <div class="col">
            <div class="row">
                {{ tables.render_table(headers=inventory_headers, rows=inventory_rows, id='assets', entry_route='inventory_item', title='Assets', per_page=8) }}
            </div>
        </div>
        {% endif %}
        {% if worklog_rows %}
        <div class="col">
            <div class="row">
                {{ tables.render_table(headers=worklog_headers, rows=worklog_rows, id='worklog', entry_route='worklog_entry', title='Work Done', per_page=8) }}
            </div>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block script %}
    const saveButton = document.getElementById("saveButton");
    const deleteButton = document.getElementById("deleteButton");

    if (saveButton) {
        saveButton.addEventListener("click", async (e) => {
            e.preventDefault();

            const payload = {
                staff: document.querySelector("input[name='staffCheck']").checked,
                active: document.querySelector("input[name='activeCheck']").checked,
                last_name: document.querySelector("input[name='lastName']").value,
                first_name: document.querySelector("input[name='firstName']").value,
                supervisor_id: parseInt(document.querySelector("select[name='supervisor']").value) || null,
                location_id: parseInt(document.querySelector("select[name='location']").value) || null
            };

            try {
                const id = document.querySelector("#userId").value;
                const isEdit = id && id !== "None";

                const endpoint = isEdit ? `/api/user/${id}` : "/api/user";
                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 ? "User updated!" : "User created!",
                        type: "success"
                    }));

                    window.location.href = `/user/${result.id}`;
                } else {
                    renderToast({ message: `Error: ${result.error}`, type: "danger" });
                }
            } catch (err) {
                console.error(err);
            }
        });
    }
{% endblock %}