From 78c63b75d966789d6dc9d09313a4d346871effd4 Mon Sep 17 00:00:00 2001 From: Bradley Shellnut Date: Tue, 8 Nov 2022 20:07:05 -0600 Subject: [PATCH 1/7] Setting up pagination component in search results. --- package.json | 10 +- pnpm-lock.yaml | 156 ++++---- src/lib/components/pagination/index.svelte | 337 +++++++++++------- src/lib/components/search/random/index.svelte | 2 +- .../components/search/textSearch/index.svelte | 2 +- src/routes/+page.svelte | 78 ++-- src/routes/search/+page.server.ts | 16 +- src/routes/search/+page.svelte | 54 ++- 8 files changed, 385 insertions(+), 270 deletions(-) diff --git a/package.json b/package.json index c79ec4d..889dc5a 100644 --- a/package.json +++ b/package.json @@ -20,21 +20,21 @@ "@sveltejs/kit": "1.0.0-next.480", "@types/cookie": "^0.5.1", "@types/node": "^18.11.9", - "@typescript-eslint/eslint-plugin": "^5.42.0", - "@typescript-eslint/parser": "^5.42.0", - "eslint": "^8.26.0", + "@typescript-eslint/eslint-plugin": "^5.42.1", + "@typescript-eslint/parser": "^5.42.1", + "eslint": "^8.27.0", "eslint-config-prettier": "^8.1.0", "eslint-plugin-svelte3": "^4.0.0", "just-debounce-it": "^3.1.1", "prettier": "^2.7.1", "prettier-plugin-svelte": "^2.8.0", - "sass": "^1.55.0", + "sass": "^1.56.0", "svelte": "^3.52.0", "svelte-check": "^2.9.2", "svelte-preprocess": "^4.10.7", "tslib": "^2.4.1", "typescript": "^4.8.4", - "vite": "^3.2.2" + "vite": "^3.2.3" }, "type": "module", "dependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 608e4ad..43f57e9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -13,24 +13,24 @@ specifiers: '@types/cookie': ^0.5.1 '@types/feather-icons': ^4.7.0 '@types/node': ^18.11.9 - '@typescript-eslint/eslint-plugin': ^5.42.0 - '@typescript-eslint/parser': ^5.42.0 + '@typescript-eslint/eslint-plugin': ^5.42.1 + '@typescript-eslint/parser': ^5.42.1 cookie: ^0.5.0 - eslint: ^8.26.0 + eslint: ^8.27.0 eslint-config-prettier: ^8.1.0 eslint-plugin-svelte3: ^4.0.0 feather-icons: ^4.29.0 just-debounce-it: ^3.1.1 prettier: ^2.7.1 prettier-plugin-svelte: ^2.8.0 - sass: ^1.55.0 + sass: ^1.56.0 svelte: ^3.52.0 svelte-check: ^2.9.2 svelte-media-query-store: ^1.0.0 svelte-preprocess: ^4.10.7 tslib: ^2.4.1 typescript: ^4.8.4 - vite: ^3.2.2 + vite: ^3.2.3 zod: ^3.19.1 zod-to-json-schema: ^3.18.1 @@ -51,24 +51,24 @@ devDependencies: '@rgossiaux/svelte-headlessui': 1.0.2_svelte@3.52.0 '@rgossiaux/svelte-heroicons': 0.1.2_svelte@3.52.0 '@sveltejs/adapter-auto': 1.0.0-next.72 - '@sveltejs/kit': 1.0.0-next.480_svelte@3.52.0+vite@3.2.2 + '@sveltejs/kit': 1.0.0-next.480_svelte@3.52.0+vite@3.2.3 '@types/cookie': 0.5.1 '@types/node': 18.11.9 - '@typescript-eslint/eslint-plugin': 5.42.0_6xw5wg2354iw4zujk2f3vyfrzu - '@typescript-eslint/parser': 5.42.0_wyqvi574yv7oiwfeinomdzmc3m - eslint: 8.26.0 - eslint-config-prettier: 8.5.0_eslint@8.26.0 - eslint-plugin-svelte3: 4.0.0_l6ppk7eerpslmlsqymzic46t24 + '@typescript-eslint/eslint-plugin': 5.42.1_2udltptbznfmezdozpdoa2aemq + '@typescript-eslint/parser': 5.42.1_rmayb2veg2btbq6mbmnyivgasy + eslint: 8.27.0 + eslint-config-prettier: 8.5.0_eslint@8.27.0 + eslint-plugin-svelte3: 4.0.0_3mj2dxwqqdwhca3fosrxvrsvse just-debounce-it: 3.1.1 prettier: 2.7.1 prettier-plugin-svelte: 2.8.0_lrllcp5xtrkmmdzifit4hd52ze - sass: 1.55.0 + sass: 1.56.0 svelte: 3.52.0 - svelte-check: 2.9.2_sass@1.55.0+svelte@3.52.0 - svelte-preprocess: 4.10.7_q7oepo4r57y5enzswpidbbgzsy + svelte-check: 2.9.2_sass@1.56.0+svelte@3.52.0 + svelte-preprocess: 4.10.7_ngwexh7rjq5fmatf3fnjcyc3qm tslib: 2.4.1 typescript: 4.8.4 - vite: 3.2.2_sass@1.55.0 + vite: 3.2.3_ybfrah5imrtywho25u564barp4 packages: @@ -300,7 +300,7 @@ packages: - supports-color dev: true - /@sveltejs/kit/1.0.0-next.480_svelte@3.52.0+vite@3.2.2: + /@sveltejs/kit/1.0.0-next.480_svelte@3.52.0+vite@3.2.3: resolution: {integrity: sha512-RnltVDZFksAkeIZ0wgMQDr4POz3WZxSDy6D/ycIjrz3VXMDYWxKRqmTEI7Yl7TxPgUabeYHGRm/qI+nSXOb/Yw==} engines: {node: '>=16.14'} hasBin: true @@ -309,7 +309,7 @@ packages: svelte: ^3.44.0 vite: ^3.1.0 dependencies: - '@sveltejs/vite-plugin-svelte': 1.0.5_svelte@3.52.0+vite@3.2.2 + '@sveltejs/vite-plugin-svelte': 1.0.5_svelte@3.52.0+vite@3.2.3 cookie: 0.5.0 devalue: 3.1.3 kleur: 4.1.5 @@ -322,13 +322,13 @@ packages: svelte: 3.52.0 tiny-glob: 0.2.9 undici: 5.10.0 - vite: 3.2.2_sass@1.55.0 + vite: 3.2.3_ybfrah5imrtywho25u564barp4 transitivePeerDependencies: - diff-match-patch - supports-color dev: true - /@sveltejs/vite-plugin-svelte/1.0.5_svelte@3.52.0+vite@3.2.2: + /@sveltejs/vite-plugin-svelte/1.0.5_svelte@3.52.0+vite@3.2.3: resolution: {integrity: sha512-CmSdSow0Dr5ua1A11BQMtreWnE0JZmkVIcRU/yG3PKbycKUpXjNdgYTWFSbStLB0vdlGnBbm2+Y4sBVj+C+TIw==} engines: {node: ^14.18.0 || >= 16} peerDependencies: @@ -346,7 +346,7 @@ packages: magic-string: 0.26.3 svelte: 3.52.0 svelte-hmr: 0.14.12_svelte@3.52.0 - vite: 3.2.2_sass@1.55.0 + vite: 3.2.3_ybfrah5imrtywho25u564barp4 transitivePeerDependencies: - supports-color dev: true @@ -381,8 +381,8 @@ packages: resolution: {integrity: sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw==} dev: true - /@typescript-eslint/eslint-plugin/5.42.0_6xw5wg2354iw4zujk2f3vyfrzu: - resolution: {integrity: sha512-5TJh2AgL6+wpL8H/GTSjNb4WrjKoR2rqvFxR/DDTqYNk6uXn8BJMEcncLSpMbf/XV1aS0jAjYwn98uvVCiAywQ==} + /@typescript-eslint/eslint-plugin/5.42.1_2udltptbznfmezdozpdoa2aemq: + resolution: {integrity: sha512-LyR6x784JCiJ1j6sH5Y0K6cdExqCCm8DJUTcwG5ThNXJj/G8o5E56u5EdG4SLy+bZAwZBswC+GYn3eGdttBVCg==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: '@typescript-eslint/parser': ^5.0.0 @@ -392,12 +392,12 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/parser': 5.42.0_wyqvi574yv7oiwfeinomdzmc3m - '@typescript-eslint/scope-manager': 5.42.0 - '@typescript-eslint/type-utils': 5.42.0_wyqvi574yv7oiwfeinomdzmc3m - '@typescript-eslint/utils': 5.42.0_wyqvi574yv7oiwfeinomdzmc3m + '@typescript-eslint/parser': 5.42.1_rmayb2veg2btbq6mbmnyivgasy + '@typescript-eslint/scope-manager': 5.42.1 + '@typescript-eslint/type-utils': 5.42.1_rmayb2veg2btbq6mbmnyivgasy + '@typescript-eslint/utils': 5.42.1_rmayb2veg2btbq6mbmnyivgasy debug: 4.3.4 - eslint: 8.26.0 + eslint: 8.27.0 ignore: 5.2.0 natural-compare-lite: 1.4.0 regexpp: 3.2.0 @@ -408,8 +408,8 @@ packages: - supports-color dev: true - /@typescript-eslint/parser/5.42.0_wyqvi574yv7oiwfeinomdzmc3m: - resolution: {integrity: sha512-Ixh9qrOTDRctFg3yIwrLkgf33AHyEIn6lhyf5cCfwwiGtkWhNpVKlEZApi3inGQR/barWnY7qY8FbGKBO7p3JA==} + /@typescript-eslint/parser/5.42.1_rmayb2veg2btbq6mbmnyivgasy: + resolution: {integrity: sha512-kAV+NiNBWVQDY9gDJDToTE/NO8BHi4f6b7zTsVAJoTkmB/zlfOpiEVBzHOKtlgTndCKe8vj9F/PuolemZSh50Q==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 @@ -418,26 +418,26 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/scope-manager': 5.42.0 - '@typescript-eslint/types': 5.42.0 - '@typescript-eslint/typescript-estree': 5.42.0_typescript@4.8.4 + '@typescript-eslint/scope-manager': 5.42.1 + '@typescript-eslint/types': 5.42.1 + '@typescript-eslint/typescript-estree': 5.42.1_typescript@4.8.4 debug: 4.3.4 - eslint: 8.26.0 + eslint: 8.27.0 typescript: 4.8.4 transitivePeerDependencies: - supports-color dev: true - /@typescript-eslint/scope-manager/5.42.0: - resolution: {integrity: sha512-l5/3IBHLH0Bv04y+H+zlcLiEMEMjWGaCX6WyHE5Uk2YkSGAMlgdUPsT/ywTSKgu9D1dmmKMYgYZijObfA39Wow==} + /@typescript-eslint/scope-manager/5.42.1: + resolution: {integrity: sha512-QAZY/CBP1Emx4rzxurgqj3rUinfsh/6mvuKbLNMfJMMKYLRBfweus8brgXF8f64ABkIZ3zdj2/rYYtF8eiuksQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dependencies: - '@typescript-eslint/types': 5.42.0 - '@typescript-eslint/visitor-keys': 5.42.0 + '@typescript-eslint/types': 5.42.1 + '@typescript-eslint/visitor-keys': 5.42.1 dev: true - /@typescript-eslint/type-utils/5.42.0_wyqvi574yv7oiwfeinomdzmc3m: - resolution: {integrity: sha512-HW14TXC45dFVZxnVW8rnUGnvYyRC0E/vxXShFCthcC9VhVTmjqOmtqj6H5rm9Zxv+ORxKA/1aLGD7vmlLsdlOg==} + /@typescript-eslint/type-utils/5.42.1_rmayb2veg2btbq6mbmnyivgasy: + resolution: {integrity: sha512-WWiMChneex5w4xPIX56SSnQQo0tEOy5ZV2dqmj8Z371LJ0E+aymWD25JQ/l4FOuuX+Q49A7pzh/CGIQflxMVXg==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: '*' @@ -446,23 +446,23 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/typescript-estree': 5.42.0_typescript@4.8.4 - '@typescript-eslint/utils': 5.42.0_wyqvi574yv7oiwfeinomdzmc3m + '@typescript-eslint/typescript-estree': 5.42.1_typescript@4.8.4 + '@typescript-eslint/utils': 5.42.1_rmayb2veg2btbq6mbmnyivgasy debug: 4.3.4 - eslint: 8.26.0 + eslint: 8.27.0 tsutils: 3.21.0_typescript@4.8.4 typescript: 4.8.4 transitivePeerDependencies: - supports-color dev: true - /@typescript-eslint/types/5.42.0: - resolution: {integrity: sha512-t4lzO9ZOAUcHY6bXQYRuu+3SSYdD9TS8ooApZft4WARt4/f2Cj/YpvbTe8A4GuhT4bNW72goDMOy7SW71mZwGw==} + /@typescript-eslint/types/5.42.1: + resolution: {integrity: sha512-Qrco9dsFF5lhalz+lLFtxs3ui1/YfC6NdXu+RAGBa8uSfn01cjO7ssCsjIsUs484vny9Xm699FSKwpkCcqwWwA==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dev: true - /@typescript-eslint/typescript-estree/5.42.0_typescript@4.8.4: - resolution: {integrity: sha512-2O3vSq794x3kZGtV7i4SCWZWCwjEtkWfVqX4m5fbUBomOsEOyd6OAD1qU2lbvV5S8tgy/luJnOYluNyYVeOTTg==} + /@typescript-eslint/typescript-estree/5.42.1_typescript@4.8.4: + resolution: {integrity: sha512-qElc0bDOuO0B8wDhhW4mYVgi/LZL+igPwXtV87n69/kYC/7NG3MES0jHxJNCr4EP7kY1XVsRy8C/u3DYeTKQmw==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: typescript: '*' @@ -470,8 +470,8 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/types': 5.42.0 - '@typescript-eslint/visitor-keys': 5.42.0 + '@typescript-eslint/types': 5.42.1 + '@typescript-eslint/visitor-keys': 5.42.1 debug: 4.3.4 globby: 11.1.0 is-glob: 4.0.3 @@ -482,31 +482,31 @@ packages: - supports-color dev: true - /@typescript-eslint/utils/5.42.0_wyqvi574yv7oiwfeinomdzmc3m: - resolution: {integrity: sha512-JZ++3+h1vbeG1NUECXQZE3hg0kias9kOtcQr3+JVQ3whnjvKuMyktJAAIj6743OeNPnGBmjj7KEmiDL7qsdnCQ==} + /@typescript-eslint/utils/5.42.1_rmayb2veg2btbq6mbmnyivgasy: + resolution: {integrity: sha512-Gxvf12xSp3iYZd/fLqiQRD4uKZjDNR01bQ+j8zvhPjpsZ4HmvEFL/tC4amGNyxN9Rq+iqvpHLhlqx6KTxz9ZyQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 dependencies: '@types/json-schema': 7.0.11 '@types/semver': 7.3.13 - '@typescript-eslint/scope-manager': 5.42.0 - '@typescript-eslint/types': 5.42.0 - '@typescript-eslint/typescript-estree': 5.42.0_typescript@4.8.4 - eslint: 8.26.0 + '@typescript-eslint/scope-manager': 5.42.1 + '@typescript-eslint/types': 5.42.1 + '@typescript-eslint/typescript-estree': 5.42.1_typescript@4.8.4 + eslint: 8.27.0 eslint-scope: 5.1.1 - eslint-utils: 3.0.0_eslint@8.26.0 + eslint-utils: 3.0.0_eslint@8.27.0 semver: 7.3.7 transitivePeerDependencies: - supports-color - typescript dev: true - /@typescript-eslint/visitor-keys/5.42.0: - resolution: {integrity: sha512-QHbu5Hf/2lOEOwy+IUw0GoSCuAzByTAWWrOTKzTzsotiUnWFpuKnXcAhC9YztAf2EElQ0VvIK+pHJUPkM0q7jg==} + /@typescript-eslint/visitor-keys/5.42.1: + resolution: {integrity: sha512-LOQtSF4z+hejmpUvitPlc4hA7ERGoj2BVkesOcG91HCn8edLGUXbTrErmutmPbl8Bo9HjAvOO/zBKQHExXNA2A==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dependencies: - '@typescript-eslint/types': 5.42.0 + '@typescript-eslint/types': 5.42.1 eslint-visitor-keys: 3.3.0 dev: true @@ -1213,22 +1213,22 @@ packages: engines: {node: '>=10'} dev: true - /eslint-config-prettier/8.5.0_eslint@8.26.0: + /eslint-config-prettier/8.5.0_eslint@8.27.0: resolution: {integrity: sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==} hasBin: true peerDependencies: eslint: '>=7.0.0' dependencies: - eslint: 8.26.0 + eslint: 8.27.0 dev: true - /eslint-plugin-svelte3/4.0.0_l6ppk7eerpslmlsqymzic46t24: + /eslint-plugin-svelte3/4.0.0_3mj2dxwqqdwhca3fosrxvrsvse: resolution: {integrity: sha512-OIx9lgaNzD02+MDFNLw0GEUbuovNcglg+wnd/UY0fbZmlQSz7GlQiQ1f+yX0XvC07XPcDOnFcichqI3xCwp71g==} peerDependencies: eslint: '>=8.0.0' svelte: ^3.2.0 dependencies: - eslint: 8.26.0 + eslint: 8.27.0 svelte: 3.52.0 dev: true @@ -1248,13 +1248,13 @@ packages: estraverse: 5.3.0 dev: true - /eslint-utils/3.0.0_eslint@8.26.0: + /eslint-utils/3.0.0_eslint@8.27.0: resolution: {integrity: sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==} engines: {node: ^10.0.0 || ^12.0.0 || >= 14.0.0} peerDependencies: eslint: '>=5' dependencies: - eslint: 8.26.0 + eslint: 8.27.0 eslint-visitor-keys: 2.1.0 dev: true @@ -1268,8 +1268,8 @@ packages: engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dev: true - /eslint/8.26.0: - resolution: {integrity: sha512-kzJkpaw1Bfwheq4VXUezFriD1GxszX6dUekM7Z3aC2o4hju+tsR/XyTC3RcoSD7jmy9VkPU3+N6YjVU2e96Oyg==} + /eslint/8.27.0: + resolution: {integrity: sha512-0y1bfG2ho7mty+SiILVf9PfuRA49ek4Nc60Wmmu62QlobNR+CeXa4xXIJgcuwSQgZiWaPH+5BDsctpIW0PR/wQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} hasBin: true dependencies: @@ -1284,7 +1284,7 @@ packages: doctrine: 3.0.0 escape-string-regexp: 4.0.0 eslint-scope: 7.1.1 - eslint-utils: 3.0.0_eslint@8.26.0 + eslint-utils: 3.0.0_eslint@8.27.0 eslint-visitor-keys: 3.3.0 espree: 9.4.0 esquery: 1.4.0 @@ -2110,8 +2110,8 @@ packages: rimraf: 2.7.1 dev: true - /sass/1.55.0: - resolution: {integrity: sha512-Pk+PMy7OGLs9WaxZGJMn7S96dvlyVBwwtToX895WmCpAOr5YiJYEUJfiJidMuKb613z2xNWcXCHEuOvjZbqC6A==} + /sass/1.56.0: + resolution: {integrity: sha512-WFJ9XrpkcnqZcYuLRJh5qiV6ibQOR4AezleeEjTjMsCocYW59dEG19U3fwTTXxzi2Ed3yjPBp727hbbj53pHFw==} engines: {node: '>=12.0.0'} hasBin: true dependencies: @@ -2244,7 +2244,7 @@ packages: engines: {node: '>= 0.4'} dev: true - /svelte-check/2.9.2_sass@1.55.0+svelte@3.52.0: + /svelte-check/2.9.2_sass@1.56.0+svelte@3.52.0: resolution: {integrity: sha512-DRi8HhnCiqiGR2YF9ervPGvtoYrheE09cXieCTEqeTPOTJzfoa54Py8rovIBv4bH4n5HgZYIyTQ3DDLHQLl2uQ==} hasBin: true peerDependencies: @@ -2257,7 +2257,7 @@ packages: picocolors: 1.0.0 sade: 1.8.1 svelte: 3.52.0 - svelte-preprocess: 4.10.7_q7oepo4r57y5enzswpidbbgzsy + svelte-preprocess: 4.10.7_ngwexh7rjq5fmatf3fnjcyc3qm typescript: 4.8.4 transitivePeerDependencies: - '@babel/core' @@ -2291,7 +2291,7 @@ packages: svelte-media-query-store: 0.0.3 dev: false - /svelte-preprocess/4.10.7_q7oepo4r57y5enzswpidbbgzsy: + /svelte-preprocess/4.10.7_ngwexh7rjq5fmatf3fnjcyc3qm: resolution: {integrity: sha512-sNPBnqYD6FnmdBrUmBCaqS00RyCsCpj2BG58A1JBswNF7b0OKviwxqVrOL/CKyJrLSClrSeqQv5BXNg2RUbPOw==} engines: {node: '>= 9.11.2'} requiresBuild: true @@ -2336,7 +2336,7 @@ packages: '@types/sass': 1.43.1 detect-indent: 6.1.0 magic-string: 0.25.9 - sass: 1.55.0 + sass: 1.56.0 sorcery: 0.10.0 strip-indent: 3.0.0 svelte: 3.52.0 @@ -2438,17 +2438,20 @@ packages: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} dev: true - /vite/3.2.2_sass@1.55.0: - resolution: {integrity: sha512-pLrhatFFOWO9kS19bQ658CnRYzv0WLbsPih6R+iFeEEhDOuYgYCX2rztUViMz/uy/V8cLCJvLFeiOK7RJEzHcw==} + /vite/3.2.3_ybfrah5imrtywho25u564barp4: + resolution: {integrity: sha512-h8jl1TZ76eGs3o2dIBSsvXDLb1m/Ec1iej8ZMdz+PsaFUsftZeWe2CZOI3qogEsMNaywc17gu0q6cQDzh/weCQ==} engines: {node: ^14.18.0 || >=16.0.0} hasBin: true peerDependencies: + '@types/node': '>= 14' less: '*' sass: '*' stylus: '*' sugarss: '*' terser: ^5.4.0 peerDependenciesMeta: + '@types/node': + optional: true less: optional: true sass: @@ -2460,11 +2463,12 @@ packages: terser: optional: true dependencies: + '@types/node': 18.11.9 esbuild: 0.15.10 postcss: 8.4.18 resolve: 1.22.1 rollup: 2.79.1 - sass: 1.55.0 + sass: 1.56.0 optionalDependencies: fsevents: 2.3.2 dev: true diff --git a/src/lib/components/pagination/index.svelte b/src/lib/components/pagination/index.svelte index 5fb6804..ebc22b5 100644 --- a/src/lib/components/pagination/index.svelte +++ b/src/lib/components/pagination/index.svelte @@ -1,151 +1,218 @@
- -

