Notes

import React, { useContext } from "react";
import GoogleLogin from "react-google-login";
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 { ResponseContext } from "../context/state";
import Popup from "./Popup";
import { useLocation } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";

//Apply License
var sjsLicense = "sjs-distribution-key";

var ref;
var userName = ["Shivam"];
//usernames with the edit access
var userNames = ["Kathiravan"];
// GC.Spread.Sheets.LicenseKey = sjsLicense;
// ExcelIO.LicenseKey = sjsLicense;
var excelIO = new GC.Spread.Excel.IO();
// GC.Spread.Sheets.Designer.LicenseKey = "designer-component-distribution-key";
var workbook;

const newData = [
{ row: 1, col: 1, newValue: "Test" },
{ row: 1, col: 2, newValue: "Highradius" },
{ row: 2, col: 3, newValue: "testing" },
{ row: 3, col: 3, newValue: "testing" },
{ row: 4, col: 3, newValue: "testing" },
{ row: 5, col: 3, newValue: "testing" },
];
function App(props) {
const [modalShow, setModalShow] = React.useState(false);
const location = useLocation();
var config = GC.Spread.Sheets.Designer.DefaultConfig;
const responseContext = useContext(ResponseContext);
console.log(responseContext.response);
const responseGoogle = (response) => {
console.log(response);
userName = response.profileObj.givenName;
console.log(userName);
};

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 shareData = {
label: "Share",
thumbnailClass: "",
commandGroup: {
children: [
{
direction: "vertical",
commands: ["cmdShareData"],
},
],
},
};

// Add new button to config ribbon tab
config.ribbon[0].buttonGroups.unshift(refreshData);
config.ribbon[0].buttonGroups.unshift(saveData);
config.ribbon[0].buttonGroups.unshift(shareData);

config.commandMap = {
Welcome: {
title: "Welcome",
text: "Welcome",
iconClass: "ribbon-button-welcome",
bigButton: "true",
commandName: "Welcome",
execute: async (context, propertyName, fontItalicChecked) => {
alert("Welcome to new designer.");
},
},
cmdRfrh: {
title: "refresh data from server",
text: "Refresh",
iconClass: "cmdRfrh",
bigButton: "true",
commandName: "cmdRfrh",
execute: async (context, propertyName, fontItalicChecked) => {
refershData(ref);
},
},
cmdSaveData: {
title: "Save data to server",
text: "Save",
iconClass: "cmdSaveData",
bigButton: "true",
commandName: "cmdSaveData",
execute: async (context, propertyName, fontItalicChecked) => {
// customize operator
saveToDB(ref);
// editdis(ref);
// alert('Save data successfully.');
},
},
cmdShareData: {
title: "Share",
text: "Share",
iconClass: "cmdShareData",
bigButton: "true",
commandName: "cmdShareData",
execute: async (context, propertyName, fontItalicChecked) => {
// customize operator
setModalShow(true);
},
},
};
config.ribbon[0].buttonGroups.unshift({
label: "Welcome",
thumbnailClass: "welcome",
commandGroup: {
children: [
{
direction: "vertical",
commands: ["Welcome"],
},
// This is custom button ----------------end-------------
],
},
});

var newTab = {
id: "history",
text: "History",
buttonGroups: [
{
label:
,
//"commandGroup" is a must required parameter
commandGroup: {},
},
],
};

// Add new tab to config ribbon
config.ribbon.push(newTab);

return (
<div>
<GoogleLogin
clientId="577732541235-8nh8dh36fpirhf08j5l8c60kakflf3js.apps.googleusercontent.com"
buttonText="LOGIN"
onSuccess={responseGoogle}
onFailure={editdis}
cookiePolicy={"single_host_origin"}
hd="highradius.com"
/>
<Designer
styleInfo={{ width: "100%", height: "98vh" }}
config={config}
spreadOptions={{ sheetCount: 3 }}
designerInitialized={(designer) => {
getDesigner(designer);
}}
></Designer>
<Popup
show={modalShow}
onHide={() => setModalShow(false)}
name={location.state}
/>
</div>
);
}

function getDesigner(designer) {
//this is hosted spread instance
workbook = designer.getWorkbook();
var sheet = workbook.getActiveSheet();

sheet.setValue(1, 1, "Test");

ref = designer;

//read only access
if (!(userNames === userName)) {
var activeSheet = workbook.getActiveSheet();

activeSheet.options.isProtected = true;
}

readTextFile("data.json", function (text) {
var data = JSON.parse(text);
console.log(data);
console.log("readtext");
});
}

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

console.log(changes, userName);

exportToJsonFile(changes);
}
function refershData(designer) {
for (const data in newData) {
workbook = designer.getWorkbook();
var sheet = workbook.getActiveSheet();
const result = fetch("https://jsonplaceholder.typicode.com/todos/1")
.then((response) => response.json())
.then((json) => console.log(json));

console.log(result);
sheet.setValue(
newData[data].row,
newData[data].col,
newData[data].newValue
);
}
}

// fetch('https://example.com?' + new URLSearchParams({
// foo: 'value',
// bar: 2,
// }))

function editdis(designer) {
console.log("FAILED");
workbook = designer.getWorkbook();
var sheet = workbook.getActiveSheet();
sheet.endEdit(true);
sheet.bind(GC.Spread.Sheets.Events.EditChange, function (sender, args) {
if (args.editingText) {
sheet.endEdit(true);
}
});
}

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();
}

function readTextFile(file, callback) {
var rawFile = new XMLHttpRequest();
rawFile.overrideMimeType("application/json");
rawFile.open("GET", file, true);
rawFile.onreadystatechange = function () {
if (rawFile.readyState === 4 && rawFile.status === "200") {
callback(rawFile.responseText);
console.log("rawFile");
}
};
rawFile.send(null);
console.log("func");
}

//usage:
// readTextFile("C:/Users/kathiravan.g/Downloads/data.json", function(text){
// var data = JSON.parse(text);
// console.log(data);
// });

function importJSON(spreadJson) {
var ss = GC.Spread.Sheets.findControl(document.getElementById("ss"));
if (spreadJson.version && spreadJson.sheets) {
// Load the object from the JSON string spreadJSON
ss.fromJSON(spreadJson);
// Focus the workbook component
ss.focus();
}
}

export default App;