tinyqc/app/Views/master/test/index.php

<?= $this->extend("layout/main_layout"); ?>

<?= $this->section("content"); ?>
<main class="flex-1 p-6 overflow-auto" x-data="tests()">
    <div class="flex justify-between items-center mb-6">
        <div>
            <h1 class="text-2xl font-bold text-base-content tracking-tight">Tests</h1>
            <p class="text-sm mt-1 opacity-70">Manage laboratory tests and parameters</p>
        </div>
        <button
            class="btn btn-sm gap-2 shadow-sm border-0 bg-gradient-to-r from-blue-600 to-blue-500 hover:from-blue-700 hover:to-blue-600 text-white transition-all duration-200"
            @click="showForm()"
        >
            <i class="fa-solid fa-plus"></i> New Test
        </button>
    </div>

    <div class="bg-base-100 rounded-xl border border-base-300 shadow-sm p-4 mb-6">
        <div class="flex items-center gap-3">
            <div class="relative flex-1 max-w-md">
                <i class="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 opacity-50 text-sm"></i>
                <input
                    type="text"
                    placeholder="Search by name..."
                    class="input input-bordered input-sm w-full pl-10 pr-4 py-2.5 text-sm bg-base-200 border border-base-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all"
                    x-model="keyword"
                    @keyup.enter="fetchList()"
                />
            </div>
            <select x-model="deptId" @change="setDeptId(deptId)" class="select select-bordered select-sm">
                    <option value="">All Departments</option>
                    <template x-if="departments">
                        <template x-for="dept in departments" :key="dept.deptId">
                            <option :value="dept.deptId" x-text="dept.deptName"></option>
                        </template>
                    </template>
                    <template x-if="!departments">
                        <option disabled>Loading...</option>
                    </template>
                </select>
            <template x-if="deptId">
                <button class="btn btn-sm gap-1" @click="setDeptId(null)">
                    <i class="fa-solid fa-xmark text-xs"></i> Clear
                </button>
            </template>
            <button class="btn btn-sm btn-neutral gap-2" @click="fetchList()">
                <i class="fa-solid fa-magnifying-glass text-xs"></i> Search
            </button>
        </div>
    </div>

    <div class="bg-base-100 rounded-xl border border-base-300 shadow-sm overflow-hidden">
        <template x-if="loading">
            <div class="p-8 text-center">
                <span class="loading loading-spinner loading-lg text-primary"></span>
                <p class="mt-2 text-base-content/60">Loading...</p>
            </div>
        </template>
        
        <template x-if="!loading && error">
            <div class="p-8 text-center">
                <div class="w-12 h-12 bg-error/10 text-error rounded-full flex items-center justify-center mx-auto mb-3">
                    <i class="fa-solid fa-triangle-exclamation text-xl"></i>
                </div>
                <h3 class="font-bold text-base-content">Something went wrong</h3>
                <p class="text-error/80 mt-0.5 text-sm" x-text="error"></p>
                <button @click="fetchList()" class="btn btn-sm btn-ghost mt-3 border border-base-300">Try Again</button>
            </div>
        </template>
        
        <template x-if="!loading && !error && list">
            <div class="overflow-x-auto">
                <table class="w-full text-sm text-left">
                    <thead class="uppercase tracking-wider font-semibold bg-base-200 text-base-content/70 text-xs">
                        <tr>
                            <th class="py-3 px-5 font-semibold">Test Code</th>
                            <th class="py-3 px-5 font-semibold">Test Name</th>
                            <th class="py-3 px-5 font-semibold">Unit</th>
                            <th class="py-3 px-5 font-semibold">Method</th>
                            <th class="py-3 px-5 font-semibold text-right">Action</th>
                        </tr>
                    </thead>
                    <tbody class="text-base-content/80 divide-y divide-base-300">
                        <template x-for="item in list" :key="item.testId">
                            <tr class="hover:bg-base-200 transition-colors">
                                <td class="py-3 px-5 font-medium text-base-content" x-text="item.testCode"></td>
                                <td class="py-3 px-5 font-medium text-base-content" x-text="item.testName"></td>
                                <td class="py-3 px-5" x-text="item.testUnit"></td>
                                <td class="py-3 px-5" x-text="item.testMethod"></td>
                                <td class="py-3 px-5 text-right">
                                    <button
                                        class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-amber-700 bg-amber-50 hover:bg-amber-100 rounded-lg transition-colors"
                                        @click="showForm(item.testId)"
                                    >
                                        <i class="fa-solid fa-pencil"></i> Edit
                                    </button>
                                    <button
                                        class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-error bg-error/10 hover:bg-error/20 rounded-lg transition-colors ml-1"
                                        @click="deleteData(item.testId)"
                                    >
                                        <i class="fa-solid fa-trash"></i>
                                    </button>
                                </td>
                            </tr>
                        </template>
                        <template x-if="list.length === 0">
                            <tr>
                                <td colspan="5" class="py-8 text-center">
                                    <div class="flex flex-col items-center justify-center">
                                        <div class="w-12 h-12 bg-base-200 text-base-content/30 rounded-full flex items-center justify-center mb-2">
                                            <i class="fa-solid fa-flask text-xl"></i>
                                        </div>
                                        <p class="text-base-content/60 text-sm">No data available</p>
                                        <p class="text-base-content/40 text-xs mt-1">Try adjusting your search or add a new test</p>
                                    </div>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
        </template>
    </div>

    <?= $this->include('master/test/dialog_test_form'); ?>
