BhawanSingh
/
va-tracker
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

quill copy image create duplicate image & overlap date in PTO and SICK leave with server response show in va-tracker

This commit is contained in:
JaiPandey425 2025-11-27 18:19:54 +05:30
parent d94db40a80
commit 35fa90705b
5 changed files with 394 additions and 154 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/electron/ipc/ipcHandler.ts
View File

@ -346,22 +346,40 @@ ipcMain.handle("create-leave-request", async (event, payload) => {
const response = await api.post("/leave/request", payload);
console.log(" Leave Saved:", response.data);
console.log("Leave Saved:", response);
return { success: true, data: response.data };
return {
success: true,
data: response.data
};
} catch (error) {
console.error("❌ Leave Save Failed:", error);
} catch (error: any) {
console.error("❌ Leave Save Failed:");
let message = "Unknown error";
if (error.response) {
console.log("Status:", error.response.status);
console.log("Message:", error.response.statusText);
console.log("Server Response:", error.response.data);
// Extract the backend message properly
message = error.response.data?.message || error.response.statusText;
} else {
message = error.message;
}
return {
success: false,
error: error || "Unknown error"
message
};
}
});
export const sendTokenExpired = () => {
console.log("⚠️ Sending token-expired event to renderer");

20
src/ui/pages/LeaveAndAdjustments/LeaveAndAdjustments.tsx
View File

@ -25,16 +25,19 @@ const LeaveAndAdjustments: React.FC = () => {
console.log("Leave /sick Payload:", payload);
return
const response = await window.electron.createPTOAndSickLeaveRequest(payload)
console.log("Leave Payload:", response)
if (response.success) {
return true;
return { success: true };
}
return {
success: false,
message: response.message
};
} catch (err) {
console.error(err);
return false;
return { success: false, message: "Request failed" };
} finally {
setIsSubmitting(false);
}
@ -49,8 +52,7 @@ const LeaveAndAdjustments: React.FC = () => {
<div role="tablist" className="tabs tabs-border w-full mb-1 opacity-100">
<a
role="tab"
className={`tab text-xs font-semibold ${
activeTab === "pto" ? "tab-active text-primary" : ""
className={`tab text-xs font-semibold ${activeTab === "pto" ? "tab-active text-primary" : ""
} ${isSubmitting ? "pointer-events-none opacity-50" : ""}`}
onClick={() => setActiveTab("pto")}
>
@ -59,8 +61,7 @@ const LeaveAndAdjustments: React.FC = () => {
<a
role="tab"
className={`tab text-xs font-semibold ${
activeTab === "sick" ? "tab-active text-primary" : ""
className={`tab text-xs font-semibold ${activeTab === "sick" ? "tab-active text-primary" : ""
} ${isSubmitting ? "pointer-events-none opacity-50" : ""}`}
onClick={() => setActiveTab("sick")}
>
@ -69,8 +70,7 @@ const LeaveAndAdjustments: React.FC = () => {
<a
role="tab"
className={`tab text-xs font-semibold ${
activeTab === "adjustment" ? "tab-active text-primary" : ""
className={`tab text-xs font-semibold ${activeTab === "adjustment" ? "tab-active text-primary" : ""
} ${isSubmitting ? "pointer-events-none opacity-50" : ""}`}
onClick={() => setActiveTab("adjustment")}
>

94
src/ui/pages/LeaveAndAdjustments/tabs/AdjustmentTab.tsx
View File

@ -222,28 +222,96 @@ const AdjustmentTab: React.FC<AdjustmentTabProps> = ({ projects }) => {
useEffect(() => {
const editor = quillRef.current?.getEditor();
if (!editor) return;
editor.getModule("clipboard").addMatcher(Node.ELEMENT_NODE, (node: any, delta: any) => {
return delta;
});
// Override image handler in toolbar
editor.getModule("toolbar").handlers.image = () => {
const input = document.createElement("input");
input.setAttribute("type", "file");
input.setAttribute("accept", "image/*");
input.click();
editor.root.addEventListener("paste", async (e: any) => {
const items = e.clipboardData?.items;
if (!items) return;
for (const item of items) {
if (item.type.indexOf("image") === 0) {
const file = item.getAsFile();
input.onchange = async () => {
const file = input.files?.[0];
if (file) {
const base64 = await convertToBase64(file);
const range = editor.getSelection();
if (range) {
editor.insertEmbed(range.index, "image", base64);
}
}
};
};
// COMPLETELY disable Quill's default paste behavior
const disableQuillPaste = () => {
// Remove all existing paste event listeners from Quill
const pasteListeners = (editor.root as any).__pasteHandlers || [];
pasteListeners.forEach((handler: any) => {
editor.root.removeEventListener('paste', handler);
});
// Override the clipboard module to do nothing
const clipboard = editor.getModule('clipboard');
const originalPaste = clipboard.paste;
clipboard.paste = (e: any) => {
// Completely prevent Quill's default paste behavior
e.preventDefault();
e.stopPropagation();
return false;
};
};
disableQuillPaste();
// Our custom paste handler - this is the ONLY handler that will run
const handlePaste = async (e: ClipboardEvent) => {
e.preventDefault();
e.stopPropagation();
const items = e.clipboardData?.items;
if (!items || items.length === 0) return;
// Check for images first
for (let i = 0; i < items.length; i++) {
const item = items[i];
if (item.type.startsWith("image/")) {
const file = item.getAsFile();
if (file) {
try {
const base64 = await convertToBase64(file);
const range = editor.getSelection(true);
if (range !== null) {
// Insert the image
editor.insertEmbed(range.index, "image", base64);
// Move cursor after the image
editor.setSelection(range.index + 1, 0);
}
} catch (error) {
console.error("Error processing pasted image:", error);
}
}
return; // Exit after handling the first image
}
}
// If no images found, handle text
const text = e.clipboardData?.getData('text/plain');
if (text) {
const range = editor.getSelection(true);
if (range !== null) {
editor.insertText(range.index, text);
editor.setSelection(range.index + text.length, 0);
}
}
};
// Add our custom paste handler with high priority
editor.root.addEventListener("paste", handlePaste, true);
return () => {
editor.root.removeEventListener("paste", handlePaste, true);
};
}, []);
const convertToBase64 = (file: File): Promise<string> =>

126
src/ui/pages/LeaveAndAdjustments/tabs/PtoLeaveTab.tsx
View File

@ -3,7 +3,7 @@ import React, { useEffect, useRef, useState } from "react";
import { quillModules } from "../../../utils/quillConfig";
import ReactQuill from "react-quill-new";
import Quill from "quill";
import "quill/dist/quill.snow.css"; // correct CSS
import "quill/dist/quill.snow.css";
interface LeaveFormData {
fromDate: string;
@ -21,43 +21,114 @@ const PtoLeaveTab: React.FC<{
toDate: "",
comment: "",
});
const [serverError, setServerError] = useState("");
const quillRef = useRef<any>(null);
const [errors, setErrors] = useState<Partial<LeaveFormData>>({});
useEffect(() => {
const editor = quillRef.current?.getEditor();
if (!editor) return;
editor.getModule("clipboard").addMatcher(Node.ELEMENT_NODE, (node: any, delta: any) => {
return delta;
});
// Override image handler in toolbar
editor.getModule("toolbar").handlers.image = () => {
const input = document.createElement("input");
input.setAttribute("type", "file");
input.setAttribute("accept", "image/*");
input.click();
editor.root.addEventListener("paste", async (e: any) => {
const items = e.clipboardData?.items;
if (!items) return;
for (const item of items) {
if (item.type.indexOf("image") === 0) {
const file = item.getAsFile();
input.onchange = async () => {
const file = input.files?.[0];
if (file) {
const base64 = await convertToBase64(file);
const range = editor.getSelection();
if (range) {
editor.insertEmbed(range.index, "image", base64);
}
}
};
};
// COMPLETELY disable Quill's default paste behavior
const disableQuillPaste = () => {
// Remove all existing paste event listeners from Quill
const pasteListeners = (editor.root as any).__pasteHandlers || [];
pasteListeners.forEach((handler: any) => {
editor.root.removeEventListener('paste', handler);
});
// Override the clipboard module to do nothing
const clipboard = editor.getModule('clipboard');
const originalPaste = clipboard.paste;
clipboard.paste = (e: any) => {
// Completely prevent Quill's default paste behavior
e.preventDefault();
e.stopPropagation();
return false;
};
};
disableQuillPaste();
// Our custom paste handler - this is the ONLY handler that will run
const handlePaste = async (e: ClipboardEvent) => {
e.preventDefault();
e.stopPropagation();
const items = e.clipboardData?.items;
if (!items || items.length === 0) return;
// Check for images first
for (let i = 0; i < items.length; i++) {
const item = items[i];
if (item.type.startsWith("image/")) {
const file = item.getAsFile();
if (file) {
try {
const base64 = await convertToBase64(file);
const range = editor.getSelection(true);
if (range !== null) {
// Insert the image
editor.insertEmbed(range.index, "image", base64);
// Move cursor after the image
editor.setSelection(range.index + 1, 0);
}
} catch (error) {
console.error("Error processing pasted image:", error);
}
}
return; // Exit after handling the first image
}
}
// If no images found, handle text
const text = e.clipboardData?.getData('text/plain');
if (text) {
const range = editor.getSelection(true);
if (range !== null) {
editor.insertText(range.index, text);
editor.setSelection(range.index + text.length, 0);
}
}
};
// Add our custom paste handler with high priority
editor.root.addEventListener("paste", handlePaste, true);
return () => {
editor.root.removeEventListener("paste", handlePaste, true);
};
}, []);
const convertToBase64 = (file: File): Promise<string> =>
new Promise((resolve) => {
new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result as string);
reader.onerror = reject;
reader.readAsDataURL(file);
});
// ... rest of your component code remains the same
const validate = () => {
const e: Partial<LeaveFormData> = {};
@ -67,26 +138,22 @@ const PtoLeaveTab: React.FC<{
const from = ptoLeave.fromDate ? new Date(ptoLeave.fromDate) : null;
const to = ptoLeave.toDate ? new Date(ptoLeave.toDate) : null;
// From date required
if (!from) {
e.fromDate = "From date is required";
} else if (from < today) {
e.fromDate = "From date cannot be in the past";
}
// To date required
if (!to) {
e.toDate = "To date is required";
} else if (to < today) {
e.toDate = "To date cannot be in the past";
}
// To date must be same or after From date
if (from && to && to < from) {
e.toDate = "To date cannot be before From date";
}
// Comment validation
if (!ptoLeave.comment.trim()) {
e.comment = "Comment required";
}
@ -104,10 +171,9 @@ const PtoLeaveTab: React.FC<{
setPtoLeave(emptyForm);
setErrors({});
// Properly reset the Quill editor
if (quillRef.current) {
const editor = quillRef.current.getEditor();
editor.setContents([]); // Clear editor contents completely
editor.setContents([]);
}
};
@ -119,26 +185,32 @@ const PtoLeaveTab: React.FC<{
};
const handleSubmit = async () => {
setServerError("")
const e = validate();
if (Object.keys(e).length) return setErrors(e);
const success = await submitLeave({
const result = await submitLeave({
dateFrom: ptoLeave.fromDate,
dateTo: ptoLeave.toDate,
leaveType: "PTO",
comment: ptoLeave.comment,
});
if (success) {
if (result.success) {
resetForm();
alert("PTO submitted!");
} else {
setServerError(result.message || "Something went wrong");
}
};
return (
<>
<div className="max-w-4xl space-y-3 ">
<div className="grid grid-cols-2 gap-4">
{/* From Date */}
<div className="form-control">
<label className="label">
@ -186,10 +258,13 @@ const PtoLeaveTab: React.FC<{
onChange={(val) => handleChange('comment', val)}
className="h-60"
/>
</div>
{errors.comment && <p className="text-error text-xs">{errors.comment}</p>}
</div>
</div>
{serverError && (
<p className="text-red-500 font-medium text-center text-xs">{serverError}</p>
)}
<button
onClick={handleSubmit}
@ -203,6 +278,7 @@ const PtoLeaveTab: React.FC<{
)}
</button>
</div>
</>
);
};

108
src/ui/pages/LeaveAndAdjustments/tabs/SickLeaveTab.tsx
View File

@ -19,33 +19,102 @@ const SickLeaveTab: React.FC<{
toDate: '',
comment: ''
});
const [serverError, setServerError] = useState("");
const quillRef = useRef<any>(null);
const [sickErrors, setSickErrors] = useState<Partial<LeaveFormData>>({});
useEffect(() => {
const editor = quillRef.current?.getEditor();
if (!editor) return;
editor.getModule("clipboard").addMatcher(Node.ELEMENT_NODE, (node: any, delta: any) => {
return delta;
});
// Override image handler in toolbar
editor.getModule("toolbar").handlers.image = () => {
const input = document.createElement("input");
input.setAttribute("type", "file");
input.setAttribute("accept", "image/*");
input.click();
editor.root.addEventListener("paste", async (e: any) => {
const items = e.clipboardData?.items;
if (!items) return;
for (const item of items) {
if (item.type.indexOf("image") === 0) {
const file = item.getAsFile();
input.onchange = async () => {
const file = input.files?.[0];
if (file) {
const base64 = await convertToBase64(file);
const range = editor.getSelection();
if (range) {
editor.insertEmbed(range.index, "image", base64);
}
}
};
};
// COMPLETELY disable Quill's default paste behavior
const disableQuillPaste = () => {
// Remove all existing paste event listeners from Quill
const pasteListeners = (editor.root as any).__pasteHandlers || [];
pasteListeners.forEach((handler: any) => {
editor.root.removeEventListener('paste', handler);
});
// Override the clipboard module to do nothing
const clipboard = editor.getModule('clipboard');
const originalPaste = clipboard.paste;
clipboard.paste = (e: any) => {
// Completely prevent Quill's default paste behavior
e.preventDefault();
e.stopPropagation();
return false;
};
};
disableQuillPaste();
// Our custom paste handler - this is the ONLY handler that will run
const handlePaste = async (e: ClipboardEvent) => {
e.preventDefault();
e.stopPropagation();
const items = e.clipboardData?.items;
if (!items || items.length === 0) return;
// Check for images first
for (let i = 0; i < items.length; i++) {
const item = items[i];
if (item.type.startsWith("image/")) {
const file = item.getAsFile();
if (file) {
try {
const base64 = await convertToBase64(file);
const range = editor.getSelection(true);
if (range !== null) {
// Insert the image
editor.insertEmbed(range.index, "image", base64);
// Move cursor after the image
editor.setSelection(range.index + 1, 0);
}
} catch (error) {
console.error("Error processing pasted image:", error);
}
}
return; // Exit after handling the first image
}
}
// If no images found, handle text
const text = e.clipboardData?.getData('text/plain');
if (text) {
const range = editor.getSelection(true);
if (range !== null) {
editor.insertText(range.index, text);
editor.setSelection(range.index + text.length, 0);
}
}
};
// Add our custom paste handler with high priority
editor.root.addEventListener("paste", handlePaste, true);
return () => {
editor.root.removeEventListener("paste", handlePaste, true);
};
}, []);
const convertToBase64 = (file: File): Promise<string> =>
@ -102,6 +171,7 @@ const SickLeaveTab: React.FC<{
};
const handleSubmit = async () => {
setServerError("")
const errors = validateLeaveForm(sickLeave);
if (Object.keys(errors).length > 0) {
@ -109,20 +179,23 @@ const SickLeaveTab: React.FC<{
return;
}
const success = await submitLeave({
const result = await submitLeave({
dateFrom: sickLeave.fromDate,
dateTo: sickLeave.toDate,
leaveType: "SICK",
comment: sickLeave.comment,
});
if (success) {
if (result.success) {
resetForm();
alert("SICK submitted!");
} else {
setServerError(result.message || "Something went wrong");
}
};
return (
<>
<div className="max-w-4xl">
<div className="space-y-3">
<div className="grid grid-cols-2 gap-4">
@ -189,6 +262,10 @@ const SickLeaveTab: React.FC<{
)}
</div>
{serverError && (
<p className="text-red-500 font-medium text-center text-xs">{serverError}</p>
)}
{/* Submit Button */}
<button
onClick={handleSubmit}
@ -203,6 +280,7 @@ const SickLeaveTab: React.FC<{
</button>
</div>
</div>
</>
);
};