ui updates for permissions.

2024-07-29 16:16:14 +02:00
parent 02320b9484
commit 8d99a6b03c
6 changed files with 116 additions and 34 deletions
--- a/src/pages/permissions/[id].tsx
+++ b/src/pages/permissions/[id].tsx
@@ -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>
    </>
  );