├── .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 | [](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 | 
29 |
30 |
31 | ## Ngrx + Effects with Socket.IO
32 |
33 | 
34 |
35 |
36 | ## Lighthouse Audit:
37 |
38 | 
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 | 
52 |
53 | 
54 |
55 | 
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 |
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 |
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 |
--------------------------------------------------------------------------------
/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 |
11 |
12 |
13 | {{c.id}} |
14 | {{c.name}} |
15 | {{c.email}} |
16 | {{c.phone}} |
17 |
18 |
19 |
20 |
21 |
24 |
25 |
28 |
29 |
32 |
33 |
34 |
35 | |
36 |
37 |
38 |
39 |
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 |
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 |
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 |
--------------------------------------------------------------------------------