From 4a20cd89b3d8935d0d0d7fd136b31a51b92f8451 Mon Sep 17 00:00:00 2001
From: Tin Geber <tin@greenhost.nl>
Date: Fri, 1 Dec 2023 09:50:46 +0100
Subject: [PATCH] adding UI components to table
---
frontend/src/modules/users/Users.tsx | 89 ++++++++++++++++------------
1 file changed, 51 insertions(+), 38 deletions(-)
diff --git a/frontend/src/modules/users/Users.tsx b/frontend/src/modules/users/Users.tsx
index 76ff240c..329e61e5 100644
--- a/frontend/src/modules/users/Users.tsx
+++ b/frontend/src/modules/users/Users.tsx
@@ -123,8 +123,38 @@ export const Users: React.FC = () => {
return classes.filter(Boolean).join(' ');
}
+ const userCard = (person: User) => {
+ return (
+ <div className="flex min-w-0 gap-x-4 items-center">
+ {/* <img className="h-12 w-12 flex-none rounded-full bg-gray-50" src={person.imageUrl} alt="" /> */}
+ <span className="inline-flex items-center relative justify-center h-8 w-8 rounded-full bg-primary overflow-hidden">
+ <span className="absolute z-10">
+ <Gravatar md5={md5(person.email) || undefined} size={32} rating="pg" default="blank" protocol="https://" />
+ </span>
+ <span className="absolute z-0 text-primary-800">{person.name[0]}</span>
+ </span>
+ <div className="min-w-0 flex-auto">
+ <p className="text-sm font-semibold leading-6 text-gray-900">
+ {/* <a href={person.href} className="hover:underline"> */}
+ {person.name ? (
+ <span>{person.name}</span>
+ ) : (
+ <span className="text-sm italic text-gray-400">no name given</span>
+ )}
+ {/* </a> */}
+ </p>
+ <p className="mt-1 flex text-xs leading-5 text-gray-500">
+ <a href={`mailto:${person.email}`} className="truncate hover:underline">
+ {person.email}
+ </a>
+ </p>
+ </div>
+ </div>
+ );
+ };
+
// ////////////////////////
- // New Table Start
+ // Table Start
// ////////////////////////
function IndeterminateCheckbox({
@@ -181,21 +211,30 @@ export const Users: React.FC = () => {
header: 'Name',
footer: (props) => props.column.id,
accessorKey: 'name',
+ cell: (props) => {
+ const { row } = props;
+ return userCard(row.original);
+ },
},
+ // {
+ // header: 'Email',
+ // footer: (props) => props.column.id,
+ // accessorKey: 'email',
+ // },
{
- header: 'Email',
- footer: (props) => props.column.id,
- accessorKey: 'email',
- },
- {
- header: 'is Admin?',
+ header: 'Role',
accessorKey: 'admin',
- },
- {
- header: 'Status',
footer: (props) => props.column.id,
- accessorKey: 'status',
+ cell: (props) => {
+ const { row } = props;
+ return <>{row.original.admin ? <span>Admin</span> : <span>User</span>}</>;
+ },
},
+ // {
+ // header: 'Status',
+ // footer: (props) => props.column.id,
+ // accessorKey: 'status',
+ // },
{
header: ' ',
cell: (props: any) => {
@@ -469,33 +508,7 @@ export const Users: React.FC = () => {
<ul className="divide-y divide-gray-100">
{filterSearch.map((person) => (
<li key={person.email} className="flex justify-between gap-x-6 py-5 px-4 group">
- <div className="flex min-w-0 gap-x-4 items-center">
- {/* <img className="h-12 w-12 flex-none rounded-full bg-gray-50" src={person.imageUrl} alt="" /> */}
- <span className="inline-flex items-center relative justify-center h-8 w-8 rounded-full bg-primary overflow-hidden">
- <span className="absolute z-10">
- <Gravatar
- md5={md5(person.email) || undefined}
- size={32}
- rating="pg"
- default="blank"
- protocol="https://"
- />
- </span>
- <span className="absolute z-0 text-primary-800">{person.name[0]}</span>
- </span>
- <div className="min-w-0 flex-auto">
- <p className="text-sm font-semibold leading-6 text-gray-900">
- {/* <a href={person.href} className="hover:underline"> */}
- {person.name}
- {/* </a> */}
- </p>
- <p className="mt-1 flex text-xs leading-5 text-gray-500">
- <a href={`mailto:${person.email}`} className="truncate hover:underline">
- {person.email}
- </a>
- </p>
- </div>
- </div>
+ {userCard(person)}
<div className="flex shrink-0 items-center gap-x-6">
<div className="hidden sm:flex sm:flex-col sm:items-end">
<p className="text-sm leading-6 text-gray-900">{person.status}</p>
--
GitLab