├── .gitignore ├── LICENSE ├── README.md ├── angular.json ├── browserslist ├── e2e ├── protractor.conf.js ├── src │ ├── app.e2e-spec.ts │ └── app.po.ts └── tsconfig.json ├── karma.conf.js ├── mock-api-data.json ├── package-lock.json ├── package.json ├── src ├── app │ ├── admin │ │ ├── admin-dashboard │ │ │ ├── admin-dashboard.component.html │ │ │ ├── admin-dashboard.component.scss │ │ │ ├── admin-dashboard.component.spec.ts │ │ │ └── admin-dashboard.component.ts │ │ ├── admin-login │ │ │ ├── admin-login.component.html │ │ │ ├── admin-login.component.scss │ │ │ ├── admin-login.component.spec.ts │ │ │ └── admin-login.component.ts │ │ ├── admin.module.ts │ │ ├── services │ │ │ ├── admin.service.spec.ts │ │ │ └── admin.service.ts │ │ └── user-crud │ │ │ ├── user-crud.component.html │ │ │ ├── user-crud.component.scss │ │ │ ├── user-crud.component.spec.ts │ │ │ └── user-crud.component.ts │ ├── app-routing.module.ts │ ├── app.component.html │ ├── app.component.scss │ ├── app.component.spec.ts │ ├── app.component.ts │ ├── app.module.ts │ ├── contact-us │ │ ├── contact-us.component.html │ │ ├── contact-us.component.scss │ │ ├── contact-us.component.spec.ts │ │ └── contact-us.component.ts │ ├── core │ │ ├── core.module.ts │ │ ├── interceptors │ │ │ └── http.interceptors.ts │ │ ├── models │ │ │ └── object-model.ts │ │ └── services │ │ │ ├── api.service.spec.ts │ │ │ └── api.service.ts │ ├── customer │ │ ├── buyer │ │ │ ├── buyer-dashboard │ │ │ │ ├── buyer-dashboard.component.html │ │ │ │ ├── buyer-dashboard.component.scss │ │ │ │ ├── buyer-dashboard.component.spec.ts │ │ │ │ └── buyer-dashboard.component.ts │ │ │ └── checkout │ │ │ │ ├── checkout.component.html │ │ │ │ ├── checkout.component.scss │ │ │ │ ├── checkout.component.spec.ts │ │ │ │ └── checkout.component.ts │ │ ├── customer.module.ts │ │ ├── seller │ │ │ └── seller-dashboard │ │ │ │ ├── seller-dashboard.component.html │ │ │ │ ├── seller-dashboard.component.scss │ │ │ │ ├── seller-dashboard.component.spec.ts │ │ │ │ └── seller-dashboard.component.ts │ │ ├── services │ │ │ ├── customer.service.spec.ts │ │ │ └── customer.service.ts │ │ └── signin-signup │ │ │ ├── signin-signup.component.html │ │ │ ├── signin-signup.component.scss │ │ │ ├── signin-signup.component.spec.ts │ │ │ └── signin-signup.component.ts │ ├── home │ │ ├── home.component.html │ │ ├── home.component.scss │ │ ├── home.component.spec.ts │ │ └── home.component.ts │ ├── product │ │ └── product-crud │ │ │ ├── product-crud.component.html │ │ │ ├── product-crud.component.scss │ │ │ ├── product-crud.component.spec.ts │ │ │ └── product-crud.component.ts │ ├── shared │ │ ├── directives │ │ │ ├── number-only.directive.spec.ts │ │ │ └── number-only.directive.ts │ │ ├── layouts │ │ │ ├── footer │ │ │ │ ├── footer.component.html │ │ │ │ ├── footer.component.scss │ │ │ │ ├── footer.component.spec.ts │ │ │ │ └── footer.component.ts │ │ │ ├── header │ │ │ │ ├── header.component.html │ │ │ │ ├── header.component.scss │ │ │ │ ├── header.component.spec.ts │ │ │ │ └── header.component.ts │ │ │ └── page-not-found-error │ │ │ │ ├── page-not-found-error.component.html │ │ │ │ ├── page-not-found-error.component.scss │ │ │ │ ├── page-not-found-error.component.spec.ts │ │ │ │ └── page-not-found-error.component.ts │ │ ├── services │ │ │ ├── auth-gaurd.service.spec.ts │ │ │ ├── auth-gaurd.service.ts │ │ │ ├── login-signup.service.spec.ts │ │ │ ├── login-signup.service.ts │ │ │ ├── product.service.spec.ts │ │ │ ├── product.service.ts │ │ │ ├── user.service.spec.ts │ │ │ └── user.service.ts │ │ └── shared.module.ts │ └── user-profile │ │ ├── user-profile.component.html │ │ ├── user-profile.component.scss │ │ ├── user-profile.component.spec.ts │ │ └── user-profile.component.ts ├── assets │ ├── .gitkeep │ └── i18n │ │ ├── en.json │ │ └── hn.json ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── index.html ├── main.ts ├── polyfills.ts ├── styles.scss └── test.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json /.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 | 8 | # dependencies 9 | /node_modules 10 | 11 | # IDEs and editors 12 | /.idea 13 | .project 14 | .classpath 15 | .c9/ 16 | *.launch 17 | .settings/ 18 | *.sublime-workspace 19 | 20 | # IDE - VSCode 21 | .vscode/* 22 | !.vscode/settings.json 23 | !.vscode/tasks.json 24 | !.vscode/launch.json 25 | !.vscode/extensions.json 26 | 27 | # misc 28 | /.sass-cache 29 | /connect.lock 30 | /coverage 31 | /libpeerconnection.log 32 | npm-debug.log 33 | yarn-error.log 34 | testem.log 35 | /typings 36 | 37 | # System Files 38 | .DS_Store 39 | Thumbs.db 40 | 41 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Srikrushna Pal 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 | # angular-ecommerce 2 | Ecommerce portal where some of the user(Seller) who want to sell the product and services using this and some of the user(Buyer/End User) who needs the product they can buy from the user(Seller) 3 | 4 | # Project Setup 5 | **Step 1:** clone the project: ``` git clone https://github.com/SrikrushnaP/angular-ecommerce.git ``` 6 | 7 | **Step 2:** ``` cd angular-ecommerce ``` 8 | 9 | **Step 3:** ``` git pull origin develop ``` or ``` master ``` 10 | 11 | **Step 4:** Install Node form https://nodejs.org/en/ 12 | 13 | **Step 5:** ``` npm install ``` 14 | 15 | **Step 6:** ``` npm install -g json-server ``` (Install JSON mock server) 16 | 17 | **Step 7:** ```npm install -g @angular/cli ``` (Install angular CLI) 18 | 19 | **Step 8:** Open two terminal/command prompt 20 | 21 | **Step 9:** In one run command: ``` ng serve ``` 22 | 23 | **Step 10:** Another one run command: ``` json-server --watch mock-api-data.json ``` 24 | 25 | 26 | Now you can ready to go 27 | 28 | **Step 11:** Open your browser and type: http://localhost:4200 29 | 30 | If you want to see the mock api on your browser you can hit the link: http://localhost:3000/ 31 | 32 | If you want to learn more on mock API you can go through the doc https://www.npmjs.com/package/json-server 33 | 34 | # Project Documentation: 35 | https://docs.google.com/document/d/1NdB3SdAbKSFcPooap-ddpHdQQxBDvAieH2bPF4NCLMU/edit?usp=sharing 36 | -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "angular-ecommerce": { 7 | "projectType": "application", 8 | "schematics": { 9 | "@schematics/angular:component": { 10 | "style": "scss" 11 | } 12 | }, 13 | "root": "", 14 | "sourceRoot": "src", 15 | "prefix": "app", 16 | "architect": { 17 | "build": { 18 | "builder": "@angular-devkit/build-angular:browser", 19 | "options": { 20 | "outputPath": "dist/angular-ecommerce", 21 | "index": "src/index.html", 22 | "main": "src/main.ts", 23 | "polyfills": "src/polyfills.ts", 24 | "tsConfig": "tsconfig.app.json", 25 | "assets": [ 26 | "src/favicon.ico", 27 | "src/assets" 28 | ], 29 | "styles": [ 30 | "./node_modules/bootstrap/dist/css/bootstrap.min.css", 31 | "./node_modules/font-awesome/css/font-awesome.min.css", 32 | "node_modules/ngx-toastr/toastr.css", 33 | "src/styles.scss" 34 | ], 35 | "scripts": [ 36 | "node_modules/jquery/dist/jquery.min.js", 37 | "node_modules/bootstrap/dist/js/bootstrap.min.js" 38 | ] 39 | }, 40 | "configurations": { 41 | "production": { 42 | "fileReplacements": [ 43 | { 44 | "replace": "src/environments/environment.ts", 45 | "with": "src/environments/environment.prod.ts" 46 | } 47 | ], 48 | "optimization": true, 49 | "outputHashing": "all", 50 | "sourceMap": false, 51 | "extractCss": true, 52 | "namedChunks": false, 53 | "aot": true, 54 | "extractLicenses": true, 55 | "vendorChunk": false, 56 | "buildOptimizer": true, 57 | "budgets": [ 58 | { 59 | "type": "initial", 60 | "maximumWarning": "2mb", 61 | "maximumError": "5mb" 62 | } 63 | ] 64 | } 65 | } 66 | }, 67 | "serve": { 68 | "builder": "@angular-devkit/build-angular:dev-server", 69 | "options": { 70 | "browserTarget": "angular-ecommerce:build" 71 | }, 72 | "configurations": { 73 | "production": { 74 | "browserTarget": "angular-ecommerce:build:production" 75 | } 76 | } 77 | }, 78 | "extract-i18n": { 79 | "builder": "@angular-devkit/build-angular:extract-i18n", 80 | "options": { 81 | "browserTarget": "angular-ecommerce:build" 82 | } 83 | }, 84 | "test": { 85 | "builder": "@angular-devkit/build-angular:karma", 86 | "options": { 87 | "main": "src/test.ts", 88 | "polyfills": "src/polyfills.ts", 89 | "tsConfig": "tsconfig.spec.json", 90 | "karmaConfig": "karma.conf.js", 91 | "assets": [ 92 | "src/favicon.ico", 93 | "src/assets" 94 | ], 95 | "styles": [ 96 | "src/styles.scss" 97 | ], 98 | "scripts": [] 99 | } 100 | }, 101 | "lint": { 102 | "builder": "@angular-devkit/build-angular:tslint", 103 | "options": { 104 | "tsConfig": [ 105 | "tsconfig.app.json", 106 | "tsconfig.spec.json", 107 | "e2e/tsconfig.json" 108 | ], 109 | "exclude": [ 110 | "**/node_modules/**" 111 | ] 112 | } 113 | }, 114 | "e2e": { 115 | "builder": "@angular-devkit/build-angular:protractor", 116 | "options": { 117 | "protractorConfig": "e2e/protractor.conf.js", 118 | "devServerTarget": "angular-ecommerce:serve" 119 | }, 120 | "configurations": { 121 | "production": { 122 | "devServerTarget": "angular-ecommerce:serve:production" 123 | } 124 | } 125 | } 126 | } 127 | } 128 | }, 129 | "defaultProject": "angular-ecommerce" 130 | } -------------------------------------------------------------------------------- /browserslist: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # You can see what browsers were selected by your queries by running: 6 | # npx browserslist 7 | 8 | > 0.5% 9 | last 2 versions 10 | Firefox ESR 11 | not dead 12 | not IE 9-11 # For IE 9-11 support, remove 'not'. -------------------------------------------------------------------------------- /e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | // Protractor configuration file, see link for more information 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts 4 | 5 | const { SpecReporter } = require('jasmine-spec-reporter'); 6 | 7 | /** 8 | * @type { import("protractor").Config } 9 | */ 10 | exports.config = { 11 | allScriptsTimeout: 11000, 12 | specs: [ 13 | './src/**/*.e2e-spec.ts' 14 | ], 15 | capabilities: { 16 | 'browserName': 'chrome' 17 | }, 18 | directConnect: true, 19 | baseUrl: 'http://localhost:4200/', 20 | framework: 'jasmine', 21 | jasmineNodeOpts: { 22 | showColors: true, 23 | defaultTimeoutInterval: 30000, 24 | print: function() {} 25 | }, 26 | onPrepare() { 27 | require('ts-node').register({ 28 | project: require('path').join(__dirname, './tsconfig.json') 29 | }); 30 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 31 | } 32 | }; -------------------------------------------------------------------------------- /e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | import { browser, logging } from 'protractor'; 3 | 4 | describe('workspace-project App', () => { 5 | let page: AppPage; 6 | 7 | beforeEach(() => { 8 | page = new AppPage(); 9 | }); 10 | 11 | it('should display welcome message', () => { 12 | page.navigateTo(); 13 | expect(page.getTitleText()).toEqual('Welcome to angular-ecommerce!'); 14 | }); 15 | 16 | afterEach(async () => { 17 | // Assert that there are no errors emitted from the browser 18 | const logs = await browser.manage().logs().get(logging.Type.BROWSER); 19 | expect(logs).not.toContain(jasmine.objectContaining({ 20 | level: logging.Level.SEVERE, 21 | } as logging.Entry)); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo() { 5 | return browser.get(browser.baseUrl) as Promise; 6 | } 7 | 8 | getTitleText() { 9 | return element(by.css('app-root h1')).getText() as Promise; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /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/angular-ecommerce'), 20 | reports: ['html', 'lcovonly', 'text-summary'], 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 | restartOnFileChange: true 31 | }); 32 | }; 33 | -------------------------------------------------------------------------------- /mock-api-data.json: -------------------------------------------------------------------------------- 1 | { 2 | "user": [ 3 | { 4 | "name": "Srikrushna Pal", 5 | "mobNumber": "1234567891", 6 | "age": 27, 7 | "dob": "1992-09-17", 8 | "email": "admin@gmail.com", 9 | "password": "123456", 10 | "address": { 11 | "addLine1": "Marathalli", 12 | "addLine2": "Aswathnagar", 13 | "city": "Bangalore", 14 | "state": "Choose...", 15 | "zipCode": "560037" 16 | }, 17 | "language": [ 18 | "English", 19 | "Oriya/Odiya" 20 | ], 21 | "gender": "Male", 22 | "aboutYou": "I am a programmer...", 23 | "uploadPhoto": "C:\\fakepath\\Screenshot-demo from 2019-06-21 17-13-05.png", 24 | "agreetc": true, 25 | "role": "admin", 26 | "id": 1 27 | }, 28 | { 29 | "aboutYou": "I am programmer", 30 | "age": 25, 31 | "agreetc": true, 32 | "dob": "2019-12-31", 33 | "email": "seller@gmail.com", 34 | "gender": "Male", 35 | "address": { 36 | "id": 0, 37 | "addLine1": "Marathalli", 38 | "addLine2": "Aswathnagar", 39 | "city": "Bangalore", 40 | "state": "Choose...", 41 | "zipCode": "560037" 42 | }, 43 | "language": [ 44 | "Oriya/Odiya" 45 | ], 46 | "mobNumber": "0123456789", 47 | "name": "Bijay", 48 | "password": "123456", 49 | "uploadPhoto": "C:\\fakepath\\Online Application.pdf", 50 | "role": "seller", 51 | "id": 2 52 | }, 53 | { 54 | "name": "Last user", 55 | "mobNumber": "0123456789", 56 | "age": 25, 57 | "dob": "2017-11-30", 58 | "email": "buyer@gmail.com", 59 | "password": "123456", 60 | "gender": "Male", 61 | "address": { 62 | "id": 0, 63 | "addLine1": "Marathalli", 64 | "addLine2": "Aswathnagar", 65 | "city": "Bangalore", 66 | "state": "Choose...", 67 | "zipCode": "560037" 68 | }, 69 | "aboutYou": "djdhjdh", 70 | "uploadPhoto": "C:\\fakepath\\Online Application.pdf", 71 | "role": "buyer", 72 | "id": 3 73 | } 74 | ], 75 | "products": [ 76 | { 77 | "id": 1, 78 | "name": "Polyester Door Curtain", 79 | "uploadPhoto": "https://rukminim1.flixcart.com/image/832/832/jcf487k0/curtain/w/e/y/elegant-cream-door-curtains-set-of-2-213-soe-fsb-120-120-eyelet-original-imaffk7f9wng4v4m.jpeg", 80 | "productDesc": "Transform the ambiance of your home with these elegant, crushed texture, light weight, solid color curtains. These curtains are available in several colors and sizes to match to your home decor and the gracefully flowing polyester is durable and machine washable for your convenience.", 81 | "mrp": "1000", 82 | "dp": "499", 83 | "status": "publish" 84 | }, 85 | { 86 | "id": 2, 87 | "name": "Water Bottle", 88 | "uploadPhoto": "https://rukminim1.flixcart.com/image/832/832/bottle/w/5/g/1000-cello-h2o-cello-h2o-water-bottel-cello-original-imaeqtj3vyxyehmn.jpeg", 89 | "productDesc": "Hygienic bottle: The bottle is made of 100% food grade material & is BPA free ensures a safe drinking. Crystal Clarity: It's sheer body helps to easily identify the contents & also adds beauty to the liquid that you put in, Leak Proof: The bottle has a liquid tight cap that prevents leakage & is unbreakable. Freezer safe: These bottles are compatible with refrigerator & not being curvy the bottle occupies less space. Looks pretty in the fridge or on the table top.", 90 | "mrp": "123", 91 | "dp": "99", 92 | "status": "publish" 93 | }, 94 | { 95 | "id": 3, 96 | "name": "Metro Living Self Design Pillows Cover", 97 | "uploadPhoto": "https://rukminim1.flixcart.com/image/832/832/jjsw4nk0/cushion-pillow-cover/e/z/z/epl12-metro-living-original-imaf7ah6zstjyevd.jpeg", 98 | "productDesc": "Regional Speciality\nRajasthan\nFabric Care\nMachinne Wash, Do not Bleach, Wash in Cold Water\nThread Count\n104\nSales Package\nPack of 2 Pillow Cover", 99 | "mrp": "500", 100 | "dp": "399", 101 | "status": "draft" 102 | }, 103 | { 104 | "id": 4, 105 | "name": "Metro Living Self Design Pillows Cover", 106 | "uploadPhoto": "https://rukminim1.flixcart.com/image/832/832/jjsw4nk0/cushion-pillow-cover/e/z/z/epl12-metro-living-original-imaf7ah6zstjyevd.jpeg", 107 | "productDesc": "Regional Speciality\nRajasthan\nFabric Care\nMachinne Wash, Do not Bleach, Wash in Cold Water\nThread Count\n104\nSales Package\nPack of 2 Pillow Cover", 108 | "mrp": "500", 109 | "dp": "399", 110 | "status": "draft" 111 | }, 112 | { 113 | "id": 5, 114 | "name": "TIZUM Aluminium Portable Stand", 115 | "uploadPhoto": "https://rukminim1.flixcart.com/image/832/832/jx0prbk0/mobile-holder/t/3/d/aluminium-portable-stand-with-convenient-charging-port-design-original-imafhkkxjvphhhgz.jpeg", 116 | "productDesc": "The aluminium material used in the stand makes it sturdy and strong. Multi-angle fold-ability provides with a seamless viewing experience. The light weight of this stand allows it to be carried around everywhere conveniently. Universally designed to fit 3.5-8 inch phones and tablets without hassle. Apart from phones and tabs, the stand also holds gaming console like Nintendo play. •Aluminium Stand with Multi-Angle foldability ", 117 | "mrp": "300", 118 | "dp": "199", 119 | "status": "inactive" 120 | }, 121 | { 122 | "id": 6, 123 | "name": "Polyester Door Curtain", 124 | "uploadPhoto": "https://rukminim1.flixcart.com/image/832/832/jcf487k0/curtain/w/e/y/elegant-cream-door-curtains-set-of-2-213-soe-fsb-120-120-eyelet-original-imaffk7f9wng4v4m.jpeg", 125 | "productDesc": "Transform the ambiance of your home with these elegant, crushed texture, light weight, solid color curtains. These curtains are available in several colors and sizes to match to your home decor and the gracefully flowing polyester is durable and machine washable for your convenience.", 126 | "mrp": "1000", 127 | "dp": "499", 128 | "status": "publish" 129 | }, 130 | { 131 | "id": 7, 132 | "name": "Water Bottle", 133 | "uploadPhoto": "https://rukminim1.flixcart.com/image/832/832/bottle/w/5/g/1000-cello-h2o-cello-h2o-water-bottel-cello-original-imaeqtj3vyxyehmn.jpeg", 134 | "productDesc": "Hygienic bottle: The bottle is made of 100% food grade material & is BPA free ensures a safe drinking. Crystal Clarity: It's sheer body helps to easily identify the contents & also adds beauty to the liquid that you put in, Leak Proof: The bottle has a liquid tight cap that prevents leakage & is unbreakable. Freezer safe: These bottles are compatible with refrigerator & not being curvy the bottle occupies less space. Looks pretty in the fridge or on the table top.", 135 | "mrp": "123", 136 | "dp": "99", 137 | "status": "publish" 138 | }, 139 | { 140 | "id": 8, 141 | "name": "Metro Living Self Design Pillows Cover", 142 | "uploadPhoto": "https://rukminim1.flixcart.com/image/832/832/jjsw4nk0/cushion-pillow-cover/e/z/z/epl12-metro-living-original-imaf7ah6zstjyevd.jpeg", 143 | "productDesc": "Regional Speciality\nRajasthan\nFabric Care\nMachinne Wash, Do not Bleach, Wash in Cold Water\nThread Count\n104\nSales Package\nPack of 2 Pillow Cover", 144 | "mrp": "500", 145 | "dp": "399", 146 | "status": "draft" 147 | }, 148 | { 149 | "id": 9, 150 | "name": "TIZUM Aluminium Portable Stand", 151 | "uploadPhoto": "https://rukminim1.flixcart.com/image/832/832/jx0prbk0/mobile-holder/t/3/d/aluminium-portable-stand-with-convenient-charging-port-design-original-imafhkkxjvphhhgz.jpeg", 152 | "productDesc": "The aluminium material used in the stand makes it sturdy and strong. Multi-angle fold-ability provides with a seamless viewing experience. The light weight of this stand allows it to be carried around everywhere conveniently. Universally designed to fit 3.5-8 inch phones and tablets without hassle. Apart from phones and tabs, the stand also holds gaming console like Nintendo play. •Aluminium Stand with Multi-Angle foldability ", 153 | "mrp": "300", 154 | "dp": "199", 155 | "status": "inactive" 156 | }, 157 | { 158 | "id": 10, 159 | "name": "Polyester Door Curtain", 160 | "uploadPhoto": "https://rukminim1.flixcart.com/image/832/832/jcf487k0/curtain/w/e/y/elegant-cream-door-curtains-set-of-2-213-soe-fsb-120-120-eyelet-original-imaffk7f9wng4v4m.jpeg", 161 | "productDesc": "Transform the ambiance of your home with these elegant, crushed texture, light weight, solid color curtains. These curtains are available in several colors and sizes to match to your home decor and the gracefully flowing polyester is durable and machine washable for your convenience.", 162 | "mrp": "1000", 163 | "dp": "499", 164 | "status": "publish" 165 | }, 166 | { 167 | "id": 11, 168 | "name": "Water Bottle", 169 | "uploadPhoto": "https://rukminim1.flixcart.com/image/832/832/bottle/w/5/g/1000-cello-h2o-cello-h2o-water-bottel-cello-original-imaeqtj3vyxyehmn.jpeg", 170 | "productDesc": "Hygienic bottle: The bottle is made of 100% food grade material & is BPA free ensures a safe drinking. Crystal Clarity: It's sheer body helps to easily identify the contents & also adds beauty to the liquid that you put in, Leak Proof: The bottle has a liquid tight cap that prevents leakage & is unbreakable. Freezer safe: These bottles are compatible with refrigerator & not being curvy the bottle occupies less space. Looks pretty in the fridge or on the table top.", 171 | "mrp": "123", 172 | "dp": "99", 173 | "status": "publish" 174 | }, 175 | { 176 | "id": 12, 177 | "name": "Metro Living Self Design Pillows Cover", 178 | "uploadPhoto": "https://rukminim1.flixcart.com/image/832/832/jjsw4nk0/cushion-pillow-cover/e/z/z/epl12-metro-living-original-imaf7ah6zstjyevd.jpeg", 179 | "productDesc": "Regional Speciality\nRajasthan\nFabric Care\nMachinne Wash, Do not Bleach, Wash in Cold Water\nThread Count\n104\nSales Package\nPack of 2 Pillow Cover", 180 | "mrp": "500", 181 | "dp": "399", 182 | "status": "draft" 183 | }, 184 | { 185 | "id": 13, 186 | "name": "TIZUM Aluminium Portable Stand", 187 | "uploadPhoto": "https://rukminim1.flixcart.com/image/832/832/jx0prbk0/mobile-holder/t/3/d/aluminium-portable-stand-with-convenient-charging-port-design-original-imafhkkxjvphhhgz.jpeg", 188 | "productDesc": "The aluminium material used in the stand makes it sturdy and strong. Multi-angle fold-ability provides with a seamless viewing experience. The light weight of this stand allows it to be carried around everywhere conveniently. Universally designed to fit 3.5-8 inch phones and tablets without hassle. Apart from phones and tabs, the stand also holds gaming console like Nintendo play. •Aluminium Stand with Multi-Angle foldability ", 189 | "mrp": "300", 190 | "dp": "199", 191 | "status": "inactive" 192 | } 193 | ], 194 | "orders": [ 195 | { 196 | "id": 1, 197 | "userId": 3, 198 | "sellerId": 2, 199 | "product": { 200 | "id": 1, 201 | "name": "Polyester Door Curtain", 202 | "uploadPhoto": "https://rukminim1.flixcart.com/image/832/832/jcf487k0/curtain/w/e/y/elegant-cream-door-curtains-set-of-2-213-soe-fsb-120-120-eyelet-original-imaffk7f9wng4v4m.jpeg", 203 | "productDesc": "Transform the ambiance of your home with these elegant, crushed texture, light weight, solid color curtains. These curtains are available in several colors and sizes to match to your home decor and the gracefully flowing polyester is durable and machine washable for your convenience.", 204 | "mrp": "1000", 205 | "dp": "499", 206 | "status": "publish" 207 | }, 208 | "deliveryAddress": { 209 | "id": 0, 210 | "addLine1": "Marathalli", 211 | "addLine2": "Aswathnagar", 212 | "city": "Bangalore", 213 | "state": "Choose...", 214 | "zipCode": 560037 215 | }, 216 | "contact": "09040398006", 217 | "dateTime": "18/07/2019" 218 | }, 219 | { 220 | "id": 2, 221 | "userId": 3, 222 | "sellerId": 2, 223 | "product": { 224 | "id": 1, 225 | "name": "Polyester Door Curtain", 226 | "uploadPhoto": "https://rukminim1.flixcart.com/image/832/832/jcf487k0/curtain/w/e/y/elegant-cream-door-curtains-set-of-2-213-soe-fsb-120-120-eyelet-original-imaffk7f9wng4v4m.jpeg", 227 | "productDesc": "Transform the ambiance of your home with these elegant, crushed texture, light weight, solid color curtains. These curtains are available in several colors and sizes to match to your home decor and the gracefully flowing polyester is durable and machine washable for your convenience.", 228 | "mrp": "1000", 229 | "dp": "499", 230 | "status": "publish" 231 | }, 232 | "deliveryAddress": { 233 | "id": 0, 234 | "addLine1": "Marathalli", 235 | "addLine2": "Aswathnagar", 236 | "city": "Bangalore", 237 | "state": "Choose...", 238 | "zipCode": 560037 239 | }, 240 | "contact": "09040398006", 241 | "dateTime": "30/08/2019" 242 | } 243 | ] 244 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-ecommerce", 3 | "version": "0.0.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "test": "ng test", 9 | "lint": "ng lint", 10 | "e2e": "ng e2e" 11 | }, 12 | "private": true, 13 | "dependencies": { 14 | "@angular/animations": "~8.0.0", 15 | "@angular/common": "~8.0.0", 16 | "@angular/compiler": "~8.0.0", 17 | "@angular/core": "~8.0.0", 18 | "@angular/forms": "~8.0.0", 19 | "@angular/platform-browser": "~8.0.0", 20 | "@angular/platform-browser-dynamic": "~8.0.0", 21 | "@angular/router": "~8.0.0", 22 | "@ngx-translate/core": "^11.0.1", 23 | "@ngx-translate/http-loader": "^4.0.0", 24 | "bootstrap": "^4.3.1", 25 | "font-awesome": "^4.7.0", 26 | "jquery": "^3.4.1", 27 | "json-server": "^0.15.0", 28 | "ngx-toastr": "^10.0.4", 29 | "rxjs": "~6.4.0", 30 | "tslib": "^1.9.0", 31 | "zone.js": "~0.9.1" 32 | }, 33 | "devDependencies": { 34 | "@angular-devkit/build-angular": "~0.800.0", 35 | "@angular/cli": "~8.0.1", 36 | "@angular/compiler-cli": "~8.0.0", 37 | "@angular/language-service": "~8.0.0", 38 | "@types/node": "~8.9.4", 39 | "@types/jasmine": "~3.3.8", 40 | "@types/jasminewd2": "~2.0.3", 41 | "codelyzer": "^5.0.0", 42 | "jasmine-core": "~3.4.0", 43 | "jasmine-spec-reporter": "~4.2.1", 44 | "karma": "~4.1.0", 45 | "karma-chrome-launcher": "~2.2.0", 46 | "karma-coverage-istanbul-reporter": "~2.0.1", 47 | "karma-jasmine": "~2.0.1", 48 | "karma-jasmine-html-reporter": "^1.4.0", 49 | "protractor": "~5.4.0", 50 | "ts-node": "~7.0.0", 51 | "tslint": "~5.15.0", 52 | "typescript": "~3.4.3" 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/app/admin/admin-dashboard/admin-dashboard.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

