changes unlock save button

pepfar-datim · Mar 19, 2024 · 15651e7 · 15651e7
1 parent b6103b2
commit 15651e7
Show file tree

Hide file tree

Showing 19 changed files with 85 additions and 98 deletions.
diff --git a/edit/index.html b/edit/index.html
@@ -84,10 +84,25 @@
         cursor: pointer;
         letter-spacing: 0.5px;
       }
-      #save:hover{
+      #save_button:hover{
         border-color: rgb(13, 71, 161)!important;
         background: linear-gradient(rgb(5, 79, 163) 0%, rgb(3, 71, 147) 100%) rgb(33, 83, 159)!important;
       }
+      #save_button:disabled{
+        opacity: 0.5;
+        cursor: not-allowed;
+        position: relative;
+      }
+
+      #save_button:disabled:hover:before{
+        content: attr(data-text);
+        position: absolute;
+        color: black;
+        top: 0px;
+        left: -150px;
+        line-height: 35px;
+      }
+
       #cancel_button {
         background: linear-gradient(rgb(211, 47, 47) 0%, rgb(183, 28, 28) 100%) rgb(185, 36, 43);
       }
@@ -102,9 +117,9 @@
     </style>
   </head>
   <body>
-    <span style="float: left;" id="documentation"><a href="https://github.com/pepfar-datim/dashboard-information-widget/blob/main/README.md" target="_blank" id="documentation_link">Documentation for the Dashboard Information widget can be found here.</a></span>
+    <span style="float: left;" id="documentation"><a href="https://github.com/pepfar-datim/dashboard-information-widget" target="_blank" id="documentation_link">Documentation for the Dashboard Information widget can be found here.</a></span>
     <div id="buttonContainer">
-      <button class="button" id="save">Save</button>
+      <button class="button" id="save_button" disabled data-text="No changes to save." >Save</button>
       <a id="cancel_link" href=""><button class="button" id="cancel_button">Cancel</button></a>
     </div>
     <div style="clear: both;"></div>

