Laux/Frontend-Internal-Developer-Platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

edited roles

Browse Source
This commit is contained in:
benzbarquilla
2026-03-03 11:57:33 +08:00
parent e47424771f
commit 6633744911
4 changed files with 34 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
frontend/src/app/users/[usersId]/page.jsx
View File

@@ -5,6 +5,7 @@ import editUserStyle from "./styles.module.css";
import Prompts from "@/app/components/prompts/Prompts"; import Prompts from "@/app/components/prompts/Prompts";
import { useState } from "react"; import { useState } from "react";
import TextField from "@/app/components/fields/textfield"; import TextField from "@/app/components/fields/textfield";
import SelectField from "@/app/components/select/SelectField";
const Page = () => { const Page = () => {
const sampleData = [ const sampleData = [
@@ -12,16 +13,16 @@ const Page = () => {
{ permission: "user.create" }, { permission: "user.create" },
{ permission: "user.list" }, { permission: "user.list" },
{ permission: "user.update" }, { permission: "user.update" },
// { permission: "robot.create" }, { permission: "robot.create" },
// { permission: "user.delete" }, { permission: "user.delete" },
// { permission: "robot.list" }, { permission: "robot.list" },
// { permission: "robot.delete" }, { permission: "robot.delete" },
// { permission: "project.delete" }, { permission: "project.delete" },
// { permission: "project.update" }, { permission: "project.update" },
// { permission: "service.create" }, { permission: "service.create" },
// { permission: "service.list" }, { permission: "service.list" },
// { permission: "service.delete" }, { permission: "service.delete" },
// { permission: "service.update" }, { permission: "service.update" },
]; ];
return ( return (
@@ -48,25 +49,14 @@ const Page = () => {
{/* Input fields */} {/* Input fields */}
<form className={editUserStyle.fields}> <form className={editUserStyle.fields}>
{/* Role and Dropdown */} {/* Role and Dropdown */}
<div className={editUserStyle.selectRoleContainer}> <SelectField
<div className={editUserStyle.inputContainer}> label="Select Role"
<div className={editUserStyle.label}> options={[
<p>Role</p> { label: "Option", value: "Option" },
{/* <p className={editUserStyle.required}>*</p> */} { label: "Option 1", value: "Option 1" },
</div> { label: "Option 2", value: "Option 2" },
<div className={editUserStyle.inputField}> ]}
<select />
name="role"
className={editUserStyle.selectField}
>
<option value="">Select Role</option>
<option value="">Option</option>
<option value="">Option 2</option>
<option value="">Option 3</option>
</select>
</div>
</div>
</div>
{/* Email */} {/* Email */}
<div className={editUserStyle.inputMainContainer}> <div className={editUserStyle.inputMainContainer}>
<div className={editUserStyle.inputContainer}> <div className={editUserStyle.inputContainer}>

31
frontend/src/app/users/[usersId]/styles.module.css
View File

@@ -5,6 +5,7 @@
gap: 24px; gap: 24px;
flex: 1 0 0; flex: 1 0 0;
align-self: stretch; align-self: stretch;
position: relative;
} }
.inputFieldContainer { .inputFieldContainer {
display: flex; display: flex;
@@ -107,31 +108,6 @@
align-self: stretch; align-self: stretch;
} }
/* Select Role Dropdown */
.selectField {
display: flex;
height: 44px;
padding: 12px 16px;
align-self: stretch;
background: none;
border-radius: 6px;
border: 1px solid #616583;
border: 1px solid color(display-p3 0.3843 0.3961 0.5057);
color: #d2d3e1;
font-family: Inter;
font-size: 16px;
font-weight: 400;
appearance: none;
}
.selectField:focus {
outline: none;
border: 1px solid #959aff;
border: 1px solid color(display-p3 0.5892 0.6031 0.9766);
background: rgba(75, 79, 109, 0.25);
background: color(display-p3 0.298 0.3098 0.4196 / 0.25);
}
.userPermissions { .userPermissions {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -139,7 +115,12 @@
flex: 1 0 0; flex: 1 0 0;
align-self: stretch; align-self: stretch;
border-radius: 6px; border-radius: 6px;
height: calc(100vh - 280px);
position: relative;
overflow: auto;
scrollbar-width: none;
} }
.permissionsContainer { .permissionsContainer {
display: flex; display: flex;
padding: 24px; padding: 24px;

28
frontend/src/app/users/add/page.jsx
View File

@@ -3,7 +3,7 @@ import TopHeader from "@/app/components/topHeader/TopHeader";
import globalStyle from "../../globalStyle.module.css"; import globalStyle from "../../globalStyle.module.css";
import addUserStyle from "./styles.module.css"; import addUserStyle from "./styles.module.css";
import TextField from "@/app/components/fields/textfield"; import TextField from "@/app/components/fields/textfield";
import SelectField from "@/app/components/select/SelectField";
const page = () => { const page = () => {
return ( return (
<div className={globalStyle.section}> <div className={globalStyle.section}>
@@ -30,24 +30,14 @@ const page = () => {
{/* Input fields */} {/* Input fields */}
<form className={addUserStyle.fields}> <form className={addUserStyle.fields}>
{/* Role and Dropdown */} {/* Role and Dropdown */}
<div className={addUserStyle.selectRoleContainer}> <SelectField
<div className={addUserStyle.inputContainer}> label="Select Role"
<div className={addUserStyle.label}> options={[
<p>Role</p> { label: "Option", value: "Option" },
</div> { label: "Option 1", value: "Option 1" },
<div className={addUserStyle.inputField}> { label: "Option 2", value: "Option 2" },
<select ]}
name="role" />
className={addUserStyle.selectField}
>
<option value="">Select Role</option>
<option value="">Option</option>
<option value="">Option 2</option>
<option value="">Option 3</option>
</select>
</div>
</div>
</div>
{/* Email */} {/* Email */}
<div className={addUserStyle.inputMainContainer}> <div className={addUserStyle.inputMainContainer}>
<div className={addUserStyle.inputContainer}> <div className={addUserStyle.inputContainer}>

25
frontend/src/app/users/add/styles.module.css
View File

@@ -93,31 +93,6 @@
align-self: stretch; align-self: stretch;
} }
/* Select Role Dropdown */
.selectField {
display: flex;
height: 44px;
padding: 12px 16px;
align-self: stretch;
background: none;
border-radius: 6px;
border: 1px solid #616583;
border: 1px solid color(display-p3 0.3843 0.3961 0.5057);
color: #d2d3e1;
font-family: Inter;
font-size: 16px;
font-weight: 400;
appearance: none;
}
.selectField:focus {
outline: none;
border: 1px solid #959aff;
border: 1px solid color(display-p3 0.5892 0.6031 0.9766);
background: rgba(75, 79, 109, 0.25);
background: color(display-p3 0.298 0.3098 0.4196 / 0.25);
}
.userPermissions { .userPermissions {
display: flex; display: flex;
flex-direction: column; flex-direction: column;