diff --git a/README.md b/README.md index e5c5427..eb05619 100644 --- a/README.md +++ b/README.md @@ -1,27 +1,72 @@ -# NgPeti +

Ejercicio

+Vamos usar la api de realWorld app +
    +
  1. + Usando la API de RealWorld hacer una nube de tags que me permita obtener los tags del sitio y al hacer click en uno de ellos me muestre los primeros 5 articulos completos de cada TAG. Mostrando titulo, descripcion body fecha de creacion y lista de tags asociada a ese articulo. +
    2. +
+

Ejercicio 2

+

+Con un usuario hardocdeado agregar un boton a un articulo del ejercicio anterior y hacer que le agregue un comentario ingresado en un textarea. tenemos que llamar el metodo login que nos va a devolver un objeto con un token. Ese token lo tenemos que agregar en un header del post para agregar el comentario con el siguiente formato

+
Authorization: Token [aca concatenado va el token obtenido]
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 9.1.1. +### Base endpoint -## Development server +API https://conduit.productionready.io/api/ -Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. -## Code scaffolding -Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`. +### Get Tags -## Build +`GET /api/tags` -Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build. +```JSON +{ + "tags": [ + "reactjs", + "angularjs" + ] +} +``` -## Running unit tests -Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). +### List Articles -## Running end-to-end tests +`GET /api/articles` -Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). +Returns most recent articles globally by default, provide `tag`, `author` or `favorited` query parameter to filter results -## Further help +Query Parameters: -To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md). +Filter by tag: + +`?tag=AngularJS` + + +### Get Article + +`GET /api/articles/:slug` + +### Single Article + +```JSON +{ + "article": { + "slug": "how-to-train-your-dragon", + "title": "How to train your dragon", + "description": "Ever wonder how?", + "body": "It takes a Jacobian", + "tagList": ["dragons", "training"], + "createdAt": "2016-02-18T03:22:56.637Z", + "updatedAt": "2016-02-18T03:48:35.824Z", + "favorited": false, + "favoritesCount": 0, + "author": { + "username": "jake", + "bio": "I work at statefarm", + "image": "https://i.stack.imgur.com/xHWG8.jpg", + "following": false + } + } +} +``` diff --git a/angular.json b/angular.json index 4deb648..e4b7f1e 100644 --- a/angular.json +++ b/angular.json @@ -123,6 +123,10 @@ } } } - }}, - "defaultProject": "ng-peti" -} + } + }, + "defaultProject": "ng-peti", + "cli": { + "analytics": false + } +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 512f702..b5d3a6a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -173,16 +173,29 @@ } }, "@angular-devkit/schematics": { - "version": "9.1.1", - "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-9.1.1.tgz", - "integrity": "sha512-6wx2HcvafHvEjEa1tjDzW2hXrOiSE8ALqJUArb3+NoO1BDM42aGcqyPo0ODzKtDk12CgSsFXdNKRpQ5AmpSPtw==", + "version": "9.1.9", + "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-9.1.9.tgz", + "integrity": "sha512-aKuMmS3wshOTl9+01jiB50ml09fRN1WfOOtoNqwvKTEi87DrT6Mn3l0eVQo8PJK/bIq/FBmPgsIl2nsETiBSxg==", "dev": true, "requires": { - "@angular-devkit/core": "9.1.1", + "@angular-devkit/core": "9.1.9", "ora": "4.0.3", "rxjs": "6.5.4" }, "dependencies": { + "@angular-devkit/core": { + "version": "9.1.9", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-9.1.9.tgz", + "integrity": "sha512-SWgBh4an/Vezjw2BZ5S+bKvuK5lH6gOtR8d5YjN9vxpJSZ0GimrGjfnLlWOkwWAsU8jfn4JzofECUHwX/7EW6Q==", + "dev": true, + "requires": { + "ajv": "6.12.0", + "fast-json-stable-stringify": "2.1.0", + "magic-string": "0.25.7", + "rxjs": "6.5.4", + "source-map": "0.7.3" + } + }, "rxjs": { "version": "6.5.4", "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.4.tgz", @@ -200,16 +213,16 @@ "integrity": "sha512-IvKv8sV0ymbzDEX2ZLW+F6nOTQqDYallHexuzRVT9txvNE8TNHyySvLcyC5dTmX9fj9LA72NZ6nFyhxq0LFvtQ==" }, "@angular/cli": { - "version": "9.1.1", - "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-9.1.1.tgz", - "integrity": "sha512-sjRAV4UF8M5v+2gw+EwCYSgciBZDc05AbNxQt+uUdxdfR1QU9hifWq8WDxfOR6jdDP5YqMtQsNaFNwrUyjJJoQ==", + "version": "9.1.9", + "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-9.1.9.tgz", + "integrity": "sha512-k8C0OY3oHoixd3buCgF8+VFe8YZGSGiprnbVMEF2WJHUUw87lPCu/d7dbID3AtVwdKdAB275rAt6IZEIzXInbw==", "dev": true, "requires": { - "@angular-devkit/architect": "0.901.1", - "@angular-devkit/core": "9.1.1", - "@angular-devkit/schematics": "9.1.1", - "@schematics/angular": "9.1.1", - "@schematics/update": "0.901.1", + "@angular-devkit/architect": "0.901.9", + "@angular-devkit/core": "9.1.9", + "@angular-devkit/schematics": "9.1.9", + "@schematics/angular": "9.1.9", + "@schematics/update": "0.901.9", "@yarnpkg/lockfile": "1.1.0", "ansi-colors": "4.1.1", "debug": "4.1.1", @@ -227,12 +240,44 @@ "uuid": "7.0.2" }, "dependencies": { + "@angular-devkit/architect": { + "version": "0.901.9", + "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.901.9.tgz", + "integrity": "sha512-Xokyh7bv4qICHpb5Xui1jPTi6ZZvzR5tbTIxT0DFWqw16TEkFgkNubQsW6mFSR3g3CXdySMfOwWExfa/rE1ggA==", + "dev": true, + "requires": { + "@angular-devkit/core": "9.1.9", + "rxjs": "6.5.4" + } + }, + "@angular-devkit/core": { + "version": "9.1.9", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-9.1.9.tgz", + "integrity": "sha512-SWgBh4an/Vezjw2BZ5S+bKvuK5lH6gOtR8d5YjN9vxpJSZ0GimrGjfnLlWOkwWAsU8jfn4JzofECUHwX/7EW6Q==", + "dev": true, + "requires": { + "ajv": "6.12.0", + "fast-json-stable-stringify": "2.1.0", + "magic-string": "0.25.7", + "rxjs": "6.5.4", + "source-map": "0.7.3" + } + }, "ansi-colors": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz", "integrity": "sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==", "dev": true }, + "rxjs": { + "version": "6.5.4", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.4.tgz", + "integrity": "sha512-naMQXcgEo3csAEGvw/NydRA0fuS2nDZJiw1YUWFKU7aPPAPGZEsD4Iimit96qwCieH6y614MCLYwdkrWx7z/7Q==", + "dev": true, + "requires": { + "tslib": "^1.9.0" + } + }, "uuid": { "version": "7.0.2", "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.2.tgz", @@ -242,9 +287,9 @@ } }, "@angular/common": { - "version": "9.1.1", - "resolved": "https://registry.npmjs.org/@angular/common/-/common-9.1.1.tgz", - "integrity": "sha512-bS13veMs7//YqYjYJ+JI78ylaCyVcdFKZKikd5SZa6+r6fajcyvLnSKqrKypG3O1BeJ8vOG/Pq54P5gWhbR6eA==" + "version": "9.1.11", + "resolved": "https://registry.npmjs.org/@angular/common/-/common-9.1.11.tgz", + "integrity": "sha512-Vh5lF7zWwDK9RedmYXUc8vUXyrecR3j1mAWlTlnmcHYxxFThPzN/dr0slQcPi6nyJn0EmyRKUGvAoZx4rIb7wg==" }, "@angular/compiler": { "version": "9.1.1", @@ -464,6 +509,14 @@ "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-9.1.1.tgz", "integrity": "sha512-NX+LuK8JFisiq3uHCOK6YoN/yIb2R9Ye5mwiOPkuZA3lZLKCnUXqCHZbM8VHy/WdjIxxeUaFMJc38yV8RVoabg==" }, + "@angular/http": { + "version": "7.2.16", + "resolved": "https://registry.npmjs.org/@angular/http/-/http-7.2.16.tgz", + "integrity": "sha512-yvjbNyzFSmmz4UTjCdy5M8mk0cZqf9TvSf8yN5UVIwtw4joyuUdlgJCuin0qSbQOKIf/JjHoofpO2JkPCGSNww==", + "requires": { + "tslib": "^1.9.0" + } + }, "@angular/language-service": { "version": "9.1.1", "resolved": "https://registry.npmjs.org/@angular/language-service/-/language-service-9.1.1.tgz", @@ -1520,23 +1573,47 @@ } }, "@schematics/angular": { - "version": "9.1.1", - "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-9.1.1.tgz", - "integrity": "sha512-V0DcDNgHQ2YR+PGZI6+pf/mUNNxt5SusShkZ1PbwIMk/HUQpzEGkLjm3v1Jw9eIZKiuDx615GNU1xDzQ/KyNRQ==", + "version": "9.1.9", + "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-9.1.9.tgz", + "integrity": "sha512-c8YGZ6pDfr8IDD1qaOjlEBAkEz14KFSxDj0hCWs0xIM0py513tu5sW8+ziYxGG4bgqpsgVR/KAxuY78iBfUVag==", "dev": true, "requires": { - "@angular-devkit/core": "9.1.1", - "@angular-devkit/schematics": "9.1.1" + "@angular-devkit/core": "9.1.9", + "@angular-devkit/schematics": "9.1.9" + }, + "dependencies": { + "@angular-devkit/core": { + "version": "9.1.9", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-9.1.9.tgz", + "integrity": "sha512-SWgBh4an/Vezjw2BZ5S+bKvuK5lH6gOtR8d5YjN9vxpJSZ0GimrGjfnLlWOkwWAsU8jfn4JzofECUHwX/7EW6Q==", + "dev": true, + "requires": { + "ajv": "6.12.0", + "fast-json-stable-stringify": "2.1.0", + "magic-string": "0.25.7", + "rxjs": "6.5.4", + "source-map": "0.7.3" + } + }, + "rxjs": { + "version": "6.5.4", + "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.4.tgz", + "integrity": "sha512-naMQXcgEo3csAEGvw/NydRA0fuS2nDZJiw1YUWFKU7aPPAPGZEsD4Iimit96qwCieH6y614MCLYwdkrWx7z/7Q==", + "dev": true, + "requires": { + "tslib": "^1.9.0" + } + } } }, "@schematics/update": { - "version": "0.901.1", - "resolved": "https://registry.npmjs.org/@schematics/update/-/update-0.901.1.tgz", - "integrity": "sha512-g5B8hjXKCbUNLKCkWQxc5r2D9lOQXRTLZJNIqva+l/ck0AML5MpelxkqQId9ZGLfQqfFk/XjdSHRWgcmUs1WnA==", + "version": "0.901.9", + "resolved": "https://registry.npmjs.org/@schematics/update/-/update-0.901.9.tgz", + "integrity": "sha512-VChX0VO/oyfCF3y+HjMTU2qN3vGgJYxEI1V+Q9aAlwl95t3GAufuaFY1CNW3YV4XkYIjD88e3yWl8d5yO4qf4w==", "dev": true, "requires": { - "@angular-devkit/core": "9.1.1", - "@angular-devkit/schematics": "9.1.1", + "@angular-devkit/core": "9.1.9", + "@angular-devkit/schematics": "9.1.9", "@yarnpkg/lockfile": "1.1.0", "ini": "1.3.5", "npm-package-arg": "^8.0.0", @@ -1546,6 +1623,19 @@ "semver-intersect": "1.4.0" }, "dependencies": { + "@angular-devkit/core": { + "version": "9.1.9", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-9.1.9.tgz", + "integrity": "sha512-SWgBh4an/Vezjw2BZ5S+bKvuK5lH6gOtR8d5YjN9vxpJSZ0GimrGjfnLlWOkwWAsU8jfn4JzofECUHwX/7EW6Q==", + "dev": true, + "requires": { + "ajv": "6.12.0", + "fast-json-stable-stringify": "2.1.0", + "magic-string": "0.25.7", + "rxjs": "6.5.4", + "source-map": "0.7.3" + } + }, "rxjs": { "version": "6.5.4", "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.4.tgz", @@ -1934,6 +2024,11 @@ "integrity": "sha1-l6ERlkmyEa0zaR2fn0hqjsn74KM=", "dev": true }, + "angular": { + "version": "1.8.0", + "resolved": "https://registry.npmjs.org/angular/-/angular-1.8.0.tgz", + "integrity": "sha512-VdaMx+Qk0Skla7B5gw77a8hzlcOakwF8mjlW13DpIWIDlfqwAbSSLfd8N/qZnzEmQF4jC4iofInd3gE7vL8ZZg==" + }, "ansi-colors": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz", @@ -2492,6 +2587,11 @@ "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=", "dev": true }, + "bootstrap": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.0.tgz", + "integrity": "sha512-Z93QoXvodoVslA+PWNdk23Hze4RBYIkpb5h8I2HY2Tu2h7A0LpAgLcyrhrSUyo2/Oxm2l1fRZPs1e5hnxnliXA==" + }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -2929,9 +3029,9 @@ "dev": true }, "cli-width": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.0.tgz", - "integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk=", + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.1.tgz", + "integrity": "sha512-GRMWDxpOB6Dgk2E5Uo+3eEBvtOOlimMmpbFiKuLFnQzYDavtLFY3K5ona41jgN/WdRZtG7utuVSVTL4HbZHGkw==", "dev": true }, "cliui": { @@ -6065,12 +6165,6 @@ "isobject": "^3.0.1" } }, - "is-promise": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.1.0.tgz", - "integrity": "sha1-eaKp7OfwlugPNtKy87wWwf9L8/o=", - "dev": true - }, "is-regex": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.5.tgz", @@ -7593,9 +7687,9 @@ } }, "npm-registry-fetch": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/npm-registry-fetch/-/npm-registry-fetch-4.0.3.tgz", - "integrity": "sha512-WGvUx0lkKFhu9MbiGFuT9nG2NpfQ+4dCJwRwwtK2HK5izJEvwDxMeUyqbuMS7N/OkpVCqDorV6rO5E4V9F8lJw==", + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/npm-registry-fetch/-/npm-registry-fetch-4.0.4.tgz", + "integrity": "sha512-6jb34hX/iYNQebqWUHtU8YF6Cjb1H6ouTFPClYsyiW6lpFkljTpdeftm53rRojtja1rKAvKNIIiTS5Sjpw4wsA==", "dev": true, "requires": { "JSONStream": "^1.3.4", @@ -7626,9 +7720,9 @@ } }, "safe-buffer": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.0.tgz", - "integrity": "sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg==", + "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 }, "semver": { @@ -9865,13 +9959,10 @@ } }, "run-async": { - "version": "2.4.0", - "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.0.tgz", - "integrity": "sha512-xJTbh/d7Lm7SBhc1tNvTpeCHaEzoyxPrqNlvSdMfBTYwaY++UJFyXUOxAtsRUXjlqOfj8luNaR9vjCh4KeV+pg==", - "dev": true, - "requires": { - "is-promise": "^2.1.0" - } + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz", + "integrity": "sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==", + "dev": true }, "run-queue": { "version": "1.0.3", @@ -10731,9 +10822,9 @@ "dev": true }, "spdx-correct": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.0.tgz", - "integrity": "sha512-lr2EZCctC2BNR7j7WzJ2FpDznxky1sjfxvvYEyzxNyb6lZXHODmEoJeFu4JupYlkfha1KZpJyoqiJ7pgA1qq8Q==", + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz", + "integrity": "sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==", "dev": true, "requires": { "spdx-expression-parse": "^3.0.0", @@ -10741,15 +10832,15 @@ } }, "spdx-exceptions": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.2.0.tgz", - "integrity": "sha512-2XQACfElKi9SlVb1CYadKDXvoajPgBVPn/gOQLrTvHdElaVhr7ZEbqJaRnJLVNeaI4cMEAgVCeBMKF6MWRDCRA==", + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz", + "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==", "dev": true }, "spdx-expression-parse": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz", - "integrity": "sha512-Yg6D3XpRD4kkOmTpdgbUiEJFKghJH03fiC1OPll5h/0sO6neh2jqRDVHOQ4o/LMea0tgCkbMgea5ip/e+MkWyg==", + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz", + "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==", "dev": true, "requires": { "spdx-exceptions": "^2.1.0", diff --git a/package.json b/package.json index 72b4bd7..9ce98da 100644 --- a/package.json +++ b/package.json @@ -12,25 +12,28 @@ "private": true, "dependencies": { "@angular/animations": "~9.1.1", - "@angular/common": "~9.1.1", + "@angular/common": "^9.1.11", "@angular/compiler": "~9.1.1", "@angular/core": "~9.1.1", "@angular/forms": "~9.1.1", + "@angular/http": "^7.2.16", "@angular/platform-browser": "~9.1.1", "@angular/platform-browser-dynamic": "~9.1.1", "@angular/router": "~9.1.1", + "angular": "^1.8.0", + "bootstrap": "^4.5.0", "rxjs": "~6.5.4", "tslib": "^1.10.0", "zone.js": "~0.10.2" }, "devDependencies": { "@angular-devkit/build-angular": "~0.901.1", - "@angular/cli": "~9.1.1", + "@angular/cli": "^9.1.9", "@angular/compiler-cli": "~9.1.1", "@angular/language-service": "~9.1.1", - "@types/node": "^12.11.1", "@types/jasmine": "~3.5.0", "@types/jasminewd2": "~2.0.3", + "@types/node": "^12.11.1", "codelyzer": "^5.1.2", "jasmine-core": "~3.5.0", "jasmine-spec-reporter": "~4.2.1", diff --git a/src/app/app.component.html b/src/app/app.component.html index e48d8c1..6571e70 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,534 +1 @@ - - - - - - - - - - - - - - -
- - -
- - - - - - - - - - - - {{ title }} app is running! - - - - - -
- - -

