From ed7aeffe531157ea5b53516ad02d009350f94c04 Mon Sep 17 00:00:00 2001 From: Anwesh Nayak Date: Fri, 1 Jun 2018 21:00:23 +0530 Subject: [PATCH] Client layout design (#10) * client layout design --- package-lock.json | 11 ++ package.json | 4 +- src/app/app.component.ts | 2 +- src/app/clients/clients-routing.module.ts | 8 +- src/app/clients/clients.component.html | 104 ++++++++++- src/app/clients/clients.component.scss | 4 + src/app/clients/clients.module.ts | 8 +- .../create-client.component.html | 162 +++++++++++++++++ .../create-client.component.scss | 0 .../create-client/create-client.component.ts | 15 ++ .../create-client/create-client.module.ts | 19 ++ .../view-client/view-client.component.html | 169 ++++++++++++++++++ .../view-client/view-client.component.scss | 0 .../view-client/view-client.component.spec.ts | 28 +++ .../view-client/view-client.component.ts | 16 ++ .../core/shell/header/header.component.html | 12 +- src/app/home/home.component.html | 2 +- src/main.scss | 3 + 18 files changed, 551 insertions(+), 16 deletions(-) create mode 100644 src/app/clients/create-client/create-client.component.html create mode 100644 src/app/clients/create-client/create-client.component.scss create mode 100644 src/app/clients/create-client/create-client.component.ts create mode 100644 src/app/clients/create-client/create-client.module.ts create mode 100644 src/app/clients/view-client/view-client.component.html create mode 100644 src/app/clients/view-client/view-client.component.scss create mode 100644 src/app/clients/view-client/view-client.component.spec.ts create mode 100644 src/app/clients/view-client/view-client.component.ts diff --git a/package-lock.json b/package-lock.json index ed95694b5..73452aa5b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -753,6 +753,12 @@ "@types/jasmine": "2.8.7" } }, + "@types/jquery": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-3.3.2.tgz", + "integrity": "sha512-ByZwKSEqteAta4VrIalqGJZmMq9lWPD3H3f5Xs6RR8B7zQRDPGUtjoKBYNtKTz/7LgBEQMdlxVbbjQfUaEIItA==", + "dev": true + }, "@types/lodash": { "version": "4.14.109", "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.109.tgz", @@ -6904,6 +6910,11 @@ "integrity": "sha1-43zwsX8ZnM4jvqcbIDk5Uka07E4=", "dev": true }, + "jquery": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz", + "integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg==" + }, "js-base64": { "version": "2.4.5", "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.5.tgz", diff --git a/package.json b/package.json index b712e18a7..f0c5986b7 100644 --- a/package.json +++ b/package.json @@ -35,19 +35,21 @@ "bootstrap": "^4.1.1", "core-js": "^2.5.6", "hammerjs": "^2.0.8", + "jquery": "^3.3.1", "lodash": "^4.17.10", "rxjs": "^6.1.0", "zone.js": "^0.8.26" }, "devDependencies": { + "@angular-devkit/build-angular": "~0.6.0", "@angular/cli": "~6.0.1", "@angular/compiler-cli": "^6.0.1", "@angular/language-service": "^6.0.1", - "@angular-devkit/build-angular": "~0.6.0", "@biesbjerg/ngx-translate-extract": "^2.3.4", "@ngx-rocket/scripts": "^2.1.0", "@types/jasmine": "^2.8.7", "@types/jasminewd2": "^2.0.2", + "@types/jquery": "^3.3.2", "@types/lodash": "^4.14.108", "@types/node": "^8.10.13", "codelyzer": "^4.3.0", diff --git a/src/app/app.component.ts b/src/app/app.component.ts index a59bbf826..8f659a213 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -7,7 +7,7 @@ import { filter, map, mergeMap } from 'rxjs/operators'; import { environment } from '@env/environment'; import { Logger, I18nService } from '@app/core'; - +import * as $ from 'jquery'; const log = new Logger('App'); @Component({ diff --git a/src/app/clients/clients-routing.module.ts b/src/app/clients/clients-routing.module.ts index 7a90a477b..ecb155c8e 100644 --- a/src/app/clients/clients-routing.module.ts +++ b/src/app/clients/clients-routing.module.ts @@ -1,11 +1,15 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; - import { extract } from '@app/core'; + import { ClientsComponent } from './clients.component'; +import { CreateClientComponent} from './create-client/create-client.component'; +import { ViewClientComponent } from './view-client/view-client.component'; const routes: Routes = [ - { path: 'clients', component: ClientsComponent } + { path: 'clients', component: ClientsComponent}, + { path: 'clients/create', component: CreateClientComponent}, + { path: 'clients/view', component: ViewClientComponent}, ]; @NgModule({ diff --git a/src/app/clients/clients.component.html b/src/app/clients/clients.component.html index 3398ad6e5..9e122e390 100644 --- a/src/app/clients/clients.component.html +++ b/src/app/clients/clients.component.html @@ -1,4 +1,102 @@ -

- clients works! -

+
+
+
+
+

Clients

+
+
+ +
+
+
+ +
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#NameSurnameCountryCityPosition
4JerryHorwitzItalyBariEditor-in-chief
5JanisJoplinPolandWarsawVideo Maker
6GaryWinograndGermanyBerlinPhotographer
7AngieSmithUSASan FranciscoTeacher
8JohnMattisFranceParisActor
9OttoMorrisGermanyMunichSinger
+ + +
+
+
+
\ No newline at end of file diff --git a/src/app/clients/clients.component.scss b/src/app/clients/clients.component.scss index e69de29bb..04ab8c692 100644 --- a/src/app/clients/clients.component.scss +++ b/src/app/clients/clients.component.scss @@ -0,0 +1,4 @@ +.table-fixed { + table-layout: fixed; + overflow: hidden; +} \ No newline at end of file diff --git a/src/app/clients/clients.module.ts b/src/app/clients/clients.module.ts index e68ae2911..30604d04e 100644 --- a/src/app/clients/clients.module.ts +++ b/src/app/clients/clients.module.ts @@ -2,8 +2,10 @@ import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { CommonModule } from '@angular/common'; import { ClientsComponent } from './clients.component'; +import { CreateClientComponent} from './create-client/create-client.component'; import { ClientsRoutingModule } from './clients-routing.module'; import { CoreModule } from '../core/core.module'; +import { ViewClientComponent } from './view-client/view-client.component'; @NgModule({ imports: [ @@ -13,8 +15,10 @@ import { CoreModule } from '../core/core.module'; ], declarations: [ - ClientsComponent - ], + ClientsComponent, + CreateClientComponent, + ViewClientComponent +], schemas: [ CUSTOM_ELEMENTS_SCHEMA ], diff --git a/src/app/clients/create-client/create-client.component.html b/src/app/clients/create-client/create-client.component.html new file mode 100644 index 000000000..f26068456 --- /dev/null +++ b/src/app/clients/create-client/create-client.component.html @@ -0,0 +1,162 @@ + +
+
+
+
+
+
+
+
+ +
+ +
+ +
+
+
+ + + We'll never share your email with anyone else. +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + + This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line. +
+
+ Radio buttons +
+ +
+
+ +
+
+ +
+
+
+ Checkboxes +
+ +
+
+ +
+
+ +
+
+
+
+
+
+
+ +
+
+
+ + +
+
+ +
+
+ + +
+
+ +
+ + +
Success! You've done it.
+
+ +
+ + +
Sorry, that username's taken. Try another?
+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +
+
+
+ $ +
+ +
+ .00 +
+
+
+
+
+
+
+
+
+
\ No newline at end of file diff --git a/src/app/clients/create-client/create-client.component.scss b/src/app/clients/create-client/create-client.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/clients/create-client/create-client.component.ts b/src/app/clients/create-client/create-client.component.ts new file mode 100644 index 000000000..9d598b150 --- /dev/null +++ b/src/app/clients/create-client/create-client.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit} from '@angular/core'; +import { HeaderComponent } from '../../core/shell/header/header.component'; + +@Component({ + selector: 'app-create-client', + templateUrl: './create-client.component.html', + styleUrls: ['./create-client.component.scss'] +}) +export class CreateClientComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } +} diff --git a/src/app/clients/create-client/create-client.module.ts b/src/app/clients/create-client/create-client.module.ts new file mode 100644 index 000000000..3931d67ab --- /dev/null +++ b/src/app/clients/create-client/create-client.module.ts @@ -0,0 +1,19 @@ +/* import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; +import { CommonModule } from '@angular/common'; +import { CoreModule } from '../../core/core.module'; + +import { CreateClientComponent } from './create-client.component'; + + +@NgModule({ + imports: [ + CommonModule, + CoreModule + ], + declarations: [CreateClientComponent], + schemas: [ + CUSTOM_ELEMENTS_SCHEMA + ], +}) +export class CreateClientModule { } + */ diff --git a/src/app/clients/view-client/view-client.component.html b/src/app/clients/view-client/view-client.component.html new file mode 100644 index 000000000..d4a8447ce --- /dev/null +++ b/src/app/clients/view-client/view-client.component.html @@ -0,0 +1,169 @@ + +
+
+
+ +
+
+

