gitea/amati
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Integrasi FE and BE for user-management

Browse Source
This commit is contained in:
percyfikri 2024-09-13 10:34:20 +07:00
parent 5bebf337db
commit 2b055a237f
4 changed files with 148 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
apps/frontend/src/modules/usersManagement/modals/UserFormModal.tsx
View File

@ -62,6 +62,11 @@ export default function UserFormModal() {
photoProfileUrl: "",
password: "",
roles: [] as string[],
companyName: "",
position: "",
workExperience: "",
address: "",
phoneNumber: "",
},
});
@ -81,6 +86,11 @@ export default function UserFormModal() {
username: data.username,
password: "",
roles: data.roles.map((v) => v.id), //only extract the id
companyName: data.companyName ?? "",
position: data.position ?? "",
workExperience: data.workExperience ?? "",
address: data.address ?? "",
phoneNumber: data.phoneNumber ?? "",
});
form.setErrors({});
@ -127,9 +137,14 @@ export default function UserFormModal() {
email: values.email,
name: values.name,
password: values.password,
roles: JSON.stringify(values.roles),
roles: values.roles,
isEnabled: "true",
username: values.username,
companyName: values.email,
position: values.position,
workExperience: values.workExperience,
address: values.address,
phoneNumber: values.phoneNumber,
},
});
} else {
@ -140,9 +155,14 @@ export default function UserFormModal() {
email: values.email,
name: values.name,
password: values.password,
roles: JSON.stringify(values.roles),
roles: values.roles,
isEnabled: "true",
username: values.username,
companyName: values.companyName,
position: values.position,
workExperience: values.workExperience,
address: values.address,
phoneNumber: values.phoneNumber,
},
});
}
@ -192,7 +212,7 @@ export default function UserFormModal() {
</Center>
</Stack>
{createInputComponents({
{/* {createInputComponents({
disableAll: mutation.isPending,
readonlyAll: formType === "detail",
inputs: [
@ -237,6 +257,79 @@ export default function UserFormModal() {
error: form.errors.roles,
},
],
})} */}
{createInputComponents({
disableAll: mutation.isPending,
readonlyAll: formType === "detail",
inputs: [
{
type: "text",
readOnly: true,
variant: "filled",
...form.getInputProps("id"),
hidden: !form.values.id,
},
{
type: "text",
label: "Name",
...form.getInputProps("name"),
},
{
type: "text",
label: "Position",
...form.getInputProps("position"),
},
{
type: "text",
label: "Work Experience",
...form.getInputProps("workExperience"),
},
{
type: "text",
label: "Email",
...form.getInputProps("email"),
},
{
type: "text",
label: "Company Name",
...form.getInputProps("companyName"),
},
{
type: "text",
label: "Address",
...form.getInputProps("address"),
},
{
type: "text",
label: "Phone Number",
...form.getInputProps("phoneNumber"),
},
{
type: "multi-select",
label: "Roles",
value: form.values.roles,
onChange: (values) =>
form.setFieldValue("roles", values),
data: rolesQuery.data?.map((role) => ({
value: role.id,
label: role.name,
})),
error: form.errors.roles,
},
{
type: "text",
label: "Username",
...form.getInputProps("username"),
},
{
type: "password",
label: "Password",
hidden: formType !== "create",
...form.getInputProps("password"),
},
],
})}
{/* Buttons */}

10
apps/frontend/src/modules/usersManagement/queries/userQueries.ts
View File

@ -34,26 +34,26 @@ export const getUserByIdQueryOptions = (userId: string | undefined) =>
});
export const createUser = async (
form: InferRequestType<typeof client.users.$post>["form"]
json: InferRequestType<typeof client.users.$post>["json"]
) => {
return await fetchRPC(
client.users.$post({
form,
json,
})
);
};
export const updateUser = async (
form: InferRequestType<(typeof client.users)[":id"]["$patch"]>["form"] & {
json: InferRequestType<(typeof client.users)[":id"]["$patch"]>["json"] & {
id: string;
}
) => {
return await fetchRPC(
client.users[":id"].$patch({
param: {
id: form.id,
id: json.id,
},
form,
json,
})
);
};

59
apps/frontend/src/routes/_dashboardLayout/users/index.lazy.tsx
View File

@ -17,6 +17,42 @@ type DataType = ExtractQueryDataType<typeof userQueryOptions>;
const columnHelper = createColumnHelper<DataType>();
// Fungsi untuk mengelompokkan pengguna berdasarkan perusahaan
const groupUsersByCompany = (data: DataType[]) => {
const companyMap = new Map<string, {
companyName: string;
users: { id: string; name: string; username: string; email: string; role: string }[];
}>();
data.forEach((item) => {
const companyName = item.company || "Unknown Company";
if (!companyMap.has(companyName)) {
companyMap.set(companyName, {
companyName,
users: [{
id: item.id,
name: item.name,
username: item.username,
email: item.email ?? "",
role: item.roles.join(", ") // assuming roles is an array
}],
});
} else {
const existingCompany = companyMap.get(companyName);
existingCompany?.users.push({
id: item.id,
name: item.name,
username: item.username,
email: item.email ?? "",
role: item.roles.join(", "), // assuming roles is an array
});
}
});
return Array.from(companyMap.values());
};
export default function UsersPage() {
return (
<PageTemplate
@ -46,20 +82,17 @@ export default function UsersPage() {
header: "Company",
cell: (props) => props.row.original.company,
}),
columnHelper.display({
header: "role",
cell: (props) => props.row.original.roles,
}),
// columnHelper.display({
// header: "Status",
// cell: (props) =>
// props.row.original.isEnabled ? (
// <Badge color="green">Active</Badge>
// ) : (
// <Badge color="red">Inactive</Badge>
// ),
// }),
columnHelper.display({
header: "Roles",
cell: (props) => {
const roles = props.row.original.roles; // Ambil array roles dari data
if (roles && roles.length > 0) {
return roles.map(role => role.name).join(", ");
}
return <div>No roles assigned</div>; // Jika tidak ada roles
},
}),
columnHelper.display({
header: "Actions",

2
apps/frontend/vite.config.ts
View File

@ -8,7 +8,7 @@ export default defineConfig({
plugins: [react(), TanStackRouterVite()],
resolve: {
alias: {
"@": path.resolve(__dirname,"/src"),
"@": path.resolve(__dirname,"src"),
},
},
});