From 7b1377e251fb541ba8e8fbe065ffe7131cad72a2 Mon Sep 17 00:00:00 2001 From: Matt <34515355+matt-clegg@users.noreply.github.com> Date: Mon, 30 Sep 2024 19:10:06 +0100 Subject: [PATCH] feat: improved ui of user admin table and fixed middleware issues (#372) --- frontend/nuxt.config.ts | 15 +- frontend/package.json | 2 +- frontend/pnpm-lock.yaml | 313 ++++++++++++++- frontend/src/app.config.ts | 11 + .../src/components/admin/UserEditModal.vue | 10 + frontend/src/components/admin/UsersTable.vue | 364 +++++++++++++----- frontend/src/middleware/admin-area.global.ts | 17 - frontend/src/middleware/committee.ts | 9 + frontend/src/pages/admin/users.vue | 101 +---- 9 files changed, 619 insertions(+), 223 deletions(-) create mode 100644 frontend/src/app.config.ts delete mode 100644 frontend/src/middleware/admin-area.global.ts create mode 100644 frontend/src/middleware/committee.ts diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts index c584bbe..3dc36ed 100644 --- a/frontend/nuxt.config.ts +++ b/frontend/nuxt.config.ts @@ -23,13 +23,6 @@ export default defineNuxtConfig({ } }, - appConfig: { - umami: { - ignoreLocalhost: true, - version: 2 - } - }, - sourcemap: { server: true, client: true @@ -82,7 +75,6 @@ export default defineNuxtConfig({ modules: [ "nuxt-directus", - "@nuxtjs/tailwindcss", "nuxt-headlessui", "@pinia/nuxt", "@nuxtjs/turnstile", @@ -92,7 +84,8 @@ export default defineNuxtConfig({ "@nuxt/fonts", "@nuxtjs/device", "@nuxt/image", - "@nuxt/test-utils/module" + "@nuxt/test-utils/module", + "@nuxt/ui" ], image: { @@ -106,6 +99,10 @@ export default defineNuxtConfig({ prefix: "" }, + colorMode: { + preference: 'light' + }, + directus: { url: "http://host.docker.internal:8055", autoRefresh: true, diff --git a/frontend/package.json b/frontend/package.json index 504049e..859f684 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -18,9 +18,9 @@ "@nuxt/fonts": "^0.6.1", "@nuxt/image": "^1.8.0", "@nuxt/test-utils": "^3.14.2", + "@nuxt/ui": "^2.18.6", "@nuxtjs/device": "^3.2.4", "@nuxtjs/eslint-config-typescript": "^12.1.0", - "@nuxtjs/tailwindcss": "^6.12.1", "@nuxtjs/turnstile": "^0.6.3", "@sentry/node": "^7.119.0", "@sentry/profiling-node": "^1.3.5", diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index bbd9f53..922a00e 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -97,15 +97,15 @@ devDependencies: '@nuxt/test-utils': specifier: ^3.14.2 version: 3.14.2(@vue/test-utils@2.4.6)(h3@1.12.0)(happy-dom@14.12.3)(nitropack@2.9.7)(playwright-core@1.47.2)(vite@5.4.8)(vitest@1.6.0)(vue-router@4.4.5)(vue@3.5.9) + '@nuxt/ui': + specifier: ^2.18.6 + version: 2.18.6(vite@5.4.8)(vue@3.5.9) '@nuxtjs/device': specifier: ^3.2.4 version: 3.2.4 '@nuxtjs/eslint-config-typescript': specifier: ^12.1.0 version: 12.1.0(eslint@8.57.1)(typescript@5.6.2) - '@nuxtjs/tailwindcss': - specifier: ^6.12.1 - version: 6.12.1 '@nuxtjs/turnstile': specifier: ^0.6.3 version: 0.6.3 @@ -181,6 +181,13 @@ packages: '@jridgewell/gen-mapping': 0.3.5 '@jridgewell/trace-mapping': 0.3.25 + /@antfu/install-pkg@0.4.1: + resolution: {integrity: sha512-T7yB5QNG29afhWVkVq7XeIMBa5U/vs9mX69YqayXypPRmYzUmzwnYltplHmPtZ4HPCn+sQKeXW8I47wCbuBOjw==} + dependencies: + package-manager-detector: 0.2.0 + tinyexec: 0.3.0 + dev: true + /@antfu/utils@0.7.10: resolution: {integrity: sha512-+562v9k4aI80m1+VuMHehNJWLOFjBnXn3tdOitzD0il5b7smkSBal4+a3oKiQTbrwMmN/TBUMDvbdoWDehgOww==} dev: true @@ -1286,6 +1293,45 @@ packages: deprecated: Use @eslint/object-schema instead dev: true + /@iconify-json/heroicons@1.2.0: + resolution: {integrity: sha512-EmvGN0L9EUJCmQ82rkLGZ4tkz0YGQfZV7ugKT6UvHni/bxNitQrD0gLj6NJj2W9zsSoXyNHyCX236+EJmO4pmA==} + dependencies: + '@iconify/types': 2.0.0 + dev: true + + /@iconify/collections@1.0.465: + resolution: {integrity: sha512-40sG1esFVHw4WdT9vH16FAu21KqZqudGHLCDs4uRAnLaym1XFXLJYzT1YEYlaV+mz3N7DQMBcjuJqQFPFFz42Q==} + dependencies: + '@iconify/types': 2.0.0 + dev: true + + /@iconify/types@2.0.0: + resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==} + dev: true + + /@iconify/utils@2.1.33: + resolution: {integrity: sha512-jP9h6v/g0BIZx0p7XGJJVtkVnydtbgTgt9mVNcGDYwaa7UhdHdI9dvoq+gKj9sijMSJKxUPEG2JyjsgXjxL7Kw==} + dependencies: + '@antfu/install-pkg': 0.4.1 + '@antfu/utils': 0.7.10 + '@iconify/types': 2.0.0 + debug: 4.3.7 + kolorist: 1.8.0 + local-pkg: 0.5.0 + mlly: 1.7.1 + transitivePeerDependencies: + - supports-color + dev: true + + /@iconify/vue@4.1.3-beta.1(vue@3.5.9): + resolution: {integrity: sha512-N7iEOnWfhjbMqiyGMhotJKip23nrK5l3+T1hQwpEjKeMD2o4zOjm8zmeEfOOH81EXllhhOm7upR8jcH499YRWA==} + peerDependencies: + vue: '>=3' + dependencies: + '@iconify/types': 2.0.0 + vue: 3.5.9(typescript@5.6.2) + dev: true + /@ioredis/commands@1.2.0: resolution: {integrity: sha512-Sx1pU8EM64o2BrqNpEO1CNLtKQwyhuXuqyfH7oGKCk+1a33d2r5saW8zNwm3j6BTExtjrv2BxTgzzkMwts6vGg==} dev: true @@ -1561,6 +1607,30 @@ packages: - webpack-sources dev: true + /@nuxt/icon@1.5.2(vite@5.4.8)(vue@3.5.9): + resolution: {integrity: sha512-VjtYIMo+d+jrBASHhh3eLZgfRAYhZI/E5z7DMlgjSRmUBYtMv/Qz86dSZdYEWM2rdHzzXtFurQRandIHC71fBQ==} + dependencies: + '@iconify/collections': 1.0.465 + '@iconify/types': 2.0.0 + '@iconify/utils': 2.1.33 + '@iconify/vue': 4.1.3-beta.1(vue@3.5.9) + '@nuxt/devtools-kit': 1.5.1(magicast@0.3.5)(vite@5.4.8) + '@nuxt/kit': 3.13.2(magicast@0.3.5) + consola: 3.2.3 + fast-glob: 3.3.2 + local-pkg: 0.5.0 + mlly: 1.7.1 + pathe: 1.1.2 + std-env: 3.7.0 + transitivePeerDependencies: + - magicast + - rollup + - supports-color + - vite + - vue + - webpack-sources + dev: true + /@nuxt/image@1.8.0: resolution: {integrity: sha512-GBbORch+ZfWJ0KB8PaXABsPjaiEXB4B4plcpAUVNCdzKZi2qQ4beRnEXfAbtAWPUPefj3rgCG7b9AqAe51Qlzw==} engines: {node: ^14.16.0 || >=16.11.0} @@ -1758,6 +1828,54 @@ packages: - webpack-sources dev: true + /@nuxt/ui@2.18.6(vite@5.4.8)(vue@3.5.9): + resolution: {integrity: sha512-IyAMdw+oyrLnILp8k/Xfe2eX1RoFcQSnJd6Z0DBR/NmurrHR8M1EGRxDyT5ob6EbR1PbTZa6t3xQOO5xjslPwg==} + dependencies: + '@headlessui/tailwindcss': 0.2.1(tailwindcss@3.4.13) + '@headlessui/vue': 1.7.23(vue@3.5.9) + '@iconify-json/heroicons': 1.2.0 + '@nuxt/icon': 1.5.2(vite@5.4.8)(vue@3.5.9) + '@nuxt/kit': 3.13.2(magicast@0.3.5) + '@nuxtjs/color-mode': 3.5.1 + '@nuxtjs/tailwindcss': 6.12.1 + '@popperjs/core': 2.11.8 + '@tailwindcss/aspect-ratio': 0.4.2(tailwindcss@3.4.13) + '@tailwindcss/container-queries': 0.1.1(tailwindcss@3.4.13) + '@tailwindcss/forms': 0.5.9(tailwindcss@3.4.13) + '@tailwindcss/typography': 0.5.15(tailwindcss@3.4.13) + '@vueuse/core': 11.1.0(vue@3.5.9) + '@vueuse/integrations': 11.1.0(fuse.js@7.0.0)(vue@3.5.9) + '@vueuse/math': 11.1.0(vue@3.5.9) + defu: 6.1.4 + fuse.js: 7.0.0 + ohash: 1.1.4 + pathe: 1.1.2 + scule: 1.3.0 + tailwind-merge: 2.5.2 + tailwindcss: 3.4.13 + transitivePeerDependencies: + - '@vue/composition-api' + - async-validator + - axios + - change-case + - drauu + - focus-trap + - idb-keyval + - jwt-decode + - magicast + - nprogress + - qrcode + - rollup + - sortablejs + - supports-color + - ts-node + - uWebSockets.js + - universal-cookie + - vite + - vue + - webpack-sources + dev: true + /@nuxt/vite-builder@3.13.2(@types/node@20.16.9)(eslint@8.57.1)(typescript@5.6.2)(vue-tsc@1.8.27)(vue@3.5.9): resolution: {integrity: sha512-3dzc3YH3UeTmzGtCevW1jTq0Q8/cm+yXqo/VS/EFM3aIO/tuNPS88is8ZF2YeBButFnLFllq/QenziPbq0YD6Q==} engines: {node: ^14.18.0 || >=16.10.0} @@ -1823,6 +1941,21 @@ packages: - webpack-sources dev: true + /@nuxtjs/color-mode@3.5.1: + resolution: {integrity: sha512-GRHF3WUwX6fXIiRVlngNq1nVDwrVuP6dWX1DRmox3QolzX0eH1oJEcFr/lAm1nkT71JVGb8mszho9w+yHJbePw==} + dependencies: + '@nuxt/kit': 3.13.2(magicast@0.3.5) + changelogen: 0.5.7 + pathe: 1.1.2 + pkg-types: 1.2.0 + semver: 7.6.3 + transitivePeerDependencies: + - magicast + - rollup + - supports-color + - webpack-sources + dev: true + /@nuxtjs/device@3.2.4: resolution: {integrity: sha512-jIvN6QeodBNrUrL/1FCHk4bebsiLsGHlJd8c/m2ksLrGY4IZ0npA8IYhDTdYV92epGxoe8+3iZOzCjav+6TshQ==} dependencies: @@ -2080,6 +2213,10 @@ packages: resolution: {integrity: sha512-8LduaNlMZGwdZ6qWrKlfa+2M4gahzFkprZiAt2TF8uS0qQgBizKXpXURqvTJ4WtmupWxaLqjRb2UCTe72mu+Aw==} dev: true + /@popperjs/core@2.11.8: + resolution: {integrity: sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==} + dev: true + /@resvg/resvg-js-android-arm-eabi@2.6.2: resolution: {integrity: sha512-FrJibrAk6v29eabIPgcTUMPXiEz8ssrAk7TXxsiZzww9UTQ1Z5KAbFJs+Z0Ez+VZTYgnE5IQJqBcoSiMebtPHA==} engines: {node: '>= 10'} @@ -2723,6 +2860,22 @@ packages: tslib: 2.7.0 dev: true + /@tailwindcss/aspect-ratio@0.4.2(tailwindcss@3.4.13): + resolution: {integrity: sha512-8QPrypskfBa7QIMuKHg2TA7BqES6vhBrDLOv8Unb6FcFyd3TjKbc6lcmb9UPQHxfl24sXoJ41ux/H7qQQvfaSQ==} + peerDependencies: + tailwindcss: '>=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1' + dependencies: + tailwindcss: 3.4.13 + dev: true + + /@tailwindcss/container-queries@0.1.1(tailwindcss@3.4.13): + resolution: {integrity: sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==} + peerDependencies: + tailwindcss: '>=3.2.0' + dependencies: + tailwindcss: 3.4.13 + dev: true + /@tailwindcss/forms@0.5.9(tailwindcss@3.4.13): resolution: {integrity: sha512-tM4XVr2+UVTxXJzey9Twx48c1gcxFStqn1pQz0tRsX8o3DvxhN5oY5pvyAbUx7VTaZxpej4Zzvc6h+1RJBzpIg==} peerDependencies: @@ -2732,6 +2885,18 @@ packages: tailwindcss: 3.4.13 dev: true + /@tailwindcss/typography@0.5.15(tailwindcss@3.4.13): + resolution: {integrity: sha512-AqhlCXl+8grUz8uqExv5OTtgpjuVIwFTSXTrh8y9/pw6q2ek7fJ+Y8ZEVw7EB2DCcuCOtEjf9w3+J3rzts01uA==} + peerDependencies: + tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20' + dependencies: + lodash.castarray: 4.4.0 + lodash.isplainobject: 4.0.6 + lodash.merge: 4.6.2 + postcss-selector-parser: 6.0.10 + tailwindcss: 3.4.13 + dev: true + /@tanstack/virtual-core@3.10.8: resolution: {integrity: sha512-PBu00mtt95jbKFi6Llk9aik8bnR3tR/oQP1o3TSi+iG//+Q2RTIzCEgKkHG8BB86kxMNW6O8wku+Lmi+QFR6jA==} dev: true @@ -2811,7 +2976,6 @@ packages: /@types/web-bluetooth@0.0.20: resolution: {integrity: sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==} - dev: false /@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.1)(typescript@5.6.2): resolution: {integrity: sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA==} @@ -3380,10 +3544,86 @@ packages: - vue dev: false + /@vueuse/core@11.1.0(vue@3.5.9): + resolution: {integrity: sha512-P6dk79QYA6sKQnghrUz/1tHi0n9mrb/iO1WTMk/ElLmTyNqgDeSZ3wcDf6fRBGzRJbeG1dxzEOvLENMjr+E3fg==} + dependencies: + '@types/web-bluetooth': 0.0.20 + '@vueuse/metadata': 11.1.0 + '@vueuse/shared': 11.1.0(vue@3.5.9) + vue-demi: 0.14.10(vue@3.5.9) + transitivePeerDependencies: + - '@vue/composition-api' + - vue + dev: true + + /@vueuse/integrations@11.1.0(fuse.js@7.0.0)(vue@3.5.9): + resolution: {integrity: sha512-O2ZgrAGPy0qAjpoI2YR3egNgyEqwG85fxfwmA9BshRIGjV4G6yu6CfOPpMHAOoCD+UfsIl7Vb1bXJ6ifrHYDDA==} + peerDependencies: + async-validator: ^4 + axios: ^1 + change-case: ^5 + drauu: ^0.4 + focus-trap: ^7 + fuse.js: ^7 + idb-keyval: ^6 + jwt-decode: ^4 + nprogress: ^0.2 + qrcode: ^1.5 + sortablejs: ^1 + universal-cookie: ^7 + peerDependenciesMeta: + async-validator: + optional: true + axios: + optional: true + change-case: + optional: true + drauu: + optional: true + focus-trap: + optional: true + fuse.js: + optional: true + idb-keyval: + optional: true + jwt-decode: + optional: true + nprogress: + optional: true + qrcode: + optional: true + sortablejs: + optional: true + universal-cookie: + optional: true + dependencies: + '@vueuse/core': 11.1.0(vue@3.5.9) + '@vueuse/shared': 11.1.0(vue@3.5.9) + fuse.js: 7.0.0 + vue-demi: 0.14.10(vue@3.5.9) + transitivePeerDependencies: + - '@vue/composition-api' + - vue + dev: true + + /@vueuse/math@11.1.0(vue@3.5.9): + resolution: {integrity: sha512-pnjB9WBatF5RHHRbMo2P1w/e5m+r0QQJtGcA1cZGrg5yp1itzixLpMZHEmXVWelRTc0Dfn5uyn/sYmBimU1BoA==} + dependencies: + '@vueuse/shared': 11.1.0(vue@3.5.9) + vue-demi: 0.14.10(vue@3.5.9) + transitivePeerDependencies: + - '@vue/composition-api' + - vue + dev: true + /@vueuse/metadata@10.11.1: resolution: {integrity: sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==} dev: false + /@vueuse/metadata@11.1.0: + resolution: {integrity: sha512-l9Q502TBTaPYGanl1G+hPgd3QX5s4CGnpXriVBR5fEZ/goI6fvDaVmIl3Td8oKFurOxTmbXvBPSsgrd6eu6HYg==} + dev: true + /@vueuse/shared@10.11.1(vue@3.5.9): resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==} dependencies: @@ -3393,6 +3633,15 @@ packages: - vue dev: false + /@vueuse/shared@11.1.0(vue@3.5.9): + resolution: {integrity: sha512-YUtIpY122q7osj+zsNMFAfMTubGz0sn5QzE5gPzAIiCmtt2ha3uQUY1+JPyL4gRCTsLPX82Y9brNbo/aqlA91w==} + dependencies: + vue-demi: 0.14.10(vue@3.5.9) + transitivePeerDependencies: + - '@vue/composition-api' + - vue + dev: true + /@zxcvbn-ts/core@3.0.4: resolution: {integrity: sha512-aQeiT0F09FuJaAqNrxynlAwZ2mW/1MdXakKWNmGM1Qp/VaY6CnB/GfnMS2T8gB2231Esp1/maCWd8vTG4OuShw==} dependencies: @@ -4006,6 +4255,28 @@ packages: engines: {node: ^12.17.0 || ^14.13 || >=16.0.0} dev: true + /changelogen@0.5.7: + resolution: {integrity: sha512-cTZXBcJMl3pudE40WENOakXkcVtrbBpbkmSkM20NdRiUqa4+VYRdXdEsgQ0BNQ6JBE2YymTNWtPKVF7UCTN5+g==} + hasBin: true + dependencies: + c12: 1.11.2(magicast@0.3.5) + colorette: 2.0.20 + consola: 3.2.3 + convert-gitmoji: 0.1.5 + mri: 1.2.0 + node-fetch-native: 1.6.4 + ofetch: 1.4.0 + open: 10.1.0 + pathe: 1.1.2 + pkg-types: 1.2.0 + scule: 1.3.0 + semver: 7.6.3 + std-env: 3.7.0 + yaml: 2.5.1 + transitivePeerDependencies: + - magicast + dev: true + /check-error@1.0.3: resolution: {integrity: sha512-iKEoDYaRmd1mxM90a2OEfWhjsjPpYPuQ+lMYsoxB126+t8fw7ySEO48nmDg5COTjxDI65/Y2OWpeEHk3ZOe8zg==} dependencies: @@ -4155,6 +4426,10 @@ packages: resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==} dev: true + /colorette@2.0.20: + resolution: {integrity: sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==} + dev: true + /combined-stream@1.0.8: resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==} engines: {node: '>= 0.8'} @@ -4248,6 +4523,10 @@ packages: engines: {node: '>= 0.6'} dev: true + /convert-gitmoji@0.1.5: + resolution: {integrity: sha512-4wqOafJdk2tqZC++cjcbGcaJ13BZ3kwldf06PTiAQRAB76Z1KJwZNL1SaRZMi2w1FM9RYTgZ6QErS8NUl/GBmQ==} + dev: true + /convert-source-map@2.0.0: resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==} @@ -5807,6 +6086,11 @@ packages: /functions-have-names@1.2.3: resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==} + /fuse.js@7.0.0: + resolution: {integrity: sha512-14F4hBIxqKvD4Zz/XjDc3y94mNZN6pRv3U13Udo0lNLCWRBUsrMv2xwcF/y/Z5sV6+FQW+/ow68cHpm4sunt8Q==} + engines: {node: '>=10'} + dev: true + /gauge@3.0.2: resolution: {integrity: sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==} engines: {node: '>=10'} @@ -6948,6 +7232,10 @@ packages: resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==} dev: false + /lodash.castarray@4.4.0: + resolution: {integrity: sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==} + dev: true + /lodash.clonedeep@4.5.0: resolution: {integrity: sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==} dev: false @@ -6964,6 +7252,10 @@ packages: resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==} dev: false + /lodash.isplainobject@4.0.6: + resolution: {integrity: sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==} + dev: true + /lodash.memoize@4.1.2: resolution: {integrity: sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==} dev: true @@ -8506,6 +8798,14 @@ packages: postcss-value-parser: 4.2.0 dev: true + /postcss-selector-parser@6.0.10: + resolution: {integrity: sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==} + engines: {node: '>=4'} + dependencies: + cssesc: 3.0.0 + util-deprecate: 1.0.2 + dev: true + /postcss-selector-parser@6.1.2: resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==} engines: {node: '>=4'} @@ -9543,6 +9843,10 @@ packages: - supports-color dev: true + /tailwind-merge@2.5.2: + resolution: {integrity: sha512-kjEBm+pvD+6eAwzJL2Bi+02/9LFLal1Gs61+QB7HvTfQQ0aXwC5LGT8PEt1gS0CWKktKe6ysPTAy3cBC5MeiIg==} + dev: true + /tailwindcss@3.4.13: resolution: {integrity: sha512-KqjHOJKogOUt5Bs752ykCeiwvi0fKVkr5oqsFNt/8px/tA8scFPIlkygsf6jXrfCqGHz7VflA6+yytWuM+XhFw==} engines: {node: '>=14.0.0'} @@ -10509,7 +10813,6 @@ packages: optional: true dependencies: vue: 3.5.9(typescript@5.6.2) - dev: false /vue-devtools-stub@0.1.0: resolution: {integrity: sha512-RutnB7X8c5hjq39NceArgXg28WZtZpGc3+J16ljMiYnFhKvd8hITxSWQSQ5bvldxMDU6gG5mkxl1MTQLXckVSQ==} diff --git a/frontend/src/app.config.ts b/frontend/src/app.config.ts new file mode 100644 index 0000000..ed1714a --- /dev/null +++ b/frontend/src/app.config.ts @@ -0,0 +1,11 @@ + +export default defineAppConfig({ + umami: { + ignoreLocalhost: true, + version: 2 + }, + ui: { + primary: 'mcc-brand', + gray: 'cool' + } +}) diff --git a/frontend/src/components/admin/UserEditModal.vue b/frontend/src/components/admin/UserEditModal.vue index f5f857b..f86f6b9 100644 --- a/frontend/src/components/admin/UserEditModal.vue +++ b/frontend/src/components/admin/UserEditModal.vue @@ -100,14 +100,20 @@ async function save() {
@@ -119,9 +125,13 @@ async function save() {
diff --git a/frontend/src/components/admin/UsersTable.vue b/frontend/src/components/admin/UsersTable.vue index 335ffb0..b6a7eaa 100644 --- a/frontend/src/components/admin/UsersTable.vue +++ b/frontend/src/components/admin/UsersTable.vue @@ -2,44 +2,66 @@ import type {DirectusUser} from "nuxt-directus/dist/runtime/types"; import {formatDistanceToNow} from "date-fns"; -defineProps<{ - users: DirectusUser[] | null, - itemsPerPage: number, - totalItems: number, - searchLoading: boolean -}>(); +const directus = useDirectus(); +const {getUsers} = useDirectusUsers(); -const emits = defineEmits(["search", "save"]) +const page = ref(1); +const itemsPerPage = ref(12); -const page = defineModel("page", {required: true}); -const searchQuery = defineModel("searchQuery", {required: true}); +const searchLoading = ref(false); +const searchQuery = ref(null); +const filteredRoles = ref([]); -const editingUser = ref(null); -const editingUserModalOpen = ref(false); +const sort = ref({ + column: "fullName", + direction: "desc" +}); -function editUser(user: DirectusUser) { - editingUser.value = user; - editingUserModalOpen.value = true; -} +const { + data: userData, + refresh, + status +} = await useAsyncData("admin-users", async () => await fetchUsers()); -function onModalClose() { - editingUserModalOpen.value = false; -} +const {data: roles} = await useAsyncData("directus-roles", async () => await fetchRoles()); -function onPrevPage() { - page.value -= 1; +async function fetchRoles() { + const foundRoles = await directus("/roles"); + return foundRoles.data; } -function onNextPage() { - page.value += 1; -} +const rolesOptions = computed(() => { + return roles.value.map(r => ({ + name: r.name === "Unapproved" ? "Non-member" : r.name, + id: r.id, + })); +}); -function onSearch() { - emits("search"); -} +const totalItems = computed(() => userData.value.meta.filter_count); + +const users = computed(() => userData.value?.data.map(u => ({ + fullName: `${u.first_name} ${u.last_name}`, + lastAccess: { + value: timeSinceLastLogin(u), + class: "hidden md:table-cell" + }, + ...u, + email: { + value: u.email, + class: "hidden sm:table-cell" + }, + role: { + ...u.role, + name: u.role.name === "Unapproved" ? "Non-member" : u.role.name, + } +}))); + +watch([page, filteredRoles], async () => { + await refresh(); +}, {deep: true}); function timeSinceLastLogin(user: DirectusUser) { - if(user.role.name === "Junior"){ + if (user.role.name === "Junior") { return null; } @@ -50,81 +72,231 @@ function timeSinceLastLogin(user: DirectusUser) { return formatDistanceToNow(new Date(user.last_access), {addSuffix: true}); } -function onUserSave() { - emits("save"); + +function getSort() { + const dir = sort.value.direction === "desc" ? "" : "-"; + + let result = sort.value.column; + + if (sort.value.column === "fullName") { + result = "last_name"; + } else if (sort.value.column === "lastAccess") { + result = "last_access"; + } + + return dir + result; +} + +async function fetchUsers() { + try { + + let filter = null; + + if (filteredRoles.value?.length) { + filter = { + role: { + name: { + "_in": filteredRoles.value.map(r => r.name === "Non-member" ? "Unapproved" : r.name) + } + } + } + } + + const users = await getUsers({ + params: { + meta: "filter_count", + fields: [ + "id", + "first_name", + "last_name", + "email", + "avatar", + "last_access", + "bc_number", + "club_number", + "dob", + "role", + "role.id", + "role.name" + ], + filter, + page: page.value, + limit: itemsPerPage.value, + search: searchQuery.value || undefined, + sort: getSort() + }, + + }); + + if (!users.data) { + return null; + } + + return users; + } catch (err: any) { + console.log("error", err); + newError({ + message: "Unable to load users" + }); + return null; + } +} + +const columns = [ + { + label: "Name", + key: "fullName", + sortable: true, + }, + { + label: "Email", + key: "email", + class: "hidden sm:table-cell" + }, + { + label: "Last access", + key: "lastAccess", + sortable: true, + class: "hidden md:table-cell" + }, + { + label: "Role", + key: "role.name", + sortable: true, + }, + { + key: "actions" + } +] + +async function onSort(data: any) { + sort.value.column = data.column; + sort.value.direction = data.direction; + + await refresh(); +} + +const editingUser = ref(null); +const editingUserModalOpen = ref(false); + +function editUser(user: DirectusUser) { + editingUser.value = { + ...user, + email: user.email.value, + } + editingUserModalOpen.value = true; +} + +function onModalClose() { + editingUserModalOpen.value = false; +} + +async function onUserSave() { + await refresh(); +} + +async function onSearch() { + page.value = 1; + searchLoading.value = true; + try { + await refresh(); + } catch (err: any) { + console.error("Error performing user search", err); + newError({ + message: "Error performing user search", + }) + } finally { + searchLoading.value = false; + } +} + +async function clearSearch() { + searchQuery.value = null; + await onSearch(); }