From be18134ab46ef8db91c28bbdad4968bc2f728b34 Mon Sep 17 00:00:00 2001 From: K-Kumar-01 <59891164+K-Kumar-01@users.noreply.github.com> Date: Sat, 15 May 2021 17:28:37 +0530 Subject: [PATCH] feat: Document component added Draft PR for debug Signed-off-by: K-Kumar-01 <59891164+K-Kumar-01@users.noreply.github.com> --- package.json | 2 +- src/components/App.js | 8 +- src/components/Document/index.js | 54 ++++++++++ src/components/Document/index.module.css | 38 +++++++ src/components/TemplateLibrary/index.js | 128 ++++++++++++++++++++--- 5 files changed, 212 insertions(+), 18 deletions(-) create mode 100644 src/components/Document/index.js create mode 100644 src/components/Document/index.module.css diff --git a/package.json b/package.json index 5e40991..31882ba 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "build-dev": "webpack --mode development --https false && echo . && echo . && echo . && echo Please use 'build:dev' instead of 'build-dev'.", "dev-server": "webpack-dev-server --mode development", "lint": "eslint src/**/*.{js,jsx}", - "lint:fix": "eslint src/**/*.{js,jsx} --fix", + "lint:fix": "eslint 'src/**/*.{js,jsx}' --fix", "prepare": "husky install", "setup": "npm i && npm run prepare", "start": "office-addin-debugging start manifest.xml", diff --git a/src/components/App.js b/src/components/App.js index e8f5c72..eb1c178 100644 --- a/src/components/App.js +++ b/src/components/App.js @@ -5,6 +5,7 @@ import { SemanticToastContainer } from 'react-semantic-toasts'; import 'react-semantic-toasts/styles/react-semantic-alert.css'; import TemplateLibrary from './TemplateLibrary'; +import Document from './Document'; import './App.css'; /** @@ -16,6 +17,9 @@ import './App.css'; const App = ({ isOfficeInitialized }) => { const [activeNav, setActiveNav] = useState('library'); const [openOnStartup, setOpenOnStartup] = useState(false); + const [deletionTemplate, setDeletionTemplate] = useState(''); + + const [insertedTemplates, setInsertedTemplates] = useState([]); useEffect(() => { if (isOfficeInitialized) { @@ -47,8 +51,8 @@ const App = ({ isOfficeInitialized }) => { }; const navItems = [ - { name: 'document', content: 'Document', component:

Document component goes here.

}, - { name: 'library', content: 'Library', component: }, + { name: 'document', content: 'Document', component: }, + { name: 'library', content: 'Library', component: }, ]; if (!isOfficeInitialized) { diff --git a/src/components/Document/index.js b/src/components/Document/index.js new file mode 100644 index 0000000..06a3e71 --- /dev/null +++ b/src/components/Document/index.js @@ -0,0 +1,54 @@ +import React, { useEffect } from 'react'; +import PropTypes from 'prop-types'; + +import './index.module.css'; + +/** + * Renders the inserted templates into the document. + * + * @param {object} props Properties + * @returns {React.ReactNode} JSX + */ +const DocumentComponent = props => { + const { insertedTemplates, deletionTemplate, setDeletionTemplate, setActiveNav } = props; + + useEffect(()=>{ + if (deletionTemplate) { + setActiveNav('library'); + } + }, [deletionTemplate]); + + /** + * Converts the data into JSX components. + * + * @param {Array} data Data to be rendered + * @returns {Array} JSX array to be rendered + */ + const renderTemplates = data => { + return data.map(d=>
+

{d.name}

+

{d.identifier}

+
+ {setDeletionTemplate(d.identifier);}}> + Remove Template + +
+
); + }; + + return ( +
+ {renderTemplates(insertedTemplates)} +
+ ); +}; + +DocumentComponent.propTypes = { + insertedTemplates: PropTypes.array, + deletionTemplate: PropTypes.string, + setDeletionTemplate: PropTypes.func, + setActiveNav: PropTypes.func, +}; + + +export default DocumentComponent; diff --git a/src/components/Document/index.module.css b/src/components/Document/index.module.css new file mode 100644 index 0000000..5f459e3 --- /dev/null +++ b/src/components/Document/index.module.css @@ -0,0 +1,38 @@ +.fullWidth{ + width:100%; +} + +.templateCard{ + margin: 0.5rem; + border: 1px solid #7B8084; + border-spacing: 0px; + border-radius: 0.25rem; + cursor: pointer; + box-shadow: 0 1px 9px 0 rgba(0,0,0,0.1); +} + +.cardBody{ + padding: 0.5rem; + margin-bottom: 0rem; +} + +.identifier{ + font-size: 1rem; + padding:0.5rem; + margin-bottom: 0rem; + text-transform: uppercase; + font-weight: 600; + color: rgba(0,0,0,0.4); +} +.cardAction{ + background: #F9F9F9; + text-align: center; + padding:0.25rem; + border-bottom-right-radius: 0.25rem; + border-bottom-left-radius: 0.25rem; +} + +.cardAction span:hover{ + color: #3087CB +} + diff --git a/src/components/TemplateLibrary/index.js b/src/components/TemplateLibrary/index.js index 228ff5d..77ef3bd 100644 --- a/src/components/TemplateLibrary/index.js +++ b/src/components/TemplateLibrary/index.js @@ -1,4 +1,5 @@ import React, { useState, useEffect } from 'react'; +import PropTypes from 'prop-types'; import { Loader } from 'semantic-ui-react'; import { toast } from 'react-semantic-toasts'; @@ -18,11 +19,15 @@ const XML_HEADER = ''; /** * Template library Renderer. * + * @param {object} props Properties of the React * @returns {React.FC} Template library */ -const LibraryComponent = () => { +const LibraryComponent = props => { const [templates, setTemplates] = useState(null); const [overallCounter, setOverallCounter] = useState({}); + // const [insTemplates, setInsTemplates] = useState([]); + + const { insertedTemplates, setInsertedTemplates, deletionTemplate, setDeletionTemplate } = props; useEffect(() => { /** @@ -39,6 +44,76 @@ const LibraryComponent = () => { load(); }, []); + useEffect(()=>{ + if (deletionTemplate) { + let temp = [...insertedTemplates]; + temp = temp.filter(template=> template.identifier!==deletionTemplate); + setInsertedTemplates(temp); + // setInsTemplates(temp); + setDeletionTemplate(''); + deleteTemplate(deletionTemplate); + } + }, [deletionTemplate]); + + /** + * Deletes a template from the document. + * + * @param {string} templateIdentifier Identifier for the template to be deleted + */ + const deleteTemplate = async templateIdentifier => { + console.log('template Identifier is', templateIdentifier); + Office.context.document.customXmlParts.getByNamespaceAsync(CUSTOM_XML_NAMESPACE, result => { + if (result.status === Office.AsyncResultStatus.Succeeded) { + const customXmlPart = result.value[0]; + customXmlPart.getNodesAsync('*/*', result => { + if (result.status === Office.AsyncResultStatus.Succeeded) { + let newXml = XML_HEADER + ``; + for (let node=0; node < result.value.length; ++node) { + if (result.value[node].namespaceUri !== templateIdentifier) { + newXml += `