Merge branch 'sosynpl-uploadfile' into sosynpl-validation

Wappizy · Aug 6, 2024 · a288e23 · a288e23
2 parents baa024b + a8e67db
commit a288e23
Show file tree

Hide file tree

Showing 5 changed files with 144 additions and 21 deletions.
diff --git a/studio-test/src/dependencies/custom-components/UploadFile.tsx b/studio-test/src/dependencies/custom-components/UploadFile.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay, Text } from '@chakra-ui/react'
+import { Box, Button, Flex, Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay, Text } from '@chakra-ui/react'
 import React, { useState, useEffect } from 'react';
 import axios from 'axios'
 import styled from '@emotion/styled'
@@ -25,12 +25,18 @@ const uploadFileToS3 = (file: File) => {
 const UploadFile = ({
   model,
   notifmsg,
-  okmsg = 'Ressource ajoutée',
+  okmsg = '',
   komsg = 'Échec ajout ressource',
   prvmsg = '',
   previewmsg,
   preview,
   previewtype = false,
+  buttonbg,
+  buttonhoverbg,
+  buttoncolor,
+  buttonhovercolor,
+  border,
+  borderRadius,
   dataSource,
   attribute,
   value,
@@ -48,6 +54,12 @@ const UploadFile = ({
   previewmsg: boolean
   preview: boolean
   previewtype: boolean
+  buttonbg : string
+  buttonhoverbg : string
+  buttoncolor : string
+  buttonhovercolor : string
+  border : string
+  borderRadius : string
   dataSource: { _id: null } | null
   attribute: string
   value: string
@@ -151,9 +163,11 @@ const UploadFile = ({
     setPreviewOpen(!isPreviewOpen)
   }
 
+  console.log(border, borderRadius, '**********')
+
   return (
-    <Box>
-      <Box {...pr} data-value={s3File} display='flex' flexDirection='row' position={'relative'} alignItems={'center'}>
+    <>
+      <Flex {...pr} data-value={s3File}>
         <form id="uploadressource">
           <UploadZone>
             <input type="file" onChange={onFileNameChange} />
@@ -178,7 +192,18 @@ const UploadFile = ({
         {isLoading && <Loading />}
 
         {preview && previewtype && s3File &&(
-          <Button {...props} ml={2} onClick={togglePreview}>Preview</Button>
+          <Button 
+            {...props} ml={2} 
+            color={buttoncolor}
+            backgroundColor={buttonbg} 
+            _hover={
+              { backgroundColor: buttonhoverbg,
+                color: buttonhovercolor,
+               }
+            }
+            border={border}
+            borderRadius={borderRadius}
+            onClick={togglePreview}>Visualiser</Button>
         )}
 
         {/* Modal for previewing the media */}
@@ -194,17 +219,17 @@ const UploadFile = ({
             </ModalContent>
           </Modal>
         )}
-      </Box>
+      </Flex>
       {preview && !previewtype && (
-        <Box
+        <Flex
         width='10%'
         height='10%'>
         <Media 
           src={s3File}
           ></Media>
-        </Box>
+        </Flex>
       )}
-    </Box>
+    </>
   )
 }
 

diff --git a/studio/src/components/inspector/panels/styles/BorderPanel.tsx b/studio/src/components/inspector/panels/styles/BorderPanel.tsx
@@ -3,14 +3,24 @@ import { Box, Input } from '@chakra-ui/react'
 import FormControl from '~components/inspector/controls/FormControl'
 import useBreakpoints from '~hooks/useBreakpoints'
 
-const BorderPanel = () => {
+const BorderPanel = ({ border, borderRadius, setBorder, setBorderRadius }) => {
   const {
     responsiveValues,
     settledBreakpoints,
     handleBreakpoints,
     AddABreakpoint,
   } = useBreakpoints(['border', 'borderRadius'])
 
+  const handleBorderChange = (breakpoint, value) => {
+    handleBreakpoints('border', breakpoint, value)
+    setBorder(value)
+  }
+
+  const handleBorderRadiusChange = (breakpoint, value) => {
+    handleBreakpoints('borderRadius', breakpoint, value)
+    setBorderRadius(value)
+  }
+
   return (
     <>
       {settledBreakpoints.map((breakpoint: string, i: number) => (

diff --git a/studio/src/custom-components/UploadFile/UploadFilePanel.tsx b/studio/src/custom-components/UploadFile/UploadFilePanel.tsx
@@ -1,13 +1,20 @@
-import React, { memo } from 'react'
+import React, { memo, useState } from 'react'
 import SwitchControl from '~components/inspector/controls/SwitchControl'
 import usePropsSelector from '~hooks/usePropsSelector'
 import TextControl from '~components/inspector/controls/TextControl'
+import { Accordion } from '@chakra-ui/react'
+import AccordionContainer from '~components/inspector/AccordionContainer'
+import ColorsControl from '~components/inspector/controls/ColorsControl'
+import BorderPanel from '~components/inspector/panels/styles/BorderPanel'
 
 const UploadFilePanel = () => {
 
   const noticemsg = usePropsSelector('notifmsg')
-  const previewmsg = usePropsSelector('previewmsg')
   const preview = usePropsSelector('preview')
+  const previewType = usePropsSelector('previewtype')
+
+  const [border, setBorder] = useState('')
+  const [borderRadius, setBorderRadius] = useState('')
 
   return (
     <>
@@ -21,6 +28,43 @@ const UploadFilePanel = () => {
       {preview && (
         <SwitchControl label="Miniature/Modal" name="previewtype" />
       )}
+
+      {preview && previewType &&(
+        <Accordion allowMultiple>
+          <AccordionContainer title="Button Style">
+          <ColorsControl
+              withFullColor
+              label="Button Color"
+              name="buttoncolor"
+              enableHues
+            />
+            <ColorsControl
+              withFullColor
+              label="Button Background Color"
+              name="buttonbg"
+              enableHues
+            />
+            <ColorsControl
+              withFullColor
+              label="Button Hover Color"
+              name="buttonhovercolor"
+              enableHues
+            />
+            <ColorsControl
+              withFullColor
+              label="Button Hover Background Color"
+              name="buttonhoverbg"
+              enableHues
+            />
+            <BorderPanel
+              border={border}
+              borderRadius={borderRadius}
+              setBorder={setBorder}
+              setBorderRadius={setBorderRadius}
+            />
+          </AccordionContainer>
+        </Accordion>
+      )}
     </>
   )
 }

diff --git a/studio/src/dependencies/custom-components/UploadFile.tsx b/studio/src/dependencies/custom-components/UploadFile.tsx
@@ -1,4 +1,4 @@
-import { Box, Button, Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay, Text } from '@chakra-ui/react'
+import { Box, Button, Flex, Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay, Text } from '@chakra-ui/react'
 import React, { useState, useEffect } from 'react';
 import axios from 'axios'
 import styled from '@emotion/styled'
@@ -25,12 +25,18 @@ const uploadFileToS3 = (file: File) => {
 const UploadFile = ({
   model,
   notifmsg,
-  okmsg = 'Ressource ajoutée',
+  okmsg = '',
   komsg = 'Échec ajout ressource',
   prvmsg = '',
   previewmsg,
   preview,
   previewtype = false,
+  buttonbg,
+  buttonhoverbg,
+  buttoncolor,
+  buttonhovercolor,
+  border,
+  borderRadius,
   dataSource,
   attribute,
   value,
@@ -48,6 +54,12 @@ const UploadFile = ({
   previewmsg: boolean
   preview: boolean
   previewtype: boolean
+  buttonbg : string
+  buttonhoverbg : string
+  buttoncolor : string
+  buttonhovercolor : string
+  border : string
+  borderRadius : string
   dataSource: { _id: null } | null
   attribute: string
   value: string
@@ -151,9 +163,11 @@ const UploadFile = ({
     setPreviewOpen(!isPreviewOpen)
   }
 
+  console.log(border, borderRadius, '**********')
+
   return (
-    <Box>
-      <Box {...pr} data-value={s3File} display='flex' flexDirection='row' position={'relative'} alignItems={'center'}>
+    <>
+      <Flex {...pr} data-value={s3File}>
         <form id="uploadressource">
           <UploadZone>
             <input type="file" onChange={onFileNameChange} />
@@ -178,7 +192,18 @@ const UploadFile = ({
         {isLoading && <Loading />}
 
         {preview && previewtype && s3File &&(
-          <Button {...props} ml={2} onClick={togglePreview}>Preview</Button>
+          <Button 
+            {...props} ml={2} 
+            color={buttoncolor}
+            backgroundColor={buttonbg} 
+            _hover={
+              { backgroundColor: buttonhoverbg,
+                color: buttonhovercolor,
+               }
+            }
+            border={border}
+            borderRadius={borderRadius}
+            onClick={togglePreview}>Visualiser</Button>
         )}
 
         {/* Modal for previewing the media */}
@@ -194,17 +219,17 @@ const UploadFile = ({
             </ModalContent>
           </Modal>
         )}
-      </Box>
+      </Flex>
       {preview && !previewtype && (
-        <Box
+        <Flex
         width='10%'
         height='10%'>
         <Media 
           src={s3File}
           ></Media>
-        </Box>
+        </Flex>
       )}
-    </Box>
+    </>
   )
 }
 

diff --git a/studio/yarn.lock b/studio/yarn.lock
@@ -2709,6 +2709,11 @@ atob@^2.1.2:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
+autobind-decorator@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/autobind-decorator/-/autobind-decorator-2.4.0.tgz#ea9e1c98708cf3b5b356f7cf9f10f265ff18239c"
+  integrity sha512-OGYhWUO72V6DafbF8PM8rm3EPbfuyMZcJhtm5/n26IDwO18pohE4eNazLoCGhPiXOCD0gEGmrbU3849QvM8bbw==
+
 available-typed-arrays@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz#92f95616501069d07d10edb2fc37d3e1c65123b7"
@@ -6221,6 +6226,20 @@ jmespath@0.16.0:
   resolved "https://registry.yarnpkg.com/jmespath/-/jmespath-0.16.0.tgz#b15b0a85dfd4d930d43e69ed605943c802785076"
   integrity sha512-9FzQjJ7MATs1tSpnco1K6ayiYE3figslrXA72G2HQ/n76RzvYlofyi5QM+iX4YRs/pu3yzxlVQSST23+dMDknw==
 
+jodit-react@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/jodit-react/-/jodit-react-4.1.2.tgz#61ef1d6fa1f37cde7b71f666da8be9f6fb70f913"
+  integrity sha512-Hs1evpM1IK5zvy/5m5Gk819L8aC+9EmEdQvCoLHVUr/R3vtH4nYFD6wsMRj3ur3J4ZHhaSBjt0N3R7ggwP405Q==
+  dependencies:
+    jodit "^4.2.10"
+
+jodit@^4.2.10:
+  version "4.2.27"
+  resolved "https://registry.yarnpkg.com/jodit/-/jodit-4.2.27.tgz#fd6b39a968bd474210e8ab78fc463cdb206d3a6d"
+  integrity sha512-cqqeunB3HMElnocVhs5Qq2bhgpMIT2vKQPBpKcOTWKvX6GJ0GYAIneMEf43lphJuo+119CvBE8YgljD5iTfsAQ==
+  dependencies:
+    autobind-decorator "^2.4.0"
+
 jquery@^3.4.1:
   version "3.6.2"
   resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.2.tgz#8302bbc9160646f507bdf59d136a478b312783c4"