Certiftaskbar (#481)

* Added Taskbar for Changing file Properties (#471) Co-authored-by: Subramani E <[email protected]> * Fix: Build error --------- Co-authored-by: asil mehaboob <[email protected]>
IEDCMEC · Oct 2, 2024 · d4ba60b · d4ba60b
1 parent d7c805c
commit d4ba60b
Show file tree

Hide file tree

Showing 4 changed files with 1,982 additions and 5,268 deletions.
diff --git a/apps/web-admin/package.json b/apps/web-admin/package.json
@@ -20,6 +20,8 @@
     "@mui/icons-material": "^5.15.10",
     "@mui/material": "^5.15.9",
     "@mui/x-data-grid": "^6.19.3",
+    "@next/font": "^14.2.13",
+    "autoprefixer": "10.4.16",
     "@radix-ui/react-slot": "^1.1.0",
     "axios": "^1.5.1",
     "canvas": "^2.11.2",
@@ -36,6 +38,7 @@
     "next": "14.0.4",
     "papaparse": "^5.4.1",
     "react": "18.2.0",
+    "react-color": "^2.19.3",
     "react-csv": "^2.2.2",
     "react-day-picker": "8.10.1",
     "react-dom": "18.2.0",

diff --git a/apps/web-admin/src/components/CertificateUploadBox.jsx b/apps/web-admin/src/components/CertificateUploadBox.jsx
@@ -16,11 +16,18 @@ import {
   ModalFooter,
   Input,
   Select,
+  IconButton,
   useDisclosure,
 } from '@chakra-ui/react';
-// import { Stage, Layer, Image as KonvaImage, Text as KonvaText } from 'react-konva';
+import {
+  MdFormatBold,
+  MdFormatItalic,
+  MdFormatUnderlined,
+  MdAdd,
+  MdRemove,
+  MdDelete,
+} from 'react-icons/md'; // Import MdDelete icon
 import dynamic from 'next/dynamic';
-// import { useEffect } from 'react';
 
 const Stage = dynamic(() => import('react-konva').then((mod) => mod.Stage), { ssr: false });
 const Layer = dynamic(() => import('react-konva').then((mod) => mod.Layer), { ssr: false });
@@ -37,7 +44,6 @@ function CertifcateUploadBox() {
 
   const { isOpen, onOpen, onClose } = useDisclosure();
   const [selectedText, setSelectedText] = useState(null);
-
   const [texts, setTexts] = useState([]); // Store texts on canvas
 
   useEffect(() => {
@@ -108,6 +114,11 @@ function CertifcateUploadBox() {
         y: pointerPosition.y,
         text: 'Double-clicked Text',
         fontSize: 24,
+        fontFamily: 'Arial',
+        color: 'black',
+        isBold: false,
+        isItalic: false,
+        isUnderline: false,
         draggable: true,
       },
     ]);
@@ -118,6 +129,11 @@ function CertifcateUploadBox() {
     onOpen(); // Open modal
   };
 
+  const handleDeleteClick = (textId) => {
+    // Filter out the text with the matching id
+    setTexts((prevTexts) => prevTexts.filter((text) => text.id !== textId));
+  };
+
   const handleModalSubmit = () => {
     // Update the text object
     setTexts((prevTexts) =>
@@ -126,6 +142,27 @@ function CertifcateUploadBox() {
     onClose(); // Close modal
   };
 
+  const handleFontStyleToggle = (style) => {
+    if (style === 'bold') {
+      setSelectedText({ ...selectedText, isBold: !selectedText.isBold });
+    } else if (style === 'italic') {
+      setSelectedText({ ...selectedText, isItalic: !selectedText.isItalic });
+    } else if (style === 'underline') {
+      setSelectedText({ ...selectedText, isUnderline: !selectedText.isUnderline });
+    }
+  };
+
+  const handleFontSizeChange = (action) => {
+    if (action === 'increase') {
+      setSelectedText({ ...selectedText, fontSize: selectedText.fontSize + 2 });
+    } else if (action === 'decrease') {
+      setSelectedText({
+        ...selectedText,
+        fontSize: selectedText.fontSize > 2 ? selectedText.fontSize - 2 : 2,
+      });
+    }
+  };
+
   return (
     <Box
       display="flex"
@@ -175,6 +212,12 @@ function CertifcateUploadBox() {
                         y={textObj.y}
                         text={textObj.text}
                         fontSize={textObj.fontSize}
+                        fontFamily={textObj.fontFamily}
+                        fill={textObj.color}
+                        fontStyle={`${textObj.isBold ? 'bold' : ''} ${
+                          textObj.isItalic ? 'italic' : ''
+                        }`}
+                        textDecoration={textObj.isUnderline ? 'underline' : ''}
                         draggable={textObj.draggable}
                       />
                     ))}
@@ -210,16 +253,23 @@ function CertifcateUploadBox() {
           {texts.length > 0 && (
             <VStack width="100%">
               {texts.map((textObj) => (
-                <Box width="100%" key={textObj.id}>
+                <Box width="100%" key={textObj.id} display="flex" justifyContent="space-between">
                   <Button
                     id="edit-button"
                     colorScheme="teal"
                     size="sm"
-                    width="100%"
+                    width="80%"
                     onClick={() => handleEditClick(textObj)}
                   >
-                    {textObj.id}
+                    Edit {textObj.id}
                   </Button>
+                  <IconButton
+                    icon={<MdDelete />}
+                    colorScheme="red"
+                    size="sm"
+                    aria-label="Delete Text"
+                    onClick={() => handleDeleteClick(textObj.id)} // Delete button logic
+                  />
                 </Box>
               ))}
             </VStack>
@@ -234,35 +284,70 @@ function CertifcateUploadBox() {
           <ModalHeader>Edit Text Properties</ModalHeader>
           <ModalCloseButton />
           <ModalBody>
-            <Input
-              value={selectedText?.text || ''}
-              onChange={(e) => setSelectedText({ ...selectedText, text: e.target.value })}
-              placeholder="Edit text"
-              mb={4}
-            />
-            <Input
-              type="number"
-              value={selectedText?.fontSize || 24}
-              onChange={(e) =>
-                setSelectedText({ ...selectedText, fontSize: parseInt(e.target.value) })
-              }
-              placeholder="Font size"
-              mb={4}
-            />
-            {/* You can add font and color selectors here */}
+            {selectedText && (
+              <>
+                <Input
+                  type="text"
+                  value={selectedText.text}
+                  onChange={(e) => setSelectedText({ ...selectedText, text: e.target.value })}
+                  placeholder="Edit Text"
+                  mb={3}
+                />
+                <Select
+                  value={selectedText.fontFamily}
+                  onChange={(e) => setSelectedText({ ...selectedText, fontFamily: e.target.value })}
+                >
+                  <option value="Arial">Arial</option>
+                  <option value="Roboto">Roboto</option>
+                  <option value="Montserrat">Montserrat</option>
+                  <option value="Poppins">Poppins</option>
+                  <option value="Courier New">Courier New</option>
+                  <option value="Times New Roman">Times New Roman</option>
+                </Select>
+
+                <Box display="flex" justifyContent="space-around" alignItems="center" mt={4}>
+                  <IconButton
+                    icon={<MdFormatBold />}
+                    colorScheme={selectedText.isBold ? 'teal' : 'gray'}
+                    onClick={() => handleFontStyleToggle('bold')}
+                  />
+                  <IconButton
+                    icon={<MdFormatItalic />}
+                    colorScheme={selectedText.isItalic ? 'teal' : 'gray'}
+                    onClick={() => handleFontStyleToggle('italic')}
+                  />
+                  <IconButton
+                    icon={<MdFormatUnderlined />}
+                    colorScheme={selectedText.isUnderline ? 'teal' : 'gray'}
+                    onClick={() => handleFontStyleToggle('underline')}
+                  />
+                </Box>
+
+                <Box display="flex" justifyContent="space-around" alignItems="center" mt={4}>
+                  <IconButton
+                    icon={<MdAdd />}
+                    colorScheme="teal"
+                    onClick={() => handleFontSizeChange('increase')}
+                  />
+                  <Text>{selectedText.fontSize}px</Text>
+                  <IconButton
+                    icon={<MdRemove />}
+                    colorScheme="teal"
+                    onClick={() => handleFontSizeChange('decrease')}
+                  />
+                </Box>
+              </>
+            )}
           </ModalBody>
+
           <ModalFooter>
-            <Button colorScheme="teal" onClick={handleModalSubmit}>
+            <Button colorScheme="blue" onClick={handleModalSubmit}>
               Save
             </Button>
-            <Button variant="ghost" onClick={onClose}>
-              Cancel
-            </Button>
           </ModalFooter>
         </ModalContent>
       </Modal>
     </Box>
-    // <Box></Box>
   );
 }
 

diff --git a/apps/web-admin/src/pages/_document.jsx b/apps/web-admin/src/pages/_document.jsx
@@ -3,7 +3,12 @@ import { Html, Head, Main, NextScript } from 'next/document';
 const Document = () => {
   return (
     <Html lang="en">
-      <Head />
+      <Head>
+        <link
+          href="https://fonts.googleapis.com/css2?family=Arial&family=Roboto&family=Lato&family=Open+Sans&family=Montserrat&family=Oswald&family=Poppins&family=Raleway&family=Roboto+Slab&family=Nunito&family=Ubuntu&display=swap"
+          rel="stylesheet"
+        />
+      </Head>
       <body>
         <Main />
         <NextScript />