From d4ba60bfcae07d51bd388f7fd2fc9c3062d75aa3 Mon Sep 17 00:00:00 2001
From: Subramani E <93091455+subru-37@users.noreply.github.com>
Date: Thu, 3 Oct 2024 00:37:39 +0530
Subject: [PATCH] Certiftaskbar (#481)
* Added Taskbar for Changing file Properties (#471)
Co-authored-by: Subramani E <93091455+subru-37@users.noreply.github.com>
* Fix: Build error
---------
Co-authored-by: asil mehaboob <138790394+AsilMehaboob@users.noreply.github.com>
---
apps/web-admin/package.json | 3 +
.../src/components/CertificateUploadBox.jsx | 139 +-
apps/web-admin/src/pages/_document.jsx | 7 +-
pnpm-lock.yaml | 7101 +++++------------
4 files changed, 1982 insertions(+), 5268 deletions(-)
diff --git a/apps/web-admin/package.json b/apps/web-admin/package.json
index a533dff7..80c22d14 100644
--- 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
index 1120dd13..e1784979 100644
--- 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 (
))}
@@ -210,16 +253,23 @@ function CertifcateUploadBox() {
{texts.length > 0 && (
{texts.map((textObj) => (
-
+
+ }
+ colorScheme="red"
+ size="sm"
+ aria-label="Delete Text"
+ onClick={() => handleDeleteClick(textObj.id)} // Delete button logic
+ />
))}
@@ -234,35 +284,70 @@ function CertifcateUploadBox() {
Edit Text Properties
- setSelectedText({ ...selectedText, text: e.target.value })}
- placeholder="Edit text"
- mb={4}
- />
-
- setSelectedText({ ...selectedText, fontSize: parseInt(e.target.value) })
- }
- placeholder="Font size"
- mb={4}
- />
- {/* You can add font and color selectors here */}
+ {selectedText && (
+ <>
+ setSelectedText({ ...selectedText, text: e.target.value })}
+ placeholder="Edit Text"
+ mb={3}
+ />
+
+
+
+ }
+ colorScheme={selectedText.isBold ? 'teal' : 'gray'}
+ onClick={() => handleFontStyleToggle('bold')}
+ />
+ }
+ colorScheme={selectedText.isItalic ? 'teal' : 'gray'}
+ onClick={() => handleFontStyleToggle('italic')}
+ />
+ }
+ colorScheme={selectedText.isUnderline ? 'teal' : 'gray'}
+ onClick={() => handleFontStyleToggle('underline')}
+ />
+
+
+
+ }
+ colorScheme="teal"
+ onClick={() => handleFontSizeChange('increase')}
+ />
+ {selectedText.fontSize}px
+ }
+ colorScheme="teal"
+ onClick={() => handleFontSizeChange('decrease')}
+ />
+
+
+ )}
+
-
- //
);
}
diff --git a/apps/web-admin/src/pages/_document.jsx b/apps/web-admin/src/pages/_document.jsx
index 0711ae37..dc599557 100644
--- 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 (
-
+