Merge pull request #35 from fga-eps-mds/119-gerar-termo-responsabilidade

119 - gerar termo responsabilidade
fga-eps-mds · Jun 7, 2023 · 15d3539 · 15d3539
2 parents f58fa05 + 5dced99
commit 15d3539
Show file tree

Hide file tree

Showing 13 changed files with 786 additions and 322 deletions.
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "@chakra-ui/react": "^2.4.6",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
+    "@react-pdf/renderer": "^3.1.11",
     "@tanstack/react-query": "^4.3.9",
     "@tanstack/react-query-devtools": "^4.3.9",
     "axios": "^1.2.2",
@@ -47,7 +48,6 @@
     "react-hook-form": "^7.41.5",
     "react-icons": "^4.8.0",
     "react-input-mask": "^2.0.4",
-    "react-pdf": "^7.0.3",
     "react-render-if-visible": "^2.1.1",
     "react-router-dom": "^6.6.1",
     "react-toastify": "^9.1.2",

diff --git a/public/PoliciaCivilLogo.jpeg b/public/PoliciaCivilLogo.jpeg
diff --git a/src/components/action-buttons/back-button/index.tsx b/src/components/action-buttons/back-button/index.tsx
@@ -2,8 +2,6 @@
 /* eslint-disable import/order */
 /* eslint-disable prettier/prettier */
 import React from 'react';
-import { RiEdit2Fill } from 'react-icons/ri';
-import { ActionButton } from '..';
 import { ActionButtonProps } from '../types';
 import { Button } from '@chakra-ui/react';
 
@@ -15,16 +13,8 @@ export function BackButton<Data>({
   ...props
 }: BackButtonProps<Data>) {
   return (
-    <Button variant="tertiary"
-
-              mb="40px"
-              type="submit"
-              paddingX="24"
-              width="sm"
-
-
-            >
-              VOLTAR
-            </Button>
+    <Button variant="tertiary" mb="40px" type="submit" paddingX="24" width="sm">
+      VOLTAR
+    </Button>
   );
-}
+}
diff --git a/src/components/action-buttons/confirm-edit-button/index.tsx b/src/components/action-buttons/confirm-edit-button/index.tsx
@@ -1,8 +1,6 @@
 /* eslint-disable import/order */
 /* eslint-disable prettier/prettier */
 import React from 'react';
-import { RiEdit2Fill } from 'react-icons/ri';
-import { ActionButton } from '..';
 import { ActionButtonProps } from '../types';
 import { Button } from '@chakra-ui/react';
 
@@ -14,15 +12,8 @@ export function ConfirmEditButton<Data>({
   ...props
 }: ConfirmEditButtonProps<Data>) {
   return (
-    <Button
-              mb="40px"
-              type="submit"
-              paddingX="24"
-              width="sm"
-
-            >
-              EDITAR
-            </Button>
-
+    <Button mb="40px" type="submit" paddingX="24" width="sm">
+      EDITAR
+    </Button>
   );
-}
+}
diff --git a/src/components/action-buttons/delete-extensive-button/index.tsx b/src/components/action-buttons/delete-extensive-button/index.tsx
@@ -24,7 +24,6 @@ import {
   useDisclosure,
 } from '@chakra-ui/react';
 import { ActionButtonProps } from '../types';
-import { ActionButton } from '..';
 
 type DeleteButtonProps<Data> = ActionButtonProps<Data>;
 

diff --git a/src/components/movement-form/index.tsx b/src/components/movement-form/index.tsx
@@ -22,7 +22,7 @@ import { api } from '../../config/lib/axios';
 import { ControlledSelect } from '../form-fields/controlled-select';
 import { Input } from '../form-fields/input';
 import { toast } from '@/utils/toast';
