purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 12:35:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/master'

Browse Source
This commit is contained in:
mustafahlvc 2017-08-04 12:15:50 +03:00
commit d86f7b892e
10 changed files with 591 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/core/components/navigation/navigation.model.ts
View File

@ -252,6 +252,12 @@ export class FuseNavigation
}
]
},*/
{
'title': 'Forms',
'type' : 'nav-item',
'icon' : 'web_asset',
'url' : '/ui/forms'
},
{
'title': 'Icons',
'type' : 'nav-item',
@ -386,6 +392,12 @@ export class FuseNavigation
}
]
},
{
'title': 'Price Tables',
'type' : 'nav-item',
'icon' : 'view_carousel',
'url' : '/components/price-tables'
}
];
}
}

8
src/app/main/content/components/components.module.ts
View File

@ -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

320
src/app/main/content/components/price-tables/price-tables.component.html Normal file
View File

@ -0,0 +1,320 @@
<div id="price-tables" class="page-layout simple fullwidth">
<!-- HEADER -->
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
<div fxLayout="column" fxLayoutAlign="center start">
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="secondary-text s-16">home</md-icon>
<md-icon class="secondary-text s-16">chevron_right</md-icon>
<span class="secondary-text">Tables</span>
</div>
<div class="h2 mt-16">Price Tables</div>
</div>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content p-24" fxLayout="column">
<!-- STYLE 1 -->
<div fxLayout="column">
<div class="mat-title">Style 1</div>
<div class="price-tables" fxLayout="row" fxLayoutWrap>
<div class="price-table style-1 mat-elevation-z1" fxLayout="column">
<div class="package-type md-primary-bg">
<span>BASIC</span>
</div>
<div class="price" fxLayout="row" fxLayoutAlign="center start">
<div class="currency">$</div>
<div fxLayout="row" fxLayoutAlign="center end">
<div class="value">4</div>
<div class="period">/ month</div>
</div>
</div>
<md-divider></md-divider>
<div class="terms" fxLayout="column">
<div class="term">
<span class="text-bold">10</span>
Projects
</div>
<div class="term">
<span class="text-bold">10</span>
Pages
</div>
<div class="term">
<span class="text-bold">100</span>
Mb Disk Space
</div>
</div>
<button md-raised-button class="cta-button" color="accent">BUY NOW</button>
</div>
<div class="price-table style-1 mat-elevation-z8" fxLayout="column">
<div class="package-type md-primary-bg" fxLayout="row" fxLayoutAlign="space-between center">
<span>STANDARD</span>
<span class="sale md-accent-color md-hue-1">Save 15%</span>
</div>
<div class="price" fxLayout="row" fxLayoutAlign="center start">
<div class="currency">$</div>
<div fxLayout="row" fxLayoutAlign="center end">
<div class="value">8</div>
<div class="period">/ month</div>
</div>
</div>
<md-divider></md-divider>
<div class="terms" fxLayout="column">
<div class="term">
<span class="text-bold">20</span>
Projects
</div>
<div class="term">
<span class="text-bold">20</span>
Pages
</div>
<div class="term">
<span class="text-bold">200</span>
Mb Disk Space
</div>
</div>
<button md-raised-button class="cta-button" color="accent">BUY NOW</button>
</div>
<div class="price-table style-1 mat-elevation-z1" fxLayout="column">
<div class="package-type md-primary-bg" fxLayout="row">
<span>ADVANCED</span>
</div>
<div class="price" fxLayout="row" fxLayoutAlign="center start">
<div class="currency">$</div>
<div fxLayout="row" fxLayoutAlign="center end">
<div class="value">12</div>
<div class="period">/ month</div>
</div>
</div>
<md-divider></md-divider>
<div class="terms" fxLayout="column">
<div class="term">
<span class="text-bold">40</span>
Projects
</div>
<div class="term">
<span class="text-bold">40</span>
Pages
</div>
<div class="term">
<span class="text-bold">500</span>
Mb Disk Space
</div>
</div>
<button md-raised-button class="cta-button" color="accent">BUY NOW</button>
</div>
</div>
</div>
<!-- / STYLE 1 -->
<!-- STYLE 2 -->
<div fxLayout="column" class="mt-48">
<div class="mat-title">Style 2</div>
<div class="price-tables" fxLayout="row" fxLayoutWrap>
<div class="price-table style-2 mat-elevation-z1" fxLayout="column">
<div class="package-type md-accent-fg">SILVER PACKAGE</div>
<div class="price" fxLayout="row" fxLayoutAlign="center start">
<div class="currency">$</div>
<div class="value">99</div>
</div>
<div class="period">PER MONTH</div>
<div class="terms" fxLayout="column" fxLayoutAlign="start center">
<div class="term">
<span class="text-bold">10</span>
Projects
</div>
<div class="term">
<span class="text-bold">10</span>
Pages
</div>
<div class="term">
<span class="text-bold">100</span>
Mb Disk Space
</div>
</div>
<button md-raised-button class="cta-button" color="accent">GET STARTED</button>
</div>
<div class="price-table style-2 mat-elevation-z8" fxLayout="column">
<div class="badge md-warn-bg">BEST VALUE</div>
<div class="package-type md-accent-fg">GOLD PACKAGE</div>
<div class="price" fxLayout="row" fxLayoutAlign="center start">
<div class="currency">$</div>
<div class="value">299</div>
</div>
<div class="period">PER MONTH</div>
<div class="terms" fxLayout="column" fxLayoutAlign="start center">
<div class="term">
<span class="text-bold">20</span>
Projects
</div>
<div class="term">
<span class="text-bold">20</span>
Pages
</div>
<div class="term">
<span class="text-bold">200</span>
Mb Disk Space
</div>
</div>
<button md-raised-button class="cta-button" color="accent">GET STARTED</button>
</div>
<div class="price-table style-2 mat-elevation-z1" fxLayout="column">
<div class="package-type md-accent-fg">PLATINUM PACKAGE</div>
<div class="price" fxLayout="row" fxLayoutAlign="center start">
<div class="currency">$</div>
<div class="value">499</div>
</div>
<div class="period">PER MONTH</div>
<div class="terms" fxLayout="column" fxLayoutAlign="start center">
<div class="term">
<span class="text-bold">40</span>
Projects
</div>
<div class="term">
<span class="text-bold">40</span>
Pages
</div>
<div class="term">
<span class="text-bold">500</span>
Mb Disk Space
</div>
</div>
<button md-raised-button class="cta-button" color="accent">GET STARTED</button>
</div>
</div>
</div>
<!-- / STYLE 2 -->
<!-- STYLE 3 -->
<div fxLayout="column" class="mt-48">
<div class="mat-title">Style 3</div>
<div class="price-tables" fxLayout="row" fxLayoutAlign="start start" fxLayoutWrap>
<div class="price-table style-3 mat-elevation-z1" fxLayout="column">
<div class="package-type">
<div class="title">Starter</div>
<div class="subtitle">For small teams</div>
</div>
<div class="price md-primary-bg md-hue-3" fxLayout="row" fxLayoutAlign="center start">
<div class="currency">$</div>
<div fxLayout="row" fxLayoutAlign="center end">
<div class="value">29</div>
<div class="period">monthly per user</div>
</div>
</div>
<div class="terms" fxLayout="column" fxLayoutAlign="start center">
<div class="term">Unlimited projects</div>
<div class="term">Unlimited pages</div>
<div class="term">Unlimited disk space</div>
<div class="term">24 / 7 Free support</div>
</div>
<button md-raised-button class="cta-button" color="accent">GET STARTED FREE</button>
<div class="note">7 day free trial to start</div>
</div>
<div class="price-table style-3 mat-elevation-z8" fxLayout="column">
<div class="package-type">
<div class="title">Pro</div>
<div class="subtitle">For larger teams</div>
</div>
<div class="price md-primary-bg" fxLayout="row" fxLayoutAlign="center start">
<div class="currency">$</div>
<div fxLayout="row" fxLayoutAlign="center end">
<div class="value">59</div>
<div class="period">monthly per user</div>
</div>
</div>
<div class="terms" fxLayout="column" fxLayoutAlign="start center">
<div class="term">Unlimited projects</div>
<div class="term">Unlimited pages</div>
<div class="term">Unlimited disk space</div>
<div class="term">24 / 7 Free support</div>
<div class="term md-warn-fg">Advanced reporting</div>
<div class="term md-warn-fg">Customizable interface</div>
<div class="term md-warn-fg">CRM Integration</div>
</div>
<button md-raised-button class="cta-button" color="accent">GET STARTED FREE</button>
<div class="note">30 day free trial to start</div>
</div>
<div class="price-table style-3 mat-elevation-z1" fxLayout="column">
<div class="package-type">
<div class="title">Enterprise</div>
<div class="subtitle">For big teams</div>
</div>
<div class="price md-primary-bg md-hue-3" fxLayout="row" fxLayoutAlign="center start">
<div class="currency">$</div>
<div fxLayout="row" fxLayoutAlign="center end">
<div class="value">99</div>
<div class="period">monthly per user</div>
</div>
</div>
<div class="terms" fxLayout="column" fxLayoutAlign="start center">
<div class="term">Unlimited projects</div>
<div class="term">Unlimited pages</div>
<div class="term">Unlimited disk space</div>
<div class="term">For full feature list, call us</div>
</div>
<button md-raised-button class="cta-button" color="accent">CALL US</button>
<div class="note">90 day free trial to start</div>
</div>
</div>
</div>
<!-- / STYLE 3 -->
</div>
</div>