Items per-page:

-
- { - dispatch('pageSizeEvent', e.detail); - // boredState.update((n) => ({ - // ...n, - // search: { totalCount, pageSize: e.detail, skip, currentPage } - // })); - }} - let:open - > - {pageSize} - {#if open} -
- - {#each pageSizes as size (size)} - (active ? 'active' : '')} - let:selected - > - {#if selected} - - {/if} -

{size.toString()}

- - {/each} - -
- {/if} - -
- -

- Page {currentPage || 1} of {totalPages || 1} -

-

- {itemsLeft} Item{itemsLeft > 1 || itemsLeft === 0 ? 's' : ''} Left -

- - +
+

Per-page:

+ { + dispatch('update', { pageSize: e.detail, page }); + }} + let:open + > + {pageSize || 10} + {#if open} +
+ + {#each pageSizes as size (size)} + (active ? 'active option' : 'option')} + style="display: flex; gap: 1rem; padding: 1rem;" + let:selected + > + {#if selected} + + {/if} + {size.toString()} + + {/each} + +
+ {/if} + +
+

+ Page {page || 1} of {totalPages || 1} +

+

+ {itemsLeft} Item{itemsLeft > 1 || itemsLeft === 0 ? 's' : ''} Left +

+
+ + +
diff --git a/src/lib/components/search/random/index.svelte b/src/lib/components/search/random/index.svelte index 15b1c75..aacc4ec 100644 --- a/src/lib/components/search/random/index.svelte +++ b/src/lib/components/search/random/index.svelte @@ -48,7 +48,7 @@ }); } gameStore.addAll(resultGames); - console.log(`Frontend result: ${JSON.stringify(result)}`); + console.log(`Frontend result random: ${JSON.stringify(result)}`); await applyAction(result); } else { console.log('Invalid'); diff --git a/src/lib/components/search/textSearch/index.svelte b/src/lib/components/search/textSearch/index.svelte index aaf043d..b680175 100644 --- a/src/lib/components/search/textSearch/index.svelte +++ b/src/lib/components/search/textSearch/index.svelte @@ -59,7 +59,7 @@ {/if} {#if showButton} - + {/if} diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 0e7e752..a905a54 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -130,43 +130,6 @@ -{#if $gameStore?.length > 0} -
-

Games Found:

-
- {#each $gameStore as game (game.id)} - - {/each} -
- console.log('Prev page called', event)} - on:perPageEvent={(event) => console.log('Per page called', event)} - /> -
-{:else if $boredState.loading} -
-

Games Found:

-
- {#each [...Array(numberOfGameSkeleton).keys()] as game, i} - - {/each} -
-
-{/if} - From fe2a88ab616b03945a70f18f65219d43ac156024 Mon Sep 17 00:00:00 2001 From: Bradley Shellnut Date: Wed, 9 Nov 2022 22:02:38 -0600 Subject: [PATCH 4/7] Implementing same search page logic on the main page. --- .../components/search/textSearch/index.svelte | 18 ++- src/routes/+page.svelte | 131 +----------------- src/routes/search/+page.svelte | 42 +----- 3 files changed, 17 insertions(+), 174 deletions(-) diff --git a/src/lib/components/search/textSearch/index.svelte b/src/lib/components/search/textSearch/index.svelte index da422b6..b077733 100644 --- a/src/lib/components/search/textSearch/index.svelte +++ b/src/lib/components/search/textSearch/index.svelte @@ -84,6 +84,9 @@ dialog: { isOpen: true, content: RemoveWishlistDialog, additionalData: gameToRemove } })); } + + // TODO: Keep all Pagination Values on back and forth browser + // TODO: Add cache for certain number of pages so back and forth doesn't request data again
({ ...n, loading: true })); return async ({ result }) => { boredState.update((n) => ({ ...n, loading: false })); - console.log(result); // `result` is an `ActionResult` object if (result.type === 'error') { toast.send('Error!', { duration: 3000, type: ToastType.ERROR, dismissible: true }); @@ -102,9 +104,8 @@ } else if (result.type === 'success') { gameStore.removeAll(); gameStore.addAll(result?.data?.games); - console.log(`Frontend result search enhance: ${JSON.stringify(result)}`); totalItems = result?.data?.totalCount; - toast.send('Sucess!', { duration: 3000, type: ToastType.INFO, dismissible: true }); + // toast.send('Sucess!', { duration: 3000, type: ToastType.INFO, dismissible: true }); await applyAction(result); } else { await applyAction(result); @@ -245,15 +246,20 @@ .games-list { display: grid; - grid-template-columns: repeat(3, minmax(200px, 1fr)); + --listColumns: 4; + grid-template-columns: repeat(var(--listColumns), minmax(200px, 1fr)); gap: 2rem; + @media (max-width: 1200px) { + --listColumns: 3; + } + @media (max-width: 800px) { - grid-template-columns: 1fr 1fr; + --listColumns: 2; } @media (max-width: 650px) { - grid-template-columns: 1fr; + --listColumns: 1; } } diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index a905a54..51744fd 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -1,30 +1,11 @@ @@ -81,53 +20,18 @@

Search Boardgames!

-

- Input your requirements to search for board games that match your criteria. -

- { - gameStore.removeAll(); - data.append('limit', pageSize.toString()); - data.append('skip', Math.floor(page * pageSize).toString()); - boredState.update((n) => ({ ...n, loading: true })); - return async ({ result }) => { - boredState.update((n) => ({ ...n, loading: false })); - console.log('result main page search', result); - // `result` is an `ActionResult` object - if (result.type === 'success') { - console.log('In success'); - const resultGames = result?.data?.games; - if (resultGames?.length <= 0) { - toast.send('No results found 😿', { - duration: 3000, - type: ToastType.ERROR, - dismissible: true - }); - } - gameStore.addAll(resultGames); - totalItems = result?.data?.totalCount; - console.log(`Frontend base page: ${JSON.stringify(result)}`); - await applyAction(result); - } else { - console.log('Invalid'); - await applyAction(result); - } - }; - }} - > - -
+

+ Input your requirements to search for board games that match your criteria. +

Or pick a random game!

+