fix task assignment table on pbg task

This commit is contained in:
arifal
2025-03-07 01:03:22 +07:00
parent ffc08f26cc
commit 9516b6f575
8 changed files with 167 additions and 35 deletions

View File

@@ -0,0 +1,69 @@
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";
class PbgTaskAssignments {
init() {
this.initTablePbgTaskAssignments();
}
initTablePbgTaskAssignments() {
let tableContainer = document.getElementById(
"table-pbg-task-assignments"
);
let uuid = document.getElementById("uuid").value;
new Grid({
columns: [
"ID",
"Nama",
"Email",
"Nomor Telepon",
"Keahlian",
"Status",
],
search: {
server: {
url: (prev, keyword) => `${prev}?search=${keyword}`,
},
debounceTimeout: 1000,
},
pagination: {
limit: 15,
server: {
url: (prev, page) =>
`${prev}${prev.includes("?") ? "&" : "?"}page=${
page + 1
}`,
},
},
sort: true,
server: {
url: `${GlobalConfig.apiHost}/api/task-assignments/${uuid}`,
credentials: "include",
headers: {
Authorization: `Bearer ${document
.querySelector('meta[name="api-token"]')
.getAttribute("content")}`,
"Content-Type": "application/json",
},
then: (data) =>
data.data.map((item) => [
item.id,
item.name,
item.email,
item.phone_number,
item.expertise,
item.status_name,
]),
total: (data) => data.meta.total,
},
}).render(tableContainer);
}
}
document.addEventListener("DOMContentLoaded", function (e) {
new PbgTaskAssignments().init();
});

View File

@@ -1,6 +1,7 @@
@extends('layouts.vertical', ['subtitle' => 'Detail'])
@section('css')
@vite(['node_modules/gridjs/dist/theme/mermaid.min.css'])
@endsection
@section('content')
@@ -252,38 +253,8 @@
</div>
</div>
<div class="tab-pane" id="pbgTaskAssignments">
@if ($data->taskAssignments && $data->taskAssignments->isNotEmpty())
@foreach ($data->taskAssignments as $task_assignment)
<div class="border p-3 rounded shadow-sm col-md-4">
<div class="mb-3">
<dt>Nama</dt>
<dd>{{$task_assignment->name}}</dd>
</div>
<div class="mb-3">
<dt>Email</dt>
<dd>{{$task_assignment->email}}</dd>
</div>
<div class="mb-3">
<dt>Nomor Telepon</dt>
<dd>{{$task_assignment->phone_number}}</dd>
</div>
<div class="mb-3">
<dt>Keahlian</dt>
<dd>{{$task_assignment->expertise}}</dd>
</div>
<div class="mb-3">
<dt>Status</dt>
<dd>{{$task_assignment->status_name}}</dd>
</div>
</div>
@endforeach
@else
<div class="row">
<div class="col-md-12">
Data Not Available
</div>
</div>
@endif
<input type="hidden" id="uuid" value="{{ $data->uuid }}" />
<div id="table-pbg-task-assignments"></div>
</div>
</div>
</div>
@@ -294,4 +265,5 @@
@endsection
@section('scripts')
@vite(['resources/js/pbg-task/show.js'])
@endsection