Skip to content

Commit

Permalink
fix page login layout
Browse files Browse the repository at this point in the history
  • Loading branch information
@karenyov
karenyov committed Apr 8, 2023
1 parent 7b21bb2 commit 4b89dba
Show file tree
Hide file tree
Showing 6 changed files with 143 additions and 187 deletions.
2 changes: 1 addition & 1 deletion src/components/DataTableBase.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import DataTable,{ TableColumn } from "react-data-table-component";

import classnames from "classnames";
interface Props {
columns: TableColumn<any>[];
columns: TableColumn<>[];
data: any[];
title?: string;
}
Expand Down
13 changes: 8 additions & 5 deletions src/components/template/NavbarTop.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {

import { FiMenu, FiSettings, FiLogOut, FiLock } from "react-icons/fi";

import Link from "next/link";
import { signOut } from "next-auth/react";
import { getSession } from "next-auth/react";
import { UserSession } from "next-auth";
Expand Down Expand Up @@ -128,11 +129,13 @@ export default function NavbarTop() {
boxShadow="md"
>
<HStack>
<Image
src={colorMode == "dark" ? logoLight : logoLight}
alt="Brand Image"
style={{ height: "auto", width: "135px" }}
/>
<Link href="/">
<Image
src={colorMode == "dark" ? logoLight : logoLight}
alt="Brand Image"
style={{ height: "auto", width: "135px" }}
/>
</Link>

<Flex justify="flex-end" flex="1" p={2}>
<ButtonGroup variant="link" spacing="8" mr={10}>
Expand Down
105 changes: 42 additions & 63 deletions src/pages/admin/category/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,6 @@ import {
HStack,
Menu,
MenuButton,
Table,
TableContainer,
Tbody,
Td,
Th,
Thead,
Tr,
useDisclosure,
useToast,
Button as ButtonBase,
Expand Down Expand Up @@ -56,6 +49,8 @@ import { Input } from "@/components/Input";
import Button from "@/components/Button";
import { CategoryModel } from "@/models/category";
import IconButton from "@/components/IconButton";
import Divider from "@/components/Divider";
import DataTableBase from "@/components/DataTableBase";

const insertFormSchema = z.object({
description: z.string({
Expand Down Expand Up @@ -109,6 +104,44 @@ export default function Category() {
onOpenFormModal();
}

const columns = [
{
name: "Id",
selector: (row: any) => row.categoryId,
},
{
name: "Descrição",
selector: (row: any) => row.description,
},
{
name: "Ações",
selector: (row: any) => (
<Menu>
<MenuButton
rounded={20}
bg={colorMode == "dark" ? "gray.500" : "gray.50"}
as={IconButtonBase}
icon={<HamburgerIcon />}
/>
<MenuList minWidth="150px">
<MenuItem onClick={() => handleEditCategory(row.categoryId)}>
<HStack flex={1} justifyContent="space-between">
<Text>Editar</Text>
<FiEdit2 />
</HStack>
</MenuItem>
<MenuItem onClick={() => handleConfirmCategory(row.categoryId)}>
<HStack flex={1} justifyContent="space-between">
<Text>Excluir</Text>
<FiTrash2 />
</HStack>
</MenuItem>
</MenuList>
</Menu>
),
},
];

async function handleEditCategory(id: number) {
setIsEdit(true);
setCategoryId(id);
Expand Down Expand Up @@ -252,62 +285,8 @@ export default function Category() {
/>
</Heading>
</HStack>

{isLoading ? (
<Spinner />
) : (
<TableContainer>
<Table size="sm">
<Thead>
<Tr>
<Th>Id</Th>
<Th>Descrição</Th>
<Th>Ações</Th>
</Tr>
</Thead>
<Tbody>
{categories.map((category) => (
<Tr key={category.categoryId}>
<Td>{category.categoryId}</Td>
<Td>{category.description}</Td>
<Td>
<Menu>
<MenuButton
rounded={20}
bg={colorMode == "dark" ? "gray.500" : "gray.50"}
as={IconButtonBase}
icon={<HamburgerIcon />}
/>
<MenuList minWidth="150px">
<MenuItem
onClick={() =>
handleEditCategory(category.categoryId)
}
>
<HStack flex={1} justifyContent="space-between">
<Text>Editar</Text>
<FiEdit2 />
</HStack>
</MenuItem>
<MenuItem
onClick={() =>
handleConfirmCategory(category.categoryId)
}
>
<HStack flex={1} justifyContent="space-between">
<Text>Excluir</Text>
<FiTrash2 />
</HStack>
</MenuItem>
</MenuList>
</Menu>
</Td>
</Tr>
))}
</Tbody>
</Table>
</TableContainer>
)}
<Divider mt={2} />
<DataTableBase columns={columns} data={categories} title="" />
</Box>

{/* LIST CATEGORIES */}
Expand Down
198 changes: 82 additions & 116 deletions src/pages/admin/user/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,6 @@ import {
ModalOverlay,
Spacer,
Stack,
Table,
TableContainer,
Tbody,
Td,
Th,
Thead,
Tr,
useDisclosure,
useToast,
Button as ButtonBase,
Expand Down Expand Up @@ -59,6 +52,7 @@ import Spinner from "@/components/Spinner";
import Layout from "@/components/template/Layout";
import Box from "@/components/Box";
import IconButton from "@/components/IconButton";
import Divider from "@/components/Divider";

import { UserDTO } from "@/dto/http/UserDTO";

Expand Down Expand Up @@ -112,6 +106,85 @@ export default function User() {

const [userChange, setUserChange] = useState<UserDTO>();

const columns = [
{
name: "Nome",
selector: (row: any) => row.name,
},
{
name: "E-mail",
selector: (row: any) => row.email,
},
{
name: "Perfil",
selector: (row: any) => (
<Tag
variant="solid"
colorScheme={row.perfil == "ROLE_MANAGER" ? "blue" : "green"}
>
{row.perfil}
</Tag>
),
},
{
name: "Status",
selector: (row: any) => (
<Badge colorScheme={row.status === "ACTIVE" ? "green" : "red"}>
{row.status === "ACTIVE" ? "ATIVO" : "INATIVO"}
</Badge>
),
},
{
name: "Ações",
selector: (row: any) => (
<Menu>
<MenuButton
rounded={20}
bg={colorMode == "dark" ? "gray.500" : "gray.50"}
as={IconButtonBase}
icon={<HamburgerIcon />}
/>
<MenuList minWidth="150px">
{/* <MenuItem
onClick={() => handleEditUser(user.userId)}
>
<HStack flex={1} justifyContent="space-between">
<Text>Editar</Text>
<FiEdit2 />
</HStack>
</MenuItem> */}
<MenuItem onClick={() => handleConfirmUser(row.userId, "DELETAR")}>
<HStack flex={1} justifyContent="space-between">
<Text>Excluir</Text>
<FiTrash2 />
</HStack>
</MenuItem>

{row.name !== "admin" && (
<MenuItem
onClick={() => handleConfirmUser(row.userId, "STATUS", row)}
>
<HStack flex={1} justifyContent="space-between">
<Text>Alterar Perfil</Text>
<FiFileText />
</HStack>
</MenuItem>
)}

<MenuItem
onClick={() => handleConfirmUser(row.userId, "ALTERAR", row)}
>
<HStack flex={1} justifyContent="space-between">
<Text>{row.status === "ACTIVE" ? "Inativar" : "Ativar"}</Text>
{row.status === "ACTIVE" ? <FiEyeOff /> : <FiEye />}
</HStack>
</MenuItem>
</MenuList>
</Menu>
),
},
];

const {
control,
handleSubmit,
Expand Down Expand Up @@ -338,115 +411,8 @@ export default function User() {
/>
</Heading>
</HStack>

{/* <DataTableBase columns={columns} data={users} title="" /> */}

{isLoading ? (
<Spinner />
) : (
<TableContainer my={5}>
<Table size="sm">
<Thead>
<Tr>
<Th>Nome</Th>
<Th>Email</Th>
<Th>Perfil</Th>
<Th>Status</Th>
<Th>Ações</Th>
</Tr>
</Thead>
<Tbody>
{users.map((user) => (
<Tr key={user.userId}>
<Td>{user.name}</Td>
<Td>{user.email}</Td>
<Td>
<Tag
variant="solid"
colorScheme={
user.perfil == "ROLE_MANAGER" ? "blue" : "green"
}
>
{user.perfil}
</Tag>
</Td>
<Td>
<Badge
colorScheme={
user.status === "ACTIVE" ? "green" : "red"
}
>
{user.status === "ACTIVE" ? "ATIVO" : "INATIVO"}
</Badge>
</Td>
<Td>
<Menu>
<MenuButton
rounded={20}
bg={colorMode == "dark" ? "gray.500" : "gray.50"}
as={IconButtonBase}
icon={<HamburgerIcon />}
/>
<MenuList minWidth="150px">
{/* <MenuItem
onClick={() => handleEditUser(user.userId)}
>
<HStack flex={1} justifyContent="space-between">
<Text>Editar</Text>
<FiEdit2 />
</HStack>
</MenuItem> */}
<MenuItem
onClick={() =>
handleConfirmUser(user.userId, "DELETAR")
}
>
<HStack flex={1} justifyContent="space-between">
<Text>Excluir</Text>
<FiTrash2 />
</HStack>
</MenuItem>

{user.name !== "admin" && (
<MenuItem
onClick={() =>
handleConfirmUser(user.userId, "STATUS", user)
}
>
<HStack flex={1} justifyContent="space-between">
<Text>Alterar Perfil</Text>
<FiFileText />
</HStack>
</MenuItem>
)}

<MenuItem
onClick={() =>
handleConfirmUser(user.userId, "ALTERAR", user)
}
>
<HStack flex={1} justifyContent="space-between">
<Text>
{user.status === "ACTIVE"
? "Inativar"
: "Ativar"}
</Text>
{user.status === "ACTIVE" ? (
<FiEyeOff />
) : (
<FiEye />
)}
</HStack>
</MenuItem>
</MenuList>
</Menu>
</Td>
</Tr>
))}
</Tbody>
</Table>
</TableContainer>
)}
<Divider mt={2} />
<DataTableBase columns={columns} data={users} title="" />
</Box>
</Container>
{/* LIST USERS */}
Expand Down
Loading

0 comments on commit 4b89dba

Please sign in to comment.