add flatpicker for edit pbg task data
This commit is contained in:
arifal
@@ -2,10 +2,22 @@ import { Grid } from "gridjs/dist/gridjs.umd.js";
|
||||
import "gridjs/dist/gridjs.umd.js";
|
||||
import gridjs from "gridjs/dist/gridjs.umd.js";
|
||||
import GlobalConfig from "../global-config";
|
||||
import flatpickr from "flatpickr";
|
||||
import "flatpickr/dist/flatpickr.min.css";
|
||||
|
||||
class PbgTaskAssignments {
|
||||
init() {
|
||||
this.initTablePbgTaskAssignments();
|
||||
this.handleUpdateData();
|
||||
this.initDatePicker();
|
||||
}
|
||||
|
||||
initDatePicker() {
|
||||
let element = document.getElementById("datepicker_due_date");
|
||||
flatpickr(element, {
|
||||
dateFormat: "Y-m-d",
|
||||
minDate: new Date(),
|
||||
});
|
||||
}
|
||||
|
||||
initTablePbgTaskAssignments() {
|
||||
@@ -62,6 +74,65 @@ class PbgTaskAssignments {
|
||||
},
|
||||
}).render(tableContainer);
|
||||
}
|
||||
|
||||
handleUpdateData() {
|
||||
const button = document.getElementById("btnUpdatePbgTask");
|
||||
const form = document.getElementById("formUpdatePbgTask");
|
||||
const toastNotification = document.getElementById("toastNotification");
|
||||
const toast = new bootstrap.Toast(toastNotification);
|
||||
button.addEventListener("click", function (event) {
|
||||
event.preventDefault();
|
||||
let submitButton = this;
|
||||
let spinner = document.getElementById("spinner");
|
||||
submitButton.disabled = true;
|
||||
spinner.classList.remove("d-none");
|
||||
|
||||
const formData = new FormData(form);
|
||||
const formObject = {};
|
||||
formData.forEach((value, key) => {
|
||||
formObject[key] = value;
|
||||
});
|
||||
fetch(form.action, {
|
||||
method: "PUT", // Ensure your Laravel route is set to accept PUT requests
|
||||
body: JSON.stringify(formObject), // Convert form data to JSON
|
||||
credentials: "include",
|
||||
headers: {
|
||||
Authorization: `Bearer ${document
|
||||
.querySelector('meta[name="api-token"]')
|
||||
.getAttribute("content")}`,
|
||||
"Content-Type": "application/json",
|
||||
"X-CSRF-TOKEN": document.querySelector(
|
||||
'meta[name="csrf-token"]'
|
||||
).content, // For Laravel security
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
if (!response.ok) {
|
||||
return response.json().then((err) => {
|
||||
throw new Error(
|
||||
err.message || "Something went wrong"
|
||||
);
|
||||
});
|
||||
}
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
document.getElementById("toast-message").innerText =
|
||||
data.message;
|
||||
toast.show();
|
||||
submitButton.disabled = false;
|
||||
spinner.classList.add("d-none");
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Error updating task:", error);
|
||||
document.getElementById("toast-message").innerText =
|
||||
error.message;
|
||||
toast.show();
|
||||
submitButton.disabled = false;
|
||||
spinner.classList.add("d-none");
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function (e) {
|
||||
|
||||
@@ -7,69 +7,93 @@
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Data', 'subtitle' => 'PBG'])
|
||||
|
||||
<x-toast-notification />
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<dt>Name</dt>
|
||||
<dd>{{$data->name}}</dd>
|
||||
<form action="{{ route('api.pbg-task.update', ['task_uuid' => $data->uuid]) }}" id="formUpdatePbgTask">
|
||||
@csrf
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="name" class="form-label">Name</label>
|
||||
<input type="text" class="form-control" id="name" name="name" value="{{$data->name}}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="owner_name" class="form-label">Owner Name</label>
|
||||
<input type="text" class="form-control" id="owner_name" name="owner_name" value="{{$data->owner_name}}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="application_type" class="form-label">Application Type Name</label>
|
||||
<select name="application_type" class="form-select">
|
||||
@foreach($applicationTypes as $key => $value)
|
||||
<option value="{{ $key }}"
|
||||
{{ (old('application_type', $data->application_type ?? '') == $key) ? 'selected' : '' }}>
|
||||
{{ $value }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="condition" class="form-label">Condition</label>
|
||||
<input type="text" class="form-control" id="condition" name="condition" value="{{$data->condition}}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="registration_number" class="form-label">Registration Number</label>
|
||||
<input type="text" class="form-control" id="registration_number" name="registration_number" value="{{$data->registration_number}}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="document_number" class="form-label">Document Number</label>
|
||||
<input type="text" class="form-control" id="document_number" name="document_number" value="{{$data->document_number}}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="status" class="form-label">Status Name</label>
|
||||
<select name="status" class="form-select">
|
||||
@foreach($statusOptions as $key => $value)
|
||||
<option value="{{ $key }}" {{ old('status') == $key ? 'selected' : '' }}>
|
||||
{{ $value }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<dt>Owner Name</dt>
|
||||
<dd>{{$data->owner_name}}</dd>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<dt>Aplication Type Name</dt>
|
||||
<dd>{{$data->application_type_name}}</dd>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<dt>Condition</dt>
|
||||
<dd>{{$data->condition}}</dd>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<dt>Registration Number</dt>
|
||||
<dd>{{$data->registration_number}}</dd>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<dt>Document Number</dt>
|
||||
<dd>{{$data->document_number}}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Status Name</dt>
|
||||
<dd>{{$data->status_name}}</dd>
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<label for="address" class="form-label">Address</label>
|
||||
<input type="text" class="form-control" id="address" name="address" value="{{$data->address}}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="slf_status_name" class="form-label">SLF Status Name</label>
|
||||
<input type="text" class="form-control" id="slf_status_name" name="slf_status_name" value="{{$data->slf_status_name}}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="function_type" class="form-label">Function Type</label>
|
||||
<input type="text" class="form-control" id="function_type" name="function_type" value="{{$data->function_type}}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="consultation_type" class="form-label">Consultation Type</label>
|
||||
<input type="text" class="form-control" id="consultation_type" name="consultation_type" value="{{$data->consultation_type}}">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="due_date" class="form-label">Due Date</label>
|
||||
<input type="text" class="form-control" id="datepicker_due_date" name="due_date" value="{{$data->due_date}}">
|
||||
</div>
|
||||
<div>
|
||||
<label for="task_created_at" class="form-label">Task Created At</label>
|
||||
<input type="datetime-local" class="form-control" id="task_created_at" name="task_created_at" value="{{$data->task_created_at}}" disabled>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="mb-3">
|
||||
<dt>Address</dt>
|
||||
<dd>{{$data->address}}</dd>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<dt>SLF Status Name</dt>
|
||||
<dd>{{$data->slf_status_name}}</dd>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<dt>Function Type</dt>
|
||||
<dd>{{$data->function_type}}</dd>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<dt>Consultation Type</dt>
|
||||
<dd>{{$data->consultation_type}}</dd>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<dt>Due Date</dt>
|
||||
<dd>{{$data->due_date}}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Task Created At</dt>
|
||||
<dd>{{$data->task_created_at}}</dd>
|
||||
<div class="row">
|
||||
<div class="d-flex justify-content-end">
|
||||
<button type="button" id="btnUpdatePbgTask" class="btn btn-warning">
|
||||
<span id="spinner" class="spinner-border spinner-border-sm me-1 d-none" role="status" aria-hidden="true"></span>
|
||||
Update
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user