Skip to content

Commit

Permalink
add add user form
Browse files Browse the repository at this point in the history
  • Loading branch information
xeroxis-xs committed Jun 14, 2024
1 parent 57ffb1b commit 45063b8
Show file tree
Hide file tree
Showing 2 changed files with 113 additions and 2 deletions.
12 changes: 10 additions & 2 deletions src/app/dashboard/wooclap/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import Typography from '@mui/material/Typography';
import { Download as DownloadIcon } from '@phosphor-icons/react/dist/ssr/Download';
import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
import { Upload as UploadIcon } from '@phosphor-icons/react/dist/ssr/Upload';
import { XCircle as XCircleIcon } from '@phosphor-icons/react/dist/ssr/XCircle';

import { WooclapUserFilters } from '@/components/dashboard/wooclap/wooclap-user-filters';
import { WooclapUserTable } from '@/components/dashboard/wooclap/wooclap-user-table';
Expand All @@ -14,6 +15,7 @@ import apiService from "@/api/api-service";
import { type AxiosResponse } from "axios";
import { logger } from '@/lib/default-logger'
import {authClient} from "@/lib/auth/client";
import { WooclapUserForm } from "@/components/dashboard/wooclap/wooclap-user-form";

function applyPagination(rows: WooclapUser[], page: number, rowsPerPage: number): WooclapUser[] {
return rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
Expand All @@ -24,6 +26,11 @@ export default function Page(): React.JSX.Element {
const rowsPerPage = 5;
const [wooclapUsers, setWooclapUsers] = React.useState<WooclapUser[]>([]);
const [paginatedWooclapUsers, setPaginatedWooclapUsers] = React.useState<WooclapUser[]>([]);
const [showForm, setShowForm] = React.useState(false);

const toggleForm = (): void => {
setShowForm(!showForm);
};

const getWooclapUser = async (): Promise<void> => {
try {
Expand Down Expand Up @@ -65,11 +72,12 @@ export default function Page(): React.JSX.Element {
</Stack>
</Stack>
<div>
<Button startIcon={<PlusIcon fontSize="var(--icon-fontSize-md)" />} variant="contained">
Add
<Button startIcon={showForm ? <XCircleIcon fontSize="var(--icon-fontSize-md)" /> : <PlusIcon fontSize="var(--icon-fontSize-md)" />} variant="contained" onClick={toggleForm}>
{showForm ? 'Close' : 'Add'}
</Button>
</div>
</Stack>
{showForm && <WooclapUserForm />} {/* Conditional rendering */}
<WooclapUserFilters />
<WooclapUserTable
count={paginatedWooclapUsers.length}
Expand Down
103 changes: 103 additions & 0 deletions src/components/dashboard/wooclap/wooclap-user-form.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
'use client';

import * as React from 'react';
import Button from '@mui/material/Button';
import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import CardHeader from '@mui/material/CardHeader';
import Divider from '@mui/material/Divider';
import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
// import MenuItem from '@mui/material/MenuItem';
import OutlinedInput from '@mui/material/OutlinedInput';
// import Select from '@mui/material/Select';
import Grid from '@mui/material/Unstable_Grid2';
// import type {AxiosResponse} from "axios";
import type {WooclapUser} from "@/types/wooclap-user";
import apiService from "@/api/api-service";
import {authClient} from "@/lib/auth/client";
import {logger} from "@/lib/default-logger";

// const roles = [
// { value: 'student', label: 'Student' },
// { value: 'instructor', label: 'Instructor' },
// { value: 'admin', label: 'Admin' },
// ] as const;

export function WooclapUserForm(): React.JSX.Element {
const [email, setEmail] = React.useState('');
const [username, setUsername] = React.useState('');
const [firstName, setFirstName] = React.useState('');
const [lastName, setLastName] = React.useState('');

const handleSubmit = async (event: React.FormEvent<HTMLFormElement>): Promise<void> => {
event.preventDefault();

const newUser: Partial<WooclapUser> = {
email,
username,
first_name: firstName,
last_name: lastName,
};

try {
await apiService.post('/api/WooclapUser/', newUser);
logger.debug('User added successfully');
} catch (error: unknown) {
await authClient.signInWithMsal();
logger.error(error);
}
};
return (
<form onSubmit={handleSubmit}>
<Card>
<CardHeader subheader="Add new user to the database" title="New User" />
<Divider />
<CardContent>
<Grid container spacing={3}>
<Grid md={3} xs={6}>
<FormControl fullWidth required>
<InputLabel>Email</InputLabel>
<OutlinedInput defaultValue="" label="Email" name="email" onChange={e => { setEmail(e.target.value); }} />
</FormControl>
</Grid>
<Grid md={3} xs={6}>
<FormControl fullWidth required>
<InputLabel>Username</InputLabel>
<OutlinedInput defaultValue="" label="Username" name="username" onChange={e => { setUsername(e.target.value); }} />
</FormControl>
</Grid>
<Grid md={3} xs={6}>
<FormControl fullWidth required>
<InputLabel>First Name</InputLabel>
<OutlinedInput defaultValue="" label="First Name" name="first_name" onChange={e => { setFirstName(e.target.value); }} />
</FormControl>
</Grid>
<Grid md={3} xs={6}>
<FormControl fullWidth required>
<InputLabel>Last Name</InputLabel>
<OutlinedInput defaultValue="" label="Last Name" name="last_name" onChange={e => { setLastName(e.target.value); }} />
</FormControl>
</Grid>
{/*<Grid md={3} xs={6}>*/}
{/* <FormControl fullWidth>*/}
{/* <InputLabel>Role</InputLabel>*/}
{/* <Select defaultValue="New York" label="State" name="state" variant="outlined">*/}
{/* {roles.map((option) => (*/}
{/* <MenuItem key={option.value} value={option.value}>*/}
{/* {option.label}*/}
{/* </MenuItem>*/}
{/* ))}*/}
{/* </Select>*/}
{/* </FormControl>*/}
{/*</Grid>*/}
</Grid>
</CardContent>
<CardActions sx={{ justifyContent: 'flex-end' }}>
<Button type="submit" variant="contained">Add</Button>
</CardActions>
</Card>
</form>
);
}

0 comments on commit 45063b8

Please sign in to comment.