Skip to content

Commit

Permalink
optimize: move column display component back to column def file
Browse files Browse the repository at this point in the history
  • Loading branch information
@BigSillyTiger
BigSillyTiger committed Apr 17, 2024
1 parent eb4fc98 commit 8a7dd53
Show file tree
Hide file tree
Showing 7 changed files with 102 additions and 175 deletions.
134 changes: 3 additions & 131 deletions src/components/table/defaultTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,24 +13,11 @@ import type { OnChangeFn, SortingState, Row } from "@tanstack/react-table";
import Pagination from "./pagination";
import SearchBar from "./searchBar";
import { sortingIcon } from "./config";
import {
MenuBtn,
OrderStatusBtn,
DetailBtn,
ExpandBtn,
PSDelBtn,
PSDisplayBtn,
WLStatusBtn,
PSStatusBtn,
} from "./tableBtn";
import { MenuBtn, PSDelBtn } from "./tableBtn";
import HeaderFilter from "./headerFilter";
import { CTable, CTBody, CTHead, CTh } from ".";
import { TwlTableRow } from "@/configs/schema/workSchema";
import TimeBtn from "@/pageComponents/TimeBtn";
import { TmenuOptions } from "@/configs/types";
import { defaultMenuOptions } from "@/configs/utils/modal";
import { Torder } from "@/configs/schema/orderSchema";
import { Tclient } from "@/configs/schema/clientSchema";
import { Tpayslip } from "@/configs/schema/payslipSchema";

