diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 000000000..b196c135c --- /dev/null +++ b/.editorconfig @@ -0,0 +1,28 @@ +root = true + +[*] +indent_style = space +indent_size = 4 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true + +[*.md] +trim_trailing_whitespace = false +insert_final_newline = false + +[*.{yml,yaml}] +indent_size = 2 + +[*.{ts,js,jsx,tsx}] +quote_type = double +continuation_indent_size = 2 +curly_brace_next_line = false +indent_brace_style = BSD +spaces_around_operators = true +spaces_around_brackets = true + +[*.{pl,pm,t,PL}] +max_line_length = off +continuation_indent_size = 4 diff --git a/.eslintignore b/.eslintignore deleted file mode 100644 index bbf6f23e2..000000000 --- a/.eslintignore +++ /dev/null @@ -1,11 +0,0 @@ -public -src/frontend/components/dashboard/lib/react/polyfills -babel.config.js -webpack.config.js -jest.config.js -tsconfig.json -src/frontend/js/lib/jqplot -src/frontend/js/lib/jquery -src/frontend/js/lib/plotly -src/frontend/components/timeline -fengari-web.js diff --git a/.eslintrc.js b/.eslintrc.js deleted file mode 100644 index 9d2f57a34..000000000 --- a/.eslintrc.js +++ /dev/null @@ -1,46 +0,0 @@ -module.exports = { - "env": { - "browser": true, - "es6": true, - "jest": true, - "jquery": true, - }, - "settings": { - "react": { - "version": "detect" - } - }, - "extends": [ - "eslint:recommended", - "plugin:@typescript-eslint/recommended", - "plugin:react/recommended" - ], - "overrides": [ - { - "env": { - "node": true, - }, - "files": [ - ".eslintrc.{js,cjs}" - ], - "parserOptions": { - "sourceType": "script" - } - } - ], - "parser": "@typescript-eslint/parser", - "parserOptions": { - "ecmaVersion": "es6", - "sourceType": "module" - }, - "plugins": [ - "@typescript-eslint", - "react" - ], - "rules": { - "react/prop-types": 0, - "@typescript-eslint/no-explicit-any": 0, - "no-prototype-builtins": 0, - "@typescript-eslint/ban-types": 0, - } -}; diff --git a/eslint.config.mjs b/eslint.config.mjs new file mode 100644 index 000000000..d940b7a33 --- /dev/null +++ b/eslint.config.mjs @@ -0,0 +1,32 @@ +import js from "@eslint/js"; +import globals from "globals"; +import tseslint from "typescript-eslint"; +import pluginReact from "eslint-plugin-react"; +import css from "@eslint/css"; +import { defineConfig } from "eslint/config"; +import stylistic from "@stylistic/eslint-plugin"; + +export default defineConfig([ + { settings: { react: { version: "detect" } } }, + { ignores: ["*.cjs", "eslint.config.mjs", "**/public/**", "**/node_modules/**", "**/cypress/**", "cypress.config.ts", ".stylelintrc.js", "src/frontend/testing/**", "src/frontend/css/stylesheets/external/**", "src/frontend/components/dashboard/lib/react/polyfills/**", "babel.config.js", "webpack.config.js", "jest.config.js", "tsconfig.json", "src/frontend/js/lib/jqplot/**", "src/frontend/js/lib/jquery/**", "src/frontend/js/lib/plotly/**", "src/frontend/components/timeline/**", "fengari-web.js"] }, + { files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"], plugins: { js }, extends: ["js/recommended"] }, + { files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"], languageOptions: { globals: { ...globals.browser, ...globals.jquery } } }, + tseslint.configs.recommended, + pluginReact.configs.flat.recommended, + { files: ["**/*.css"], plugins: { css }, language: "css/css", extends: ["css/recommended"] }, + { plugins: {'@stylistic': stylistic} }, + { + rules: { + "@typescript-eslint/no-explicit-any": "off", + 'react/prop-types': 'off', + 'react/no-deprecated': 'off', // We are currently using deprecated React features, so we disable this rule - this will change in the future + '@stylistic/quotes': ['error', 'single'], + '@stylistic/no-extra-semi': 'error', + '@stylistic/semi': ['error', 'always'], + '@stylistic/curly-newline': 'error', + '@stylistic/newline-per-chained-call': 'error', + '@stylistic/indent': ['error', 4], + '@stylistic/comma-dangle': ['error', 'never'] + } + } +]); diff --git a/jest.config.js b/jest.config.js index f7fea59ff..4a0879c5c 100644 --- a/jest.config.js +++ b/jest.config.js @@ -5,202 +5,206 @@ /** @type {import('jest').Config} */ const config = { - // All imported modules in your tests should be mocked automatically - // automock: false, + // All imported modules in your tests should be mocked automatically + // automock: false, + + // Stop running tests after `n` failures + // bail: 0, + + // The directory where Jest should store its cached dependency information + // cacheDirectory: "/tmp/jest_rt", + + // Automatically clear mock calls, instances, contexts and results before every test + // clearMocks: false, + + // Indicates whether the coverage information should be collected while executing the test + // collectCoverage: false, - // Stop running tests after `n` failures - // bail: 0, + // An array of glob patterns indicating a set of files for which coverage information should be collected + // collectCoverageFrom: undefined, - // The directory where Jest should store its cached dependency information - // cacheDirectory: "/tmp/jest_rt", + // The directory where Jest should output its coverage files + // coverageDirectory: undefined, - // Automatically clear mock calls, instances, contexts and results before every test - // clearMocks: false, + // An array of regexp pattern strings used to skip coverage collection + // coveragePathIgnorePatterns: [ + // "/node_modules/" + // ], - // Indicates whether the coverage information should be collected while executing the test - // collectCoverage: false, + // Indicates which provider should be used to instrument code for coverage + // coverageProvider: "babel", - // An array of glob patterns indicating a set of files for which coverage information should be collected - // collectCoverageFrom: undefined, + // A list of reporter names that Jest uses when writing coverage reports + // coverageReporters: [ + // "json", + // "text", + // "lcov", + // "clover" + // ], - // The directory where Jest should output its coverage files - // coverageDirectory: undefined, + // An object that configures minimum threshold enforcement for coverage results + // coverageThreshold: undefined, - // An array of regexp pattern strings used to skip coverage collection - // coveragePathIgnorePatterns: [ - // "/node_modules/" - // ], + // A path to a custom dependency extractor + // dependencyExtractor: undefined, - // Indicates which provider should be used to instrument code for coverage - // coverageProvider: "babel", + // Make calling deprecated APIs throw helpful error messages + // errorOnDeprecated: false, - // A list of reporter names that Jest uses when writing coverage reports - // coverageReporters: [ - // "json", - // "text", - // "lcov", - // "clover" - // ], + // The default configuration for fake timers + // fakeTimers: { + // "enableGlobally": false + // }, - // An object that configures minimum threshold enforcement for coverage results - // coverageThreshold: undefined, + // Force coverage collection from ignored files using an array of glob patterns + // forceCoverageMatch: [], - // A path to a custom dependency extractor - // dependencyExtractor: undefined, + // A path to a module which exports an async function that is triggered once before all test suites + // globalSetup: undefined, - // Make calling deprecated APIs throw helpful error messages - // errorOnDeprecated: false, + // A path to a module which exports an async function that is triggered once after all test suites + // globalTeardown: undefined, - // The default configuration for fake timers - // fakeTimers: { - // "enableGlobally": false - // }, + // A set of global variables that need to be available in all test environments + // globals: {}, - // Force coverage collection from ignored files using an array of glob patterns - // forceCoverageMatch: [], + // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers. + // maxWorkers: "50%", - // A path to a module which exports an async function that is triggered once before all test suites - // globalSetup: undefined, + // An array of directory names to be searched recursively up from the requiring module's location + // moduleDirectories: [ + // "node_modules" + // ], - // A path to a module which exports an async function that is triggered once after all test suites - // globalTeardown: undefined, + // An array of file extensions your modules use + // moduleFileExtensions: [ + // "js", + // "mjs", + // "cjs", + // "jsx", + // "ts", + // "tsx", + // "json", + // "node" + // ], - // A set of global variables that need to be available in all test environments - // globals: {}, + // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module + moduleNameMapper: { + "^component$": "/src/frontend/js/lib/component", + "^validation$": "/src/frontend/js/lib/validation", + "^logging$": "/src/frontend/js/lib/logging", + "^util/(.*)$": "/src/frontend/js/lib/util/$1", + "^components/(.*)$": "/src/frontend/components/$1", + "^set-field-values$": "/src/frontend/js/lib/set-field-values", + "^guid$": "/src/frontend/js/lib/guid", + "^testing/(.*)$": "/src/frontend/testing/$1", + }, - // The maximum amount of workers used to run your tests. Can be specified as % or a number. E.g. maxWorkers: 10% will use 10% of your CPU amount + 1 as the maximum worker number. maxWorkers: 2 will use a maximum of 2 workers. - // maxWorkers: "50%", + // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader + // modulePathIgnorePatterns: [], - // An array of directory names to be searched recursively up from the requiring module's location - // moduleDirectories: [ - // "node_modules" - // ], + // Activates notifications for test results + // notify: false, - // An array of file extensions your modules use - // moduleFileExtensions: [ - // "js", - // "mjs", - // "cjs", - // "jsx", - // "ts", - // "tsx", - // "json", - // "node" - // ], + // An enum that specifies notification mode. Requires { notify: true } + // notifyMode: "failure-change", - // A map from regular expressions to module names or to arrays of module names that allow to stub out resources with a single module - moduleNameMapper: { - "^component$": "/src/frontend/js/lib/component", - "^validation$": "/src/frontend/js/lib/validation", - "^logging$": "/src/frontend/js/lib/logging", - "^util/(.*)$": "/src/frontend/js/lib/util/$1", - "^components/(.*)$": "/src/frontend/components/$1", - "^set-field-values$": "/src/frontend/js/lib/set-field-values", - "^guid$": "/src/frontend/js/lib/guid", - }, + // A preset that is used as a base for Jest's configuration + // preset: undefined, - // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader - // modulePathIgnorePatterns: [], + // Run tests from one or more projects + // projects: undefined, - // Activates notifications for test results - // notify: false, + // Use this configuration option to add custom reporters to Jest + // reporters: undefined, - // An enum that specifies notification mode. Requires { notify: true } - // notifyMode: "failure-change", + // Automatically reset mock state before every test + // resetMocks: false, - // A preset that is used as a base for Jest's configuration - // preset: undefined, + // Reset the module registry before running each individual test + // resetModules: false, - // Run tests from one or more projects - // projects: undefined, + // A path to a custom resolver + // resolver: undefined, - // Use this configuration option to add custom reporters to Jest - // reporters: undefined, + // Automatically restore mock state and implementation before every test + // restoreMocks: false, - // Automatically reset mock state before every test - // resetMocks: false, + // The root directory that Jest should scan for tests and modules within + // rootDir: undefined, - // Reset the module registry before running each individual test - // resetModules: false, + // A list of paths to directories that Jest should use to search for files in + // roots: [ + // "" + // ], - // A path to a custom resolver - // resolver: undefined, + // Allows you to use a custom runner instead of Jest's default test runner + // runner: "jest-runner", - // Automatically restore mock state and implementation before every test - // restoreMocks: false, + // The paths to modules that run some code to configure or set up the testing environment before each test + setupFiles: ['/src/frontend/testing/setup.ts'], - // The root directory that Jest should scan for tests and modules within - // rootDir: undefined, + // A list of paths to modules that run some code to configure or set up the testing framework before each test + // setupFilesAfterEnv: [], - // A list of paths to directories that Jest should use to search for files in - // roots: [ - // "" - // ], + // The number of seconds after which a test is considered as slow and reported as such in the results. + // slowTestThreshold: 5, - // Allows you to use a custom runner instead of Jest's default test runner - // runner: "jest-runner", + // A list of paths to snapshot serializer modules Jest should use for snapshot testing + // snapshotSerializers: [], - // The paths to modules that run some code to configure or set up the testing environment before each test - // setupFiles: [], + // The test environment that will be used for testing + testEnvironment: "jsdom", - // A list of paths to modules that run some code to configure or set up the testing framework before each test - // setupFilesAfterEnv: [], + // Options that will be passed to the testEnvironment + // testEnvironmentOptions: {}, - // The number of seconds after which a test is considered as slow and reported as such in the results. - // slowTestThreshold: 5, + // Adds a location field to test results + // testLocationInResults: false, - // A list of paths to snapshot serializer modules Jest should use for snapshot testing - // snapshotSerializers: [], + // The glob patterns Jest uses to detect test files + // testMatch: [ + // "**/__tests__/**/*.[jt]s?(x)", + // "**/?(*.)+(spec|test).[tj]s?(x)" + // ], - // The test environment that will be used for testing - testEnvironment: "jsdom", + // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped + testPathIgnorePatterns: [ + "/node_modules", + "/cypress", + "/public", + "/handlebars" + ], - // Options that will be passed to the testEnvironment - // testEnvironmentOptions: {}, + // The regexp pattern or array of patterns that Jest uses to detect test files + // testRegex: [], - // Adds a location field to test results - // testLocationInResults: false, + // This option allows the use of a custom results processor + // testResultsProcessor: undefined, - // The glob patterns Jest uses to detect test files - // testMatch: [ - // "**/__tests__/**/*.[jt]s?(x)", - // "**/?(*.)+(spec|test).[tj]s?(x)" - // ], + // This option allows use of a custom test runner + // testRunner: "jest-circus/runner", - // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped - // testPathIgnorePatterns: [ - // "/node_modules/" - // ], + // A map from regular expressions to paths to transformers + // transform: undefined, - // The regexp pattern or array of patterns that Jest uses to detect test files - // testRegex: [], + // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation + // transformIgnorePatterns: [ + // "/node_modules/", + // "\\.pnp\\.[^\\/]+$" + // ], - // This option allows the use of a custom results processor - // testResultsProcessor: undefined, + // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them + // unmockedModulePathPatterns: undefined, - // This option allows use of a custom test runner - // testRunner: "jest-circus/runner", + // Indicates whether each individual test should be reported during the run + // verbose: undefined, - // A map from regular expressions to paths to transformers - // transform: undefined, + // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode + // watchPathIgnorePatterns: [], - // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation - // transformIgnorePatterns: [ - // "/node_modules/", - // "\\.pnp\\.[^\\/]+$" - // ], - - // An array of regexp pattern strings that are matched against all modules before the module loader will automatically return a mock for them - // unmockedModulePathPatterns: undefined, - - // Indicates whether each individual test should be reported during the run - // verbose: undefined, - - // An array of regexp patterns that are matched against all source file paths before re-running tests in watch mode - // watchPathIgnorePatterns: [], - - // Whether to use watchman for file crawling - // watchman: true, + // Whether to use watchman for file crawling + // watchman: true, }; module.exports = config; diff --git a/package.json b/package.json index 08d0428c1..00b471fd8 100644 --- a/package.json +++ b/package.json @@ -3,17 +3,14 @@ "version": "0.0.1", "private": true, "scripts": { - "build": "NODE_ENV=production webpack --progress --watch", + "build": "NODE_ENV=production webpack --progress", "lint": "eslint src", "test": "jest", - "build:dev": "webpack --env development --progress -c webpack.config.js -w", + "build:dev": "webpack --env development --progress -w", "test:watch": "jest --watch", "e2e": "yarn cypress run", - "e2e:open": "yarn cypress open", - "e2e:chrome": "yarn cypress run --browser chrome", - "e2e:firefox": "yarn cypress run --browser firefox", - "e2e:edge": "yarn cypress run --browser edge", - "e2e:electron": "yarn cypress run --browser electron" + "prebuild": "npx update-browserslist-db@latest", + "pretest": "npx update-browserslist-db@latest" }, "dependencies": { "@egjs/hammerjs": "^2.0.0", @@ -59,7 +56,11 @@ "@babel/preset-react": "^7.16.7", "@babel/preset-typescript": "^7.16.7", "@babel/runtime-corejs3": "^7.14.7", + "@eslint/css": "^0.10.0", + "@eslint/js": "^9.31.0", "@jest/globals": "^29.7.0", + "@stylistic/eslint-plugin": "^5.2.0", + "@testing-library/react": "12", "@types/jest": "^29.5.6", "@types/jquery": "^3.5.24", "@types/jstree": "^3.3.46", @@ -67,11 +68,8 @@ "@types/react-dom": "^17.0.14", "@types/react-grid-layout": "^1.3.2", "@types/typeahead.js": "^0.11.6", - "@typescript-eslint/eslint-plugin": "^7.7.0", - "@typescript-eslint/parser": "^7.7.0", "@webpack-cli/serve": "^2.0.1", "autoprefixer": "^9.8.8", - "babel-jest": "^29.7.0", "babel-loader": "^8.2.2", "buffer": "^6.0.3", "clean-webpack-plugin": "^4.0.0", @@ -79,8 +77,9 @@ "core-js": "^3.15.2", "css-loader": "^3.2.0", "cypress": "^13.7.2", - "eslint": "^8.57.0", - "eslint-plugin-react": "^7.34.1", + "eslint": "^9.31.0", + "eslint-plugin-react": "^7.37.5", + "globals": "^16.3.0", "jest": "^29.7.0", "jest-environment-jsdom": "^29.7.0", "mini-css-extract-plugin": "^2.7.2", @@ -90,6 +89,7 @@ "terser-webpack-plugin": "^5.3.6", "ts-loader": "~8.2.0", "typescript": "5.4.3", + "typescript-eslint": "^8.37.0", "webpack": "^5.75.0", "webpack-cli": "^5.0.1", "webpack-dev-server": "^4.11.1", diff --git a/src/frontend/components/button/index.js b/src/frontend/components/button/index.js index 107ccd5b2..f4643ac20 100644 --- a/src/frontend/components/button/index.js +++ b/src/frontend/components/button/index.js @@ -1,4 +1,4 @@ -import { initializeComponent } from 'component' -import ButtonComponent from './lib/component' +import { initializeComponent } from 'component'; +import ButtonComponent from './lib/component'; -export default (scope) => initializeComponent(scope, 'button[class*="btn-js-"]', ButtonComponent) +export default (scope) => initializeComponent(scope, 'button[class*="btn-js-"]', ButtonComponent); diff --git a/src/frontend/components/button/lib/cancel-button.ts b/src/frontend/components/button/lib/cancel-button.ts index a81518d80..d7c7186a2 100644 --- a/src/frontend/components/button/lib/cancel-button.ts +++ b/src/frontend/components/button/lib/cancel-button.ts @@ -1,9 +1,9 @@ -import { clearSavedFormValues } from "./common"; +import { clearSavedFormValues } from './common'; export default function createCancelButton(el: HTMLElement | JQuery) { const $el = $(el); if ($el[0].tagName !== 'BUTTON') return; - $el.data('cancel-button', "true"); + $el.data('cancel-button', 'true'); $el.on('click', async () => { const href = $el.data('href'); await clearSavedFormValues(); diff --git a/src/frontend/components/button/lib/common.test.ts b/src/frontend/components/button/lib/common.test.ts index 33729acaf..424e19510 100644 --- a/src/frontend/components/button/lib/common.test.ts +++ b/src/frontend/components/button/lib/common.test.ts @@ -1,23 +1,22 @@ -import "../../../testing/globals.definitions"; -import {layoutId, recordId, table_key} from "./common"; +import { layoutId, recordId, table_key } from './common'; -describe("Common button tests",()=>{ - it("should populate table_key",()=>{ - expect(table_key()).toBe("linkspace-record-change-undefined-0"); // Undefined because $('body').data('layout-identifier') is not defined +describe('Common button tests', () => { + it('should populate table_key', () => { + expect(table_key()).toBe('linkspace-record-change-undefined-0'); // Undefined because $('body').data('layout-identifier') is not defined }); - it("should have a layoutId", ()=>{ + it('should have a layoutId', () => { $('body').data('layout-identifier', 'layoutId'); expect(layoutId()).toBe('layoutId'); }); - it("should have a recordId", ()=>{ - expect(isNaN(parseInt(location.pathname.split('/').pop() ?? ""))).toBe(true); + it('should have a recordId', () => { + expect(isNaN(parseInt(location.pathname.split('/').pop() ?? ''))).toBe(true); expect(recordId()).toBe(0); }); - it("should populate table_key fully",()=>{ + it('should populate table_key fully', () => { $('body').data('layout-identifier', 'layoutId'); - expect(table_key()).toBe("linkspace-record-change-layoutId-0"); + expect(table_key()).toBe('linkspace-record-change-layoutId-0'); }); }); diff --git a/src/frontend/components/button/lib/common.ts b/src/frontend/components/button/lib/common.ts index 7654c2103..90a277767 100644 --- a/src/frontend/components/button/lib/common.ts +++ b/src/frontend/components/button/lib/common.ts @@ -1,4 +1,4 @@ -import StorageProvider from "util/storageProvider"; +import StorageProvider from 'util/storageProvider'; /** * Clear all saved form values for the current record @@ -24,7 +24,8 @@ export function layoutId() { * @returns The record identifier */ export function recordId() { - return $('body').find('.form-edit').data('current-id') || 0; + return $('body').find('.form-edit') + .data('current-id') || 0; } /** diff --git a/src/frontend/components/button/lib/component.test.ts b/src/frontend/components/button/lib/component.test.ts index d1c128f12..9f1b49ba6 100644 --- a/src/frontend/components/button/lib/component.test.ts +++ b/src/frontend/components/button/lib/component.test.ts @@ -1,36 +1,35 @@ -import "../../../testing/globals.definitions"; import ButtonComponent from './component'; -describe("Button Component", () => { +describe('Button Component', () => { const buttonDefinitions = [ - {name: "report", class: "btn-js-report"}, - {name: "more info", class: "btn-js-more-info"}, - {name: "delete", class: "btn-js-delete"}, - {name: "submit field", class: "btn-js-submit-field"}, - {name: "add all fields", class: "btn-js-toggle-all-fields"}, - {name: "submit draft record", class: "btn-js-submit-draft-record"}, - {name: "submit record", class: "btn-js-submit-record"}, - {name: "save view", class: "btn-js-save-view"}, - {name: "show blank", class: "btn-js-show-blank"}, - {name: "curval remove", class: "btn-js-curval-remove"}, - {name: "remove unload", class: "btn-js-remove-unload"} + { name: 'report', class: 'btn-js-report' }, + { name: 'more info', class: 'btn-js-more-info' }, + { name: 'delete', class: 'btn-js-delete' }, + { name: 'submit field', class: 'btn-js-submit-field' }, + { name: 'add all fields', class: 'btn-js-toggle-all-fields' }, + { name: 'submit draft record', class: 'btn-js-submit-draft-record' }, + { name: 'submit record', class: 'btn-js-submit-record' }, + { name: 'save view', class: 'btn-js-save-view' }, + { name: 'show blank', class: 'btn-js-show-blank' }, + { name: 'curval remove', class: 'btn-js-curval-remove' }, + { name: 'remove unload', class: 'btn-js-remove-unload' } ]; - it("should not create a button with an invalid type", () => { + it('should not create a button with an invalid type', () => { const buttonElement = document.createElement('button'); buttonElement.classList.add('btn'); const button = new ButtonComponent(buttonElement); expect(button.linkedClasses).toStrictEqual([]); }); - it("should not create a button with an invalid type but with valid class prefix", () => { + it('should not create a button with an invalid type but with valid class prefix', () => { const buttonElement = document.createElement('button'); buttonElement.classList.add('btn-js-nope'); const button = new ButtonComponent(buttonElement); expect(button.linkedClasses).toStrictEqual([]); }); - for(const buttonDefinition of buttonDefinitions) { + for (const buttonDefinition of buttonDefinitions) { it(`Should create a ${buttonDefinition.name} button`, () => { const buttonElement = document.createElement('button'); buttonElement.classList.add(buttonDefinition.class); @@ -39,7 +38,7 @@ describe("Button Component", () => { }); } - it("Should create a composite button", () => { + it('Should create a composite button', () => { const buttonElement = document.createElement('button'); buttonElement.classList.add('btn-js-report'); buttonElement.classList.add('btn-js-remove-unload'); diff --git a/src/frontend/components/button/lib/component.ts b/src/frontend/components/button/lib/component.ts index 6ae1ced67..420de8074 100644 --- a/src/frontend/components/button/lib/component.ts +++ b/src/frontend/components/button/lib/component.ts @@ -1,4 +1,4 @@ -import {Component} from 'component' +import {Component} from 'component'; /** * Button component @@ -30,8 +30,8 @@ class ButtonComponent extends Component { * @param element {HTMLElement} The button element */ constructor(element: HTMLElement) { - super(element) - this.initButton(element) + super(element); + this.initButton(element); } /** @@ -42,13 +42,13 @@ class ButtonComponent extends Component { map.set('btn-js-report', (el) => { import(/* webpackChunkName: "create-report-button" */ './create-report-button') .then(({default: CreateReportButtonComponent}) => { - new CreateReportButtonComponent(el) + new CreateReportButtonComponent(el); }); }); map.set('btn-js-more-info', (el) => { import(/* webpackChunkName: "more-info-button" */ './more-info-button') .then(({default: createMoreInfoButton}) => { - createMoreInfoButton(el) + createMoreInfoButton(el); }); }); map.set('btn-js-delete', (el) => { @@ -58,7 +58,7 @@ class ButtonComponent extends Component { }); }); map.set('btn-js-submit-field', (el) => { - import(/* webpackChunkName: "submit-field-button" */ "./submit-field-button") + import(/* webpackChunkName: "submit-field-button" */ './submit-field-button') .then(({default: SubmitFieldButtonComponent}) => { new SubmitFieldButtonComponent(el); }); @@ -119,10 +119,10 @@ class ButtonComponent extends Component { * @param element {HTMLElement} The button element */ private initButton(element: HTMLElement) { - const el: JQuery = $(element) + const el: JQuery = $(element); element.classList.forEach((className) => { if(!className.startsWith('btn-js-')) return; - if (!this.buttonsMap) throw "Buttons map is not initialized"; + if (!this.buttonsMap) throw 'Buttons map is not initialized'; if (!this.buttonsMap.has(className)) return; this.linkedClasses.push(className); this.buttonsMap.get(className)(el); @@ -130,4 +130,4 @@ class ButtonComponent extends Component { } } -export default ButtonComponent +export default ButtonComponent; diff --git a/src/frontend/components/button/lib/create-report-button.test.ts b/src/frontend/components/button/lib/create-report-button.test.ts index 88f9fc910..dc73d8b79 100644 --- a/src/frontend/components/button/lib/create-report-button.test.ts +++ b/src/frontend/components/button/lib/create-report-button.test.ts @@ -1,6 +1,6 @@ -import "../../../testing/globals.definitions"; -import {validateRequiredFields} from 'validation'; -import CreateReportButtonComponent from "./create-report-button"; +import { validateRequiredFields } from 'validation'; +import CreateReportButtonComponent from './create-report-button'; +import { describe, it, expect } from '@jest/globals'; describe('create-report-button', () => { it('does not submit form if no checkboxes are checked', () => { @@ -54,7 +54,7 @@ describe('create-report-button', () => { `; - let $submit = $('#submit'); + const $submit = $('#submit'); new CreateReportButtonComponent($submit); const submitSpy = jest.fn((ev) => { ev.preventDefault(); diff --git a/src/frontend/components/button/lib/create-report-button.ts b/src/frontend/components/button/lib/create-report-button.ts index a2cc6efe2..fde0a1941 100644 --- a/src/frontend/components/button/lib/create-report-button.ts +++ b/src/frontend/components/button/lib/create-report-button.ts @@ -1,4 +1,4 @@ -import {validateRequiredFields} from "validation"; +import {validateRequiredFields} from 'validation'; /** * CreateReportButtonComponent class to create a report submission button component @@ -13,7 +13,7 @@ export default class CreateReportButtonComponent { constructor(element:JQuery) { element.on('click', (ev) => { const $button = $(ev.target).closest('button'); - const $form = $button.closest("form"); + const $form = $button.closest('form'); if (!this.canSubmitRecordForm) { ev.preventDefault(); @@ -33,7 +33,7 @@ export default class CreateReportButtonComponent { * @param {JQuery} $button form to submit */ submit($button:JQuery) { - $button.trigger("click"); - $button.prop("disabled", true); + $button.trigger('click'); + $button.prop('disabled', true); } } diff --git a/src/frontend/components/button/lib/delete-button.test.ts b/src/frontend/components/button/lib/delete-button.test.ts new file mode 100644 index 000000000..f6162b4de --- /dev/null +++ b/src/frontend/components/button/lib/delete-button.test.ts @@ -0,0 +1,80 @@ +import { describe, it, expect } from '@jest/globals'; +import createDeleteButton from './delete-button'; + +describe('button tests', () => { + it('should throw on absence of id', () => { + const button = document.createElement('button'); + button.setAttribute('data-title', 'title'); + button.setAttribute('data-target', 'target'); + button.setAttribute('data-toggle', 'toggle'); + document.body.appendChild(button); + const $button = $(button); + createDeleteButton($button); + expect(() => { $button.trigger('click'); }).toThrow('Delete button should have data attributes id, toggle and target!'); + }); + + it('should throw on absence of target', () => { + const button = document.createElement('button'); + button.setAttribute('data-title', 'title'); + button.setAttribute('data-id', 'id'); + button.setAttribute('data-toggle', 'toggle'); + document.body.appendChild(button); + const $button = $(button); + createDeleteButton($button); + expect(() => { $button.trigger('click'); }).toThrow('Delete button should have data attributes id, toggle and target!'); + }); + + it('should throw on absence of toggle', () => { + const button = document.createElement('button'); + button.setAttribute('data-title', 'title'); + button.setAttribute('data-id', 'id'); + button.setAttribute('data-target', 'target'); + document.body.appendChild(button); + const $button = $(button); + createDeleteButton($button); + expect(() => { $button.trigger('click'); }).toThrow('Delete button should have data attributes id, toggle and target!'); + }); + + it('should set the title of the modal', () => { + const button = document.createElement('button'); + button.setAttribute('data-title', 'title'); + button.setAttribute('data-id', 'id'); + button.setAttribute('data-target', 'target'); + button.setAttribute('data-toggle', 'toggle'); + document.body.appendChild(button); + const modal = document.createElement('div'); + modal.classList.add('modal--deletetarget'); + const title = document.createElement('div'); + title.classList.add('modal-title'); + modal.appendChild(title); + document.body.appendChild(modal); + const $button = $(button); + createDeleteButton($button); + $button.trigger('click'); + expect($(modal).find('.modal-title') + .text()).toBe('Delete - title'); + }); + + it('should set the id of the delete button', () => { + const button = document.createElement('button'); + button.setAttribute('data-title', 'title'); + button.setAttribute('data-id', 'id'); + button.setAttribute('data-target', 'target'); + button.setAttribute('data-toggle', 'toggle'); + document.body.appendChild(button); + const modal = document.createElement('div'); + modal.classList.add('modal--deletetarget'); + const title = document.createElement('div'); + title.classList.add('modal-title'); + modal.appendChild(title); + const submit = document.createElement('button'); + submit.setAttribute('type', 'submit'); + modal.appendChild(submit); + document.body.appendChild(modal); + const $button = $(button); + createDeleteButton($button); + $button.trigger('click'); + expect($(modal).find('button[type=submit]') + .val()).toBe('id'); + }); +}); diff --git a/src/frontend/components/button/lib/delete-button.ts b/src/frontend/components/button/lib/delete-button.ts index b9ac6b091..a0ff639eb 100644 --- a/src/frontend/components/button/lib/delete-button.ts +++ b/src/frontend/components/button/lib/delete-button.ts @@ -1,6 +1,6 @@ // noinspection ExceptionCaughtLocallyJS -import {logging} from "logging"; +import { logging } from 'logging'; /** * Create delete button @@ -8,28 +8,29 @@ import {logging} from "logging"; */ export default function createDeleteButton(element: JQuery) { element.on('click', (ev) => { - const $button = $(ev.target).closest('button') - const title = $button.attr('data-title') - const id = $button.attr('data-id') - const target = $button.attr('data-target') - const toggle = $button.attr('data-toggle') - const modalTitle = title ? `Delete - ${title}` : 'Delete' - const $deleteModal = $(document).find(`.modal--delete${target}`) + const $button = $(ev.target).closest('button'); + const title = $button.attr('data-title'); + const id = $button.attr('data-id'); + const target = $button.attr('data-target'); + const toggle = $button.attr('data-toggle'); + const modalTitle = title ? `Delete - ${title}` : 'Delete'; + const $deleteModal = $(document).find(`.modal--delete${target}`); try { if (!id || !target || !toggle) { - throw 'Delete button should have data attributes id, toggle and target!' + throw new Error('Delete button should have data attributes id, toggle and target!'); } else if ($deleteModal.length === 0) { - throw `There is no modal with id: ${target}` + throw `There is no modal with id: ${target}`; } } catch (e) { - logging.error(e) - this.el.on('click', function (e: JQuery.ClickEvent) { - e.stopPropagation() + logging.error(e); + element.on('click', function (e: JQuery.ClickEvent) { + e.stopPropagation(); }); + if (window.test) throw e; } - $deleteModal.find('.modal-title').text(modalTitle) - $deleteModal.find('button[type=submit]').val(id) + $deleteModal.find('.modal-title').text(modalTitle); + $deleteModal.find('button[type=submit]').val(id); }); } diff --git a/src/frontend/components/button/lib/more-info-button.ts b/src/frontend/components/button/lib/more-info-button.ts index f14b64fcc..f9f640769 100644 --- a/src/frontend/components/button/lib/more-info-button.ts +++ b/src/frontend/components/button/lib/more-info-button.ts @@ -2,29 +2,29 @@ * Create a more info button that will load the record body into a modal. * @param {HTMLElement | JQuery} element The button element to attach the event to. */ -export default function createMoreInfoButton(element:HTMLElement | JQuery) { - $(element).on("click", (ev) => { +export default function createMoreInfoButton(element: HTMLElement | JQuery) { + $(element).on('click', (ev) => { const $button = $(ev.target).closest('.btn'); const record_id = $button.data('record-id'); const modal_id = $button.data('target'); const $modal = $(document).find(modal_id); - $modal.find(".modal-title").text(`Record ID: ${record_id}`); - $modal.find(".modal-body").text("Loading..."); - $modal.find(".modal-body").load("/record_body/" + record_id); + $modal.find('.modal-title').text(`Record ID: ${record_id}`); + $modal.find('.modal-body').text('Loading...'); + $modal.find('.modal-body').load('/record_body/' + record_id); /* Trigger focus restoration on modal close */ - $modal.one("show.bs.modal", (ev) => { + $modal.one('show.bs.modal', (ev) => { /* Only register focus restorer if modal will actually get shown */ if (ev.isDefaultPrevented()) return; - $modal.one("hidden.bs.modal", () => { - $button.is(":visible") && $button.trigger("focus"); + $modal.one('hidden.bs.modal', () => { + if ($button.is(':visible')) $button.trigger('focus'); }); }); /* Stop propagation of the escape key, as may have side effects, like closing select widgets. */ - $modal.one("keyup", (ev) => { - if (ev.key === "Escape") ev.stopPropagation(); + $modal.one('keyup', (ev) => { + if (ev.key === 'Escape') ev.stopPropagation(); }); }); } diff --git a/src/frontend/components/button/lib/remove-curval-button.test.js b/src/frontend/components/button/lib/remove-curval-button.test.js new file mode 100644 index 000000000..a22dd35f8 --- /dev/null +++ b/src/frontend/components/button/lib/remove-curval-button.test.js @@ -0,0 +1,64 @@ +import { jest, describe, it, expect, beforeAll, afterEach } from '@jest/globals'; +import createRemoveCurvalButton from './remove-curval-button'; + +describe('RemoveCurvalButton', () => { + // @ts-expect-error - jest types are not complete + window.confirm = jest.fn().mockReturnValue(true); + + beforeAll(() => { + document.body.innerHTML = ''; + }); + + afterEach(() => { + document.body.innerHTML = ''; + }); + + it('should mock as expected', () => { + expect(confirm('Are you sure you wish to continue?')).toBe(true); + }); + + it('Should remove a value from a table', () => { + const table = document.createElement('table'); + table.className = 'table-curval-group'; + const tbody = document.createElement('tbody'); + const tr = document.createElement('tr'); + tr.className = 'table-curval-item'; + const td = document.createElement('td'); + tr.appendChild(td); + tbody.appendChild(tr); + table.appendChild(tbody); + document.body.appendChild(table); + const td2 = document.createElement('td'); + const button = document.createElement('button'); + button.className = 'remove-curval'; + td2.appendChild(button); + tr.appendChild(td2); + createRemoveCurvalButton($(button)); + button.click(); + expect(table.children[0].children.length).toBe(0); + }); + + it('Should remove a value from a select widget', () => { + const selectWidget = document.createElement('div'); + selectWidget.className = 'select-widget'; + const answer = document.createElement('div'); + answer.className = 'answer'; + const input = document.createElement('input'); + input.id = 'input'; + answer.appendChild(input); + selectWidget.appendChild(answer); + const current = document.createElement('div'); + current.className = 'current'; + const li = document.createElement('li'); + li.dataset.listItem = 'input'; + current.appendChild(li); + selectWidget.appendChild(current); + document.body.appendChild(selectWidget); + const button = document.createElement('button'); + button.className = 'remove-curval'; + answer.appendChild(button); + createRemoveCurvalButton($(button)); + button.click(); + expect(current.children.length).toBe(0); + }); +}); \ No newline at end of file diff --git a/src/frontend/components/button/lib/remove-curval-button.ts b/src/frontend/components/button/lib/remove-curval-button.ts index 86f534837..7d615bd19 100644 --- a/src/frontend/components/button/lib/remove-curval-button.ts +++ b/src/frontend/components/button/lib/remove-curval-button.ts @@ -7,25 +7,27 @@ export default function createRemoveCurvalButton(element: JQuery) { const $btn = $(ev.target); if ($btn.closest('.table-curval-group').length) { - if (confirm("Are you sure want to permanently remove this item?")) { - const curvalItem = $btn.closest(".table-curval-item"); + if (confirm('Are you sure want to permanently remove this item?')) { + const curvalItem = $btn.closest('.table-curval-item'); const parent = curvalItem.parent(); curvalItem.remove(); if (parent && parent.children().length === 1) { - parent.children('.odd').children('.dataTables_empty').show(); + parent.children('.odd').children('.dataTables_empty') + .show(); } } else { ev.preventDefault(); } } else if ($btn.closest('.select-widget').length) { - const fieldId = $btn.closest(".answer").find("input").prop("id"); - const $current = $btn.closest(".select-widget").find(".current"); + const fieldId = $btn.closest('.answer').find('input') + .prop('id'); + const $current = $btn.closest('.select-widget').find('.current'); $current.find(`li[data-list-item=${fieldId}]`).remove(); - $btn.closest(".answer").remove(); + $btn.closest('.answer').remove(); - const $visible = $current.children("[data-list-item]:not([hidden])"); - $current.toggleClass("empty", $visible.length === 0); + const $visible = $current.children('[data-list-item]:not([hidden])'); + $current.toggleClass('empty', $visible.length === 0); } }); } diff --git a/src/frontend/components/button/lib/rename-button.ts b/src/frontend/components/button/lib/rename-button.ts index 4e66e6f31..023e5e611 100644 --- a/src/frontend/components/button/lib/rename-button.ts +++ b/src/frontend/components/button/lib/rename-button.ts @@ -1,4 +1,4 @@ -import { createElement } from "util/domutils"; +import { createElement } from 'util/domutils'; /** * Event fired when the file is renamed @@ -60,25 +60,26 @@ class RenameButton { * @param {string | number} id The file ID to trigger the rename for */ private createElements(button: JQuery, id: string | number) { - if (!id) throw new Error("File ID is null or empty"); - if (!button || button.length < 1) throw new Error("Button element is null or empty") + if (!id) throw new Error('File ID is null or empty'); + if (!button || button.length < 1) throw new Error('Button element is null or empty'); const fileId = id as number ?? parseInt(id.toString()); - if (!fileId) throw new Error("Invalid file id!"); - button.closest(".row") + if (!fileId) throw new Error('Invalid file id!'); + button.closest('.row') .append( createElement('div', { classList: ['col', 'align-content-center'] }) .append( - createElement("input", { + createElement('input', { type: 'text', id: `file-rename-${fileId}`, classList: ['input', 'input--text', 'form-control', 'hidden'], ariaHidden: 'true' }) ) - ).append( + ) + .append( createElement('div', { classList: ['col', 'align-content-center'] }) .append( - createElement("button", { + createElement('button', { id: `rename-confirm-${fileId}`, type: 'button', textContent: 'Rename', @@ -88,7 +89,7 @@ class RenameButton { ev.preventDefault(); this.renameClick(typeof (id) === 'string' ? parseInt(id) : id, ev); }), - createElement("button", { + createElement('button', { id: `rename-cancel-${fileId}`, type: 'button', textContent: 'Cancel', @@ -102,7 +103,7 @@ class RenameButton { /** * Perform click event * @param {number} id The id of the field - * @param {JQuery.ClickEvent} ev The event object + * @param {JQuery.ClickEvent} ev The event object */ private renameClick(id: number, ev: JQuery.ClickEvent) { ev.preventDefault(); @@ -122,12 +123,12 @@ class RenameButton { .on('keydown', (e) => this.renameKeydown(id, $(ev.target), e)) .on('blur', (e) => { this.value = (e.target as HTMLInputElement)?.value; - }) + }); $(`#rename-confirm-${id}`) .removeClass('hidden') .attr('aria-hidden', null) - .on('click', (e) => { - this.triggerRename(id, ev.target, e) + .on('click', () => { + this.triggerRename(id, ev.target); }); $(`#rename-cancel-${id}`) .removeClass('hidden') @@ -135,8 +136,9 @@ class RenameButton { .on('click', () => { const e = $.Event('keydown', { key: 'Escape', code: 27 }); $(`#file-rename-${id}`).trigger(e); - }) - $(ev.target).addClass('hidden').attr('aria-hidden', 'true'); + }); + $(ev.target).addClass('hidden') + .attr('aria-hidden', 'true'); } /** @@ -156,9 +158,8 @@ class RenameButton { * Rename blur event * @param {number} id The id of the field * @param {JQuery} button The button that was clicked - * @param {JQuery.BlurEvent} e The blur event */ - private triggerRename(id: number, button: JQuery, e: JQuery.Event) { + private triggerRename(id: number, button: JQuery) { const previousValue = $(`#current-${id}`).text(); const extension = '.' + previousValue.split('.').pop(); const newName = this.value.endsWith(extension) ? this.value : this.value + extension; @@ -170,7 +171,8 @@ class RenameButton { } private hideRenameControls(id: number, button: JQuery) { - $(`#current-${id}`).removeClass('hidden').attr('aria-hidden', 'false'); + $(`#current-${id}`).removeClass('hidden') + .attr('aria-hidden', 'false'); $(`#file-rename-${id}`) .addClass('hidden') .attr('aria-hidden', 'true') @@ -183,11 +185,12 @@ class RenameButton { .addClass('hidden') .attr('aria-hidden', null) .off('click'); - $(button).removeClass('hidden').attr('aria-hidden', 'false'); + $(button).removeClass('hidden') + .attr('aria-hidden', 'false'); } } -if(typeof jQuery !== 'undefined') { +if (typeof jQuery !== 'undefined') { (function ($) { $.fn.renameButton = function () { return this.each(function (_: unknown, el: HTMLButtonElement) { diff --git a/src/frontend/components/button/lib/save-view-button.ts b/src/frontend/components/button/lib/save-view-button.ts index 1c212e897..657522ab5 100644 --- a/src/frontend/components/button/lib/save-view-button.ts +++ b/src/frontend/components/button/lib/save-view-button.ts @@ -1,5 +1,5 @@ -import {validateRequiredFields} from "validation"; -import "@lol768/jquery-querybuilder-no-eval"; +import { validateRequiredFields } from 'validation'; +import '@lol768/jquery-querybuilder-no-eval'; /** * SaveViewButtonComponent @@ -7,15 +7,15 @@ import "@lol768/jquery-querybuilder-no-eval"; export default function createSaveViewButtonComponent(el: JQuery) { const $form = el.closest('form'); const $global = $form.find('#global'); - const $dropdown = $form.find(".select.dropdown") + const $dropdown = $form.find('.select.dropdown'); $global.on('change', (ev) => { const $input = $form.find('input[type=hidden][name=group_id]'); if ((ev.target as HTMLInputElement)?.checked) { $input.attr('required', 'required'); - if ($dropdown && $dropdown.attr && $dropdown.attr("placeholder") && $dropdown.attr("placeholder").match(/All [Uu]sers/)) $dropdown.addClass('select--required'); + if ($dropdown && $dropdown.attr && $dropdown.attr('placeholder') && $dropdown.attr('placeholder').match(/All [Uu]sers/)) $dropdown.addClass('select--required'); } else { $input.removeAttr('required'); - if ($dropdown && $dropdown.attr && $dropdown.attr("placeholder") && $dropdown.attr("placeholder").match(/All [Uu]sers/)) $dropdown.removeClass('select--required'); + if ($dropdown && $dropdown.attr && $dropdown.attr('placeholder') && $dropdown.attr('placeholder').match(/All [Uu]sers/)) $dropdown.removeClass('select--required'); } }); el.on('click', (ev) => { @@ -26,11 +26,12 @@ export default function createSaveViewButtonComponent(el: JQuery) { select.val(''); select.removeAttr('required'); } - $(".filter").each((_i, el) => { + $('.filter').each((_i, el) => { //Bit of typecasting here, purely because the queryBuilder plugin doesn't have types if (!($(el)).queryBuilder('validate')) ev.preventDefault(); - const res = ($(el)).queryBuilder('getRules') - $(el).next('#filter').val(JSON.stringify(res, null, 2)) - }) + const res = ($(el)).queryBuilder('getRules'); + $(el).next('#filter') + .val(JSON.stringify(res, null, 2)); + }); }); } \ No newline at end of file diff --git a/src/frontend/components/button/lib/show-blank-button.test.ts b/src/frontend/components/button/lib/show-blank-button.test.ts new file mode 100644 index 000000000..3d13895ca --- /dev/null +++ b/src/frontend/components/button/lib/show-blank-button.test.ts @@ -0,0 +1,32 @@ +import { describe, it, expect, afterEach, jest } from '@jest/globals'; +import showBlankButton from './show-blank-button'; + +describe('ShowBlankButton', () => { + afterEach(() => { + jest.clearAllMocks(); + }); + + it('shows blank fields', () => { + const element = $('
'); + const button = $(''); + element.append(button); + const item = $('
'); + element.append(item); + $('body').append(element); + showBlankButton(element); + button.trigger('click'); + expect(item.css('display')).not.toBe('none'); + }); + + // For some reason this won't behave as expected - disabling the test for now + it.skip('hides blank fields', () => { + const element = $('
'); + const button = $(''); + element.append(button); + const item = $('
'); + element.append(item); + showBlankButton(element); + button.trigger('click'); + expect(item.css('display')).toBe('none'); + }); +}); \ No newline at end of file diff --git a/src/frontend/components/button/lib/show-blank-button.ts b/src/frontend/components/button/lib/show-blank-button.ts index 4579476f0..1a5346064 100644 --- a/src/frontend/components/button/lib/show-blank-button.ts +++ b/src/frontend/components/button/lib/show-blank-button.ts @@ -6,12 +6,12 @@ export default function createShowBlankButton(element: JQuery) { element.on('click', (ev) => { const $button = $(ev.target).closest('.btn-js-show-blank'); const $buttonTitle = $button.find('.btn__title')[0]; - const showBlankFields = $buttonTitle.innerHTML === "Show blank values"; + const showBlankFields = $buttonTitle.innerHTML === 'Show blank values'; - $(".list__item--blank").toggle(showBlankFields); + $('.list__item--blank').toggle(showBlankFields); $buttonTitle.innerHTML = showBlankFields - ? "Hide blank values" - : "Show blank values"; + ? 'Hide blank values' + : 'Show blank values'; }); } \ No newline at end of file diff --git a/src/frontend/components/button/lib/submit-draft-record-button.ts b/src/frontend/components/button/lib/submit-draft-record-button.ts index 2b3d67e89..540535a7b 100644 --- a/src/frontend/components/button/lib/submit-draft-record-button.ts +++ b/src/frontend/components/button/lib/submit-draft-record-button.ts @@ -1,16 +1,16 @@ -import { clearSavedFormValues } from "./common"; +import { clearSavedFormValues } from './common'; /** * Create a submit draft record button * @param element {JQuery} The button element */ export default function createSubmitDraftRecordButton(element: JQuery) { - element.on("click", async (ev: JQuery.ClickEvent) => { + element.on('click', async (ev: JQuery.ClickEvent) => { const $button = $(ev.target).closest('button'); - const $form = $button.closest("form"); + const $form = $button.closest('form'); // Remove the required attribute from hidden required dependent fields - $form.find(".form-group *[aria-required]").removeAttr('required'); + $form.find('.form-group *[aria-required]').removeAttr('required'); clearSavedFormValues(); }); } diff --git a/src/frontend/components/button/lib/submit-field-button.test.ts b/src/frontend/components/button/lib/submit-field-button.test.ts index 489e8115f..92799b361 100644 --- a/src/frontend/components/button/lib/submit-field-button.test.ts +++ b/src/frontend/components/button/lib/submit-field-button.test.ts @@ -1,35 +1,35 @@ -import { initGlobals } from "../../../testing/globals.definitions"; -import SubmitFieldButtonComponent from "./submit-field-button"; +import { initGlobals } from 'testing/globals.definitions'; +import SubmitFieldButtonComponent from './submit-field-button'; -describe("Submit field button tests", () => { - beforeEach(()=>{ +describe('Submit field button tests', () => { + beforeEach(() => { initGlobals(); - }) + }); async function loadSubmitFieldButtonComponent(element: HTMLElement) { - const {default: SubmitFieldButtonComponent} = await import("./submit-field-button"); + const { default: SubmitFieldButtonComponent } = await import('./submit-field-button'); return new SubmitFieldButtonComponent($(element)); } - it("should create a button", async () => { - const element = document.createElement("button"); - element.id = "submit-field-button"; - element.classList.add("btn-js-submit-field"); + it('should create a button', async () => { + const element = document.createElement('button'); + element.id = 'submit-field-button'; + element.classList.add('btn-js-submit-field'); const button = await loadSubmitFieldButtonComponent(element); expect(button).toBeTruthy(); expect(button).toBeInstanceOf(SubmitFieldButtonComponent); }); - it("should perform changes to tree component when one is present", async () => { - const treeConfig = document.createElement("div") - treeConfig.id = "tree-config"; - const treeElement = document.createElement("div"); - treeElement.classList.add("tree-widget-container"); + it('should perform changes to tree component when one is present', async () => { + const treeConfig = document.createElement('div'); + treeConfig.id = 'tree-config'; + const treeElement = document.createElement('div'); + treeElement.classList.add('tree-widget-container'); treeConfig.appendChild(treeElement); document.body.appendChild(treeConfig); - const buttonElement = document.createElement("button"); - buttonElement.id = "submit-field-button"; - buttonElement.classList.add("btn-js-submit-field"); + const buttonElement = document.createElement('button'); + buttonElement.id = 'submit-field-button'; + buttonElement.classList.add('btn-js-submit-field'); await loadSubmitFieldButtonComponent(buttonElement); document.body.appendChild(buttonElement); buttonElement.click(); diff --git a/src/frontend/components/button/lib/submit-field-button.ts b/src/frontend/components/button/lib/submit-field-button.ts index a511f272d..b2de8200c 100644 --- a/src/frontend/components/button/lib/submit-field-button.ts +++ b/src/frontend/components/button/lib/submit-field-button.ts @@ -1,6 +1,6 @@ -import "jstree"; -import "datatables.net"; -import "@lol768/jquery-querybuilder-no-eval" +import 'jstree'; +import 'datatables.net'; +import '@lol768/jquery-querybuilder-no-eval'; declare global { interface Window { @@ -25,7 +25,7 @@ export default class SubmitFieldButton { * Create a submit field button * @param element The submit button element */ - constructor(element:JQuery) { + constructor(element: JQuery) { element.on('click', (ev) => { const $jstreeContainer = $('#field_type_tree'); @@ -49,13 +49,13 @@ export default class SubmitFieldButton { let bUpdateDisplayConditions = false; let bUpdatePeopleFilter = false; - const $showInEdit = $("#show_in_edit") + const $showInEdit = $('#show_in_edit'); if (($calcCode.length && $calcCode.is(':visible')) && !$showInEdit.val()) { if (!this.errored) { - const error = document.createElement("div"); - error.classList.add("form-text", "form-text--error"); - error.innerHTML = "Please select the calculation field visibility before submitting the form"; - $showInEdit.closest(".form-group").append(error); + const error = document.createElement('div'); + error.classList.add('form-text', 'form-text--error'); + error.innerHTML = 'Please select the calculation field visibility before submitting the form'; + $showInEdit.closest('.form-group').append(error); error.scrollIntoView(); this.errored = true; } @@ -74,13 +74,13 @@ export default class SubmitFieldButton { bUpdateDisplayConditions = true; } - if(peopleConditionsFieldEl.length && $peopleConditionsFieldRes) { + if (peopleConditionsFieldEl.length && $peopleConditionsFieldRes) { bUpdatePeopleFilter = true; } if (bUpdateTree) { //Bit of typecasting here, purely because the jstree plugin doesn't have types - const v = $jstreeEl.jstree(true).get_json('#', {flat: false}); + const v = $jstreeEl.jstree(true).get_json('#', { flat: false }); const mytext = JSON.stringify(v); const data = $jstreeEl.data(); @@ -88,10 +88,10 @@ export default class SubmitFieldButton { async: false, type: 'POST', url: this.getURL(data), - data: {data: mytext, csrf_token: data.csrfToken} + data: { data: mytext, csrf_token: data.csrfToken } }).done(() => { - // eslint-disable-next-line no-alert - alert('Tree has been updated') + + alert('Tree has been updated'); }); } @@ -101,7 +101,7 @@ export default class SubmitFieldButton { window.UpdateFilter($filterEl, ev); } - if(bUpdatePeopleFilter && window.UpdatePeopleFilter) { + if (bUpdatePeopleFilter && window.UpdatePeopleFilter) { window.UpdatePeopleFilter(peopleConditionsFieldEl, ev); } @@ -126,11 +126,11 @@ export default class SubmitFieldButton { * @param data The data for the tree * @returns The URL for the tree API */ - private getURL(data:JQuery.PlainObject):string { - if (window.test) return ""; + private getURL(data: JQuery.PlainObject): string { + if (window.test) return ''; const devEndpoint = window.siteConfig && window.siteConfig.urls.treeApi; - return devEndpoint ? devEndpoint : `/${data.layoutIdentifier}/tree/${data.columnId}` + return devEndpoint ? devEndpoint : `/${data.layoutIdentifier}/tree/${data.columnId}`; } } diff --git a/src/frontend/components/button/lib/submit-record-button.ts b/src/frontend/components/button/lib/submit-record-button.ts index a857fa9c2..71b0ae1d1 100644 --- a/src/frontend/components/button/lib/submit-record-button.ts +++ b/src/frontend/components/button/lib/submit-record-button.ts @@ -1,4 +1,4 @@ -import {validateRequiredFields} from "validation"; +import { validateRequiredFields } from 'validation'; /** * Button to submit records @@ -13,10 +13,10 @@ export default class SubmitRecordButton { * @param el {JQuery} Element to create as a button */ constructor(private el: JQuery) { - this.el.on("click", async (ev: JQuery.ClickEvent) => { + this.el.on('click', async (ev: JQuery.ClickEvent) => { const $button = $(ev.target).closest('button'); - const $form = $button.closest("form"); - const $requiredHiddenRecordDependentFields = $form.find(".form-group[data-has-dependency='1'][style*='display: none'] *[aria-required]"); + const $form = $button.closest('form'); + const $requiredHiddenRecordDependentFields = $form.find('.form-group[data-has-dependency=\'1\'][style*=\'display: none\'] *[aria-required]'); const $parent = $button.closest('.modal-body'); if (!this.requiredHiddenRecordDependentFieldsCleared) { @@ -36,15 +36,15 @@ export default class SubmitRecordButton { this.canSubmitRecordForm = true; this.disableButton = false; if ($parent.hasClass('modal-body')) { - $form.trigger("submit"); + $form.trigger('submit'); } else { $button.trigger('click'); } // Prevent double-submission this.disableButton = true; - $button.prop("disabled", true); - if ($button.prop("name")) { - $button.after(``); + $button.prop('disabled', true); + if ($button.prop('name')) { + $button.after(``); } } else { // Re-add the required attribute to required dependent fields @@ -52,7 +52,7 @@ export default class SubmitRecordButton { this.requiredHiddenRecordDependentFieldsCleared = false; } } - this.disableButton && $button.prop("disabled", this.requiredHiddenRecordDependentFieldsCleared); + if (this.disableButton) $button.prop('disabled', this.requiredHiddenRecordDependentFieldsCleared); }); } } diff --git a/src/frontend/components/button/lib/toggle-all-fields-button.ts b/src/frontend/components/button/lib/toggle-all-fields-button.ts index 5322277dd..5caae265d 100644 --- a/src/frontend/components/button/lib/toggle-all-fields-button.ts +++ b/src/frontend/components/button/lib/toggle-all-fields-button.ts @@ -4,15 +4,15 @@ */ export default function createToggleAllFieldsButton(element: JQuery) { element.on('click', (ev) => { - ev.preventDefault() - const sourceTableId = $(ev.target).data('toggleSource') - const clickedSourceTable = document.querySelector(sourceTableId) - const destinationTableID = $(ev.target).data('toggleDestination') - const rows = $(sourceTableId).find('tbody tr') + ev.preventDefault(); + const sourceTableId = $(ev.target).data('toggleSource'); + const clickedSourceTable = document.querySelector(sourceTableId); + const destinationTableID = $(ev.target).data('toggleDestination'); + const rows = $(sourceTableId).find('tbody tr'); import(/* webpackChunkName: "datatable-toggle-table" */ '../../data-table/lib/toggle-table') - .then(({toggleRowInTable}) => { + .then(({ toggleRowInTable }) => { rows.each((index, row) => { - toggleRowInTable( row, clickedSourceTable, destinationTableID, true) + toggleRowInTable(row, clickedSourceTable, destinationTableID, true); }); }); }); diff --git a/src/frontend/components/calculator/index.js b/src/frontend/components/calculator/index.js index f2c9a2ba8..37e53dffe 100644 --- a/src/frontend/components/calculator/index.js +++ b/src/frontend/components/calculator/index.js @@ -1,9 +1,9 @@ -import { getComponentElements, initializeComponent } from 'component' +import { getComponentElements, initializeComponent } from 'component'; export default (scope) => { if (!getComponentElements(scope, '.calculator').length) return; - import(/* webpackChunkName: "calculator" */ "./lib/component").then( + import(/* webpackChunkName: "calculator" */ './lib/component').then( ({ default: CalculatorComponent }) => initializeComponent(scope, '.calculator', CalculatorComponent)); -} +}; diff --git a/src/frontend/components/calculator/lib/component.js b/src/frontend/components/calculator/lib/component.js index 91e68856e..068b80ce4 100644 --- a/src/frontend/components/calculator/lib/component.js +++ b/src/frontend/components/calculator/lib/component.js @@ -1,165 +1,167 @@ -import { Component } from 'component' +import { Component } from 'component'; class CalculatorComponent extends Component { - constructor(element) { - super(element) - this.el = $(this.element) - - this.initCalculator() - } - - initCalculator() { - const selector = this.el.find('input:not([type="checkbox"])') - const $nodes = this.el.find('label:not(.checkbox-label)') - - $nodes.each((i, node) => { - const $el = $(node); - const calculator_id = 'calculator_div' - const calculator_elem = $(``) - - calculator_elem.css({ - position: 'absolute', - 'z-index': 1100, - display: 'none', - padding: '10px' - }) - - $('body').append(calculator_elem) - - calculator_elem.append( - '
' + - '
' + - '
' + - '
' + - ' ' + - "
" + - "
" - ) - - $(document).on('mouseup',(e) => { - if ( - !calculator_elem.is(e.target) && + constructor(element) { + super(element); + this.el = $(this.element); + + this.initCalculator(); + } + + initCalculator() { + const selector = this.el.find('input:not([type="checkbox"])'); + const $nodes = this.el.find('label:not(.checkbox-label)'); + + $nodes.each((i, node) => { + const $el = $(node); + const calculator_id = 'calculator_div'; + const calculator_elem = $(``); + + calculator_elem.css({ + position: 'absolute', + 'z-index': 1100, + display: 'none', + padding: '10px' + }); + + $('body').append(calculator_elem); + + calculator_elem.append( + '
' + + '
' + + '
' + + '
' + + ' ' + + '
' + + '
' + ); + + $(document).on('mouseup', (e) => { + if ( + !calculator_elem.is(e.target) && calculator_elem.has(e.target).length === 0 - ) { - calculator_elem.hide() - } - }) - - let calculator_operation - let integer_input_elem - - const calculator_button = [ - { - action: 'add', - label: '+', - keypress: ['+'], - operation: function(a, b) { - return a + b - } - }, - { - action: 'subtract', - label: '-', - keypress: ['-'], - operation: function(a, b) { - return a - b - } - }, - { - action: 'multiply', - label: 'Ă—', - keypress: ['*', 'X', 'x', 'Ă—'], - operation: function(a, b) { - return a * b - } - }, - { - action: 'divide', - label: 'Ă·', - keypress: ['/', 'Ă·'], - operation: function(a, b) { - return a / b - } - } - ] - const keypress_action = {} - const operator_btns_elem = calculator_elem.find('.radio-group--buttons') - - $(calculator_button).each((i) => { - const btn = calculator_button[i] - const button_elem = $( - `
` + - `` + - `` + - `
` - ) - - operator_btns_elem.append(button_elem) - - $(button_elem).find('.radio-group__label').on('click', () => { - $(button_elem).find('.radio-group__input').prop("checked", true) - calculator_operation = btn.operation - calculator_elem.find(':text').focus() - }) - - for (const j in btn.keypress) { - const keypress = btn.keypress[j] - keypress_action[keypress] = btn.action - } - }) - - calculator_elem.find(':text').on('keypress', (e) => { - const key_pressed = e.key - - if (key_pressed in keypress_action) { - const button_selector = `.btn_label_${keypress_action[key_pressed]}` - calculator_elem.find(button_selector).trigger("click") - e.preventDefault() - } - }) - - calculator_elem.find('form').on('submit', (e) => { - const new_value = calculator_operation( - +integer_input_elem.val(), - +calculator_elem.find(':text').val() - ) - - integer_input_elem.val(new_value) - calculator_elem.hide() - e.preventDefault() - }) - - const $calc_button = $('Calculator') - - $calc_button.insertAfter($el).on('click', (e) => { - const calc_elem = $(e.target) - const container_elem = calc_elem.closest('.form-group') - const input_elem = container_elem.find(selector) - - const container_y_offset = container_elem.offset().top - const container_height = container_elem.height() - const calc_div_height = $('#calculator_div').height() - let calculator_y_offset - - if (container_y_offset > calc_div_height) { - calculator_y_offset = container_y_offset - calc_div_height - } else { - calculator_y_offset = container_y_offset + container_height - } - - calculator_elem.css({ - top: calculator_y_offset, - left: container_elem.offset().left - }) - - const calc_input = calculator_elem.find(':text') - calc_input.val('') - calculator_elem.show() - calc_input.trigger("focus") - integer_input_elem = input_elem - }) - }) - } + ) { + calculator_elem.hide(); + } + }); + + let calculator_operation; + let integer_input_elem; + + const calculator_button = [ + { + action: 'add', + label: '+', + keypress: ['+'], + operation: function (a, b) { + return a + b; + } + }, + { + action: 'subtract', + label: '-', + keypress: ['-'], + operation: function (a, b) { + return a - b; + } + }, + { + action: 'multiply', + label: 'Ă—', + keypress: ['*', 'X', 'x', 'Ă—'], + operation: function (a, b) { + return a * b; + } + }, + { + action: 'divide', + label: 'Ă·', + keypress: ['/', 'Ă·'], + operation: function (a, b) { + return a / b; + } + } + ]; + const keypress_action = {}; + const operator_btns_elem = calculator_elem.find('.radio-group--buttons'); + + $(calculator_button).each((i) => { + const btn = calculator_button[i]; + const button_elem = $( + '
' + + `` + + `` + + '
' + ); + + operator_btns_elem.append(button_elem); + + $(button_elem).find('.radio-group__label') + .on('click', () => { + $(button_elem).find('.radio-group__input') + .prop('checked', true); + calculator_operation = btn.operation; + calculator_elem.find(':text').focus(); + }); + + for (const j in btn.keypress) { + const keypress = btn.keypress[j]; + keypress_action[keypress] = btn.action; + } + }); + + calculator_elem.find(':text').on('keypress', (e) => { + const key_pressed = e.key; + + if (key_pressed in keypress_action) { + const button_selector = `.btn_label_${keypress_action[key_pressed]}`; + calculator_elem.find(button_selector).trigger('click'); + e.preventDefault(); + } + }); + + calculator_elem.find('form').on('submit', (e) => { + const new_value = calculator_operation( + +integer_input_elem.val(), + +calculator_elem.find(':text').val() + ); + + integer_input_elem.val(new_value); + calculator_elem.hide(); + e.preventDefault(); + }); + + const $calc_button = $('Calculator'); + + $calc_button.insertAfter($el).on('click', (e) => { + const calc_elem = $(e.target); + const container_elem = calc_elem.closest('.form-group'); + const input_elem = container_elem.find(selector); + + const container_y_offset = container_elem.offset().top; + const container_height = container_elem.height(); + const calc_div_height = $('#calculator_div').height(); + let calculator_y_offset; + + if (container_y_offset > calc_div_height) { + calculator_y_offset = container_y_offset - calc_div_height; + } else { + calculator_y_offset = container_y_offset + container_height; + } + + calculator_elem.css({ + top: calculator_y_offset, + left: container_elem.offset().left + }); + + const calc_input = calculator_elem.find(':text'); + calc_input.val(''); + calculator_elem.show(); + calc_input.trigger('focus'); + integer_input_elem = input_elem; + }); + }); + } } -export default CalculatorComponent +export default CalculatorComponent; diff --git a/src/frontend/components/card/index.js b/src/frontend/components/card/index.js index fcb29c372..2187a85e8 100644 --- a/src/frontend/components/card/index.js +++ b/src/frontend/components/card/index.js @@ -1,4 +1,4 @@ -import { initializeComponent } from 'component' -import ExpandableCardComponent from './lib/component' +import { initializeComponent } from 'component'; +import ExpandableCardComponent from './lib/component'; -export default (scope) => initializeComponent(scope, '.card--expandable', ExpandableCardComponent) +export default (scope) => initializeComponent(scope, '.card--expandable', ExpandableCardComponent); diff --git a/src/frontend/components/card/lib/component.js b/src/frontend/components/card/lib/component.js index c0aaa1092..398a5c3f1 100644 --- a/src/frontend/components/card/lib/component.js +++ b/src/frontend/components/card/lib/component.js @@ -1,111 +1,113 @@ -import { Component } from 'component' +import { Component } from 'component'; +import 'bootstrap'; class ExpandableCardComponent extends Component { - constructor(element) { - super(element) - this.$el = $(this.element) - this.$contentBlock = this.$el.closest('.content-block') + constructor(element) { + super(element); + this.$el = $(this.element); + this.$contentBlock = this.$el.closest('.content-block'); - this.initExpandableCard() + this.initExpandableCard(); - if (this.$el.hasClass('card--topic')) { - this.initTopicCard() + if (this.$el.hasClass('card--topic')) { + this.initTopicCard(); + } } - } - initExpandableCard() { - const $collapsibleElm = this.$el.find('.collapse') - const $btnEdit = this.$el.find('.btn-js-edit') - const $btnView = this.$el.find('.btn-js-view') - const $btnCancel = this.$contentBlock.find('.btn-js-cancel') - const $recordPopup = this.$el.find('.record-popup') + initExpandableCard() { + const $collapsibleElm = this.$el.find('.collapse'); + const $btnEdit = this.$el.find('.btn-js-edit'); + const $btnView = this.$el.find('.btn-js-view'); + const $btnCancel = this.$contentBlock.find('.btn-js-cancel'); + const $recordPopup = this.$el.find('.record-popup'); - $btnEdit.on('click', () => { - this.$contentBlock.addClass('content-block--edit') - this.$el.addClass('card--edit') - $collapsibleElm.collapse('show') - $(window).on('beforeunload', (ev) => this.confirmOnPageExit(ev)) - }) + $btnEdit.on('click', () => { + this.$contentBlock.addClass('content-block--edit'); + this.$el.addClass('card--edit'); + $collapsibleElm.collapse('show'); + $(window).on('beforeunload', (ev) => this.confirmOnPageExit(ev)); + }); - $btnView.on('click', () => { - this.$el.removeClass('card--edit') - this.canRemoveEditClass() && this.$contentBlock.removeClass('content-block--edit') - $(window).off('beforeunload') - }) + $btnView.on('click', () => { + this.$el.removeClass('card--edit'); + if (this.canRemoveEditClass()) this.$contentBlock.removeClass('content-block--edit'); + $(window).off('beforeunload'); + }); - $btnCancel.on('click', () => { - this.$contentBlock.find('.card--edit').removeClass('card--edit') - this.$contentBlock.removeClass('content-block--edit') - $(window).off('beforeunload') - }) + $btnCancel.on('click', () => { + this.$contentBlock.find('.card--edit').removeClass('card--edit'); + this.$contentBlock.removeClass('content-block--edit'); + $(window).off('beforeunload'); + }); - // Adjust column widths of datatables when collapsible element is expanded - $collapsibleElm.on('shown.bs.collapse', () => { - if ($.fn.dataTable) { - $($.fn.dataTable.tables(true)).DataTable() - .columns.adjust() - this.clearupStyling(); - } - }) + // Adjust column widths of datatables when collapsible element is expanded + $collapsibleElm.on('shown.bs.collapse', () => { + if ($.fn.dataTable) { + $($.fn.dataTable.tables(true)).DataTable() + .columns.adjust(); + this.clearupStyling(); + } + }); - $(window).on('resize', () => { - if ($.fn.dataTable) { - $($.fn.dataTable.tables(true)).DataTable() - .columns.adjust() - this.clearupStyling(); - } - }) + $(window).on('resize', () => { + if ($.fn.dataTable) { + $($.fn.dataTable.tables(true)).DataTable() + .columns.adjust(); + this.clearupStyling(); + } + }); - $recordPopup.each((i, el) => { - import(/* webpackChunkName: "record-popup" */ '../../record-popup/lib/component') - .then(({ default: RecordPopupComponent }) => - new RecordPopupComponent(el) - ); - }) - } - - initTopicCard() { - // Now that fields are shown/hidden on page load, for each topic check - // whether it has zero displayed fields, in which case hide the whole - // topic (this also happens on field value change dynamically when a user - // edits the page). - // This applies to all of: historical view, main record view page, and main - // record edit page. Use display:none parameter rather than visibility, - // as fields will not be visible if view-mode is used in a normal record, - // and also check .table-fields as historical view will not include any - // of the linkspace-field fields - if (!this.$el.find('.list--fields').find('ul li').filter(function () { - return $(this).css("display") != "none"; - }).length && !this.$el.find('.linkspace-field').filter(function () { - return $(this).css("display") != "none"; - }).length) { - this.$el.hide(); + $recordPopup.each((i, el) => { + import(/* webpackChunkName: "record-popup" */ '../../record-popup/lib/component') + .then(({ default: RecordPopupComponent }) => + new RecordPopupComponent(el) + ); + }); } - } - canRemoveEditClass() { - return ! this.$contentBlock.find('.card--edit').length - } + initTopicCard() { + // Now that fields are shown/hidden on page load, for each topic check + // whether it has zero displayed fields, in which case hide the whole + // topic (this also happens on field value change dynamically when a user + // edits the page). + // This applies to all of: historical view, main record view page, and main + // record edit page. Use display:none parameter rather than visibility, + // as fields will not be visible if view-mode is used in a normal record, + // and also check .table-fields as historical view will not include any + // of the linkspace-field fields + if (!this.$el.find('.list--fields').find('ul li') + .filter(function () { + return $(this).css('display') != 'none'; + }).length && !this.$el.find('.linkspace-field').filter(function () { + return $(this).css('display') != 'none'; + }).length) { + this.$el.hide(); + } + } - confirmOnPageExit = function(ev) { - ev = ev || window.event - const message = "Please note that any changes will be lost." - if (ev) { - ev.returnValue = message + canRemoveEditClass() { + return !this.$contentBlock.find('.card--edit').length; } - return message - } - /* - In order to ensure headers on the view filter tables are the correct width, we need to remove any styling that has been added to the header elements. - And for some reason, using JQuery and DataTables, the styling is not reset as we expect it to be. - */ - clearupStyling() { - const tables = $('.table-toggle') - tables.removeAttr('style'); - const headers = $('.dt-scroll-headInner'); - headers.removeAttr('style'); - } + confirmOnPageExit = function (ev) { + ev = ev || window.event; + const message = 'Please note that any changes will be lost.'; + if (ev) { + ev.returnValue = message; + } + return message; + }; + + /* + In order to ensure headers on the view filter tables are the correct width, we need to remove any styling that has been added to the header elements. + And for some reason, using JQuery and DataTables, the styling is not reset as we expect it to be. + */ + clearupStyling() { + const tables = $('.table-toggle'); + tables.removeAttr('style'); + const headers = $('.dt-scroll-headInner'); + headers.removeAttr('style'); + } } -export default ExpandableCardComponent +export default ExpandableCardComponent; diff --git a/src/frontend/components/card/lib/component.test.ts b/src/frontend/components/card/lib/component.test.ts new file mode 100644 index 000000000..ae8c0225e --- /dev/null +++ b/src/frontend/components/card/lib/component.test.ts @@ -0,0 +1,185 @@ +import { describe, it, expect, beforeEach, afterEach } from '@jest/globals'; +import ExpandableCardComponent from './component'; + +describe('ExpandableCardComponent', () => { + beforeEach(() => { + document.body.innerHTML = ` +
+
+
+ +
+ + + +
+
+
+
+
+
+
    +
  • + Surname + +
    Pig
    +     +
    • +
  • + Forename + +
    Daddy
    +     +
    • +
  • + Full Name + +
    Daddy Pig
    +     +
    • +
  • + Age + 9783 +
    • +
+
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+`; + }); + + afterEach(() => { + document.body.innerHTML = ''; + }); + + describe('Without topic', () => { + it('Should create an expandable card component', () => { + const target = document.getElementById('target'); + expect(target).not.toBeNull(); + expect(target?.dataset.componentInitializedExpandablecardcomponent).toBeUndefined(); + new ExpandableCardComponent(target as HTMLElement); + expect(target?.dataset.componentInitializedExpandablecardcomponent).toBe('true'); + expect(target?.classList.contains('card--edit')).toBe(false); + }); + + it('Should go into edit mode', () => { + const target = document.getElementById('target'); + if (!target) throw new Error('Target not found'); + new ExpandableCardComponent(target as HTMLElement); + const editButton = target.querySelector('.btn-js-edit') as HTMLButtonElement; + expect(editButton).not.toBeNull(); + editButton.click(); + expect(target.classList.contains('card--edit')).toBe(true); + }); + + it('Should go into view mode', () => { + const target = document.getElementById('target'); + if (!target) throw new Error('Target not found'); + new ExpandableCardComponent(target as HTMLElement); + const editButton = target.querySelector('.btn-js-edit') as HTMLButtonElement; + expect(editButton).not.toBeNull(); + editButton.click(); + expect(target.classList.contains('card--edit')).toBe(true); + const viewButton = target.querySelector('.btn-js-view') as HTMLButtonElement; + expect(viewButton).not.toBeNull(); + viewButton.click(); + expect(target.classList.contains('card--edit')).toBe(false); + }); + }); + + describe('With topic', () => { + beforeEach(() => { + const target = document.getElementById('target'); + if (!target) throw new Error('Target not found'); + target?.classList.add('card--topic'); + }); + + it('should create an expandable topic component', () => { + const target = document.getElementById('target'); + if (!target) throw new Error('Target not found'); + // Set the items in the card to be invisible, as if there was nothing to show + const $target = $(target); + $target.find('.list--fields').find('ul li') + .each((_i, el) => { + $(el).css('display', 'none'); + }); + $target.find('.linkspace-field').each((_i, el) => { + $(el).css('display', 'none'); + }); + new ExpandableCardComponent(target as HTMLElement); + expect(target?.dataset.componentInitializedExpandablecardcomponent).toBe('true'); + // We expect the card to be hidden + expect(target?.style.display).toBe('none'); + }); + }); +}); diff --git a/src/frontend/components/collapsible/index.js b/src/frontend/components/collapsible/index.js index 46abd7f4d..b101ec9e9 100644 --- a/src/frontend/components/collapsible/index.js +++ b/src/frontend/components/collapsible/index.js @@ -1,4 +1,4 @@ -import { initializeComponent } from 'component' -import CollapsibleComponent from './lib/component' +import { initializeComponent } from 'component'; +import CollapsibleComponent from './lib/component'; -export default (scope) => initializeComponent(scope, '.collapsible', CollapsibleComponent) +export default (scope) => initializeComponent(scope, '.collapsible', CollapsibleComponent); diff --git a/src/frontend/components/collapsible/lib/component.js b/src/frontend/components/collapsible/lib/component.js index 77584525e..f228b8749 100644 --- a/src/frontend/components/collapsible/lib/component.js +++ b/src/frontend/components/collapsible/lib/component.js @@ -1,29 +1,29 @@ -import { Component } from 'component' +import { Component } from 'component'; class CollapsibleComponent extends Component { - constructor(element) { - super(element) - this.el = $(this.element) - this.button = this.el.find('.btn-collapsible') - this.titleCollapsed = this.el.find('.btn__title--collapsed') - this.titleExpanded = this.el.find('.btn__title--expanded') + constructor(element) { + super(element); + this.el = $(this.element); + this.button = this.el.find('.btn-collapsible'); + this.titleCollapsed = this.el.find('.btn__title--collapsed'); + this.titleExpanded = this.el.find('.btn__title--expanded'); - this.initCollapsible(this.button) + this.initCollapsible(this.button); } initCollapsible(button) { if (!button) { - return + return; } - this.titleExpanded.addClass('hidden') - button.click( () => { this.handleClick() }) + this.titleExpanded.addClass('hidden'); + button.click(() => { this.handleClick(); }); } handleClick() { - this.titleExpanded.toggleClass('hidden') - this.titleCollapsed.toggleClass('hidden') + this.titleExpanded.toggleClass('hidden'); + this.titleCollapsed.toggleClass('hidden'); } } -export default CollapsibleComponent +export default CollapsibleComponent; diff --git a/src/frontend/components/collapsible/lib/component.test.ts b/src/frontend/components/collapsible/lib/component.test.ts new file mode 100644 index 000000000..34f3d67e3 --- /dev/null +++ b/src/frontend/components/collapsible/lib/component.test.ts @@ -0,0 +1,56 @@ +import {describe, it, expect, beforeEach, afterEach} from '@jest/globals'; +import Collapsible from './component'; + +describe('Collapsible', () => { + beforeEach(() => { + document.body.innerHTML = ` +
+
+ +
+
+
+ Content is: + content +
+
Please make a secure note of this content now, as it will not be displayed again.
+
+
+ `; + }); + + afterEach(() => { + document.body.innerHTML = ''; + }); + + it('should create a new collapsible component', () => { + const target = document.getElementById('target'); + expect(target).not.toBeNull(); + expect(target?.dataset.componentInitializedCollapsiblecomponent).not.toBe('true'); + new Collapsible(target as HTMLElement); + expect(target?.dataset.componentInitializedCollapsiblecomponent).toBe('true'); + }); + + it('should toggle the collapsible content', () => { + const target = document.getElementById('target'); + if(target === null) throw new Error('Target element not found'); + new Collapsible(target as HTMLElement); + const button = target.querySelector('.btn-collapsible') as HTMLButtonElement; + const titleCollapsed = target.querySelector('.btn__title--collapsed') as HTMLSpanElement; + const titleExpanded = target.querySelector('.btn__title--expanded') as HTMLSpanElement; + // Initial state + expect(titleCollapsed.classList.contains('hidden')).toBe(false); + expect(titleExpanded.classList.contains('hidden')).toBe(true); + // Toggle + button.click(); + expect(titleCollapsed.classList.contains('hidden')).toBe(true); + expect(titleExpanded.classList.contains('hidden')).toBe(false); + // Toggle again + button.click(); + expect(titleCollapsed.classList.contains('hidden')).toBe(false); + expect(titleExpanded.classList.contains('hidden')).toBe(true); + }); +}); \ No newline at end of file diff --git a/src/frontend/components/dashboard/dashboard-graph/index.js b/src/frontend/components/dashboard/dashboard-graph/index.js index 72dfc56a9..a9f0616fb 100644 --- a/src/frontend/components/dashboard/dashboard-graph/index.js +++ b/src/frontend/components/dashboard/dashboard-graph/index.js @@ -1,8 +1,8 @@ -import { getComponentElements, initializeComponent } from 'component' +import { getComponentElements, initializeComponent } from 'component'; export default (scope) => { - if(getComponentElements(scope, '.dashboard-graph').length === 0) return; - import('./lib/component').then(({default: DashboardGraphComponent}) =>{ - initializeComponent(scope, '.dashboard-graph', DashboardGraphComponent) + if (getComponentElements(scope, '.dashboard-graph').length === 0) return; + import('./lib/component').then(({ default: DashboardGraphComponent }) => { + initializeComponent(scope, '.dashboard-graph', DashboardGraphComponent); }); -} +}; diff --git a/src/frontend/components/dashboard/dashboard-graph/lib/component.js b/src/frontend/components/dashboard/dashboard-graph/lib/component.js index 4cc9e4c9a..7c4ace897 100644 --- a/src/frontend/components/dashboard/dashboard-graph/lib/component.js +++ b/src/frontend/components/dashboard/dashboard-graph/lib/component.js @@ -1,20 +1,20 @@ -import { do_plot_json } from '../../../graph/lib/chart' -import GraphComponent from '../../../graph/lib/component' +import { do_plot_json } from '../../../graph/lib/chart'; +import GraphComponent from '../../../graph/lib/component'; class DashboardGraphComponent extends GraphComponent { - constructor(element) { - super(element) - this.initDashboardGraph() - } + constructor(element) { + super(element); + this.initDashboardGraph(); + } - initDashboardGraph() { - const $graph = $(this.element) - const graph_data = $graph.data('plot-data') - const options_in = $graph.data('plot-options') + initDashboardGraph() { + const $graph = $(this.element); + const graph_data = $graph.data('plot-data'); + const options_in = $graph.data('plot-options'); - do_plot_json(graph_data, options_in) + do_plot_json(graph_data, options_in); - } + } } -export default DashboardGraphComponent +export default DashboardGraphComponent; diff --git a/src/frontend/components/dashboard/index.js b/src/frontend/components/dashboard/index.js index 5fc99dcb3..e3f9a715e 100644 --- a/src/frontend/components/dashboard/index.js +++ b/src/frontend/components/dashboard/index.js @@ -1,23 +1,23 @@ -import { initializeComponent, getComponentElements } from 'component' +import { initializeComponent, getComponentElements } from 'component'; export default (scope) => { - if (!getComponentElements(scope, '.dashboard').length) { - return; - } + if (!getComponentElements(scope, '.dashboard').length) { + return; + } - import( - /* webpackChunkName: "dashboard" */ - './lib/component' - ).then(({ default: Component }) => { - initializeComponent(scope, '.dashboard', Component) - }).then(() => { import( - /* webpackChunkName: "dashboardgraph" */ - './dashboard-graph/lib/component' + /* webpackChunkName: "dashboard" */ + './lib/component' ).then(({ default: Component }) => { - initializeComponent(scope, '.dashboard-graph', Component) - }) - }); + initializeComponent(scope, '.dashboard', Component); + }).then(() => { + import( + /* webpackChunkName: "dashboardgraph" */ + './dashboard-graph/lib/component' + ).then(({ default: Component }) => { + initializeComponent(scope, '.dashboard-graph', Component); + }); + }); -} +}; diff --git a/src/frontend/components/dashboard/lib/component.js b/src/frontend/components/dashboard/lib/component.js index 5214afd99..3ed79d0cd 100644 --- a/src/frontend/components/dashboard/lib/component.js +++ b/src/frontend/components/dashboard/lib/component.js @@ -1,60 +1,60 @@ -import { Component } from 'component' -import "react-app-polyfill/stable"; +import { Component } from 'component'; +import 'react-app-polyfill/stable'; -import "core-js/es/array/is-array"; -import "core-js/es/map"; -import "core-js/es/set"; -import "core-js/es/object/define-property"; -import "core-js/es/object/keys"; -import "core-js/es/object/set-prototype-of"; +import 'core-js/es/array/is-array'; +import 'core-js/es/map'; +import 'core-js/es/set'; +import 'core-js/es/object/define-property'; +import 'core-js/es/object/keys'; +import 'core-js/es/object/set-prototype-of'; -import "./react/polyfills/classlist"; +import './react/polyfills/classlist'; -import React from "react"; -import ReactDOM from "react-dom"; -import App from "./react/app"; -import ApiClient from "./react/api"; +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './react/app'; +import ApiClient from './react/api'; class DashboardComponent extends Component { - constructor(element) { - super(element) - this.el = $(this.element) - - this.gridConfig = { - cols: 2, - margin: [32, 32], - containerPadding: [0, 10], - rowHeight: 80, - }; - - this.initDashboard() - } - - initDashboard() { - this.element.className = ""; - const widgetsEls = Array.prototype.slice.call(document.querySelectorAll("#ld-app > div")); - const widgets = widgetsEls.map(el => ({ - html: el.innerHTML, - config: JSON.parse(el.getAttribute("data-grid")), - })); - const api = new ApiClient(this.element.getAttribute("data-dashboard-endpoint") || ""); - - ReactDOM.render( - , - this.element, - ); - } + constructor(element) { + super(element); + this.el = $(this.element); + + this.gridConfig = { + cols: 2, + margin: [32, 32], + containerPadding: [0, 10], + rowHeight: 80 + }; + + this.initDashboard(); + } + + initDashboard() { + this.element.className = ''; + const widgetsEls = Array.prototype.slice.call(document.querySelectorAll('#ld-app > div')); + const widgets = widgetsEls.map(el => ({ + html: el.innerHTML, + config: JSON.parse(el.getAttribute('data-grid')) + })); + const api = new ApiClient(this.element.getAttribute('data-dashboard-endpoint') || ''); + + ReactDOM.render( + , + this.element + ); + } } -export default DashboardComponent +export default DashboardComponent; diff --git a/src/frontend/components/dashboard/lib/react/Footer.test.tsx b/src/frontend/components/dashboard/lib/react/Footer.test.tsx new file mode 100644 index 000000000..638188a46 --- /dev/null +++ b/src/frontend/components/dashboard/lib/react/Footer.test.tsx @@ -0,0 +1,120 @@ +import React from 'react'; +import { act, render, screen } from '@testing-library/react'; +import '@testing-library/dom'; +import { describe, it, expect, jest } from '@jest/globals'; + +import Footer from './Footer'; + +import 'testing/extensions'; + +describe('Footer', () => { + it('Creates a footer', () => { + const footerProps = { + addWidget: jest.fn(), + currentDashboard: { + name: 'Dashboard 1', + url: 'http://localhost:3000/dashboard/1', + download_url: 'http://localhost:3000/dashboard/1/download' + }, + noDownload: false, + readOnly: false, + widgetTypes: ['type1', 'type2'] + }; + + render(