├── .dockerignore ├── .editorconfig ├── .github ├── FUNDING.yml └── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── .gitignore ├── Dockerfile ├── LICENSE ├── README.md ├── angular.json ├── docker-compose.yml ├── e2e ├── protractor.conf.js ├── src │ ├── app.e2e-spec.ts │ └── app.po.ts └── tsconfig.e2e.json ├── nginx └── default.conf ├── package-lock.json ├── package.json ├── src ├── app │ ├── app-routing.module.ts │ ├── app.component.ts │ ├── app.module.ts │ ├── core │ │ ├── components │ │ │ ├── contact-details │ │ │ │ ├── contact-details-container.component.html │ │ │ │ ├── contact-details-container.component.sass │ │ │ │ ├── contact-details-container.component.spec.ts │ │ │ │ └── contact-details-container.component.ts │ │ │ ├── contact-form │ │ │ │ ├── contact-form.component.html │ │ │ │ ├── contact-form.component.sass │ │ │ │ ├── contact-form.component.spec.ts │ │ │ │ └── contact-form.component.ts │ │ │ ├── contact-list │ │ │ │ ├── contact-list.component.html │ │ │ │ ├── contact-list.component.sass │ │ │ │ ├── contact-list.component.spec.ts │ │ │ │ └── contact-list.component.ts │ │ │ ├── footer │ │ │ │ ├── footer.component.html │ │ │ │ ├── footer.component.sass │ │ │ │ ├── footer.component.spec.ts │ │ │ │ └── footer.component.ts │ │ │ └── toolbar │ │ │ │ ├── toolbar.component.html │ │ │ │ ├── toolbar.component.sass │ │ │ │ ├── toolbar.component.spec.ts │ │ │ │ └── toolbar.component.ts │ │ ├── helpers │ │ │ └── ngrx.helpers.ts │ │ ├── models │ │ │ ├── contact.events.ts │ │ │ ├── contact.ts │ │ │ └── index.ts │ │ ├── modules │ │ │ └── shared.module.ts │ │ └── resolvers │ │ │ └── title.resolver.ts │ ├── store │ │ ├── actions │ │ │ └── ui-actions.ts │ │ ├── index.ts │ │ └── reducers │ │ │ └── ui-reducer.ts │ └── views │ │ └── contacts │ │ ├── contact-details │ │ ├── contact-details.component.html │ │ ├── contact-details.component.sass │ │ ├── contact-details.component.spec.ts │ │ └── contact-details.component.ts │ │ ├── contact-edit │ │ ├── contact-edit.component.html │ │ ├── contact-edit.component.sass │ │ ├── contact-edit.component.spec.ts │ │ └── contact-edit.component.ts │ │ ├── contact-new │ │ ├── contact-new.component.html │ │ ├── contact-new.component.sass │ │ ├── contact-new.component.spec.ts │ │ └── contact-new.component.ts │ │ ├── contacts-index │ │ ├── contacts-index.component.html │ │ ├── contacts-index.component.sass │ │ ├── contacts-index.component.spec.ts │ │ └── contacts-index.component.ts │ │ ├── contacts-routing.module.ts │ │ ├── contacts.component.ts │ │ ├── contacts.module.ts │ │ ├── services │ │ ├── contacts-mock.service.ts │ │ ├── contacts-socket.service.spec.ts │ │ ├── contacts-socket.service.ts │ │ ├── contacts.service.spec.ts │ │ └── contacts.service.ts │ │ └── store │ │ ├── contacts-actions.ts │ │ ├── contacts-effects.spec.ts │ │ ├── contacts-effects.ts │ │ ├── contacts-reducer.ts │ │ ├── contacts.store-facade.ts │ │ └── index.ts ├── assets │ ├── .gitkeep │ └── icons │ │ ├── icon-128x128.png │ │ ├── icon-144x144.png │ │ ├── icon-152x152.png │ │ ├── icon-192x192.png │ │ ├── icon-384x384.png │ │ ├── icon-512x512.png │ │ ├── icon-72x72.png │ │ └── icon-96x96.png ├── browserslist ├── environments │ ├── environment.dev.ts │ ├── environment.local.ts │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── index.html ├── karma.conf.js ├── main.ts ├── manifest.json ├── ngsw-config.json ├── polyfills.ts ├── styles.sass ├── test.ts ├── tsconfig.app.json ├── tsconfig.spec.json └── tslint.json ├── tsconfig.json └── tslint.json /.dockerignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules 3 | data 4 | volumes 5 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: ["avatsaev"] # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | data 8 | volumes 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # IDEs and editors 14 | /.idea 15 | .project 16 | .classpath 17 | .c9/ 18 | *.launch 19 | .settings/ 20 | *.sublime-workspace 21 | 22 | # IDE - VSCode 23 | .vscode/* 24 | !.vscode/settings.json 25 | !.vscode/tasks.json 26 | !.vscode/launch.json 27 | !.vscode/extensions.json 28 | 29 | # misc 30 | /.sass-cache 31 | /connect.lock 32 | /coverage 33 | /libpeerconnection.log 34 | npm-debug.log 35 | yarn-error.log 36 | testem.log 37 | /typings 38 | 39 | # System Files 40 | .DS_Store 41 | Thumbs.db 42 | -------------------------------------------------------------------------------- /Dockerfile: -------------------------------------------------------------------------------- 1 | 2 | ### STAGE 1: Build ### 3 | 4 | # We label our stage as 'builder' 5 | FROM node:10-alpine as builder 6 | 7 | 8 | COPY package.json package-lock.json ./ 9 | 10 | 11 | ## Storing node modules on a separate layer will prevent unnecessary npm installs at each build 12 | RUN npm ci && mkdir /ng-app && mv ./node_modules ./ng-app/ 13 | 14 | ## Move to /ng-app (eq: cd /ng-app) 15 | WORKDIR /ng-app 16 | 17 | 18 | # Copy everything from host to /ng-app in the container 19 | COPY . . 20 | 21 | ## Build the angular app in production mode and store the artifacts in dist folder 22 | ARG NG_ENV=production 23 | RUN npm run ng build -- --configuration=$NG_ENV 24 | 25 | 26 | ### STAGE 2: Setup ### 27 | 28 | FROM nginx:1.13.3-alpine 29 | 30 | ## Copy our default nginx config 31 | COPY nginx/default.conf /etc/nginx/conf.d/ 32 | 33 | ## Remove default nginx website 34 | RUN rm -rf /usr/share/nginx/html/* 35 | 36 | ## From 'builder' stage copy over the artifacts in dist folder to default nginx public folder 37 | COPY --from=builder /ng-app/dist/angular-contacts /usr/share/nginx/html 38 | 39 | CMD ["nginx", "-g", "daemon off;"] 40 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Aslan Vatsaev 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 |

