feat(footer): add Custom Footer component (#5)

* feat(footer): add Custom Footer component as vanilla JS/TS with Unit & E2E tests
ghiscoding · Jul 9, 2020 · 59d0ba8 · 59d0ba8
1 parent fe014ca
commit 59d0ba8
Show file tree

Hide file tree

Showing 58 changed files with 2,103 additions and 648 deletions.
diff --git a/README.md b/README.md
@@ -35,17 +35,19 @@ and [Aurelia-Slickgrid](https://github.com/ghiscoding/aurelia-slickgrid) to use
 Note however that this project also has a Vanilla Implementation (not associated to any framework)
 and it is also used to test with the UI portion. The Vanilla bundle is also used in our SalesForce (with Lightning Web Component) hence the creation of this monorepo.
 
-#### The main packages structure is the following
-- `@slickgrid-universal/common`: commonly used Formatters/Editors/Filters/Services/...
-  - this can then be used by any Framework (Angular, Aurelia, VanillaJS, ...)
-- `@slickgrid-universal/excel-export`: export to Excel (xls/xlsx)
-- `@slickgrid-universal/file-export`: export to text file (csv/txt)
-- `@slickgrid-universal/graphql`: GraphQL querying (support Filter/Sort/Pagination with a GraphQL backend Server)
-- `@slickgrid-universal/odata`: OData querying (support Filter/Sort/Pagination with an OData backend Server)
-- `@slickgrid-universal/vanilla-bundle`: a vanilla TypeScript/JavaScript implementation (framework-less)
-  - &nbsp;
-- **Standalone Package**
-  - `slickgrid-universal/web-demo-vanilla-bundle` standalone package for demo purposes and UI testing (not a public package)
+### Available Packages
+
+| Package Name | Description | Publish |
+| --------| ----------- | ------------- |
+| [@slickgrid-universal/common](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/common) | commonly used Formatters/Editors/Filters/Services/... | public |
+| [@slickgrid-universal/excel-export](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/excel-export) | export to Excel (xls/xlsx) | public |
+| [@slickgrid-universal/file-export](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/file-export) | export to text file (csv/txt) | public |
+| [@slickgrid-universal/graphql](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/graphql) | GraphQL querying (support Filter/Sort/Pagination with a GraphQL backend Server) | public |
+| [@slickgrid-universal/odata](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/odata) | OData querying (support Filter/Sort/Pagination with an OData backend Server) | public |
+| [@slickgrid-universal/vanilla-bundle](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/vanilla-bundle) | a vanilla TypeScript/JavaScript implementation | public |
+|  |  |  |
+| [slickgrid-universal/web-demo-vanilla-bundle](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/web-demo-vanilla-bundle) | standalone package for demo purposes and UI testing (therefore not a public package) | private |
+
 
 ### Installation
 To get going with this monorepo, you will need to clone the repo and then follow the steps below
@@ -125,10 +127,10 @@ npm run test:watch
   - [x] Sort
 - [ ] Others / Vanilla Implementation
   - [x] Custom Footer
-    - [ ] add unit tests (possibly rewrite component in vanilla JS)
   - [x] Backend Services + Pagination
   - [x] Local Pagination
   - [x] Grid Presets
+    - [ ] Preset Row Selections
   - [ ] Dynamically Add Columns
   - [ ] Translations Support
   - [ ] Tree Data

diff --git a/docs/app.a5da56b69f47a82084ee.bundle.css b/docs/app.a5da56b69f47a82084ee.bundle.css
diff --git a/docs/app.b0549aeeb865e0f3c1b2.bundle.js b/docs/app.b0549aeeb865e0f3c1b2.bundle.js
diff --git a/docs/app.b0549aeeb865e0f3c1b2.bundle.map b/docs/app.b0549aeeb865e0f3c1b2.bundle.map
diff --git a/docs/app.fe29ab69d904d58efc09.bundle.js b/docs/app.fe29ab69d904d58efc09.bundle.js
diff --git a/docs/app.fe29ab69d904d58efc09.bundle.map b/docs/app.fe29ab69d904d58efc09.bundle.map
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!doctype html><html><head><meta charset="utf-8"><title>Slickgrid-Universal</title><meta name="viewport" content="width=device-width,initial-scale=1"><base href=""><link rel="icon" href="favicon.ico"><link href="app.a5da56b69f47a82084ee.bundle.css" rel="stylesheet"></head><body class="has-navbar-fixed-top"><script async defer="defer" src="//buttons.github.io/buttons.js"></script><div app="main"><div style="margin: 50px; font-weight: bold;">LOADING...</div></div><script src="app.b0549aeeb865e0f3c1b2.bundle.js"></script></body></html>
+<!doctype html><html><head><meta charset="utf-8"><title>Slickgrid-Universal</title><meta name="viewport" content="width=device-width,initial-scale=1"><base href=""><link rel="icon" href="favicon.ico"><link href="app.a5da56b69f47a82084ee.bundle.css" rel="stylesheet"></head><body class="has-navbar-fixed-top"><script async defer="defer" src="//buttons.github.io/buttons.js"></script><div app="main"><div style="margin: 50px; font-weight: bold;">LOADING...</div></div><script src="app.fe29ab69d904d58efc09.bundle.js"></script></body></html>
diff --git a/package.json b/package.json
@@ -34,12 +34,12 @@
     ]
   },
   "devDependencies": {
-    "@types/jest": "^26.0.3",
-    "@types/node": "^14.0.14",
-    "@typescript-eslint/eslint-plugin": "^3.5.0",
-    "@typescript-eslint/parser": "^3.5.0",
-    "cypress": "^4.9.0",
-    "eslint": "^7.3.1",
+    "@types/jest": "^26.0.4",
+    "@types/node": "^14.0.19",
+    "@typescript-eslint/eslint-plugin": "^3.6.0",
+    "@typescript-eslint/parser": "^3.6.0",
+    "cypress": "^4.10.0",
+    "eslint": "^7.4.0",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-prefer-arrow": "^1.2.1",
     "http-server": "^0.12.3",
@@ -54,7 +54,7 @@
     "mocha": "^8.0.1",
     "mochawesome": "^6.1.1",
     "ts-jest": "^26.1.1",
-    "typescript": "^3.9.5"
+    "typescript": "^3.9.6"
   },
   "engines": {
     "node": ">=12.13.1",

diff --git a/packages/common/README.md b/packages/common/README.md
@@ -1,10 +1,10 @@
-## Vanilla Bundle 
+## Vanilla Bundle
 #### @slickgrid-universal/common
 
-This package is regrouping the most common features or pieces that could be used by any other Framework (it is framework agnostic). It includes all Editors, Filters, Extensions and Services as can be seen below. 
+This package is regrouping the most common features or pieces that could be used by any other Framework (it is framework agnostic). It includes all Editors, Filters, Extensions and Services as can be seen below.
 
 ### Installation
-Go to the root of the repo and follow the instruction provided in the main [README](https://github.com/ghiscoding/slickgrid-universal#installation)
+Go to the root of the repo and follow the instructions provided in the main [README](https://github.com/ghiscoding/slickgrid-universal#installation)
 
 ### What is included?
 - **Aggregators** (min, max, avg, sum, ...)

diff --git a/packages/common/package.json b/packages/common/package.json
@@ -56,7 +56,7 @@
     "not dead"
   ],
   "dependencies": {
-    "dompurify": "^2.0.11",
+    "dompurify": "^2.0.12",
     "flatpickr": "^4.6.3",
     "jquery": "^3.4.1",
     "jquery-ui-dist": "^1.12.1",
@@ -67,9 +67,9 @@
   },
   "devDependencies": {
     "@types/dompurify": "^2.0.2",
-    "@types/jquery": "^3.3.38",
+    "@types/jquery": "^3.5.0",
     "@types/moment": "^2.13.0",
-    "autoprefixer": "^9.8.0",
+    "autoprefixer": "^9.8.4",
     "copyfiles": "^2.3.0",
     "cross-env": "^7.0.2",
     "mini-css-extract-plugin": "^0.9.0",
@@ -78,10 +78,10 @@
     "npm-run-all": "^4.1.5",
     "postcss-cli": "^7.1.1",
     "rimraf": "^3.0.2",
-    "typescript": "^3.9.5"
+    "typescript": "^3.9.6"
   },
   "engines": {
     "node": ">=12.13.1",
     "npm": ">=6.12.1"
   }
-}
+}
diff --git a/packages/common/src/global-grid-options.ts b/packages/common/src/global-grid-options.ts
@@ -57,7 +57,7 @@ export const GlobalGridOptions: GridOption = {
     width: 200,
   },
   customFooterOptions: {
-    dateFormat: 'YYYY-DD-MM h:mm:ss a',
+    dateFormat: 'YYYY-MM-DD, hh:mm a',
     hideTotalItemCount: false,
     hideLastUpdateTimestamp: true,
     footerHeight: 20,

diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
@@ -620,6 +620,7 @@ $viewport-border-left:                          0 none !default;
 
 /* Custom Footer */
 $footer-bg-color:                               transparent !default;
+$footer-font-size:                              $font-size-base !default;
 $footer-font-style:                             italic !default;
 $footer-font-weight:                            normal !default;
 $footer-height:                                 30px !default; // if you modify this height, you also have to modify the footerHeight in the customFooterOptions
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html><head><meta charset="utf-8"><title>Slickgrid-Universal</title><meta name="viewport" content="width=device-width,initial-scale=1"><base href=""><link rel="icon" href="favicon.ico"><link href="app.a5da56b69f47a82084ee.bundle.css" rel="stylesheet"></head><body class="has-navbar-fixed-top"><script async defer="defer" src="//buttons.github.io/buttons.js"></script><div app="main"><div style="margin: 50px; font-weight: bold;">LOADING...</div></div><script src="app.b0549aeeb865e0f3c1b2.bundle.js"></script></body></html>
		<!doctype html><html><head><meta charset="utf-8"><title>Slickgrid-Universal</title><meta name="viewport" content="width=device-width,initial-scale=1"><base href=""><link rel="icon" href="favicon.ico"><link href="app.a5da56b69f47a82084ee.bundle.css" rel="stylesheet"></head><body class="has-navbar-fixed-top"><script async defer="defer" src="//buttons.github.io/buttons.js"></script><div app="main"><div style="margin: 50px; font-weight: bold;">LOADING...</div></div><script src="app.fe29ab69d904d58efc09.bundle.js"></script></body></html>