From 5867b522e11bab567c7fdc76a56269649f2d2e07 Mon Sep 17 00:00:00 2001 From: Erik Zurvalec Date: Wed, 13 Dec 2023 09:29:58 +0100 Subject: [PATCH] feat(tutorial): complete step 3 --- package-lock.json | 239 ++++++++++++++++-- package.json | 117 +++++---- src/app/app.module.ts | 6 +- src/app/graphql.module.ts | 32 +++ .../repo-page/repo-page.component.html | 2 +- .../repo-page/repo-page.component.spec.ts | 27 +- .../repo-page/repo-page.component.ts | 9 +- .../repo-table/repo-table.component.html | 24 +- .../repo-table/repo-table.component.spec.ts | 29 ++- .../repo-table/repo-table.component.ts | 152 ++++++++--- .../repositories-routing.module.ts | 15 +- src/app/repositories/repositories.module.ts | 15 +- src/environments/environment.ts | 3 +- tsconfig.json | 5 +- 14 files changed, 524 insertions(+), 151 deletions(-) create mode 100644 src/app/graphql.module.ts diff --git a/package-lock.json b/package-lock.json index 2e4db9b629..aeebd096e1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1446,8 +1446,7 @@ "@types/node": { "version": "8.0.58", "resolved": "https://registry.npmjs.org/@types/node/-/node-8.0.58.tgz", - "integrity": "sha512-V746iUU7eHNdzQipoACuguDlVhC7IHK8CES1jSkuFt352wwA84BCWPXaGekBd7R5XdNK5ReHONDVKxlL9IreAw==", - "dev": true + "integrity": "sha512-V746iUU7eHNdzQipoACuguDlVhC7IHK8CES1jSkuFt352wwA84BCWPXaGekBd7R5XdNK5ReHONDVKxlL9IreAw==" }, "@types/q": { "version": "0.0.32", @@ -1486,6 +1485,11 @@ } } }, + "@types/zen-observable": { + "version": "0.8.7", + "resolved": "https://registry.npmjs.org/@types/zen-observable/-/zen-observable-0.8.7.tgz", + "integrity": "sha512-LKzNTjj+2j09wAo/vvVjzgw5qckJJzhdGgWHW7j69QIGdq/KnZrMAMIHQiWGl3Ccflh5/CudBAntTPYdprPltA==" + }, "@webassemblyjs/ast": { "version": "1.8.5", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.8.5.tgz", @@ -1662,6 +1666,23 @@ "@xtuc/long": "4.2.2" } }, + "@wry/context": { + "version": "0.4.4", + "resolved": "https://registry.npmjs.org/@wry/context/-/context-0.4.4.tgz", + "integrity": "sha512-LrKVLove/zw6h2Md/KZyWxIkFM6AoyKp71OqpH9Hiip1csjPVoD3tPxlbQUNxEnHENks3UGgNpSBCAfq9KWuag==", + "requires": { + "@types/node": ">=6", + "tslib": "^1.9.3" + } + }, + "@wry/equality": { + "version": "0.1.11", + "resolved": "https://registry.npmjs.org/@wry/equality/-/equality-0.1.11.tgz", + "integrity": "sha512-mwEVBDUVODlsQQ5dfuLUS5/Tf7jqUKyhKYHmVi4fPB6bDMOfWvUPJmKgS1Z7Za/sOI3vzWt4+O7yCiL/70MogA==", + "requires": { + "tslib": "^1.9.3" + } + }, "@xtuc/ieee754": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz", @@ -1818,6 +1839,133 @@ "picomatch": "^2.0.4" } }, + "apollo-angular": { + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/apollo-angular/-/apollo-angular-1.10.0.tgz", + "integrity": "sha512-VPSNk8Li5KRDhZ3GSJPEYg1r57KySND2m1XWgkLNYmQExzNDs/Su9EeWThwOqjZ7x9JbGjpvWiQeUQaCs96PjA==", + "requires": { + "semver": "^7.0.0", + "tslib": "^2.0.0" + }, + "dependencies": { + "lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "requires": { + "yallist": "^4.0.0" + } + }, + "semver": { + "version": "7.5.4", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", + "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==", + "requires": { + "lru-cache": "^6.0.0" + } + }, + "tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" + }, + "yallist": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==" + } + } + }, + "apollo-angular-link-http": { + "version": "1.11.0", + "resolved": "https://registry.npmjs.org/apollo-angular-link-http/-/apollo-angular-link-http-1.11.0.tgz", + "integrity": "sha512-/mFytwvHhmWOX3emi8ljpuas8HpwSVOfbKniOeDFSE44g9HsPKkq2bGTucUTUo0Un3cCBEVKei2jTIDVsZPqFA==", + "requires": { + "apollo-angular-link-http-common": "~1.10.0", + "extract-files": "6.0.0", + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" + } + } + }, + "apollo-angular-link-http-common": { + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/apollo-angular-link-http-common/-/apollo-angular-link-http-common-1.10.0.tgz", + "integrity": "sha512-Oue8b/naWZvG/oQ+3ZAqaBVreBIwqy16yOk5CpoE7+Gjhett9KGVu/OZcpH89/ifwXyWzHpKnCUnB1fxgbnR7Q==", + "requires": { + "tslib": "^2.0.0" + }, + "dependencies": { + "tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" + } + } + }, + "apollo-cache": { + "version": "1.3.5", + "resolved": "https://registry.npmjs.org/apollo-cache/-/apollo-cache-1.3.5.tgz", + "integrity": "sha512-1XoDy8kJnyWY/i/+gLTEbYLnoiVtS8y7ikBr/IfmML4Qb+CM7dEEbIUOjnY716WqmZ/UpXIxTfJsY7rMcqiCXA==", + "requires": { + "apollo-utilities": "^1.3.4", + "tslib": "^1.10.0" + } + }, + "apollo-cache-inmemory": { + "version": "1.6.6", + "resolved": "https://registry.npmjs.org/apollo-cache-inmemory/-/apollo-cache-inmemory-1.6.6.tgz", + "integrity": "sha512-L8pToTW/+Xru2FFAhkZ1OA9q4V4nuvfoPecBM34DecAugUZEBhI2Hmpgnzq2hTKZ60LAMrlqiASm0aqAY6F8/A==", + "requires": { + "apollo-cache": "^1.3.5", + "apollo-utilities": "^1.3.4", + "optimism": "^0.10.0", + "ts-invariant": "^0.4.0", + "tslib": "^1.10.0" + } + }, + "apollo-client": { + "version": "2.6.10", + "resolved": "https://registry.npmjs.org/apollo-client/-/apollo-client-2.6.10.tgz", + "integrity": "sha512-jiPlMTN6/5CjZpJOkGeUV0mb4zxx33uXWdj/xQCfAMkuNAC3HN7CvYDyMHHEzmcQ5GV12LszWoQ/VlxET24CtA==", + "requires": { + "@types/zen-observable": "^0.8.0", + "apollo-cache": "1.3.5", + "apollo-link": "^1.0.0", + "apollo-utilities": "1.3.4", + "symbol-observable": "^1.0.2", + "ts-invariant": "^0.4.0", + "tslib": "^1.10.0", + "zen-observable": "^0.8.0" + } + }, + "apollo-link": { + "version": "1.2.14", + "resolved": "https://registry.npmjs.org/apollo-link/-/apollo-link-1.2.14.tgz", + "integrity": "sha512-p67CMEFP7kOG1JZ0ZkYZwRDa369w5PIjtMjvrQd/HnIV8FRsHRqLqK+oAZQnFa1DDdZtOtHTi+aMIW6EatC2jg==", + "requires": { + "apollo-utilities": "^1.3.0", + "ts-invariant": "^0.4.0", + "tslib": "^1.9.3", + "zen-observable-ts": "^0.8.21" + } + }, + "apollo-utilities": { + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/apollo-utilities/-/apollo-utilities-1.3.4.tgz", + "integrity": "sha512-pk2hiWrCXMAy2fRPwEyhvka+mqwzeP60Jr1tRYi5xru+3ko94HI9o6lK0CT33/w4RDlxWchmdhDCrvdr+pHCig==", + "requires": { + "@wry/equality": "^0.1.2", + "fast-json-stable-stringify": "^2.0.0", + "ts-invariant": "^0.4.0", + "tslib": "^1.10.0" + } + }, "app-root-path": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/app-root-path/-/app-root-path-2.2.1.tgz", @@ -2619,7 +2767,7 @@ "builtins": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/builtins/-/builtins-1.0.3.tgz", - "integrity": "sha1-y5T662HIaWRR2zZTThQi+U8K7og=", + "integrity": "sha512-uYBjakWipfaO/bXI7E8rq6kpwHRZK5cNYrUv2OzZSI/FvmdMyXJ2tG9dKcjEC5YHmHpUAwsargWIZNWdxb/bnQ==", "dev": true }, "bytes": { @@ -3414,7 +3562,7 @@ "debuglog": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/debuglog/-/debuglog-1.0.1.tgz", - "integrity": "sha1-qiT/uaw9+aI1GDfPstJ5NgzXhJI=", + "integrity": "sha512-syBZ+rnAK3EgMsH2aYEOLUW7mZSY9Gb+0wUMCFsZvcmiz+HigA0LOcq/HoQqVuGG+EKykunc7QG2bzrponfaSw==", "dev": true }, "decamelize": { @@ -3875,7 +4023,7 @@ "err-code": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/err-code/-/err-code-1.1.2.tgz", - "integrity": "sha1-BuARbTAo9q70gGhJ6w6mp0iuaWA=", + "integrity": "sha512-CJAN+O0/yA1CKfRn9SXOGctSpEM7DCon/r/5r2eXFMY2zCCJBasFhcM5I+1kh3Ap11FsQCX+vGHceNPvpWKhoA==", "dev": true }, "errno": { @@ -4290,6 +4438,11 @@ } } }, + "extract-files": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/extract-files/-/extract-files-6.0.0.tgz", + "integrity": "sha512-v9UVTPkERZR1NjEOIPvmbzLFdh8YZFEGjRdSJraop6HJe9PQ8HU9iv6eRMuF06CXXXO/R5OBmnWMixZHuZ8CsA==" + }, "extsprintf": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz", @@ -4305,8 +4458,7 @@ "fast-json-stable-stringify": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz", - "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=", - "dev": true + "integrity": "sha1-1RQsDK7msRifh9OnYREGT4bIu/I=" }, "fastparse": { "version": "1.1.2", @@ -4761,6 +4913,29 @@ "integrity": "sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==", "dev": true }, + "graphql": { + "version": "14.7.0", + "resolved": "https://registry.npmjs.org/graphql/-/graphql-14.7.0.tgz", + "integrity": "sha512-l0xWZpoPKpppFzMfvVyFmp9vLN7w/ZZJPefUicMCepfJeQ8sMcztloGYY9DfjVPo6tIUDzU5Hw3MUbIjj9AVVA==", + "requires": { + "iterall": "^1.2.2" + } + }, + "graphql-tag": { + "version": "2.12.6", + "resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.12.6.tgz", + "integrity": "sha512-FdSNcu2QQcWnM2VNvSCCDCVS5PpPqpzgFT8+GXzqJuoDd0CBncxCY278u4mhRO7tMgo2JjgJA5aZ+nWSQ/Z+xg==", + "requires": { + "tslib": "^2.1.0" + }, + "dependencies": { + "tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" + } + } + }, "handle-thing": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.0.tgz", @@ -5085,7 +5260,7 @@ "humanize-ms": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz", - "integrity": "sha1-xG4xWaKT9riW2ikxbYtv6Lt5u+0=", + "integrity": "sha512-Fl70vYtsAFb/C06PTS9dZBo7ihau+Tu/DNCk/OyHhea07S+aeMWpFFkUaXRa8fI+ScZbEI8dfSxwY7gxZ9SAVQ==", "dev": true, "requires": { "ms": "^2.0.0" @@ -5830,6 +6005,11 @@ "html-escaper": "^2.0.0" } }, + "iterall": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/iterall/-/iterall-1.3.0.tgz", + "integrity": "sha512-QZ9qOMdF+QLHxy1QIpUHUU1D5pS2CG2P69LF6L6CPjPYA/XMOmKV3PZpawHoAjHNyB0swdVTRxdYT4tbBbxqwg==" + }, "jasmine": { "version": "2.8.0", "resolved": "https://registry.npmjs.org/jasmine/-/jasmine-2.8.0.tgz", @@ -5945,7 +6125,7 @@ "jsonparse": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/jsonparse/-/jsonparse-1.3.1.tgz", - "integrity": "sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA=", + "integrity": "sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==", "dev": true }, "jsprim": { @@ -8061,6 +8241,14 @@ "is-wsl": "^1.1.0" } }, + "optimism": { + "version": "0.10.3", + "resolved": "https://registry.npmjs.org/optimism/-/optimism-0.10.3.tgz", + "integrity": "sha512-9A5pqGoQk49H6Vhjb9kPgAeeECfUDF6aIICbMDL23kDLStBn1MWk3YvcZ4xWF9CsSf6XEgvRLkXy4xof/56vVw==", + "requires": { + "@wry/context": "^0.4.0" + } + }, "optimist": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz", @@ -8606,7 +8794,7 @@ "promise-retry": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/promise-retry/-/promise-retry-1.1.1.tgz", - "integrity": "sha1-ZznpaOMFHaIM5kl/srUPaRHfPW0=", + "integrity": "sha512-StEy2osPr28o17bIW776GtwO6+Q+M9zPiZkYfosciUUMYqjhU/ffwRAH0zN2+uvGyUsn8/YICIHRzLbPacpZGw==", "dev": true, "requires": { "err-code": "^1.0.0", @@ -8616,7 +8804,7 @@ "retry": { "version": "0.10.1", "resolved": "https://registry.npmjs.org/retry/-/retry-0.10.1.tgz", - "integrity": "sha1-52OI0heZLCUnUCQdPTlW/tmNj/Q=", + "integrity": "sha512-ZXUSQYTHdl3uS7IuCehYfMzKyIDBNoAuUblvy5oGO5UJSUTmStUUVPXbA9Qxd173Bgre53yCQczQuHgRWAdvJQ==", "dev": true } } @@ -10648,8 +10836,7 @@ "symbol-observable": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz", - "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==", - "dev": true + "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==" }, "tapable": { "version": "1.1.3", @@ -10867,6 +11054,14 @@ "glob": "^7.1.2" } }, + "ts-invariant": { + "version": "0.4.4", + "resolved": "https://registry.npmjs.org/ts-invariant/-/ts-invariant-0.4.4.tgz", + "integrity": "sha512-uEtWkFM/sdZvRNNDL3Ehu4WVpwaulhwQszV8mrtcdeE8nN00BV9mAmQ88RkrBhFgl9gMgvjJLAQcZbnPXI9mlA==", + "requires": { + "tslib": "^1.9.3" + } + }, "ts-node": { "version": "8.0.3", "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-8.0.3.tgz", @@ -11197,7 +11392,7 @@ "util-promisify": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/util-promisify/-/util-promisify-2.1.0.tgz", - "integrity": "sha1-PCI2R2xNMsX/PEcAKt18E7moKlM=", + "integrity": "sha512-K+5eQPYs14b3+E+hmE2J6gCZ4JmMl9DbYS6BeP2CHq6WMuNxErxf5B/n0fz85L8zUuoO6rIzNNmIQDu/j+1OcA==", "dev": true, "requires": { "object.getownpropertydescriptors": "^2.0.3" @@ -11228,7 +11423,7 @@ "validate-npm-package-name": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-3.0.0.tgz", - "integrity": "sha1-X6kS2B630MdK/BQN5zF/DKffQ34=", + "integrity": "sha512-M6w37eVCMMouJ9V/sdPGnC5H4uDr73/+xdq0FBLO3TFFX1+7wiUY6Es328NN+y43tmY+doUdN9g9J21vqB7iLw==", "dev": true, "requires": { "builtins": "^1.0.3" @@ -13086,6 +13281,20 @@ "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==", "dev": true }, + "zen-observable": { + "version": "0.8.15", + "resolved": "https://registry.npmjs.org/zen-observable/-/zen-observable-0.8.15.tgz", + "integrity": "sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ==" + }, + "zen-observable-ts": { + "version": "0.8.21", + "resolved": "https://registry.npmjs.org/zen-observable-ts/-/zen-observable-ts-0.8.21.tgz", + "integrity": "sha512-Yj3yXweRc8LdRMrCC8nIc4kkjWecPAUVh0TI0OUrWXx6aX790vLcDlWca6I4vsyCGH3LpWxq0dJRcMOFoVqmeg==", + "requires": { + "tslib": "^1.9.3", + "zen-observable": "^0.8.0" + } + }, "zone.js": { "version": "0.9.1", "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.9.1.tgz", diff --git a/package.json b/package.json index 2c0ff3c1b7..68b2c9c41f 100644 --- a/package.json +++ b/package.json @@ -1,57 +1,64 @@ { - "name": "carbon-angular-starter", - "version": "0.1.0", - "license": "", - "scripts": { - "ng": "ng", - "start": "ng serve", - "build": "ng build --prod --aot", - "test": "ng test", - "test:once": "ng test --watch=false", - "lint": "ng lint", - "e2e": "ng e2e" - }, - "engines": { - "node": ">= 10.9" - }, - "private": true, - "dependencies": { - "@angular/animations": "^8.2.0", - "@angular/common": "^8.2.0", - "@angular/compiler": "^8.2.0", - "@angular/core": "^8.2.0", - "@angular/forms": "^8.2.0", - "@angular/platform-browser": "^8.2.0", - "@angular/platform-browser-dynamic": "^8.2.0", - "@angular/router": "^8.2.0", - "@carbon/icons-angular": "^10.4.0", - "core-js": "^2.5.2", - "rxjs": "^6.4.0", - "tslib": "^1.9.0", - "zone.js": "~0.9.1", - "carbon-components": "^10.7.0", - "carbon-components-angular": "^3.21.2" - }, - "devDependencies": { - "@angular-devkit/build-angular": "~0.802.1", - "@angular/cli": "^8.2.1", - "@angular/compiler-cli": "^8.2.0", - "@types/jasmine": "^2.8.2", - "@types/node": "~8.0.53", - "codelyzer": "^5.0.1", - "jasmine-core": "~3.4.0", - "jasmine-spec-reporter": "~4.2.1", - "karma": "^3.1.1", - "karma-chrome-launcher": "~2.2.0", - "karma-cli": "2.0.0", - "karma-coverage-istanbul-reporter": "^2.0.5", - "karma-jasmine": "~2.0.1", - "karma-jasmine-html-reporter": "^1.4.0", - "node-sass": "^4.12.0", - "postcss-loader": "3.0.0", - "protractor": "^5.4.2", - "ts-node": "~8.0.3", - "tslint": "^5.15.0", - "typescript": "3.5.3" - } + "name": "carbon-angular-starter", + "version": "0.1.0", + "license": "", + "scripts": { + "ng": "ng", + "start": "ng serve", + "build": "ng build --prod --aot", + "test": "ng test", + "test:once": "ng test --watch=false", + "lint": "ng lint", + "e2e": "ng e2e" + }, + "engines": { + "node": ">= 10.9" + }, + "private": true, + "dependencies": { + "@angular/animations": "^8.2.0", + "@angular/common": "^8.2.0", + "@angular/compiler": "^8.2.0", + "@angular/core": "^8.2.0", + "@angular/forms": "^8.2.0", + "@angular/platform-browser": "^8.2.0", + "@angular/platform-browser-dynamic": "^8.2.0", + "@angular/router": "^8.2.0", + "@carbon/icons-angular": "^10.4.0", + "apollo-angular": "^1.10.0", + "carbon-components": "^10.7.0", + "carbon-components-angular": "^3.21.2", + "core-js": "^2.5.2", + "rxjs": "^6.4.0", + "tslib": "^1.9.0", + "zone.js": "~0.9.1", + "apollo-angular-link-http": "^1.11.0", + "apollo-link": "^1.2.11", + "apollo-client": "^2.6.0", + "apollo-cache-inmemory": "^1.6.0", + "graphql-tag": "^2.10.0", + "graphql": "^14.6.0" + }, + "devDependencies": { + "@angular-devkit/build-angular": "~0.802.1", + "@angular/cli": "^8.2.1", + "@angular/compiler-cli": "^8.2.0", + "@types/jasmine": "^2.8.2", + "@types/node": "~8.0.53", + "codelyzer": "^5.0.1", + "jasmine-core": "~3.4.0", + "jasmine-spec-reporter": "~4.2.1", + "karma": "^3.1.1", + "karma-chrome-launcher": "~2.2.0", + "karma-cli": "2.0.0", + "karma-coverage-istanbul-reporter": "^2.0.5", + "karma-jasmine": "~2.0.1", + "karma-jasmine-html-reporter": "^1.4.0", + "node-sass": "^4.12.0", + "postcss-loader": "3.0.0", + "protractor": "^5.4.2", + "ts-node": "~8.0.3", + "tslint": "^5.15.0", + "typescript": "3.5.3" + } } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index d4fc61a2a6..2bfcd81dd4 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -12,6 +12,8 @@ import { Notification20Module } from '@carbon/icons-angular/lib/notification/20' import { UserAvatar20Module } from '@carbon/icons-angular/lib/user--avatar/20'; import { AppSwitcher20Module } from '@carbon/icons-angular/lib/app-switcher/20'; import { HeaderComponent } from './header/header.component'; +import { GraphQLModule } from './graphql.module'; +import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [ @@ -26,7 +28,9 @@ import { HeaderComponent } from './header/header.component'; UIShellModule, Notification20Module, UserAvatar20Module, - AppSwitcher20Module + AppSwitcher20Module, + GraphQLModule, + HttpClientModule ], bootstrap: [AppComponent] }) diff --git a/src/app/graphql.module.ts b/src/app/graphql.module.ts new file mode 100644 index 0000000000..628f1afee6 --- /dev/null +++ b/src/app/graphql.module.ts @@ -0,0 +1,32 @@ +import { NgModule } from '@angular/core'; +import { ApolloModule, APOLLO_OPTIONS } from 'apollo-angular'; +import { HttpLinkModule, HttpLink } from 'apollo-angular-link-http'; +import { InMemoryCache } from 'apollo-cache-inmemory'; + +import { HttpHeaders } from '@angular/common/http'; +import { environment } from '../environments/environment'; + +const uri = 'https://api.github.com/graphql'; // <-- add the URL of the GraphQL server here +export function createApollo(httpLink: HttpLink) { + return { + link: httpLink.create({ + uri, + headers: new HttpHeaders({ + Authorization: `Bearer ${environment.githubPersonalAccessToken}`, + }), + }), + cache: new InMemoryCache(), + }; +} + +@NgModule({ + exports: [ApolloModule, HttpLinkModule], + providers: [ + { + provide: APOLLO_OPTIONS, + useFactory: createApollo, + deps: [HttpLink], + }, + ], +}) +export class GraphQLModule {} diff --git a/src/app/repositories/repo-page/repo-page.component.html b/src/app/repositories/repo-page/repo-page.component.html index e836f52e29..6cbd120523 100644 --- a/src/app/repositories/repo-page/repo-page.component.html +++ b/src/app/repositories/repo-page/repo-page.component.html @@ -1,6 +1,6 @@
-
+
diff --git a/src/app/repositories/repo-page/repo-page.component.spec.ts b/src/app/repositories/repo-page/repo-page.component.spec.ts index 23d2e0fba4..4dc82dfb82 100644 --- a/src/app/repositories/repo-page/repo-page.component.spec.ts +++ b/src/app/repositories/repo-page/repo-page.component.spec.ts @@ -1,8 +1,16 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { RepoPageComponent } from './repo-page.component'; -import { GridModule, TableModule } from 'carbon-components-angular'; +import { + GridModule, + LinkModule, + PaginationModule, + TableModule, +} from 'carbon-components-angular'; import { RepoTableComponent } from '../repo-table/repo-table.component'; +import { CommonModule } from '@angular/common'; +import { RepositoriesRoutingModule } from '../repositories-routing.module'; +import { Apollo } from 'apollo-angular'; describe('RepoPageComponent', () => { let component: RepoPageComponent; @@ -10,13 +18,16 @@ describe('RepoPageComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ RepoPageComponent, RepoTableComponent ], + declarations: [RepoPageComponent, RepoTableComponent], imports: [ + CommonModule, + RepositoriesRoutingModule, GridModule, - TableModule - ] - }) - .compileComponents(); + TableModule, + LinkModule, + PaginationModule, + ], + }).compileComponents(); })); beforeEach(() => { @@ -24,8 +35,4 @@ describe('RepoPageComponent', () => { component = fixture.componentInstance; fixture.detectChanges(); }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); }); diff --git a/src/app/repositories/repo-page/repo-page.component.ts b/src/app/repositories/repo-page/repo-page.component.ts index 39d18fa41c..1b657b9a38 100644 --- a/src/app/repositories/repo-page/repo-page.component.ts +++ b/src/app/repositories/repo-page/repo-page.component.ts @@ -3,13 +3,10 @@ import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-repo-page', templateUrl: './repo-page.component.html', - styleUrls: ['./repo-page.component.scss'] + styleUrls: ['./repo-page.component.scss'], }) export class RepoPageComponent implements OnInit { + constructor() {} - constructor() { } - - ngOnInit() { - } - + ngOnInit() {} } diff --git a/src/app/repositories/repo-table/repo-table.component.html b/src/app/repositories/repo-table/repo-table.component.html index 671d9e1358..b36db4695c 100644 --- a/src/app/repositories/repo-table/repo-table.component.html +++ b/src/app/repositories/repo-table/repo-table.component.html @@ -1,11 +1,29 @@

Carbon Repositories

-

A collection of public Carbon repositories.

+

+ A collection of public Carbon repositories. +

+ [striped]="false" + > + + + + + + diff --git a/src/app/repositories/repo-table/repo-table.component.spec.ts b/src/app/repositories/repo-table/repo-table.component.spec.ts index c191483a91..53f75a1c59 100644 --- a/src/app/repositories/repo-table/repo-table.component.spec.ts +++ b/src/app/repositories/repo-table/repo-table.component.spec.ts @@ -1,7 +1,16 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { RepoTableComponent } from './repo-table.component'; -import { TableModule } from 'carbon-components-angular'; +import { + GridModule, + LinkModule, + PaginationModule, + TableModule, +} from 'carbon-components-angular'; +import { CommonModule } from '@angular/common'; +import { RepositoriesRoutingModule } from '../repositories-routing.module'; +import { RepoPageComponent } from '../repo-page/repo-page.component'; +import { Apollo } from 'apollo-angular'; describe('RepoTableComponent', () => { let component: RepoTableComponent; @@ -9,12 +18,16 @@ describe('RepoTableComponent', () => { beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [ RepoTableComponent ], + declarations: [RepoPageComponent, RepoTableComponent], imports: [ - TableModule - ] - }) - .compileComponents(); + CommonModule, + RepositoriesRoutingModule, + GridModule, + TableModule, + LinkModule, + PaginationModule, + ], + }).compileComponents(); })); beforeEach(() => { @@ -22,8 +35,4 @@ describe('RepoTableComponent', () => { component = fixture.componentInstance; fixture.detectChanges(); }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); }); diff --git a/src/app/repositories/repo-table/repo-table.component.ts b/src/app/repositories/repo-table/repo-table.component.ts index e8f18d0763..79687b6eac 100644 --- a/src/app/repositories/repo-table/repo-table.component.ts +++ b/src/app/repositories/repo-table/repo-table.component.ts @@ -1,55 +1,135 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core'; import { TableModel, TableItem, - TableHeaderItem + TableHeaderItem, + Table, } from 'carbon-components-angular'; +import { Apollo } from 'apollo-angular'; +import gql from 'graphql-tag'; @Component({ selector: 'app-repo-table', templateUrl: './repo-table.component.html', - styleUrls: ['./repo-table.component.scss'] + styleUrls: ['./repo-table.component.scss'], }) export class RepoTableComponent implements OnInit { model = new TableModel(); - constructor() { } + data = []; + + skeletonModel = Table.skeletonModel(10, 6); + skeleton = true; + + @ViewChild('linkTemplate', null) + protected linkTemplate: TemplateRef; + + constructor(private apollo: Apollo) {} ngOnInit() { - this.model.data = [ - [ - new TableItem({data: 'Repo 1', expandedData: 'Row description'}), - new TableItem({data: 'Date'}), - new TableItem({data: 'Date'}), - new TableItem({data: '123'}), - new TableItem({data: '456'}), - new TableItem({data: 'Links'}) - ], - [ - new TableItem({data: 'Repo 2', expandedData: 'Row description'}), - new TableItem({data: 'Date'}), - new TableItem({data: 'Date'}), - new TableItem({data: '123'}), - new TableItem({data: '456'}), - new TableItem({data: 'Links'}) - ], - [ - new TableItem({data: 'Repo 3', expandedData: 'Row description'}), - new TableItem({data: 'Date'}), - new TableItem({data: 'Date'}), - new TableItem({data: '123'}), - new TableItem({data: '456'}), - new TableItem({data: 'Links'}) - ] - ]; this.model.header = [ - new TableHeaderItem({data: 'Name'}), - new TableHeaderItem({data: 'Created'}), - new TableHeaderItem({data: 'Updated'}), - new TableHeaderItem({data: 'Open Issues'}), - new TableHeaderItem({data: 'Stars'}), - new TableHeaderItem({data: 'Links'}) + new TableHeaderItem({ data: 'Name' }), + new TableHeaderItem({ data: 'Created' }), + new TableHeaderItem({ data: 'Updated' }), + new TableHeaderItem({ data: 'Open Issues' }), + new TableHeaderItem({ data: 'Stars' }), + new TableHeaderItem({ data: 'Links' }), ]; + this.apollo + .watchQuery({ + query: gql` + query REPO_QUERY { + # Let's use carbon as our organization + organization(login: "carbon-design-system") { + # We'll grab all the repositories in one go. To load more resources + # continuously, see the advanced topics. + repositories( + first: 75 + orderBy: { field: UPDATED_AT, direction: DESC } + ) { + totalCount + nodes { + url + homepageUrl + issues(filterBy: { states: OPEN }) { + totalCount + } + stargazers { + totalCount + } + releases(first: 1) { + totalCount + nodes { + name + } + } + name + updatedAt + createdAt + description + id + } + } + } + } + `, + }) + .valueChanges.subscribe((response: any) => { + if (response.error) { + const errorData = []; + errorData.push([new TableItem({ data: 'error!' })]); + this.model.data = errorData; + } else if (response.loading) { + this.skeleton = true; + } else { + console.log(response); + this.data = response.data.organization.repositories.nodes; + this.model.pageLength = 10; + this.model.totalDataLength = + response.data.organization.repositories.totalCount; + this.selectPage(1); + } + }); + } + + prepareData(data) { + this.skeleton = false; + const newData = []; + + for (const datum of data) { + newData.push([ + new TableItem({ + data: datum.name, + expandedData: datum.description, + }), + new TableItem({ + data: new Date(datum.createdAt).toLocaleDateString(), + }), + new TableItem({ + data: new Date(datum.updatedAt).toLocaleDateString(), + }), + new TableItem({ data: datum.issues.totalCount }), + new TableItem({ data: datum.stargazers.totalCount }), + new TableItem({ + data: { + github: datum.url, + homepage: datum.homepageUrl, + }, + template: this.linkTemplate, + }), + ]); + } + return newData; + } + + selectPage(page) { + const offset = this.model.pageLength * (page - 1); + const pageRawData = this.data.slice( + offset, + offset + this.model.pageLength + ); + this.model.data = this.prepareData(pageRawData); + this.model.currentPage = page; } } diff --git a/src/app/repositories/repositories-routing.module.ts b/src/app/repositories/repositories-routing.module.ts index 4d35bad3f7..bf37439eb0 100644 --- a/src/app/repositories/repositories-routing.module.ts +++ b/src/app/repositories/repositories-routing.module.ts @@ -2,14 +2,15 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { RepoPageComponent } from './repo-page/repo-page.component'; - -const routes: Routes = [{ - path: '', - component: RepoPageComponent -}]; +const routes: Routes = [ + { + path: '', + component: RepoPageComponent, + }, +]; @NgModule({ imports: [RouterModule.forChild(routes)], - exports: [RouterModule] + exports: [RouterModule], }) -export class RepositoriesRoutingModule { } +export class RepositoriesRoutingModule {} diff --git a/src/app/repositories/repositories.module.ts b/src/app/repositories/repositories.module.ts index b052277e32..6604b4b28b 100644 --- a/src/app/repositories/repositories.module.ts +++ b/src/app/repositories/repositories.module.ts @@ -3,7 +3,12 @@ import { CommonModule } from '@angular/common'; import { RepositoriesRoutingModule } from './repositories-routing.module'; import { RepoPageComponent } from './repo-page/repo-page.component'; -import { GridModule, TableModule } from 'carbon-components-angular'; +import { + GridModule, + LinkModule, + PaginationModule, + TableModule, +} from 'carbon-components-angular'; import { RepoTableComponent } from './repo-table/repo-table.component'; @NgModule({ @@ -12,7 +17,9 @@ import { RepoTableComponent } from './repo-table/repo-table.component'; CommonModule, RepositoriesRoutingModule, GridModule, - TableModule - ] + TableModule, + LinkModule, + PaginationModule, + ], }) -export class RepositoriesModule { } +export class RepositoriesModule {} diff --git a/src/environments/environment.ts b/src/environments/environment.ts index c988d4f21a..3a5738e2df 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -4,5 +4,6 @@ // The list of which env maps to which file can be found in `.angular-cli.json`. export const environment = { - production: false + production: false, + githubPersonalAccessToken: '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', }; diff --git a/tsconfig.json b/tsconfig.json index cbf807a9fb..0b4537c572 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -11,9 +11,10 @@ "target": "es2015", "lib": [ "es2016", - "dom" + "dom", + "esnext.asynciterable" ], "module": "esnext", "baseUrl": "./" } -} +} \ No newline at end of file