4 | 5 | 6 | # Full Stack Angular PWA app with NgRx Store, Effects (HTTP+WebSockets), Entity & NestJS 7 | 8 | [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT) 9 | 10 | 11 | 12 | 13 | **Backend is available here: https://github.com/avatsaev/angular-contacts-app-example-api** 14 | 15 | 16 | **DEMO: https://angular-contacts-ngrx.surge.sh** 17 | 18 | This application uses [@ngrx/store](https://github.com/ngrx/platform/blob/master/docs/store/README.md) to manage application state, and [@ngrx/effects](https://github.com/ngrx/platform/blob/master/docs/effects/README.md) to manange side effects (http+sockets), It also uses NgRx fractal state management to leverage lazy loading of reducers and effects. 19 | 20 | [@ngrx/entity](https://github.com/ngrx/platform/tree/master/docs/entity) is released and available on NPM, @ngrx/entity helps to reduce boilerplate and [manipulate data](https://i.imgur.com/2IGdFRB.jpg) in a fast and easy fashion, you can find @ngrx/entity implementation in Contacts Reducer. 21 | 22 | 23 | # NGRX infrastructure 24 | 25 | 26 | ## Ngrx + Effects with an HTTP Service 27 | 28 | ![](https://i.imgur.com/qtjdPbe.png) 29 | 30 | 31 | ## Ngrx + Effects with Socket.IO 32 | 33 | ![](https://i.imgur.com/jIQ4Rd3.png) 34 | 35 | 36 | ## Lighthouse Audit: 37 | 38 | ![](https://i.imgur.com/UqW3s9M.png) 39 | 40 | 41 | ## Get started 42 | 43 | You can run the app with docker compose: 44 | 45 | ``` 46 | $ docker-compose up --build 47 | ``` 48 | 49 | The app will be available at: http://localhost:4000 50 | 51 | ![](http://i.imgur.com/TKWwYgQ.png) 52 | 53 | ![](http://i.imgur.com/GBBXbuu.png) 54 | 55 | ![](http://i.imgur.com/J4inaXx.png) 56 | 57 | ## Development server 58 | 59 | Start the backend server: https://github.com/avatsaev/angular-contacts-app-example-api 60 | 61 | 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. 62 | 63 | ## Code scaffolding 64 | 65 | Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|module`. 66 | 67 | ## Build 68 | 69 | 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. 70 | 71 | ## Running unit tests 72 | 73 | Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io). 74 | 75 | ## Running end-to-end tests 76 | 77 | Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/). 78 | Before running the tests make sure you are serving the app via `ng serve`. 79 | 80 | ## Further help 81 | 82 | 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). 83 | -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "angular-contacts": { 7 | "root": "", 8 | "sourceRoot": "src", 9 | "projectType": "application", 10 | "prefix": "app", 11 | "schematics": { 12 | "@schematics/angular:component": { 13 | "styleext": "sass", 14 | "changeDetection": "OnPush" 15 | } 16 | }, 17 | "architect": { 18 | "build": { 19 | "builder": "@angular-devkit/build-angular:browser", 20 | "options": { 21 | "outputPath": "dist/angular-contacts", 22 | "index": "src/index.html", 23 | "main": "src/main.ts", 24 | "polyfills": "src/polyfills.ts", 25 | "tsConfig": "src/tsconfig.app.json", 26 | "assets": [ 27 | "src/favicon.ico", 28 | "src/assets", 29 | "src/manifest.json", 30 | "src/manifest.json" 31 | ], 32 | "styles": [ 33 | "src/styles.sass", 34 | "node_modules/font-awesome/css/font-awesome.min.css", 35 | "node_modules/bootstrap/dist/css/bootstrap.min.css" 36 | ], 37 | "scripts": [] 38 | }, 39 | "configurations": { 40 | "production": { 41 | "fileReplacements": [ 42 | { 43 | "replace": "src/environments/environment.ts", 44 | "with": "src/environments/environment.prod.ts" 45 | } 46 | ], 47 | "optimization": true, 48 | "outputHashing": "all", 49 | "sourceMap": false, 50 | "extractCss": true, 51 | "namedChunks": false, 52 | "aot": true, 53 | "extractLicenses": true, 54 | "vendorChunk": false, 55 | "buildOptimizer": true, 56 | "serviceWorker": true, 57 | "ngswConfigPath": "src/ngsw-config.json" 58 | }, 59 | "dev": { 60 | "fileReplacements": [ 61 | { 62 | "replace": "src/environments/environment.ts", 63 | "with": "src/environments/environment.dev.ts" 64 | } 65 | ], 66 | "optimization": true, 67 | "outputHashing": "all", 68 | "sourceMap": false, 69 | "extractCss": true, 70 | "namedChunks": false, 71 | "aot": true, 72 | "extractLicenses": true, 73 | "vendorChunk": false, 74 | "buildOptimizer": true, 75 | "serviceWorker": false 76 | }, 77 | "local": { 78 | "fileReplacements": [ 79 | { 80 | "replace": "src/environments/environment.ts", 81 | "with": "src/environments/environment.local.ts" 82 | } 83 | ], 84 | "optimization": false, 85 | "outputHashing": "all", 86 | "sourceMap": true, 87 | "extractCss": true, 88 | "namedChunks": false, 89 | "aot": true, 90 | "extractLicenses": true, 91 | "vendorChunk": false, 92 | "buildOptimizer": false, 93 | "serviceWorker": false 94 | } 95 | } 96 | }, 97 | "serve": { 98 | "builder": "@angular-devkit/build-angular:dev-server", 99 | "options": { 100 | "browserTarget": "angular-contacts:build" 101 | }, 102 | "configurations": { 103 | "production": { 104 | "browserTarget": "angular-contacts:build:production" 105 | }, 106 | "dev": { 107 | "browserTarget": "angular-contacts:build:dev" 108 | }, 109 | "local": { 110 | "browserTarget": "angular-contacts:build:local" 111 | } 112 | } 113 | }, 114 | "extract-i18n": { 115 | "builder": "@angular-devkit/build-angular:extract-i18n", 116 | "options": { 117 | "browserTarget": "angular-contacts:build" 118 | } 119 | }, 120 | "test": { 121 | "builder": "@angular-devkit/build-angular:karma", 122 | "options": { 123 | "main": "src/test.ts", 124 | "polyfills": "src/polyfills.ts", 125 | "tsConfig": "src/tsconfig.spec.json", 126 | "karmaConfig": "src/karma.conf.js", 127 | "styles": [ 128 | "src/styles.sass" 129 | ], 130 | "scripts": [], 131 | "assets": [ 132 | "src/favicon.ico", 133 | "src/assets", 134 | "src/manifest.json", 135 | "src/manifest.json" 136 | ] 137 | } 138 | }, 139 | "lint": { 140 | "builder": "@angular-devkit/build-angular:tslint", 141 | "options": { 142 | "tsConfig": [ 143 | "src/tsconfig.app.json", 144 | "src/tsconfig.spec.json" 145 | ], 146 | "exclude": [ 147 | "**/node_modules/**" 148 | ] 149 | } 150 | } 151 | } 152 | }, 153 | "angular-contacts-e2e": { 154 | "root": "e2e/", 155 | "projectType": "application", 156 | "architect": { 157 | "e2e": { 158 | "builder": "@angular-devkit/build-angular:protractor", 159 | "options": { 160 | "protractorConfig": "e2e/protractor.conf.js", 161 | "devServerTarget": "angular-contacts:serve" 162 | } 163 | }, 164 | "lint": { 165 | "builder": "@angular-devkit/build-angular:tslint", 166 | "options": { 167 | "tsConfig": "e2e/tsconfig.e2e.json", 168 | "exclude": [ 169 | "**/node_modules/**" 170 | ] 171 | } 172 | } 173 | } 174 | } 175 | }, 176 | "defaultProject": "angular-contacts" 177 | } -------------------------------------------------------------------------------- /docker-compose.yml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | version: '3' 5 | 6 | services: 7 | db: 8 | image: postgres:11-alpine 9 | restart: always 10 | volumes: 11 | - ./volumes/contacts_db:/contacts_db 12 | environment: 13 | POSTGRES_USER: contacts_db 14 | POSTGRES_PASSWORD: contacts_db_pass 15 | POSTGRES_DB: contacts_db 16 | PGDATA: /contacts_db 17 | 18 | redis: 19 | image: redis:5-alpine 20 | volumes: 21 | - ./volumes/redis:/data 22 | 23 | 24 | api: 25 | image: avatsaev/angular-contacts-api:dev 26 | restart: always 27 | ports: 28 | - 3000:3000 29 | depends_on: 30 | - db 31 | - redis 32 | environment: 33 | SERVER_PORT: 3000 34 | POSTGRES_HOST: db 35 | POSTGRES_PORT: 5432 36 | POSTGRES_USER: contacts_db 37 | POSTGRES_PASSWORD: contacts_db_pass 38 | POSTGRES_DB: contacts_db 39 | REDIS_HOST: redis 40 | REDIS_PORT: 6379 41 | 42 | client: 43 | build: 44 | context: . 45 | args: 46 | NG_ENV: local 47 | restart: always 48 | ports: 49 | - 4000:80 50 | 51 | -------------------------------------------------------------------------------- /e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // Protractor configuration file, see link for more information 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts 3 | 4 | const { SpecReporter } = require('jasmine-spec-reporter'); 5 | 6 | exports.config = { 7 | allScriptsTimeout: 11000, 8 | specs: [ 9 | './src/**/*.e2e-spec.ts' 10 | ], 11 | capabilities: { 12 | 'browserName': 'chrome' 13 | }, 14 | directConnect: true, 15 | baseUrl: 'http://localhost:4200/', 16 | framework: 'jasmine', 17 | jasmineNodeOpts: { 18 | showColors: true, 19 | defaultTimeoutInterval: 30000, 20 | print: function() {} 21 | }, 22 | onPrepare() { 23 | require('ts-node').register({ 24 | project: require('path').join(__dirname, './tsconfig.e2e.json') 25 | }); 26 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 27 | } 28 | }; -------------------------------------------------------------------------------- /e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | 3 | describe('workspace-project App', () => { 4 | let page: AppPage; 5 | 6 | beforeEach(() => { 7 | page = new AppPage(); 8 | }); 9 | 10 | it('should display welcome message', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toEqual('Welcome to app!'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.css('app-root h1')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } -------------------------------------------------------------------------------- /nginx/default.conf: -------------------------------------------------------------------------------- 1 | 2 | 3 | server { 4 | 5 | listen 80; 6 | 7 | sendfile on; 8 | 9 | default_type application/octet-stream; 10 | 11 | gzip on; 12 | gzip_http_version 1.1; 13 | gzip_disable "MSIE [1-6]\."; 14 | gzip_min_length 1100; 15 | gzip_vary on; 16 | gzip_proxied expired no-cache no-store private auth; 17 | gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript; 18 | gzip_comp_level 9; 19 | 20 | 21 | root /usr/share/nginx/html; 22 | proxy_http_version 1.1; 23 | proxy_set_header Upgrade $http_upgrade; 24 | proxy_set_header Connection "upgrade"; 25 | 26 | 27 | location / { 28 | try_files $uri $uri/ /index.html =404; 29 | } 30 | 31 | } 32 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-contacts", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "build:dev": "ng build --configuration=dev", 9 | "build:prod": "ng build --prod", 10 | "test": "ng test", 11 | "lint": "ng lint angular-contacts", 12 | "e2e": "ng e2e", 13 | "deploy": "surge -d https://angular-contacts-ngrx.surge.sh -p dist/angular-contacts", 14 | "predeploy": "ng build --prod && cat dist/angular-contacts/index.html > dist/angular-contacts/200.html" 15 | }, 16 | "private": true, 17 | "dependencies": { 18 | "@angular/animations": "9.0.0", 19 | "@angular/common": "9.0.0", 20 | "@angular/compiler": "9.0.0", 21 | "@angular/core": "9.0.0", 22 | "@angular/forms": "9.0.0", 23 | "@angular/platform-browser": "9.0.0", 24 | "@angular/platform-browser-dynamic": "9.0.0", 25 | "@angular/pwa": "^0.900.1", 26 | "@angular/router": "9.0.0", 27 | "@angular/service-worker": "9.0.0", 28 | "@ngrx/effects": "^8.6.0", 29 | "@ngrx/entity": "^8.6.0", 30 | "@ngrx/store": "^8.6.0", 31 | "@ngrx/store-devtools": "^8.6.0", 32 | "bootstrap": "^4.4.1", 33 | "core-js": "3.1.3", 34 | "font-awesome": "^4.7.0", 35 | "jasmine-marbles": "^0.5.0", 36 | "ngx-socket-io": "^3.0.1", 37 | "rxjs": "6.5.4", 38 | "tslib": "^1.10.0", 39 | "zone.js": "^0.10.2" 40 | }, 41 | "devDependencies": { 42 | "@angular-devkit/build-angular": "~0.900.1", 43 | "@angular/cli": "^9.0.1", 44 | "@angular/compiler-cli": "^9.0.0", 45 | "@angular/language-service": "9.0.0", 46 | "@types/jasmine": "3.3.13", 47 | "@types/jasminewd2": "~2.0.6", 48 | "@types/node": "~12.0.7", 49 | "codelyzer": "~5.1.0", 50 | "jasmine-core": "~3.4.0", 51 | "jasmine-spec-reporter": "~4.2.1", 52 | "karma": "^4.1.0", 53 | "karma-chrome-launcher": "~2.2.0", 54 | "karma-coverage-istanbul-reporter": "~2.0.5", 55 | "karma-jasmine": "~2.0.1", 56 | "karma-jasmine-html-reporter": "^1.4.2", 57 | "protractor": "~5.4.2", 58 | "ts-node": "~8.2.0", 59 | "tslint": "~5.17.0", 60 | "typescript": "3.7.5" 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | 4 | 5 | const routes: Routes = [ 6 | { 7 | path: '', 8 | pathMatch: 'full', 9 | redirectTo: '/contacts' 10 | }, 11 | { 12 | path: 'contacts', loadChildren: 'src/app/views/contacts/contacts.module#ContactsModule', 13 | } 14 | ]; 15 | 16 | @NgModule({ 17 | imports: [RouterModule.forRoot(routes)], 18 | exports: [RouterModule] 19 | }) 20 | export class AppRoutingModule { } 21 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import {ChangeDetectionStrategy, Component, OnInit} from '@angular/core'; 2 | import {Observable} from 'rxjs'; 3 | import * as fromRoot from '@app/root-store'; 4 | import {select, Store} from '@ngrx/store'; 5 | 6 | @Component({ 7 | selector: 'app-root', 8 | template: ` 9 | 10 | 11 |
12 | 13 | 14 |
15 | `, 16 | changeDetection: ChangeDetectionStrategy.OnPush 17 | }) 18 | export class AppComponent implements OnInit { 19 | 20 | currentPageTitle$ = this.store.pipe( 21 | select(fromRoot.getCurrentTitle) 22 | ); 23 | constructor(private store: Store) {} 24 | 25 | ngOnInit() { 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | import { AppRoutingModule } from './app-routing.module'; 4 | import { AppComponent } from './app.component'; 5 | import { StoreDevtoolsModule } from '@ngrx/store-devtools'; 6 | import {StoreModule} from '@ngrx/store'; 7 | import {EffectsModule} from '@ngrx/effects'; 8 | import {SharedModule} from './core/modules/shared.module'; 9 | import {ReactiveFormsModule} from '@angular/forms'; 10 | import {HttpClientModule} from '@angular/common/http'; 11 | import {SocketIoModule} from 'ngx-socket-io'; 12 | import {ServiceWorkerModule } from '@angular/service-worker'; 13 | import {environment} from '@app/env'; 14 | import {ROOT_REDUCERS} from '@app/root-store'; 15 | 16 | @NgModule({ 17 | declarations: [ 18 | AppComponent 19 | ], 20 | imports: [ 21 | BrowserModule, 22 | AppRoutingModule, 23 | SharedModule, 24 | ReactiveFormsModule, 25 | HttpClientModule, 26 | SocketIoModule, 27 | StoreModule.forRoot(ROOT_REDUCERS), /* Initialise the Central Store with Application's main reducer*/ 28 | EffectsModule.forRoot([]), /* Start monitoring app's side effects */ 29 | !environment.production ? StoreDevtoolsModule.instrument({ maxAge: 50 }) : [], 30 | ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }) 31 | ], 32 | providers: [], 33 | bootstrap: [AppComponent] 34 | }) 35 | export class AppModule { } 36 | -------------------------------------------------------------------------------- /src/app/core/components/contact-details/contact-details-container.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 |
6 |
7 | Contact 8 |
9 |
10 |

Name: {{contact.name}}

11 |

Email: {{contact.email}}

12 |

Phone: {{contact.phone}}

13 |
14 |
15 | 16 | 17 | 18 | 19 | 20 |
21 |
22 | 23 |
24 | 25 | -------------------------------------------------------------------------------- /src/app/core/components/contact-details/contact-details-container.component.sass: -------------------------------------------------------------------------------- 1 | .contact-details-container 2 | animation: fadeIn 600ms 3 | -------------------------------------------------------------------------------- /src/app/core/components/contact-details/contact-details-container.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ContactDetailsContainerComponent } from './contact-details-container.component'; 4 | 5 | describe('ContactDetailsComponent', () => { 6 | let component: ContactDetailsContainerComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ ContactDetailsContainerComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ContactDetailsContainerComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should be created', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/core/components/contact-details/contact-details-container.component.ts: -------------------------------------------------------------------------------- 1 | import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; 2 | import { Contact } from '@app/core/models'; 3 | 4 | 5 | @Component({ 6 | selector: 'app-contact-details-container', 7 | templateUrl: './contact-details-container.component.html', 8 | styleUrls: ['./contact-details-container.component.sass'], 9 | changeDetection: ChangeDetectionStrategy.OnPush 10 | }) 11 | export class ContactDetailsContainerComponent implements OnInit { 12 | 13 | @Input() contact: Contact; 14 | @Output() edit = new EventEmitter(); 15 | @Output() remove = new EventEmitter(); 16 | 17 | constructor() { } 18 | 19 | ngOnInit() { 20 | 21 | } 22 | 23 | } 24 | -------------------------------------------------------------------------------- /src/app/core/components/contact-form/contact-form.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 5 | 6 |
7 | 8 |
9 | 10 | 11 |
12 | 13 | 14 | 15 |
16 | 17 | 18 |
19 | 20 | 21 |
22 | 28 |
29 | 30 |
-------------------------------------------------------------------------------- /src/app/core/components/contact-form/contact-form.component.sass: -------------------------------------------------------------------------------- 1 | .form 2 | animation: fadeIn 600ms 3 | -------------------------------------------------------------------------------- /src/app/core/components/contact-form/contact-form.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ContactFormComponent } from './contact-form.component'; 4 | import {FormsModule, ReactiveFormsModule} from '@angular/forms'; 5 | 6 | describe('ContactFormComponent', () => { 7 | let component: ContactFormComponent; 8 | let fixture: ComponentFixture; 9 | 10 | beforeEach(async(() => { 11 | TestBed.configureTestingModule({ 12 | declarations: [ ContactFormComponent ], 13 | imports: [ 14 | FormsModule, 15 | ReactiveFormsModule 16 | ] 17 | }) 18 | .compileComponents(); 19 | })); 20 | 21 | beforeEach(() => { 22 | fixture = TestBed.createComponent(ContactFormComponent); 23 | component = fixture.componentInstance; 24 | fixture.detectChanges(); 25 | }); 26 | 27 | it('should be created', () => { 28 | expect(component).toBeTruthy(); 29 | }); 30 | 31 | 32 | it('should call form.patchValue when ngOnChanges calls', () => { 33 | spyOn(component.form, 'patchValue'); 34 | const contact = { 35 | id: 1, 36 | name: 'test', 37 | email: 'test@avatsaev.com' 38 | }; 39 | component.contact = contact; 40 | component.ngOnChanges(); 41 | expect(component.form.patchValue).toHaveBeenCalledWith(contact); 42 | }); 43 | 44 | it('should call save.emit when submit calls', () => { 45 | spyOn(component.save, 'emit'); 46 | const contact = { 47 | id: 1, 48 | name: 'test', 49 | email: 'test@avatsaev.com', 50 | phone: '12345' 51 | }; 52 | component.form.setValue(contact); 53 | component.submit(); 54 | expect(component.save.emit).toHaveBeenCalledWith(contact); 55 | }); 56 | }); 57 | -------------------------------------------------------------------------------- /src/app/core/components/contact-form/contact-form.component.ts: -------------------------------------------------------------------------------- 1 | import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnInit, Output} from '@angular/core'; 2 | import { Contact } from '@app/core/models'; 3 | import {FormBuilder, FormGroup, Validators} from '@angular/forms'; 4 | 5 | 6 | @Component({ 7 | selector: 'app-contact-form', 8 | templateUrl: './contact-form.component.html', 9 | styleUrls: ['./contact-form.component.sass'], 10 | changeDetection: ChangeDetectionStrategy.OnPush 11 | }) 12 | export class ContactFormComponent implements OnInit, OnChanges { 13 | 14 | @Input() contact: Contact = { 15 | id: undefined, 16 | name: '', 17 | email: '', 18 | phone: '' 19 | }; 20 | 21 | @Output() save = new EventEmitter(); 22 | 23 | form: FormGroup; 24 | 25 | constructor(public formBuilder: FormBuilder) { 26 | this.form = this.formBuilder.group({ 27 | id: [this.contact.id], 28 | name: [this.contact.name, Validators.required], 29 | email: [this.contact.email, Validators.required], 30 | phone: [this.contact.phone] 31 | }); 32 | } 33 | 34 | ngOnInit() { 35 | 36 | } 37 | 38 | ngOnChanges() { 39 | if (this.contact) { 40 | this.form.patchValue({...this.contact}); 41 | } 42 | } 43 | 44 | submit() { 45 | if (this.form.valid) { 46 | this.save.emit(this.form.value); 47 | } 48 | 49 | } 50 | 51 | } 52 | -------------------------------------------------------------------------------- /src/app/core/components/contact-list/contact-list.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 36 | 37 | 38 | 39 |
#NameEmailPhone
{{c.id}}{{c.name}}{{c.email}}{{c.phone}} 18 | 19 | 20 | 21 | 24 | 25 | 28 | 29 | 32 | 33 | 34 | 35 |
40 | 41 | 42 | loading contacts... 43 | 44 | -------------------------------------------------------------------------------- /src/app/core/components/contact-list/contact-list.component.sass: -------------------------------------------------------------------------------- 1 | .contact-row 2 | animation: fadeIn 600ms 3 | 4 | .header 5 | width: 100% 6 | -------------------------------------------------------------------------------- /src/app/core/components/contact-list/contact-list.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ContactListComponent } from './contact-list.component'; 4 | 5 | describe('ContactListComponent', () => { 6 | let component: ContactListComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ ContactListComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ContactListComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should be created', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | 26 | 27 | it('should call show.emit when showDetails calls', () => { 28 | spyOn(component.show, 'emit'); 29 | const contact = { 30 | id: 1, 31 | name: 'test', 32 | email: 'test@avatsaev.com', 33 | phone: '12345' 34 | }; 35 | component.showDetails(contact); 36 | expect(component.show.emit).toHaveBeenCalledWith(contact); 37 | }); 38 | 39 | it('should call edit.emit when editContact calls', () => { 40 | spyOn(component.edit, 'emit'); 41 | const contact = { 42 | id: 1, 43 | name: 'test', 44 | email: 'test@avatsaev.com', 45 | phone: '12345' 46 | }; 47 | component.editContact(contact); 48 | expect(component.edit.emit).toHaveBeenCalledWith(contact); 49 | }); 50 | 51 | it('should call remove.emit when deleteContact calls', () => { 52 | spyOn(component.remove, 'emit'); 53 | const contact = { 54 | id: 1, 55 | name: 'test', 56 | email: 'test@avatsaev.com', 57 | phone: '12345' 58 | }; 59 | component.deleteContact(contact); 60 | expect(component.remove.emit).toHaveBeenCalledWith(contact); 61 | }); 62 | }); 63 | 64 | -------------------------------------------------------------------------------- /src/app/core/components/contact-list/contact-list.component.ts: -------------------------------------------------------------------------------- 1 | import {ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output} from '@angular/core'; 2 | import { Contact } from '@app/core/models'; 3 | 4 | @Component({ 5 | selector: 'app-contact-list', 6 | templateUrl: './contact-list.component.html', 7 | styleUrls: ['./contact-list.component.sass'], 8 | changeDetection: ChangeDetectionStrategy.OnPush 9 | }) 10 | export class ContactListComponent implements OnInit { 11 | 12 | 13 | @Input() contacts: Contact[]; 14 | @Output() edit = new EventEmitter(); 15 | @Output() show = new EventEmitter(); 16 | @Output() remove = new EventEmitter(); 17 | 18 | contactsTrackByFn = (index: number, contact: Contact) => contact.id; 19 | 20 | constructor() {} 21 | 22 | ngOnInit() {} 23 | 24 | 25 | showDetails(contact: Contact) { 26 | this.show.emit(contact); 27 | } 28 | 29 | editContact(contact: Contact) { 30 | this.edit.emit(contact); 31 | } 32 | 33 | deleteContact(contact: Contact) { 34 | this.remove.emit(contact); 35 | } 36 | 37 | } 38 | -------------------------------------------------------------------------------- /src/app/core/components/footer/footer.component.html: -------------------------------------------------------------------------------- 1 | 2 | Created by 3 | 4 | @avatsaev 5 | 6 | 7 | Source code on 8 | 9 | GitHub 10 | 11 | -------------------------------------------------------------------------------- /src/app/core/components/footer/footer.component.sass: -------------------------------------------------------------------------------- 1 | \:host 2 | display: block 3 | text-align: center 4 | width: 100% 5 | margin-top: 20px 6 | font-size: 14px 7 | color: #3a3a3a 8 | 9 | -------------------------------------------------------------------------------- /src/app/core/components/footer/footer.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { FooterComponent } from './footer.component'; 4 | 5 | describe('FooterComponent', () => { 6 | let component: FooterComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ FooterComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(FooterComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/core/components/footer/footer.component.ts: -------------------------------------------------------------------------------- 1 | import {ChangeDetectionStrategy, Component} from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-footer', 5 | templateUrl: './footer.component.html', 6 | styleUrls: ['./footer.component.sass'], 7 | changeDetection: ChangeDetectionStrategy.OnPush 8 | }) 9 | export class FooterComponent { } 10 | -------------------------------------------------------------------------------- /src/app/core/components/toolbar/toolbar.component.html: -------------------------------------------------------------------------------- 1 | 33 | -------------------------------------------------------------------------------- /src/app/core/components/toolbar/toolbar.component.sass: -------------------------------------------------------------------------------- 1 | .title 2 | .title-string 3 | font-size: 0.8em 4 | 5 | 6 | .nav-item 7 | cursor: pointer 8 | border: white 1px solid 9 | margin: 3px 10 | border-radius: 5px 11 | .nav-link 12 | cursor: pointer 13 | padding-left: 10px 14 | 15 | .nav-item:hover 16 | background: rgba(255, 255, 255, 0.15) 17 | 18 | 19 | .nav-item.active 20 | background: rgba(255, 255, 255, 0.15) 21 | -------------------------------------------------------------------------------- /src/app/core/components/toolbar/toolbar.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ToolbarComponent } from './toolbar.component'; 4 | import {RouterModule} from '@angular/router'; 5 | import {AppRoutingModule} from '../../../app-routing.module'; 6 | import {APP_BASE_HREF} from '@angular/common'; 7 | 8 | describe('ToolbarComponent', () => { 9 | let component: ToolbarComponent; 10 | let fixture: ComponentFixture; 11 | 12 | beforeEach(async(() => { 13 | TestBed.configureTestingModule({ 14 | imports: [AppRoutingModule], 15 | declarations: [ ToolbarComponent ], 16 | providers: [{provide: APP_BASE_HREF, useValue : '/' }] 17 | }) 18 | .compileComponents(); 19 | })); 20 | 21 | beforeEach(() => { 22 | fixture = TestBed.createComponent(ToolbarComponent); 23 | component = fixture.componentInstance; 24 | fixture.detectChanges(); 25 | }); 26 | 27 | it('should be created', () => { 28 | expect(component).toBeTruthy(); 29 | }); 30 | }); 31 | -------------------------------------------------------------------------------- /src/app/core/components/toolbar/toolbar.component.ts: -------------------------------------------------------------------------------- 1 | import {ChangeDetectionStrategy, Component, Input, OnInit} from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-toolbar', 5 | templateUrl: './toolbar.component.html', 6 | styleUrls: ['./toolbar.component.sass'], 7 | changeDetection: ChangeDetectionStrategy.OnPush 8 | }) 9 | export class ToolbarComponent implements OnInit { 10 | 11 | @Input() title; 12 | 13 | constructor() { } 14 | 15 | ngOnInit() { 16 | 17 | } 18 | 19 | } 20 | -------------------------------------------------------------------------------- /src/app/core/helpers/ngrx.helpers.ts: -------------------------------------------------------------------------------- 1 | import {Observable} from 'rxjs'; 2 | import {map} from 'rxjs/operators'; 3 | 4 | 5 | export function toPayload(k: r) { 6 | return (source: Observable) => 7 | source.pipe( map(data => ({r: data}))); 8 | } 9 | 10 | 11 | export const setState = (update: Partial, state: S) => ({ 12 | ...state, 13 | ...update 14 | }); 15 | -------------------------------------------------------------------------------- /src/app/core/models/contact.events.ts: -------------------------------------------------------------------------------- 1 | export enum ContactsEventTypes { 2 | // SERVER SIDE SOCKET ACTIONS 3 | LIVE_CREATED = '[Contacts] LIVE CREATED', 4 | LIVE_UPDATED = '[Contacts] LIVE UPDATED', 5 | LIVE_DELETED = '[Contacts] LIVE DELETED', 6 | } 7 | -------------------------------------------------------------------------------- /src/app/core/models/contact.ts: -------------------------------------------------------------------------------- 1 | export interface Contact { 2 | id?: number; 3 | name: string; 4 | email: string; 5 | phone?: string; 6 | } 7 | -------------------------------------------------------------------------------- /src/app/core/models/index.ts: -------------------------------------------------------------------------------- 1 | export * from './contact'; 2 | -------------------------------------------------------------------------------- /src/app/core/modules/shared.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import {ContactListComponent} from '../components/contact-list/contact-list.component'; 3 | import {ContactFormComponent} from '../components/contact-form/contact-form.component'; 4 | import {ContactDetailsContainerComponent} from '../components/contact-details/contact-details-container.component'; 5 | import {ToolbarComponent} from '../components/toolbar/toolbar.component'; 6 | import {CommonModule} from '@angular/common'; 7 | import {ReactiveFormsModule} from '@angular/forms'; 8 | import {RouterModule} from '@angular/router'; 9 | import {FooterComponent} from '@app/core/components/footer/footer.component'; 10 | 11 | @NgModule({ 12 | imports: [ 13 | CommonModule, 14 | ReactiveFormsModule, 15 | RouterModule 16 | ], 17 | declarations: [ 18 | ContactListComponent, 19 | ContactDetailsContainerComponent, 20 | ContactFormComponent, 21 | ToolbarComponent, 22 | FooterComponent 23 | ], 24 | exports: [ 25 | ContactListComponent, 26 | ContactDetailsContainerComponent, 27 | ContactFormComponent, 28 | ToolbarComponent, 29 | FooterComponent 30 | ] 31 | }) 32 | export class SharedModule { } 33 | -------------------------------------------------------------------------------- /src/app/core/resolvers/title.resolver.ts: -------------------------------------------------------------------------------- 1 | import {Injectable} from '@angular/core'; 2 | import {ActivatedRouteSnapshot, Resolve, RouterStateSnapshot} from '@angular/router'; 3 | import {Observable, of} from 'rxjs'; 4 | import * as fromRoot from '@app/root-store'; 5 | import {Store} from '@ngrx/store'; 6 | import {setCurrentTitle} from '../../store/actions/ui-actions'; 7 | 8 | @Injectable({ 9 | providedIn: 'root' 10 | }) 11 | 12 | export class TitleResolver implements Resolve { 13 | constructor(private store: Store) {} 14 | 15 | resolve(route: ActivatedRouteSnapshot, 16 | state: RouterStateSnapshot): Observable { 17 | 18 | this.store.dispatch(setCurrentTitle({payload: route.data.title})); 19 | 20 | return of(route.data.title); 21 | 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/app/store/actions/ui-actions.ts: -------------------------------------------------------------------------------- 1 | import {createAction, props} from '@ngrx/store'; 2 | 3 | export const setCurrentTitle = createAction( 4 | '[UI] Set current title', 5 | props<{payload: string}>() 6 | ); 7 | -------------------------------------------------------------------------------- /src/app/store/index.ts: -------------------------------------------------------------------------------- 1 | import {Action, ActionReducerMap, createFeatureSelector, createSelector} from '@ngrx/store'; 2 | 3 | import * as fromUi from './reducers/ui-reducer'; 4 | import {InjectionToken} from '@angular/core'; 5 | 6 | export interface State { 7 | ui: fromUi.UiState; 8 | // more state here 9 | } 10 | 11 | // AOT compatibility 12 | export const ROOT_REDUCERS = new InjectionToken>( 13 | 'ROOT_REDUCERS_TOKEN', 14 | { 15 | factory: () => ({ 16 | ui: fromUi.reducer 17 | }) 18 | } 19 | ); 20 | 21 | /// selectors 22 | export const getUiState = createFeatureSelector('ui'); 23 | 24 | export const getCurrentTitle = createSelector(getUiState, fromUi.getCurrentTitle); 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /src/app/store/reducers/ui-reducer.ts: -------------------------------------------------------------------------------- 1 | import {createReducer, on} from '@ngrx/store'; 2 | import {setCurrentTitle} from '@app/root-store/actions/ui-actions'; 3 | import {setState} from '@app/core/helpers/ngrx.helpers'; 4 | 5 | export interface UiState { 6 | currentTitle: string; 7 | } 8 | 9 | export const INIT_UI_STATE: UiState = { 10 | currentTitle: undefined 11 | }; 12 | 13 | export const reducer = createReducer( 14 | INIT_UI_STATE, 15 | on(setCurrentTitle, (state, {payload: currentTitle}) => 16 | setState({currentTitle}, state) 17 | ) 18 | ); 19 | 20 | 21 | // SELECTORS 22 | export const getCurrentTitle = (state: UiState) => state ? state.currentTitle : null; 23 | -------------------------------------------------------------------------------- /src/app/views/contacts/contact-details/contact-details.component.html: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /src/app/views/contacts/contact-details/contact-details.component.sass: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blixor/angular-app-contact/d46c8890b2d7fb253cce91b70fb37bb5eca34f75/src/app/views/contacts/contact-details/contact-details.component.sass -------------------------------------------------------------------------------- /src/app/views/contacts/contact-details/contact-details.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | import { ContactDetailsComponent } from './contact-details.component'; 3 | import {StoreModule} from '@ngrx/store'; 4 | import {RouterTestingModule} from '@angular/router/testing'; 5 | import * as fromContacts from '@app/contacts-store'; 6 | import {ContactsEffects} from '../store/contacts-effects'; 7 | import {Actions} from '@ngrx/effects'; 8 | import {ContactDetailsContainerComponent} from '@app/core/components/contact-details/contact-details-container.component'; 9 | import {HttpClientTestingModule} from '@angular/common/http/testing'; 10 | import {ContactsStoreFacade} from '@app/contacts-store/contacts.store-facade'; 11 | import { Router } from '@angular/router'; 12 | import {ContactsService} from '../services/contacts.service'; 13 | import {ContactsSocketService} from '../services/contacts-socket.service'; 14 | import {ROOT_REDUCERS} from '@app/root-store'; 15 | 16 | 17 | describe('ContactDetailsComponent', () => { 18 | let component: ContactDetailsComponent; 19 | let fixture: ComponentFixture; 20 | let contactsFacade: ContactsStoreFacade; 21 | let router: Router; 22 | 23 | beforeEach(async(() => { 24 | TestBed.configureTestingModule({ 25 | declarations: [ ContactDetailsComponent, ContactDetailsContainerComponent], 26 | imports: [ 27 | RouterTestingModule, 28 | HttpClientTestingModule, 29 | StoreModule.forRoot(ROOT_REDUCERS), 30 | StoreModule.forFeature('contacts', fromContacts.reducers), 31 | ], 32 | providers: [ 33 | ContactsEffects, 34 | Actions, 35 | ContactsService, 36 | ContactsStoreFacade, 37 | ContactsSocketService 38 | 39 | ] 40 | }) 41 | .compileComponents(); 42 | })); 43 | 44 | beforeEach(() => { 45 | fixture = TestBed.createComponent(ContactDetailsComponent); 46 | component = fixture.componentInstance; 47 | fixture.detectChanges(); 48 | contactsFacade = fixture.debugElement.injector.get(ContactsStoreFacade); 49 | router = fixture.debugElement.injector.get(Router); 50 | }); 51 | 52 | it('should be created', () => { 53 | expect(component).toBeTruthy(); 54 | }); 55 | 56 | it('should call contactsFacade.setCurrentContactId and router.navigate when editContact calls', () => { 57 | spyOn(router, 'navigate'); 58 | component.editContact({id: 1, name: 'test', email: 'test@avatsaev.com'}); 59 | expect(router.navigate).toHaveBeenCalledWith(['/contacts', 1, 'edit']); 60 | }); 61 | 62 | it('should call contactsFacade.setCurrentContactId when deleteContact calls', () => { 63 | spyOn(window, 'confirm').and.callFake(() => { 64 | return true; 65 | }); 66 | spyOn(contactsFacade, 'deleteContact'); 67 | component.deleteContact({id: 1, name: 'test', email: 'test@avatsaev.com'}); 68 | expect(contactsFacade.deleteContact).toHaveBeenCalledWith(1); 69 | }); 70 | 71 | it('should call redirectSub.unsubscribe when ngOnDestroy calls', () => { 72 | spyOn(component.redirectSub, 'unsubscribe'); 73 | component.ngOnDestroy(); 74 | expect(component.redirectSub.unsubscribe).toHaveBeenCalled(); 75 | }); 76 | }); 77 | -------------------------------------------------------------------------------- /src/app/views/contacts/contact-details/contact-details.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core'; 2 | import { ActivatedRoute, Router } from '@angular/router'; 3 | import { Subscription } from 'rxjs'; 4 | import {filter, map, switchMap} from 'rxjs/operators'; 5 | import { Contact } from '@app/core/models'; 6 | import { ContactsStoreFacade } from '@app/contacts-store/contacts.store-facade'; 7 | import { ContactsEffects } from '@app/contacts-store/contacts-effects'; 8 | 9 | @Component({ 10 | selector: 'app-contact-details', 11 | templateUrl: './contact-details.component.html', 12 | styleUrls: ['./contact-details.component.sass'], 13 | changeDetection: ChangeDetectionStrategy.OnPush 14 | }) 15 | export class ContactDetailsComponent implements OnInit, OnDestroy { 16 | 17 | contact$ = this.activatedRoute.params.pipe( 18 | map( params => params.contactId), 19 | switchMap(id => this.contactsFacade.getContactById(id)) 20 | ); 21 | 22 | redirectSub: Subscription; 23 | 24 | constructor( 25 | private activatedRoute: ActivatedRoute, 26 | private router: Router, 27 | private contactsFacade: ContactsStoreFacade, 28 | private contactsEffects: ContactsEffects 29 | ) {} 30 | 31 | ngOnInit() { 32 | 33 | // If the destroy effect fires, we check if the current id is the one being viewed, and redirect to index 34 | 35 | this.redirectSub = this.contactsEffects.destroy$.pipe( 36 | filter( action => 37 | action.id === +this.activatedRoute.snapshot.params.contactId 38 | ) 39 | ).subscribe(_ => this.router.navigate(['/contacts'])); 40 | 41 | this.activatedRoute.params.subscribe(params => { 42 | // update our id from the backend in case it was modified by another client 43 | this.contactsFacade.loadContact(+params.contactId); 44 | }); 45 | 46 | } 47 | 48 | 49 | editContact(contact: Contact) { 50 | this.router.navigate(['/contacts', contact.id, 'edit']); 51 | } 52 | 53 | deleteContact(contact: Contact) { 54 | const r = confirm('Are you sure?'); 55 | if (r) { 56 | this.contactsFacade.deleteContact(contact.id); 57 | } 58 | } 59 | 60 | ngOnDestroy() { 61 | this.redirectSub.unsubscribe(); 62 | } 63 | 64 | 65 | } 66 | -------------------------------------------------------------------------------- /src/app/views/contacts/contact-edit/contact-edit.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 |
6 | Edit Contact 7 |
8 |
9 | 10 | 11 |
12 | 13 |
14 | -------------------------------------------------------------------------------- /src/app/views/contacts/contact-edit/contact-edit.component.sass: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blixor/angular-app-contact/d46c8890b2d7fb253cce91b70fb37bb5eca34f75/src/app/views/contacts/contact-edit/contact-edit.component.sass -------------------------------------------------------------------------------- /src/app/views/contacts/contact-edit/contact-edit.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | import { ContactEditComponent } from './contact-edit.component'; 3 | import {ReactiveFormsModule} from '@angular/forms'; 4 | import {StoreModule} from '@ngrx/store'; 5 | import {RouterTestingModule} from '@angular/router/testing'; 6 | import * as fromContacts from '@app/contacts-store'; 7 | import {Actions} from '@ngrx/effects'; 8 | import {ContactsEffects} from '../store/contacts-effects'; 9 | import {ContactFormComponent} from '@app/core/components/contact-form/contact-form.component'; 10 | import {ContactsStoreFacade} from '@app/contacts-store/contacts.store-facade'; 11 | import {HttpClientTestingModule} from '@angular/common/http/testing'; 12 | import {ContactsService} from '../services/contacts.service'; 13 | import {ContactsSocketService} from '../services/contacts-socket.service'; 14 | import {ROOT_REDUCERS} from '@app/root-store'; 15 | 16 | 17 | 18 | describe('ContactEditComponent', () => { 19 | let component: ContactEditComponent; 20 | let fixture: ComponentFixture; 21 | let contactsFacade: ContactsStoreFacade; 22 | 23 | beforeEach(async(() => { 24 | TestBed.configureTestingModule({ 25 | declarations: [ ContactEditComponent, ContactFormComponent ], 26 | imports: [ 27 | ReactiveFormsModule, 28 | StoreModule.forRoot(ROOT_REDUCERS), 29 | StoreModule.forFeature('contacts', fromContacts.reducers), 30 | RouterTestingModule, 31 | HttpClientTestingModule 32 | ], 33 | providers: [ 34 | ContactsEffects, 35 | Actions, 36 | ContactsService, 37 | ContactsStoreFacade, 38 | ContactsSocketService 39 | 40 | ] 41 | }) 42 | .compileComponents(); 43 | })); 44 | 45 | beforeEach(() => { 46 | fixture = TestBed.createComponent(ContactEditComponent); 47 | component = fixture.componentInstance; 48 | fixture.detectChanges(); 49 | contactsFacade = fixture.debugElement.injector.get(ContactsStoreFacade); 50 | }); 51 | 52 | it('should be created', () => { 53 | expect(component).toBeTruthy(); 54 | }); 55 | 56 | 57 | it('should call contactsFacade.updateContact when submitted calls', () => { 58 | spyOn(contactsFacade, 'updateContact'); 59 | const contact = { 60 | id: 1, 61 | name: 'test', 62 | email: 'test@avatsaev.com' 63 | }; 64 | component.submitted(contact); 65 | expect(contactsFacade.updateContact).toHaveBeenCalledWith(contact); 66 | }); 67 | 68 | it('should call redirectSub.unsubscribe when ngOnDestroy calls', () => { 69 | spyOn(component.redirectSub, 'unsubscribe'); 70 | component.ngOnDestroy(); 71 | expect(component.redirectSub.unsubscribe).toHaveBeenCalled(); 72 | }); 73 | }); 74 | 75 | -------------------------------------------------------------------------------- /src/app/views/contacts/contact-edit/contact-edit.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core'; 2 | import { Subscription } from 'rxjs'; 3 | import { Contact } from '@app/core/models'; 4 | import { ActivatedRoute, Router } from '@angular/router'; 5 | import {filter, map, switchMap} from 'rxjs/operators'; 6 | import { ContactsStoreFacade } from '@app/contacts-store/contacts.store-facade'; 7 | import { ContactsEffects } from '@app/contacts-store/contacts-effects'; 8 | 9 | 10 | @Component({ 11 | selector: 'app-contact-edit', 12 | templateUrl: './contact-edit.component.html', 13 | styleUrls: ['./contact-edit.component.sass'], 14 | changeDetection: ChangeDetectionStrategy.OnPush 15 | }) 16 | export class ContactEditComponent implements OnInit, OnDestroy { 17 | 18 | contact$ = this.activatedRoute.params.pipe( 19 | map( params => params.contactId), 20 | switchMap(id => this.contactsFacade.getContactById(id)) 21 | ); 22 | redirectSub: Subscription; 23 | 24 | constructor( 25 | private activatedRoute: ActivatedRoute, 26 | private router: Router, 27 | private contactsFacade: ContactsStoreFacade, 28 | private contactsEffects: ContactsEffects 29 | ) { } 30 | 31 | ngOnInit() { 32 | 33 | // listen to update$ side effect, after updating redirect to the contact details view 34 | this.redirectSub = this.contactsEffects.update$.pipe( 35 | // make sure that the currently edited contact has been update and not some other contact (emitted by sockets) 36 | filter( action => action.contact.id === +this.activatedRoute.snapshot.params.contactId) 37 | ).subscribe( 38 | action => this.router.navigate(['/contacts', action.contact.id]) 39 | ); 40 | 41 | this.activatedRoute.params.subscribe(params => { 42 | // update our id from the backend in case it was modified by another client 43 | this.contactsFacade.loadContact(+params.contactId); 44 | }); 45 | 46 | } 47 | 48 | ngOnDestroy() { 49 | this.redirectSub.unsubscribe(); 50 | } 51 | 52 | submitted(contact: Contact) { 53 | this.contactsFacade.updateContact(contact); 54 | } 55 | 56 | } 57 | -------------------------------------------------------------------------------- /src/app/views/contacts/contact-new/contact-new.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 |
4 | New Contact 5 |
6 |
7 | 8 |
9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/app/views/contacts/contact-new/contact-new.component.sass: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blixor/angular-app-contact/d46c8890b2d7fb253cce91b70fb37bb5eca34f75/src/app/views/contacts/contact-new/contact-new.component.sass -------------------------------------------------------------------------------- /src/app/views/contacts/contact-new/contact-new.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ContactNewComponent } from './contact-new.component'; 4 | import {ReactiveFormsModule} from '@angular/forms'; 5 | import {combineReducers, StoreModule} from '@ngrx/store'; 6 | import * as fromContacts from '@app/contacts-store'; 7 | import {RouterTestingModule} from '@angular/router/testing'; 8 | import {Actions} from '@ngrx/effects'; 9 | import {ContactsEffects} from '../store/contacts-effects'; 10 | import {ContactFormComponent} from '@app/core/components/contact-form/contact-form.component'; 11 | import * as fromRoot from '@app/root-store'; 12 | import {HttpClientTestingModule} from '@angular/common/http/testing'; 13 | import {ContactsStoreFacade} from '@app/contacts-store/contacts.store-facade'; 14 | import { Router } from '@angular/router'; 15 | import {ContactsService} from '../services/contacts.service'; 16 | import {ContactsSocketService} from '../services/contacts-socket.service'; 17 | import {ROOT_REDUCERS} from '@app/root-store'; 18 | 19 | 20 | describe('ContactNewComponent', () => { 21 | let component: ContactNewComponent; 22 | let fixture: ComponentFixture; 23 | let contactsFacade: ContactsStoreFacade; 24 | let router: Router; 25 | 26 | beforeEach(async(() => { 27 | TestBed.configureTestingModule({ 28 | declarations: [ ContactNewComponent, ContactFormComponent ], 29 | imports: [ 30 | ReactiveFormsModule, 31 | StoreModule.forRoot(ROOT_REDUCERS), 32 | StoreModule.forFeature('contacts', fromContacts.reducers), 33 | RouterTestingModule, 34 | HttpClientTestingModule 35 | ], 36 | providers: [ 37 | ContactsEffects, 38 | Actions, 39 | ContactsService, 40 | ContactsStoreFacade, 41 | ContactsSocketService 42 | 43 | ] 44 | 45 | }) 46 | .compileComponents(); 47 | })); 48 | 49 | beforeEach(() => { 50 | fixture = TestBed.createComponent(ContactNewComponent); 51 | component = fixture.componentInstance; 52 | fixture.detectChanges(); 53 | contactsFacade = fixture.debugElement.injector.get(ContactsStoreFacade); 54 | router = fixture.debugElement.injector.get(Router); 55 | }); 56 | 57 | it('should be created', () => { 58 | expect(component).toBeTruthy(); 59 | }); 60 | 61 | 62 | it('should call contactsFacade.createContact and router.navigate when submitted calls', () => { 63 | spyOn(contactsFacade, 'createContact'); 64 | spyOn(router, 'navigate'); 65 | const contact = { 66 | id: 1, 67 | name: 'test', 68 | email: 'test@avatsaev.com' 69 | }; 70 | component.submitted(contact); 71 | expect(contactsFacade.createContact).toHaveBeenCalledWith(contact); 72 | expect(router.navigate).toHaveBeenCalledWith(['/contacts']); 73 | }); 74 | }); 75 | -------------------------------------------------------------------------------- /src/app/views/contacts/contact-new/contact-new.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, OnDestroy, OnInit} from '@angular/core'; 2 | import { Contact } from '@app/core/models'; 3 | import { Router} from '@angular/router'; 4 | import { ContactsStoreFacade} from '@app/contacts-store/contacts.store-facade'; 5 | 6 | @Component({ 7 | selector: 'app-contact-new', 8 | templateUrl: './contact-new.component.html', 9 | styleUrls: ['./contact-new.component.sass'], 10 | changeDetection: ChangeDetectionStrategy.OnPush 11 | }) 12 | export class ContactNewComponent implements OnInit, OnDestroy { 13 | 14 | constructor( 15 | private contactsFacade: ContactsStoreFacade, 16 | private router: Router 17 | ) { } 18 | 19 | ngOnInit() { 20 | } 21 | 22 | ngOnDestroy() { 23 | } 24 | 25 | submitted(contact: Contact) { 26 | this.contactsFacade.createContact(contact); 27 | this.router.navigate(['/contacts']); 28 | } 29 | 30 | } 31 | -------------------------------------------------------------------------------- /src/app/views/contacts/contacts-index/contacts-index.component.html: -------------------------------------------------------------------------------- 1 |

Contact list

2 | 3 | 4 | 5 | 6 | 11 | -------------------------------------------------------------------------------- /src/app/views/contacts/contacts-index/contacts-index.component.sass: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blixor/angular-app-contact/d46c8890b2d7fb253cce91b70fb37bb5eca34f75/src/app/views/contacts/contacts-index/contacts-index.component.sass -------------------------------------------------------------------------------- /src/app/views/contacts/contacts-index/contacts-index.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | import * as fromContacts from '@app/contacts-store'; 3 | import { ContactsIndexComponent } from './contacts-index.component'; 4 | import {StoreModule} from '@ngrx/store'; 5 | import {RouterTestingModule} from '@angular/router/testing'; 6 | import {ContactListComponent} from '@app/core/components/contact-list/contact-list.component'; 7 | import {ContactsStoreFacade} from '@app/contacts-store/contacts.store-facade'; 8 | 9 | import { Router } from '@angular/router'; 10 | import {ContactsSocketService} from '../services/contacts-socket.service'; 11 | import {ROOT_REDUCERS} from '@app/root-store'; 12 | 13 | 14 | describe('ContactsIndexComponent', () => { 15 | let component: ContactsIndexComponent; 16 | let fixture: ComponentFixture; 17 | let contactsFacade: ContactsStoreFacade; 18 | let router: Router; 19 | 20 | beforeEach(async(() => { 21 | TestBed.configureTestingModule({ 22 | 23 | declarations: [ ContactsIndexComponent, ContactListComponent ], 24 | imports: [ 25 | StoreModule.forRoot(ROOT_REDUCERS), 26 | StoreModule.forFeature('contacts', fromContacts.reducers), 27 | RouterTestingModule 28 | ], 29 | providers: [ 30 | ContactsStoreFacade, 31 | ContactsSocketService 32 | ] 33 | }) 34 | .compileComponents(); 35 | })); 36 | 37 | beforeEach(() => { 38 | fixture = TestBed.createComponent(ContactsIndexComponent); 39 | component = fixture.componentInstance; 40 | fixture.detectChanges(); 41 | contactsFacade = fixture.debugElement.injector.get(ContactsStoreFacade); 42 | router = fixture.debugElement.injector.get(Router); 43 | }); 44 | 45 | it('should be created', () => { 46 | expect(component).toBeTruthy(); 47 | }); 48 | 49 | 50 | it('should call contactsFacade.setCurrentContactId and router.navigate when editContact calls', () => { 51 | 52 | spyOn(router, 'navigate'); 53 | component.editContact({id: 1, name: 'test', email: 'test@avatsaev.com'}); 54 | expect(router.navigate).toHaveBeenCalledWith(['/contacts', 1, 'edit']); 55 | }); 56 | 57 | it('should call contactsFacade.setCurrentContactId and router.navigate when showContact calls', () => { 58 | 59 | spyOn(router, 'navigate'); 60 | component.showContact({id: 1, name: 'test', email: 'test@avatsaev.com'}); 61 | 62 | expect(router.navigate).toHaveBeenCalledWith(['/contacts', 1]); 63 | }); 64 | 65 | it('should call contactsFacade.setCurrentContactId when deleteContact calls', () => { 66 | spyOn(window, 'confirm').and.callFake(() => { 67 | return true; 68 | }); 69 | spyOn(contactsFacade, 'deleteContact'); 70 | component.deleteContact({id: 1, name: 'test', email: 'test@avatsaev.com'}); 71 | expect(contactsFacade.deleteContact).toHaveBeenCalledWith(1); 72 | }); 73 | }); 74 | -------------------------------------------------------------------------------- /src/app/views/contacts/contacts-index/contacts-index.component.ts: -------------------------------------------------------------------------------- 1 | import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'; 2 | import { Contact } from '@app/core/models'; 3 | import { Router } from '@angular/router'; 4 | import { ContactsStoreFacade } from '@app/contacts-store/contacts.store-facade'; 5 | 6 | 7 | @Component({ 8 | selector: 'app-contacts-index', 9 | templateUrl: './contacts-index.component.html', 10 | styleUrls: ['./contacts-index.component.sass'], 11 | changeDetection: ChangeDetectionStrategy.OnPush 12 | }) 13 | export class ContactsIndexComponent implements OnInit { 14 | 15 | contacts$ = this.contactsFacade.contacts$; 16 | 17 | constructor(private contactsFacade: ContactsStoreFacade, private router: Router) { } 18 | 19 | ngOnInit() {} 20 | 21 | editContact(contact: Contact) { 22 | this.router.navigate(['/contacts', contact.id, 'edit']); 23 | } 24 | 25 | showContact(contact: Contact) { 26 | this.router.navigate(['/contacts', contact.id]); 27 | } 28 | 29 | deleteContact(contact: Contact) { 30 | const r = confirm('Are you sure?'); 31 | if (r) { 32 | this.contactsFacade.deleteContact(contact.id); 33 | } 34 | } 35 | 36 | } 37 | -------------------------------------------------------------------------------- /src/app/views/contacts/contacts-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | import {ContactsComponent} from './contacts.component'; 4 | import {ContactNewComponent} from './contact-new/contact-new.component'; 5 | import {ContactsIndexComponent} from './contacts-index/contacts-index.component'; 6 | import {ContactDetailsComponent} from './contact-details/contact-details.component'; 7 | import {ContactEditComponent} from './contact-edit/contact-edit.component'; 8 | import {TitleResolver} from '@app/core/resolvers/title.resolver'; 9 | 10 | const routes: Routes = [ 11 | { 12 | path: '', 13 | component: ContactsComponent, 14 | children: [ 15 | { 16 | path: '', 17 | component: ContactsIndexComponent, 18 | data: {title: 'Contacts index'}, 19 | resolve: {title: TitleResolver} 20 | }, 21 | { 22 | path: 'new', 23 | component: ContactNewComponent, 24 | data: {title: 'New contact'}, 25 | resolve: {title: TitleResolver} 26 | }, 27 | { 28 | path: ':contactId', 29 | component: ContactDetailsComponent, 30 | data: {title: 'Contact details'}, 31 | resolve: {title: TitleResolver} 32 | }, 33 | { 34 | path: ':contactId/edit', 35 | component: ContactEditComponent, 36 | data: {title: 'Edit contact'}, 37 | resolve: {title: TitleResolver} 38 | } 39 | ] 40 | } 41 | ]; 42 | 43 | @NgModule({ 44 | imports: [RouterModule.forChild(routes)], 45 | exports: [RouterModule] 46 | }) 47 | export class ContactsRoutingModule { } 48 | -------------------------------------------------------------------------------- /src/app/views/contacts/contacts.component.ts: -------------------------------------------------------------------------------- 1 | import {ChangeDetectionStrategy, Component} from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-contacts', 5 | template: ``, 6 | changeDetection: ChangeDetectionStrategy.OnPush 7 | }) 8 | export class ContactsComponent {} 9 | -------------------------------------------------------------------------------- /src/app/views/contacts/contacts.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import {ContactsComponent} from './contacts.component'; 4 | import {ContactDetailsComponent} from './contact-details/contact-details.component'; 5 | import {ContactEditComponent} from './contact-edit/contact-edit.component'; 6 | import {ContactNewComponent} from './contact-new/contact-new.component'; 7 | import {ContactsIndexComponent} from './contacts-index/contacts-index.component'; 8 | import {SharedModule} from '@app/core/modules/shared.module'; 9 | import {ContactsRoutingModule} from './contacts-routing.module'; 10 | import {StoreModule} from '@ngrx/store'; 11 | import {EffectsModule} from '@ngrx/effects'; 12 | import {ContactsEffects} from './store/contacts-effects'; 13 | import {ContactsStoreFacade} from '@app/contacts-store/contacts.store-facade'; 14 | import {reducers} from '@app/contacts-store'; 15 | import {ContactsSocketService} from './services/contacts-socket.service'; 16 | import {ContactsService} from './services/contacts.service'; 17 | 18 | 19 | @NgModule({ 20 | imports: [ 21 | CommonModule, 22 | SharedModule, 23 | ContactsRoutingModule, 24 | StoreModule.forFeature('contacts', reducers), 25 | EffectsModule.forFeature([ContactsEffects]) 26 | ], 27 | declarations: [ 28 | ContactsComponent, 29 | ContactDetailsComponent, 30 | ContactEditComponent, 31 | ContactNewComponent, 32 | ContactsIndexComponent 33 | ], 34 | providers: [ContactsService, ContactsSocketService, ContactsStoreFacade] 35 | }) 36 | export class ContactsModule { } 37 | -------------------------------------------------------------------------------- /src/app/views/contacts/services/contacts-mock.service.ts: -------------------------------------------------------------------------------- 1 | import { Observable, of } from 'rxjs'; 2 | import { Contact } from '@app/core/models'; 3 | 4 | 5 | export class ContactsServiceMock { 6 | 7 | contacts = [{ 8 | id: 1, 9 | name: 'john', 10 | email: 'john@gmail.com' 11 | }, { 12 | id: 2, 13 | name: 'adam', 14 | email: 'adam@gmail.com' 15 | }]; 16 | 17 | index(): Observable { 18 | return of(this.contacts); 19 | } 20 | 21 | show(conactId: number): Observable { 22 | return of({ 23 | id: 1, 24 | name: 'john', 25 | email: 'john@gmail.com' 26 | }); 27 | } 28 | 29 | create(contact: Contact) { 30 | return of({ 31 | id: 4, 32 | name: 'john doe', 33 | email: 'john@gmail.com' 34 | }); 35 | } 36 | 37 | destroy(id: number): Observable { 38 | return of(1); 39 | } 40 | 41 | update(contact: Contact): Observable { 42 | return of(contact); 43 | } 44 | 45 | } 46 | -------------------------------------------------------------------------------- /src/app/views/contacts/services/contacts-socket.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, inject } from '@angular/core/testing'; 2 | 3 | import { ContactsSocketService } from './contacts-socket.service'; 4 | 5 | describe('ContactsSocketService', () => { 6 | beforeEach(() => { 7 | TestBed.configureTestingModule({ 8 | providers: [ContactsSocketService] 9 | }); 10 | }); 11 | 12 | it('should be created', inject([ContactsSocketService], (service: ContactsSocketService) => { 13 | expect(service).toBeTruthy(); 14 | })); 15 | }); 16 | -------------------------------------------------------------------------------- /src/app/views/contacts/services/contacts-socket.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import {Socket} from 'ngx-socket-io'; 3 | import {environment} from '@app/env'; 4 | import {ContactsEventTypes} from '@app/core/models/contact.events'; 5 | import {Contact} from '@app/core/models'; 6 | 7 | 8 | @Injectable() 9 | export class ContactsSocketService extends Socket { 10 | 11 | liveCreated$ = this.fromEvent(ContactsEventTypes.LIVE_CREATED); 12 | liveUpdated$ = this.fromEvent(ContactsEventTypes.LIVE_UPDATED); 13 | liveDeleted$ = this.fromEvent(ContactsEventTypes.LIVE_DELETED); 14 | 15 | constructor() { 16 | super({ 17 | url: `${environment.socketConfig.url}/contacts`, 18 | options: environment.socketConfig.opts 19 | }); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/app/views/contacts/services/contacts.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, inject } from '@angular/core/testing'; 2 | 3 | import { ContactsService } from './contacts.service'; 4 | import {HttpClientModule} from '@angular/common/http'; 5 | 6 | 7 | describe('ContactsService', () => { 8 | beforeEach(() => { 9 | TestBed.configureTestingModule({ 10 | providers: [ContactsService], 11 | imports: [ 12 | HttpClientModule 13 | ] 14 | }); 15 | }); 16 | 17 | it('should be created', inject([ContactsService], (service: ContactsService) => { 18 | expect(service).toBeTruthy(); 19 | })); 20 | }); 21 | -------------------------------------------------------------------------------- /src/app/views/contacts/services/contacts.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import {Observable} from 'rxjs'; 3 | import {HttpClient} from '@angular/common/http'; 4 | import {Contact} from '@app/core/models'; 5 | import {environment} from '@app/env'; 6 | 7 | 8 | @Injectable() 9 | export class ContactsService { 10 | 11 | constructor(private http: HttpClient ) { } 12 | 13 | 14 | index(): Observable { 15 | return this.http 16 | .get(`${environment.appApi.baseUrl}/contacts`); 17 | } 18 | 19 | show(conactId: number): Observable { 20 | return this.http 21 | .get(`${environment.appApi.baseUrl}/contacts/${conactId}`); 22 | } 23 | 24 | create(contact: Contact): Observable { 25 | return this.http.post(`${environment.appApi.baseUrl}/contacts`, contact); 26 | } 27 | 28 | update(contact: Partial): Observable { 29 | return this.http.patch(`${environment.appApi.baseUrl}/contacts/${contact.id}`, contact); 30 | } 31 | 32 | 33 | destroy(id: number): Observable { 34 | return this.http.delete(`${environment.appApi.baseUrl}/contacts/${id}`); 35 | } 36 | 37 | } 38 | -------------------------------------------------------------------------------- /src/app/views/contacts/store/contacts-actions.ts: -------------------------------------------------------------------------------- 1 | import {createAction, props} from '@ngrx/store'; 2 | import { Contact } from '@app/core/models'; 3 | 4 | export const loadAll = createAction( 5 | '[Contacts] Load all' 6 | ); 7 | 8 | export const load = createAction( 9 | '[Contacts] Load', 10 | props<{id: number}>() 11 | ); 12 | 13 | export const create = createAction( 14 | '[Contacts] Create', 15 | props<{contact: Contact}>() 16 | ); 17 | 18 | export const update = createAction( 19 | '[Contacts] Update', 20 | props<{contact: Partial}>() 21 | ); 22 | 23 | export const remove = createAction( 24 | '[Contacts] Remove', 25 | props<{id: number}>() 26 | ); 27 | 28 | export const loadAllSuccess = createAction( 29 | '[Contacts] Load all success', 30 | props<{contacts: Contact[]}>() 31 | ); 32 | 33 | export const loadSuccess = createAction( 34 | '[Contacts] Load success', 35 | props<{'contact': Contact}>() 36 | ); 37 | 38 | export const createSuccess = createAction( 39 | '[Contacts] Create success', 40 | props<{contact: Contact}>() 41 | ); 42 | 43 | export const updateSuccess = createAction( 44 | '[Contacts] Update success', 45 | props<{contact: Partial}>() 46 | ); 47 | 48 | 49 | export const removeSuccess = createAction( 50 | '[Contacts] Remove success', 51 | props<{id: number}>() 52 | ); 53 | 54 | 55 | export const failure = createAction( 56 | '[Contacts] Failure', 57 | props<{err: {concern: 'CREATE' | 'PATCH', error: any}}>() 58 | ); 59 | -------------------------------------------------------------------------------- /src/app/views/contacts/store/contacts-effects.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | import { provideMockActions } from '@ngrx/effects/testing'; 3 | import { Observable } from 'rxjs'; 4 | import { hot, cold } from 'jasmine-marbles'; 5 | import { ContactsEffects } from './contacts-effects'; 6 | 7 | import { ContactsServiceMock } from 'src/app/views/contacts/services/contacts-mock.service'; 8 | import {ContactsService} from '../services/contacts.service'; 9 | import {ContactsSocketService} from '../services/contacts-socket.service'; 10 | import { 11 | create, createSuccess, 12 | load, 13 | loadAll, 14 | loadAllSuccess, 15 | loadSuccess, 16 | remove, 17 | removeSuccess, update, updateSuccess 18 | } from '@app/contacts-store/contacts-actions'; 19 | 20 | describe('Contacts Effects', () => { 21 | let actions$: Observable; 22 | let effects: ContactsEffects; 23 | let contactsService: any; 24 | 25 | beforeEach(() => { 26 | TestBed.configureTestingModule({ 27 | providers: [ 28 | ContactsEffects, 29 | provideMockActions(() => actions$), 30 | { provide: ContactsService, useClass: ContactsServiceMock }, 31 | ContactsSocketService 32 | ] 33 | }); 34 | 35 | effects = TestBed.get(ContactsEffects); 36 | contactsService = TestBed.get(ContactsService); 37 | }); 38 | 39 | 40 | it('should dispatch LoadAllSuccess Action when the contacts are fetched from server', () => { 41 | const actionDispatched = loadAll(); 42 | const actionExpected = loadAllSuccess({contact: contactsService.contacts}); 43 | 44 | actions$ = hot('--a-', { a: actionDispatched }); 45 | const expected = cold('--b', { b: actionExpected }); 46 | expect(effects.loadAll$).toBeObservable(expected); 47 | }); 48 | 49 | it('should dispatch LoadSuccess Action when specific contact is fetched', () => { 50 | const actionDispatched = load({id: 1}); 51 | const actionExpected = loadSuccess({contact: { 52 | id: 1, 53 | name: 'john', 54 | email: 'john@gmail.com' 55 | }}); 56 | 57 | actions$ = hot('--a-', { a: actionDispatched }); 58 | const expected = cold('--b', { b: actionExpected }); 59 | expect(effects.load$).toBeObservable(expected); 60 | }); 61 | 62 | it('should dispatch DeleteSuccess Action when specific contact is deleted', () => { 63 | const actionDispatched = remove({id: 1}); 64 | const actionExpected = removeSuccess({id: 1}); 65 | 66 | actions$ = hot('--a-', { a: actionDispatched }); 67 | const expected = cold('--b', { b: actionExpected }); 68 | expect(effects.destroy$).toBeObservable(expected); 69 | }); 70 | 71 | it('should dispatch CreateSuccess Action when specific contact is created', () => { 72 | const actionDispatched = create({contact: { 73 | id: 4, 74 | name: 'john doe', 75 | email: 'john@gmail.com' 76 | }}); 77 | const actionExpected = createSuccess({contact: { 78 | id: 4, 79 | name: 'john doe', 80 | email: 'john@gmail.com' 81 | }}); 82 | 83 | actions$ = hot('--a-', { a: actionDispatched }); 84 | const expected = cold('--b', { b: actionExpected }); 85 | expect(effects.create$).toBeObservable(expected); 86 | }); 87 | 88 | it('should dispatch UpdateSuccess Action when specific contact is updated', () => { 89 | 90 | const actionDispatched = update({contact: { 91 | id: 4, 92 | name: 'john doe', 93 | email: 'john@gmail.com' 94 | }}); 95 | 96 | const actionExpected = updateSuccess({contact: { 97 | id: 4, 98 | name: 'john doe', 99 | email: 'john@gmail.com' 100 | }}); 101 | 102 | actions$ = hot('--a-', { a: actionDispatched }); 103 | const expected = cold('--b', { b: actionExpected }); 104 | expect(effects.update$).toBeObservable(expected); 105 | }); 106 | 107 | }); 108 | -------------------------------------------------------------------------------- /src/app/views/contacts/store/contacts-effects.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { of } from 'rxjs'; 3 | import { 4 | catchError, 5 | exhaustMap, 6 | map, pluck, 7 | startWith, 8 | switchMap 9 | } from 'rxjs/operators'; 10 | import {Actions, createEffect, Effect, ofType} from '@ngrx/effects'; 11 | import {ContactsService} from '../services/contacts.service'; 12 | import {ContactsSocketService} from '../services/contacts-socket.service'; 13 | import { 14 | create, 15 | createSuccess, 16 | failure, 17 | load, 18 | loadAll, 19 | loadAllSuccess, 20 | loadSuccess, 21 | remove, 22 | removeSuccess, 23 | update, 24 | updateSuccess 25 | } from '@app/contacts-store/contacts-actions'; 26 | 27 | 28 | /** 29 | * Effects file is for isolating and managing side effects of the application in one place 30 | * Http requests, Sockets, Routing, LocalStorage, etc 31 | */ 32 | 33 | @Injectable() 34 | export class ContactsEffects { 35 | 36 | 37 | loadAll$ = createEffect( () => this.actions$.pipe( 38 | ofType(loadAll), /* When action is dispatched */ 39 | startWith(loadAll()), 40 | /* Hit the Contacts Index endpoint of our REST API */ 41 | /* Dispatch LoadAllSuccess action to the central store with id list returned by the backend as id*/ 42 | /* 'Contacts Reducers' will take care of the rest */ 43 | switchMap(() => this.contactsService.index().pipe( 44 | map(contacts => loadAllSuccess({contacts})) 45 | )), 46 | )); 47 | 48 | 49 | load$ = createEffect( () => this.actions$.pipe( 50 | ofType(load), 51 | pluck('id'), 52 | switchMap( id => this.contactsService.show(id).pipe( 53 | map(contact => loadSuccess({contact})) 54 | )) 55 | )); 56 | 57 | 58 | create$ = createEffect( () =>this.actions$.pipe( 59 | ofType(create), 60 | pluck('contact'), 61 | switchMap( contact => this.contactsService.create(contact).pipe( 62 | map(contact => createSuccess({contact})), 63 | catchError(err => { 64 | alert(err.message); 65 | return of(failure({err: {concern: 'CREATE', error: err}})); 66 | }) 67 | )) 68 | )); 69 | 70 | 71 | update$ = createEffect( () => this.actions$.pipe( 72 | ofType(update), 73 | pluck('contact'), 74 | exhaustMap( contact => this.contactsService.update(contact).pipe( 75 | map(contact => updateSuccess({contact})) 76 | )) 77 | )); 78 | 79 | destroy$ = createEffect( () => this.actions$.pipe( 80 | ofType(remove), 81 | pluck('id'), 82 | switchMap( id => this.contactsService.destroy(id).pipe( 83 | pluck('id'), 84 | map(id => removeSuccess({id})) 85 | )) 86 | )); 87 | 88 | // Socket Live Events 89 | 90 | @Effect() 91 | liveCreate$ = this.contactsSocket.liveCreated$.pipe( 92 | map(contact => createSuccess({contact})) 93 | ); 94 | 95 | 96 | @Effect() 97 | liveUpdate$ = this.contactsSocket.liveUpdated$.pipe( 98 | map(contact => updateSuccess({contact})) 99 | ); 100 | 101 | @Effect() 102 | liveDestroy$ = this.contactsSocket.liveDeleted$.pipe( 103 | map(id => removeSuccess({id})) 104 | ); 105 | 106 | constructor( 107 | private actions$: Actions, 108 | private contactsService: ContactsService, 109 | private contactsSocket: ContactsSocketService 110 | ) {} 111 | 112 | } 113 | -------------------------------------------------------------------------------- /src/app/views/contacts/store/contacts-reducer.ts: -------------------------------------------------------------------------------- 1 | import { Contact } from '@app/core/models'; 2 | import {EntityState, createEntityAdapter} from '@ngrx/entity'; 3 | import {createReducer, on} from '@ngrx/store'; 4 | import { 5 | createSuccess, 6 | loadAllSuccess, 7 | loadSuccess, removeSuccess, 8 | updateSuccess 9 | } from '@app/contacts-store/contacts-actions'; 10 | 11 | // This adapter will allow is to manipulate contacts (mostly CRUD operations) 12 | export const contactsAdapter = createEntityAdapter({ 13 | selectId: (contact: Contact) => contact.id, 14 | sortComparer: false 15 | }); 16 | 17 | // ----------------------------------------- 18 | // The shape of EntityState 19 | // ------------------------------------------ 20 | // interface EntityState { 21 | // ids: string[] | number[]; 22 | // entities: { [id: string]: Contact }; 23 | // } 24 | // ----------------------------------------- 25 | // -> ids arrays allow us to sort data easily 26 | // -> entities map allows us to access the data quickly without iterating/filtering though an array of objects 27 | 28 | export interface State extends EntityState { 29 | // additional props here 30 | } 31 | 32 | export const INIT_STATE: State = contactsAdapter.getInitialState({ 33 | // additional props default values here 34 | }); 35 | 36 | export const reducer = createReducer( 37 | INIT_STATE, 38 | on(loadAllSuccess, (state, {contacts}) => 39 | contactsAdapter.addAll(contacts, state) 40 | ), 41 | on(loadSuccess, (state, {contact}) => 42 | contactsAdapter.upsertOne(contact, state) 43 | ), 44 | on(createSuccess, (state, {contact}) => 45 | contactsAdapter.addOne(contact, state) 46 | ), 47 | on(updateSuccess, (state, {contact}) => 48 | contactsAdapter.updateOne({id: contact.id, changes: contact}, state) 49 | ), 50 | on(removeSuccess, (state, {id}) => 51 | contactsAdapter.removeOne(id, state) 52 | ) 53 | ); 54 | 55 | export const getContactById = (id: number) => (state: State) => state.entities[id]; 56 | -------------------------------------------------------------------------------- /src/app/views/contacts/store/contacts.store-facade.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import * as fromRoot from '@app/root-store'; 3 | import * as fromContacts from '@app/contacts-store'; 4 | import { select, Store } from '@ngrx/store'; 5 | 6 | import { Contact } from '@app/core/models'; 7 | import {create, load, remove, update} from '@app/contacts-store/contacts-actions'; 8 | 9 | @Injectable() 10 | export class ContactsStoreFacade { 11 | 12 | contacts$ = this.store.pipe( 13 | select(fromContacts.getAllContacts) 14 | ); 15 | 16 | constructor(private store: Store) { } 17 | 18 | loadContact(id: number) { 19 | this.store.dispatch(load({id})); 20 | } 21 | 22 | createContact(contact: Contact) { 23 | this.store.dispatch(create({contact})); 24 | } 25 | 26 | updateContact(contact: Contact) { 27 | this.store.dispatch(update({contact})); 28 | } 29 | 30 | deleteContact(id: number) { 31 | this.store.dispatch(remove({id})); 32 | } 33 | 34 | getContactById(id: number) { 35 | return this.store.pipe( 36 | select(fromContacts.getContactById(id)) 37 | ) 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/app/views/contacts/store/index.ts: -------------------------------------------------------------------------------- 1 | import * as fromContacts from './contacts-reducer'; 2 | import {Action, combineReducers, createFeatureSelector, createSelector} from '@ngrx/store'; 3 | 4 | export interface ContactsState { 5 | contacts: fromContacts.State; 6 | } 7 | 8 | /** Provide reducers with AoT-compilation compliance */ 9 | export function reducers(state: ContactsState | undefined, action: Action) { 10 | return combineReducers({ 11 | contacts: fromContacts.reducer 12 | })(state, action) 13 | } 14 | 15 | 16 | /** 17 | * The createFeatureSelector function selects a piece of state from the root of the state object. 18 | * This is used for selecting feature states that are loaded eagerly or lazily. 19 | */ 20 | 21 | export const getContactsState = createFeatureSelector('contacts'); 22 | 23 | export const getContactsEntitiesState = createSelector( 24 | getContactsState, 25 | state => state.contacts 26 | ); 27 | 28 | export const { 29 | selectAll: getAllContacts, 30 | } = fromContacts.contactsAdapter.getSelectors(getContactsEntitiesState); 31 | 32 | export const getContactById = (id: number) => createSelector( 33 | getContactsEntitiesState, 34 | fromContacts.getContactById(id) 35 | ); 36 | -------------------------------------------------------------------------------- /src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blixor/angular-app-contact/d46c8890b2d7fb253cce91b70fb37bb5eca34f75/src/assets/.gitkeep -------------------------------------------------------------------------------- /src/assets/icons/icon-128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blixor/angular-app-contact/d46c8890b2d7fb253cce91b70fb37bb5eca34f75/src/assets/icons/icon-128x128.png -------------------------------------------------------------------------------- /src/assets/icons/icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blixor/angular-app-contact/d46c8890b2d7fb253cce91b70fb37bb5eca34f75/src/assets/icons/icon-144x144.png -------------------------------------------------------------------------------- /src/assets/icons/icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blixor/angular-app-contact/d46c8890b2d7fb253cce91b70fb37bb5eca34f75/src/assets/icons/icon-152x152.png -------------------------------------------------------------------------------- /src/assets/icons/icon-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blixor/angular-app-contact/d46c8890b2d7fb253cce91b70fb37bb5eca34f75/src/assets/icons/icon-192x192.png -------------------------------------------------------------------------------- /src/assets/icons/icon-384x384.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blixor/angular-app-contact/d46c8890b2d7fb253cce91b70fb37bb5eca34f75/src/assets/icons/icon-384x384.png -------------------------------------------------------------------------------- /src/assets/icons/icon-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blixor/angular-app-contact/d46c8890b2d7fb253cce91b70fb37bb5eca34f75/src/assets/icons/icon-512x512.png -------------------------------------------------------------------------------- /src/assets/icons/icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blixor/angular-app-contact/d46c8890b2d7fb253cce91b70fb37bb5eca34f75/src/assets/icons/icon-72x72.png -------------------------------------------------------------------------------- /src/assets/icons/icon-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blixor/angular-app-contact/d46c8890b2d7fb253cce91b70fb37bb5eca34f75/src/assets/icons/icon-96x96.png -------------------------------------------------------------------------------- /src/browserslist: -------------------------------------------------------------------------------- 1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | # For IE 9-11 support, please uncomment the last line of the file and adjust as needed 5 | > 0.5% 6 | last 2 versions 7 | Firefox ESR 8 | not dead 9 | # IE 9-11 -------------------------------------------------------------------------------- /src/environments/environment.dev.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true, 3 | appApi: { 4 | baseUrl: 'http://dev.contacts.com:3000' 5 | }, 6 | socketConfig: { 7 | url: 'http://dev.contacts.com:3000', 8 | opts: { 9 | transports: ['websocket'] 10 | } 11 | } 12 | }; 13 | -------------------------------------------------------------------------------- /src/environments/environment.local.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: false, 3 | appApi: { 4 | baseUrl: 'http://localhost:3000' 5 | }, 6 | socketConfig: { 7 | url: 'http://localhost:3000', 8 | opts: { 9 | transports: ['websocket'] 10 | } 11 | } 12 | }; 13 | -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true, 3 | appApi: { 4 | baseUrl: 'https://contacts-api.vatsaev.com' 5 | }, 6 | socketConfig: { 7 | url: 'https://contacts-api.vatsaev.com', 8 | opts: { 9 | transports: ['websocket'] 10 | } 11 | } 12 | }; 13 | -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // This file can be replaced during build by using the `fileReplacements` array. 2 | // `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`. 3 | // The list of file replacements can be found in `angular.json`. 4 | 5 | export const environment = { 6 | production: false, 7 | appApi: { 8 | baseUrl: 'http://localhost:3000' 9 | }, 10 | socketConfig: { 11 | url: 'http://localhost:3000', 12 | opts: { 13 | transports: ['websocket'] 14 | } 15 | } 16 | }; 17 | 18 | /* 19 | * In development mode, to ignore zone related error stack frames such as 20 | * `zone.run`, `zoneDelegate.invokeTask` for easier debugging, you can 21 | * import the following file, but please comment it out in production mode 22 | * because it will have performance impact when throw error 23 | */ 24 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 25 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/blixor/angular-app-contact/d46c8890b2d7fb253cce91b70fb37bb5eca34f75/src/favicon.ico -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Angular Contacts 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src/karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, '../coverage'), 20 | reports: ['html', 'lcovonly'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false 30 | }); 31 | }; -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule).then(() => { 12 | if ('serviceWorker' in navigator && environment.production) { 13 | navigator.serviceWorker.register('/ngsw-worker.js'); 14 | } 15 | }).catch(err => console.log(err)); 16 | -------------------------------------------------------------------------------- /src/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-contacts", 3 | "short_name": "angular-contacts", 4 | "theme_color": "#1976d2", 5 | "background_color": "#fafafa", 6 | "display": "standalone", 7 | "scope": "/", 8 | "start_url": "/", 9 | "icons": [ 10 | { 11 | "src": "assets/icons/icon-72x72.png", 12 | "sizes": "72x72", 13 | "type": "image/png" 14 | }, 15 | { 16 | "src": "assets/icons/icon-96x96.png", 17 | "sizes": "96x96", 18 | "type": "image/png" 19 | }, 20 | { 21 | "src": "assets/icons/icon-128x128.png", 22 | "sizes": "128x128", 23 | "type": "image/png" 24 | }, 25 | { 26 | "src": "assets/icons/icon-144x144.png", 27 | "sizes": "144x144", 28 | "type": "image/png" 29 | }, 30 | { 31 | "src": "assets/icons/icon-152x152.png", 32 | "sizes": "152x152", 33 | "type": "image/png" 34 | }, 35 | { 36 | "src": "assets/icons/icon-192x192.png", 37 | "sizes": "192x192", 38 | "type": "image/png" 39 | }, 40 | { 41 | "src": "assets/icons/icon-384x384.png", 42 | "sizes": "384x384", 43 | "type": "image/png" 44 | }, 45 | { 46 | "src": "assets/icons/icon-512x512.png", 47 | "sizes": "512x512", 48 | "type": "image/png" 49 | } 50 | ] 51 | } 52 | -------------------------------------------------------------------------------- /src/ngsw-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "index": "/index.html", 3 | 4 | "dataGroups": [ 5 | { 6 | "name": "api", 7 | "urls": [ 8 | "https://contacts-api.vatsaev.com/**" 9 | ], 10 | "cacheConfig": { 11 | "strategy": "freshness", 12 | "maxSize": 100, 13 | "maxAge": "3d", 14 | "timeout": "5s" 15 | } 16 | } 17 | ], 18 | "assetGroups": [ 19 | { 20 | "name": "app", 21 | "installMode": "prefetch", 22 | "resources": { 23 | "files": [ 24 | "/favicon.ico", 25 | "/index.html", 26 | "/*.css", 27 | "/*.js" 28 | ] 29 | } 30 | }, { 31 | "name": "assets", 32 | "installMode": "lazy", 33 | "updateMode": "prefetch", 34 | "resources": { 35 | "files": [ 36 | "/assets/**", 37 | "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)" 38 | ] 39 | } 40 | } 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/guide/browser-support 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 22 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 23 | 24 | /** 25 | * Web Animations `@angular/platform-browser/animations` 26 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. 27 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). 28 | */ 29 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 30 | 31 | /** 32 | * By default, zone.js will patch all possible macroTask and DomEvents 33 | * user can disable parts of macroTask/DomEvents patch by setting following flags 34 | * because those flags need to be set before `zone.js` being loaded, and webpack 35 | * will put import in the top of bundle, so user need to create a separate file 36 | * in this directory (for example: zone-flags.ts), and put the following flags 37 | * into that file, and then add the following code before importing zone.js. 38 | * import './zone-flags.ts'; 39 | * 40 | * The flags allowed in zone-flags.ts are listed here. 41 | * 42 | * The following flags will work for all browsers. 43 | * 44 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame 45 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick 46 | * (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames 47 | * 48 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js 49 | * with the following flag, it will bypass `zone.js` patch for IE/Edge 50 | * 51 | * (window as any).__Zone_enable_cross_context_check = true; 52 | * 53 | */ 54 | 55 | /*************************************************************************************************** 56 | * Zone JS is required by default for Angular itself. 57 | */ 58 | import 'zone.js/dist/zone'; // Included with Angular CLI. 59 | 60 | 61 | /*************************************************************************************************** 62 | * APPLICATION IMPORTS 63 | */ 64 | 65 | 66 | (window as any).global = window; 67 | -------------------------------------------------------------------------------- /src/styles.sass: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | body 3 | padding-top: 5rem 4 | font-family: sans-serif 5 | 6 | button 7 | cursor: pointer 8 | 9 | 10 | @keyframes fadeIn 11 | from 12 | opacity: 0 13 | to 14 | opacity: 1 15 | 16 | 17 | .btn 18 | margin: 3px 19 | -------------------------------------------------------------------------------- /src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "es2015", 6 | "types": [] 7 | }, 8 | "exclude": [ 9 | "src/test.ts", 10 | "**/*.spec.ts" 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /src/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "module": "commonjs", 6 | "types": [ 7 | "jasmine", 8 | "node" 9 | ] 10 | }, 11 | "files": [ 12 | "test.ts", 13 | "polyfills.ts" 14 | ], 15 | "include": [ 16 | "**/*.spec.ts", 17 | "**/*.d.ts" 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /src/tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tslint.json", 3 | "rules": { 4 | "directive-selector": [ 5 | true, 6 | "attribute", 7 | "app", 8 | "camelCase" 9 | ], 10 | "component-selector": [ 11 | true, 12 | "element", 13 | "app", 14 | "kebab-case" 15 | ] 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "importHelpers": true, 6 | "outDir": "./dist/out-tsc", 7 | "sourceMap": true, 8 | "declaration": false, 9 | "moduleResolution": "node", 10 | "emitDecoratorMetadata": true, 11 | "experimentalDecorators": true, 12 | "target": "es5", 13 | "typeRoots": [ 14 | "node_modules/@types" 15 | ], 16 | "lib": [ 17 | "es2017", 18 | "dom" 19 | ], 20 | "paths": { 21 | 22 | "@app/core/*": ["src/app/core/*"], 23 | 24 | "@app/root-store/*": ["src/app/store/*"], 25 | "@app/root-store": ["src/app/store/index"], 26 | 27 | "@app/contacts-store/*": ["src/app/views/contacts/store/*"], 28 | "@app/contacts-store": ["src/app/views/contacts/store/index"], 29 | 30 | "@app/env": ["src/environments/environment"] 31 | } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tslint:recommended", 3 | "rulesDirectory": [ 4 | "codelyzer" 5 | ], 6 | "rules": { 7 | "array-type": false, 8 | "arrow-parens": false, 9 | "deprecation": { 10 | "severity": "warn" 11 | }, 12 | "import-blacklist": [ 13 | true, 14 | "rxjs/Rx" 15 | ], 16 | "interface-name": false, 17 | "max-classes-per-file": false, 18 | "max-line-length": [ 19 | true, 20 | 140 21 | ], 22 | "member-access": false, 23 | "member-ordering": [ 24 | true, 25 | { 26 | "order": [ 27 | "static-field", 28 | "instance-field", 29 | "static-method", 30 | "instance-method" 31 | ] 32 | } 33 | ], 34 | "no-consecutive-blank-lines": false, 35 | "no-console": [ 36 | true, 37 | "debug", 38 | "info", 39 | "time", 40 | "timeEnd", 41 | "trace" 42 | ], 43 | "no-empty": false, 44 | "no-inferrable-types": [ 45 | true, 46 | "ignore-params" 47 | ], 48 | "no-non-null-assertion": true, 49 | "no-redundant-jsdoc": true, 50 | "no-switch-case-fall-through": true, 51 | "no-use-before-declare": true, 52 | "no-var-requires": false, 53 | "object-literal-key-quotes": [ 54 | true, 55 | "as-needed" 56 | ], 57 | "object-literal-sort-keys": false, 58 | "ordered-imports": false, 59 | "quotemark": [ 60 | true, 61 | "single" 62 | ], 63 | "trailing-comma": false, 64 | "no-output-on-prefix": true, 65 | "use-input-property-decorator": true, 66 | "use-output-property-decorator": true, 67 | "use-host-property-decorator": true, 68 | "no-input-rename": true, 69 | "no-output-rename": true, 70 | "use-life-cycle-interface": true, 71 | "use-pipe-transform-interface": true, 72 | "component-class-suffix": true, 73 | "directive-class-suffix": true 74 | } 75 | } 76 | --------------------------------------------------------------------------------