feat(envited.ascs.digital): Add delete button to user overview

apps/envited.ascs.digital/common/types/types.ts

@@ -71,6 +71,7 @@ export interface User {
   streetAddress: string
   updatedAt: string
   vatId?: string
+  isActive: boolean
 }
 
 export interface Profile {

apps/envited.ascs.digital/modules/Users/Users.actions.ts

@@ -0,0 +1,17 @@
+'use server'
+
+import { revalidatePath } from 'next/cache'
+
+import { deleteUserById } from '../../common/serverActions/users/deleteUserById'
+import { error } from '../../common/utils'
+
+export async function deleteUser(id: string) {
+  try {
+    await deleteUserById(id)
+
+    revalidatePath('/dashboard/users')
+  } catch (e) {
+    console.log('error', e)
+    throw error()
+  }
+}

apps/envited.ascs.digital/modules/Users/Users.tsx

@@ -1,18 +1,22 @@
 'use client'
 
 import { Card, Heading, Table, TableBody, TableCell, TableHeader, TableRow } from '@envited-marketplace/design-system'
+import { TrashIcon } from '@heroicons/react/24/outline'
 import { map } from 'ramda'
 import React, { FC } from 'react'
 
 import { useTranslation } from '../../common/i18n'
 import { User } from '../../common/types/types'
+import { deleteUser } from './Users.actions'
 
 interface UsersProps {
-  users: Partial<User>[]
+  users: User[]
 }
 export const Users: FC<UsersProps> = ({ users }) => {
   const { t } = useTranslation('Users')
 
+  const deleteUserWithId = (id: string) => deleteUser.bind(null, id)
+
   return (
     <Card>
       <Heading importance="h3">{t('[Heading] users')}</Heading>
@@ -28,14 +32,41 @@ export const Users: FC<UsersProps> = ({ users }) => {
             <TableCell extraClasses="pb-0">
               <h4 className="text-gray-400 dark:text-gray-500 text-sm">{t('[Heading] email')}</h4>
             </TableCell>
+            <TableCell extraClasses="pb-0">
+              <h4 className="text-gray-400 dark:text-gray-500 text-sm">{t('[Heading] status')}</h4>
+            </TableCell>
+            <TableCell extraClasses="pb-0"> </TableCell>
           </TableRow>
         </TableHeader>
         <TableBody>
-          {map(({ id, name, email }: Partial<User>) => (
+          {map(({ id, name, email, isActive }: User) => (
             <TableRow key={id}>
               <TableCell>{id}</TableCell>
               <TableCell>{name}</TableCell>
               <TableCell>{email}</TableCell>
+              <TableCell>
+                <div
+                  className={`${
+                    isActive
+                      ? 'bg-green-100 text-green-600 dark:bg-green-600'
+                      : 'bg-red-100 text-red-600 dark:bg-red-600'
+                  } dark:text-white pl-1 pr-1.5 py-0.5 text-xs text-center rounded-xl`}
+                >
+                  {t(isActive ? '[Label] active' : '[Label] inactive')}
+                </div>
+              </TableCell>
+              <TableCell extraClasses="pl-3">
+                {isActive ? (
+                  <form action={deleteUserWithId(id)}>
+                    <button className="text-white bg-red-500 hover:bg-red-600 p-1.5 rounded-lg">
+                      <span className="sr-only">{t('[Button] deactivate')}</span>
+                      <TrashIcon className="w-3" />
+                    </button>
+                  </form>
+                ) : (
+                  <></>
+                )}
+              </TableCell>
             </TableRow>
           ))(users)}
         </TableBody>

apps/envited.ascs.digital/modules/Users/locales/de_DE.json

@@ -3,5 +3,8 @@
   "[Heading] name": "Name",
   "[Heading] email": "Email",
   "[Heading] did": "DID",
-  "[Heading] actions": "Actions"
+  "[Heading] status": "Status",
+  "[Button] deactivate": "Deactivate",
+  "[Label] active": "Active",
+  "[Label] inactive": "Inactive"
 }

apps/envited.ascs.digital/modules/Users/locales/en_GB.json

@@ -3,5 +3,8 @@
   "[Heading] name": "Name",
   "[Heading] email": "Email",
   "[Heading] did": "DID",
-  "[Heading] actions": "Actions"
+  "[Heading] status": "Status",
+  "[Button] deactivate": "Deactivate",
+  "[Label] active": "Active",
+  "[Label] inactive": "Inactive"
 }