Notes

import React, { useEffect, useState } from "react";
import * as GC from "@grapecity/spread-sheets";
import "@grapecity/spread-sheets-print";
import "@grapecity/spread-sheets-shapes";
import "@grapecity/spread-sheets-pivot-addon";
import "@grapecity/spread-sheets-tablesheet";
import "@grapecity/spread-sheets-designer-resources-en";
import "@grapecity/spread-sheets-designer";
import { Designer } from "@grapecity/spread-sheets-designer-react";
import "@grapecity/spread-sheets-designer/styles/gc.spread.sheets.designer.min.css";
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css";
import "./custom.css";
import { useNavigate, useLocation } from "react-router-dom";
import ShareModal from "./ShareModal";
import VersionModal from "./VersionModal";
import { useDispatch, useSelector } from "react-redux";
import {
fetchUser,
saveWorkbookHistory,
fetchLastWorkoobHistoryId,
logoutUsers,
fetchActiveUser,
} from "../actions/workbookHistoryActions";
import * as fs from "fs";

var ref;
var workbook;
var userName;
var UserEmail;
var fileData = [];
var Edata = [];
var permission;
var accessType;
var sheetId;

// const fs = require("fs");

function Spreadsheet() {
const [modalShow, setModalShow] = useState(false);
const [modalIsOpen, setIsOpen] = useState(false);
const [userList, setuserList] = useState([]);
const [config, setConfig] = useState(GC.Spread.Sheets.Designer.DefaultConfig);
const navigate = useNavigate();
const location = useLocation();
const dispatch = useDispatch();
const store = useSelector((state) => state);

if (location.state.bool) {
pageLoaderHistory(location.state.reqData);
}

fileData = location.state.fileData;
UserEmail = location.state.data.data.Lu.Bv;
userName = location.state.data.name;
Edata = location.state.fileData;
permission = location.state.permission;
accessType = location.state.accesType;
sheetId = location.state.sheetid;

console.log("Location", location);
console.log("Store1", store);

useEffect(() => {
var sheet = workbook.getActiveSheet();

sheet.setValue(
store.workbookHistory.lastWorkbookHistoryId.rowNumber,
store.workbookHistory.lastWorkbookHistoryId.columnNumber,
store.workbookHistory.lastWorkbookHistoryId.data
);
}, [store.workbookHistory.lastWorkbookHistoryId]);

useEffect(() => {
if (store.workbookHistory.activeUsers.length) {
const temp = store.workbookHistory.activeUsers?.map((user) => ({
text: user.email,
value: user.id,
}));

setuserList(temp);
}
}, [store.workbookHistory.activeUsers]);

useEffect(() => {
if (userList.length) {
// Add new button to config ribbon tab
const allButtons = config.ribbon[0].buttonGroups.slice(-8);
setConfig((prev) => {
const temp = { ...prev };
temp.ribbon[0].buttonGroups = [
welcome,
userEmail,
historyData,
shareData,
saveData,
refreshData,
logoutUser,
...allButtons,
];
temp.commandMap = {
Welcome: {
title: "Welcome",
text: "Welcome",
iconClass: "ribbon-button-welcome",
bigButton: "true",
commandName: "Welcome",
execute: async (context, propertyName, fontItalicChecked) => {
alert("Welcome to new designer " + userName);
},
},
cmdRfrh: {
title: "refresh data from server",
text: "Refresh",
iconClass: "cmdRfrh",
bigButton: "true",
commandName: "cmdRfrh",
execute: async (context, propertyName, fontItalicChecked) => {
RefershData(ref, fileData);
},
},
cmdSaveData: {
title: "Save data to server",
text: "Save",
iconClass: "cmdSaveData",
bigButton: "true",
commandName: "cmdSaveData",
execute: async (context, propertyName, fontItalicChecked) => {
SaveToDB(ref);
},
enableContext: permission,
},
cmdUserList: {
title: "Active Users",
text: "Active Users",
dropdownList: userList,
type: "dropdown",
iconClass: "cmdUserList",
style: "",
bigButton: "true",
commandName: "cmdUserList",
execute: async (context, propertyName, fontItalicChecked) => {
console.log("Selected Item: " + propertyName);
},
},
cmdShareData: {
title: "Share",
text: "Share",
iconClass: "cmdShareData",
bigButton: "true",
commandName: "cmdShareData",
execute: async (context, propertyName, fontItalicChecked) => {
setModalShow(true);
},
},
cmdHistoryData: {
title: "History",
text: "History",
iconClass: "cmdHistoryData",
bigButton: "true",
commandName: "cmdHistoryData",
execute: async (context, propertyName, fontItalicChecked) => {
setIsOpen(true);
},
},
cmdlogoutUser: {
title: "Logout User",
text: "Logout",
iconClass: "cmdlogoutUser",
bigButton: "true",
commandName: "cmdlogoutUser",
execute: async (context, propertyName, fontItalicChecked) => {
LogoutUser();
},
},
};
return temp;
});
}
}, [userList]);

//fetching userslist
useEffect(() => {
try {
dispatch(fetchUser());
} catch (e) {
console.log(e);
}
}, []);

useEffect(() => {
const requestActiveUser = {
method: "post",
headers: { "Content-Type": "application/json" },
data: JSON.stringify({
created: {
name: UserEmail,
id: sheetId,
},
}),
};
try {
dispatch(fetchActiveUser(requestActiveUser));
} catch (e) {
console.log(e);
}
}, []);

var logoutUser = {
label: "Logout User",
thumbnailClass: "",
commandGroup: {
children: [
{
direction: "vertical",
commands: ["cmdlogoutUser"],
},
],
},
};

var refreshData = {
label: "Refresh Data",
thumbnailClass: "",
commandGroup: {
children: [
{
direction: "vertical",
commands: ["cmdRfrh"],
},
],
},
};

var saveData = {
label: "Save Data",
thumbnailClass: "",
commandGroup: {
children: [
{
direction: "vertical",
commands: ["cmdSaveData"],
},
],
},
};

var userEmail = {
label: "Users",
thumbnailClass: "",
commandGroup: {
children: [
{
direction: "vertical",
commands: ["cmdUserList"],
},
],
},
};

var shareData = {
label: "Share",
thumbnailClass: "",
commandGroup: {
children: [
{
direction: "vertical",
commands: ["cmdShareData"],
},
],
},
};

var historyData = {
label: "History",
thumbnailClass: "",
commandGroup: {
children: [
{
direction: "vertical",
commands: ["cmdHistoryData"],
},
],
},
};

var welcome = {
label: "NewDesigner",
thumbnailClass: "welcome",
commandGroup: {
children: [
{
direction: "vertical",
commands: ["Welcome"],
},
{
direction: "vertical",
commands: ["wel2"],
},
],
},
};

function getDesigner(designer) {
workbook = designer.getWorkbook();
var sheet = workbook.getActiveSheet();
ref = designer;

if (accessType === "R") {
restrictEdit(designer);
}

for (const data in Edata) {
sheet.setValue(
Edata[data].rowNumber,
Edata[data].columnNumber,
Edata[data].data
);
}
}

function pageLoaderHistory(Edata) {
workbook = ref.getWorkbook();
var sheet = workbook.getActiveSheet();
sheet.clear(
0,
0,
1000,
1000,
GC.Spread.Sheets.SheetArea.viewport,
GC.Spread.Sheets.StorageType.data
);
sheet.setValue(Edata.rowNumber, Edata.columnNumber, Edata.data);
}

function SaveToDB(designer) {
var workbook = designer.getWorkbook();
var sheet = workbook.getActiveSheet();
var changes = sheet.getDirtyCells();

exportToJsonFile(changes);

// const requestOptions = {
// method: "post",
// headers: { "Content-Type": "application/json" },
// data: JSON.stringify({
// saveHistory: {
// email: UserEmail,
// workbookId: sheetId,
// row: changes[0].row,
// column: changes[0].col,
// data: changes[0].newValue,
// },
// }),
// };
// dispatch(saveWorkbookHistory(requestOptions));
}

function exportToJsonFile(jsonData) {
let dataStr = JSON.stringify(jsonData);
// let dataUri =
// "data:application/json;charset=utf-8," + encodeURIComponent(dataStr);
// let exportFileDefaultName = userName + "_data.json";
// let linkElement = document.createElement("a");
// linkElement.setAttribute("href", dataUri);
// linkElement.setAttribute("download", exportFileDefaultName);
// linkElement.click();
//console.log("datauri", dataUri);

const parts = [
new Blob(["you construct a file..."], {
type: "text/plain",
}),
" Same way as you do with blob",
new Uint16Array([33]),
];

const file = new File([dataStr], "sample.txt", {
lastModified: new Date(),
type: "text/plain",
});

console.log("file", file);

// write JSON string to a file
// fs.writeFile("data.json", dataStr, (err) => {
// if (err) {
// throw err;
// }
// console.log("JSON data is saved.");
// });

const data = new FormData();

data.append("email", UserEmail);
data.append("id", sheetId);
data.append("file", file);

//var URL = "C:/Users/shivam.bh/Downloads/" + exportFileDefaultName;
//var URL = "C:/Users/shivam.bh/Downloads/Shivam_data.json";
const requestOptions = {
method: "post",
headers: {
"Content-Type": "multipart/form-data",
},
data: data,
};
console.log("requestOptions", requestOptions);
dispatch(saveWorkbookHistory(requestOptions));
}

const RefershData = () => {
dispatch(fetchLastWorkoobHistoryId(sheetId));
};

const LogoutUser = () => {
const requestLogoutUser = {
method: "post",
headers: { "Content-Type": "application/json" },
data: JSON.stringify({
created: {
name: UserEmail,
id: sheetId,
},
}),
};
dispatch(logoutUsers(requestLogoutUser));
navigate("/");
};

//TO RESTRICT USERS TO READ ONLY ACCESS
function restrictEdit(designer) {
var workbook = designer.getWorkbook();
var activeSheet = workbook.getActiveSheet();
activeSheet.options.isProtected = true;
}

return (
<div>
<Designer
styleInfo={{ width: "100%", height: "98vh" }}
config={config}
spreadOptions={{ sheetCount: 3 }}
designerInitialized={(designer) => {
getDesigner(designer);
}}
></Designer>
<ShareModal
show={modalShow}
onHide={() => setModalShow(false)}
sheetId={sheetId}
options={store?.workbookHistory?.users || []}
/>
<VersionModal
show={modalIsOpen}
onHide={() => setIsOpen(false)}
state={location.state}
/>
</div>
);
}

export default Spreadsheet;