type Tprops<T> = {
Expand Down Expand Up @@ -137,49 +124,7 @@ const PTable = <T extends object>({
<Fragment key={row.id}>
<tr className={i % 2 === 0 ? undefined : "bg-gray-100"}>
{row.getVisibleCells().map((cell) => {
/* nevigate to client details page only*/
if (cell.column.id === "ClientDetails") {
return (
<td
key={cell.id}
className="whitespace-nowrap px-2 py-2 text-sm font-medium text-gray-900"
>
<DetailBtn
data={row.original as Tclient}
/>
</td>
);
} else if (cell.column.id === "orderID") {
/* expand btn is with this */
return (
<td
key={cell.id}
className="whitespace-nowrap px-2 py-2 text-sm font-medium text-gray-900 flex items-center justify-center"
>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
&nbsp;
<ExpandBtn row={row} />
</td>
);
} else if (cell.column.id === "UID") {
/* expand btn is with this */
return (
<td
key={cell.id}
className="whitespace-nowrap px-2 py-2 text-sm font-medium text-gray-900 flex items-center justify-center"
>
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
&nbsp;
<ExpandBtn row={row} />
</td>
);
} else if (cell.column.id === "Menu" && setData) {
if (cell.column.id === "Menu" && setData) {
return (
<td
key={cell.id}
Expand Down Expand Up @@ -211,84 +156,11 @@ const PTable = <T extends object>({
/>
</td>
);
} else if (cell.column.id === "psDisplay") {
return (
<td
key={cell.id}
className="whitespace-nowrap px-2 py-2 text-sm font-medium text-gray-900 text-center z-0"
>
<PSDisplayBtn
payslip={row.original as Tpayslip}
/>
</td>
);
} else if (cell.column.id === "orderStatus") {
return (
<td
key={cell.id}
className="whitespace-nowrap px-2 py-2 text-sm font-medium text-gray-900 text-center z-0"
>
<OrderStatusBtn
mLabel={flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
data={row.original as Torder}
/>
</td>
);
} else if (cell.column.id === "wlStatus") {
return (
<td
key={cell.id}
className="whitespace-nowrap px-2 py-2 text-sm font-medium text-gray-900 text-center z-0"
>
<WLStatusBtn
mLabel={flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
data={row.original as TwlTableRow}
/>
</td>
);
} else if (cell.column.id === "psStatus") {
return (
<td
key={cell.id}
className="whitespace-nowrap px-2 py-2 text-sm font-medium text-gray-900 text-center z-0"
>
<PSStatusBtn
mLabel={flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
data={row.original as Tpayslip}
/>
</td>
);
} else if (
cell.column.id === "startTime" ||
cell.column.id === "endTime" ||
cell.column.id === "breakTime" ||
cell.column.id === "workTime"
) {
return (
<td
key={cell.id}
className="whitespace-nowrap px-2 py-2 text-sm font-medium text-gray-900 text-center z-0"
>
<TimeBtn
type={cell.column.id}
data={row.original as TwlTableRow}
/>
</td>
);
}
return (
<td
key={cell.id}
className="whitespace-nowrap px-2 py-2 text-sm font-medium text-gray-900"
className="whitespace-nowrap px-2 py-2 text-sm font-medium text-gray-900 text-center z-0"
>
{flexRender(
cell.column.columnDef.cell,
Expand Down
20 changes: 18 additions & 2 deletions src/configs/columnDefs/defClientOrder.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { minusAB } from "@/lib/calculations";
import Badge from "@/components/Badge";
import { TstatusColor } from "../types";
import { dateFormat } from "@/lib/time";
import { ExpandBtn, OrderStatusBtn } from "@/components/table/tableBtn";

const clientOrderColumns: ColumnDef<Torder>[] = [
{
Expand All @@ -16,7 +17,13 @@ const clientOrderColumns: ColumnDef<Torder>[] = [
header: i18n.t("label.idOrder"),
accessorKey: "oid",
cell: (info: CellContext<Torder, string>) => (
<span>{info.getValue()}</span>
<div className="flex flex-row justify-center">
<span className="whitespace-nowrap px-2 py-2 text-sm font-medium text-gray-900 flex items-center justify-center">
{info.getValue<string>()}
</span>
&nbsp;
<ExpandBtn row={info.row} />
</div>
),
},
{
Expand All @@ -41,7 +48,16 @@ const clientOrderColumns: ColumnDef<Torder>[] = [
header: i18n.t("label.status"),
accessorKey: "status",
cell: (info: CellContext<Torder, string>) => {
return <Badge value={info.getValue() as TstatusColor} />;
return (
<OrderStatusBtn
mLabel={
<Badge
value={info.getValue() as TstatusColor}
/>
}
data={info.row.original as Torder}
/>
);
},
},
{
Expand Down
5 changes: 3 additions & 2 deletions src/configs/columnDefs/defClients.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { ColumnDef, CellContext } from "@tanstack/react-table";
import i18n from "@/configs/i18n";
import { Tclient } from "@/configs/schema/clientSchema";
import { Atel, Amail } from "@/components/aLinks";
import { DetailBtn } from "@/components/table/tableBtn";

/**
* @description
Expand All @@ -11,8 +12,8 @@ const clientColumns: ColumnDef<Tclient>[] = [
{
id: "ClientDetails",
header: i18n.t("label.details"), // Details
cell: () => {
<></>;
cell: (info: CellContext<Tclient, unknown>) => {
return <DetailBtn data={info.row.original as Tclient} />;
},
},
{
Expand Down
20 changes: 18 additions & 2 deletions src/configs/columnDefs/defOrders.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { dateFormat } from "@/lib/time";
import { Atel } from "@/components/aLinks";
import Badge from "@/components/Badge";
import { TstatusColor } from "../types";
import { ExpandBtn, OrderStatusBtn } from "@/components/table/tableBtn";

const orderColumns: ColumnDef<Torder>[] = [
{
Expand All @@ -23,7 +24,13 @@ const orderColumns: ColumnDef<Torder>[] = [
header: i18n.t("label.idOrder"),
accessorKey: "oid",
cell: (info: CellContext<Torder, unknown>) => (
<span>{info.getValue<string>()}</span>
<>
<span className="whitespace-nowrap px-2 py-2 text-sm font-medium text-gray-900 flex items-center justify-center">
{info.getValue<string>()}
</span>
&nbsp;
<ExpandBtn row={info.row} />
</>
),
},
{
Expand Down Expand Up @@ -81,7 +88,16 @@ const orderColumns: ColumnDef<Torder>[] = [
header: i18n.t("label.status"),
accessorKey: "status",
cell: (info: CellContext<Torder, unknown>) => {
return <Badge value={info.getValue() as TstatusColor} />;
return (
<OrderStatusBtn
mLabel={
<Badge
value={info.getValue() as TstatusColor}
/>
}
data={info.row.original as Torder}
/>
);
},
},
],
Expand Down
14 changes: 10 additions & 4 deletions src/configs/columnDefs/defPayslip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,16 @@ import { ColumnDef, CellContext } from "@tanstack/react-table";
import { Tpayslip } from "../schema/payslipSchema";
import Badge from "@/components/Badge";
import { TstatusColor } from "../types";
import { PSDisplayBtn, PSStatusBtn } from "@/components/table/tableBtn";

const payslipColumns: ColumnDef<Tpayslip>[] = [
{
id: "psDisplay",
header: i18n.t("label.checkPDF"),
accessorKey: "psid",
cell: () => <></>,
cell: (info: CellContext<Tpayslip, unknown>) => {
return <PSDisplayBtn payslip={info.row.original as Tpayslip} />;
},
},
{
header: i18n.t("label.id"),
Expand Down Expand Up @@ -43,9 +46,12 @@ const payslipColumns: ColumnDef<Tpayslip>[] = [
id: "psStatus",
header: i18n.t("label.status"),
accessorKey: "status",
cell: (info: CellContext<Tpayslip, unknown>) => {
return <Badge value={info.getValue() as TstatusColor} />;
},
cell: (info: CellContext<Tpayslip, unknown>) => (
<PSStatusBtn
mLabel={<Badge value={info.getValue() as TstatusColor} />}
data={info.row.original as Tpayslip}
/>
),
},
{
header: i18n.t("label.thisPay"),
Expand Down
38 changes: 22 additions & 16 deletions src/configs/columnDefs/defStaff.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
import { ColumnDef, CellContext } from "@tanstack/react-table";
import i18n from "@/configs/i18n";
import { Tstaff } from "../schema/staffSchema";
import { TstaffWPayslip } from "../schema/staffSchema";
import { colorWithStaffUid } from "../utils/color";
import { TstaffRole } from "@/configs/types";
import { capFirstLetter } from "@/lib/literals";
import { Atel, Amail } from "@/components/aLinks";
import { staffColorMap } from "../utils/color";
import { ExpandBtn } from "@/components/table/tableBtn";

/**
* @description
* @param header - id
*/
const staffColumns: ColumnDef<Tstaff>[] = [
const staffColumns: ColumnDef<TstaffWPayslip>[] = [
/* {
header: i18n.t("label.details"), // Details
cell: () => {
Expand All @@ -21,56 +22,61 @@ const staffColumns: ColumnDef<Tstaff>[] = [
{
id: "UID",
header: i18n.t("label.uid"),
accessorFn: (data: Tstaff) => data.uid,
cell: (info: CellContext<Tstaff, unknown>) => {
accessorFn: (data: TstaffWPayslip) => data.uid,
cell: (info: CellContext<TstaffWPayslip, unknown>) => {
return (
<span
className={`${colorWithStaffUid(info.getValue<string>())}`}
>
{info.getValue<string>()}
</span>
<>
<span
className={`${colorWithStaffUid(info.getValue<string>())}`}
>
{info.getValue<string>()}
</span>
&nbsp;
<ExpandBtn row={info.row} />
</>
);
},
},
{
header: i18n.t("label.name"),
accessorFn: (data: Tstaff) => data.first_name + " " + data.last_name,
cell: (info: CellContext<Tstaff, unknown>) => (
accessorFn: (data: TstaffWPayslip) =>
data.first_name + " " + data.last_name,
cell: (info: CellContext<TstaffWPayslip, unknown>) => (
<span className="">{info.getValue<string>()}</span>
),
},
{
header: i18n.t("label.phone1"),
accessorKey: "phone",
cell: (info: CellContext<Tstaff, unknown>) => (
cell: (info: CellContext<TstaffWPayslip, unknown>) => (
<Atel href={info.getValue<string>()} />
),
},
{
header: i18n.t("label.email1"),
accessorKey: "email",
cell: (info: CellContext<Tstaff, unknown>) => (
cell: (info: CellContext<TstaffWPayslip, unknown>) => (
<Amail href={info.getValue<string>()} />
),
},
{
header: i18n.t("label.address"),
accessorFn: (data: Tstaff) =>
accessorFn: (data: TstaffWPayslip) =>
data.address +
", " +
data.suburb +
", " +
data.city +
", " +
data.postcode,
cell: (info: CellContext<Tstaff, unknown>) => (
cell: (info: CellContext<TstaffWPayslip, unknown>) => (
<span>{info.getValue<string>()}</span>
),
},
{
header: i18n.t("label.role"),
accessorKey: "role",
cell: (info: CellContext<Tstaff, unknown>) => {
cell: (info: CellContext<TstaffWPayslip, unknown>) => {
const style = staffColorMap[info.getValue<string>() as TstaffRole];
return (
<span className={`${style}`}>
Expand Down
Loading

0 comments on commit 8a7dd53

Please sign in to comment.