From 45da6e81ed81dfd57ee20a016d57e6324efdd00d Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Fri, 4 Aug 2017 11:59:22 +0300 Subject: [PATCH 1/2] forms page done... --- .../components/navigation/navigation.model.ts | 6 + .../content/ui/forms/forms.component.html | 124 ++++++++++++++++++ .../content/ui/forms/forms.component.scss | 17 +++ .../main/content/ui/forms/forms.component.ts | 67 ++++++++++ src/app/main/content/ui/forms/forms.module.ts | 25 ++++ src/app/main/content/ui/ui.module.ts | 2 + 6 files changed, 241 insertions(+) create mode 100644 src/app/main/content/ui/forms/forms.component.html create mode 100644 src/app/main/content/ui/forms/forms.component.scss create mode 100644 src/app/main/content/ui/forms/forms.component.ts create mode 100644 src/app/main/content/ui/forms/forms.module.ts diff --git a/src/app/core/components/navigation/navigation.model.ts b/src/app/core/components/navigation/navigation.model.ts index 12f51dba..0e04362b 100644 --- a/src/app/core/components/navigation/navigation.model.ts +++ b/src/app/core/components/navigation/navigation.model.ts @@ -252,6 +252,12 @@ export class FuseNavigation } ] },*/ + { + 'title': 'Forms', + 'type' : 'nav-item', + 'icon' : 'web_asset', + 'url' : '/ui/forms' + }, { 'title': 'Icons', 'type' : 'nav-item', diff --git a/src/app/main/content/ui/forms/forms.component.html b/src/app/main/content/ui/forms/forms.component.html new file mode 100644 index 00000000..572dc0b9 --- /dev/null +++ b/src/app/main/content/ui/forms/forms.component.html @@ -0,0 +1,124 @@ +
+ + +
+
+
+ home + chevron_right + User Interface +
+
Forms
+
+
+ + + +
+ +

+ Angular reactive forms facilitate a reactive style of programming that favors explicit management of the + data flowing between a non-UI data model (typically retrieved from a server) and a UI-oriented form model + that retains the states and values of the HTML controls on screen. Reactive forms offer the ease of using + reactive patterns, testing, and validation. +

+ +
+ +
+ +
Reactive Form Example
+ +
+ + + + + +
+ +
+ + + + + Required + + + + + + + Required + + + +
+ +
+ + + + + Required + + + + + + + Required + + + +
+ +
+ + + + + Required + + + + + + + Required + + + + + + {{postalCode.value.length}} / 5 + + Postal Code needs to be max. {{formErrors.postalCode.maxlength.requiredLength}} characters + + + +
+ +
+ +
+ +
Reactive Form Errors Model
+ + 
{{formErrors | json}}
+
+ +
+ + +
+ + +
+ + diff --git a/src/app/main/content/ui/forms/forms.component.scss b/src/app/main/content/ui/forms/forms.component.scss new file mode 100644 index 00000000..33c43ccd --- /dev/null +++ b/src/app/main/content/ui/forms/forms.component.scss @@ -0,0 +1,17 @@ +:host { + + .content { + + form { + max-width: 800px !important; + } + + .form-errors-model { + flex: 1; + + code { + background: none !important; + } + } + } +} \ No newline at end of file diff --git a/src/app/main/content/ui/forms/forms.component.ts b/src/app/main/content/ui/forms/forms.component.ts new file mode 100644 index 00000000..c32e110d --- /dev/null +++ b/src/app/main/content/ui/forms/forms.component.ts @@ -0,0 +1,67 @@ +import { Component, OnInit } from '@angular/core'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; + +@Component({ + selector : 'fuse-forms', + templateUrl: './forms.component.html', + styleUrls : ['./forms.component.scss'] +}) +export class FuseFormsComponent implements OnInit +{ + form: FormGroup; + formErrors: any; + + constructor(private formBuilder: FormBuilder) + { + this.formErrors = { + company : {}, + firstName : {}, + lastName : {}, + address : {}, + address2 : {}, + city : {}, + state : {}, + postalCode: {} + }; + } + + ngOnInit() + { + this.form = this.formBuilder.group({ + company : [{value: 'Google', disabled: true}, Validators.required], + firstName : ['', Validators.required], + lastName : ['', Validators.required], + address : ['', Validators.required], + address2 : ['', Validators.required], + city : ['', Validators.required], + state : ['', Validators.required], + postalCode: ['', [Validators.required, Validators.maxLength(5)]] + }); + + this.form.valueChanges.subscribe(() => { + this.onFormValuesChanged(); + }); + } + + onFormValuesChanged() + { + for ( const field in this.formErrors ) + { + if ( !this.formErrors.hasOwnProperty(field) ) + { + continue; + } + + // Clear previous errors + this.formErrors[field] = {}; + + // Get the control + const control = this.form.get(field); + + if ( control && control.dirty && !control.valid ) + { + this.formErrors[field] = control.errors; + } + } + } +} diff --git a/src/app/main/content/ui/forms/forms.module.ts b/src/app/main/content/ui/forms/forms.module.ts new file mode 100644 index 00000000..ccbdb13f --- /dev/null +++ b/src/app/main/content/ui/forms/forms.module.ts @@ -0,0 +1,25 @@ +import { NgModule } from '@angular/core'; +import { SharedModule } from '../../../../core/modules/shared.module'; +import { RouterModule, Routes } from '@angular/router'; + +import { FuseFormsComponent } from './forms.component'; + +const routes: Routes = [ + { + path : 'ui/forms', + component: FuseFormsComponent + } +]; + +@NgModule({ + imports : [ + SharedModule, + RouterModule.forChild(routes) + ], + declarations: [ + FuseFormsComponent + ] +}) +export class UIFormsModule +{ +} diff --git a/src/app/main/content/ui/ui.module.ts b/src/app/main/content/ui/ui.module.ts index 20fe5a6d..f5ca2582 100644 --- a/src/app/main/content/ui/ui.module.ts +++ b/src/app/main/content/ui/ui.module.ts @@ -1,5 +1,6 @@ import { NgModule } from '@angular/core'; +import { UIFormsModule } from './forms/forms.module'; import { UIIconsModule } from './icons/icons.module'; import { UITypographyModule } from './typography/typography.module'; import { UIHelperClassesModule } from './helper-classes/helper-classes.module'; @@ -8,6 +9,7 @@ import { UIColorsModule } from './colors/colors.module'; @NgModule({ imports: [ + UIFormsModule, UIIconsModule, UITypographyModule, UIHelperClassesModule, From fd0f132f17f0a2786892ba73b7b2f8253f931a9c Mon Sep 17 00:00:00 2001 From: Sercan Yemen Date: Fri, 4 Aug 2017 12:15:25 +0300 Subject: [PATCH 2/2] price tables done... --- .../components/navigation/navigation.model.ts | 6 + .../content/components/components.module.ts | 8 +- .../price-tables/price-tables.component.html | 320 ++++++++++++++++++ .../price-tables/price-tables.component.scss | 3 + .../price-tables/price-tables.component.ts | 14 + 5 files changed, 350 insertions(+), 1 deletion(-) create mode 100644 src/app/main/content/components/price-tables/price-tables.component.html create mode 100644 src/app/main/content/components/price-tables/price-tables.component.scss create mode 100644 src/app/main/content/components/price-tables/price-tables.component.ts diff --git a/src/app/core/components/navigation/navigation.model.ts b/src/app/core/components/navigation/navigation.model.ts index 0e04362b..1aa6db5a 100644 --- a/src/app/core/components/navigation/navigation.model.ts +++ b/src/app/core/components/navigation/navigation.model.ts @@ -392,6 +392,12 @@ export class FuseNavigation } ] }, + { + 'title': 'Price Tables', + 'type' : 'nav-item', + 'icon' : 'view_carousel', + 'url' : '/components/price-tables' + } ]; } } diff --git a/src/app/main/content/components/components.module.ts b/src/app/main/content/components/components.module.ts index ef7b89a2..f1a0604c 100644 --- a/src/app/main/content/components/components.module.ts +++ b/src/app/main/content/components/components.module.ts @@ -2,11 +2,16 @@ import { NgModule } from '@angular/core'; import { SharedModule } from '../../../core/modules/shared.module'; import { RouterModule } from '@angular/router'; import { NgxDatatableComponent } from './datatable/ngx-datatable.component'; +import { FusePriceTablesComponent } from './price-tables/price-tables.component'; const routes = [ { path : 'components/datatables/ngx-datatable', component: NgxDatatableComponent + }, + { + path : 'components/price-tables', + component: FusePriceTablesComponent } ]; @@ -16,7 +21,8 @@ const routes = [ RouterModule.forChild(routes) ], declarations: [ - NgxDatatableComponent + NgxDatatableComponent, + FusePriceTablesComponent ] }) export class ComponentsModule diff --git a/src/app/main/content/components/price-tables/price-tables.component.html b/src/app/main/content/components/price-tables/price-tables.component.html new file mode 100644 index 00000000..9be40ef0 --- /dev/null +++ b/src/app/main/content/components/price-tables/price-tables.component.html @@ -0,0 +1,320 @@ +
+ + +
+
+
+ home + chevron_right + Tables +
+
Price Tables
+
+
+ + + +
+ + +
+ +
Style 1
+ +
+
+
+ BASIC +
+ +
+
$
+
+
4
+
/ month
+
+
+ + + +
+
+ 10 + Projects +
+
+ 10 + Pages +
+
+ 100 + Mb Disk Space +
+
+ + +
+ +
+
+ STANDARD + Save 15% +
+ +
+
$
+
+
8
+
/ month
+
+
+ + + +
+
+ 20 + Projects +
+
+ 20 + Pages +
+
+ 200 + Mb Disk Space +
+
+ + +
+ +
+
+ ADVANCED +
+ +
+
$
+
+
12
+
/ month
+
+
+ + + +
+
+ 40 + Projects +
+
+ 40 + Pages +
+
+ 500 + Mb Disk Space +
+
+ + +
+
+ +
+ + + +
+ +
Style 2
+ +
+
+
SILVER PACKAGE
+ +
+
$
+
99
+
+ +
PER MONTH
+ +
+
+ 10 + Projects +
+
+ 10 + Pages +
+
+ 100 + Mb Disk Space +
+
+ + +
+ +
+
BEST VALUE
+ +
GOLD PACKAGE
+ +
+
$
+
299
+
+ +
PER MONTH
+ +
+
+ 20 + Projects +
+
+ 20 + Pages +
+
+ 200 + Mb Disk Space +
+
+ + +
+ +
+
PLATINUM PACKAGE
+ +
+
$
+
499
+
+ +
PER MONTH
+ +
+
+ 40 + Projects +
+
+ 40 + Pages +
+
+ 500 + Mb Disk Space +
+
+ + + +
+
+ +
+ + + +
+ +
Style 3
+ +
+
+
+
Starter
+
For small teams
+
+ +
+
$
+
+
29
+
monthly per user
+
+
+ +
+
Unlimited projects
+
Unlimited pages
+
Unlimited disk space
+
24 / 7 Free support
+
+ + + +
7 day free trial to start
+
+ +
+
+
Pro
+
For larger teams
+
+ +
+
$
+
+
59
+
monthly per user
+
+
+ +
+
Unlimited projects
+
Unlimited pages
+
Unlimited disk space
+
24 / 7 Free support
+
Advanced reporting
+
Customizable interface
+
CRM Integration
+
+ + + +
30 day free trial to start
+
+ +
+
+
Enterprise
+
For big teams
+
+ +
+
$
+
+
99
+
monthly per user
+
+
+ +
+
Unlimited projects
+
Unlimited pages
+
Unlimited disk space
+
For full feature list, call us
+
+ + + +
90 day free trial to start
+
+
+ +
+ + +
+ +
+ diff --git a/src/app/main/content/components/price-tables/price-tables.component.scss b/src/app/main/content/components/price-tables/price-tables.component.scss new file mode 100644 index 00000000..8fdbe2d4 --- /dev/null +++ b/src/app/main/content/components/price-tables/price-tables.component.scss @@ -0,0 +1,3 @@ +:host { + +} \ No newline at end of file diff --git a/src/app/main/content/components/price-tables/price-tables.component.ts b/src/app/main/content/components/price-tables/price-tables.component.ts new file mode 100644 index 00000000..1b543a25 --- /dev/null +++ b/src/app/main/content/components/price-tables/price-tables.component.ts @@ -0,0 +1,14 @@ +import { Component } from '@angular/core'; + +@Component({ + selector : 'fuse-price-tables', + templateUrl: './price-tables.component.html', + styleUrls : ['./price-tables.component.scss'] +}) +export class FusePriceTablesComponent +{ + constructor() + { + + } +}