diff --git a/edit/package.json b/edit/package.json
@@ -11,6 +11,7 @@
   },
   "devDependencies": {
     "@testing-library/dom": "^9.3.4",
+    "@types/node": "^20.11.30",
     "happy-dom": "^13.7.3",
     "typescript": "^5.2.2",
     "vite": "^5.1.6",

diff --git a/edit/pnpm-lock.yaml b/edit/pnpm-lock.yaml
diff --git a/edit/src/index.ts b/edit/src/index.ts
@@ -2,11 +2,12 @@ import {fetchContent} from "./services/fetchContent.service.ts";
 import {sanitizeContent} from "./services/sanitizeContent.service.ts";
 import {renderEditor} from "./services/renderEditor.service.ts";
 import {initCancelButton} from "./services/initCancelButton.service.ts";
-
+import {setOriginalContent} from "./services/originalContent.var.ts";
 
 (async ()=>{
     initCancelButton()
     const rawContent:string = await fetchContent() || '<h3>New Dashboard Information widget</h3>'
     const safeContent = sanitizeContent(rawContent)
     renderEditor(safeContent)
+    setOriginalContent(safeContent)
 })()
diff --git a/edit/src/services/initSaveButton.service.ts b/edit/src/services/initSaveButton.service.ts
@@ -0,0 +1,14 @@
+import {Jodit} from "jodit/esm/index.js";
+import {getOriginalContent} from "./originalContent.var.ts";
+
+let changed = false
+
+export function initSaveButton(editor: Jodit){
+    editor.events.on('change',(content)=>{
+        if (changed) return
+        if (content===getOriginalContent()) return
+        const saveButton = document.getElementById('save_button')!
+        saveButton.removeAttribute('disabled')
+        changed = true
+    })
+}
diff --git a/edit/src/services/originalContent.var.ts b/edit/src/services/originalContent.var.ts
@@ -0,0 +1,9 @@
+let originalContent:string
+
+export function setOriginalContent(content:string):void{
+    originalContent = content
+}
+
+export function getOriginalContent():string{
+    return originalContent
+}
diff --git a/edit/src/services/renderEditor.service.ts b/edit/src/services/renderEditor.service.ts
@@ -1,16 +1,15 @@
-// import {Jodit} from 'jodit'
 import {Jodit} from 'jodit/esm/index.js';
 import 'jodit/esm/plugins/video/video.js'
 import 'jodit/esm/plugins/source/source.js'
 import 'jodit/esm/plugins/indent/indent.js'
 import 'jodit/esm/plugins/clean-html/clean-html.js'
 import 'jodit/esm/plugins/hr/hr.js'
 import 'jodit/es2021/jodit.css'
-
 import {editorConfig} from "../const/jodit.config.ts";
-
+import {initSaveButton} from "./initSaveButton.service.ts";
 export async function renderEditor(content:string):Promise<void>{
     document.getElementById('editor-container')!.innerHTML = `<textarea id="editor" name="editor"></textarea>`
     const editor = Jodit.make('#editor', editorConfig);
     editor.value = content
+    initSaveButton(editor)
 }
diff --git a/edit/src/test/menu/4.menuNavigation.test.ts b/edit/src/test/menu/4.menuNavigation.test.ts
diff --git a/edit/src/test/menu/5.menuStyles.test.ts b/edit/src/test/menu/5.menuStyles.test.ts
diff --git a/edit/src/test/menu/menu.shared.ts b/edit/src/test/menu/menu.shared.ts
diff --git a/edit/src/test/test.service.ts b/edit/src/test/test.service.ts
@@ -1,6 +1,7 @@
+import { readFileSync } from 'fs';
+
 export type MapOf<T> = {[key:string]:T}
 export function mockFetch(urlList:MapOf<object>):void{
-    //@ts-expect-error global not defined
     global.fetch = vitest.fn().mockImplementation((url:string)=>{
         console.log('mocking url', url)
         if (!urlList[url]) throw new Error(`URL is not mocked ${url}`)
@@ -9,6 +10,8 @@ export function mockFetch(urlList:MapOf<object>):void{
 }
 
 export function initDom():void{
-    document.body.innerHTML = `<div id="content"></div>`
+    const index:string = readFileSync('./index.html').toString()
+    const body:string = /<body>.+<\/body>/s.exec(index)![0].replace(/<script.+script>/, '')
+    document.body.innerHTML = body
     window.location.search = '?dashboardItemId=WidgetId'
 }
diff --git a/edit/src/test/widget/1.render.test.ts b/edit/src/test/widget/1.render.test.ts
@@ -1,15 +1,19 @@
 import {initDom, MapOf, mockFetch} from "../test.service.ts";
 import {screen} from '@testing-library/dom'
+import {expect} from "vitest";
 
 const dataStore:MapOf<object> = {
     '/api/dataStore/dashboard-information/WidgetId': {
         "body": "Widget content"
     }
 }
 
-test(`1 > Render Widget`, async ()=>{
+test(`1 > Render Editor`, async ()=>{
     mockFetch(dataStore)
     initDom()
     await import('../../index.ts')
     screen.getByText('Widget content')
+    const documentationLink = screen.getByText('Documentation for the Dashboard Information widget can be found here.')
+    expect(documentationLink.getAttribute('href')).toBe('https://github.com/pepfar-datim/dashboard-information-widget')
+
 })
diff --git a/edit/src/test/widget/2.sanitizeContent.test.ts b/edit/src/test/widget/2.sanitizeContent.test.ts
diff --git a/edit/src/test/widget/3.sanitizer.test.ts b/edit/src/test/widget/3.sanitizer.test.ts
diff --git a/edit/vite.config.ts b/edit/vite.config.ts
@@ -3,10 +3,8 @@ import minifyHtmlPlugin from "./plugin/minifyHtml.plugin";
 
 let auth;
 try {
-    //@ts-expect-error process not defined
     auth = loadEnv('development', process.cwd())['VITE_DHIS_AUTH']
 } catch (e) {
-    //@ts-expect-error error not defined
     throw new Error(`You have to specify VITE_DHIS_AUTH env variable. E.g. btoa('username:password') in JavaScript`)
 }
 

diff --git a/render/src/index.ts b/render/src/index.ts
@@ -1,12 +1,12 @@
 import {fetchContent} from "./services/fetchContent.service.ts";
-import {sanitize} from "./services/sanitize.service.ts";
+import {sanitizeContent} from "../../shared/sanitizeContent.service.ts";
 import {render} from "./services/render.service.ts";
 import {addEditButton} from "./services/addEditButton.service.ts";
 
 
 (async ()=>{
     const rawContent:string = await fetchContent() || '<h3>New Dashboard Information widget</h3>'
-    const safeContent = sanitize(rawContent)
+    const safeContent = sanitizeContent(rawContent)
     await render(safeContent)
     addEditButton()
 })()
diff --git a/render/src/test/widget/3.sanitizer.test.ts b/render/src/test/widget/3.sanitizer.test.ts
@@ -1,5 +1,4 @@
-import {sanitize} from "../../services/sanitize.service.ts";
-import {expect} from "vitest";
+import {sanitizeContent} from "../../../../shared/sanitizeContent.service.ts";
 
 
 const testCases:string[][] = [
@@ -10,5 +9,5 @@ const testCases:string[][] = [
 ]
 
 test(`3 > Sanitizer Test`, ()=>{
-    testCases.forEach(([input, output])=>expect(sanitize(input)).toBe(output))
+    testCases.forEach(([input, output])=>expect(sanitizeContent(input)).toBe(output))
 })
diff --git a/render/vitest.config.ts b/render/vitest.config.ts
@@ -2,6 +2,7 @@ import {defineConfig} from 'vitest/config'
 
 export default defineConfig({
     test: {
+        testTimeout:1e6,
         globals: true,
         environment: 'happy-dom',
     },

diff --git a/render/src/services/sanitize.service.ts → shared/sanitizeContent.service.ts b/render/src/services/sanitize.service.ts → shared/sanitizeContent.service.ts
@@ -1,7 +1,6 @@
-
 const badTags = ['script','applet','iframe','link']
 
-export function sanitize(input:string):string{
+export function sanitizeContent(input:string):string{
     // <script.+/script> or <script.+/>
     badTags.forEach(tag=>input = input.replace(new RegExp(`<${tag}.+\/(${tag}|)>`),''))
     return input