Resources

-

Here are some links to help you get started:

- -
- - - - Learn Angular - - - - - - - CLI Documentation - - - - - - - - Angular Blog - - - - -
- - -

Next Steps

-

What do you want to do next with your app?

- - - -
-
- - - New Component -
- -
- - - Angular Material -
- -
- - - Add PWA Support -
- -
- - - Add Dependency -
- -
- - - Run and Watch Tests -
- -
- - - Build for Production -
-
- - -
- 
ng generate component xyz
- 
ng add @angular/material
- 
ng add @angular/pwa
- 
ng add _____
- 
ng test
- 
ng build --prod
-
- - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- - - - - - - - -
- - - - - - - - - - - - \ No newline at end of file + \ No newline at end of file diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 2c3ba29..e4710df 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -3,14 +3,18 @@ import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; +import { ArticlesComponent } from './articles/articles.component'; +import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [ - AppComponent + AppComponent, + ArticlesComponent ], imports: [ BrowserModule, - AppRoutingModule + AppRoutingModule, + HttpClientModule ], providers: [], bootstrap: [AppComponent] diff --git a/src/app/articles.service.spec.ts b/src/app/articles.service.spec.ts new file mode 100644 index 0000000..84397c9 --- /dev/null +++ b/src/app/articles.service.spec.ts @@ -0,0 +1,16 @@ +import { TestBed } from '@angular/core/testing'; + +import { ArticlesService } from './articles.service'; + +describe('ArticlesService', () => { + let service: ArticlesService; + + beforeEach(() => { + TestBed.configureTestingModule({}); + service = TestBed.inject(ArticlesService); + }); + + it('should be created', () => { + expect(service).toBeTruthy(); + }); +}); diff --git a/src/app/articles.service.ts b/src/app/articles.service.ts new file mode 100644 index 0000000..a4b1c55 --- /dev/null +++ b/src/app/articles.service.ts @@ -0,0 +1,41 @@ +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; + +@Injectable({ + providedIn: 'root' +}) +export class ArticlesService { + + readonly baseUrl = 'https://conduit.productionready.io/api/'; + + constructor(private http: HttpClient) { } + + getArticlesByTag(tag:string) { + const limit = 5; + const url = `${this.baseUrl}articles?tag=${tag}&limit=${limit}`; + return this.http.get(url); + } + + getTags() { + const url = `${this.baseUrl}tags`; + return this.http.get(url); + } + + addCommentToArticle(slug: string, comment:string, callback){ + const url = `${this.baseUrl}articles/${slug}/comments`; + this.authenticate( + ({ user: {token} }) => { + const headers = {Authorization: 'Token ' + token} + this.http.post(url,{comment:{body:comment}},{headers}).subscribe(callback); + } + ); + + } + + authenticate(functionRequest){ + const url = `${this.baseUrl}users/login`; + const email = 'user123@dominio.com'; + const password = 'mipassword'; + this.http.post(url,{user:{email:email,password:password}}).subscribe(functionRequest); + } +} diff --git a/src/app/articles/articles.component.html b/src/app/articles/articles.component.html new file mode 100644 index 0000000..25fcf14 --- /dev/null +++ b/src/app/articles/articles.component.html @@ -0,0 +1,36 @@ +