3
src/app/main/content/components/price-tables/price-tables.component.scss Normal file
View File

@ -0,0 +1,3 @@
:host {
}

14
src/app/main/content/components/price-tables/price-tables.component.ts Normal file
View File

@ -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()
{
}
}

124
src/app/main/content/ui/forms/forms.component.html Normal file
View File

@ -0,0 +1,124 @@
<div id="forms" class="page-layout simple fullwidth" fxLayout="column">
<!-- HEADER -->
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
<div fxLayout="column" fxLayoutAlign="center start">
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="secondary-text s-16">home</md-icon>
<md-icon class="secondary-text s-16">chevron_right</md-icon>
<span class="secondary-text">User Interface</span>
</div>
<div class="h1 mt-16">Forms</div>
</div>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content p-24">
<p class="mb-32">
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.
</p>
<div fxLayout="column" fxLayoutAlign="start start" fxLayout.gt-sm="row">
<form class="md-white-bg mat-elevation-z4 p-24 mr-24 mb-24" fxLayout="column" fxLayoutAlign="start"
fxFlex="1"
name="form" [formGroup]="form">
<div class="h2 mb-24">Reactive Form Example</div>
<div fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
<md-input-container fxFlex="100">
<input mdInput placeholder="Company (disabled)" formControlName="company">
</md-input-container>
</div>
<div fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
<md-input-container fxFlex="50">
<input mdInput placeholder="First name" formControlName="firstName">
<md-error *ngIf="formErrors.firstName.required">
Required
</md-error>
</md-input-container>
<md-input-container fxFlex="50">
<input mdInput placeholder="Last name" formControlName="lastName">
<md-error *ngIf="formErrors.lastName.required">
Required
</md-error>
</md-input-container>
</div>
<div fxLayout="row" fxLayoutAlign="start center" fxFlex="100" fxLayoutWrap>
<md-input-container fxFlex="100">
<textarea mdInput placeholder="Address" formControlName="address">
1600 Amphitheatre Pkwy
</textarea>
<md-error *ngIf="formErrors.address.required">
Required
</md-error>
</md-input-container>
<md-input-container fxFlex="100">
<textarea mdInput placeholder="Address 2" formControlName="address2"></textarea>
<md-error *ngIf="formErrors.address2.required">
Required
</md-error>
</md-input-container>
</div>
<div fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
<md-input-container fxFlex="33">
<input mdInput placeholder="City" formControlName="city">
<md-error *ngIf="formErrors.city.required">
Required
</md-error>
</md-input-container>
<md-input-container fxFlex="34">
<input mdInput placeholder="State" formControlName="state">
<md-error *ngIf="formErrors.state.required">
Required
</md-error>
</md-input-container>
<md-input-container fxFlex="33">
<input mdInput #postalCode placeholder="Postal Code" value="94043"
formControlName="postalCode">
<md-hint align="end">{{postalCode.value.length}} / 5</md-hint>
<md-error *ngIf="formErrors.postalCode.maxlength">
Postal Code needs to be max. {{formErrors.postalCode.maxlength.requiredLength}} characters
</md-error>
</md-input-container>
</div>
</form>
<div class="form-errors-model md-white-bg p-24 mat-elevation-z4">
<div class="h2 mb-24">Reactive Form Errors Model</div>
<pre><code>{{formErrors | json}}</code></pre>
</div>
</div>
</div>
<!-- / CONTENT -->
</div>

17
src/app/main/content/ui/forms/forms.component.scss Normal file
View File

@ -0,0 +1,17 @@
:host {
.content {
form {
max-width: 800px !important;
}
.form-errors-model {
flex: 1;
code {
background: none !important;
}
}
}
}

67
src/app/main/content/ui/forms/forms.component.ts Normal file
View File

@ -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;
}
}
}
}

25
src/app/main/content/ui/forms/forms.module.ts Normal file
View File

@ -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
{
}

2
src/app/main/content/ui/ui.module.ts
View File

@ -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,