tbfajri/aso
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

fix dashboard table

Browse Source
This commit is contained in:
Muhammad Fajar
2022-12-07 11:15:33 +07:00
parent f20cb5b44c
commit 5840a311e0
11 changed files with 236 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Modules/Client/Http/Controllers/Api/DashboardController.php
View File

@@ -17,7 +17,7 @@ class DashboardController extends Controller
public function index(Request $request)
{
$user = Auth::user();
$data = DashboardResources::make($user->managedCorporates()->where('active', 1)->with('currentPolicy', 'employees')->first());
$data = DashboardResources::make($user->managedCorporates()->where('active', 1)->with('currentPolicy')->first());
return response()->json($data);
}

120
Modules/Client/Http/Controllers/Api/DivisionController.php Executable file
View File

@@ -0,0 +1,120 @@
<?php
namespace Modules\Client\Http\Controllers\Api;
use App\Models\CorporateDivision;
use Illuminate\Contracts\Support\Renderable;
use Illuminate\Http\Request;
use Illuminate\Routing\Controller;
use Illuminate\Support\Facades\Auth;
use Illuminate\Validation\Rule;
class DivisionController extends Controller
{
/**
* Display a listing of the resource.
* @return Renderable
*/
public function index(Request $request)
{
$user = Auth::user();
$corporate = $user->managedCorporates()->where('active', 1)->first();
$benefits = CorporateDivision::query()
->where('corporate_id', $corporate->id)
->get(['id', 'name']);
return $benefits;
}
/**
* Show the form for creating a new resource.
* @return Renderable
*/
public function create()
{
return view('internal::create');
}
/**
* Store a newly created resource in storage.
* @param Request $request
* @return Renderable
*/
public function store(Request $request, $corporate_id)
{
$request->validate([
'code' => [
'required',
],
'name' => 'required'
]);
$newCorporatePlan = CorporateDivision::create([
'corporate_id' => $corporate_id,
'code' => $request->code,
'name' => $request->name,
]);
return $newCorporatePlan;
}
/**
* Show the specified resource.
* @param int $id
* @return Renderable
*/
public function show($id)
{
return view('internal::show');
}
/**
* Show the form for editing the specified resource.
* @param int $id
* @return Renderable
*/
public function edit($corporate_id, $id)
{
$corporatePlan = CorporateDivision::findOrFail($id);
return $corporatePlan;
}
/**
* Update the specified resource in storage.
* @param Request $request
* @param int $id
* @return Renderable
*/
public function update(Request $request, $corporate_id, $id)
{
$corporatePlan = CorporateDivision::findOrFail($id);
$request->validate([
'code' => [
'required',
Rule::unique('corporate_plans')->where('corporate_id', $corporate_id)->ignore($corporatePlan->id)
],
'name' => 'required'
]);
$corporatePlan->fill([
'code' => $request->code,
'name' => $request->name,
'active' => $request->active,
])->save();
return $corporatePlan;
}
/**
* Remove the specified resource from storage.
* @param int $id
* @return Renderable
*/
public function destroy($id)
{
//
}
}

2
Modules/Client/Routes/api.php
View File

@@ -3,6 +3,7 @@
use Modules\Client\Http\Controllers\Api\AuthController;
use Modules\Client\Http\Controllers\Api\CorporateController;
use Modules\Client\Http\Controllers\Api\DashboardController;
use Modules\Client\Http\Controllers\Api\DivisionController;
use Modules\Client\Http\Controllers\Api\MemberController;
use Modules\Client\Http\Controllers\Api\UserController;
@@ -32,6 +33,7 @@ Route::prefix('client')->group(function () {
Route::get('dashboard', [DashboardController::class, 'index']);
Route::get('corporate', [CorporateController::class, 'index']);
Route::get('corporate/{corporate_id}', [CorporateController::class, 'show']);
Route::get('division', [DivisionController::class, 'index']);
Route::get('members', [MemberController::class, 'index']);
});
});

1
Modules/Client/Transformers/DashboardResources.php
View File

@@ -2,6 +2,7 @@
namespace Modules\Client\Transformers;
use App\Helpers\Helper;
use Illuminate\Http\Resources\Json\JsonResource;
class DashboardResources extends JsonResource

25
Modules/Client/Transformers/MemberResources.php Normal file
View File

@@ -0,0 +1,25 @@
<?php
namespace Modules\Client\Transformers;
use Illuminate\Http\Resources\Json\JsonResource;
class MemberResources extends JsonResource
{
/**
* Transform the resource into an array.
*
* @param \Illuminate\Http\Request $request
* @return array|\Illuminate\Contracts\Support\Arrayable|\JsonSerializable
*/
public function toArray($request)
{
return [
'memberId' => $this->member_id,
'full_name' => $this->full_name,
'division' => $this->division->name,
'employeeLimit' => '',
'status' => $this->active
];
}
}

