114 lines
4.0 KiB
JavaScript
114 lines
4.0 KiB
JavaScript
"use client";
|
|
import React, { useState } from "react";
|
|
import TopHeader from "@/app/components/topHeader/TopHeader";
|
|
import globalStyle from "../../globalStyle.module.css";
|
|
import addRoleStyle from "./styles.module.css";
|
|
import TextField from "@/app/components/fields/textfield";
|
|
import Permissions from "@/app/components/permissions/Permissions";
|
|
import useUserForm from "@/app/hooks/useUserForm";
|
|
import Alert from "@/app/components/alerts/Alert";
|
|
import Toggle from "@/app/components/mobileToggleTab/Toggle";
|
|
|
|
const AddRolePage = () => {
|
|
// Mobile
|
|
const [activeTab, setActiveTab] = useState("details");
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
errors,
|
|
onSubmit,
|
|
triggerAlert,
|
|
setTriggerAlert,
|
|
} = useUserForm();
|
|
return (
|
|
<div className={globalStyle.section}>
|
|
{triggerAlert && (
|
|
<Alert
|
|
setTriggerAlert={setTriggerAlert}
|
|
onClick={() => setEditState(true)}
|
|
title="Add Role"
|
|
/>
|
|
)}
|
|
<div className={globalStyle.mainContainer}>
|
|
<div className={globalStyle.container}>
|
|
<TopHeader
|
|
buttonText="Save"
|
|
cancelButtonText="Cancel"
|
|
topbarTitle="Add Role"
|
|
state="add"
|
|
requiredButtons={["title", "save"]}
|
|
/>
|
|
<div className={addRoleStyle.addRoleContainer}>
|
|
<Toggle
|
|
activeTab={activeTab}
|
|
onChange={setActiveTab}
|
|
tabs={[
|
|
{ label: "Role Details", value: "details" },
|
|
{ label: "Permissions", value: "permissions" },
|
|
]}
|
|
/>
|
|
{/* Input fields Container */}
|
|
<div className={addRoleStyle.inputFieldContainer}>
|
|
{/* User Details */}
|
|
<div
|
|
className={`${addRoleStyle.roleDetails} ${activeTab !== "details" ? addRoleStyle.hiddenMobile : ""}`}
|
|
>
|
|
<div className={addRoleStyle.header}>
|
|
<div>
|
|
<p>Role Details</p>
|
|
</div>
|
|
</div>
|
|
{/* Ibalhin ning form na tag */}
|
|
<form
|
|
className={addRoleStyle.fields}
|
|
id="form"
|
|
onSubmit={handleSubmit(onSubmit)}
|
|
>
|
|
<div className={addRoleStyle.inputMainContainer}>
|
|
<div className={addRoleStyle.inputContainer}>
|
|
<div className={addRoleStyle.label}>
|
|
<p>Name</p>
|
|
</div>
|
|
<div className={addRoleStyle.inputField}>
|
|
<TextField
|
|
placeHolder="Enter name"
|
|
{...register("roleName", { required: true })}
|
|
hasError={!!errors.roleName}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={addRoleStyle.inputMainContainer}>
|
|
<div className={addRoleStyle.inputContainer}>
|
|
<div className={addRoleStyle.label}>
|
|
<p>Organization ID</p>
|
|
</div>
|
|
<div className={addRoleStyle.inputField}>
|
|
<TextField
|
|
placeHolder="Enter organization ID"
|
|
{...register("organizationID", { required: true })}
|
|
hasError={!!errors.organizationID}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
{/* Permissions */}
|
|
<div
|
|
className={`${addRoleStyle.userPermissions} ${activeTab !== "permissions" ? addRoleStyle.hiddenMobile : ""}`}
|
|
>
|
|
<div className={addRoleStyle.imanginaryDiv}></div>
|
|
<Permissions />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AddRolePage;
|