From 3ef64f9dd1995e1345248e6a4287ed355666487b Mon Sep 17 00:00:00 2001 From: johnnadeluy Date: Tue, 16 Jan 2024 13:07:28 +0100 Subject: [PATCH 1/8] Add Table component with conditional styling for table cells DPSTAT-801 --- src/components/Table/Table.tsx | 20 ++++++++++++++++++++ src/components/Table/table.module.scss | 26 ++++++++++++++++++++++++++ 2 files changed, 46 insertions(+) create mode 100644 src/components/Table/Table.tsx create mode 100644 src/components/Table/table.module.scss diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx new file mode 100644 index 00000000..0730e4b4 --- /dev/null +++ b/src/components/Table/Table.tsx @@ -0,0 +1,20 @@ +import styles from './table.module.scss' + +export default function Table () { + return ( + + + + + + + + + + + +
Lorem ipsum
+ Lorem ipsum +
+ ) +} \ No newline at end of file diff --git a/src/components/Table/table.module.scss b/src/components/Table/table.module.scss new file mode 100644 index 00000000..cf430c1e --- /dev/null +++ b/src/components/Table/table.module.scss @@ -0,0 +1,26 @@ +@use '@statisticsnorway/ssb-component-library/src/style/variables' as variables; + +.table { + background-color: variables.$ssb-white; + border-collapse: collapse; + border: 1px solid; + width: 100%; + padding: 2rem; + + th,td { + padding: 0.75rem; + text-align: start; + } + + th { + border: 1px solid; + } + + td { + border: 1px inset variables.$ssb-dark-2; + } +} + +.conditionalCell { + background-color: variables.$ssb-green-1; +} \ No newline at end of file From 1adfb6383173e3daa7ad732b28264f4119b71aea Mon Sep 17 00:00:00 2001 From: johnnadeluy Date: Tue, 16 Jan 2024 14:56:35 +0100 Subject: [PATCH 2/8] Update table props DPSTAT-801 --- src/components/Table/Table.tsx | 36 +++++++++++++++++++++++++++------- 1 file changed, 29 insertions(+), 7 deletions(-) diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx index 0730e4b4..d660f61e 100644 --- a/src/components/Table/Table.tsx +++ b/src/components/Table/Table.tsx @@ -1,19 +1,41 @@ import styles from './table.module.scss' -export default function Table () { +export interface TableData { + columns: { + id: string, + label: string, + }[], + data: { + id: string, + [key: string]: React.ReactNode + }[] +} + +export default function Table ({columns, data}: TableData) { return ( - + {columns.map((column) => ( + + ))} - - - + {data.map((row, index) => { + // Add conditional styling for first element, then third etc + const conditionalStyling = (index + 1) % 2 !== 0 ? styles.conditionalCell : undefined + return ( + + {columns.map((column) => ( + + ))} + ) + })}
Lorem ipsum + {column.label} +
- Lorem ipsum -
+ {row[column.id]} +
) From 50bfc0bdd4b30b152786b9f22ebb21e6015e0c9f Mon Sep 17 00:00:00 2001 From: johnnadeluy Date: Tue, 16 Jan 2024 15:23:57 +0100 Subject: [PATCH 3/8] Make table scrollable on mobile with css DPSTAT-801 --- src/components/Table/Table.tsx | 50 +++++++++++++------------- src/components/Table/table.module.scss | 6 +++- 2 files changed, 31 insertions(+), 25 deletions(-) diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx index d660f61e..7b2a3576 100644 --- a/src/components/Table/Table.tsx +++ b/src/components/Table/Table.tsx @@ -13,30 +13,32 @@ export interface TableData { export default function Table ({columns, data}: TableData) { return ( +
- - - {columns.map((column) => ( - - ))} - - - - {data.map((row, index) => { - // Add conditional styling for first element, then third etc - const conditionalStyling = (index + 1) % 2 !== 0 ? styles.conditionalCell : undefined - return ( - - {columns.map((column) => ( - - ))} - ) - })} - -
- {column.label} -
- {row[column.id]} -
+ + + {columns.map((column) => ( + + {column.label} + + ))} + + + + {data.map((row, index) => { + // Add conditional styling for first element, then third etc + const conditionalStyling = (index + 1) % 2 !== 0 ? styles.conditionalCell : undefined + return ( + + {columns.map((column) => ( + + {row[column.id]} + + ))} + ) + })} + + +
) } \ No newline at end of file diff --git a/src/components/Table/table.module.scss b/src/components/Table/table.module.scss index cf430c1e..d9f96749 100644 --- a/src/components/Table/table.module.scss +++ b/src/components/Table/table.module.scss @@ -1,10 +1,14 @@ @use '@statisticsnorway/ssb-component-library/src/style/variables' as variables; +.tableContainer { + overflow-x: auto; +} + .table { background-color: variables.$ssb-white; + width: 100%; border-collapse: collapse; border: 1px solid; - width: 100%; padding: 2rem; th,td { From b7d1c192625bbf84eee22e1081baa730793642e0 Mon Sep 17 00:00:00 2001 From: johnnadeluy Date: Wed, 17 Jan 2024 09:48:33 +0100 Subject: [PATCH 4/8] Use teamApi data for table data (wip) DPSTAT-801 --- package-lock.json | 291 ++++++++++++++++++++++++++++++++++++++++---- package.json | 2 +- src/api/teamApi.ts | 2 +- src/pages/Home.tsx | 64 ++++++++++ src/pages/Users.tsx | 42 ------- 5 files changed, 334 insertions(+), 67 deletions(-) diff --git a/package-lock.json b/package-lock.json index 17849eba..6bc9ec97 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,13 +8,13 @@ "name": "dapla-ctrl", "version": "0.0.0", "dependencies": { - "@esbuild-plugins/node-globals-polyfill": "^0.2.3", "@statisticsnorway/ssb-component-library": "^2.0.96", "dotenv": "^16.3.1", "express": "4.18.2", "jsonwebtoken": "^9.0.2", "jwks-rsa": "^3.1.0", "lightship": "^9.0.3", + "nodemon": "^3.0.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.21.1", @@ -42,14 +42,6 @@ "node": ">=0.10.0" } }, - "node_modules/@esbuild-plugins/node-globals-polyfill": { - "version": "0.2.3", - "resolved": "https://registry.npmjs.org/@esbuild-plugins/node-globals-polyfill/-/node-globals-polyfill-0.2.3.tgz", - "integrity": "sha512-r3MIryXDeXDOZh7ih1l/yE9ZLORCd5e8vWg02azWRGj5SPTuoh69A2AIyn0Z31V/kHBfZ4HgWJ+OK3GTTwLmnw==", - "peerDependencies": { - "esbuild": "*" - } - }, "node_modules/@esbuild/aix-ppc64": { "version": "0.19.11", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.11.tgz", @@ -57,6 +49,7 @@ "cpu": [ "ppc64" ], + "dev": true, "optional": true, "os": [ "aix" @@ -72,6 +65,7 @@ "cpu": [ "arm" ], + "dev": true, "optional": true, "os": [ "android" @@ -87,6 +81,7 @@ "cpu": [ "arm64" ], + "dev": true, "optional": true, "os": [ "android" @@ -102,6 +97,7 @@ "cpu": [ "x64" ], + "dev": true, "optional": true, "os": [ "android" @@ -117,6 +113,7 @@ "cpu": [ "arm64" ], + "dev": true, "optional": true, "os": [ "darwin" @@ -132,6 +129,7 @@ "cpu": [ "x64" ], + "dev": true, "optional": true, "os": [ "darwin" @@ -147,6 +145,7 @@ "cpu": [ "arm64" ], + "dev": true, "optional": true, "os": [ "freebsd" @@ -162,6 +161,7 @@ "cpu": [ "x64" ], + "dev": true, "optional": true, "os": [ "freebsd" @@ -177,6 +177,7 @@ "cpu": [ "arm" ], + "dev": true, "optional": true, "os": [ "linux" @@ -192,6 +193,7 @@ "cpu": [ "arm64" ], + "dev": true, "optional": true, "os": [ "linux" @@ -207,6 +209,7 @@ "cpu": [ "ia32" ], + "dev": true, "optional": true, "os": [ "linux" @@ -222,6 +225,7 @@ "cpu": [ "loong64" ], + "dev": true, "optional": true, "os": [ "linux" @@ -237,6 +241,7 @@ "cpu": [ "mips64el" ], + "dev": true, "optional": true, "os": [ "linux" @@ -252,6 +257,7 @@ "cpu": [ "ppc64" ], + "dev": true, "optional": true, "os": [ "linux" @@ -267,6 +273,7 @@ "cpu": [ "riscv64" ], + "dev": true, "optional": true, "os": [ "linux" @@ -282,6 +289,7 @@ "cpu": [ "s390x" ], + "dev": true, "optional": true, "os": [ "linux" @@ -297,6 +305,7 @@ "cpu": [ "x64" ], + "dev": true, "optional": true, "os": [ "linux" @@ -312,6 +321,7 @@ "cpu": [ "x64" ], + "dev": true, "optional": true, "os": [ "netbsd" @@ -327,6 +337,7 @@ "cpu": [ "x64" ], + "dev": true, "optional": true, "os": [ "openbsd" @@ -342,6 +353,7 @@ "cpu": [ "x64" ], + "dev": true, "optional": true, "os": [ "sunos" @@ -357,6 +369,7 @@ "cpu": [ "arm64" ], + "dev": true, "optional": true, "os": [ "win32" @@ -372,6 +385,7 @@ "cpu": [ "ia32" ], + "dev": true, "optional": true, "os": [ "win32" @@ -387,6 +401,7 @@ "cpu": [ "x64" ], + "dev": true, "optional": true, "os": [ "win32" @@ -1364,6 +1379,11 @@ "vite": "^4 || ^5" } }, + "node_modules/abbrev": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", + "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==" + }, "node_modules/abort-controller": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz", @@ -1547,8 +1567,7 @@ "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", - "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", - "dev": true + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" }, "node_modules/base64-js": { "version": "1.5.1", @@ -1770,8 +1789,7 @@ "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", - "dev": true + "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==" }, "node_modules/content-disposition": { "version": "0.5.4", @@ -1948,6 +1966,7 @@ "version": "0.19.11", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.11.tgz", "integrity": "sha512-HJ96Hev2hX/6i5cDVwcqiJBBtuo9+FeIJOtZ9W1kA5M6AMJRHUZlpYZ1/SbEwtO0ioNAW8rUooVpC/WehY2SfA==", + "dev": true, "hasInstallScript": true, "bin": { "esbuild": "bin/esbuild" @@ -2785,6 +2804,11 @@ "node": ">= 4" } }, + "node_modules/ignore-by-default": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz", + "integrity": "sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==" + }, "node_modules/immutable": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz", @@ -3285,6 +3309,86 @@ "node": ">= 0.6" } }, + "node_modules/nodemon": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.0.2.tgz", + "integrity": "sha512-9qIN2LNTrEzpOPBaWHTm4Asy1LxXLSickZStAQ4IZe7zsoIpD/A7LWxhZV3t4Zu352uBcqVnRsDXSMR2Sc3lTA==", + "dependencies": { + "chokidar": "^3.5.2", + "debug": "^4", + "ignore-by-default": "^1.0.1", + "minimatch": "^3.1.2", + "pstree.remy": "^1.1.8", + "semver": "^7.5.3", + "simple-update-notifier": "^2.0.0", + "supports-color": "^5.5.0", + "touch": "^3.1.0", + "undefsafe": "^2.0.5" + }, + "bin": { + "nodemon": "bin/nodemon.js" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/nodemon" + } + }, + "node_modules/nodemon/node_modules/brace-expansion": { + "version": "1.1.11", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", + "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "dependencies": { + "balanced-match": "^1.0.0", + "concat-map": "0.0.1" + } + }, + "node_modules/nodemon/node_modules/has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==", + "engines": { + "node": ">=4" + } + }, + "node_modules/nodemon/node_modules/minimatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", + "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dependencies": { + "brace-expansion": "^1.1.7" + }, + "engines": { + "node": "*" + } + }, + "node_modules/nodemon/node_modules/supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dependencies": { + "has-flag": "^3.0.0" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/nopt": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz", + "integrity": "sha512-NWmpvLSqUrgrAC9HCuxEvb+PSloHpqVu+FqcO4eeF2h5qYRhA7ev6KvelyQAKtegUbC6RypJnlEOhd8vloNKYg==", + "dependencies": { + "abbrev": "1" + }, + "bin": { + "nopt": "bin/nopt.js" + }, + "engines": { + "node": "*" + } + }, "node_modules/normalize-path": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", @@ -3581,6 +3685,11 @@ "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz", "integrity": "sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==" }, + "node_modules/pstree.remy": { + "version": "1.1.8", + "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz", + "integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==" + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", @@ -4102,6 +4211,17 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/simple-update-notifier": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz", + "integrity": "sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==", + "dependencies": { + "semver": "^7.5.3" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/slash": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", @@ -4228,6 +4348,17 @@ "node": ">=0.6" } }, + "node_modules/touch": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.0.tgz", + "integrity": "sha512-WBx8Uy5TLtOSRtIq+M03/sKDrXCLHxwDcquSP2c43Le03/9serjQBIztjRz6FkJez9D/hleyAXTBGLwwZUw9lA==", + "dependencies": { + "nopt": "~1.0.10" + }, + "bin": { + "nodetouch": "bin/nodetouch.js" + } + }, "node_modules/ts-api-utils": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.0.3.tgz", @@ -4289,6 +4420,11 @@ "node": ">=14.17" } }, + "node_modules/undefsafe": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz", + "integrity": "sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==" + }, "node_modules/undici-types": { "version": "5.26.5", "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", @@ -4447,148 +4583,165 @@ "integrity": "sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==", "dev": true }, - "@esbuild-plugins/node-globals-polyfill": { - "version": "0.2.3", - "resolved": "https://registry.npmjs.org/@esbuild-plugins/node-globals-polyfill/-/node-globals-polyfill-0.2.3.tgz", - "integrity": "sha512-r3MIryXDeXDOZh7ih1l/yE9ZLORCd5e8vWg02azWRGj5SPTuoh69A2AIyn0Z31V/kHBfZ4HgWJ+OK3GTTwLmnw==", - "requires": {} - }, "@esbuild/aix-ppc64": { "version": "0.19.11", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.11.tgz", "integrity": "sha512-FnzU0LyE3ySQk7UntJO4+qIiQgI7KoODnZg5xzXIrFJlKd2P2gwHsHY4927xj9y5PJmJSzULiUCWmv7iWnNa7g==", + "dev": true, "optional": true }, "@esbuild/android-arm": { "version": "0.19.11", "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.11.tgz", "integrity": "sha512-5OVapq0ClabvKvQ58Bws8+wkLCV+Rxg7tUVbo9xu034Nm536QTII4YzhaFriQ7rMrorfnFKUsArD2lqKbFY4vw==", + "dev": true, "optional": true }, "@esbuild/android-arm64": { "version": "0.19.11", "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.11.tgz", "integrity": "sha512-aiu7K/5JnLj//KOnOfEZ0D90obUkRzDMyqd/wNAUQ34m4YUPVhRZpnqKV9uqDGxT7cToSDnIHsGooyIczu9T+Q==", + "dev": true, "optional": true }, "@esbuild/android-x64": { "version": "0.19.11", "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.11.tgz", "integrity": "sha512-eccxjlfGw43WYoY9QgB82SgGgDbibcqyDTlk3l3C0jOVHKxrjdc9CTwDUQd0vkvYg5um0OH+GpxYvp39r+IPOg==", + "dev": true, "optional": true }, "@esbuild/darwin-arm64": { "version": "0.19.11", "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.11.tgz", "integrity": "sha512-ETp87DRWuSt9KdDVkqSoKoLFHYTrkyz2+65fj9nfXsaV3bMhTCjtQfw3y+um88vGRKRiF7erPrh/ZuIdLUIVxQ==", + "dev": true, "optional": true }, "@esbuild/darwin-x64": { "version": "0.19.11", "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.11.tgz", "integrity": "sha512-fkFUiS6IUK9WYUO/+22omwetaSNl5/A8giXvQlcinLIjVkxwTLSktbF5f/kJMftM2MJp9+fXqZ5ezS7+SALp4g==", + "dev": true, "optional": true }, "@esbuild/freebsd-arm64": { "version": "0.19.11", "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.11.tgz", "integrity": "sha512-lhoSp5K6bxKRNdXUtHoNc5HhbXVCS8V0iZmDvyWvYq9S5WSfTIHU2UGjcGt7UeS6iEYp9eeymIl5mJBn0yiuxA==", + "dev": true, "optional": true }, "@esbuild/freebsd-x64": { "version": "0.19.11", "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.11.tgz", "integrity": "sha512-JkUqn44AffGXitVI6/AbQdoYAq0TEullFdqcMY/PCUZ36xJ9ZJRtQabzMA+Vi7r78+25ZIBosLTOKnUXBSi1Kw==", + "dev": true, "optional": true }, "@esbuild/linux-arm": { "version": "0.19.11", "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.11.tgz", "integrity": "sha512-3CRkr9+vCV2XJbjwgzjPtO8T0SZUmRZla+UL1jw+XqHZPkPgZiyWvbDvl9rqAN8Zl7qJF0O/9ycMtjU67HN9/Q==", + "dev": true, "optional": true }, "@esbuild/linux-arm64": { "version": "0.19.11", "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.11.tgz", "integrity": "sha512-LneLg3ypEeveBSMuoa0kwMpCGmpu8XQUh+mL8XXwoYZ6Be2qBnVtcDI5azSvh7vioMDhoJFZzp9GWp9IWpYoUg==", + "dev": true, "optional": true }, "@esbuild/linux-ia32": { "version": "0.19.11", "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.11.tgz", "integrity": "sha512-caHy++CsD8Bgq2V5CodbJjFPEiDPq8JJmBdeyZ8GWVQMjRD0sU548nNdwPNvKjVpamYYVL40AORekgfIubwHoA==", + "dev": true, "optional": true }, "@esbuild/linux-loong64": { "version": "0.19.11", "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.11.tgz", "integrity": "sha512-ppZSSLVpPrwHccvC6nQVZaSHlFsvCQyjnvirnVjbKSHuE5N24Yl8F3UwYUUR1UEPaFObGD2tSvVKbvR+uT1Nrg==", + "dev": true, "optional": true }, "@esbuild/linux-mips64el": { "version": "0.19.11", "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.11.tgz", "integrity": "sha512-B5x9j0OgjG+v1dF2DkH34lr+7Gmv0kzX6/V0afF41FkPMMqaQ77pH7CrhWeR22aEeHKaeZVtZ6yFwlxOKPVFyg==", + "dev": true, "optional": true }, "@esbuild/linux-ppc64": { "version": "0.19.11", "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.11.tgz", "integrity": "sha512-MHrZYLeCG8vXblMetWyttkdVRjQlQUb/oMgBNurVEnhj4YWOr4G5lmBfZjHYQHHN0g6yDmCAQRR8MUHldvvRDA==", + "dev": true, "optional": true }, "@esbuild/linux-riscv64": { "version": "0.19.11", "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.11.tgz", "integrity": "sha512-f3DY++t94uVg141dozDu4CCUkYW+09rWtaWfnb3bqe4w5NqmZd6nPVBm+qbz7WaHZCoqXqHz5p6CM6qv3qnSSQ==", + "dev": true, "optional": true }, "@esbuild/linux-s390x": { "version": "0.19.11", "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.11.tgz", "integrity": "sha512-A5xdUoyWJHMMlcSMcPGVLzYzpcY8QP1RtYzX5/bS4dvjBGVxdhuiYyFwp7z74ocV7WDc0n1harxmpq2ePOjI0Q==", + "dev": true, "optional": true }, "@esbuild/linux-x64": { "version": "0.19.11", "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.11.tgz", "integrity": "sha512-grbyMlVCvJSfxFQUndw5mCtWs5LO1gUlwP4CDi4iJBbVpZcqLVT29FxgGuBJGSzyOxotFG4LoO5X+M1350zmPA==", + "dev": true, "optional": true }, "@esbuild/netbsd-x64": { "version": "0.19.11", "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.11.tgz", "integrity": "sha512-13jvrQZJc3P230OhU8xgwUnDeuC/9egsjTkXN49b3GcS5BKvJqZn86aGM8W9pd14Kd+u7HuFBMVtrNGhh6fHEQ==", + "dev": true, "optional": true }, "@esbuild/openbsd-x64": { "version": "0.19.11", "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.11.tgz", "integrity": "sha512-ysyOGZuTp6SNKPE11INDUeFVVQFrhcNDVUgSQVDzqsqX38DjhPEPATpid04LCoUr2WXhQTEZ8ct/EgJCUDpyNw==", + "dev": true, "optional": true }, "@esbuild/sunos-x64": { "version": "0.19.11", "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.11.tgz", "integrity": "sha512-Hf+Sad9nVwvtxy4DXCZQqLpgmRTQqyFyhT3bZ4F2XlJCjxGmRFF0Shwn9rzhOYRB61w9VMXUkxlBy56dk9JJiQ==", + "dev": true, "optional": true }, "@esbuild/win32-arm64": { "version": "0.19.11", "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.11.tgz", "integrity": "sha512-0P58Sbi0LctOMOQbpEOvOL44Ne0sqbS0XWHMvvrg6NE5jQ1xguCSSw9jQeUk2lfrXYsKDdOe6K+oZiwKPilYPQ==", + "dev": true, "optional": true }, "@esbuild/win32-ia32": { "version": "0.19.11", "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.11.tgz", "integrity": "sha512-6YOrWS+sDJDmshdBIQU+Uoyh7pQKrdykdefC1avn76ss5c+RN6gut3LZA4E2cH5xUEp5/cA0+YxRaVtRAb0xBg==", + "dev": true, "optional": true }, "@esbuild/win32-x64": { "version": "0.19.11", "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.11.tgz", "integrity": "sha512-vfkhltrjCAb603XaFhqhAF4LGDi2M4OrCRrFusyQ+iTLQ/o60QQXxc9cZC/FFpihBI9N1Grn6SMKVJ4KP7Fuiw==", + "dev": true, "optional": true }, "@eslint-community/eslint-utils": { @@ -5235,6 +5388,11 @@ "@swc/core": "^1.3.96" } }, + "abbrev": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz", + "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==" + }, "abort-controller": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz", @@ -5372,8 +5530,7 @@ "balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", - "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", - "dev": true + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" }, "base64-js": { "version": "1.5.1", @@ -5529,8 +5686,7 @@ "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", - "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", - "dev": true + "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==" }, "content-disposition": { "version": "0.5.4", @@ -5656,6 +5812,7 @@ "version": "0.19.11", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.11.tgz", "integrity": "sha512-HJ96Hev2hX/6i5cDVwcqiJBBtuo9+FeIJOtZ9W1kA5M6AMJRHUZlpYZ1/SbEwtO0ioNAW8rUooVpC/WehY2SfA==", + "dev": true, "requires": { "@esbuild/aix-ppc64": "0.19.11", "@esbuild/android-arm": "0.19.11", @@ -6304,6 +6461,11 @@ "integrity": "sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg==", "dev": true }, + "ignore-by-default": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz", + "integrity": "sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==" + }, "immutable": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz", @@ -6705,6 +6867,63 @@ "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz", "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==" }, + "nodemon": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-3.0.2.tgz", + "integrity": "sha512-9qIN2LNTrEzpOPBaWHTm4Asy1LxXLSickZStAQ4IZe7zsoIpD/A7LWxhZV3t4Zu352uBcqVnRsDXSMR2Sc3lTA==", + "requires": { + "chokidar": "^3.5.2", + "debug": "^4", + "ignore-by-default": "^1.0.1", + "minimatch": "^3.1.2", + "pstree.remy": "^1.1.8", + "semver": "^7.5.3", + "simple-update-notifier": "^2.0.0", + "supports-color": "^5.5.0", + "touch": "^3.1.0", + "undefsafe": "^2.0.5" + }, + "dependencies": { + "brace-expansion": { + "version": "1.1.11", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", + "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "requires": { + "balanced-match": "^1.0.0", + "concat-map": "0.0.1" + } + }, + "has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==" + }, + "minimatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", + "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "requires": { + "brace-expansion": "^1.1.7" + } + }, + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "requires": { + "has-flag": "^3.0.0" + } + } + } + }, + "nopt": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz", + "integrity": "sha512-NWmpvLSqUrgrAC9HCuxEvb+PSloHpqVu+FqcO4eeF2h5qYRhA7ev6KvelyQAKtegUbC6RypJnlEOhd8vloNKYg==", + "requires": { + "abbrev": "1" + } + }, "normalize-path": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", @@ -6915,6 +7134,11 @@ "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz", "integrity": "sha512-b/YwNhb8lk1Zz2+bXXpS/LK9OisiZZ1SNsSLxN1x2OXVEhW2Ckr/7mWE5vrC1ZTiJlD9g19jWszTmJsB+oEpFQ==" }, + "pstree.remy": { + "version": "1.1.8", + "resolved": "https://registry.npmjs.org/pstree.remy/-/pstree.remy-1.1.8.tgz", + "integrity": "sha512-77DZwxQmxKnu3aR542U+X8FypNzbfJ+C5XQDk3uWjWxn6151aIMGthWYRXTqT1E5oJvg+ljaa2OJi+VfvCOQ8w==" + }, "punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", @@ -7278,6 +7502,14 @@ "object-inspect": "^1.9.0" } }, + "simple-update-notifier": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/simple-update-notifier/-/simple-update-notifier-2.0.0.tgz", + "integrity": "sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==", + "requires": { + "semver": "^7.5.3" + } + }, "slash": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", @@ -7371,6 +7603,14 @@ "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz", "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==" }, + "touch": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/touch/-/touch-3.1.0.tgz", + "integrity": "sha512-WBx8Uy5TLtOSRtIq+M03/sKDrXCLHxwDcquSP2c43Le03/9serjQBIztjRz6FkJez9D/hleyAXTBGLwwZUw9lA==", + "requires": { + "nopt": "~1.0.10" + } + }, "ts-api-utils": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.0.3.tgz", @@ -7408,6 +7648,11 @@ "integrity": "sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==", "dev": true }, + "undefsafe": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.5.tgz", + "integrity": "sha512-WxONCrssBM8TSPRqN5EmsjVrsv4A8X12J4ArBiiayv3DyyG3ZlIg6yysuuSYdZsVz3TKcTg2fd//Ujd4CHV1iA==" + }, "undici-types": { "version": "5.26.5", "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz", diff --git a/package.json b/package.json index cedd4514..59a5fcba 100644 --- a/package.json +++ b/package.json @@ -11,13 +11,13 @@ "preview": "vite preview" }, "dependencies": { - "@esbuild-plugins/node-globals-polyfill": "^0.2.3", "@statisticsnorway/ssb-component-library": "^2.0.96", "dotenv": "^16.3.1", "express": "4.18.2", "jsonwebtoken": "^9.0.2", "jwks-rsa": "^3.1.0", "lightship": "^9.0.3", + "nodemon": "^3.0.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.21.1", diff --git a/src/api/teamApi.ts b/src/api/teamApi.ts index d4493511..7799bcae 100644 --- a/src/api/teamApi.ts +++ b/src/api/teamApi.ts @@ -3,7 +3,7 @@ export interface TeamApiResponse { data: Team[]; } -interface Team { +export interface Team { uniformName: string; displayName: string; _links: TeamLinks; diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index a96dacce..65d7173f 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,10 +1,74 @@ import PageLayout from '../components/PageLayout/PageLayout' +import Table from '../components/Table/Table' +import { useEffect, useState } from "react" +import { getAllTeams, TeamApiResponse, Team } from "../api/teamApi" +import { Title, Dialog, Link } from "@statisticsnorway/ssb-component-library" export default function Home() { + const [teams, setTeams] = useState(); + const [error, setError] = useState(); + + useEffect(() => { + const token = localStorage.getItem('token') as string; + getAllTeams(token).then(response => { + setTeams(response); + }).catch(error => { + setError(error.toString()); + }); + }, []); + + function renderTeamNameCell(team: Team) { + return ( + {team.displayName} + ) + } + + function renderAllTeams() { + if(error) { + return ( + + {error} + + ) + } + + if (teams && teams.data.length) { + const allTeamsTableHeader = [{ + id: 'navn', + label: 'Navn', + }, + { + id: 'teammedlemmer', + label: 'Teammedlemmer', + }, { + id: 'ansvarlig', + label: 'Ansvarlig' + }] + + const allTeamsTableData = teams.data.map(team => ({ + id: team.uniformName, + 'navn': renderTeamNameCell(team) + })) + + return ( + <> + Alle team + + + ) ||

Loading...

|| ( +

No teams found.

+ ) + } + } + return ( ) } \ No newline at end of file diff --git a/src/pages/Users.tsx b/src/pages/Users.tsx index 2dd23bfe..a4cd7371 100644 --- a/src/pages/Users.tsx +++ b/src/pages/Users.tsx @@ -1,51 +1,9 @@ import PageLayout from "../components/PageLayout/PageLayout" -import { getAllTeams, TeamApiResponse } from "../api/teamApi" -import { useEffect, useState } from "react" -import { Dialog } from "@statisticsnorway/ssb-component-library" export default function Users() { - const [teams, setTeams] = useState(); - const [error, setError] = useState(); - - useEffect(() => { - const token = localStorage.getItem('token') as string; - getAllTeams(token).then(response => { - setTeams(response); - }).catch(error => { - setError(error.toString()); - }); - }, []); - return ( - <> - {error ? - {error} - : teams && teams.data.length > 0 && ( - <> -

Team List

-
- - - - - - - - {teams.data.map(team => ( - - - - - ))} - -
Uniform NameDisplay Name
{team.uniformName}{team.displayName}
- - ) ||

Loading...

|| ( -

No teams found.

- )} - ) } From d0c788a0cc0f625920d87e794c6c98f1dfe60589 Mon Sep 17 00:00:00 2001 From: johnnadeluy Date: Wed, 17 Jan 2024 12:58:28 +0100 Subject: [PATCH 5/8] Minor code refactoring and added comments DPSTAT-801 --- src/components/Table/Table.tsx | 58 +++++++++++++++++----------------- src/pages/Home.tsx | 27 +++++++++++----- 2 files changed, 48 insertions(+), 37 deletions(-) diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx index 7b2a3576..eb1cb755 100644 --- a/src/components/Table/Table.tsx +++ b/src/components/Table/Table.tsx @@ -12,33 +12,33 @@ export interface TableData { } export default function Table ({columns, data}: TableData) { - return ( -
- - - - {columns.map((column) => ( - - ))} - - - - {data.map((row, index) => { - // Add conditional styling for first element, then third etc - const conditionalStyling = (index + 1) % 2 !== 0 ? styles.conditionalCell : undefined - return ( - - {columns.map((column) => ( - - ))} - ) - })} - -
- {column.label} -
- {row[column.id]} -
-
- ) + return ( +
+ + + + {columns.map((column) => ( + + ))} + + + + {data.map((row, index) => { + // Add conditional styling for first element, then third etc + const conditionalStyling = (index + 1) % 2 !== 0 ? styles.conditionalCell : undefined + return ( + + {columns.map((column) => ( + + ))} + ) + })} + +
+ {column.label} +
+ {row[column.id]} +
+
+ ) } \ No newline at end of file diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 65d7173f..e94b5eba 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -18,14 +18,19 @@ export default function Home() { }); }, []); - function renderTeamNameCell(team: Team) { + function renderTeamNameColumn(team: Team) { return ( - {team.displayName} + <> + + {team.displayName} + + {/* TODO: Fetch department from API. Teams are missing a department property */} + ) } function renderAllTeams() { - if(error) { + if (error) { return ( {error} @@ -34,7 +39,7 @@ export default function Home() { } if (teams && teams.data.length) { - const allTeamsTableHeader = [{ + const allTeamsTableHeaderColumns = [{ id: 'navn', label: 'Navn', }, @@ -46,17 +51,23 @@ export default function Home() { label: 'Ansvarlig' }] - const allTeamsTableData = teams.data.map(team => ({ + const allTeamsTableDataColumns = teams.data.map(team => ({ id: team.uniformName, - 'navn': renderTeamNameCell(team) + 'navn': renderTeamNameColumn(team), + // TODO: Fetch team user count from API e.g. /teams/{team.uniformName}/users and users.count + 'teammedlemmer': '', + // TODO: + // * Fetch team manager? from API e.g. /groups/{team.uniformName}-managers/users and use users.displayName + 'ansvarlig': '', })) + // TODO: Loading can be replaced by a spinner eventually return ( <> Alle team ) ||

Loading...

|| ( From 9596e658fcca93c78b55a899b911f099878a8102 Mon Sep 17 00:00:00 2001 From: johnnadeluy Date: Wed, 17 Jan 2024 15:05:05 +0100 Subject: [PATCH 6/8] Add responsive view for Table component (wip) DPSTAT-801 --- package-lock.json | 75 ++++++++++++++++++++++++++ package.json | 1 + src/components/Table/Table.tsx | 57 ++++++++++++++++---- src/components/Table/table.module.scss | 54 +++++++++++++------ src/pages/Home.tsx | 12 +++-- 5 files changed, 167 insertions(+), 32 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6bc9ec97..5485977b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,6 +17,7 @@ "nodemon": "^3.0.2", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-responsive": "^9.0.2", "react-router-dom": "^6.21.1", "vite-express": "0.13.0" }, @@ -1837,6 +1838,11 @@ "node": ">= 8" } }, + "node_modules/css-mediaquery": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz", + "integrity": "sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q==" + }, "node_modules/csstype": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", @@ -2765,6 +2771,11 @@ "node": ">= 0.8" } }, + "node_modules/hyphenate-style-name": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz", + "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==" + }, "node_modules/iconv-lite": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", @@ -3184,6 +3195,14 @@ "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz", "integrity": "sha512-ncTzHV7NvsQZkYe1DW7cbDLm0YpzHmZF5r/iyP3ZnQtMiJ+pjzisCiMNI+Sj+xQF5pXhSHxSB3uDbsBTzY/c2A==" }, + "node_modules/matchmediaquery": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.1.tgz", + "integrity": "sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==", + "dependencies": { + "css-mediaquery": "^0.1.2" + } + }, "node_modules/media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", @@ -3798,6 +3817,23 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/react-responsive": { + "version": "9.0.2", + "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-9.0.2.tgz", + "integrity": "sha512-+4CCab7z8G8glgJoRjAwocsgsv6VA2w7JPxFWHRc7kvz8mec1/K5LutNC2MG28Mn8mu6+bu04XZxHv5gyfT7xQ==", + "dependencies": { + "hyphenate-style-name": "^1.0.0", + "matchmediaquery": "^0.3.0", + "prop-types": "^15.6.1", + "shallow-equal": "^1.2.1" + }, + "engines": { + "node": ">=0.10" + }, + "peerDependencies": { + "react": ">=16.8.0" + } + }, "node_modules/react-router": { "version": "6.21.1", "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.21.1.tgz", @@ -4177,6 +4213,11 @@ "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==" }, + "node_modules/shallow-equal": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz", + "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", @@ -5722,6 +5763,11 @@ "which": "^2.0.1" } }, + "css-mediaquery": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/css-mediaquery/-/css-mediaquery-0.1.2.tgz", + "integrity": "sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q==" + }, "csstype": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", @@ -6442,6 +6488,11 @@ "toidentifier": "1.0.1" } }, + "hyphenate-style-name": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz", + "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==" + }, "iconv-lite": { "version": "0.4.24", "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", @@ -6787,6 +6838,14 @@ } } }, + "matchmediaquery": { + "version": "0.3.1", + "resolved": "https://registry.npmjs.org/matchmediaquery/-/matchmediaquery-0.3.1.tgz", + "integrity": "sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==", + "requires": { + "css-mediaquery": "^0.1.2" + } + }, "media-typer": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", @@ -7209,6 +7268,17 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "react-responsive": { + "version": "9.0.2", + "resolved": "https://registry.npmjs.org/react-responsive/-/react-responsive-9.0.2.tgz", + "integrity": "sha512-+4CCab7z8G8glgJoRjAwocsgsv6VA2w7JPxFWHRc7kvz8mec1/K5LutNC2MG28Mn8mu6+bu04XZxHv5gyfT7xQ==", + "requires": { + "hyphenate-style-name": "^1.0.0", + "matchmediaquery": "^0.3.0", + "prop-types": "^15.6.1", + "shallow-equal": "^1.2.1" + } + }, "react-router": { "version": "6.21.1", "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.21.1.tgz", @@ -7477,6 +7547,11 @@ "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz", "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==" }, + "shallow-equal": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/shallow-equal/-/shallow-equal-1.2.1.tgz", + "integrity": "sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==" + }, "shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", diff --git a/package.json b/package.json index 59a5fcba..36215374 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "nodemon": "^3.0.2", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-responsive": "^9.0.2", "react-router-dom": "^6.21.1", "vite-express": "0.13.0" }, diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx index eb1cb755..9f373d6c 100644 --- a/src/components/Table/Table.tsx +++ b/src/components/Table/Table.tsx @@ -1,4 +1,5 @@ import styles from './table.module.scss' +import { useMediaQuery } from 'react-responsive' export interface TableData { columns: { @@ -11,10 +12,31 @@ export interface TableData { }[] } -export default function Table ({columns, data}: TableData) { - return ( -
-
+function conditionalStyling(index: number) { + // Add conditional styling for first element, then third etc + return (index + 1) % 2 !== 0 ? styles.conditionalCell : undefined +} + +const TableMobileView = ({columns, data}: TableData) => ( +
+ {data.map((row, index) => { + return ( +
+ {columns.map((column, index) => +
+ {index !== 0 && {column.label}} + {row[column.id]} +
+ )} +
+ ) + })} +
+) + +const TableDesktopView = ({columns, data}: TableData) => ( +
+
{columns.map((column) => ( @@ -26,19 +48,34 @@ export default function Table ({columns, data}: TableData) { {data.map((row, index) => { - // Add conditional styling for first element, then third etc - const conditionalStyling = (index + 1) % 2 !== 0 ? styles.conditionalCell : undefined return ( - + {columns.map((column) => ( ))} - ) + + ) })} -
{row[column.id]}
- + + +) + +export default function Table ({columns, data}: TableData) { + const isMobile = useMediaQuery({ query: '(max-width: 767px)'}) // from ssb-component-library + + return ( + <> + {!isMobile && } + {isMobile && } + ) } \ No newline at end of file diff --git a/src/components/Table/table.module.scss b/src/components/Table/table.module.scss index d9f96749..bb1aa592 100644 --- a/src/components/Table/table.module.scss +++ b/src/components/Table/table.module.scss @@ -1,30 +1,50 @@ @use '@statisticsnorway/ssb-component-library/src/style/variables' as variables; +// TODO: Use grid, flex, spacing from SSB design system .tableContainer { overflow-x: auto; + + .table { + background-color: variables.$ssb-white; + width: 100%; + border-collapse: collapse; + border: 1px solid; + padding: 2rem; + + th,td { + padding: 0.75rem; + text-align: start; + } + + th { + border: 1px solid; + } + + td { + border: 1px inset variables.$ssb-dark-2; + } + } } -.table { - background-color: variables.$ssb-white; +.tableContainerMobile { width: 100%; - border-collapse: collapse; border: 1px solid; - padding: 2rem; - - th,td { - padding: 0.75rem; - text-align: start; + + .tableMobile { + display: flex; + flex-direction: column; + border: 1px inset variables.$ssb-dark-2; + padding: .5rem; + font-size: .8rem; + + > * { + display: flex; + flex-direction: column; + margin-bottom: 1rem; + } } - - th { - border: 1px solid; - } - - td { - border: 1px inset variables.$ssb-dark-2; - } } .conditionalCell { background-color: variables.$ssb-green-1; -} \ No newline at end of file +} diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index e94b5eba..322ee1a5 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -21,9 +21,11 @@ export default function Home() { function renderTeamNameColumn(team: Team) { return ( <> - - {team.displayName} - + + + {team.displayName} + + {/* TODO: Fetch department from API. Teams are missing a department property */} ) @@ -55,10 +57,10 @@ export default function Home() { id: team.uniformName, 'navn': renderTeamNameColumn(team), // TODO: Fetch team user count from API e.g. /teams/{team.uniformName}/users and users.count - 'teammedlemmer': '', + 'teammedlemmer': 12, // TODO: // * Fetch team manager? from API e.g. /groups/{team.uniformName}-managers/users and use users.displayName - 'ansvarlig': '', + 'ansvarlig': 'Lorem ipsum', })) // TODO: Loading can be replaced by a spinner eventually From ce33169df41bb88265d6c986e405819ed0d662db Mon Sep 17 00:00:00 2001 From: johnnadeluy Date: Thu, 18 Jan 2024 08:16:30 +0100 Subject: [PATCH 7/8] Minor styling tweaks and code refactoring DPSTAT-801 --- src/components/Table/Table.tsx | 62 ++++++++++++++------------ src/components/Table/table.module.scss | 14 +++--- 2 files changed, 41 insertions(+), 35 deletions(-) diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx index 9f373d6c..3dbf96b8 100644 --- a/src/components/Table/Table.tsx +++ b/src/components/Table/Table.tsx @@ -1,5 +1,7 @@ import styles from './table.module.scss' + import { useMediaQuery } from 'react-responsive' +import { Text } from '@statisticsnorway/ssb-component-library' export interface TableData { columns: { @@ -13,8 +15,8 @@ export interface TableData { } function conditionalStyling(index: number) { - // Add conditional styling for first element, then third etc - return (index + 1) % 2 !== 0 ? styles.conditionalCell : undefined + // Add conditional styling for the first element, then third etc + return (index + 1) % 2 !== 0 ? styles.greenBackground : undefined } const TableMobileView = ({columns, data}: TableData) => ( @@ -23,10 +25,10 @@ const TableMobileView = ({columns, data}: TableData) => ( return (
{columns.map((column, index) => -
+ {index !== 0 && {column.label}} {row[column.id]} -
+ )}
) @@ -37,7 +39,7 @@ const TableMobileView = ({columns, data}: TableData) => ( const TableDesktopView = ({columns, data}: TableData) => (
- + {columns.map((column) => ( ))} - - - {data.map((row, index) => { - return ( - - {columns.map((column) => ( - - ))} - - ) - })} - + + + {data.map((row, index) => { + return ( + + {columns.map((column) => ( + + ))} + + ) + })} +
@@ -45,37 +47,39 @@ const TableDesktopView = ({columns, data}: TableData) => (
- {row[column.id]} -
+ {row[column.id]} +
) export default function Table ({columns, data}: TableData) { - const isMobile = useMediaQuery({ query: '(max-width: 767px)'}) // from ssb-component-library - - return ( - <> - {!isMobile && } - {isMobile && + ) + } else { + return ( + } - - ) + /> + ) + } } \ No newline at end of file diff --git a/src/components/Table/table.module.scss b/src/components/Table/table.module.scss index bb1aa592..43610006 100644 --- a/src/components/Table/table.module.scss +++ b/src/components/Table/table.module.scss @@ -1,6 +1,5 @@ @use '@statisticsnorway/ssb-component-library/src/style/variables' as variables; -// TODO: Use grid, flex, spacing from SSB design system .tableContainer { overflow-x: auto; @@ -27,24 +26,27 @@ } .tableContainerMobile { + background-color: variables.$ssb-white; width: 100%; border: 1px solid; .tableMobile { display: flex; flex-direction: column; - border: 1px inset variables.$ssb-dark-2; padding: .5rem; - font-size: .8rem; - + border-bottom: 1px inset variables.$ssb-dark-2; + > * { display: flex; flex-direction: column; - margin-bottom: 1rem; + + &:not(:last-child) { + margin-bottom: 1.5rem; + } } } } -.conditionalCell { +.greenBackground { background-color: variables.$ssb-green-1; } From 7e206a68c653d9f1720f29f8346de2f97c438962 Mon Sep 17 00:00:00 2001 From: johnnadeluy Date: Thu, 18 Jan 2024 16:12:50 +0100 Subject: [PATCH 8/8] Revert changes in Users page DPSTAT-801 --- src/pages/Users.tsx | 42 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/src/pages/Users.tsx b/src/pages/Users.tsx index a4cd7371..2dd23bfe 100644 --- a/src/pages/Users.tsx +++ b/src/pages/Users.tsx @@ -1,9 +1,51 @@ import PageLayout from "../components/PageLayout/PageLayout" +import { getAllTeams, TeamApiResponse } from "../api/teamApi" +import { useEffect, useState } from "react" +import { Dialog } from "@statisticsnorway/ssb-component-library" export default function Users() { + const [teams, setTeams] = useState(); + const [error, setError] = useState(); + + useEffect(() => { + const token = localStorage.getItem('token') as string; + getAllTeams(token).then(response => { + setTeams(response); + }).catch(error => { + setError(error.toString()); + }); + }, []); + return ( + <> + {error ? + {error} + : teams && teams.data.length > 0 && ( + <> +

Team List

+ + + + + + + + + {teams.data.map(team => ( + + + + + ))} + +
Uniform NameDisplay Name
{team.uniformName}{team.displayName}
+ + ) ||

Loading...

|| ( +

No teams found.

+ )} + ) }