devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui updates for permissions.

Browse Source
This commit is contained in:
mzerone
2024-07-29 16:16:14 +02:00
parent 02320b9484
commit 8d99a6b03c
6 changed files with 116 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/api/assignments/[id]/index.ts
View File

@@ -4,7 +4,7 @@ import {app} from "@/firebase";
import {getFirestore, collection, getDocs, query, where, setDoc, doc, getDoc, deleteDoc} from "firebase/firestore";
import {withIronSessionApiRoute} from "iron-session/next";
import {sessionOptions} from "@/lib/session";
import {uuidv4} from "@firebase/util";
const db = getFirestore(app);

43
src/pages/permissions/[id].tsx
View File

@@ -14,10 +14,11 @@ import Select from "@/components/Low/Select";
import Button from "@/components/Low/Button";
import axios from "axios";
import { toast, ToastContainer } from "react-toastify";
import {Type as UserType} from '@/interfaces/user'
interface BasicUser {
id: string;
name: string;
type: UserType
}
interface PermissionWithBasicUsers {
@@ -61,11 +62,13 @@ export const getServerSideProps = withIronSessionSsr(async (context) => {
const permission: Permission = await getPermissionDoc(params.id as string);
const allUserData: User[] = await getUsers();
const users = allUserData.map((u) => ({
id: u.id,
name: u.name,
type: u.type
})) as BasicUser[];
// const res = await fetch("api/permissions");
// const permissions: Permission[] = await res.json();
// Pass data to the page via props
@@ -101,16 +104,15 @@ interface Props {
}
export default function Page(props: Props) {
console.log("Props", props);
const { permission, user, users } = props;
const [selectedUsers, setSelectedUsers] = useState<string[]>(() =>
permission.users.map((u) => u.id)
);
const onChange = (value: any) => {
console.log("value", value);
setSelectedUsers((prev) => {
if (value?.value) {
return [...prev, value?.value];
@@ -123,7 +125,7 @@ export default function Page(props: Props) {
};
const update = async () => {
console.log("update", selectedUsers);
try {
await axios.patch(`/api/permissions/${permission.id}`, {
users: selectedUsers,
@@ -133,7 +135,7 @@ export default function Page(props: Props) {
toast.error("Failed to update permission");
}
};
return (
<>
<Head>
@@ -156,24 +158,25 @@ export default function Page(props: Props) {
options={users
.filter((u) => !selectedUsers.includes(u.id))
.map((u) => ({
label: u.name,
label: `${u?.type}-${u?.name}`,
value: u.id,
}))}
onChange={onChange}
/>
<Button onClick={update}>Update</Button>
</div>
<div className="flex flex-col gap-3">
<div className="flex flex-row justify-between">
<div className="flex flex-col gap-3">
<h2>Blacklisted Users</h2>
<div className="flex gap-3 flex-wrap">
{selectedUsers.map((userId) => {
const name = users.find((u) => u.id === userId)?.name;
const user = users.find((u) => u.id === userId);
return (
<div
className="flex p-4 rounded-xl w-auto bg-mti-purple-light text-white gap-4"
key={userId}
>
<span className="text-base">{name}</span>
<span className="text-base first-letter:uppercase">{user?.type}-{user?.name}</span>
<BsTrash
style={{ cursor: "pointer" }}
onClick={() => removeUser(userId)}
@@ -184,6 +187,22 @@ export default function Page(props: Props) {
})}
</div>
</div>
<div className="flex flex-col gap-3">
<h2>Whitelisted Users</h2>
<div className="flex flex-col gap-3 flex-wrap">
{users.filter(user => !selectedUsers.includes(user.id)).map((user) => {
return (
<div
className="flex p-4 rounded-xl w-auto bg-mti-purple-light text-white gap-4"
key={user.id}
>
<span className="text-base first-letter:uppercase">{user?.type}-{user?.name}</span>
</div>
);
})}
</div>
</div>
</div>
</Layout>
</>
);

22
src/pages/permissions/index.tsx
View File

@@ -7,7 +7,7 @@ import { Permission } from "@/interfaces/permissions";
import { getPermissionDocs } from "@/utils/permissions.be";
import { User } from "@/interfaces/user";
import Layout from "@/components/High/Layout";
import Link from "next/link";
import PermissionList from '@/components/PermissionList'
export const getServerSideProps = withIronSessionSsr(async ({ req }) => {
const user = req.session.user;
@@ -33,7 +33,6 @@ export const getServerSideProps = withIronSessionSsr(async ({ req }) => {
// Fetch data from external API
const permissions: Permission[] = await getPermissionDocs();
console.log("Permissions", permissions);
// const res = await fetch("api/permissions");
// const permissions: Permission[] = await res.json();
@@ -56,10 +55,9 @@ interface Props {
}
export default function Page(props: Props) {
console.log("Props", props);
const { permissions, user } = props;
return (
<>
<Head>
@@ -74,19 +72,7 @@ export default function Page(props: Props) {
<Layout user={user} className="gap-6">
<h1 className="text-2xl font-semibold">Permissions</h1>
<div className="flex gap-3 flex-wrap">
{permissions.map((permission: Permission) => {
const id = permission.id as string;
const type = permission.type as string;
return (
<Link href={`/permissions/${id}`} key={id}>
<div className="card bg-primary text-primary-content">
<div className="card-body">
<h1 className="card-title">{type}</h1>
</div>
</div>
</Link>
);
})}
<PermissionList permissions={permissions} />
</div>
</Layout>
</>