8
app/Models/Corporate.php
View File

@@ -44,10 +44,10 @@ class Corporate extends Model
public function currentPolicy()
{
return $this->hasOne(CorporatePolicy::class)
// ->where('start', '<=', now())
// ->where('end', '>=', now())
->where('active', true)
->latestOfMany();
// ->where('start', '<=', now())
// ->where('end', '>=', now())
->where('active', true)
->latestOfMany();
}
public function corporatePlans()

5
app/Models/CorporateEmployee.php
View File

@@ -19,4 +19,9 @@ class CorporateEmployee extends Model
'nik',
'status'
];
public function division()
{
return $this->belongsTo(CorporateDivision::class, 'division_id');
}
}

10
app/Models/Member.php
View File

@@ -182,4 +182,14 @@ class Member extends Model
// });
});
}
// public function corporateEmployee()
// {
// return $this->hasOne(CorporateEmployee::class, 'member_id');
// }
public function division()
{
return $this->hasOneThrough(CorporateDivision::class, CorporateEmployee::class, 'member_id', 'id', 'id', 'division_id');
}
}

5
frontend/client-portal/src/pages/Dashboard/Dashboard.tsx
View File

@@ -59,8 +59,9 @@ export default function Dashboard() {
const { user } = useAuth();
// @ts-ignore
const [corporateValue, setCorporateValue] = useState(`1`);
const [corporateValue, setCorporateValue] = useState(`${user.corporate.id}`);
const [corporateData, setCorporateData] = useState([]);
const [tableData, setTableData] = useState([]);
const [policyData, setPolicyData] = useState<CardBalanceProps>({
myLimit: {
balance: 0,
@@ -82,6 +83,8 @@ export default function Dashboard() {
const corporates = await axios.get('corporate');
const dashboard = await axios.get('dashboard');
console.log(dashboard);
setCorporateData(corporates.data);
setPolicyData(dashboard.data.policy);
})();

2
frontend/client-portal/src/sections/dashboard/CardBalance.tsx
View File

@@ -127,7 +127,7 @@ export default function CardBalance(props: CardBalanceProps) {
</Typography>
</Typography>
<Typography sx={{ typography: 'caption', color: '#637381' }}>
{lockLimit ? lockLimit.balance : 0}
{lockLimit ? lockLimit.balance : 0} / {myLimit ? myLimit.total : 0}
</Typography>
</Stack>

97
frontend/client-portal/src/sections/dashboard/TableList.tsx
View File

@@ -14,12 +14,16 @@ import {
IconButton,
Card,
Grid,
Autocomplete,
FormControl,
InputLabel,
Select,
MenuItem,
SelectChangeEvent,
} from '@mui/material';
import { visuallyHidden } from '@mui/utils';
import { Add as AddIcon } from '@mui/icons-material';
/* ---------------------------------- axios --------------------------------- */
import axios from 'axios';
import axios from '../../utils/axios';
/* ---------------------------------- react --------------------------------- */
import { useEffect, useRef, useState } from 'react';
/* -------------------------------- component ------------------------------- */
@@ -63,6 +67,11 @@ interface EnhancedTableProps {
order: Order;
orderBy: string;
}
type DivisionDataProps = {
id: number;
name: string;
};
/* -------------------------------------------------------------------------- */
/* -------------------------- enchanced table head -------------------------- */
@@ -140,13 +149,12 @@ function EnhancedTableHead({ order, orderBy, onRequestSort }: EnhancedTableProps
}
/* -------------------------------------------------------------------------- */
export default function TableList() {
export default function TableList(props: any) {
const [order, setOrder] = useState<Order>('asc');
const [orderBy, setOrderBy] = useState('name');
const [customSearchParams, setCustomSearchParams] = useSearchParams();
const [searchParams, setSearchParams] = useSearchParams();
const [isLoading, setIsLoading] = useState(true);
const [dataTable, setDataTable] = useState([]);
const [dataDivision, setDataDivision] = useState([]);
const [page, setPage] = useState(0);
const [rowsPerPage, setRowsPerPage] = useState(10);
const [appliedParams, setAppliedParams] = useState({});
@@ -167,7 +175,7 @@ export default function TableList() {
setOrder(isAsc ? 'desc' : 'asc');
setOrderBy(property);
const params = Object.fromEntries([
...customSearchParams.entries(),
...searchParams.entries(),
['order', isAsc ? 'desc' : 'asc'],
['orderBy', property],
]);
@@ -177,9 +185,24 @@ export default function TableList() {
/* ----------------------------- Field Container ---------------------------- */
/* ----------------------------- division field ----------------------------- */
const optionDivisions = ['All'];
const [divisionValue, setDivisionValue] = useState('all');
const [divisionData, setDivisionData] = useState([]);
const [value, setValue] = useState<string | null>(optionDivisions[0]);
const handleDivisionChange = (event: SelectChangeEvent) => {
setDivisionValue(event.target.value as string);
if (event.target.value === 'all') {
searchParams.delete('division');
const params = Object.fromEntries([...searchParams.entries()]);
setAppliedParams(params);
} else {
const params = Object.fromEntries([
...searchParams.entries(),
['division', event.target.value as string],
]);
setAppliedParams(params);
}
};
/* -------------------------------------------------------------------------- */
/* ------------------------------ Search field ------------------------------ */
@@ -188,7 +211,7 @@ export default function TableList() {
const handleSearchSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
setIsLoading(true);
const params = Object.fromEntries([...customSearchParams.entries(), ['search', searchText]]);
const params = Object.fromEntries([...searchParams.entries(), ['search', searchText]]);
await new Promise((resolve) => setTimeout(resolve, 500));
setAppliedParams(params);
setIsLoading(false);
@@ -223,12 +246,12 @@ export default function TableList() {
newPage: number
) => {
setIsLoading(true);
const params = Object.fromEntries([...customSearchParams.entries(), ['page', newPage + 1]]);
const params = Object.fromEntries([...searchParams.entries(), ['page', newPage + 1]]);
setPage(newPage);
await new Promise((resolve) => setTimeout(resolve, 500));
setAppliedParams(params);
setIsLoading(false);
// setCustomSearchParams.set('page', newPage + 1);
// setSearchParams.set('page', newPage + 1);
};
/* -------------------------------------------------------------------------- */
@@ -237,7 +260,7 @@ export default function TableList() {
setIsLoading(true);
setPage(0);
const params = Object.fromEntries([
...customSearchParams.entries(),
...searchParams.entries(),
['per_page', parseInt(event.target.value, 10)],
]);
setRowsPerPage(parseInt(event.target.value, 10));
@@ -252,29 +275,27 @@ export default function TableList() {
(async () => {
setIsLoading(true);
const division = await axios.get('/division');
setDivisionData(division.data);
const params =
Object.keys(appliedParams).length !== 0
? appliedParams
: Object.fromEntries([
...customSearchParams.entries(),
['order', order],
['orderBy', orderBy],
]);
: Object.fromEntries([...searchParams.entries(), ['order', order], ['orderBy', orderBy]]);
const response = await axios.get('http://localhost:8001/api/dashboard', {
const response = await axios.get('/dashboard', {
params: params,
});
const division = await axios.get('http://localhost:8001/api/division');
setDataDivision(division.data);
console.log(response);
setCustomSearchParams(params);
setDataTable(response.data.data);
setPaginationTable(response.data.meta);
setRowsPerPage(response.data.meta.per_page);
setSearchParams(params);
// setDataTable(response.data.data);
// setPaginationTable(response.data.meta);
// setRowsPerPage(response.data.meta.per_page);
setIsLoading(false);
})();
}, [appliedParams, customSearchParams, order, orderBy, setCustomSearchParams]);
}, [appliedParams, searchParams, order, orderBy, setSearchParams]);
return (
<Card>
@@ -283,15 +304,23 @@ export default function TableList() {
<Grid item xs={12} paddingX="24px" paddingY="20px">
<Grid container spacing={2}>
<Grid item xs={12} lg={3} xl={2}>
<Autocomplete
disablePortal
options={optionDivisions}
value={value}
onChange={(event: any, newValue: string | null) => {
setValue(newValue);
}}
renderInput={(params) => <TextField {...params} label="Division" />}
/>
<FormControl fullWidth>
<InputLabel id="simple-division-select-lable">Division</InputLabel>
<Select
labelId="simple-division-select-lable"
id="division-select-lable"
value={divisionValue}
label="Division"
onChange={handleDivisionChange}
>
<MenuItem value="all">All</MenuItem>
{divisionData.map((row: DivisionDataProps, index) => (
<MenuItem key={index} value={row.id}>
{row.name}
</MenuItem>
))}
</Select>
</FormControl>
</Grid>
<Grid item xs={12} lg={5} xl={6}>
<form onSubmit={handleSearchSubmit}>