Welcome to admin dasboard

5 |

Admin can manage user and product details.

6 | 7 |
8 |
9 | 10 |
11 |
12 |
13 |
14 | User 15 |

Manage User

16 |
17 |
18 |
Admin: {{admin_user}}
20 |
21 |
22 |
Seller: {{seller_user}}
24 |
25 |
26 |
Buyer: {{buyer_user}}
28 |
29 |
30 |
31 |
32 | 34 | Manage User 35 | 36 | Tatal User: {{total_user}} 37 | 38 | 39 |
40 |
41 |
42 |
43 |
44 |
45 | Products 46 |

Manage Products

47 | 48 |
49 |
50 |
Published: {{publish_product}}
52 |
53 |
54 |
Inactive: {{inactive_product}}
56 |
57 |
58 |
Draft: {{draft_product}}
60 |
61 |
62 |
63 |
64 | 66 | Manage Products 67 | 68 | Total Products: {{total_product}} 69 | 70 | 71 |
72 |
73 |
74 |
-------------------------------------------------------------------------------- /src/app/admin/admin-dashboard/admin-dashboard.component.scss: -------------------------------------------------------------------------------- 1 | .progressbar-div{ 2 | .progress{ 3 | margin-top: 0.7rem; 4 | height:1.5rem; 5 | .progress-bar{ 6 | color: black; 7 | font-weight: bold; 8 | } 9 | } 10 | } -------------------------------------------------------------------------------- /src/app/admin/admin-dashboard/admin-dashboard.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { AdminDashboardComponent } from './admin-dashboard.component'; 4 | 5 | describe('AdminDashboardComponent', () => { 6 | let component: AdminDashboardComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ AdminDashboardComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(AdminDashboardComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/admin/admin-dashboard/admin-dashboard.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { Router } from '@angular/router'; 3 | import { AdminService } from '../services/admin.service'; 4 | 5 | @Component({ 6 | selector: 'app-admin-dashboard', 7 | templateUrl: './admin-dashboard.component.html', 8 | styleUrls: ['./admin-dashboard.component.scss'] 9 | }) 10 | export class AdminDashboardComponent implements OnInit { 11 | 12 | user_dashboard_data; 13 | total_user: number = 0; 14 | admin_user: number = 0; 15 | seller_user: number = 0; 16 | buyer_user: number = 0; 17 | 18 | product_dashboard_data; 19 | total_product: number = 0; 20 | publish_product: number = 0; 21 | inactive_product: number = 0; 22 | draft_product: number = 0; 23 | 24 | constructor(private router: Router, private adminService: AdminService) { } 25 | 26 | ngOnInit() { 27 | this.adminUserDashboardData(); 28 | this.adminProductDashboardData(); 29 | } 30 | 31 | userDashboard() { 32 | this.router.navigateByUrl("/admin/user") 33 | } 34 | 35 | productDashboard() { 36 | this.router.navigateByUrl("/admin/product") 37 | } 38 | 39 | adminUserDashboardData() { 40 | this.adminService.userDashboardData().subscribe(data => { 41 | this.user_dashboard_data = data; 42 | for (let user in this.user_dashboard_data) { 43 | // console.log(this.user_dashboard_data[status].status); 44 | if (this.user_dashboard_data[user].role == 'admin') { 45 | ++this.admin_user; 46 | } else if (this.user_dashboard_data[user].role == 'seller') { 47 | ++this.seller_user; 48 | } else if (this.user_dashboard_data[user].role == 'buyer') { 49 | ++this.buyer_user; 50 | } 51 | ++this.total_user; 52 | } 53 | }, error => { 54 | console.log("My error", error); 55 | }) 56 | } 57 | 58 | adminProductDashboardData() { 59 | this.adminService.productDashboardData().subscribe(data => { 60 | this.product_dashboard_data = data; 61 | console.log(this.product_dashboard_data); 62 | 63 | for (status in this.product_dashboard_data) { 64 | // console.log(this.product_dashboard_data[status].status); 65 | if (this.product_dashboard_data[status].status == 'publish') { 66 | ++this.publish_product; 67 | } else if (this.product_dashboard_data[status].status == 'inactive') { 68 | ++this.inactive_product; 69 | } else if (this.product_dashboard_data[status].status == 'draft') { 70 | ++this.draft_product; 71 | } 72 | ++this.total_product; 73 | } 74 | }, error => { 75 | console.log("My error", error); 76 | }) 77 | } 78 | 79 | } 80 | -------------------------------------------------------------------------------- /src/app/admin/admin-login/admin-login.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Admin Login - Angular 8 Template Driven Form With Validation

3 |
4 |
5 | 6 | 8 |
9 |
First Name is required
10 |
Email must be a valid email address
11 |
12 |
13 |
14 | 15 | 18 |
19 |
Password must be at least 8 20 | characters
21 |
22 |
23 |
24 | 25 |
26 |
27 |
-------------------------------------------------------------------------------- /src/app/admin/admin-login/admin-login.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SrikrushnaP/angular-ecommerce/e2c8a09589405f0635eeef12bc6b0d7959776018/src/app/admin/admin-login/admin-login.component.scss -------------------------------------------------------------------------------- /src/app/admin/admin-login/admin-login.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { AdminLoginComponent } from './admin-login.component'; 4 | 5 | describe('AdminLoginComponent', () => { 6 | let component: AdminLoginComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ AdminLoginComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(AdminLoginComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/admin/admin-login/admin-login.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { Router } from '@angular/router'; 3 | import { LoginSignupService } from '../../shared/services/login-signup.service'; 4 | 5 | @Component({ 6 | selector: 'app-admin-login', 7 | templateUrl: './admin-login.component.html', 8 | styleUrls: ['./admin-login.component.scss'] 9 | }) 10 | export class AdminLoginComponent implements OnInit { 11 | 12 | signInFormValue: any = {}; 13 | user_data; 14 | 15 | constructor(private router: Router, private logsign_service: LoginSignupService) { } 16 | 17 | ngOnInit() { 18 | } 19 | 20 | onSubmitSignIn() { 21 | // alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.signInFormValue)); 22 | this.logsign_service.adminLogin(this.signInFormValue.userEmail, this.signInFormValue.userPassword).subscribe(data => { 23 | this.user_data = data; 24 | if (this.user_data.length == 1) { 25 | // alert("Validate") 26 | sessionStorage.setItem("user_session_id", this.user_data[0].id); 27 | sessionStorage.setItem("role", this.user_data[0].role); 28 | this.router.navigateByUrl('/admin-dashboard'); 29 | } else { 30 | alert("Invalid") 31 | } 32 | console.log(this.user_data); 33 | 34 | }, error => { 35 | console.log("My error", error); 36 | }) 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/app/admin/admin.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { AdminLoginComponent } from './admin-login/admin-login.component'; 4 | import { AdminDashboardComponent } from './admin-dashboard/admin-dashboard.component'; 5 | import { ReactiveFormsModule, FormsModule } from '@angular/forms'; 6 | import { UserCrudComponent } from './user-crud/user-crud.component'; 7 | 8 | @NgModule({ 9 | declarations: [AdminLoginComponent, AdminDashboardComponent, UserCrudComponent], 10 | imports: [ 11 | CommonModule, 12 | FormsModule, 13 | ReactiveFormsModule 14 | ] 15 | }) 16 | export class AdminModule { } 17 | -------------------------------------------------------------------------------- /src/app/admin/services/admin.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { AdminService } from './admin.service'; 4 | 5 | describe('AdminService', () => { 6 | beforeEach(() => TestBed.configureTestingModule({})); 7 | 8 | it('should be created', () => { 9 | const service: AdminService = TestBed.get(AdminService); 10 | expect(service).toBeTruthy(); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /src/app/admin/services/admin.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { environment } from '../../../environments/environment'; 3 | import { ApiService } from '../../core/services/api.service'; 4 | import { Observable } from 'rxjs'; 5 | 6 | @Injectable({ 7 | providedIn: 'root' 8 | }) 9 | export class AdminService { 10 | 11 | public user_url = environment.server_url + "/user/"; 12 | public product_url = environment.server_url + "/products/"; 13 | 14 | public all_user = environment.server_url + "/user"; 15 | 16 | 17 | constructor(private apiService: ApiService) { } 18 | 19 | 20 | userDashboardData() { 21 | return this.apiService.get(this.user_url); 22 | } 23 | productDashboardData() { 24 | return this.apiService.get(this.product_url); 25 | } 26 | allUser(): Observable { 27 | return this.apiService.get(this.all_user); 28 | } 29 | 30 | addUser(user_dto): Observable { 31 | return this.apiService.post(this.user_url, user_dto); 32 | } 33 | 34 | //get data of individual user 35 | singleUser(user_id) { 36 | return this.apiService.get(this.user_url + user_id); 37 | } 38 | //update data of individual user 39 | editUser(user_id, user_dto): Observable { 40 | return this.apiService.put(this.user_url + user_id, user_dto); 41 | } 42 | //Delete individual user 43 | deleteUser(user_id) { 44 | return this.apiService.delete(this.user_url + user_id); 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/app/admin/user-crud/user-crud.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | All User List 5 |
6 |
9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 38 | 39 | 40 |
#NameMobEmailDOBCityRoleAction
{{i+1}}{{user_data.name}}{{user_data.mobNumber}}{{user_data.email}}{{user_data.dob}}{{user_data.address.city}}{{user_data.role}} 33 | 35 |     36 | 37 |
41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /src/app/admin/user-crud/user-crud.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SrikrushnaP/angular-ecommerce/e2c8a09589405f0635eeef12bc6b0d7959776018/src/app/admin/user-crud/user-crud.component.scss -------------------------------------------------------------------------------- /src/app/admin/user-crud/user-crud.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { UserCrudComponent } from './user-crud.component'; 4 | 5 | describe('UserCrudComponent', () => { 6 | let component: UserCrudComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ UserCrudComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(UserCrudComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/admin/user-crud/user-crud.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { Router } from '@angular/router'; 3 | import { FormBuilder, FormGroup, Validators } from '@angular/forms'; 4 | import { User } from '../../core/models/object-model'; 5 | import { AdminService } from '../services/admin.service'; 6 | declare var jQuery: any; 7 | 8 | @Component({ 9 | selector: 'app-user-crud', 10 | templateUrl: './user-crud.component.html', 11 | styleUrls: ['./user-crud.component.scss'] 12 | }) 13 | export class UserCrudComponent implements OnInit { 14 | 15 | all_user_data; 16 | single_user_data; 17 | addEditUserForm: FormGroup; 18 | user_dto: User; 19 | user_reg_data; 20 | edit_user_id; 21 | upload_file_name: string; 22 | 23 | addEditUser = false;//for form validation 24 | 25 | add_user: Boolean = false; 26 | edit_user: Boolean = false; 27 | popup_header: string; 28 | 29 | signInFormValue: any = {}; 30 | 31 | constructor(private formBuilder: FormBuilder, private router: Router, private admin_service: AdminService) { } 32 | 33 | ngOnInit() { 34 | this.getAllUser(); 35 | this.addEditUserForm = this.formBuilder.group({ 36 | name: ['', Validators.required], 37 | mobNumber: ['', Validators.required], 38 | age: ['', Validators.required], 39 | dob: ['', Validators.required], 40 | email: ['', [Validators.required, Validators.email]], 41 | password: ['', [Validators.required, Validators.minLength(6)]], 42 | addLine1: ['', Validators.required], 43 | addLine2: [], 44 | city: ['', Validators.required], 45 | state: ['', Validators.required], 46 | zipCode: ['', Validators.required], 47 | language: ['', Validators.required], 48 | gender: ['', Validators.required], 49 | aboutYou: ['', Validators.required], 50 | uploadPhoto: [], 51 | agreetc: ['', Validators.required], 52 | role: ['', Validators.required] 53 | }) 54 | } 55 | 56 | getAllUser() { 57 | this.admin_service.allUser().subscribe(data => { 58 | this.all_user_data = data; 59 | // console.log("getAllUser",this.all_user_data); 60 | }, error => { 61 | console.log("My error", error); 62 | }) 63 | } 64 | get rf() { return this.addEditUserForm.controls; } 65 | 66 | //popup when add 67 | addUserPopup() { 68 | this.edit_user = false; 69 | this.add_user = true; 70 | this.popup_header = "Add New User"; 71 | this.addEditUserForm.reset(); 72 | } 73 | addUser() { 74 | this.addEditUser = true; 75 | if (this.addEditUserForm.invalid) { 76 | alert('Error!! :-)\n\n' + JSON.stringify(this.addEditUserForm.value)) 77 | return; 78 | } 79 | // alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.addEditUserForm.value)) 80 | // console.log(this.addEditUserForm.value) 81 | this.user_reg_data = this.addEditUserForm.value; 82 | this.user_dto = { 83 | name: this.user_reg_data.name, 84 | mobNumber: this.user_reg_data.mobNumber, 85 | age: this.user_reg_data.age, 86 | dob: this.user_reg_data.dob, 87 | email: this.user_reg_data.email, 88 | password: this.user_reg_data.password, 89 | language: this.user_reg_data.language, 90 | gender: this.user_reg_data.gender, 91 | address: { 92 | id: 0, 93 | addLine1: this.user_reg_data.addLine1, 94 | addLine2: this.user_reg_data.addLine2, 95 | city: this.user_reg_data.city, 96 | state: this.user_reg_data.state, 97 | zipCode: this.user_reg_data.zipCode, 98 | }, 99 | aboutYou: this.user_reg_data.aboutYou, 100 | uploadPhoto: this.user_reg_data.uploadPhoto, 101 | agreetc: this.user_reg_data.agreetc, 102 | role: this.user_reg_data.role 103 | } 104 | this.admin_service.addUser(this.user_dto).subscribe(data => { 105 | this.getAllUser(); 106 | jQuery('#addEditUserModal').modal('toggle'); 107 | }, err => { 108 | alert("Some Error Occured"); 109 | }) 110 | } 111 | 112 | // popup when edit 113 | editUserPopup(user_id) { 114 | this.edit_user_id = user_id; 115 | this.edit_user = true; 116 | this.add_user = false; 117 | this.popup_header = "Edit User"; 118 | this.admin_service.singleUser(user_id).subscribe(data => { 119 | this.single_user_data = data; 120 | this.upload_file_name = this.single_user_data.uploadPhoto; 121 | // console.log("editUserPopup:::", this.single_user_data); 122 | this.addEditUserForm.setValue({ 123 | name: this.single_user_data.name, 124 | mobNumber: this.single_user_data.mobNumber, 125 | age: this.single_user_data.age, 126 | dob: this.single_user_data.dob, 127 | email: this.single_user_data.email, 128 | password: this.single_user_data.password, 129 | language: this.single_user_data.language, 130 | gender: this.single_user_data.gender, 131 | addLine1: this.single_user_data.address.addLine1, 132 | addLine2: this.single_user_data.address.addLine2, 133 | city: this.single_user_data.address.city, 134 | state: this.single_user_data.address.state, 135 | zipCode: this.single_user_data.address.zipCode, 136 | aboutYou: this.single_user_data.aboutYou, 137 | uploadPhoto: '', 138 | agreetc: this.single_user_data.agreetc, 139 | role: this.single_user_data.role, 140 | }) 141 | // console.log("Individual User", this.single_user_data); 142 | }, error => { 143 | console.log("My error", error); 144 | }) 145 | } 146 | updateUser() { 147 | if (this.addEditUserForm.invalid) { 148 | // alert('Error!! :-)\n\n' + JSON.stringify(this.addEditUserForm.value)) 149 | return; 150 | } 151 | // alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.addEditUserForm.value)) 152 | // console.log(this.addEditUserForm.value) 153 | this.user_reg_data = this.addEditUserForm.value; 154 | this.user_dto = { 155 | name: this.user_reg_data.name, 156 | mobNumber: this.user_reg_data.mobNumber, 157 | age: this.user_reg_data.age, 158 | dob: this.user_reg_data.dob, 159 | email: this.user_reg_data.email, 160 | password: this.user_reg_data.password, 161 | language: this.user_reg_data.language, 162 | gender: this.user_reg_data.gender, 163 | address: { 164 | id: 0, 165 | addLine1: this.user_reg_data.addLine1, 166 | addLine2: this.user_reg_data.addLine2, 167 | city: this.user_reg_data.city, 168 | state: this.user_reg_data.state, 169 | zipCode: this.user_reg_data.zipCode, 170 | }, 171 | aboutYou: this.user_reg_data.aboutYou, 172 | uploadPhoto: (this.user_reg_data.uploadPhoto == "" ? this.upload_file_name : this.user_reg_data.uploadPhoto), 173 | agreetc: this.user_reg_data.agreetc, 174 | role: this.user_reg_data.role 175 | } 176 | this.admin_service.editUser(this.edit_user_id, this.user_dto).subscribe(data => { 177 | this.getAllUser(); 178 | jQuery('#addEditUserModal').modal('toggle'); 179 | }, err => { 180 | alert("Some Error Occured"); 181 | }) 182 | } 183 | deleteUser(user_id) { 184 | this.admin_service.deleteUser(user_id).subscribe(data => { 185 | this.getAllUser(); 186 | }, err => { 187 | alert("Some Error Occured"); 188 | }) 189 | } 190 | 191 | } 192 | -------------------------------------------------------------------------------- /src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | import { HomeComponent } from './home/home.component'; 4 | import { PageNotFoundErrorComponent } from './shared/layouts/page-not-found-error/page-not-found-error.component'; 5 | import { AdminAuthGuardLogin, AdminAuthGaurdService, SellerBuyerAuthGuardLogin, SellerAuthGaurdService, BuyerAuthGaurdService } from './shared/services/auth-gaurd.service'; 6 | import { AdminLoginComponent } from './admin/admin-login/admin-login.component'; 7 | import { AdminDashboardComponent } from './admin/admin-dashboard/admin-dashboard.component'; 8 | import { SellerDashboardComponent } from './customer/seller/seller-dashboard/seller-dashboard.component'; 9 | import { BuyerDashboardComponent } from './customer/buyer/buyer-dashboard/buyer-dashboard.component'; 10 | import { SigninSignupComponent } from './customer/signin-signup/signin-signup.component'; 11 | import { UserCrudComponent } from './admin/user-crud/user-crud.component'; 12 | import { ProductCrudComponent } from './product/product-crud/product-crud.component'; 13 | import { CheckoutComponent } from './customer/buyer/checkout/checkout.component'; 14 | import { UserProfileComponent } from './user-profile/user-profile.component'; 15 | import { ContactUsComponent } from './contact-us/contact-us.component'; 16 | 17 | const routes: Routes = [ 18 | { path: "", redirectTo: "/", pathMatch: "full" }, 19 | { path: "", component: HomeComponent }, 20 | { path: "my-profile", component: UserProfileComponent }, 21 | { path: "contact-us", component:ContactUsComponent}, 22 | //Path/component you want to access before admin login/signin 23 | { 24 | path: '', canActivate: [AdminAuthGuardLogin], children: [ 25 | { path: "admin-login", component: AdminLoginComponent }, 26 | ] 27 | }, 28 | //Path/component you want to access after admin login/signin 29 | { 30 | path: '', canActivate: [AdminAuthGaurdService], children: [ 31 | { path: "admin-dashboard", component: AdminDashboardComponent }, 32 | { path: "admin/user", component: UserCrudComponent }, 33 | { path: "admin/product", component: ProductCrudComponent } 34 | ] 35 | }, 36 | 37 | //Path/component you want to access before customer(seller and buyer) login/signin 38 | { 39 | path: '', canActivate: [SellerBuyerAuthGuardLogin], children: [ 40 | { path: "sign-in", component: SigninSignupComponent }, 41 | { path: "sign-up", component: SigninSignupComponent }, 42 | ] 43 | }, 44 | 45 | //Path/component you want to access after customer(seller) login/signin 46 | { 47 | path: '', canActivate: [SellerAuthGaurdService], children: [ 48 | { path: "seller-dashboard", component: SellerDashboardComponent }, 49 | { path: "seller/product", component: ProductCrudComponent }, 50 | ] 51 | }, 52 | 53 | //Path/component you want to access after customer(buyer) login/signin 54 | { 55 | path: '', canActivate: [BuyerAuthGaurdService], children: [ 56 | { path: "buyer-dashboard", component: BuyerDashboardComponent }, 57 | { path: "checkout", component: CheckoutComponent } 58 | ] 59 | }, 60 | { path: "**", component: PageNotFoundErrorComponent } 61 | ]; 62 | 63 | @NgModule({ 64 | imports: [RouterModule.forRoot(routes, { useHash: true })], 65 | exports: [RouterModule] 66 | }) 67 | export class AppRoutingModule { } 68 | -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 |
6 |
7 | -------------------------------------------------------------------------------- /src/app/app.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SrikrushnaP/angular-ecommerce/e2c8a09589405f0635eeef12bc6b0d7959776018/src/app/app.component.scss -------------------------------------------------------------------------------- /src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async } from '@angular/core/testing'; 2 | import { RouterTestingModule } from '@angular/router/testing'; 3 | import { AppComponent } from './app.component'; 4 | 5 | describe('AppComponent', () => { 6 | beforeEach(async(() => { 7 | TestBed.configureTestingModule({ 8 | imports: [ 9 | RouterTestingModule 10 | ], 11 | declarations: [ 12 | AppComponent 13 | ], 14 | }).compileComponents(); 15 | })); 16 | 17 | it('should create the app', () => { 18 | const fixture = TestBed.createComponent(AppComponent); 19 | const app = fixture.debugElement.componentInstance; 20 | expect(app).toBeTruthy(); 21 | }); 22 | 23 | it(`should have as title 'angular-ecommerce'`, () => { 24 | const fixture = TestBed.createComponent(AppComponent); 25 | const app = fixture.debugElement.componentInstance; 26 | expect(app.title).toEqual('angular-ecommerce'); 27 | }); 28 | 29 | it('should render title in a h1 tag', () => { 30 | const fixture = TestBed.createComponent(AppComponent); 31 | fixture.detectChanges(); 32 | const compiled = fixture.debugElement.nativeElement; 33 | expect(compiled.querySelector('h1').textContent).toContain('Welcome to angular-ecommerce!'); 34 | }); 35 | }); 36 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, HostListener } from '@angular/core'; 2 | import { TranslateService } from '@ngx-translate/core'; 3 | 4 | @Component({ 5 | selector: 'app-root', 6 | templateUrl: './app.component.html', 7 | styleUrls: ['./app.component.scss'] 8 | }) 9 | export class AppComponent { 10 | 11 | title = 'angular-ecommerce'; 12 | 13 | screenHeight: any; 14 | screenWidth: any; 15 | footerMaxHeight: number; 16 | 17 | constructor(private translate: TranslateService) { 18 | translate.setDefaultLang('en'); 19 | this.getScreenSize(); 20 | } 21 | 22 | @HostListener('window:resize', ['$event']) 23 | getScreenSize(event?) { 24 | this.screenHeight = window.innerHeight; 25 | this.screenWidth = window.innerWidth; 26 | // console.log(this.screenHeight, this.screenWidth); 27 | this.footerMaxHeight = this.screenHeight - 130;//header and footer aprox 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | import { CommonModule } from '@angular/common'; 4 | import { SharedModule } from './shared/shared.module'; 5 | 6 | import { AppRoutingModule } from './app-routing.module'; 7 | import { AppComponent } from './app.component'; 8 | 9 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 10 | import { ToastrModule } from 'ngx-toastr'; 11 | import { HomeComponent } from './home/home.component'; 12 | 13 | 14 | import { HttpClientModule, HttpClient } from '@angular/common/http'; 15 | import { TranslateModule, TranslateLoader } from '@ngx-translate/core'; 16 | import { TranslateHttpLoader } from '@ngx-translate/http-loader'; 17 | import { AdminModule } from './admin/admin.module'; 18 | import { CustomerModule } from './customer/customer.module'; 19 | import { ProductCrudComponent } from './product/product-crud/product-crud.component'; 20 | import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 21 | import { UserProfileComponent } from './user-profile/user-profile.component'; 22 | import { ContactUsComponent } from './contact-us/contact-us.component'; 23 | 24 | export function HttpLoaderFactory(http: HttpClient) { 25 | return new TranslateHttpLoader(http, './assets/i18n/', '.json'); 26 | } 27 | 28 | @NgModule({ 29 | declarations: [ 30 | AppComponent, 31 | HomeComponent, 32 | ProductCrudComponent, 33 | UserProfileComponent, 34 | ContactUsComponent 35 | ], 36 | imports: [ 37 | CommonModule, 38 | SharedModule, 39 | FormsModule, 40 | ReactiveFormsModule, 41 | AdminModule, 42 | CustomerModule, 43 | BrowserModule, 44 | AppRoutingModule, 45 | HttpClientModule, 46 | BrowserAnimationsModule, // required animations module 47 | ToastrModule.forRoot(), // ToastrModule added 48 | TranslateModule.forRoot({ 49 | loader: { 50 | provide: TranslateLoader, 51 | 52 | useFactory: HttpLoaderFactory, 53 | 54 | deps: [HttpClient] 55 | } 56 | }) 57 | ], 58 | exports: [ 59 | TranslateModule 60 | ], 61 | providers: [], 62 | bootstrap: [AppComponent] 63 | }) 64 | export class AppModule { } 65 | -------------------------------------------------------------------------------- /src/app/contact-us/contact-us.component.html: -------------------------------------------------------------------------------- 1 |
2 |

Love to Hear From You

3 |
4 |
5 | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Doloremque cumque voluptates vitae qui rem nobis blanditiis, odit quos magni, totam nesciunt, debitis ea facilis voluptatem sint optio. Soluta adipisci officia dicta commodi minus, natus molestiae placeat labore! Quod culpa natus sint odit minima. Maiores sunt repellat ut a pariatur aspernatur. 6 | 7 |
8 |
9 |

Postal Address

10 |

11 | Address Line 1 12 | Address Line 2
13 | City 14 | State 15 | Country
16 | Pin code- 560037 17 |

18 |

Email

19 |

Office:office@gmail.com

20 |

Personal:personal@gmail.com

21 |

Phone

22 |

Office:+91-1234567890

23 |

Work:+91-1234567891

24 |
25 |
26 | 27 |
-------------------------------------------------------------------------------- /src/app/contact-us/contact-us.component.scss: -------------------------------------------------------------------------------- 1 | .contact-us{ 2 | h1{ 3 | padding-top: 3rem; 4 | } 5 | } -------------------------------------------------------------------------------- /src/app/contact-us/contact-us.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ContactUsComponent } from './contact-us.component'; 4 | 5 | describe('ContactUsComponent', () => { 6 | let component: ContactUsComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ ContactUsComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ContactUsComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/contact-us/contact-us.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-contact-us', 5 | templateUrl: './contact-us.component.html', 6 | styleUrls: ['./contact-us.component.scss'] 7 | }) 8 | export class ContactUsComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/app/core/core.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | 4 | @NgModule({ 5 | declarations: [], 6 | imports: [ 7 | CommonModule 8 | ] 9 | }) 10 | export class CoreModule { } 11 | -------------------------------------------------------------------------------- /src/app/core/interceptors/http.interceptors.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from "@angular/core"; 2 | import { HttpInterceptor, HttpRequest, HttpResponse, HttpHandler, HttpEvent, HttpErrorResponse, HttpHeaders } from "@angular/common/http"; 3 | import { Observable, throwError } from 'rxjs'; 4 | import { map, catchError } from 'rxjs/operators'; 5 | 6 | @Injectable() 7 | 8 | export class HttpTokenInterceptor implements HttpInterceptor { 9 | intercept(req: HttpRequest, next: HttpHandler): Observable> { 10 | 11 | const headersConfig = { 12 | 'Accept': 'application/json' 13 | }; 14 | const idToken = localStorage.getItem("token"); 15 | 16 | if (idToken) { 17 | headersConfig['Authorization'] = idToken; 18 | let request = req.clone({ 19 | setHeaders: headersConfig 20 | }); 21 | return next.handle(request); 22 | } 23 | else { 24 | return next.handle(req) 25 | } 26 | // // authorization with jwt token 27 | // let currentUser = JSON.parse(localStorage.getItem('currentUser')); 28 | // if (currentUser && currentUser.token) { 29 | // let request = req.clone({ 30 | // setHeaders: { 31 | // Authorization: `Bearer ${currentUser.token}` 32 | // } 33 | // }); 34 | // } 35 | 36 | // return next.handle(req); 37 | } 38 | } -------------------------------------------------------------------------------- /src/app/core/models/object-model.ts: -------------------------------------------------------------------------------- 1 | export class User { 2 | aboutYou: string; 3 | age: number; 4 | agreetc: boolean; 5 | dob: string; 6 | email: string; 7 | gender: string; 8 | address: Address; 9 | language: string; 10 | mobNumber: string 11 | name: string; 12 | password: string; 13 | // uploadPhoto: Image; 14 | uploadPhoto: string; 15 | role: string; 16 | } 17 | 18 | export class Address { 19 | id: number; 20 | addLine1: string; 21 | addLine2: string; 22 | city: string; 23 | state: string; 24 | zipCode: number; 25 | } 26 | 27 | export class Product { 28 | id: number; 29 | name: string; 30 | uploadPhoto: string; 31 | productDesc: string; 32 | mrp: number; 33 | dp: number; 34 | status: boolean; 35 | } 36 | 37 | export class Order { 38 | id: number; 39 | userId: number; 40 | sellerId: number; 41 | product: Product; 42 | deliveryAddress: Address; 43 | contact: Number; 44 | dateTime: string; 45 | } -------------------------------------------------------------------------------- /src/app/core/services/api.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { ApiService } from './api.service'; 4 | 5 | describe('ApiService', () => { 6 | beforeEach(() => TestBed.configureTestingModule({})); 7 | 8 | it('should be created', () => { 9 | const service: ApiService = TestBed.get(ApiService); 10 | expect(service).toBeTruthy(); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /src/app/core/services/api.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { Observable } from "rxjs"; 3 | import { environment } from "../../../environments/environment"; 4 | import { HttpHeaders, HttpClient, HttpParams } from "@angular/common/http"; 5 | import { throwError } from "rxjs"; 6 | import { catchError, retry } from "rxjs/operators"; 7 | 8 | @Injectable({ 9 | providedIn: 'root' 10 | }) 11 | export class ApiService { 12 | httpOptions = { 13 | headers: new HttpHeaders({ 14 | "Content-Type": "application/json", 15 | "Access-Control-Allow-Origin": "*" 16 | }) 17 | }; 18 | constructor(private http: HttpClient) { } 19 | 20 | private formatErrors(error: any) { 21 | return throwError(error.error); 22 | } 23 | 24 | get(path: string, params: HttpParams = new HttpParams()): Observable { 25 | return this.http.get(path, { params }).pipe(catchError(this.formatErrors)); 26 | } 27 | 28 | put(path: string, body: Object = {}): Observable { 29 | return this.http 30 | .put(path, JSON.stringify(body), this.httpOptions) 31 | .pipe(catchError(this.formatErrors)); 32 | } 33 | 34 | post(path: string, body: Object = {}): Observable { 35 | return this.http 36 | .post(path, JSON.stringify(body), this.httpOptions) 37 | .pipe(catchError(this.formatErrors)); 38 | } 39 | 40 | delete(path): Observable { 41 | return this.http.delete(path).pipe(catchError(this.formatErrors)); 42 | } 43 | } 44 | 45 | -------------------------------------------------------------------------------- /src/app/customer/buyer/buyer-dashboard/buyer-dashboard.component.html: -------------------------------------------------------------------------------- 1 |
2 | 8 |
9 |
10 |
11 | {{product.name}} 12 |
13 |

{{product.name}}

14 |

MRP: {{product.mrp}} DP: 15 | {{product.dp}}

16 |
17 |

{{product.productDesc}}

18 | Add to Cart 19 | Buy Now 20 |
21 |
22 |
23 |
-------------------------------------------------------------------------------- /src/app/customer/buyer/buyer-dashboard/buyer-dashboard.component.scss: -------------------------------------------------------------------------------- 1 | .product{ 2 | margin-top: 1rem; 3 | .card{ 4 | img{ 5 | height: 9rem; 6 | padding: 1rem; 7 | } 8 | .card-body{ 9 | .product-desc{ 10 | height: 9rem; 11 | overflow: hidden; 12 | // text-overflow:ellipsis; 13 | } 14 | .card-title{ 15 | white-space: nowrap; 16 | overflow: hidden; 17 | text-overflow:ellipsis; 18 | } 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/app/customer/buyer/buyer-dashboard/buyer-dashboard.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { BuyerDashboardComponent } from './buyer-dashboard.component'; 4 | 5 | describe('BuyerDashboardComponent', () => { 6 | let component: BuyerDashboardComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ BuyerDashboardComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(BuyerDashboardComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/customer/buyer/buyer-dashboard/buyer-dashboard.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { Router } from '@angular/router'; 3 | import { CustomerService } from '../../services/customer.service'; 4 | 5 | @Component({ 6 | selector: 'app-buyer-dashboard', 7 | templateUrl: './buyer-dashboard.component.html', 8 | styleUrls: ['./buyer-dashboard.component.scss'] 9 | }) 10 | export class BuyerDashboardComponent implements OnInit { 11 | 12 | all_products; 13 | show_checkout: Boolean = false; 14 | 15 | constructor(private router: Router, private customerService: CustomerService) { } 16 | 17 | ngOnInit() { 18 | this.getAllProduct() 19 | } 20 | 21 | getAllProduct() { 22 | this.customerService.allProduct().subscribe(data => { 23 | this.all_products = data; 24 | // console.log("ALl Product", this.all_products); 25 | }, error => { 26 | console.log("My error", error); 27 | }) 28 | } 29 | 30 | buyProduct(id) { 31 | this.show_checkout = true; 32 | this.customerService.quickBuyProduct(id) //We pass to serice from service we can access in another component 33 | this.router.navigateByUrl("/checkout"); 34 | } 35 | 36 | addToCart() { 37 | alert("This a showcase, if you need this feature comment in the comment section") 38 | } 39 | 40 | } 41 | -------------------------------------------------------------------------------- /src/app/customer/buyer/checkout/checkout.component.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 9 |
10 |
11 |
12 |
13 | Product Detail 14 |
15 |
16 |
17 |
18 | {{individual_product?.name}} 19 |
20 |
21 |

{{individual_product?.name}}

22 |
23 |

{{individual_product?.productDesc}}

24 |

MRP: {{individual_product?.mrp}} 25 | DP: 26 | {{individual_product?.dp}}

27 |
28 |
29 | 32 |
33 |
34 |
35 |
36 |
37 |
38 | Address Detail 39 |
40 |
41 |
{{user_address?.name}}
42 |

{{user_address?.addLine1}},{{user_address?.addLine2}}

43 |

{{user_address?.city}},{{user_address?.state}}

44 |

Postal Code: {{user_address?.zipCode}}

45 |

Contact Number: {{user_contact_no}}

46 | Deliver Here 47 | 54 |
55 | 56 |
57 |
58 |
-------------------------------------------------------------------------------- /src/app/customer/buyer/checkout/checkout.component.scss: -------------------------------------------------------------------------------- 1 | .product-detail{ 2 | img{ 3 | height: 15rem; 4 | } 5 | } -------------------------------------------------------------------------------- /src/app/customer/buyer/checkout/checkout.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { CheckoutComponent } from './checkout.component'; 4 | 5 | describe('CheckoutComponent', () => { 6 | let component: CheckoutComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ CheckoutComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(CheckoutComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/customer/buyer/checkout/checkout.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { Router } from '@angular/router'; 3 | import { CustomerService } from '../../services/customer.service'; 4 | import { Product, User, Order } from '../../../core/models/object-model'; 5 | 6 | @Component({ 7 | selector: 'app-checkout', 8 | templateUrl: './checkout.component.html', 9 | styleUrls: ['./checkout.component.scss'] 10 | }) 11 | export class CheckoutComponent implements OnInit { 12 | 13 | single_product_id: number; 14 | user_id: number; 15 | individual_product: Product; 16 | user_detail: User; 17 | user_address; 18 | user_contact_no: Number; 19 | order_dto: Order; 20 | 21 | constructor(private customerService: CustomerService, private router: Router) { } 22 | 23 | ngOnInit() { 24 | this.customerService.currentProduct.subscribe(product => this.single_product_id = product) 25 | this.user_id = Number(sessionStorage.getItem('user_session_id')); 26 | this.productDetail(this.single_product_id); 27 | this.userAddress(this.user_id); 28 | } 29 | 30 | productDetail(single_product_id) { 31 | this.customerService.individualProduct(single_product_id).subscribe(data => { 32 | this.individual_product = data; 33 | // console.log("One Product", this.individual_product); 34 | }, error => { 35 | console.log("My error", error); 36 | }) 37 | } 38 | userAddress(user_id) { 39 | this.customerService.userDetail(user_id).subscribe(data => { 40 | // this.user_detail = data.address; 41 | this.user_address = data.address; 42 | this.user_contact_no = data.mobNumber; 43 | }, error => { 44 | console.log("My error", error); 45 | }) 46 | } 47 | 48 | placeOrder() { 49 | this.order_dto = { 50 | id: 0, 51 | userId: this.user_id, 52 | sellerId: 2, //Now it is hard coded, we are not implimented multi seller functionlity 53 | product: { 54 | id: this.individual_product.id, 55 | name: this.individual_product.name, 56 | uploadPhoto: this.individual_product.uploadPhoto, 57 | productDesc: this.individual_product.productDesc, 58 | mrp: this.individual_product.mrp, 59 | dp: this.individual_product.dp, 60 | status: this.individual_product.status 61 | }, 62 | deliveryAddress: { 63 | id: 0, 64 | addLine1: this.user_address.addLine1, 65 | addLine2: this.user_address.addLine2, 66 | city: this.user_address.city, 67 | state: this.user_address.state, 68 | zipCode: Number(this.user_address.zipCode) 69 | }, 70 | contact: this.user_contact_no, 71 | dateTime: new Date().toLocaleDateString() 72 | } 73 | // console.log("Place order dto", this.order_dto); 74 | this.customerService.insertNewOrder(this.order_dto).subscribe(data => { 75 | // console.log("Order placed successfully", data); 76 | alert("Order places successfully") 77 | this.router.navigateByUrl("/buyer-dashboard"); 78 | }, err => { 79 | alert("Some Error Occured"); 80 | }) 81 | 82 | } 83 | 84 | } 85 | -------------------------------------------------------------------------------- /src/app/customer/customer.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { BuyerDashboardComponent } from './buyer/buyer-dashboard/buyer-dashboard.component'; 4 | import { SellerDashboardComponent } from './seller/seller-dashboard/seller-dashboard.component'; 5 | import { SigninSignupComponent } from './signin-signup/signin-signup.component'; 6 | import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 7 | import { RouterModule } from '@angular/router'; 8 | import { CheckoutComponent } from './buyer/checkout/checkout.component'; 9 | 10 | @NgModule({ 11 | declarations: [BuyerDashboardComponent, SellerDashboardComponent, SigninSignupComponent, CheckoutComponent], 12 | imports: [ 13 | CommonModule, 14 | FormsModule, 15 | ReactiveFormsModule, 16 | RouterModule 17 | ] 18 | }) 19 | export class CustomerModule { } 20 | -------------------------------------------------------------------------------- /src/app/customer/seller/seller-dashboard/seller-dashboard.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

Welcome to seller dasboard

5 |

Seller can manage product and order details.

6 | 7 |
8 |
9 | 10 |
11 |
12 |
13 |
14 | Order 15 |

Manage orders

16 |
Lats order Date: {{last_order_date}}
17 |
18 |
19 |
Pending
21 |
22 |
23 |
Processed
25 |
26 |
27 |
Reajected
29 |
30 |
31 |
32 |
33 | 35 | Manage orders 36 | 37 | Tatal Orders: {{total_order}} 38 | 39 | 40 |
41 |
42 |
43 |
44 |
45 |
46 | Products 47 |

Manage Products

48 | 49 |
50 |
51 |
Published: {{publish_product}}
53 |
54 |
55 |
56 |
Inactive: {{inactive_product}}
58 |
59 |
60 |
61 |
Draft: {{draft_product}}
63 |
64 |
65 |
66 |
67 | 69 | Manage Products 70 | 71 | Total Products: {{total_product}} 72 | 73 | 74 |
75 |
76 |
77 |
-------------------------------------------------------------------------------- /src/app/customer/seller/seller-dashboard/seller-dashboard.component.scss: -------------------------------------------------------------------------------- 1 | .progressbar-div{ 2 | .progress{ 3 | margin-top: 0.7rem; 4 | height:1.5rem; 5 | .progress-bar{ 6 | color: black; 7 | font-weight: bold; 8 | } 9 | } 10 | } -------------------------------------------------------------------------------- /src/app/customer/seller/seller-dashboard/seller-dashboard.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { SellerDashboardComponent } from './seller-dashboard.component'; 4 | 5 | describe('SellerDashboardComponent', () => { 6 | let component: SellerDashboardComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ SellerDashboardComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(SellerDashboardComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/customer/seller/seller-dashboard/seller-dashboard.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { Router } from '@angular/router'; 3 | import { CustomerService } from '../../services/customer.service'; 4 | 5 | @Component({ 6 | selector: 'app-seller-dashboard', 7 | templateUrl: './seller-dashboard.component.html', 8 | styleUrls: ['./seller-dashboard.component.scss'] 9 | }) 10 | export class SellerDashboardComponent implements OnInit { 11 | 12 | order_dashboard_data; 13 | total_order; 14 | last_order_date; 15 | 16 | product_dashboard_data; 17 | total_product: number = 0; 18 | publish_product: number = 0; 19 | inactive_product: number = 0; 20 | draft_product: number = 0; 21 | 22 | constructor(private router: Router, private customerService: CustomerService) { } 23 | 24 | ngOnInit() { 25 | this.sellerOrderDashboardData(); 26 | this.sellerProductDashboardData(); 27 | } 28 | sellerProductDashboard() { 29 | this.router.navigateByUrl("/seller/product"); 30 | } 31 | sellerOrderDashboard() { 32 | alert("WIP") 33 | } 34 | sellerOrderDashboardData() { 35 | this.customerService.orderDashboardData().subscribe(data => { 36 | this.order_dashboard_data = data; 37 | this.total_order = Number(this.order_dashboard_data.length); 38 | this.last_order_date = this.order_dashboard_data[this.total_order - 1].dateTime; 39 | // console.log("product_dashboard_data", this.order_dashboard_data); 40 | }, error => { 41 | console.log("My error", error); 42 | }) 43 | } 44 | 45 | sellerProductDashboardData() { 46 | this.customerService.productDashboardData().subscribe(data => { 47 | this.product_dashboard_data = data; 48 | for (status in this.product_dashboard_data) { 49 | // console.log(this.product_dashboard_data[status].status); 50 | if (this.product_dashboard_data[status].status == 'publish') { 51 | ++this.publish_product; 52 | } else if (this.product_dashboard_data[status].status == 'inactive') { 53 | ++this.inactive_product; 54 | } else if (this.product_dashboard_data[status].status == 'draft') { 55 | ++this.draft_product; 56 | } 57 | ++this.total_product; 58 | } 59 | // console.log(this.publish_product); 60 | 61 | // console.log("product_dashboard_data", this.product_dashboard_data[this.product_dashboard_data.length - 1]); 62 | }, error => { 63 | console.log("My error", error); 64 | }) 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /src/app/customer/services/customer.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { CustomerService } from './customer.service'; 4 | 5 | describe('CustomerService', () => { 6 | beforeEach(() => TestBed.configureTestingModule({})); 7 | 8 | it('should be created', () => { 9 | const service: CustomerService = TestBed.get(CustomerService); 10 | expect(service).toBeTruthy(); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /src/app/customer/services/customer.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { ApiService } from '../../core/services/api.service'; 3 | import { Observable, BehaviorSubject } from 'rxjs'; 4 | import { environment } from '../../../environments/environment'; 5 | 6 | @Injectable({ 7 | providedIn: 'root' 8 | }) 9 | export class CustomerService { 10 | private single_product_id = new BehaviorSubject(null); 11 | currentProduct = this.single_product_id.asObservable(); 12 | 13 | public product_url = environment.server_url + '/products/'; 14 | public user_url = environment.server_url + '/user/'; 15 | public order_url = environment.server_url + '/orders/'; 16 | 17 | constructor(private apiService: ApiService) { } 18 | 19 | allProduct(): Observable { 20 | return this.apiService.get(this.product_url) 21 | } 22 | 23 | quickBuyProduct(product_id: number) { 24 | this.single_product_id.next(product_id) 25 | } 26 | 27 | individualProduct(id) { 28 | return this.apiService.get(this.product_url + id) 29 | } 30 | userDetail(id) { 31 | return this.apiService.get(this.user_url + id) 32 | } 33 | insertNewOrder(order_dto): Observable { 34 | return this.apiService.post(this.order_url, order_dto); 35 | } 36 | 37 | orderDashboardData(): Observable { 38 | return this.apiService.get(this.order_url) 39 | } 40 | productDashboardData(): Observable { 41 | return this.apiService.get(this.product_url) 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/app/customer/signin-signup/signin-signup.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |

Registeration - Angular 8 Reactive Form With Validation

6 |
7 |
8 | 9 | 10 |
11 |
Name is required
12 |
13 |
14 |
15 | 16 | 18 |
19 |
Mobile Number is required
20 |
21 |
22 |
23 | 24 | 25 |
26 |
Age is required
27 |
28 |
29 |
30 | 31 | 32 |
33 |
Date Of Birth is required
34 |
35 |
36 |
37 |
38 | 39 | 41 |
42 |
Email is required
43 |
Enter valid email
44 |
45 |
46 |
47 | 48 | 50 |
51 |
Password is required
52 |
Name must be at least 6 characters
53 |
54 |
55 |
56 |
57 | 58 | 60 |
61 |
Addressline1 is required
62 |
63 |
64 |
65 | 66 | 68 |
69 |
70 |
71 | 72 | 73 |
74 |
City is required
75 |
76 |
77 |
78 | 79 | 83 |
84 |
Select one option
85 |
86 |
87 |
88 | 89 | 90 |
91 |
Zipcode is required
92 |
93 |
94 |
95 |
96 | 97 | 104 |
105 |
Select atleast one language
106 |
107 |
108 |
109 |
110 |
111 | 113 | 114 |
115 |
116 | 118 | 119 |
120 |
121 | 123 | 124 |
125 | 128 |
129 |
130 | 131 | 132 |
133 |
Write something about you
134 |
135 |
136 |
137 | 138 | 139 |
140 |
Please upload file
141 |
142 |
143 |
144 |
145 | 146 | 149 |
150 |
Accept term and cpndition
151 |
152 |
153 |
154 |
155 | 156 | 160 |
161 |
Select one option
162 |
163 |
164 |
165 | 166 |
167 |
168 |

Already have an account click here for login

169 |
170 |
171 |

Login - Angular 8 Template Driven Form With Validation

172 |
173 |
174 | 175 | 178 |
179 |
First Name is required
180 |
Email must be a valid email address
181 |
182 |
183 |
184 | 185 | 188 |
189 |
Password must be 190 | at least 6 characters 191 |
192 |
193 |
194 |
195 | 196 |
197 |
198 |

Don't have an account click here for register

199 |
200 |
201 |
202 |
-------------------------------------------------------------------------------- /src/app/customer/signin-signup/signin-signup.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SrikrushnaP/angular-ecommerce/e2c8a09589405f0635eeef12bc6b0d7959776018/src/app/customer/signin-signup/signin-signup.component.scss -------------------------------------------------------------------------------- /src/app/customer/signin-signup/signin-signup.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { SigninSignupComponent } from './signin-signup.component'; 4 | 5 | describe('SigninSignupComponent', () => { 6 | let component: SigninSignupComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ SigninSignupComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(SigninSignupComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/customer/signin-signup/signin-signup.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { FormBuilder, FormGroup, Validators, FormsModule } from '@angular/forms'; 3 | import { RouterModule, Router } from '@angular/router'; 4 | import { LoginSignupService } from '../../shared/services/login-signup.service'; 5 | import { User } from '../../core/models/object-model'; 6 | 7 | @Component({ 8 | selector: 'app-signin-signup', 9 | templateUrl: './signin-signup.component.html', 10 | styleUrls: ['./signin-signup.component.scss'] 11 | }) 12 | export class SigninSignupComponent implements OnInit { 13 | 14 | regForm: Boolean = false; 15 | signUpform: FormGroup; 16 | signInform: FormGroup; 17 | signUpsubmitted = false; 18 | href: String = ''; 19 | user_data; 20 | user_dto: User; 21 | user_reg_data; 22 | 23 | signInFormValue: any = {}; 24 | 25 | constructor(private formBuilder: FormBuilder, private router: Router, private logsign_service: LoginSignupService) { } 26 | 27 | ngOnInit() { 28 | this.href = this.router.url; 29 | if (this.href == '/sign-up') { 30 | this.regForm = true; 31 | } else if (this.href == '/sign-in') { 32 | this.regForm = false; 33 | } 34 | 35 | this.signUpform = this.formBuilder.group({ 36 | name: ['', Validators.required], 37 | mobNumber: ['', Validators.required], 38 | age: ['', Validators.required], 39 | dob: ['', Validators.required], 40 | email: ['', [Validators.required, Validators.email]], 41 | password: ['', [Validators.required, Validators.minLength(6)]], 42 | addLine1: ['', Validators.required], 43 | addLine2: [], 44 | city: ['', Validators.required], 45 | state: ['', Validators.required], 46 | zipCode: ['', Validators.required], 47 | language: ['', Validators.required], 48 | gender: ['', Validators.required], 49 | aboutYou: ['', Validators.required], 50 | uploadPhoto: ['', Validators.required], 51 | agreetc: ['', Validators.required], 52 | role: ['', Validators.required], 53 | 54 | }) 55 | 56 | this.signInform = this.formBuilder.group({ 57 | 58 | }) 59 | } 60 | 61 | get rf() { return this.signUpform.controls; } 62 | 63 | onSubmitSignUp() { 64 | this.signUpsubmitted = true; 65 | if (this.signUpform.invalid) { 66 | // alert('Error!! :-)\n\n' + JSON.stringify(this.signUpform.value)) 67 | return; 68 | } 69 | // alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.signUpform.value)) 70 | // console.log(this.signUpform.value) 71 | this.user_reg_data = this.signUpform.value; 72 | this.user_dto = { 73 | aboutYou: this.user_reg_data.aboutYou, 74 | // addLine1: this.user_reg_data.addLine1, 75 | // addLine2: this.user_reg_data.addLine2, 76 | age: this.user_reg_data.age, 77 | agreetc: this.user_reg_data.agreetc, 78 | // city: this.user_reg_data.city, 79 | dob: this.user_reg_data.dob, 80 | email: this.user_reg_data.email, 81 | gender: this.user_reg_data.gender, 82 | address: { 83 | id: 0, 84 | addLine1: this.user_reg_data.addLine1, 85 | addLine2: this.user_reg_data.addLine2, 86 | city: this.user_reg_data.city, 87 | state: this.user_reg_data.state, 88 | zipCode: this.user_reg_data.zipCode, 89 | }, 90 | language: this.user_reg_data.language, 91 | mobNumber: this.user_reg_data.mobNumber, 92 | name: this.user_reg_data.name, 93 | password: this.user_reg_data.password, 94 | // state: this.user_reg_data.state, 95 | uploadPhoto: this.user_reg_data.uploadPhoto, 96 | // zipCode: this.user_reg_data.zipCode, 97 | role: this.user_reg_data.role 98 | } 99 | this.logsign_service.userRegister(this.user_dto).subscribe(data => { 100 | // console.log(data); 101 | alert("Success"); 102 | this.router.navigateByUrl('/sign-in'); 103 | }, err => { 104 | alert("Some Error Occured"); 105 | }) 106 | } 107 | 108 | onSubmitSignIn() { 109 | // alert('SUCCESS!! :-)\n\n' + JSON.stringify(this.signInFormValue)); 110 | this.logsign_service.authLogin(this.signInFormValue.userEmail, this.signInFormValue.userPassword).subscribe(data => { 111 | this.user_data = data; 112 | if (this.user_data.length == 1) { 113 | // alert("Validate") 114 | if (this.user_data[0].role == "seller") { 115 | sessionStorage.setItem("user_session_id", this.user_data[0].id); 116 | sessionStorage.setItem("role", this.user_data[0].role); 117 | this.router.navigateByUrl('/seller-dashboard'); 118 | } else if (this.user_data[0].role == "buyer") { 119 | sessionStorage.setItem("user_session_id", this.user_data[0].id); 120 | sessionStorage.setItem("role", this.user_data[0].role); 121 | this.router.navigateByUrl('/buyer-dashboard'); 122 | } else { 123 | alert("Invalid-user-role") 124 | } 125 | } else { 126 | alert("Invalid") 127 | } 128 | console.log(this.user_data); 129 | 130 | }, error => { 131 | console.log("My error", error); 132 | }) 133 | } 134 | 135 | } 136 | -------------------------------------------------------------------------------- /src/app/home/home.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |

{{'proj_name' | translate}}

4 | 5 | 6 | 7 |

project_short_desc

8 | 9 |

{{'view_detail_doc_btn' | translate}} 10 |

11 |

12 | Github 13 | Stackoverflow 14 | Linkedin 15 |

16 |
-------------------------------------------------------------------------------- /src/app/home/home.component.scss: -------------------------------------------------------------------------------- 1 | .home{ 2 | text-align: center; 3 | .intro{ 4 | padding-top: 5rem; 5 | } 6 | .short_desc{ 7 | padding-bottom: 2rem; 8 | } 9 | } -------------------------------------------------------------------------------- /src/app/home/home.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { HomeComponent } from './home.component'; 4 | 5 | describe('HomeComponent', () => { 6 | let component: HomeComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ HomeComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(HomeComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/home/home.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-home', 5 | templateUrl: './home.component.html', 6 | styleUrls: ['./home.component.scss'] 7 | }) 8 | export class HomeComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/app/product/product-crud/product-crud.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | All Product List 5 |
6 |
7 | 11 |
12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 41 | 42 | 43 |
#Product NameMRPDPStatusAction
{{i+1}}{{product_data.name}}{{product_data.mrp}}{{product_data.dp}}{{product_data.status}} 36 | 38 |     39 | 40 |
44 | 45 | 46 | -------------------------------------------------------------------------------- /src/app/product/product-crud/product-crud.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SrikrushnaP/angular-ecommerce/e2c8a09589405f0635eeef12bc6b0d7959776018/src/app/product/product-crud/product-crud.component.scss -------------------------------------------------------------------------------- /src/app/product/product-crud/product-crud.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { ProductCrudComponent } from './product-crud.component'; 4 | 5 | describe('ProductCrudComponent', () => { 6 | let component: ProductCrudComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ ProductCrudComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(ProductCrudComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/product/product-crud/product-crud.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { FormBuilder, Validators, FormGroup } from '@angular/forms'; 3 | import { Router } from '@angular/router'; 4 | import { ProductService } from '../../shared/services/product.service'; 5 | import { Product } from '../../core/models/object-model'; 6 | declare var jQuery: any; 7 | 8 | @Component({ 9 | selector: 'app-product-crud', 10 | templateUrl: './product-crud.component.html', 11 | styleUrls: ['./product-crud.component.scss'] 12 | }) 13 | export class ProductCrudComponent implements OnInit { 14 | all_product_data; 15 | addEditProductForm: FormGroup; 16 | addEditProduct: boolean = false;//for form validation 17 | popup_header: string; 18 | add_product: boolean; 19 | edit_product: boolean; 20 | 21 | product_data; 22 | product_dto: Product; 23 | 24 | single_product_data; 25 | edit_product_id; 26 | 27 | constructor(private formBuilder: FormBuilder, private router: Router, private product_service: ProductService) { } 28 | 29 | ngOnInit() { 30 | this.addEditProductForm = this.formBuilder.group({ 31 | name: ['', Validators.required], 32 | uploadPhoto: ['', Validators.required], 33 | productDesc: ['', Validators.required], 34 | mrp: ['', Validators.required], 35 | dp: ['', Validators.required], 36 | status: ['', Validators.required] 37 | }) 38 | this.getAllProduct() 39 | } 40 | 41 | get rf() { return this.addEditProductForm.controls; } 42 | 43 | getAllProduct() { 44 | this.product_service.allProduct().subscribe(data => { 45 | this.all_product_data = data; 46 | }, error => { 47 | console.log("My error", error); 48 | }) 49 | } 50 | addProductPopup() { 51 | this.add_product = true; 52 | this.edit_product = false; 53 | this.popup_header = "Add New Product"; 54 | this.addEditProductForm.reset(); 55 | } 56 | 57 | addNewProduct() { 58 | this.addEditProduct = true; 59 | if (this.addEditProductForm.invalid) { 60 | // alert('Error!! :-)\n\n' + JSON.stringify(this.addEditUserForm.value)) 61 | return; 62 | } 63 | this.product_data = this.addEditProductForm.value; 64 | this.product_dto = { 65 | id: 0, 66 | name: this.product_data.name, 67 | uploadPhoto: this.product_data.uploadPhoto, 68 | productDesc: this.product_data.productDesc, 69 | mrp: this.product_data.mrp, 70 | dp: this.product_data.dp, 71 | status: this.product_data.status 72 | } 73 | this.product_service.addNewProduct(this.product_dto).subscribe(data => { 74 | // console.log(data); 75 | jQuery('#addEditProductModal').modal('toggle'); 76 | this.getAllProduct(); 77 | }, err => { 78 | alert("Some Error Occured"); 79 | }) 80 | } 81 | 82 | editProductPopup(id) { 83 | this.add_product = false; 84 | this.edit_product = true; 85 | this.popup_header = "Edit Product"; 86 | this.addEditProductForm.reset(); 87 | this.product_service.singleProduct(id).subscribe(data => { 88 | this.single_product_data = data; 89 | this.edit_product_id = data.id; 90 | // console.log("single_product_data", this.single_product_data) 91 | this.addEditProductForm.setValue({ 92 | name: this.single_product_data.name, 93 | // uploadPhoto: '', 94 | uploadPhoto: this.single_product_data.uploadPhoto, 95 | productDesc: this.single_product_data.productDesc, 96 | mrp: this.single_product_data.mrp, 97 | dp: this.single_product_data.dp, 98 | status: this.single_product_data.status 99 | }) 100 | }) 101 | } 102 | 103 | updateProduct() { 104 | this.addEditProduct = true; 105 | if (this.addEditProductForm.invalid) { 106 | // alert('Error!! :-)\n\n' + JSON.stringify(this.addEditUserForm.value)) 107 | return; 108 | } 109 | this.product_data = this.addEditProductForm.value; 110 | this.product_dto = { 111 | id: 0, 112 | name: this.product_data.name, 113 | uploadPhoto: this.product_data.uploadPhoto, 114 | productDesc: this.product_data.productDesc, 115 | mrp: this.product_data.mrp, 116 | dp: this.product_data.dp, 117 | status: this.product_data.status 118 | } 119 | this.product_service.updateProduct(this.edit_product_id, this.product_dto).subscribe(data => { 120 | // console.log(data); 121 | jQuery('#addEditProductModal').modal('toggle'); 122 | this.getAllProduct(); 123 | }, err => { 124 | alert("Some Error Occured"); 125 | }) 126 | } 127 | 128 | deleteProduct(id) { 129 | let r = confirm("Do you want to delete the product ID: " + id + "?"); 130 | if (r == true) { 131 | this.product_service.deleteProduct(id).subscribe(data => { 132 | console.log("deleted successfully", data); 133 | this.getAllProduct(); 134 | }, err => { 135 | alert("Some Error Occured"); 136 | }) 137 | } else { 138 | alert("You pressed Cancel!"); 139 | } 140 | 141 | } 142 | } 143 | -------------------------------------------------------------------------------- /src/app/shared/directives/number-only.directive.spec.ts: -------------------------------------------------------------------------------- 1 | import { NumberOnlyDirective } from './number-only.directive'; 2 | 3 | describe('NumberOnlyDirective', () => { 4 | it('should create an instance', () => { 5 | const directive = new NumberOnlyDirective(); 6 | expect(directive).toBeTruthy(); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /src/app/shared/directives/number-only.directive.ts: -------------------------------------------------------------------------------- 1 | import { Directive, ElementRef, HostListener } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: 'input[numberOnly]' 5 | }) 6 | export class NumberOnlyDirective { 7 | 8 | constructor(private _el: ElementRef) { } 9 | 10 | @HostListener('input', ['$event']) onInputChange(event) { 11 | const initalValue = this._el.nativeElement.value; 12 | if (initalValue == 0) { 13 | this._el.nativeElement.value = ""; 14 | } else { 15 | this._el.nativeElement.value = initalValue.replace(/[^0-9]*/g, ""); 16 | if (initalValue !== this._el.nativeElement.value) { 17 | event.stopPropagation(); 18 | } 19 | } 20 | } 21 | 22 | } 23 | -------------------------------------------------------------------------------- /src/app/shared/layouts/footer/footer.component.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/app/shared/layouts/footer/footer.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SrikrushnaP/angular-ecommerce/e2c8a09589405f0635eeef12bc6b0d7959776018/src/app/shared/layouts/footer/footer.component.scss -------------------------------------------------------------------------------- /src/app/shared/layouts/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/shared/layouts/footer/footer.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-footer', 5 | templateUrl: './footer.component.html', 6 | styleUrls: ['./footer.component.scss'] 7 | }) 8 | export class FooterComponent implements OnInit { 9 | 10 | constructor() { } 11 | 12 | ngOnInit() { 13 | } 14 | 15 | } 16 | -------------------------------------------------------------------------------- /src/app/shared/layouts/header/header.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/shared/layouts/header/header.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SrikrushnaP/angular-ecommerce/e2c8a09589405f0635eeef12bc6b0d7959776018/src/app/shared/layouts/header/header.component.scss -------------------------------------------------------------------------------- /src/app/shared/layouts/header/header.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { HeaderComponent } from './header.component'; 4 | 5 | describe('HeaderComponent', () => { 6 | let component: HeaderComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ HeaderComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(HeaderComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/shared/layouts/header/header.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { TranslateService } from '@ngx-translate/core'; 3 | import { Router } from '@angular/router'; 4 | 5 | @Component({ 6 | selector: 'app-header', 7 | templateUrl: './header.component.html', 8 | styleUrls: ['./header.component.scss'] 9 | }) 10 | export class HeaderComponent implements OnInit { 11 | 12 | logged_in: Boolean = false; 13 | language: String = 'English'; 14 | user_role: String; 15 | 16 | constructor(private translate: TranslateService, private router: Router) { } 17 | 18 | 19 | ngOnInit() { 20 | 21 | 22 | } 23 | 24 | ngDoCheck() { 25 | this.user_role = sessionStorage.getItem("role"); 26 | // console.log(this.user_role); 27 | 28 | const user_session_id = sessionStorage.getItem("user_session_id") 29 | if (user_session_id) { 30 | this.logged_in = true; 31 | } 32 | } 33 | 34 | switchLanguage(language: string) { 35 | this.translate.use(language); 36 | if (language == 'en') { 37 | this.language = "English"; 38 | } else if (language == 'hn') { 39 | this.language = "हिंदी(Hindi)"; 40 | } 41 | } 42 | 43 | logOut() { 44 | sessionStorage.removeItem("user_session_id"); 45 | sessionStorage.removeItem("role"); 46 | this.router.navigateByUrl('/sign-in'); 47 | location.reload() 48 | } 49 | 50 | } 51 | -------------------------------------------------------------------------------- /src/app/shared/layouts/page-not-found-error/page-not-found-error.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |

404

5 |
6 |

We are sorry, Page not found!

7 |

The page you are looking for might have been removed had its name changed or is temporarily unavailable.

8 | Go Back 9 |
10 |
11 | -------------------------------------------------------------------------------- /src/app/shared/layouts/page-not-found-error/page-not-found-error.component.scss: -------------------------------------------------------------------------------- 1 | 2 | #notfound { 3 | position: relative; 4 | height: 79vh; 5 | } 6 | #notfound .notfound { 7 | position: absolute; 8 | left: 50%; 9 | top: 50%; 10 | -webkit-transform: translate(-50%, -50%); 11 | -ms-transform: translate(-50%, -50%); 12 | transform: translate(-50%, -50%); 13 | } 14 | .notfound { 15 | max-width: 920px; 16 | width: 100%; 17 | line-height: 1.4; 18 | text-align: center; 19 | padding-left: 15px; 20 | padding-right: 15px; 21 | } 22 | .notfound .notfound-404 { 23 | position: absolute; 24 | height: 100px; 25 | top: 0; 26 | left: 50%; 27 | -webkit-transform: translateX(-50%); 28 | -ms-transform: translateX(-50%); 29 | transform: translateX(-50%); 30 | z-index: -1; 31 | } 32 | .notfound .notfound-404 h1 { 33 | font-family: 'Maven Pro', sans-serif; 34 | color: #ececec; 35 | font-weight: 900; 36 | font-size: 276px; 37 | margin: 0px; 38 | position: absolute; 39 | left: 50%; 40 | top: 50%; 41 | -webkit-transform: translate(-50%, -50%); 42 | -ms-transform: translate(-50%, -50%); 43 | transform: translate(-50%, -50%); 44 | } 45 | .notfound h2 { 46 | font-family: 'Maven Pro', sans-serif; 47 | font-size: 46px; 48 | color: #000; 49 | font-weight: 900; 50 | text-transform: uppercase; 51 | margin: 0px; 52 | } 53 | .notfound p { 54 | font-family: 'Maven Pro', sans-serif; 55 | font-size: 16px; 56 | color: #000; 57 | font-weight: 400; 58 | text-transform: uppercase; 59 | margin-top: 15px; 60 | } 61 | .notfound a { 62 | font-family: 'Maven Pro', sans-serif; 63 | font-size: 14px; 64 | text-decoration: none; 65 | text-transform: uppercase; 66 | background: #189cf0; 67 | display: inline-block; 68 | padding: 16px 38px; 69 | border: 2px solid transparent; 70 | border-radius: 40px; 71 | color: #fff; 72 | font-weight: 400; 73 | -webkit-transition: 0.2s all; 74 | transition: 0.2s all; 75 | } 76 | .notfound a:hover { 77 | background-color: #fff; 78 | border-color: #189cf0; 79 | color: #189cf0; 80 | cursor: pointer; 81 | } 82 | @media only screen and (max-width: 480px) { 83 | .notfound .notfound-404 h1 { 84 | font-size: 162px; 85 | } 86 | .notfound h2 { 87 | font-size: 26px; 88 | } 89 | } -------------------------------------------------------------------------------- /src/app/shared/layouts/page-not-found-error/page-not-found-error.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { PageNotFoundErrorComponent } from './page-not-found-error.component'; 4 | 5 | describe('PageNotFoundErrorComponent', () => { 6 | let component: PageNotFoundErrorComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ PageNotFoundErrorComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(PageNotFoundErrorComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/shared/layouts/page-not-found-error/page-not-found-error.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { Location } from '@angular/common'; 3 | 4 | @Component({ 5 | selector: 'app-page-not-found-error', 6 | templateUrl: './page-not-found-error.component.html', 7 | styleUrls: ['./page-not-found-error.component.scss'] 8 | }) 9 | export class PageNotFoundErrorComponent implements OnInit { 10 | 11 | constructor(private location: Location) { } 12 | 13 | ngOnInit() { 14 | } 15 | 16 | cancel() { 17 | this.location.back(); 18 | } 19 | 20 | 21 | } 22 | -------------------------------------------------------------------------------- /src/app/shared/services/auth-gaurd.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { AuthGaurdService } from './auth-gaurd.service'; 4 | 5 | describe('AuthGaurdService', () => { 6 | beforeEach(() => TestBed.configureTestingModule({})); 7 | 8 | it('should be created', () => { 9 | const service: AuthGaurdService = TestBed.get(AuthGaurdService); 10 | expect(service).toBeTruthy(); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /src/app/shared/services/auth-gaurd.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | 3 | import { Router, ActivatedRouteSnapshot, RouterStateSnapshot, CanActivate } from '@angular/router'; 4 | 5 | //Admin before login check 6 | @Injectable({ 7 | providedIn: "root" 8 | }) 9 | export class AdminAuthGuardLogin implements CanActivate { 10 | constructor(private router: Router) { } 11 | canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 12 | let role = sessionStorage.getItem("role") 13 | if (role == "admin") { 14 | this.router.navigate(["/admin-dashboard"]); 15 | return false; 16 | } else { 17 | return true; 18 | } 19 | } 20 | } 21 | 22 | //Admin after login check 23 | @Injectable({ 24 | providedIn: 'root' 25 | }) 26 | export class AdminAuthGaurdService { 27 | constructor(private router: Router) { } 28 | canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 29 | let role = sessionStorage.getItem("role") 30 | if (role == 'admin') { 31 | return true; 32 | } else { 33 | this.router.navigate(["/admin-login"]); 34 | return false; 35 | } 36 | } 37 | } 38 | 39 | //Customer(Buyer & Seller) before login 40 | @Injectable({ 41 | providedIn: "root" 42 | }) 43 | export class SellerBuyerAuthGuardLogin implements CanActivate { 44 | constructor(private router: Router) { } 45 | canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 46 | let role = sessionStorage.getItem("role") 47 | if (role == "seller") { 48 | this.router.navigate(["/seller-dashboard"]); 49 | return false; 50 | } else if (role == "buyer") { 51 | this.router.navigate(["/buyer-dashboard"]); 52 | return false; 53 | } else { 54 | return true; 55 | } 56 | } 57 | } 58 | 59 | //Seller(Customer) after login 60 | @Injectable({ 61 | providedIn: 'root' 62 | }) 63 | export class SellerAuthGaurdService { 64 | constructor(private router: Router) { } 65 | canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 66 | let role = sessionStorage.getItem("role"); 67 | if (role == 'seller') { 68 | return true; 69 | } else { 70 | this.router.navigate(["/sign-in"]); 71 | return false; 72 | } 73 | } 74 | } 75 | 76 | //Buyer(Customer) after login 77 | @Injectable({ 78 | providedIn: 'root' 79 | }) 80 | export class BuyerAuthGaurdService { 81 | constructor(private router: Router) { } 82 | canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 83 | let role = sessionStorage.getItem("role") 84 | if (role == 'buyer') { 85 | return true; 86 | } else { 87 | this.router.navigate(["/sign-in"]); 88 | return false; 89 | } 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /src/app/shared/services/login-signup.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { LoginSignupService } from './login-signup.service'; 4 | 5 | describe('LoginSignupService', () => { 6 | beforeEach(() => TestBed.configureTestingModule({})); 7 | 8 | it('should be created', () => { 9 | const service: LoginSignupService = TestBed.get(LoginSignupService); 10 | expect(service).toBeTruthy(); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /src/app/shared/services/login-signup.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { HttpClient } from '@angular/common/http'; 3 | import { ApiService } from '../../core/services/api.service'; 4 | import { Observable } from 'rxjs'; 5 | import { environment } from '../../../environments/environment'; 6 | 7 | @Injectable({ 8 | providedIn: 'root' 9 | }) 10 | export class LoginSignupService { 11 | public login_url = environment.server_url; 12 | public reg_url = environment.server_url; 13 | 14 | constructor(private http: HttpClient, private apiService: ApiService) { } 15 | 16 | authLogin(user_name, password): Observable { 17 | return this.apiService.get(this.login_url + '/user?email=' + user_name + '&password=' + password); 18 | } 19 | userRegister(user_dto): Observable { 20 | return this.apiService.post(this.reg_url + '/user', user_dto); 21 | } 22 | 23 | adminLogin(user_name, password): Observable { 24 | return this.apiService.get(this.login_url + '/user?email=' + user_name + '&password=' + password + '&role=admin'); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/app/shared/services/product.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { ProductService } from './product.service'; 4 | 5 | describe('ProductService', () => { 6 | beforeEach(() => TestBed.configureTestingModule({})); 7 | 8 | it('should be created', () => { 9 | const service: ProductService = TestBed.get(ProductService); 10 | expect(service).toBeTruthy(); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /src/app/shared/services/product.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { environment } from '../../../environments/environment'; 3 | import { ApiService } from '../../core/services/api.service'; 4 | import { HttpClient } from '@angular/common/http'; 5 | import { Observable } from 'rxjs'; 6 | 7 | @Injectable({ 8 | providedIn: 'root' 9 | }) 10 | export class ProductService { 11 | 12 | public product_url = environment.server_url + '/products/'; 13 | 14 | constructor(private apiService: ApiService, private http: HttpClient) { } 15 | 16 | allProduct(): Observable { 17 | return this.apiService.get(this.product_url) 18 | } 19 | addNewProduct(product_dto): Observable { 20 | return this.apiService.post(this.product_url, product_dto); 21 | } 22 | 23 | singleProduct(id) { 24 | return this.apiService.get(this.product_url + id) 25 | } 26 | updateProduct(id, product_dto): Observable { 27 | return this.apiService.put(this.product_url + id, product_dto); 28 | } 29 | deleteProduct(id): Observable { 30 | return this.apiService.delete(this.product_url + id); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/app/shared/services/user.service.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed } from '@angular/core/testing'; 2 | 3 | import { UserService } from './user.service'; 4 | 5 | describe('UserService', () => { 6 | beforeEach(() => TestBed.configureTestingModule({})); 7 | 8 | it('should be created', () => { 9 | const service: UserService = TestBed.get(UserService); 10 | expect(service).toBeTruthy(); 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /src/app/shared/services/user.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { HttpClient } from '@angular/common/http'; 3 | import { ApiService } from '../../core/services/api.service'; 4 | import { environment } from '../../../environments/environment'; 5 | import { Observable } from 'rxjs'; 6 | 7 | 8 | @Injectable({ 9 | providedIn: 'root' 10 | }) 11 | export class UserService { 12 | 13 | public user_url = environment.server_url + "/user/"; 14 | 15 | constructor(private apiService: ApiService, private http: HttpClient) { } 16 | 17 | //get data of individual user 18 | getUserData(user_id) { 19 | return this.apiService.get(this.user_url + user_id); 20 | } 21 | //update data of individual user 22 | updateUserData(user_id, user_dto): Observable { 23 | return this.apiService.put(this.user_url + user_id, user_dto); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/app/shared/shared.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { HeaderComponent } from './layouts/header/header.component'; 4 | import { FooterComponent } from './layouts/footer/footer.component'; 5 | import { PageNotFoundErrorComponent } from './layouts/page-not-found-error/page-not-found-error.component'; 6 | import { TranslateModule } from '@ngx-translate/core'; 7 | import { RouterModule } from '@angular/router'; 8 | import { NumberOnlyDirective } from './directives/number-only.directive'; 9 | 10 | @NgModule({ 11 | declarations: [ 12 | HeaderComponent, 13 | FooterComponent, 14 | PageNotFoundErrorComponent, 15 | NumberOnlyDirective 16 | ], 17 | imports: [ 18 | CommonModule, 19 | TranslateModule, 20 | RouterModule 21 | ], 22 | exports: [ 23 | HeaderComponent, 24 | FooterComponent, 25 | TranslateModule, 26 | NumberOnlyDirective 27 | ] 28 | }) 29 | export class SharedModule { } 30 | -------------------------------------------------------------------------------- /src/app/user-profile/user-profile.component.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |

Update User Profile

6 |
7 |
8 | 9 | 10 |
11 |
Name is required
12 |
13 |
14 |
15 | 16 | 18 |
19 |
Mobile Number is required
20 |
21 |
22 |
23 | 24 | 25 |
26 |
Age is required
27 |
28 |
29 |
30 | 31 | 32 |
33 |
Date Of Birth is required
34 |
35 |
36 |
37 |
38 | 39 | 41 |
42 |
Email is required
43 |
Enter valid email
44 |
45 |
46 |
47 | 48 | 50 |
51 |
Password is required
52 |
Name must be at least 6 characters
53 |
54 |
55 |
56 |
57 | 58 | 60 |
61 |
Addressline1 is required
62 |
63 |
64 |
65 | 66 | 68 |
69 |
70 |
71 | 72 | 73 |
74 |
City is required
75 |
76 |
77 |
78 | 79 | 83 |
84 |
Select one option
85 |
86 |
87 |
88 | 89 | 91 |
92 |
Zipcode is required
93 |
94 |
95 |
96 |
97 |
98 |
99 | 101 | 102 |
103 |
104 | 106 | 107 |
108 |
109 | 111 | 112 |
113 |
114 |
115 | 116 | 117 |
118 |
Write something about you
119 |
120 |
121 |
122 | 123 | 124 |
125 |
Please upload file
126 |
127 |
128 |
129 | 130 |
131 |
132 |
133 |
134 |
135 |
-------------------------------------------------------------------------------- /src/app/user-profile/user-profile.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SrikrushnaP/angular-ecommerce/e2c8a09589405f0635eeef12bc6b0d7959776018/src/app/user-profile/user-profile.component.scss -------------------------------------------------------------------------------- /src/app/user-profile/user-profile.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing'; 2 | 3 | import { UserProfileComponent } from './user-profile.component'; 4 | 5 | describe('UserProfileComponent', () => { 6 | let component: UserProfileComponent; 7 | let fixture: ComponentFixture; 8 | 9 | beforeEach(async(() => { 10 | TestBed.configureTestingModule({ 11 | declarations: [ UserProfileComponent ] 12 | }) 13 | .compileComponents(); 14 | })); 15 | 16 | beforeEach(() => { 17 | fixture = TestBed.createComponent(UserProfileComponent); 18 | component = fixture.componentInstance; 19 | fixture.detectChanges(); 20 | }); 21 | 22 | it('should create', () => { 23 | expect(component).toBeTruthy(); 24 | }); 25 | }); 26 | -------------------------------------------------------------------------------- /src/app/user-profile/user-profile.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { Router } from '@angular/router'; 3 | import { FormBuilder, Validators, FormGroup } from '@angular/forms'; 4 | import { User } from '../core/models/object-model'; 5 | import { ToastrService } from 'ngx-toastr'; 6 | import { UserService } from '../shared/services/user.service'; 7 | 8 | @Component({ 9 | selector: 'app-user-profile', 10 | templateUrl: './user-profile.component.html', 11 | styleUrls: ['./user-profile.component.scss'] 12 | }) 13 | export class UserProfileComponent implements OnInit { 14 | 15 | userProfileForm: FormGroup; 16 | userProfile = false; 17 | user_id: number; 18 | user_data; 19 | user_updated_data; 20 | user_dto: User; 21 | 22 | //data not available on form 23 | // upload_file_name; 24 | user_profile_pic; 25 | user_language; 26 | user_role; 27 | 28 | 29 | constructor(private formBuilder: FormBuilder, private router: Router, private user_service: UserService, private toastr: ToastrService) { } 30 | 31 | ngOnInit() { 32 | this.user_id = Number(sessionStorage.getItem('user_session_id')); 33 | this.userProfileForm = this.formBuilder.group({ 34 | name: ['', Validators.required], 35 | mobNumber: ['', Validators.required], 36 | age: ['', Validators.required], 37 | dob: ['', Validators.required], 38 | email: ['', [Validators.required, Validators.email]], 39 | password: ['', [Validators.required, Validators.minLength(6)]], 40 | addLine1: ['', Validators.required], 41 | addLine2: [], 42 | city: ['', Validators.required], 43 | state: ['', Validators.required], 44 | zipCode: ['', Validators.required], 45 | gender: ['', Validators.required], 46 | aboutYou: ['', Validators.required], 47 | uploadPhoto: [], 48 | }) 49 | this.editUserData(this.user_id); 50 | } 51 | 52 | get rf() { return this.userProfileForm.controls; } 53 | 54 | editUserData(user_id) { 55 | this.user_service.getUserData(user_id).subscribe(data => { 56 | this.user_data = data; 57 | this.user_profile_pic = this.user_data.uploadPhoto; 58 | this.user_language = this.user_data.language; 59 | this.user_role = this.user_data.role; 60 | this.userProfileForm.setValue({ 61 | name: this.user_data.name, 62 | mobNumber: this.user_data.mobNumber, 63 | age: this.user_data.age, 64 | dob: this.user_data.dob, 65 | email: this.user_data.email, 66 | password: this.user_data.password, 67 | addLine1: this.user_data.address.addLine1, 68 | addLine2: this.user_data.address.addLine2, 69 | city: this.user_data.address.city, 70 | state: this.user_data.address.state, 71 | zipCode: this.user_data.address.zipCode, 72 | gender: this.user_data.gender, 73 | aboutYou: this.user_data.aboutYou, 74 | uploadPhoto: '', 75 | }) 76 | }, error => { 77 | console.log("My error", error); 78 | }) 79 | } 80 | 81 | updateProfile() { 82 | this.userProfile = true; 83 | if (this.userProfileForm.invalid) { 84 | this.toastr.error('Some Error Occured!', 'User Profile!'); 85 | // alert('Error!! :-)\n\n' + JSON.stringify(this.userProfileForm.value)) 86 | return; 87 | } 88 | this.user_updated_data = this.userProfileForm.value; 89 | this.user_dto = { 90 | name: this.user_updated_data.name, 91 | mobNumber: this.user_updated_data.mobNumber, 92 | age: this.user_updated_data.age, 93 | dob: this.user_updated_data.dob, 94 | email: this.user_updated_data.email, 95 | password: this.user_updated_data.password, 96 | language: this.user_updated_data.language, 97 | gender: this.user_updated_data.gender, 98 | address: { 99 | id: 0, 100 | addLine1: this.user_updated_data.addLine1, 101 | addLine2: this.user_updated_data.addLine2, 102 | city: this.user_updated_data.city, 103 | state: this.user_updated_data.state, 104 | zipCode: this.user_updated_data.zipCode, 105 | }, 106 | aboutYou: this.user_updated_data.aboutYou, 107 | uploadPhoto: (this.user_updated_data.uploadPhoto == "" ? this.user_profile_pic : this.user_updated_data.uploadPhoto), 108 | agreetc: this.user_updated_data.agreetc, 109 | role: this.user_role 110 | } 111 | this.user_service.updateUserData(this.user_id, this.user_dto).subscribe(data => { 112 | this.toastr.success('Profile Updated Successfully!', 'User Profile!'); 113 | 114 | if (this.user_role == 'admin') { 115 | this.router.navigateByUrl('/admin-dashboard'); 116 | } else if (this.user_role == 'seller') { 117 | this.router.navigateByUrl('/seller-dashboard'); 118 | } else if (this.user_role == 'buyer') { 119 | this.router.navigateByUrl('/buyer-dashboard'); 120 | } 121 | }, err => { 122 | this.toastr.error('Some Error Occured!', 'User Profile!'); 123 | // alert("Some Error Occured"); 124 | }) 125 | } 126 | 127 | } 128 | -------------------------------------------------------------------------------- /src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SrikrushnaP/angular-ecommerce/e2c8a09589405f0635eeef12bc6b0d7959776018/src/assets/.gitkeep -------------------------------------------------------------------------------- /src/assets/i18n/en.json: -------------------------------------------------------------------------------- 1 | { 2 | "intro": "Welcome to the world of Internationalization", 3 | "proj_name": "B2B Ecommerce Portal", 4 | "project_short_desc": "This project is like ecommerce portal where some of the user(Seller) who want to sell the product and services using this and some of the user(Buyer/End User) who needs the product they can buy from the user(Seller). On top of this two user there is another user(Admin) we named as admin, who have control all the operation like, he/she can delete the product, buyer, seller, can edit and update also. ", 5 | "view_detail_doc_btn": "View Detailed Documentation", 6 | "header": { 7 | "ecommerce": "Ecommerce 2.0", 8 | "lang_en": "English(अंग्रेज़ी)", 9 | "lang_hn": "Hindi(हिंदी)", 10 | "home": "Home", 11 | "service": "Service", 12 | "about_us": "About US", 13 | "contact_us": "Contact US", 14 | "order": "Order", 15 | "product": "Product", 16 | "user": "User", 17 | "search": "Search", 18 | "signin": "SignIn", 19 | "signup": "Signup", 20 | "my_profile": "My Profile", 21 | "logout": "LogOut", 22 | "signout": "SignOut" 23 | }, 24 | "footer": { 25 | "year": "2019", 26 | "d&d_by": "Designed and developed by", 27 | "my_name": "Srikrushna Pal", 28 | "tc": "Terms and condition of usages" 29 | } 30 | } -------------------------------------------------------------------------------- /src/assets/i18n/hn.json: -------------------------------------------------------------------------------- 1 | { 2 | "intro": "अंतर्राष्ट्रीयकरण की दुनिया में आपका स्वागत है", 3 | "proj_name": "B2B ईकॉमर्स पोर्टल", 4 | "project_short_desc": "यह परियोजना ईकॉमर्स पोर्टल की तरह है जहां कुछ उपयोगकर्ता (विक्रेता) बेचना चाहते हैं यह और उपयोगकर्ता (क्रेता / समाप्ति उपयोगकर्ता) और जिनकी आवश्यकता है, का उपयोग करके उत्पाद और सेवाएँ उत्पाद वे उपयोगकर्ता (विक्रेता) से खरीद सकते हैं। इस दो उपयोगकर्ता के ऊपर एक अन्य उपयोगकर्ता (व्यवस्थापक) है हमने व्यवस्थापक के रूप में नामित किया है, जिनके पास सभी ऑपरेशन नियंत्रित हैं, जैसे वह उत्पाद को हटा सकते हैं, खरीदार, विक्रेता, संपादित और अपडेट भी कर सकते हैं।", 5 | "view_detail_doc_btn": "विस्तृत दस्तावेज़ देखें", 6 | "header": { 7 | "ecommerce": "ई-कॉमर्स २.०", 8 | "lang_en": "अंग्रेज़ी(English)", 9 | "lang_hn": "हिंदी(Hindi)", 10 | "home": "होम", 11 | "service": "सर्विस", 12 | "about_us": "हमारे बारे में", 13 | "contact_us": "हमसे संपर्क करें", 14 | "order": "क्रम", 15 | "product": "उत्पाद", 16 | "user": "उपयोगकर्ता", 17 | "search": "खोज", 18 | "signin": "दाखिल करना", 19 | "signup": "साइन अप करें", 20 | "my_profile": "मेरी प्रोफाइल", 21 | "logout": "लोग आउट" 22 | }, 23 | "footer": { 24 | "year": "२०१९", 25 | "d&d_by": "द्वारा डिजाइन और विकसित", 26 | "my_name": "श्रीकृष्ण पाल", 27 | "tc": "उपयोग की शर्तें और शर्तें" 28 | } 29 | } -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true, 3 | server_url: "http://localhost:3000" 4 | }; 5 | -------------------------------------------------------------------------------- /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 | server_url: "http://localhost:3000", 8 | }; 9 | 10 | /* 11 | * For easier debugging in development mode, you can import the following file 12 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`. 13 | * 14 | * This import should be commented out in production mode because it will have a negative impact 15 | * on performance if an error is thrown. 16 | */ 17 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI. 18 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SrikrushnaP/angular-ecommerce/e2c8a09589405f0635eeef12bc6b0d7959776018/src/favicon.ico -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | AngularEcommerce 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /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) 12 | .catch(err => console.error(err)); 13 | -------------------------------------------------------------------------------- /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__UNPATCHED_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 | -------------------------------------------------------------------------------- /src/styles.scss: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | 3 | .sim-pointer{ 4 | cursor: pointer; 5 | } 6 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/app", 5 | "types": [] 6 | }, 7 | "include": [ 8 | "src/**/*.ts" 9 | ], 10 | "exclude": [ 11 | "src/test.ts", 12 | "src/**/*.spec.ts" 13 | ] 14 | } 15 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "baseUrl": "./", 5 | "outDir": "./dist/out-tsc", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "module": "esnext", 9 | "moduleResolution": "node", 10 | "emitDecoratorMetadata": true, 11 | "experimentalDecorators": true, 12 | "importHelpers": true, 13 | "target": "es2015", 14 | "typeRoots": [ 15 | "node_modules/@types" 16 | ], 17 | "lib": [ 18 | "es2018", 19 | "dom" 20 | ] 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./out-tsc/spec", 5 | "types": [ 6 | "jasmine", 7 | "node" 8 | ] 9 | }, 10 | "files": [ 11 | "src/test.ts", 12 | "src/polyfills.ts" 13 | ], 14 | "include": [ 15 | "src/**/*.spec.ts", 16 | "src/**/*.d.ts" 17 | ] 18 | } 19 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tslint:recommended", 3 | "rules": { 4 | "array-type": false, 5 | "arrow-parens": false, 6 | "deprecation": { 7 | "severity": "warn" 8 | }, 9 | "component-class-suffix": true, 10 | "contextual-lifecycle": true, 11 | "directive-class-suffix": true, 12 | "directive-selector": [ 13 | true, 14 | "attribute", 15 | "app", 16 | "camelCase" 17 | ], 18 | "component-selector": [ 19 | true, 20 | "element", 21 | "app", 22 | "kebab-case" 23 | ], 24 | "import-blacklist": [ 25 | true, 26 | "rxjs/Rx" 27 | ], 28 | "interface-name": false, 29 | "max-classes-per-file": false, 30 | "max-line-length": [ 31 | true, 32 | 140 33 | ], 34 | "member-access": false, 35 | "member-ordering": [ 36 | true, 37 | { 38 | "order": [ 39 | "static-field", 40 | "instance-field", 41 | "static-method", 42 | "instance-method" 43 | ] 44 | } 45 | ], 46 | "no-consecutive-blank-lines": false, 47 | "no-console": [ 48 | true, 49 | "debug", 50 | "info", 51 | "time", 52 | "timeEnd", 53 | "trace" 54 | ], 55 | "no-empty": false, 56 | "no-inferrable-types": [ 57 | true, 58 | "ignore-params" 59 | ], 60 | "no-non-null-assertion": true, 61 | "no-redundant-jsdoc": true, 62 | "no-switch-case-fall-through": true, 63 | "no-use-before-declare": true, 64 | "no-var-requires": false, 65 | "object-literal-key-quotes": [ 66 | true, 67 | "as-needed" 68 | ], 69 | "object-literal-sort-keys": false, 70 | "ordered-imports": false, 71 | "quotemark": [ 72 | true, 73 | "single" 74 | ], 75 | "trailing-comma": false, 76 | "no-conflicting-lifecycle": true, 77 | "no-host-metadata-property": true, 78 | "no-input-rename": true, 79 | "no-inputs-metadata-property": true, 80 | "no-output-native": true, 81 | "no-output-on-prefix": true, 82 | "no-output-rename": true, 83 | "no-outputs-metadata-property": true, 84 | "template-banana-in-box": true, 85 | "template-no-negated-async": true, 86 | "use-lifecycle-interface": true, 87 | "use-pipe-transform-interface": true 88 | }, 89 | "rulesDirectory": [ 90 | "codelyzer" 91 | ] 92 | } --------------------------------------------------------------------------------