From fd509e90c434fb4b1a17adf8aeacbbc353ce5543 Mon Sep 17 00:00:00 2001 From: Thomas M Date: Sun, 28 Nov 2021 18:56:06 +0100 Subject: [PATCH] cleanup gui, webpack, components --- config/webpack.config.js | 6 +-- package.json | 5 +- public/index.html | 4 ++ public/manifest.json | 24 ++++++++++ public/pwabuilder-sw-register.js | 4 ++ public/pwabuilder-sw.js | 25 ++++++++++ src/client/scss/app.scss | 18 ------- src/client/scss/form.scss | 10 ++++ src/client/scss/index.scss | 1 + src/client/scss/mixins.scss | 11 ++++- src/client/scss/table.scss | 23 +++++++++ src/client/utils/filter.js | 45 ------------------ src/client/utils/index.js | 7 +++ src/client/utils/theme.js | 33 ------------- src/client/views/App/Footer.js | 5 +- src/client/views/Parts/Form.js | 40 ++++++++++++++-- src/client/views/Parts/Search.js | 14 ++++-- src/client/views/Parts/Table.js | 45 +++++++++--------- src/client/views/Parts/Toolbar/Filter.js | 39 +++++++++++++++ src/client/views/Welcome/Welcome.js | 2 +- yarn.lock | 60 ++++-------------------- 21 files changed, 236 insertions(+), 185 deletions(-) create mode 100644 public/manifest.json create mode 100644 public/pwabuilder-sw-register.js create mode 100644 public/pwabuilder-sw.js create mode 100644 src/client/scss/table.scss delete mode 100644 src/client/utils/theme.js diff --git a/config/webpack.config.js b/config/webpack.config.js index 1c9eb59..3bdcc29 100644 --- a/config/webpack.config.js +++ b/config/webpack.config.js @@ -4,8 +4,6 @@ const DotenvFlow = require('dotenv-flow-webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); -const StylishReporter = require('webpack-stylish'); - const buildDir = '../dist'; module.exports = env => { @@ -37,7 +35,7 @@ module.exports = env => { mode: (env.production) ? 'production' : 'development', devtool: (env.production) ? 'none' : 'inline-source-map', entry: ['babel-polyfill', './src/client/index.js'], - stats: 'none', + stats: 'minimal', module: { rules: [ { @@ -106,7 +104,7 @@ module.exports = env => { template: './public/index.html', favicon: './public/favicon.svg' }), - new StylishReporter(), + // new StylishReporter(), ], output: { publicPath: '/', diff --git a/package.json b/package.json index 258d0e0..c214e91 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,6 @@ "dependencies": { "@csstools/normalize.css": "^12.0.0", "babel-polyfill": "^6.26.0", - "concurrently": "^6.4.0", "cuid": "^2.1.8", "date-and-time": "^2.0.1", "express": "^4.17.1", @@ -32,8 +31,7 @@ "react-router-dom": "^5.1.2", "react-splitter-layout": "^4.0.0", "react-table": "^7.0.0", - "uikit": "3.6.0", - "webpack-stylish": "^0.1.8" + "uikit": "3.6.0" }, "devDependencies": { "@babel/core": "^7.16.0", @@ -43,6 +41,7 @@ "@svgr/webpack": "^5.5.0", "babel-eslint": "^10.0.0", "babel-loader": "^8.2.3", + "concurrently": "^6.4.0", "css-loader": "^5.2.7", "dotenv": "^10.0.0", "dotenv-flow": "^3.2.0", diff --git a/public/index.html b/public/index.html index e103e64..f8d68de 100644 --- a/public/index.html +++ b/public/index.html @@ -4,7 +4,11 @@ + + PIA + + diff --git a/public/manifest.json b/public/manifest.json new file mode 100644 index 0000000..cee00d5 --- /dev/null +++ b/public/manifest.json @@ -0,0 +1,24 @@ +{ + "background_color": "#16161C", + "description": "Electronics Parts/component Inventory Application called PIA", + "dir": "ltr", + "display": "standalone", + "name": "pia-evo.vercel", + "orientation": "any", + "scope": "/", + "short_name": "PIA", + "start_url": "/", + "theme_color": "#21BFC2", + "categories": [], + "screenshots": [], + "icons": [ + { + "src": "/favicon.svg" + }, + { + "src": "/favicon.ico", + "type": "image/x-icon" + } + ], + "shortcuts": [] +} diff --git a/public/pwabuilder-sw-register.js b/public/pwabuilder-sw-register.js new file mode 100644 index 0000000..f83ee19 --- /dev/null +++ b/public/pwabuilder-sw-register.js @@ -0,0 +1,4 @@ +import 'https://cdn.jsdelivr.net/npm/@pwabuilder/pwaupdate'; + +const el = document.createElement('pwa-update'); +document.body.appendChild(el); diff --git a/public/pwabuilder-sw.js b/public/pwabuilder-sw.js new file mode 100644 index 0000000..35cc934 --- /dev/null +++ b/public/pwabuilder-sw.js @@ -0,0 +1,25 @@ +/* eslint-disable no-undef */ +const CACHE = "pwabuilder-offline"; +const QUEUE_NAME = "bgSyncQueue"; + +importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js'); + +self.addEventListener("message", (event) => { + if (event.data && event.data.type === "SKIP_WAITING") { + self.skipWaiting(); + } +}); + +const bgSyncPlugin = new workbox.backgroundSync.BackgroundSyncPlugin(QUEUE_NAME, { + maxRetentionTime: 24 * 60 // Retry for max of 24 Hours (specified in minutes) +}); + +workbox.routing.registerRoute( + new RegExp('/*'), + new workbox.strategies.StaleWhileRevalidate({ + cacheName: CACHE, + plugins: [ + bgSyncPlugin + ] + }) +); diff --git a/src/client/scss/app.scss b/src/client/scss/app.scss index 3f5db15..89257f1 100644 --- a/src/client/scss/app.scss +++ b/src/client/scss/app.scss @@ -237,21 +237,3 @@ main { height: 2rem; } } - - -.sort { - position: absolute; - right: 1px; - top: 4px; - - &-icon { - display: block; - height: 0.8rem; - color: $global-color-disabled; - - &--active { - color: $global-link-color; - } - } - -} diff --git a/src/client/scss/form.scss b/src/client/scss/form.scss index 908d73a..1b529bb 100644 --- a/src/client/scss/form.scss +++ b/src/client/scss/form.scss @@ -76,6 +76,16 @@ $itemAttributes: ( @each $itemAttribute in $itemAttributes { [for='#{$itemAttribute}'] { grid-area: unquote($itemAttribute); + + > button, + > a { + top: 1.8rem; + + :hover { + color: $global-link-color; + } + } + } } } diff --git a/src/client/scss/index.scss b/src/client/scss/index.scss index 117595d..5c27d83 100644 --- a/src/client/scss/index.scss +++ b/src/client/scss/index.scss @@ -25,3 +25,4 @@ @import 'form'; @import 'spin'; @import 'login'; +@import 'table'; diff --git a/src/client/scss/mixins.scss b/src/client/scss/mixins.scss index 3019c82..bc089c9 100644 --- a/src/client/scss/mixins.scss +++ b/src/client/scss/mixins.scss @@ -29,6 +29,13 @@ border-style: solid; } +@mixin hook-button-default-hover() { + color: $inverse-global-color; +} +@mixin hook-button-default-active() { + color: $inverse-global-color; +} + @mixin hook-button() { border-radius: $base-pre-border-radius; line-height: 2.75rem; @@ -93,7 +100,7 @@ @mixin hook-form-label() { text-transform: uppercase; font-size: 11px; - font-weight: bold; + font-weight: normal; line-height: 2rem; } @@ -108,8 +115,10 @@ } @mixin hook-table-header-cell() { + font-weight: normal; position: relative; text-overflow: ellipsis; + text-transform: uppercase; overflow: hidden; } diff --git a/src/client/scss/table.scss b/src/client/scss/table.scss new file mode 100644 index 0000000..477c24d --- /dev/null +++ b/src/client/scss/table.scss @@ -0,0 +1,23 @@ +th, +td { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.sort { + position: absolute; + right: 1px; + top: 4px; + + &-icon { + display: block; + height: 0.8rem; + color: $global-color-disabled; + + &--active { + color: $global-link-color; + } + } + +} diff --git a/src/client/utils/filter.js b/src/client/utils/filter.js index 098d91f..01bfae8 100644 --- a/src/client/utils/filter.js +++ b/src/client/utils/filter.js @@ -1,49 +1,4 @@ -import React, { useEffect} from 'react'; import { matchSorter } from 'match-sorter'; -import { useFocus } from './usefocus'; - -export const GlobalFilter = ({ - preGlobalFilteredRows, - globalFilter, - setGlobalFilter, -}) => { - const [inputRef, setInputFocus] = useFocus(); - const count = preGlobalFilteredRows.length; - - useEffect(() => { - setInputFocus(); - }, []); - - return ( - { - setGlobalFilter(e.target.value || undefined); - }} - placeholder={`Search in ${count} records ...`} - /> - ); -}; - -export const DefaultColumnFilter = ({ - column: { filterValue, preFilteredRows, setFilter }, -}) => { - const count = preFilteredRows.length; - - return ( - { - setFilter(e.target.value || undefined); - }} - placeholder={`Search ${count} records...`} - /> - ); -}; export const fuzzyTextFilter = (rows, id, filterValue) => { return matchSorter(rows, filterValue, { keys: [row => row.values[id]] }); diff --git a/src/client/utils/index.js b/src/client/utils/index.js index da57c90..faedcb7 100644 --- a/src/client/utils/index.js +++ b/src/client/utils/index.js @@ -1,3 +1,10 @@ export * from './api'; +export * from './filter'; +export * from './localstorage'; export * from './notification'; export * from './prepareForm'; +export * from './scrollbar'; +export * from './sleep'; +export * from './stringcolor'; +export * from './usefocus'; +export * from './validjson'; diff --git a/src/client/utils/theme.js b/src/client/utils/theme.js deleted file mode 100644 index d88ee75..0000000 --- a/src/client/utils/theme.js +++ /dev/null @@ -1,33 +0,0 @@ -// import React, { createTheme } from 'react'; -// import { Fabric } from 'office-ui-fabric-react/lib/Fabric'; - -// const { createTheme } = Fabric; - -const myTheme = createTheme({ - palette: { - themePrimary: '#cc0000', - themeLighterAlt: '#fdf3f3', - themeLighter: '#f7cfcf', - themeLight: '#f0a8a8', - themeTertiary: '#e05a5a', - themeSecondary: '#d21919', - themeDarkAlt: '#b80000', - themeDark: '#9b0000', - themeDarker: '#720000', - neutralLighterAlt: '#f8f8f8', - neutralLighter: '#f4f4f4', - neutralLight: '#eaeaea', - neutralQuaternaryAlt: '#dadada', - neutralQuaternary: '#d0d0d0', - neutralTertiaryAlt: '#c8c8c8', - neutralTertiary: '#bab8b7', - neutralSecondary: '#a3a2a0', - neutralPrimaryAlt: '#8d8b8a', - neutralPrimary: '#323130', - neutralDark: '#605e5d', - black: '#494847', - white: '#ffffff', - } -}); - -export default myTheme; diff --git a/src/client/views/App/Footer.js b/src/client/views/App/Footer.js index 34089c3..554aca1 100644 --- a/src/client/views/App/Footer.js +++ b/src/client/views/App/Footer.js @@ -2,7 +2,10 @@ import React from 'react'; const Footer = () => ( ); diff --git a/src/client/views/Parts/Form.js b/src/client/views/Parts/Form.js index a0228f9..fb18fe3 100644 --- a/src/client/views/Parts/Form.js +++ b/src/client/views/Parts/Form.js @@ -1,12 +1,14 @@ import React, { useState, useEffect, Fragment } from 'react'; export const Form = ({ + currentButtonName, item, onSubmit, - currentButtonName, + show, }) => { const [state, setState] = useState(item); + useEffect(() => setState(item), [item]); const onChange = (event) => { @@ -22,6 +24,7 @@ export const Form = ({ disabled: false, tabIndex: 99, type: 'text', + suffix: null, }, id: { disabled: true, @@ -41,6 +44,10 @@ export const Form = ({ type: 'url', placeholder: 'URL http(s):// ...', tabIndex: 15, + suffix: { + type: 'link', + icon: 'cart' + }, }, manufacturer: { tabIndex: 12, @@ -97,7 +104,7 @@ export const Form = ({ } }; - if (item.length === 0) return null; + if (item.length === 0 || !show ) return null; return (
@@ -118,8 +125,34 @@ export const Form = ({ /> ) } -