359 lines
16 KiB
PHP
359 lines
16 KiB
PHP
<?= $this->extend("layout/main_layout"); ?>
|
|
<?= $this->section("content") ?>
|
|
<main x-data="monthlyEntry()" @keydown.window.ctrl.s.prevent="showEntry ? saveData() : null">
|
|
<div class="bg-white rounded-xl border border-slate-100 shadow-sm p-6">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<div>
|
|
<h1 class="text-2xl font-bold text-slate-800">Monthly Entry</h1>
|
|
<p class="text-sm text-slate-500 mt-1">Enter monthly QC results</p>
|
|
</div>
|
|
<div class="flex items-center gap-2 text-sm text-slate-500">
|
|
<i class="fa-solid fa-clock"></i>
|
|
<span>Press Ctrl+S to save</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div x-show="error" x-transition class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6">
|
|
<div class="flex items-center gap-2">
|
|
<i class="fa-solid fa-circle-exclamation"></i>
|
|
<span x-text="error"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-slate-700 mb-1">Department <span class="text-red-500">*</span></label>
|
|
<select x-model="dept" @change="loadControls()" :class="errors.dept ? 'border-red-300 bg-red-50' : ''" class="w-full px-4 py-2.5 text-sm bg-slate-50 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500">
|
|
<option value="">Select Department</option>
|
|
<?php foreach ($depts as $d): ?>
|
|
<option value="<?= $d['dept_id'] ?>"><?= $d['name'] ?></option>
|
|
<?php endforeach; ?>
|
|
</select>
|
|
<p x-show="errors.dept" x-text="errors.dept" class="text-red-500 text-xs mt-1"></p>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-slate-700 mb-1">Date <span class="text-red-500">*</span></label>
|
|
<input type="month" x-model="date" @change="loadControls()" :class="errors.date ? 'border-red-300 bg-red-50' : ''" class="w-full px-4 py-2.5 text-sm bg-slate-50 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500">
|
|
<p x-show="errors.date" x-text="errors.date" class="text-red-500 text-xs mt-1"></p>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-slate-700 mb-1">Control <span class="text-red-500">*</span></label>
|
|
<select x-model="control" @change="loadTests()" :class="errors.control ? 'border-red-300 bg-red-50' : ''" class="w-full px-4 py-2.5 text-sm bg-slate-50 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500">
|
|
<option value="">Select Control</option>
|
|
<template x-for="c in controls" :key="c.control_id">
|
|
<option :value="c.control_id" x-text="c.name + ' (' + (c.lot || 'N/A') + ')'"></option>
|
|
</template>
|
|
</select>
|
|
<p x-show="errors.control" x-text="errors.control" class="text-red-500 text-xs mt-1"></p>
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-slate-700 mb-1">Test <span class="text-red-500">*</span></label>
|
|
<select x-model="test" :class="errors.test ? 'border-red-300 bg-red-50' : ''" class="w-full px-4 py-2.5 text-sm bg-slate-50 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500">
|
|
<option value="">Select Test</option>
|
|
<template x-for="t in tests" :key="t.test_ref_id">
|
|
<option :value="t.test_ref_id" x-text="t.test_name"></option>
|
|
</template>
|
|
</select>
|
|
<p x-show="errors.test" x-text="errors.test" class="text-red-500 text-xs mt-1"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6" x-show="control && test" x-transition>
|
|
<button @click="openEntry()" class="btn btn-primary">
|
|
<i class="fa-solid fa-plus mr-2"></i>
|
|
Enter Data
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Monthly Entry Modal -->
|
|
<div x-show="showEntry"
|
|
x-transition:enter="transition ease-out duration-200"
|
|
x-transition:enter-start="opacity-0"
|
|
x-transition:enter-end="opacity-100"
|
|
x-transition:leave="transition ease-in duration-150"
|
|
x-transition:leave-start="opacity-100"
|
|
x-transition:leave-end="opacity-0"
|
|
class="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-40"
|
|
@click="closeEntry()">
|
|
</div>
|
|
|
|
<div x-show="showEntry"
|
|
x-cloak
|
|
x-transition:enter="transition ease-out duration-200"
|
|
x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
|
|
x-transition:leave="transition ease-in duration-150"
|
|
x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
|
|
x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
|
|
class="fixed inset-0 z-50 flex items-center justify-center p-4">
|
|
<div class="bg-white rounded-2xl shadow-2xl w-full max-w-5xl" @click.stop>
|
|
<div class="px-6 py-4 border-b border-slate-100 flex items-center justify-between">
|
|
<h3 class="text-lg font-semibold text-slate-800">Monthly Entry</h3>
|
|
<button @click="closeEntry()" class="text-slate-400 hover:text-slate-600">
|
|
<i class="fa-solid fa-xmark text-xl"></i>
|
|
</button>
|
|
</div>
|
|
<div class="p-6">
|
|
<template x-if="loading">
|
|
<div class="flex items-center justify-center py-12">
|
|
<i class="fa-solid fa-spinner fa-spin text-blue-500 text-3xl"></i>
|
|
</div>
|
|
</template>
|
|
<template x-if="!loading">
|
|
<div>
|
|
<div class="grid grid-cols-7 gap-2 mb-4">
|
|
<template x-for="day in 31" :key="day">
|
|
<div class="text-center">
|
|
<label class="block text-xs text-slate-500 mb-1" x-text="day"></label>
|
|
<input type="number" step="0.01" :name="'day_' + day" x-model="formValues[day]" class="w-full px-2 py-2 text-sm text-center bg-slate-50 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500" placeholder="-">
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<div class="mt-4">
|
|
<label class="block text-sm font-medium text-slate-700 mb-1">Monthly Comment</label>
|
|
<textarea x-model="comment" rows="2" class="w-full px-4 py-2.5 text-sm bg-slate-50 border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500" placeholder="Optional monthly comment"></textarea>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
<div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-slate-100 bg-slate-50/50 rounded-b-2xl">
|
|
<button @click="closeEntry()" class="px-4 py-2 text-sm font-medium text-slate-600 hover:text-slate-800 transition-colors">Cancel</button>
|
|
<button @click="saveData()" data-save-btn :disabled="loading" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
|
|
<template x-if="!loading">
|
|
<span class="flex items-center">
|
|
<i class="fa-solid fa-check mr-2"></i>
|
|
Save
|
|
</span>
|
|
</template>
|
|
<template x-if="loading">
|
|
<span class="flex items-center">
|
|
<i class="fa-solid fa-spinner fa-spin mr-2"></i>
|
|
Saving...
|
|
</span>
|
|
</template>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<?= $this->endSection(); ?>
|
|
|
|
<?= $this->section("script") ?>
|
|
<script>
|
|
document.addEventListener('alpine:init', () => {
|
|
Alpine.data("monthlyEntry", () => ({
|
|
dept: '',
|
|
date: new Date().toISOString().slice(0, 7),
|
|
control: '',
|
|
test: '',
|
|
controls: [],
|
|
tests: [],
|
|
showEntry: false,
|
|
loading: false,
|
|
errors: {},
|
|
error: '',
|
|
formValues: {},
|
|
comment: '',
|
|
|
|
init() {
|
|
this.loadDraft();
|
|
},
|
|
|
|
async loadControls() {
|
|
this.errors = {};
|
|
this.controls = [];
|
|
this.control = '';
|
|
this.tests = [];
|
|
this.test = '';
|
|
|
|
if (!this.dept || !this.date) {
|
|
return;
|
|
}
|
|
|
|
this.loading = true;
|
|
try {
|
|
const response = await fetch(`${window.BASEURL}/api/entry/controls?date=${this.date}&deptid=${this.dept}`);
|
|
const data = await response.json();
|
|
if (data.status === 'success') {
|
|
this.controls = data.data || [];
|
|
if (this.controls.length === 0) {
|
|
App.showToast('No controls found for selected criteria', 'info');
|
|
}
|
|
} else {
|
|
this.error = data.message || 'Failed to load controls';
|
|
}
|
|
} catch (error) {
|
|
console.error(error);
|
|
this.error = 'Failed to load controls';
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
},
|
|
|
|
async loadTests() {
|
|
this.errors = {};
|
|
this.tests = [];
|
|
this.test = '';
|
|
|
|
if (!this.control) {
|
|
return;
|
|
}
|
|
|
|
this.loading = true;
|
|
try {
|
|
const response = await fetch(`${window.BASEURL}/api/entry/tests?controlid=${this.control}`);
|
|
const data = await response.json();
|
|
if (data.status === 'success') {
|
|
this.tests = data.data || [];
|
|
if (this.tests.length === 0) {
|
|
App.showToast('No tests found for this control', 'info');
|
|
}
|
|
} else {
|
|
this.error = data.message || 'Failed to load tests';
|
|
}
|
|
} catch (error) {
|
|
console.error(error);
|
|
this.error = 'Failed to load tests';
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
},
|
|
|
|
validate() {
|
|
this.errors = {};
|
|
if (!this.dept) this.errors.dept = 'Department is required';
|
|
if (!this.date) this.errors.date = 'Date is required';
|
|
if (!this.control) this.errors.control = 'Control is required';
|
|
if (!this.test) this.errors.test = 'Test is required';
|
|
return Object.keys(this.errors).length === 0;
|
|
},
|
|
|
|
async openEntry() {
|
|
this.formValues = {};
|
|
this.comment = '';
|
|
this.loading = true;
|
|
this.showEntry = true;
|
|
|
|
try {
|
|
const response = await fetch(`${window.BASEURL}/api/entry/monthly?controlid=${this.control}&testid=${this.test}&yearmonth=${this.date}`);
|
|
const data = await response.json();
|
|
if (data.status === 'success') {
|
|
this.formValues = data.data.formValues || {};
|
|
this.comment = data.data.comment || '';
|
|
} else {
|
|
this.error = data.message || 'Failed to load existing data';
|
|
}
|
|
} catch (error) {
|
|
console.error(error);
|
|
this.error = 'Failed to load existing data';
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
},
|
|
|
|
async saveData() {
|
|
if (!this.validate()) {
|
|
App.showToast('Please fill all required fields', 'error');
|
|
return;
|
|
}
|
|
|
|
if (!App.confirmSave('Save monthly entry data?')) return;
|
|
|
|
this.loading = true;
|
|
this.error = '';
|
|
|
|
const formData = new FormData();
|
|
formData.append('controlid', this.control);
|
|
formData.append('testid', this.test);
|
|
formData.append('dates', this.date);
|
|
|
|
let hasData = false;
|
|
for (let day = 1; day <= 31; day++) {
|
|
const value = this.formValues[day];
|
|
if (value) {
|
|
formData.append(`resvalue[${day}]`, value);
|
|
hasData = true;
|
|
}
|
|
}
|
|
|
|
if (!hasData && !this.comment) {
|
|
App.showToast('Please enter at least one value or comment', 'warning');
|
|
this.loading = false;
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch(`${window.BASEURL}/api/entry/monthly`, {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
const data = await response.json();
|
|
if (data.status === 'success') {
|
|
if (this.comment) {
|
|
await this.saveComment();
|
|
}
|
|
App.showToast('Data saved successfully!');
|
|
this.showEntry = false;
|
|
this.formValues = {};
|
|
this.comment = '';
|
|
this.saveDraft();
|
|
} else {
|
|
this.error = data.message || 'Failed to save data';
|
|
}
|
|
} catch (error) {
|
|
console.error(error);
|
|
this.error = 'Network error. Please try again.';
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
},
|
|
|
|
async saveComment() {
|
|
const formData = new FormData();
|
|
formData.append('controlid', this.control);
|
|
formData.append('testid', this.test);
|
|
formData.append('commonth', this.date);
|
|
formData.append('comtext', this.comment);
|
|
|
|
try {
|
|
await fetch(`${window.BASEURL}/api/entry/comment`, {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
} catch (error) {
|
|
console.error('Failed to save comment:', error);
|
|
}
|
|
},
|
|
|
|
saveDraft() {
|
|
localStorage.setItem('monthlyEntry', JSON.stringify({
|
|
dept: this.dept,
|
|
date: this.date,
|
|
control: this.control,
|
|
test: this.test
|
|
}));
|
|
},
|
|
|
|
loadDraft() {
|
|
const draft = localStorage.getItem('monthlyEntry');
|
|
if (draft) {
|
|
const data = JSON.parse(draft);
|
|
this.dept = data.dept || '';
|
|
this.date = data.date || new Date().toISOString().slice(0, 7);
|
|
this.control = data.control || '';
|
|
this.test = data.test || '';
|
|
if (this.dept && this.date) this.loadControls();
|
|
if (this.control) this.loadTests();
|
|
}
|
|
},
|
|
|
|
closeEntry() {
|
|
this.showEntry = false;
|
|
}
|
|
}));
|
|
});
|
|
</script>
|
|
<?= $this->endSection(); ?>
|
|
|