fix error delete category

georgepiter · Apr 10, 2023 · 18e19d0 · 18e19d0
1 parent d1b4927
commit 18e19d0
Show file tree

Hide file tree

Showing 3 changed files with 128 additions and 19 deletions.
diff --git a/src/components/tables/DebtsAllTable.tsx b/src/components/tables/DebtsAllTable.tsx
@@ -1,22 +1,42 @@
-import { useColorMode, Tag, HStack, Heading } from "@chakra-ui/react";
+import {
+ Tag,
+ HStack,
+ Heading,
+ Text,
+ Tab,
+ Tabs,
+ TabList,
+ TabIndicator,
+ TabPanels,
+ TabPanel,
+} from "@chakra-ui/react";
 import { useEffect, useState } from "react";
 
 import { getAllDebtsByRegister } from "@/services/debt";
-import { DebtDTO } from "@/dto/http/DebtDTO";
 import Box from "@/components/Box";
 import { Input } from "@/components/Input";
 import Divider from "@/components/Divider";
 
+import { CategoryDTO } from "@/dto/http/CategoryDTO";
+import { DebtDTO } from "@/dto/http/DebtDTO";
+
 import DataTableBase from "../DataTableBase";
 
 interface Props {
  userId: number;
 }
 
+interface DebtsCategory {
+ categoryId: number;
+ debtList: DebtDTO[];
+}
+
 export default function DebtsAllTable({ userId }: Props) {
- const [debts, setDebts] = useState<DebtDTO[]>([]);
+ const [debts, setDebts] = useState<DebtsCategory[]>([]);
  const [filterDebt, setFilterDebt] = useState("");
 
+ const [categoriesDebt, setCategoriesDebt] = useState<CategoryDTO[]>([]);
+
  const columns = [
  {
  name: "Descrição",
@@ -58,13 +78,29 @@ export default function DebtsAllTable({ userId }: Props) {
  try {
  const res = await getAllDebtsByRegister(userId, date);
  if (res.status == 200) {
- setDebts(res.data);
+ setDebts(res.data.debtsCategoryGroupDTO);
+
+ const categories = getCategories(res.data.debtsCategoryGroupDTO);
+ setCategoriesDebt(categories);
  }
  } catch (error: any) {
  console.log(error);
  }
  }
 
+ function getCategories(categories: Category[]) {
+ const result: CategoryDTO[] = [];
+
+ categories.forEach((category) => {
+ result.push({
+ categoryId: category.categoryId,
+ description: category.typeCategory,
+ });
+ });
+ return result;
+ }
+
+
  function setFormatDate(d = "") {
  const dt = d !== "" ? new Date(d) : new Date();
  const date =
@@ -102,7 +138,34 @@ export default function DebtsAllTable({ userId }: Props) {
  </HStack>
  <Divider />
 
- <DataTableBase columns={columns} data={debts} title="" />
+ {debts.length === 0 ? (
+ <Text>Nenhum registro encontrado.</Text>
+ ) : (
+ <Tabs position="relative" variant="unstyled">
+ <TabList>
+ {categoriesDebt.map((category) => (
+ <Tab key={category.categoryId}>{category.description}</Tab>
+ ))}
+ </TabList>
+ <TabIndicator
+ mt="-1.5px"
+ height="2px"
+ bg="secondary.500"
+ borderRadius="1px"
+ />
+ <TabPanels>
+ {debts.map((category) => (
+ <TabPanel key={category.categoryId}>
+ <DataTableBase
+ columns={columns}
+ data={category.debtList}
+ title=""
+ />
+ </TabPanel>
+ ))}
+ </TabPanels>
+ </Tabs>
+ )}
  </Box>
  </>
  );

diff --git a/src/pages/debt/index.tsx b/src/pages/debt/index.tsx
@@ -14,13 +14,7 @@ import {
  ModalHeader,
  ModalOverlay,
  Stack,
- Table,
- TableContainer,
- Tbody,
- Td,
- Th,
- Thead,
- Tr,
+ Tab,
  Button as ButtonBase,
  useDisclosure,
  useToast,
@@ -41,6 +35,11 @@ import {
  useColorMode,
  Skeleton,
  IconButton as IconButtonBase,
+ Tabs,
+ TabList,
+ TabIndicator,
+ TabPanels,
+ TabPanel,
 } from "@chakra-ui/react";
 import { GiPayMoney } from "react-icons/gi";
 import FileBase64 from "react-file-base64";
@@ -76,6 +75,7 @@ import DataTableBase from "@/components/DataTableBase";
 import Divider from "@/components/Divider";
 
 import { DebtDTO, DebtValuesDTO } from "@/dto/http/DebtDTO";
+import { CategoryDTO } from "@/dto/http/CategoryDTO";
 
 import {
  createDebt,
@@ -127,11 +127,20 @@ interface FileProps {
  base64: string;
 }
 
+interface DebtsCategory {
+ categoryId: number;
+ debtList: DebtDTO[];
+}
+ interface Category {
+ typeCategory: string;
+ categoryId: number;
+ }
+
 export default function Debt() {
  const router = useRouter();
 
  const [isLoading, setIsLoading] = useState(false);
- const [debts, setDebts] = useState<DebtDTO[]>([]);
+ const [debts, setDebts] = useState<DebtsCategory[]>([]);
  const toast = useToast();
 
  const { colorMode } = useColorMode();
@@ -156,6 +165,8 @@ export default function Debt() {
 
  const [isSubmittingEditOthers, setIsSubmittingEditOthers] = useState(false);
 
+ const [categoriesDebt, setCategoriesDebt] = useState<CategoryDTO[]>([]);
+
  const cancelRef = useRef<HTMLInputElement>(null);
  const {
  control,
@@ -422,7 +433,10 @@ export default function Debt() {
  const res = await getAllRegisterByRegister(registerId, userId);
 
  if (res.status == 200) {
- setDebts(res.data.debtList);
+ const categories = getCategories(res.data.debtsCategoryGroupDTO);
+ setCategoriesDebt(categories);
+
+ setDebts(res.data.debtsCategoryGroupDTO);
  setDebtValue(res.data);
  }
  } catch (error: any) {
@@ -432,6 +446,18 @@ export default function Debt() {
  }
  }
 
+ function getCategories(categories: Category[]) {
+ const result: CategoryDTO[] = [];
+
+ categories.forEach((category) => {
+ result.push({
+ categoryId: category.categoryId,
+ description: category.typeCategory,
+ });
+ });
+ return result;
+ }
+
  async function loadRegister(userId: number) {
  try {
  const res = await getRegisterByUserId(userId);
@@ -787,7 +813,31 @@ export default function Debt() {
  </Heading>
  </HStack>
  <Divider mt={2} />
- <DataTableBase columns={columns} data={debts} title="" />
+
+ <Tabs position="relative" variant="unstyled">
+ <TabList>
+ {categoriesDebt.map((category) => (
+ <Tab key={category.categoryId}>{category.description}</Tab>
+ ))}
+ </TabList>
+ <TabIndicator
+ mt="-1.5px"
+ height="2px"
+ bg="secondary.500"
+ borderRadius="1px"
+ />
+ <TabPanels>
+ {debts.map((category) => (
+ <TabPanel key={category.categoryId}>
+ <DataTableBase
+ columns={columns}
+ data={category.debtList}
+ title=""
+ />
+ </TabPanel>
+ ))}
+ </TabPanels>
+ </Tabs>
  </Box>
  {/* LIST DEBTS */}
 

diff --git a/src/utils/errorHandler.ts b/src/utils/errorHandler.ts
@@ -24,10 +24,6 @@ export const errorHandler = (error: AxiosError) : ErrorProps => {
  data.message = dataRes.message != "" && dataRes.message
  ? dataRes.message
  : "Erro no Servidor. Entre em contato com o administrador.";
- } else if (response.status == 400 ) {
- const dataRes = response.data as ErrorProps;
- data.message = "Não é possível deletar uma categoria que está sendo utilizada.";
-
  } else {
  const dataRes = response.data as ErrorProps;