Client Information

+
+
Name
+
Other details
+
+ Card image +
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
    +
  • Cras justo odio
    • +
  • Dapibus ac facilisis in
    • +
  • Vestibulum at eros
    • +
+
+ Card link + Another link +
+
+ 2 days ago +
+
+ +
+ + +
+
+
Loan table
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
#NameSurnameCountryCityPosition
4JerryHorwitzItalyBariEditor-in-chief
5JanisJoplinPolandWarsawVideo Maker
6GaryWinograndGermanyBerlinPhotographer
7AngieSmithUSASan FranciscoTeacher
8JohnMattisFranceParisActor
9OttoMorrisGermanyMunichSinger
9OttoMorrisGermanyMunichSinger
9OttoMorrisGermanyMunichSinger
9OttoMorrisGermanyMunichSinger
9OttoMorrisGermanyMunichSinger
9OttoMorrisGermanyMunichSinger
+
+
+
+ +
+ + + + +
+
\ No newline at end of file diff --git a/src/app/clients/view-client/view-client.component.scss b/src/app/clients/view-client/view-client.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/clients/view-client/view-client.component.spec.ts b/src/app/clients/view-client/view-client.component.spec.ts new file mode 100644 index 000000000..107652787 --- /dev/null +++ b/src/app/clients/view-client/view-client.component.spec.ts @@ -0,0 +1,28 @@ +/* tslint:disable:no-unused-variable */ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; +import { DebugElement } from '@angular/core'; + +import { ViewClientComponent } from './view-client.component'; + +describe('ViewClientComponent', () => { + let component: ViewClientComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ViewClientComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ViewClientComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/clients/view-client/view-client.component.ts b/src/app/clients/view-client/view-client.component.ts new file mode 100644 index 000000000..570d8bd11 --- /dev/null +++ b/src/app/clients/view-client/view-client.component.ts @@ -0,0 +1,16 @@ +import { Component, OnInit } from '@angular/core'; +import { HeaderComponent } from '../../core/shell/header/header.component'; + +@Component({ + selector: 'app-view-client', + templateUrl: './view-client.component.html', + styleUrls: ['./view-client.component.scss'] +}) +export class ViewClientComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/core/shell/header/header.component.html b/src/app/core/shell/header/header.component.html index 2c87f335c..8a5596c9a 100644 --- a/src/app/core/shell/header/header.component.html +++ b/src/app/core/shell/header/header.component.html @@ -41,7 +41,7 @@ -->