Articulos

+ + + +
+
+

Titulo: {{article.title}}

+

Descripcion: {{article.description}}

+

Cuerpo: {{article.body}}

+

Fecha de creacion: {{article.createdAt.getDate()}}/ + {{article.createdAt.getMonth()+1}}/{{article.createdAt.getFullYear()}} - + {{article.createdAt.getHours()}}:{{article.createdAt.getMinutes()}} +

+

Etiquetas:

+
    +
  • {{tag}}
    • +
+
+ + +
+
+
+ diff --git a/src/app/articles/articles.component.scss b/src/app/articles/articles.component.scss new file mode 100644 index 0000000..7618222 --- /dev/null +++ b/src/app/articles/articles.component.scss @@ -0,0 +1,97 @@ +.title{ + font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; + font-size: 50px; + font-weight: bold; + color: white; + text-align: center; + display: block; + background-color: darkslategrey; + margin: -15px 0px 0px -15px; + padding: 25px; +} + +.tag-group{ + float: left; + width: 20%; + margin-left: -10px; + text-align: center; + background-color: rgb(105, 124, 233); +} + +//.tag-nav{ +// display: inline-block; +//} + +.my-button{ + display: block; + padding: 10px; + border-bottom: rgb(1, 1, 41) solid 2px; + color: black; + text-decoration: none; +} + +.my-button:hover{ + background-color: rgb(24, 31, 128); +} + +.selected-tag{ + background-color: rgb(62, 110, 212); +} + +.article{ + background-color: rgb(230, 230, 230); + padding: 10px; + margin-top: 5px; + border-radius: 30px; +} + +.article-itemgh{ + display: block; +} + +.tag-list{ + display: inline-flex; + padding: 5px 10px 5px 10px; + border-radius: 10px; + background-color: gray; + margin-left: 10px; + margin-bottom: 10px; +} + +.main-content{ + margin-left: 30%; + width: 75%; + display: inline-block; + margin-left: 20px; +} + +.tag-group-title{ + font-size: x-large; + font-weight: bold; + padding: 5px; +} + +.ta-comment{ + display: inline-block; + width: 80%; + height: 80px; + border-radius: 10px; + padding: 10px; + vertical-align: middle; +} + +.btn-comment{ + background-color: limegreen; + padding: 15px 5px 15px 5px; + width: 15%; + margin-left: 5px; + vertical-align: middle; + border-radius: 10px; + font-size: large; + font-weight: bold; + color: black; +} + +.btn-comment:hover{ + background-color: green; +} \ No newline at end of file diff --git a/src/app/articles/articles.component.spec.ts b/src/app/articles/articles.component.spec.ts new file mode 100644 index 0000000..c3e46ef --- /dev/null +++ b/src/app/articles/articles.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ArticlesComponent } from './articles.component'; + +describe('ArticlesComponent', () => { + let component: ArticlesComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ArticlesComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ArticlesComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/articles/articles.component.ts b/src/app/articles/articles.component.ts new file mode 100644 index 0000000..5dd4d9d --- /dev/null +++ b/src/app/articles/articles.component.ts @@ -0,0 +1,37 @@ +import { Component, OnInit, Injectable } from '@angular/core'; +import { ArticlesService } from '../articles.service'; +import { Article } from '../entities/article'; + +@Component({ + selector: 'app-articles', + templateUrl: './articles.component.html', + styleUrls: ['./articles.component.scss'] +}) +export class ArticlesComponent implements OnInit { + + articles:any = [] + tags: any = []; + selectedTag = ''; + + constructor(private service: ArticlesService) { } + + ngOnInit(): void { + this.loadTags(); + } + + loadArticlesByTag(tag: string) { + this.selectedTag = tag; + this.service.getArticlesByTag(tag).subscribe(response => this.articles = response.articles.map(art => Article.createArticle(art))); + } + + loadTags() { + this.service.getTags().subscribe(response => this.tags = response.tags); + } + + addCommentToArticle(slug: string, taComment){ + this.service.addCommentToArticle(slug, taComment.value, + ({comment: {id} }) => alert("Comentario realizado, ID: "+id) + ); + taComment.value=''; + } +} diff --git a/src/app/entities/article.spec.ts b/src/app/entities/article.spec.ts new file mode 100644 index 0000000..eea0b31 --- /dev/null +++ b/src/app/entities/article.spec.ts @@ -0,0 +1,7 @@ +import { Article } from './article'; + +describe('Article', () => { + it('should create an instance', () => { + expect(new Article()).toBeTruthy(); + }); +}); diff --git a/src/app/entities/article.ts b/src/app/entities/article.ts new file mode 100644 index 0000000..94057f9 --- /dev/null +++ b/src/app/entities/article.ts @@ -0,0 +1,19 @@ +export class Article { + title:string; + slug:string; + body:string; + createdAt:Date; + updatedAt:Date; + tagList:string[] + description:string; + author:Object; + favorited:boolean; + favoritesCount:number; + + static createArticle(art){ + let article = new Article(); + Object.assign(article,art); + article.createdAt = new Date(art.createdAt); + return article; + } +} diff --git a/src/index.html b/src/index.html index 62a7817..c524de2 100644 --- a/src/index.html +++ b/src/index.html @@ -2,7 +2,7 @@ - NgPeti + RealWorld App