106 lines
5.8 KiB
PHP
Executable File
106 lines
5.8 KiB
PHP
Executable File
<dialog class="modal modal-bottom sm:modal-middle" :class="{ 'modal-open': showModal }">
|
|
<div class="modal-box p-5 border border-base-300 shadow-2xl bg-base-100 max-w-sm">
|
|
<h3 class="font-bold text-base mb-3 flex items-center gap-2 text-base-content">
|
|
<i class="fa-solid fa-vial text-primary text-sm"></i>
|
|
<span x-text="form.controlId ? 'Edit Control' : 'New Control'"></span>
|
|
</h3>
|
|
|
|
<div class="space-y-2">
|
|
<template x-if="loadingDepartments">
|
|
<div class="flex items-center justify-center py-2">
|
|
<span class="loading loading-spinner loading-sm text-primary"></span>
|
|
<span class="ml-2 text-xs opacity-50">Loading departments...</span>
|
|
</div>
|
|
</template>
|
|
<template x-if="departments">
|
|
<div class="form-control">
|
|
<label class="label py-1">
|
|
<span class="label-text-alt font-semibold text-base-content/70">Department</span>
|
|
</label>
|
|
<select
|
|
class="select select-bordered select-sm w-full focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary bg-base-200 border-base-300 text-base-content"
|
|
:class="{'border-error': errors.deptId}"
|
|
x-model="form.deptId"
|
|
placeholder="Select department">
|
|
<option value="">Select Department</option>
|
|
<template x-for="dept in departments" :key="dept.deptId">
|
|
<option :value="dept.deptId" x-text="dept.deptName"></option>
|
|
</template>
|
|
</select>
|
|
<template x-if="errors.deptId">
|
|
<label class="label">
|
|
<span class="label-text-alt text-error" x-text="errors.deptId"></span>
|
|
</label>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
<div class="form-control">
|
|
<label class="label py-1">
|
|
<span class="label-text-alt font-semibold text-base-content/70">Control Name</span>
|
|
</label>
|
|
<input type="text"
|
|
class="input input-bordered input-sm w-full focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary bg-base-200 border-base-300 text-base-content placeholder:opacity-50"
|
|
:class="{'border-error': errors.controlName}" x-model="form.controlName" list="control-names-list"
|
|
placeholder="Enter control name" />
|
|
<datalist id="control-names-list">
|
|
<template x-for="name in uniqueControlNames" :key="name">
|
|
<option :value="name" x-text="name"></option>
|
|
</template>
|
|
</datalist>
|
|
<template x-if="errors.controlName">
|
|
<label class="label">
|
|
<span class="label-text-alt text-error" x-text="errors.controlName"></span>
|
|
</label>
|
|
</template>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<div class="form-control">
|
|
<label class="label py-1">
|
|
<span class="label-text-alt font-semibold text-base-content/70">Lot Number</span>
|
|
</label>
|
|
<input type="text"
|
|
class="input input-bordered input-sm w-full focus:outline-none focus:ring-1 focus:ring-primary/40 focus:border-primary bg-base-200 border-base-300 text-base-content placeholder:opacity-50"
|
|
x-model="form.lot" placeholder="e.g., LOT12345" />
|
|
</div>
|
|
|
|
<div class="form-control">
|
|
<label class="label py-1">
|
|
<span class="label-text-alt font-semibold text-base-content/70">Expiry Date</span>
|
|
</label>
|
|
<input type="date"
|
|
class="input input-bordered input-sm w-full focus:outline-none focus:ring-1 focus:ring-primary/40 focus:border-primary bg-base-200 border-base-300 text-base-content"
|
|
x-model="form.expDate" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-control">
|
|
<label class="label py-1">
|
|
<span class="label-text-alt font-semibold text-base-content/70">Producer</span>
|
|
</label>
|
|
<input type="text"
|
|
class="input input-bordered input-sm w-full focus:outline-none focus:ring-1 focus:ring-primary/40 focus:border-primary bg-base-200 border-base-300 text-base-content placeholder:opacity-50"
|
|
x-model="form.producer" list="producers-list" placeholder="Enter producer name" />
|
|
<datalist id="producers-list">
|
|
<template x-for="producer in uniqueProducers" :key="producer">
|
|
<option :value="producer" x-text="producer"></option>
|
|
</template>
|
|
</datalist>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-action mt-5">
|
|
<button class="btn btn-sm btn-ghost opacity-70" @click="closeModal()">Cancel</button>
|
|
<button class="btn btn-sm btn-primary gap-2 shadow-md shadow-primary/20 font-medium"
|
|
:class="{'loading': loading}" @click="save()" :disabled="loading">
|
|
<template x-if="!loading">
|
|
<span><i class="fa-solid fa-save"></i> Save</span>
|
|
</template>
|
|
<template x-if="loading">
|
|
<span>Saving...</span>
|
|
</template>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<form method="dialog" class="modal-backdrop bg-black/60" @click="closeModal()"></form>
|
|
</dialog> |