</main>
<?= $this->endSection(); ?>

<?= $this->section("script"); ?>
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data("tests", () => ({
            loading: false,
            showModal: false,
            errors: {},
            error: null,
            keyword: "",
            deptId: null,
            departments: null,
            loadingDepartments: false,
            list: null,
            form: {
                testId: null,
                deptId: null,
                testCode: "",
                testName: "",
                testUnit: "",
                testMethod: "",
                cva: "",
                ba: "",
                tea: "",
            },

            init() {
                this.fetchDepartments();
                this.fetchList();
            },

            async fetchDepartments() {
                this.loadingDepartments = true;
                try {
                    const response = await fetch(`${BASEURL}api/master/depts`, {
                        method: "GET",
                        headers: { "Content-Type": "application/json" }
                    });
                    if (!response.ok) throw new Error("Failed to load departments");
                    const data = await response.json();
                    this.departments = data.data;
                } catch (err) {
                    console.error(err);
                    this.departments = [];
                } finally {
                    this.loadingDepartments = false;
                }
            },

            async fetchList() {
                this.loading = true;
                this.error = null;
                this.list = null;
                try {
                    const params = new URLSearchParams({ keyword: this.keyword });
                    if (this.deptId) {
                        params.set('dept_id', this.deptId);
                    }
                    const response = await fetch(`${BASEURL}api/master/tests?${params}`, {
                        method: "GET",
                        headers: { "Content-Type": "application/json" }
                    });
                    if (!response.ok) throw new Error("Failed to load data");
                    const data = await response.json();
                    this.list = data.data;
                } catch (err) {
                    this.error = err.message;
                } finally {
                    this.loading = false;
                }
            },

            
            setDeptId(id) {
                this.deptId = id;
                this.list = null;
                this.fetchList();
            },

async loadData(id) {
                this.loading = true;
                try {
                    const response = await fetch(`${BASEURL}api/master/tests/${id}`, {
                        method: "GET",
                        headers: { "Content-Type": "application/json" }
                    });
                    if (!response.ok) throw new Error("Failed to load item");
                    const data = await response.json();
                    this.form = data.data[0];
                } catch (err) {
                    this.error = err.message;
                    this.form = {};
                } finally {
                    this.loading = false;
                }
            },

            async showForm(id = null) {
                this.showModal = true;
                this.errors = {};
                if (id) {
                    await this.loadData(id);
                } else {
                    this.form = { testId: null, deptId: null, testCode: "", testName: "", testUnit: "", testMethod: "", cva: "", ba: "", tea: "" };
                }
            },

            closeModal() {
                this.showModal = false;
                this.form = { testId: null, deptId: null, testCode: "", testName: "", testUnit: "", testMethod: "", cva: "", ba: "", tea: "" };
            },

            validate() {
                this.errors = {};
                if (!this.form.testName) this.errors.testName = "Name is required.";
                return Object.keys(this.errors).length === 0;
            },

            async save() {
                if (!this.validate()) return;
                this.loading = true;
                let method = '';
                let url = '';
                if (this.form.testId) {
                    method = 'PATCH';
                    url = `${BASEURL}api/master/tests/${this.form.testId}`;
                } else {
                    method = 'POST';
                    url = `${BASEURL}api/master/tests`;
                }
                try {
                    const res = await fetch(url, {
                        method: method,
                        headers: { "Content-Type": "application/json" },
                        body: JSON.stringify(this.form),
                    });
                    const data = await res.json();
                    if (data.status === 'success') {
                        alert("Data saved successfully!");
                        this.closeModal();
                        this.fetchList();
                    } else {
                        alert(data.message || "Something went wrong.");
                    }
                } catch (err) {
                    console.error(err);
                    alert("Failed to save data.");
                } finally {
                    this.loading = false;
                }
            },

            async deleteData(id) {
                if (!confirm("Are you sure you want to delete this item?")) return;
                this.loading = true;
                try {
                    const res = await fetch(`${BASEURL}api/master/tests/${id}`, {
                        method: "DELETE",
                        headers: { "Content-Type": "application/json" }
                    });
                    const data = await res.json();
                    if (data.status === 'success') {
                        alert("Data deleted successfully!");
                        this.fetchList();
                    } else {
                        alert(data.message || "Failed to delete.");
                    }
                } catch (err) {
                    console.error(err);
                    alert("Failed to delete data.");
                } finally {
                    this.loading = false;
                }
            }
        }));
    });
</script>
<?= $this->endSection(); ?>