-import { movementEquipment } from '@/pages/movements/MovementControl';
+import { movement, movementEquipment } from '@/pages/movements/MovementControl';
 import { EquipmentData } from '@/pages/equipments/EquipmentsControl';
 
 interface equipamentData {
@@ -81,6 +81,10 @@ interface MovementFormProps {
   refreshRequest: boolean;
   setRefreshRequest: React.Dispatch<React.SetStateAction<boolean>>;
   selectedEquipmentToMovement?: EquipmentData[];
+  setSelectedMovement: React.Dispatch<
+    React.SetStateAction<movement | undefined>
+  >;
+  onOpenTerm: () => void;
 }
 
 export default function MovementForm({
@@ -89,6 +93,8 @@ export default function MovementForm({
   refreshRequest,
   setRefreshRequest,
   selectedEquipmentToMovement,
+  setSelectedMovement,
+  onOpenTerm,
 }: MovementFormProps) {
   const {
     control,
@@ -101,9 +107,7 @@ export default function MovementForm({
   const [equipments, setEquipments] = useState<equipamentData[]>([]);
   const [units, setUnits] = useState<unit[]>([]);
   const [materiais, setMateriais] = useState<string[]>([]);
-
   const date = new Date();
-
   const selectedUnit: SelectOption<string> = watch('destination');
 
   const onCloseCallback = useCallback(() => {
@@ -142,6 +146,7 @@ export default function MovementForm({
         toast.success('Movimentação cadastrada com sucesso');
         setRefreshRequest(!refreshRequest);
         onClose();
+        setSelectedMovement(response?.data);
         return;
       }
       toast.error('Erro ao tentar cadastrar o movimentação');
@@ -245,8 +250,8 @@ export default function MovementForm({
             name="destination"
             id="destination"
             options={units.map((unit) => ({
-              value: unit.id,
-              label: unit.name,
+              value: unit?.id,
+              label: unit?.name,
             }))}
             placeholder="Selecione uma opção"
             label="Posto de trabalho"
@@ -360,7 +365,12 @@ export default function MovementForm({
           <Button variant="secondary" onClick={onCloseCallback}>
             Cancelar
           </Button>
-          <Button type="submit" form="movement-register-form" variant="primary">
+          <Button
+            type="submit"
+            form="movement-register-form"
+            variant="primary"
+            onClick={onOpenTerm}
+          >
             Gerar Movimentação
           </Button>
         </Flex>

diff --git a/src/components/movement-register-modal/index.tsx b/src/components/movement-register-modal/index.tsx
@@ -1,6 +1,7 @@
 import MovementForm from '@/components/movement-form';
 import { Modal } from '../modal';
 import { EquipmentData } from '@/pages/equipments/EquipmentsControl';
+import { movement } from '@/pages/movements/MovementControl';
 
 type MovementRegisterModalProps = {
   isOpen: boolean;
@@ -9,6 +10,10 @@ type MovementRegisterModalProps = {
   refreshRequest: boolean;
   selectedEquipmentToMovement?: EquipmentData[];
   setRefreshRequest: React.Dispatch<React.SetStateAction<boolean>>;
+  setSelectedMovement: React.Dispatch<
+    React.SetStateAction<movement | undefined>
+  >;
+  onOpenTerm: () => void;
 };
 
 export function MovementRegisterModal({
@@ -18,6 +23,8 @@ export function MovementRegisterModal({
   refreshRequest,
   setRefreshRequest,
   selectedEquipmentToMovement,
+  setSelectedMovement,
+  onOpenTerm,
 }: MovementRegisterModalProps) {
   return (
     <Modal
@@ -32,6 +39,8 @@ export function MovementRegisterModal({
         refreshRequest={refreshRequest}
         setRefreshRequest={setRefreshRequest}
         selectedEquipmentToMovement={selectedEquipmentToMovement}
+        setSelectedMovement={setSelectedMovement}
+        onOpenTerm={onOpenTerm}
       />
     </Modal>
   );

diff --git a/src/components/movements-modal/index.tsx b/src/components/movements-modal/index.tsx
@@ -12,11 +12,13 @@ import {
   Td,
   TableContainer,
 } from '@chakra-ui/react';
+import { PDFDownloadLink } from '@react-pdf/renderer';
 import { useState } from 'react';
 import { Modal } from '../modal';
 import { Input } from '../form-fields/input';
 import { movement, movementEquipment } from '@/pages/movements/MovementControl';
 import { MovimentacaoTipoMap } from '@/constants/movements';
+import { MovementsPDF } from '../movements-pdf/MovementsPdfDocument';
 
 type MovementsModalProps = {
   isOpen: boolean;
@@ -201,20 +203,20 @@ export function MovementsModal({
                   </Thead>
                   <Tbody fontWeight="normal">
                     {selectedMoviment?.equipments.map(
-                      (equipment: movementEquipment) => (
+                      (equipment?: movementEquipment) => (
                         <Tr
-                          key={equipment.serialNumber}
+                          key={equipment?.serialNumber}
                           background={
-                            materiais.includes(equipment.serialNumber)
+                            materiais.includes(String(equipment?.serialNumber))
                               ? 'rgba(244, 147, 32, 0.2)'
                               : 'white'
                           }
                         >
-                          <Td textAlign="center">{equipment.tippingNumber}</Td>
-                          <Td textAlign="center">{equipment.type}</Td>
-                          <Td textAlign="center">{equipment.brand.name}</Td>
-                          <Td textAlign="center">{equipment.model}</Td>
-                          <Td textAlign="center">{equipment.serialNumber}</Td>
+                          <Td textAlign="center">{equipment?.tippingNumber}</Td>
+                          <Td textAlign="center">{equipment?.type}</Td>
+                          <Td textAlign="center">{equipment?.brand?.name}</Td>
+                          <Td textAlign="center">{equipment?.model}</Td>
+                          <Td textAlign="center">{equipment?.serialNumber}</Td>
                         </Tr>
                       )
                     )}
@@ -252,9 +254,29 @@ export function MovementsModal({
               <Button variant="secondary" onClick={onCloseCallback}>
                 Cancelar
               </Button>
-              <Button type="submit" variant="primary">
-                Gerar termo
-              </Button>
+              <PDFDownloadLink
+                document={
+                  <MovementsPDF
+                    title={
+                      MovimentacaoTipoMap.get(selectedMoviment?.type) as string
+                    }
+                    equipments={selectedMoviment.equipments}
+                    date={selectedMoviment.date}
+                    destination={selectedMoviment.destination.name}
+                  />
+                }
+                fileName={`termo_de_${
+                  MovimentacaoTipoMap.get(
+                    parseInt(String(selectedMoviment?.type), 10) || 0
+                  ) as string
+                }`}
+              >
+                {({ loading }) => (
+                  <Button isLoading={loading} variant="primary">
+                    Gerar termo
+                  </Button>
+                )}
+              </PDFDownloadLink>
             </Flex>
           </form>
         </Flex>