Skip to content
Snippets Groups Projects
Commit 03ce98f0 authored by brunoravera's avatar brunoravera
Browse files

add formalizations

parent 6cc1f54e
No related branches found
No related tags found
No related merge requests found
......@@ -24,9 +24,12 @@
}
}
],
"jsx-a11y/no-autofocus": [ 2, {
"ignoreNonDOM": true
}]
"jsx-a11y/no-autofocus": [
2,
{
"ignoreNonDOM": true
}
]
}
},
"engines": {
......
......@@ -22,11 +22,13 @@
"axios": "^1.6.7",
"formik": "^2.4.5",
"framer-motion": "^9",
"pretty-bytes": "^6.1.1",
"prop-types": "15.8.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-dropzone": "^14.2.3",
"react-query": "^3.39.3",
"react-use": "^17.5.0",
"ts-pattern": "^5.0.8",
"yup": "0.29.3"
},
......
......@@ -21,6 +21,7 @@ import {
Textarea,
Center,
Icon,
Stack,
} from '@chakra-ui/react'
import { useFormik } from 'formik'
import { FaPaperclip } from 'react-icons/fa'
......@@ -30,6 +31,7 @@ import { CreatePatternMutation, GetPatternsQuery } from '../query-builder'
import { CreatePatternSchema, createPatternSchema } from './schema'
import { useAddFormalizations } from './use-add-formalizations'
import { FormalizationsList } from './formalizations-list'
const FORM_ID = 'add-pattern-form'
......@@ -37,9 +39,9 @@ export const AddPatternButton: React.FC<ButtonProps> = () => {
const { isOpen, onClose, onOpen } = useDisclosure()
const queryClient = useQueryClient()
const { formalizations, dropzoneState } = useAddFormalizations({})
const { formalizations, dropzoneState, handleRemoveFormalization } =
useAddFormalizations({})
console.log({ formalizations })
const createMutation = CreatePatternMutation.useMutation({
onSuccess: () => {
queryClient.invalidateQueries(GetPatternsQuery.getKey({}))
......@@ -128,27 +130,33 @@ export const AddPatternButton: React.FC<ButtonProps> = () => {
/>
<FormErrorMessage>{errors.description}</FormErrorMessage>
</FormControl>
<div {...dropzoneState.getRootProps()}>
<Center w="100%">
<input
aria-label="file-upload"
{...dropzoneState.getInputProps()}
/>
<Button
aria-label="add formalization"
variant="unstyled"
justifyContent="flex-start"
iconSpacing="2"
display="flex"
color="gray.500"
fontWeight="500"
fontSize="md"
leftIcon={<Icon as={FaPaperclip} />}
>
Agregar formalizacion
</Button>
</Center>
</div>
<Stack w="full">
<FormalizationsList
formalizations={formalizations}
onRemoveFormalization={handleRemoveFormalization}
/>
<div {...dropzoneState.getRootProps()}>
<Center w="100%">
<input
aria-label="file-upload"
{...dropzoneState.getInputProps()}
/>
<Button
aria-label="add formalization"
variant="unstyled"
justifyContent="flex-start"
iconSpacing="2"
display="flex"
color="gray.500"
fontWeight="500"
fontSize="md"
leftIcon={<Icon as={FaPaperclip} />}
>
Agregar formalizacion
</Button>
</Center>
</div>
</Stack>
</VStack>
</ModalBody>
</form>
......
import * as React from 'react'
import {
Box,
Center,
HStack,
Icon,
IconButton,
List,
ListItem,
Text,
VStack,
} from '@chakra-ui/react'
import prettyBytes from 'pretty-bytes'
import { FaTrash } from 'react-icons/fa'
export type FormalizationsListProps = {
formalizations: File[]
onRemoveFormalization: (index: number) => void
}
export const FormalizationsList: React.FC<FormalizationsListProps> = ({
formalizations,
onRemoveFormalization,
}) => {
return (
<List w="full" spacing="2">
{formalizations.map((file, index) => {
const fileExtension = file.name.split('.')[1] ?? ''
return (
<ListItem
id={`formalization-${index}`}
key={`formalization-${index}`}
display="flex"
border="1px"
borderColor="gray.200"
borderRadius="sm"
bg="white"
width="full"
height="min-content"
mt="0"
minW="0"
flex="1"
alignItems="flex-start"
fontSize="xs"
h="52px"
>
<HStack spacing="0" w="full">
<Center bg="blue.600" borderLeftRadius="base" px="4" h="52px">
<Text
fontWeight="medium"
variant="-1"
color="white"
textTransform="uppercase"
>
{fileExtension}
</Text>
</Center>
<HStack
h="full"
borderColor="gray.200"
borderWidth="px"
borderStyle="solid"
borderRadius="base"
borderLeft="none"
borderLeftRadius="none"
ml="0"
w="full"
minWidth="0"
flex="1"
>
<VStack
justifyContent={file.size ? 'center' : 'flex-start'}
spacing="1"
pl="3"
minW="0"
flex="1"
>
<Text
variant="-1"
isTruncated={true}
w="full"
textAlign="center"
>
{file.name}
</Text>
<Text variant="-2" color="gray.500">
{prettyBytes(file.size ?? 0)}
</Text>
</VStack>
<IconButton
aria-label="remove formalization"
variant="unstyled"
color="blue.400"
onClick={() => onRemoveFormalization(index)}
icon={<Icon as={FaTrash} />}
/>
</HStack>
</HStack>
</ListItem>
)
})}
</List>
)
}
......@@ -8,6 +8,7 @@ export const SIZE_TOO_LARGE = 'size-too-large'
export const useAddFormalizations = ({}): {
dropzoneState: DropzoneState
formalizations: File[]
handleRemoveFormalization: (index: number) => void
} => {
const [files, setFiles] = React.useState<File[]>([])
......@@ -29,5 +30,11 @@ export const useAddFormalizations = ({}): {
},
})
return { dropzoneState, formalizations: files }
const handleRemoveFormalization = (index: number) => {
const filesCopy = [...files]
filesCopy.splice(index, 1)
setFiles(filesCopy)
}
return { dropzoneState, formalizations: files, handleRemoveFormalization }
}
......@@ -1683,7 +1683,7 @@ __metadata:
languageName: node
linkType: hard
 
"@babel/runtime@npm:^7.10.5, @babel/runtime@npm:^7.23.8, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.2, @babel/runtime@npm:^7.7.2":
"@babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.5, @babel/runtime@npm:^7.23.8, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.2, @babel/runtime@npm:^7.7.2":
version: 7.24.0
resolution: "@babel/runtime@npm:7.24.0"
dependencies:
......@@ -8267,6 +8267,13 @@ __metadata:
languageName: node
linkType: hard
 
"@types/js-cookie@npm:^2.2.6":
version: 2.2.7
resolution: "@types/js-cookie@npm:2.2.7"
checksum: 29196c6829982b5efa79117122a7d62cf4bc2f6397ce8eac1539319ff5dce3b44b2d86f2ac064f2ed3488fb24439358f24af6914fde5c5c4bab9a85728a13a6f
languageName: node
linkType: hard
"@types/js-levenshtein@npm:^1.1.1":
version: 1.1.3
resolution: "@types/js-levenshtein@npm:1.1.3"
......@@ -9320,6 +9327,13 @@ __metadata:
languageName: node
linkType: hard
 
"@xobotyi/scrollbar-width@npm:^1.9.5":
version: 1.9.5
resolution: "@xobotyi/scrollbar-width@npm:1.9.5"
checksum: 4ebc79e4f798e2a5e89a5122f8fc4a086f08a92a44ac020599c4fe20d105b7d76ba06c094260b5f386a75e7ce6f6c518d9fc295228b651296b99c4477f986ac4
languageName: node
linkType: hard
"@xtuc/ieee754@npm:^1.2.0":
version: 1.2.0
resolution: "@xtuc/ieee754@npm:1.2.0"
......@@ -11928,7 +11942,7 @@ __metadata:
languageName: node
linkType: hard
 
"copy-to-clipboard@npm:3.3.3":
"copy-to-clipboard@npm:3.3.3, copy-to-clipboard@npm:^3.3.1":
version: 3.3.3
resolution: "copy-to-clipboard@npm:3.3.3"
dependencies:
......@@ -12180,6 +12194,15 @@ __metadata:
languageName: node
linkType: hard
 
"css-in-js-utils@npm:^3.1.0":
version: 3.1.0
resolution: "css-in-js-utils@npm:3.1.0"
dependencies:
hyphenate-style-name: ^1.0.3
checksum: 8bb042e8f7701a7edadc3cce5ce2d5cf41189631d7e2aed194d5a7059b25776dded2a0466cb9da1d1f3fc6c99dcecb51e45671148d073b8a2a71e34755152e52
languageName: node
linkType: hard
"css-loader@npm:6.8.1, css-loader@npm:^6.7.1":
version: 6.8.1
resolution: "css-loader@npm:6.8.1"
......@@ -12253,6 +12276,16 @@ __metadata:
languageName: node
linkType: hard
 
"css-tree@npm:^1.1.2":
version: 1.1.3
resolution: "css-tree@npm:1.1.3"
dependencies:
mdn-data: 2.0.14
source-map: ^0.6.1
checksum: 499a507bfa39b8b2128f49736882c0dd636b0cd3370f2c69f4558ec86d269113286b7df469afc955de6a68b0dba00bc533e40022a73698081d600072d5d83c1c
languageName: node
linkType: hard
"css-tree@npm:^2.2.1":
version: 2.3.1
resolution: "css-tree@npm:2.3.1"
......@@ -14304,6 +14337,13 @@ __metadata:
languageName: node
linkType: hard
 
"fast-loops@npm:^1.1.3":
version: 1.1.3
resolution: "fast-loops@npm:1.1.3"
checksum: ba71c001704c44a617053ed34b1a8c0d2ed9723022eb7b93c98299d9862f93213609b32c9daec7d606625ab318769d11da8bb06e9ddd9c28e3bda1249fb6e36d
languageName: node
linkType: hard
"fast-querystring@npm:^1.0.0, fast-querystring@npm:^1.1.1, fast-querystring@npm:^1.1.2":
version: 1.1.2
resolution: "fast-querystring@npm:1.1.2"
......@@ -14320,6 +14360,13 @@ __metadata:
languageName: node
linkType: hard
 
"fast-shallow-equal@npm:^1.0.0":
version: 1.0.0
resolution: "fast-shallow-equal@npm:1.0.0"
checksum: 526c393c011ab5a0ca5a36c5ea25c9730acd027503ccbec6c7825397ab9375f51f67f14c8829b4c4b1ccccede695391dd14863a15e40a37fc4af08c1440a1b66
languageName: node
linkType: hard
"fast-uri@npm:^2.0.0, fast-uri@npm:^2.1.0, fast-uri@npm:^2.2.0":
version: 2.3.0
resolution: "fast-uri@npm:2.3.0"
......@@ -14343,6 +14390,13 @@ __metadata:
languageName: node
linkType: hard
 
"fastest-stable-stringify@npm:^2.0.2":
version: 2.0.2
resolution: "fastest-stable-stringify@npm:2.0.2"
checksum: abbe5ff48f13f5819e7312dbb38bae5d9960694cffd315b464df9adcd02a8fa7e9eec32c314655674c7134905c544b7a0c14b05bfbe30b3f678609bebc9fecb9
languageName: node
linkType: hard
"fastify-plugin@npm:^4.0.0, fastify-plugin@npm:^4.5.0":
version: 4.5.1
resolution: "fastify-plugin@npm:4.5.1"
......@@ -15978,6 +16032,13 @@ __metadata:
languageName: node
linkType: hard
 
"hyphenate-style-name@npm:^1.0.3":
version: 1.0.4
resolution: "hyphenate-style-name@npm:1.0.4"
checksum: b19c3e2cd1dc426f6f893752fec08140abf79058a1b6238422e45373ed81389f02e1a2ba2ef4e9b2430d4e900a0f5ba12307de82320604e81ac1b722abd2ee62
languageName: node
linkType: hard
"iconv-lite@npm:0.4.24, iconv-lite@npm:^0.4.24":
version: 0.4.24
resolution: "iconv-lite@npm:0.4.24"
......@@ -16121,6 +16182,16 @@ __metadata:
languageName: node
linkType: hard
 
"inline-style-prefixer@npm:^7.0.0":
version: 7.0.0
resolution: "inline-style-prefixer@npm:7.0.0"
dependencies:
css-in-js-utils: ^3.1.0
fast-loops: ^1.1.3
checksum: d19eb485961854c5e00152b351a0d161b1a8d80d415bab2ba79ad10059d03843bc1e71415d265f1ec10857f5dd4a75c2491fced08eb0c5883cf42c8a9dccb473
languageName: node
linkType: hard
"inquirer@npm:^8.0.0, inquirer@npm:^8.2.0":
version: 8.2.6
resolution: "inquirer@npm:8.2.6"
......@@ -17407,6 +17478,13 @@ __metadata:
languageName: node
linkType: hard
 
"js-cookie@npm:^2.2.1":
version: 2.2.1
resolution: "js-cookie@npm:2.2.1"
checksum: ee67fc0f8495d0800b851910b5eb5bf49d3033adff6493d55b5c097ca6da46f7fe666b10e2ecb13cfcaf5b88d71c205ce00a7e646de791689bfd053bbb36a376
languageName: node
linkType: hard
"js-levenshtein@npm:^1.1.6":
version: 1.1.6
resolution: "js-levenshtein@npm:1.1.6"
......@@ -18446,6 +18524,13 @@ __metadata:
languageName: node
linkType: hard
 
"mdn-data@npm:2.0.14":
version: 2.0.14
resolution: "mdn-data@npm:2.0.14"
checksum: 67241f8708c1e665a061d2b042d2d243366e93e5bf1f917693007f6d55111588b952dcbfd3ea9c2d0969fb754aad81b30fdcfdcc24546495fc3b24336b28d4bd
languageName: node
linkType: hard
"mdn-data@npm:2.0.28":
version: 2.0.28
resolution: "mdn-data@npm:2.0.28"
......@@ -19022,6 +19107,25 @@ __metadata:
languageName: node
linkType: hard
 
"nano-css@npm:^5.6.1":
version: 5.6.1
resolution: "nano-css@npm:5.6.1"
dependencies:
"@jridgewell/sourcemap-codec": ^1.4.15
css-tree: ^1.1.2
csstype: ^3.1.2
fastest-stable-stringify: ^2.0.2
inline-style-prefixer: ^7.0.0
rtl-css-js: ^1.16.1
stacktrace-js: ^2.0.2
stylis: ^4.3.0
peerDependencies:
react: "*"
react-dom: "*"
checksum: 7328c973852d2471bd154c61d21392a3d6357f276a7a090b8a179fb06d71ba58c987b04c0bd80efebd87aa4f433428a25e37820e65484b3c4c44b84339b99d87
languageName: node
linkType: hard
"nano-time@npm:1.0.0":
version: 1.0.0
resolution: "nano-time@npm:1.0.0"
......@@ -20579,6 +20683,13 @@ __metadata:
languageName: node
linkType: hard
 
"pretty-bytes@npm:^6.1.1":
version: 6.1.1
resolution: "pretty-bytes@npm:6.1.1"
checksum: c7a660b933355f3b4587ad3f001c266a8dd6afd17db9f89ebc50812354bb142df4b9600396ba5999bdb1f9717300387dc311df91895c5f0f2a1780e22495b5f8
languageName: node
linkType: hard
"pretty-error@npm:^4.0.0":
version: 4.0.0
resolution: "pretty-error@npm:4.0.0"
......@@ -21298,6 +21409,41 @@ __metadata:
languageName: node
linkType: hard
 
"react-universal-interface@npm:^0.6.2":
version: 0.6.2
resolution: "react-universal-interface@npm:0.6.2"
peerDependencies:
react: "*"
tslib: "*"
checksum: 97c32ecb7a425c3bcaa92dcf84c46146b49610d928efde9e9ee5518c475a0db942f01634dd490e4f42fcd95cc2f49657c1b96dcef96423c06f077147fe1968ab
languageName: node
linkType: hard
"react-use@npm:^17.5.0":
version: 17.5.0
resolution: "react-use@npm:17.5.0"
dependencies:
"@types/js-cookie": ^2.2.6
"@xobotyi/scrollbar-width": ^1.9.5
copy-to-clipboard: ^3.3.1
fast-deep-equal: ^3.1.3
fast-shallow-equal: ^1.0.0
js-cookie: ^2.2.1
nano-css: ^5.6.1
react-universal-interface: ^0.6.2
resize-observer-polyfill: ^1.5.1
screenfull: ^5.1.0
set-harmonic-interval: ^1.0.1
throttle-debounce: ^3.0.1
ts-easing: ^0.2.0
tslib: ^2.1.0
peerDependencies:
react: "*"
react-dom: "*"
checksum: b2e606338f329f8f26bccbd1ae428cf63e1d9b4a940cb327823270955a2aae35972be745d333d1a1bd0276a3650038d1f7f6ae1077af5cccba8234a3e7376754
languageName: node
linkType: hard
"react@npm:18.2.0":
version: 18.2.0
resolution: "react@npm:18.2.0"
......@@ -21700,6 +21846,13 @@ __metadata:
languageName: node
linkType: hard
 
"resize-observer-polyfill@npm:^1.5.1":
version: 1.5.1
resolution: "resize-observer-polyfill@npm:1.5.1"
checksum: 5e882475067f0b97dc07e0f37c3e335ac5bc3520d463f777cec7e894bb273eddbfecb857ae668e6fb6881fd6f6bb7148246967172139302da50fa12ea3a15d95
languageName: node
linkType: hard
"resolve-cwd@npm:^3.0.0":
version: 3.0.0
resolution: "resolve-cwd@npm:3.0.0"
......@@ -21958,6 +22111,15 @@ __metadata:
languageName: unknown
linkType: soft
 
"rtl-css-js@npm:^1.16.1":
version: 1.16.1
resolution: "rtl-css-js@npm:1.16.1"
dependencies:
"@babel/runtime": ^7.1.2
checksum: 4b81ef50e50c97455d61c9bb576e2892651c79bac5d0c52b4123ebb9d6a2c5144590a79c9db0a3212a81b4eb83bf317e03637220f20b387a37b96cbac324d3d2
languageName: node
linkType: hard
"run-async@npm:^2.4.0":
version: 2.4.1
resolution: "run-async@npm:2.4.1"
......@@ -22124,6 +22286,13 @@ __metadata:
languageName: node
linkType: hard
 
"screenfull@npm:^5.1.0":
version: 5.2.0
resolution: "screenfull@npm:5.2.0"
checksum: 86fd49983e2edc153ee2e674a570c711cb0961a9cacca659309f79636ccc8ca8a0b830ea4dacdae7403a8bb7ba6affd5bcdce053aa97782961247a49bfd2ba68
languageName: node
linkType: hard
"scuid@npm:^1.1.0":
version: 1.1.0
resolution: "scuid@npm:1.1.0"
......@@ -22298,6 +22467,13 @@ __metadata:
languageName: node
linkType: hard
 
"set-harmonic-interval@npm:^1.0.1":
version: 1.0.1
resolution: "set-harmonic-interval@npm:1.0.1"
checksum: 49014d928a62c8418507bf66ffef7066783e8fb19f76e955318bbae5a8c4b56e1a7176b370f9040ef9de51531aa522a3f96fa5c47b1534635aa577ff7c12f9c6
languageName: node
linkType: hard
"set-value@npm:^2.0.0, set-value@npm:^2.0.1":
version: 2.0.1
resolution: "set-value@npm:2.0.1"
......@@ -22656,6 +22832,13 @@ __metadata:
languageName: node
linkType: hard
 
"source-map@npm:0.5.6":
version: 0.5.6
resolution: "source-map@npm:0.5.6"
checksum: beb2c5974bb58954d75e86249953d47ae16f7df1a8531abb9fcae0cd262d9fa09c2db3a134e20e99358b1adba42b6b054a32c8e16b571b3efcf6af644c329f0d
languageName: node
linkType: hard
"source-map@npm:0.6.1, source-map@npm:^0.6.0, source-map@npm:^0.6.1, source-map@npm:~0.6.0, source-map@npm:~0.6.1":
version: 0.6.1
resolution: "source-map@npm:0.6.1"
......@@ -22802,6 +22985,15 @@ __metadata:
languageName: node
linkType: hard
 
"stack-generator@npm:^2.0.5":
version: 2.0.10
resolution: "stack-generator@npm:2.0.10"
dependencies:
stackframe: ^1.3.4
checksum: c3f6f6c580488e65c0fee806a57f6ae4b79e6435f144be471c1f20328a8d9d8492d4f3beed31840f6dae03e2633325e2764fd3aca5c3126a0639e7c9ddfa45ce
languageName: node
linkType: hard
"stack-utils@npm:^2.0.3":
version: 2.0.6
resolution: "stack-utils@npm:2.0.6"
......@@ -22818,6 +23010,27 @@ __metadata:
languageName: node
linkType: hard
 
"stacktrace-gps@npm:^3.0.4":
version: 3.1.2
resolution: "stacktrace-gps@npm:3.1.2"
dependencies:
source-map: 0.5.6
stackframe: ^1.3.4
checksum: 0dcc1aa46e364a2b4d1eabce4777fecf337576a11ee3cfc92f07b9ec79ccb76810752431eeb9771289d250d0bb58dbe19a178b96bf7b2e9f773334d03aa96bb9
languageName: node
linkType: hard
"stacktrace-js@npm:^2.0.2":
version: 2.0.2
resolution: "stacktrace-js@npm:2.0.2"
dependencies:
error-stack-parser: ^2.0.6
stack-generator: ^2.0.5
stacktrace-gps: ^3.0.4
checksum: 9a10c222524ca03690bcb27437b39039885223e39320367f2be36e6f750c2d198ae99189869a22c255bf60072631eb609d47e8e33661e95133686904e01121ec
languageName: node
linkType: hard
"stacktracey@npm:2.1.8":
version: 2.1.8
resolution: "stacktracey@npm:2.1.8"
......@@ -23169,6 +23382,13 @@ __metadata:
languageName: node
linkType: hard
 
"stylis@npm:^4.3.0":
version: 4.3.1
resolution: "stylis@npm:4.3.1"
checksum: 33e8ebd2bfa5f0bd0215f718dc2d3be896e1d00c5bcaeb9a4ae03cf239db6867af9eee230f57229bf1c29499357073ba3e6b547484ba1db2f5de1e8be7d4eee9
languageName: node
linkType: hard
"supports-color@npm:^5.3.0, supports-color@npm:^5.5.0":
version: 5.5.0
resolution: "supports-color@npm:5.5.0"
......@@ -23487,6 +23707,13 @@ __metadata:
languageName: node
linkType: hard
 
"throttle-debounce@npm:^3.0.1":
version: 3.0.1
resolution: "throttle-debounce@npm:3.0.1"
checksum: c8e558479463b7ed8bac30d6b10cc87abd1c9fc64edfce2db4109be1a04acaef5d2d0557f49c1a3845ea07d9f79e6e0389b1b60db0a77c44e5b7a1216596f285
languageName: node
linkType: hard
"through2@npm:^2.0.0, through2@npm:^2.0.1, through2@npm:^2.0.3":
version: 2.0.5
resolution: "through2@npm:2.0.5"
......@@ -23724,6 +23951,13 @@ __metadata:
languageName: node
linkType: hard
 
"ts-easing@npm:^0.2.0":
version: 0.2.0
resolution: "ts-easing@npm:0.2.0"
checksum: 84ec20192310c697ff890ca2e0625e131a32596a7c5956326c9632faca9037abf2dd3de4d81ac358ae9f26a6a2cfe2300f13756b26995f753d882e3d0463e327
languageName: node
linkType: hard
"ts-invariant@npm:^0.10.3":
version: 0.10.3
resolution: "ts-invariant@npm:0.10.3"
......@@ -24769,11 +25003,13 @@ __metadata:
axios: ^1.6.7
formik: ^2.4.5
framer-motion: ^9
pretty-bytes: ^6.1.1
prop-types: 15.8.1
react: 18.2.0
react-dom: 18.2.0
react-dropzone: ^14.2.3
react-query: ^3.39.3
react-use: ^17.5.0
ts-pattern: ^5.0.8
yup: 0.29.3
languageName: unknown
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment