h4ckx0r/CRUDAngular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

SPA deshabilitado, uso de observables, uso de interceptor, bucle arreglado

Browse Source
This commit is contained in:
Natanael Gómez Ortiz
2025-04-07 23:23:19 +02:00
parent 3c8dac059f
commit 4b63cdced2
16 changed files with 430 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
angular.json
View File

@@ -29,12 +29,7 @@
"styles": [
"src/styles.css"
],
"scripts": [],
"server": "src/main.server.ts",
"prerender": true,
"ssr": {
"entry": "src/server.ts"
}
"scripts": []
},
"configurations": {
"production": {

102
package-lock.json generated
View File

@@ -14,14 +14,12 @@
"@angular/forms": "^19.2.0",
"@angular/platform-browser": "^19.2.0",
"@angular/platform-browser-dynamic": "^19.2.0",
"@angular/platform-server": "^19.2.0",
"@angular/router": "^19.2.0",
"@angular/ssr": "^19.2.3",
"@ng-icons/bootstrap-icons": "^31.2.0",
"@ng-icons/core": "^31.2.0",
"@tailwindcss/postcss": "^4.0.14",
"daisyui": "^5.0.6",
"express": "^4.18.2",
"js-md5": "^0.8.3",
"postcss": "^8.5.3",
"rxjs": "~7.8.0",
"tailwindcss": "^4.0.14",
@@ -32,9 +30,7 @@
"@angular-devkit/build-angular": "^19.2.3",
"@angular/cli": "^19.2.3",
"@angular/compiler-cli": "^19.2.0",
"@types/express": "^4.17.17",
"@types/jasmine": "~5.1.0",
"@types/node": "^18.18.0",
"jasmine-core": "~5.6.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
@@ -741,7 +737,10 @@
"version": "19.2.2",
"resolved": "https://registry.npmjs.org/@angular/platform-server/-/platform-server-19.2.2.tgz",
"integrity": "sha512-CMhgOdyT2OWGHokTKAn5jQHATeE3JHA/OYo55FRcLbTB39YRGFUBKcZCg7Vy4kMja45nTp0D3oHyiTeyoopRyQ==",
"dev": true,
"license": "MIT",
"optional": true,
"peer": true,
"dependencies": {
"tslib": "^2.3.0",
"xhr2": "^0.2.0"
@@ -779,7 +778,10 @@
"version": "19.2.3",
"resolved": "https://registry.npmjs.org/@angular/ssr/-/ssr-19.2.3.tgz",
"integrity": "sha512-pv6XaFpFwlkgojDSppDriRLxEoUM/JKCnHu/UlZq0pDYZ55sC0YeyGkq2AbdorKFJpISwc3U3ZQbXiLussvxew==",
"dev": true,
"license": "MIT",
"optional": true,
"peer": true,
"dependencies": {
"tslib": "^2.3.0"
},
@@ -5703,6 +5705,7 @@
"version": "1.3.8",
"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
"integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
"dev": true,
"license": "MIT",
"dependencies": {
"mime-types": "~2.1.34",
@@ -5918,6 +5921,7 @@
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
"integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
"dev": true,
"license": "MIT"
},
"node_modules/autoprefixer": {
@@ -6132,6 +6136,7 @@
"version": "1.20.3",
"resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.3.tgz",
"integrity": "sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==",
"dev": true,
"license": "MIT",
"dependencies": {
"bytes": "3.1.2",
@@ -6156,6 +6161,7 @@
"version": "2.6.9",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
"dev": true,
"license": "MIT",
"dependencies": {
"ms": "2.0.0"
@@ -6165,6 +6171,7 @@
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
"dev": true,
"license": "MIT"
},
"node_modules/bonjour-service": {
@@ -6294,6 +6301,7 @@
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
"integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.8"
@@ -6435,6 +6443,7 @@
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
"integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"es-errors": "^1.3.0",
@@ -6448,6 +6457,7 @@
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
"integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
"dev": true,
"license": "MIT",
"dependencies": {
"call-bind-apply-helpers": "^1.0.2",
@@ -6939,6 +6949,7 @@
"version": "0.5.4",
"resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
"integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"safe-buffer": "5.2.1"
@@ -6951,6 +6962,7 @@
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
"integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.6"
@@ -6967,6 +6979,7 @@
"version": "0.7.1",
"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.7.1.tgz",
"integrity": "sha512-6DnInpx7SJ2AK3+CTUE/ZM0vWTUboZCegxhC2xiIydHR9jNuTAASBrfEpHhiGOZw/nX51bHt6YQl8jsGo4y/0w==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.6"
@@ -6976,6 +6989,7 @@
"version": "1.0.6",
"resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
"integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==",
"dev": true,
"license": "MIT"
},
"node_modules/copy-anything": {
@@ -7292,6 +7306,7 @@
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
"integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.8"
@@ -7301,6 +7316,7 @@
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
"integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.8",
@@ -7419,6 +7435,7 @@
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
"integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
"dev": true,
"license": "MIT",
"dependencies": {
"call-bind-apply-helpers": "^1.0.1",
@@ -7440,6 +7457,7 @@
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
"integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==",
"dev": true,
"license": "MIT"
},
"node_modules/electron-to-chromium": {
@@ -7470,6 +7488,7 @@
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
"integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.8"
@@ -7659,6 +7678,7 @@
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
"integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.4"
@@ -7668,6 +7688,7 @@
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
"integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.4"
@@ -7684,6 +7705,7 @@
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
"integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
"dev": true,
"license": "MIT",
"dependencies": {
"es-errors": "^1.3.0"
@@ -7760,6 +7782,7 @@
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
"integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==",
"dev": true,
"license": "MIT"
},
"node_modules/eslint-scope": {
@@ -7823,6 +7846,7 @@
"version": "1.8.1",
"resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
"integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.6"
@@ -7856,6 +7880,7 @@
"version": "4.21.2",
"resolved": "https://registry.npmjs.org/express/-/express-4.21.2.tgz",
"integrity": "sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==",
"dev": true,
"license": "MIT",
"dependencies": {
"accepts": "~1.3.8",
@@ -7902,6 +7927,7 @@
"version": "2.6.9",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
"dev": true,
"license": "MIT",
"dependencies": {
"ms": "2.0.0"
@@ -7911,6 +7937,7 @@
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
"dev": true,
"license": "MIT"
},
"node_modules/extend": {
@@ -8029,6 +8056,7 @@
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.3.1.tgz",
"integrity": "sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"debug": "2.6.9",
@@ -8047,6 +8075,7 @@
"version": "2.6.9",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
"dev": true,
"license": "MIT",
"dependencies": {
"ms": "2.0.0"
@@ -8056,6 +8085,7 @@
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
"dev": true,
"license": "MIT"
},
"node_modules/find-cache-dir": {
@@ -8151,6 +8181,7 @@
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
"integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.6"
@@ -8174,6 +8205,7 @@
"version": "0.5.2",
"resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
"integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.6"
@@ -8233,6 +8265,7 @@
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
"dev": true,
"license": "MIT",
"funding": {
"url": "https://github.com/sponsors/ljharb"
@@ -8275,6 +8308,7 @@
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
"integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"call-bind-apply-helpers": "^1.0.2",
@@ -8299,6 +8333,7 @@
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
"integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
"dev": true,
"license": "MIT",
"dependencies": {
"dunder-proto": "^1.0.1",
@@ -8385,6 +8420,7 @@
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
"integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.4"
@@ -8420,6 +8456,7 @@
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
"integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.4"
@@ -8448,6 +8485,7 @@
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
"integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"function-bind": "^1.1.2"
@@ -8567,6 +8605,7 @@
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
"integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"depd": "2.0.0",
@@ -8661,6 +8700,7 @@
"version": "0.4.24",
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
"integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
"dev": true,
"license": "MIT",
"dependencies": {
"safer-buffer": ">= 2.1.2 < 3"
@@ -8816,6 +8856,7 @@
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
"dev": true,
"license": "ISC"
},
"node_modules/ini": {
@@ -8846,6 +8887,7 @@
"version": "1.9.1",
"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
"integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.10"
@@ -9251,6 +9293,12 @@
"jiti": "bin/jiti.js"
}
},
"node_modules/js-md5": {
"version": "0.8.3",
"resolved": "https://registry.npmjs.org/js-md5/-/js-md5-0.8.3.tgz",
"integrity": "sha512-qR0HB5uP6wCuRMrWPTrkMaev7MJZwJuuw4fnwAzRgP4J4/F8RwtodOKpGp4XpqsLBFzzgqIO42efFAyz2Et6KQ==",
"license": "MIT"
},
"node_modules/js-tokens": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -10404,6 +10452,7 @@
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
"integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.4"
@@ -10413,6 +10462,7 @@
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
"integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.6"
@@ -10442,6 +10492,7 @@
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.3.tgz",
"integrity": "sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==",
"dev": true,
"license": "MIT",
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
@@ -10468,6 +10519,7 @@
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
"integrity": "sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.6"
@@ -10517,6 +10569,7 @@
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.6"
@@ -10526,6 +10579,7 @@
"version": "2.1.35",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"dev": true,
"license": "MIT",
"dependencies": {
"mime-db": "1.52.0"
@@ -10852,6 +10906,7 @@
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
"dev": true,
"license": "MIT"
},
"node_modules/msgpackr": {
@@ -10966,6 +11021,7 @@
"version": "0.6.3",
"resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
"integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.6"
@@ -11335,6 +11391,7 @@
"version": "1.13.4",
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
"integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.4"
@@ -11354,6 +11411,7 @@
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
"integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
"dev": true,
"license": "MIT",
"dependencies": {
"ee-first": "1.1.1"
@@ -11738,6 +11796,7 @@
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
"integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.8"
@@ -11808,6 +11867,7 @@
"version": "0.1.12",
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.12.tgz",
"integrity": "sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==",
"dev": true,
"license": "MIT"
},
"node_modules/path-type": {
@@ -12065,6 +12125,7 @@
"version": "2.0.7",
"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
"integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
"dev": true,
"license": "MIT",
"dependencies": {
"forwarded": "0.2.0",
@@ -12103,6 +12164,7 @@
"version": "6.13.0",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz",
"integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==",
"dev": true,
"license": "BSD-3-Clause",
"dependencies": {
"side-channel": "^1.0.6"
@@ -12149,6 +12211,7 @@
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz",
"integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.6"
@@ -12158,6 +12221,7 @@
"version": "2.5.2",
"resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.2.tgz",
"integrity": "sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==",
"dev": true,
"license": "MIT",
"dependencies": {
"bytes": "3.1.2",
@@ -12551,6 +12615,7 @@
"version": "5.2.1",
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
"integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
"dev": true,
"funding": [
{
"type": "github",
@@ -12589,6 +12654,7 @@
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
"dev": true,
"license": "MIT"
},
"node_modules/sass": {
@@ -12737,6 +12803,7 @@
"version": "0.19.0",
"resolved": "https://registry.npmjs.org/send/-/send-0.19.0.tgz",
"integrity": "sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==",
"dev": true,
"license": "MIT",
"dependencies": {
"debug": "2.6.9",
@@ -12761,6 +12828,7 @@
"version": "2.6.9",
"resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
"integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
"dev": true,
"license": "MIT",
"dependencies": {
"ms": "2.0.0"
@@ -12770,12 +12838,14 @@
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
"dev": true,
"license": "MIT"
},
"node_modules/send/node_modules/encodeurl": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
"integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.8"
@@ -12785,6 +12855,7 @@
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
"integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
"dev": true,
"license": "MIT",
"bin": {
"mime": "cli.js"
@@ -12893,6 +12964,7 @@
"version": "1.16.2",
"resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.16.2.tgz",
"integrity": "sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==",
"dev": true,
"license": "MIT",
"dependencies": {
"encodeurl": "~2.0.0",
@@ -12908,6 +12980,7 @@
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
"integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
"dev": true,
"license": "ISC"
},
"node_modules/shallow-clone": {
@@ -12963,6 +13036,7 @@
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
"integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
"dev": true,
"license": "MIT",
"dependencies": {
"es-errors": "^1.3.0",
@@ -12982,6 +13056,7 @@
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
"integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
"dev": true,
"license": "MIT",
"dependencies": {
"es-errors": "^1.3.0",
@@ -12998,6 +13073,7 @@
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
"integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
"dev": true,
"license": "MIT",
"dependencies": {
"call-bound": "^1.0.2",
@@ -13016,6 +13092,7 @@
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
"integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
"dev": true,
"license": "MIT",
"dependencies": {
"call-bound": "^1.0.2",
@@ -13422,6 +13499,7 @@
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
"integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.8"
@@ -13822,6 +13900,7 @@
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
"integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.6"
@@ -13892,6 +13971,7 @@
"version": "1.6.18",
"resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
"integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
"dev": true,
"license": "MIT",
"dependencies": {
"media-typer": "0.3.0",
@@ -14053,6 +14133,7 @@
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
"integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.8"
@@ -14100,6 +14181,7 @@
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
"integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.4.0"
@@ -14140,15 +14222,16 @@
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
"integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.8"
}
},
"node_modules/vite": {
"version": "6.2.2",
"resolved": "https://registry.npmjs.org/vite/-/vite-6.2.2.tgz",
"integrity": "sha512-yW7PeMM+LkDzc7CgJuRLMW2Jz0FxMOsVJ8Lv3gpgW9WLcb9cTW+121UEr1hvmfR7w3SegR5ItvYyzVz1vxNJgQ==",
"version": "6.2.4",
"resolved": "https://registry.npmjs.org/vite/-/vite-6.2.4.tgz",
"integrity": "sha512-veHMSew8CcRzhL5o8ONjy8gkfmFJAd5Ac16oxBUjlwgX3Gq2Wqr+qNC3TjPIpy7TPV/KporLga5GT9HqdrCizw==",
"dev": true,
"license": "MIT",
"peer": true,
@@ -14801,7 +14884,10 @@
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/xhr2/-/xhr2-0.2.1.tgz",
"integrity": "sha512-sID0rrVCqkVNUn8t6xuv9+6FViXjUVXq8H5rWOH2rz9fDNQEd4g0EA2XlcEdJXRz5BMEn4O1pJFdT+z4YHhoWw==",
"dev": true,
"license": "MIT",
"optional": true,
"peer": true,
"engines": {
"node": ">= 6"
}

6
package.json
View File

@@ -17,14 +17,12 @@
"@angular/forms": "^19.2.0",
"@angular/platform-browser": "^19.2.0",
"@angular/platform-browser-dynamic": "^19.2.0",
"@angular/platform-server": "^19.2.0",
"@angular/router": "^19.2.0",
"@angular/ssr": "^19.2.3",
"@ng-icons/bootstrap-icons": "^31.2.0",
"@ng-icons/core": "^31.2.0",
"@tailwindcss/postcss": "^4.0.14",
"daisyui": "^5.0.6",
"express": "^4.18.2",
"js-md5": "^0.8.3",
"postcss": "^8.5.3",
"rxjs": "~7.8.0",
"tailwindcss": "^4.0.14",
@@ -35,9 +33,7 @@
"@angular-devkit/build-angular": "^19.2.3",
"@angular/cli": "^19.2.3",
"@angular/compiler-cli": "^19.2.0",
"@types/express": "^4.17.17",
"@types/jasmine": "~5.1.0",
"@types/node": "^18.18.0",
"jasmine-core": "~5.6.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",

11
src/app/app.config.server.ts
View File

@@ -1,11 +0,0 @@
import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
import { provideServerRendering } from '@angular/platform-server';
import { appConfig } from './app.config';
const serverConfig: ApplicationConfig = {
providers: [
provideServerRendering(),
]
};
export const config = mergeApplicationConfig(appConfig, serverConfig);

7
src/app/app.config.ts
View File

@@ -2,8 +2,11 @@ import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';
import { routes } from './app.routes';
import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { jwtInterceptorInterceptor } from './interceptors/jwt-interceptor.interceptor';
export const appConfig: ApplicationConfig = {
providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), provideClientHydration(withEventReplay())]
providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes),
provideHttpClient(withInterceptors([jwtInterceptorInterceptor]))
]
};

143
src/app/components/table-books/table-books.component.html
View File

@@ -1 +1,142 @@
<p>table-books works!</p>
<div class="flex flex-col gap-2 items-center">
<div class="overflow-x-auto rounded-box border border-base-content/5 w-full">
<table class="table">
<thead>
<tr>
<th class="w-full align-center">
<div class="flex gap-2 items-center">
Título
<button class="btn btn-ghost btn-square" (click)="ordenTituloAscendente = !ordenTituloAscendente; recargar();" *ngIf="ordenTituloAscendente">
<ng-icon name="bootstrapArrowDown" size="20"></ng-icon>
</button>
<button class="btn btn-ghost btn-square" (click)="ordenTituloAscendente = !ordenTituloAscendente; recargar();" *ngIf="!ordenTituloAscendente">
<ng-icon name="bootstrapArrowUp" size="20"></ng-icon>
</button>
</div>
</th>
<th class="w-full align-center">
<div class="flex gap-2 items-center">
Autor
<button class="btn btn-ghost btn-square" (click)="ordenAutorAscendente = !ordenAutorAscendente; recargar();" *ngIf="ordenAutorAscendente">
<ng-icon name="bootstrapArrowDown" size="20"></ng-icon>
</button>
<button class="btn btn-ghost btn-square" (click)="ordenAutorAscendente = !ordenAutorAscendente; recargar();" *ngIf="!ordenAutorAscendente">
<ng-icon name="bootstrapArrowUp" size="20"></ng-icon>
</button>
</div>
</th>
<th class="w-full align-center">
<div class="flex gap-2 items-center">
Género
<button class="btn btn-ghost btn-square" (click)="ordenGeneroAscendente = !ordenGeneroAscendente; recargar();" *ngIf="ordenGeneroAscendente">
<ng-icon name="bootstrapArrowDown" size="20"></ng-icon>
</button>
<button class="btn btn-ghost btn-square" (click)="ordenGeneroAscendente = !ordenGeneroAscendente; recargar();" *ngIf="!ordenGeneroAscendente">
<ng-icon name="bootstrapArrowUp" size="20"></ng-icon>
</button>
</div>
</th>
<th class="w-full text-end flex justify-between">
<button class="btn btn-info btn-circle" (click)="recargar()">
<ng-icon name="bootstrapArrowRepeat" size="24"></ng-icon>
</button>
<button class="btn btn-info btn-square" onclick="modalNuevoLibro.showModal()" (click)="vaciarLibro()">
<ng-icon name="bootstrapFileEarmarkPlus" size="24"></ng-icon>
</button>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let book of books" class="hover:bg-base-300">
<td class="w-full">{{book.titulo}}</td>
<td class="w-full min-w-32">{{book.autor}}</td>
<td class="w-full min-w-32">{{book.genero.nombre}}</td>
<td class="w-fit flex gap-2">
<button class="btn btn-primary" onclick="modalEditarLibro.showModal()"
(click)="libroEditando = book">Editar</button>
<button class="btn btn-error" onclick="modalBorrarLibro.showModal()"
(click)="libroEditando = book">Eliminar</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="join">
<button class="join-item btn btn-square" (click)="paginaActual = paginaActual - 1; cargarPagina();" [disabled]="paginaActual === 1"><ng-icon name="bootstrapCaretLeftFill" size="24"></ng-icon></button>
<input *ngFor="let i of paginas" [value]="i" [checked]="i === paginaActual"
(click)="paginaActual = i; cargarPagina();" class="join-item btn btn-square" type="radio" name="paginas"
[attr.aria-label]="i" />
<button class="join-item btn btn-square" (click)="paginaActual = paginaActual + 1; cargarPagina();" [disabled]="paginaActual === consultaActual.totalPages"><ng-icon name="bootstrapCaretRightFill" size="24"></ng-icon></button>
</div>
</div>
<dialog id="modalEditarLibro" class="modal overflow-x-hidden">
<div class="modal-box">
<h3 class="text-lg font-bold">Edición de un género</h3>
<fieldset class="fieldset">
<legend class="fieldset-legend">Nombre del género</legend>
<input type="text" class="input w-full" [(ngModel)]="libroEditando.titulo" />
</fieldset>
<div class="modal-action">
<form method="dialog">
<button class="btn btn-primary" (click)="updateBook()">Guardar</button>
<button class="btn ms-2" (click)="recargar()">Cancelar</button>
</form>
</div>
</div>
</dialog>
<dialog id="modalBorrarLibro" class="modal overflow-x-hidden">
<div class="modal-box">
<h3 class="text-lg font-bold">¿Está seguro de que quiere borrar el género?</h3>
<p class="text-base-content">Se borrará permanentemente el género {{libroEditando.titulo}}</p>
<div class="modal-action">
<form method="dialog" class="flex justify-between w-full">
<button class="btn btn-error" (click)="deleteBook()">Borrar</button>
<button class="btn ms-2" (click)="recargar()">Cancelar</button>
</form>
</div>
</div>
</dialog>
<dialog id="modalNuevoLibro" class="modal overflow-x-hidden">
<div class="modal-box">
<h3 class="text-lg font-bold">Nuevo género</h3>
<fieldset class="fieldset">
<legend class="fieldset-legend">Nombre del género</legend>
<input type="text" class="input w-full" [(ngModel)]="libroEditando.titulo" />
</fieldset>
<div class="modal-action">
<form method="dialog">
<button class="btn btn-primary" (click)="createBook()">Guardar</button>
<button class="btn ms-2" (click)="recargar()">Cancelar</button>
</form>
</div>
</div>
</dialog>
<dialog id="modalLogin" class="modal overflow-x-hidden">
<div class="modal-box">
<h3 class="text-lg font-bold">Para acceder a los libros, es necesario iniciar sesión</h3>
<fieldset class="fieldset">
<legend class="fieldset-legend">Nombre de usuario</legend>
<input type="text" class="input w-full" placeholder="admin" [(ngModel)]="username" />
</fieldset>
<fieldset class="fieldset">
<legend class="fieldset-legend">Contraseña</legend>
<input type="password" class="input w-full" placeholder="1234" [(ngModel)]="password" />
</fieldset>
<div class="modal-action">
<form method="dialog">
<button class="btn btn-primary" (click)="iniciarSesion()">Iniciar sesión</button>
<button class="btn ms-2" (click)="this.cambiarTabla.emit('genders');">Ir a Géneros</button>
</form>
</div>
</div>
</dialog>

84
src/app/components/table-books/table-books.component.ts
View File

@@ -1,11 +1,89 @@
import { Component } from '@angular/core';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Book } from '../../interfaces/book';
import { ResponseBooks } from '../../interfaces/responseBooks';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { bootstrapArrowRepeat, bootstrapFileEarmarkPlus, bootstrapArrowDown, bootstrapArrowUp, bootstrapCaretLeftFill, bootstrapCaretRightFill } from '@ng-icons/bootstrap-icons';
import { ApiService } from '../../services/api.service';
import { NgIf, NgFor } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Gender } from '../../interfaces/gender';
@Component({
selector: 'table-books',
imports: [],
imports: [NgIcon, NgIf, NgFor, FormsModule],
providers: [provideIcons({ bootstrapArrowRepeat, bootstrapFileEarmarkPlus, bootstrapArrowDown, bootstrapArrowUp, bootstrapCaretLeftFill, bootstrapCaretRightFill })],
templateUrl: './table-books.component.html',
styleUrl: './table-books.component.css'
})
export class TableBooksComponent {
export class TableBooksComponent {
books: Book[] = [];
libroEditando: Book = {} as Book;
consultaActual: ResponseBooks = {} as ResponseBooks;
paginaActual: number = 1;
paginas: number[] = [];
ordenTituloAscendente: boolean = true;
ordenAutorAscendente: boolean = true;
ordenGeneroAscendente: boolean = true;
@Input() set eventoFiltro(value: string) {
this.recargar(value);
}
@Output() cambiarTabla = new EventEmitter<string>();
username: string = '';
password: string = '';
constructor(private apiService: ApiService) { }
async recargar(textoParaFiltrar: string = '') {
console.log(localStorage.getItem('jwt'))
if (localStorage.getItem('jwt') === null) {
let elem: HTMLDialogElement = document.getElementById("modalLogin") as HTMLDialogElement;
elem.show();
} else {
this.apiService.getBooks(this.paginaActual - 1, 10, 'titulo', this.ordenTituloAscendente ? 'asc' : 'desc', 'titulo', textoParaFiltrar).subscribe(data => {
this.consultaActual = data;
this.books = this.consultaActual.content;
this.cargarPaginacion();
});
}
}
async iniciarSesion() {
this.apiService.login(this.username, this.password).subscribe((data) => {
localStorage.setItem('jwt', data.jwt);
this.recargar();
});
}
async cargarPaginacion() {
this.paginas = [];
for (let i = 1; i <= this.consultaActual.totalPages; i++) {
this.paginas.push(i);
}
}
async cargarPagina() {
this.recargar();
}
vaciarLibro() {
this.libroEditando = new Book(0, '', '', new Gender(0, ''));
}
async createBook() {
//await this.apiService.createBook(this.libroEditando);
this.recargar();
}
async updateBook() {
//await this.apiService.updateBook(this.libroEditando);
this.recargar();
}
async deleteBook() {
//await this.apiService.deleteBook(this.libroEditando);
this.recargar();
}
}

27
src/app/components/table-genders/table-genders.component.ts
View File

@@ -1,4 +1,4 @@
import { Component, Input } from '@angular/core';
import { Component, EventEmitter, Input } from '@angular/core';
import { NgFor, NgIf } from '@angular/common';
import { ApiService } from '../../services/api.service';
import { Gender } from '../../interfaces/gender';
@@ -22,10 +22,8 @@ export class TableGendersComponent {
paginas: number[] = [];
generoEditando: Gender = {} as Gender;
ordenAscendente: boolean = true;
@Input() filtro: string = '';
ngOnChanges() {
this.recargar();
@Input() set eventoFiltro(value: string) {
this.recargar(value);
}
constructor(private apiService: ApiService) { }
@@ -33,10 +31,12 @@ export class TableGendersComponent {
this.recargar();
}
async recargar() {
this.consultaActual = await this.apiService.getGenders(this.paginaActual - 1, 10, 'nombre', this.ordenAscendente ? 'asc' : 'desc', this.filtro);
this.genders = this.consultaActual.content;
this.cargarPaginacion();
async recargar(textoParaFiltrar : string = '') {
this.apiService.getGenders(this.paginaActual - 1, 10, 'nombre', this.ordenAscendente ? 'asc' : 'desc', textoParaFiltrar).subscribe(data => {
this.consultaActual = data;
this.genders = this.consultaActual.content;
this.cargarPaginacion();
});
}
async cargarPaginacion() {
@@ -55,17 +55,14 @@ export class TableGendersComponent {
}
async createGender() {
await this.apiService.createGender(this.generoEditando);
this.recargar();
this.apiService.createGender(this.generoEditando).subscribe(() => this.recargar());
}
async updateGender() {
await this.apiService.updateGender(this.generoEditando);
this.recargar();
this.apiService.updateGender(this.generoEditando).subscribe(() => this.recargar());
}
async deleteGender() {
await this.apiService.deleteGender(this.generoEditando);
this.recargar();
this.apiService.deleteGender(this.generoEditando).subscribe(() => this.recargar());
}
}

17
src/app/interceptors/jwt-interceptor.interceptor.spec.ts Normal file
View File

@@ -0,0 +1,17 @@
import { TestBed } from '@angular/core/testing';
import { HttpInterceptorFn } from '@angular/common/http';
import { jwtInterceptorInterceptor } from './jwt-interceptor.interceptor';
describe('jwtInterceptorInterceptor', () => {
const interceptor: HttpInterceptorFn = (req, next) =>
TestBed.runInInjectionContext(() => jwtInterceptorInterceptor(req, next));
beforeEach(() => {
TestBed.configureTestingModule({});
});
it('should be created', () => {
expect(interceptor).toBeTruthy();
});
});

11
src/app/interceptors/jwt-interceptor.interceptor.ts Normal file
View File

@@ -0,0 +1,11 @@
import { HttpInterceptorFn } from '@angular/common/http';
export const jwtInterceptorInterceptor: HttpInterceptorFn = (req, next) => {
const jwt = localStorage.getItem('jwt');
if (jwt) {
req = req.clone({
headers: req.headers.set('Authorization', jwt)
});
}
return next(req);
};

4
src/app/pages/home-page/home-page.component.html
View File

@@ -14,7 +14,7 @@
Géneros
</label>
<div class="tab-content bg-base-100 border-base-300 p-6">
<table-genders [filtro]="textoFiltro"></table-genders>
<table-genders [eventoFiltro]="tablaSeleccionada == 'genders' ? textoFiltro : ''"></table-genders>
</div>
<label class="tab">
@@ -28,7 +28,7 @@
Libros
</label>
<div class="tab-content bg-base-100 border-base-300 p-6">
<table-books></table-books>
<table-books [eventoFiltro]="tablaSeleccionada == 'books' ? textoFiltro : ''" (cambiarTabla)="cambiarTabla($event)"></table-books>
</div>
</div>
</div>

8
src/app/pages/home-page/home-page.component.ts
View File

@@ -1,4 +1,4 @@
import { Component } from '@angular/core';
import { Component, EventEmitter } from '@angular/core';
import { TableGendersComponent } from '../../components/table-genders/table-genders.component';
import { TableBooksComponent } from '../../components/table-books/table-books.component';
import { FilterComponent } from '../../components/filter/filter.component';
@@ -23,4 +23,10 @@ export class HomePageComponent {
tablaSeleccionada: string = 'genders';
textoFiltro: string = '';
constructor() { }
cambiarTabla(tabla: string) {
this.tablaSeleccionada = tabla;
}
}

91
src/app/services/api.service.ts
View File

@@ -1,8 +1,12 @@
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, tap } from 'rxjs';
import { Gender } from '../interfaces/gender';
import { ResponseGenders } from '../interfaces/responseGenders';
import { ResponseBooks } from '../interfaces/responseBooks';
import { Book } from '../interfaces/book';
import { md5 } from 'js-md5';
@Injectable({
providedIn: 'root'
@@ -10,52 +14,67 @@ import { Book } from '../interfaces/book';
export class ApiService {
private apiUrl: string = 'http://localhost:8081/v1';
async getGenders(page: number = 0, size: number = 10, fieldOrder: 'id' | 'nombre' | null = null, orderType: 'asc' | 'desc' = 'asc', textoFiltro: string = '') {
const listaGeneros: Gender[] = [];
let respuesta: ResponseGenders = {} as ResponseGenders;
constructor(private http: HttpClient) { }
await fetch(`${this.apiUrl}/genders?page=${page}&size=${size}${fieldOrder ? '&fieldOrder=' + fieldOrder : ''}&orderType=${orderType}&nombre=${textoFiltro}`)
.then(response => response.json())
.then(data => respuesta = data);
getGenders(page: number = 0, size: number = 10, fieldOrder: 'id' | 'nombre' | null = null, orderType: 'asc' | 'desc' = 'asc', textoFiltro: string = ''): Observable<ResponseGenders> {
return this.http.get<ResponseGenders>(`${this.apiUrl}/genders?page=${page}&size=${size}${fieldOrder ? '&fieldOrder=' + fieldOrder : ''}&orderType=${orderType}&nombre=${textoFiltro}`);
}
createGender(gender: Gender): Observable<Gender> {
return this.http.post<Gender>(`${this.apiUrl}/genders/`, gender);
}
updateGender(gender: Gender): Observable<Gender> {
return this.http.put<Gender>(`${this.apiUrl}/genders/${gender.id}`, gender);
}
deleteGender(gender: Gender): Observable<Gender> {
return this.http.delete<Gender>(`${this.apiUrl}/genders/${gender.id}`);
}
login(username: string, password: string): Observable<any> {
return this.http.post(`${this.apiUrl}/users/authenticate/`, { username, encPassword: md5(password) });
}
getBooks(page: number = 0, size: number = 10, fieldOrder: 'id' | 'titulo' | 'autor' | null = null, orderType: 'asc' | 'desc' = 'asc', filterField: 'titulo' | 'autor' = 'titulo', textoFiltro: string = ''): Observable<ResponseBooks> {
return this.http.get<ResponseBooks>(`${this.apiUrl}/books?page=${page}&size=${size}${fieldOrder ? '&fieldOrder=' + fieldOrder : ''}&orderType=${orderType}&filterField=${filterField}&filterValue=${textoFiltro}`);
}
async getBooksOld(page: number = 0, size: number = 10, fieldOrder: 'id' | 'titulo' | 'autor' | null = null, orderType: 'asc' | 'desc' = 'asc', filterField: 'titulo' | 'autor' = 'titulo', textoFiltro: string = '') {
const listaLibros: Book[] = [];
let respuesta: ResponseBooks = {} as ResponseBooks;
await fetch(`${this.apiUrl}/books?page=${page}&size=${size}${fieldOrder ? '&fieldOrder=' + fieldOrder : ''}&orderType=${orderType}&filterField=${filterField}&filterValue=${textoFiltro}`, {
method: 'GET',
headers: {
'Accept': 'application/json'
}
})
.then(response => response.json())
.then(data => {
respuesta = data;
});
respuesta.content.forEach((element: any) => {
listaGeneros.push(new Gender(element.id, element.nombre));
listaLibros.push(new Book(element.id, element.titulo, element.autor, new Gender(element.genero.id, element.genero.nombre)));
});
respuesta.content = listaGeneros;
respuesta.content = listaLibros;
return respuesta;
}
async createGender(gender: Gender) {
await fetch(`${this.apiUrl}/genders/`, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(gender)
});
}
async updateGender(gender: Gender) {
await fetch(`${this.apiUrl}/genders/${gender.id}`, {
method: 'PUT',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(gender)
});
}
async deleteGender(gender: Gender) {
await fetch(`${this.apiUrl}/genders/${gender.id}`, {
method: 'DELETE'
});
}
constructor() { }
}

7
src/main.server.ts
View File

@@ -1,7 +0,0 @@
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { config } from './app/app.config.server';
const bootstrap = () => bootstrapApplication(AppComponent, config);
export default bootstrap;

67
src/server.ts
View File

@@ -1,67 +0,0 @@
import { APP_BASE_HREF } from '@angular/common';
import { CommonEngine, isMainModule } from '@angular/ssr/node';
import express from 'express';
import { dirname, join, resolve } from 'node:path';
import { fileURLToPath } from 'node:url';
import bootstrap from './main.server';
const serverDistFolder = dirname(fileURLToPath(import.meta.url));
const browserDistFolder = resolve(serverDistFolder, '../browser');
const indexHtml = join(serverDistFolder, 'index.server.html');
const app = express();
const commonEngine = new CommonEngine();
/**
* Example Express Rest API endpoints can be defined here.
* Uncomment and define endpoints as necessary.
*
* Example:
* ```ts
* app.get('/api/**', (req, res) => {
* // Handle API request
* });
* ```
*/
/**
* Serve static files from /browser
*/
app.get(
'**',
express.static(browserDistFolder, {
maxAge: '1y',
index: 'index.html'
}),
);
/**
* Handle all other requests by rendering the Angular application.
*/
app.get('**', (req, res, next) => {
const { protocol, originalUrl, baseUrl, headers } = req;
commonEngine
.render({
bootstrap,
documentFilePath: indexHtml,
url: `${protocol}://${headers.host}${originalUrl}`,
publicPath: browserDistFolder,
providers: [{ provide: APP_BASE_HREF, useValue: baseUrl }],
})
.then((html) => res.send(html))
.catch((err) => next(err));
});
/**
* Start the server if this module is the main entry point.
* The server listens on the port defined by the `PORT` environment variable, or defaults to 4000.
*/
if (isMainModule(import.meta.url)) {
const port = process.env['PORT'] || 4000;
app.listen(port, () => {
console.log(`Node Express server listening on http://localhost:${port}`);
});
}
export default app;

8
tsconfig.app.json
View File

@@ -4,14 +4,10 @@
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": [
"node"
]
"types": []
},
"files": [
"src/main.ts",
"src/main.server.ts",
"src/server.ts"
"src/main.ts"
],
"include": [
"src/**/*.d.ts"