purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-11-04 09:33:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/withinpixels/fuse2

Browse Source
This commit is contained in:
Sercan Yemen 2017-08-03 12:37:56 +03:00
commit 09cd8b497b
13 changed files with 300 additions and 1285 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1025
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

26
package.json
View File

@ -12,18 +12,18 @@
},
"private": true,
"dependencies": {
"@angular/animations": "^4.3.2",
"@angular/animations": "^4.3.3",
"@angular/cdk": "^2.0.0-beta.8",
"@angular/common": "^4.3.2",
"@angular/compiler": "^4.3.2",
"@angular/core": "^4.3.2",
"@angular/common": "^4.3.3",
"@angular/compiler": "^4.3.3",
"@angular/core": "^4.3.3",
"@angular/flex-layout": "2.0.0-beta.8",
"@angular/forms": "^4.3.2",
"@angular/http": "^4.3.2",
"@angular/forms": "^4.3.3",
"@angular/http": "^4.3.3",
"@angular/material": "^2.0.0-beta.8",
"@angular/platform-browser": "^4.3.2",
"@angular/platform-browser-dynamic": "^4.3.2",
"@angular/router": "^4.3.2",
"@angular/platform-browser": "^4.3.3",
"@angular/platform-browser-dynamic": "^4.3.3",
"@angular/router": "^4.3.3",
"@swimlane/ngx-datatable": "^9.3.1",
"@swimlane/ngx-dnd": "^2.2.0",
"angular-calendar": "^0.19.0",
@ -34,14 +34,14 @@
"highlight.js": "^9.12.0",
"moment": "^2.18.1",
"ngx-color-picker": "^4.2.0",
"ngx-perfect-scrollbar": "^4.5.2",
"ngx-perfect-scrollbar": "^4.5.3",
"rxjs": "^5.4.2",
"zone.js": "^0.8.16"
},
"devDependencies": {
"@angular/cli": "^1.2.5",
"@angular/compiler-cli": "^4.3.1",
"@angular/language-service": "^4.3.1",
"@angular/cli": "^1.2.6",
"@angular/compiler-cli": "^4.3.3",
"@angular/language-service": "^4.3.3",
"@types/jasmine": "^2.5.53",
"@types/jasminewd2": "^2.0.2",
"@types/node": "^6.0.83",

4
src/app/main/content/apps/calendar/event-form/event-form.component.html
View File

@ -64,10 +64,6 @@
</md-input-container>
<md-datepicker #startDatePicker></md-datepicker>
<md-input-container class="no-errors-spacer" flex md-no-float>
<input mdInput ng-model="calendarEvent.startTime" placeholder="Start Time">
</md-input-container>
</div>
<div fxFlex="1 0 auto" fxLayout="row">

223
src/app/main/content/apps/contacts/contact-form/contact-form.component.html
View File

@ -17,173 +17,85 @@
<div md-dialog-content class="p-24 m-0" perfect-scrollbar>
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12">account_circle</md-icon>
<md-input-container fxFlex>
<input placeholder="Name" mdInput="" ng-required md-autofocus>
</md-input-container>
</div>
<form [formGroup]="contactForm">
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12"></md-icon>
<md-input-container fxFlex>
<input placeholder="Lastname" mdInput>
</md-input-container>
</div>
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12">account_circle</md-icon>
<md-input-container fxFlex>
<input name="name" formControlName="name" placeholder="Name" mdInput required>
</md-input-container>
</div>
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12">star</md-icon>
<md-input-container fxFlex>
<input mdInput placeholder="Nickname">
</md-input-container>
</div>
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12"></md-icon>
<md-input-container fxFlex>
<input name="lastName" formControlName="lastName" placeholder="Lastname" mdInput>
</md-input-container>
</div>
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12">phone</md-icon>
<md-input-container fxFlex>
<input mdInput placeholder="Phone number">
</md-input-container>
</div>
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12">star</md-icon>
<md-input-container fxFlex>
<input name="nickname" formControlName="nickname" mdInput placeholder="Nickname">
</md-input-container>
</div>
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12">email</md-icon>
<md-input-container fxFlex>
<input mdInput type="email" placeholder="Email">
</md-input-container>
</div>
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12">phone</md-icon>
<md-input-container fxFlex>
<input formControlName="phone" mdInput placeholder="Phone number">
</md-input-container>
</div>
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12">domain</md-icon>
<md-input-container fxFlex>
<input mdInput placeholder="Company">
</md-input-container>
</div>
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12">email</md-icon>
<md-input-container fxFlex>
<input name="email" formControlName="email" mdInput type="email" placeholder="Email">
</md-input-container>
</div>
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12">work</md-icon>
<md-input-container fxFlex>
<input mdInput placeholder="Job title">
</md-input-container>
</div>
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12">domain</md-icon>
<md-input-container fxFlex>
<input name="company" formControlName="company" mdInput placeholder="Company">
</md-input-container>
</div>
<!--
<md-datepicker class="birthday-input" ng-model="contact.birthday" md-placeholder="Birthday"
ng-required="false">
</md-datepicker>-->
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12">work</md-icon>
<md-input-container fxFlex>
<input name="jobTitle" formControlName="jobTitle" mdInput placeholder="Job title">
</md-input-container>
</div>
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12">home</md-icon>
<md-input-container fxFlex>
<input mdInput placeholder="Address">
</md-input-container>
</div>
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-input-container fxFlex class="mr-24">
<button mdSuffix [mdDatepickerToggle]="birthdayDatePicker"></button>
<input mdInput
name="birthday" formControlName="birthday"
[mdDatepicker]="birthdayDatePicker"
placeholder="Birthday">
</md-input-container>
<md-datepicker #birthdayDatePicker></md-datepicker>
</div>
<div fxLayout="row" class="textarea-wrapper" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12">note</md-icon>
<md-input-container fxFlex>
<textarea placeholder="Notes" mdInput type="text" max-rows="4"></textarea>
</md-input-container>
</div>
<div class="mb-24" fxLayout="row" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12">home</md-icon>
<md-input-container fxFlex>
<input name="address" formControlName="address" mdInput placeholder="Address">
</md-input-container>
</div>
<div fxLayout="row" class="textarea-wrapper" fxLayoutAlign="start start">
<md-icon class="mr-12 mt-12">note</md-icon>
<md-input-container fxFlex>
<textarea name="notes" formControlName="notes" placeholder="Notes" mdInput type="text" max-rows="4"></textarea>
</md-input-container>
</div>
</form>
</div>
<!--
<form name="contactForm" [formGroup]="contactForm" class="event-form" fxLayout="column" fxFlex>
<md-input-container>
<input mdInput
name="title"
formControlName="title"
placeholder="Title"
required>
</md-input-container>
<div class="py-16" fxFlex="1 0 auto" fxLayout="row">
<md-slide-toggle
name="allDay"
formControlName="allDay"
class="mr-24"
aria-label="All day">
All Day
</md-slide-toggle>
</div>
<div class="py-16" fxFlex="1 0 auto" fxLayout="row" formGroupName="color">
<md-input-container class="mr-24">
<input mdInput
name="primary color"
formControlName="primary"
placeholder="Primary color"
[(colorPicker)]="event.color.primary"
[style.background]="event.color.primary"
(colorPickerChange)="event.color.primary = $event; contactForm.patchValue({color:{primary:$event}})"/>
</md-input-container>
<md-input-container>
<input mdInput
name="secondary color"
formControlName="secondary"
placeholder="Secondary color"
[(colorPicker)]="event.color.secondary"
[style.background]="event.color.secondary"
(colorPickerChange)="event.color.secondary = $event; contactForm.patchValue({color:{secondary:$event}})"/>
</md-input-container>
</div>
<div fxFlex="1 0 auto" fxLayout="row">
<md-input-container class="mr-24">
<input mdInput
name="start"
formControlName="start"
[mdDatepicker]="startDatePicker"
placeholder="Start Date">
<button mdSuffix [mdDatepickerToggle]="startDatePicker"></button>
</md-input-container>
<md-datepicker #startDatePicker></md-datepicker>
<md-input-container class="no-errors-spacer" flex md-no-float>
<input mdInput ng-model="calendarEvent.startTime" placeholder="Start Time">
</md-input-container>
</div>
<div fxFlex="1 0 auto" fxLayout="row">
<md-input-container class="mr-24">
<input mdInput
name="end"
formControlName="end"
[mdDatepicker]="endDatePicker"
placeholder="End Date">
<button mdSuffix [mdDatepickerToggle]="endDatePicker"></button>
</md-input-container>
<md-datepicker #endDatePicker></md-datepicker>
<md-input-container class="no-errors-spacer" flex md-no-float>
<input mdInput ng-model="calendarEvent.endTime" placeholder="End Time">
</md-input-container>
</div>
<md-input-container formGroupName="meta">
<input mdInput
name="location"
formControlName="location"
placeholder="Location">
</md-input-container>
<md-input-container formGroupName="meta">
<textarea mdInput
formControlName="notes"
placeholder="Notes"
md-maxlength="250"
max-rows="4">
</textarea>
</md-input-container>
</form>
<div md-dialog-actions class="m-0 p-16" fxLayout="row" fxLayoutAlign="space-between center">
@ -215,4 +127,3 @@
</button>
</div>
-->

1
src/app/main/content/apps/contacts/contact-form/contact-form.component.scss
View File

@ -1,4 +1,5 @@
.contact-form-dialog {
.mat-dialog-container {
padding: 0;
max-width: 400px;

31
src/app/main/content/apps/contacts/contact-form/contact-form.component.ts
View File

@ -26,12 +26,12 @@ export class ContactFormDialogComponent implements OnInit
private formBuilder: FormBuilder
)
{
this.contact = data.contact;
this.action = data.action;
if ( this.action === 'edit' )
{
this.dialogTitle = 'Edit Contact';
this.contact = data.contact;
}
else
{
@ -39,7 +39,7 @@ export class ContactFormDialogComponent implements OnInit
this.contact = new Contact({});
}
// this.contactForm = this.createContactForm();
this.contactForm = this.createContactForm();
}
ngOnInit()
@ -48,20 +48,19 @@ export class ContactFormDialogComponent implements OnInit
createContactForm()
{
return new FormGroup({
title : new FormControl(this.event.title),
start : new FormControl(this.event.start),
end : new FormControl(this.event.end),
allDay: new FormControl(this.event.allDay),
color : this.formBuilder.group({
primary : new FormControl(this.event.color.primary),
secondary: new FormControl(this.event.color.secondary)
}),
meta :
this.formBuilder.group({
location: new FormControl(this.event.meta.location),
notes : new FormControl(this.event.meta.notes)
})
return this.formBuilder.group({
id : [this.contact.id],
name : [this.contact.name],
lastName: [this.contact.lastName],
avatar : [this.contact.avatar],
nickname: [this.contact.nickname],
company : [this.contact.company],
jobTitle: [this.contact.jobTitle],
email : [this.contact.email],
phone : [this.contact.phone],
address : [this.contact.address],
birthday: [this.contact.birthday],
notes : [this.contact.notes]
});
}
}

13
src/app/main/content/apps/contacts/contact-list/contact-list.component.html
View File

@ -72,18 +72,18 @@
<md-header-cell *cdkHeaderCellDef></md-header-cell>
<md-cell *cdkCellDef="let contact">
<div fxFlex="row" fxLayoutAlign="end center">
<button md-icon-button (click)="toggleStar(contact.id)" aria-label="Toggle star">
<button md-icon-button (click)="$event.stopPropagation();toggleStar(contact.id)" aria-label="Toggle star">
<md-icon *ngIf="user.starred.includes(contact.id)">star</md-icon>
<md-icon *ngIf="!user.starred.includes(contact.id)">star_outline</md-icon>
</button>
<button md-icon-button [mdMenuTriggerFor]="moreMenu" aria-label="More"
ng-click="$mdOpenMenu($event)">
(click)="$event.stopPropagation();">
<md-icon>more_vert</md-icon>
</button>
<md-menu #moreMenu="mdMenu">
<button md-menu-item aria-label="remove" (click)="removeContact(contact.id)">
<button md-menu-item aria-label="remove" (click)="deleteContact(contact)">
<md-icon>delete</md-icon>
<span>Remove</span>
</button>
@ -100,3 +100,10 @@
md-ripple>
</md-row>
</md-table>
<!-- ADD CONTACT BUTTON -->
<button md-fab class="md-accent-bg" id="add-contact-button" (click)="newContact($event)" aria-label="add contact">
<md-icon>person_add</md-icon>
</button>
<!-- / ADD CONTACT BUTTON -->

7
src/app/main/content/apps/contacts/contact-list/contact-list.component.scss
View File

@ -37,3 +37,10 @@
}
}
}
#add-contact-button {
position: fixed;
bottom: 12px;
right: 12px;
padding: 0;
}

100
src/app/main/content/apps/contacts/contact-list/contact-list.component.ts
View File

@ -5,6 +5,7 @@ import { Observable } from 'rxjs/Observable';
import { ContactFormDialogComponent } from '../contact-form/contact-form.component';
import { MdDialog, MdDialogRef } from '@angular/material';
import { FuseConfirmDialogComponent } from '../../../../../core/components/confirm-dialog/confirm-dialog.component';
import { FormGroup } from '@angular/forms';
@Component({
selector : 'fuse-contacts-contact-list',
@ -60,10 +61,30 @@ export class ContactListComponent implements OnInit
this.dataSource = new FilesDataSource(this.contactsService);
}
newContact()
{
this.dialogRef = this.dialog.open(ContactFormDialogComponent, {
panelClass: 'contact-form-dialog',
data : {
action: 'new'
}
});
this.dialogRef.afterClosed()
.subscribe((response: FormGroup) => {
if ( !response )
{
return;
}
this.contactsService.updateContact(response.getRawValue());
});
}
editContact(contact)
{
// this.fileManagerService.onContactSelected.next(selected);
this.dialogRef = this.dialog.open(ContactFormDialogComponent, {
panelClass: 'contact-form-dialog',
data : {
@ -72,35 +93,55 @@ export class ContactListComponent implements OnInit
}
});
/* this.dialogRef.afterClosed()
.subscribe(response => {
if ( !response )
{
return;
}
const actionType: string = response[0];
const formData: FormGroup = response[1];
switch ( actionType )
{
/!**
* Save
*!/
case 'save':
this.dialogRef.afterClosed()
.subscribe(response => {
if ( !response )
{
return;
}
const actionType: string = response[0];
const formData: FormGroup = response[1];
switch ( actionType )
{
/**
* Save
*/
case 'save':
this.events[eventIndex] = Object.assign(this.events[eventIndex], formData.getRawValue());
this.refresh.next(true);
this.contactsService.updateContact(formData.getRawValue());
break;
/!**
* Delete
*!/
case 'delete':
break;
/**
* Delete
*/
case 'delete':
this.deleteEvent(event);
this.deleteContact(contact);
break;
}
});
}
/**
* Delete Contact
*/
deleteContact(contact)
{
this.confirmDialogRef = this.dialog.open(FuseConfirmDialogComponent, {
disableClose: false
});
this.confirmDialogRef.componentInstance.confirmMessage = 'Are you sure you want to delete?';
this.confirmDialogRef.afterClosed().subscribe(result => {
if ( result )
{
this.contactsService.deleteContact(contact);
}
this.confirmDialogRef = null;
});
break;
}
});*/
}
onSelectedChange(contactId)
@ -121,11 +162,6 @@ export class ContactListComponent implements OnInit
this.contactsService.updateUserData(this.user);
}
removeContact(contactId)
{
}
}
export class FilesDataSource extends DataSource<any>

28
src/app/main/content/apps/contacts/contact.model.ts
View File

@ -1,3 +1,5 @@
import { FuseUtils } from '../../../../core/fuseUtils';
export class Contact
{
id: string;
@ -16,20 +18,18 @@ export class Contact
constructor(contact)
{
{
this.id = contact.id;
this.name = contact.name;
this.lastName = contact.lastName;
this.avatar = contact.avatar;
this.nickname = contact.nickname;
this.company = contact.company;
this.jobTitle = contact.jobTitle;
this.email = contact.email;
this.phone = contact.phone;
this.address = contact.address;
this.birthday = contact.birhday;
this.notes = contact.notes;
this.id = contact.id || FuseUtils.genearateGUID();
this.name = contact.name || '';
this.lastName = contact.lastName || '';
this.avatar = contact.avatar || 'assets/images/avatars/profile.jpg';
this.nickname = contact.nickname || '';
this.company = contact.company || '';
this.jobTitle = contact.jobTitle || '';
this.email = contact.email || '';
this.phone = contact.phone || '';
this.address = contact.address || '';
this.birthday = contact.birhday || '';
this.notes = contact.notes || '';
}
}
}

84
src/app/main/content/apps/contacts/contacts.component.html
View File

@ -50,7 +50,7 @@
<!-- / SIDENAV -->
<!-- CENTER -->
<div class="center p-24" perfect-scrollbar>
<div class="center p-24 pr-92" perfect-scrollbar>
<!-- CONTENT -->
<div class="content md-white-bg mat-elevation-z4">
@ -66,85 +66,3 @@
</md-sidenav-container>
</div>
<!--
<div id="file-manager" class="page-layout simple right-sidenav" fxfxLayout="row">
<md-sidenav-container>
&lt;!&ndash; SIDENAV &ndash;&gt;
<md-sidenav class="sidenav left-sidenav" align="start" opened="false" mode="over"
fuseMdSidenavHelper="file-manager-left-sidenav">
<fuse-contacts-main-sidenav></fuse-contacts-main-sidenav>
</md-sidenav>
&lt;!&ndash; / SIDENAV &ndash;&gt;
&lt;!&ndash; CENTER &ndash;&gt;
<div class="center" fxFlex perfect-scrollbar>
&lt;!&ndash; HEADER &ndash;&gt;
<div class="header md-accent-bg p-24" fxfxLayout="column" fxLayoutAlign="space-between start">
&lt;!&ndash; TOOLBAR &ndash;&gt;
<div class="toolbar w-100-p" fxFlex fxfxLayout="row" fxLayoutAlign="space-between start">
<div class="left-side" fxfxLayout="row">
<button md-icon-button class="sidenav-toggle"
fuseMdSidenavToggler="file-manager-left-sidenav">
<md-icon>menu</md-icon>
</button>
<button md-icon-button class="sidenav-toggle"
fuseMdSidenavToggler="file-manager-right-sidenav"
fxHide.gt-md>
<md-icon>menu</md-icon>
</button>
</div>
<div class="right-side" fxfxLayout="row">
<button md-button class="mat-icon-button" aria-label="Search" md-tooltip="Search">
<md-icon>search</md-icon>
</button>
</div>
</div>
&lt;!&ndash; / TOOLBAR &ndash;&gt;
&lt;!&ndash; BREADCRUMB &ndash;&gt;
<div class="breadcrumb text-truncate h1 pl-72" fxfxLayout="row" fxLayoutAlign="start center">
<div *ngFor="let path of pathArr; last as isLast" fxfxLayout="row" fxLayoutAlign="start center">
<span>{{path}}</span>
<md-icon *ngIf="!isLast" class="separator">chevron_right</md-icon>
</div>
</div>
&lt;!&ndash; / BREADCRUMB &ndash;&gt;
&lt;!&ndash; ADD FILE BUTTON &ndash;&gt;
<div class="file-uploader">
<input hidden type="file" #fileInput/>
<button type="submit" md-fab
class="add-file-button mat-accent"
(click)="fileInput.click()"
aria-label="Add file">
<md-icon>add</md-icon>
</button>
</div>
&lt;!&ndash; / ADD FILE BUTTON &ndash;&gt;
</div>
&lt;!&ndash; / HEADER &ndash;&gt;
&lt;!&ndash; CONTENT &ndash;&gt;
<div class="content">
<fuse-contacts-contact-list></fuse-contacts-contact-list>
</div>
&lt;!&ndash; / CONTENT &ndash;&gt;
</div>
&lt;!&ndash; / CENTER &ndash;&gt;
</md-sidenav-container>
</div>
-->

23
src/app/main/content/apps/contacts/contacts.service.ts
View File

@ -152,7 +152,6 @@ export class ContactsService implements Resolve<any>
*/
toggleSelectAll()
{
console.info(this.selectedContacts);
if ( this.selectedContacts.length > 0 )
{
this.deselectContacts();
@ -194,6 +193,7 @@ export class ContactsService implements Resolve<any>
this.http.post('api/contacts-contacts/' + contact.id, {...contact})
.subscribe(response => {
this.getContacts();
resolve(response);
});
});
@ -219,4 +219,25 @@ export class ContactsService implements Resolve<any>
this.onSelectedContactsChanged.next(this.selectedContacts);
}
deleteContact(contact)
{
const contactIndex = this.contacts.indexOf(contact);
this.contacts.splice(contactIndex, 1);
this.onContactsChanged.next(this.contacts);
}
deleteSelectedContacts()
{
for ( const contactId of this.selectedContacts )
{
const contact = this.contacts.find(_contact => {
return _contact.id === contactId;
});
const contactIndex = this.contacts.indexOf(contact);
this.contacts.splice(contactIndex, 1);
}
this.onContactsChanged.next(this.contacts);
this.deselectContacts();
}
}

20
src/app/main/content/apps/contacts/selected-bar/selected-bar.component.ts
View File

@ -1,5 +1,7 @@
import { Component, OnInit } from '@angular/core';
import { ContactsService } from '../contacts.service';
import { MdDialog, MdDialogRef } from '@angular/material';
import { FuseConfirmDialogComponent } from '../../../../../core/components/confirm-dialog/confirm-dialog.component';
@Component({
selector : 'fuse-selected-bar',
@ -11,8 +13,12 @@ export class SelectedBarComponent implements OnInit
selectedContacts: string[];
hasSelectedContacts: boolean;
isIndeterminate: boolean;
confirmDialogRef: MdDialogRef<FuseConfirmDialogComponent>;
constructor(private contactsService: ContactsService)
constructor(
private contactsService: ContactsService,
public dialog: MdDialog
)
{
this.contactsService.onSelectedContactsChanged
.subscribe(selectedContacts => {
@ -41,7 +47,19 @@ export class SelectedBarComponent implements OnInit
deleteSelectedContacts()
{
this.confirmDialogRef = this.dialog.open(FuseConfirmDialogComponent, {
disableClose: false
});
this.confirmDialogRef.componentInstance.confirmMessage = 'Are you sure you want to delete all selected contacts?';
this.confirmDialogRef.afterClosed().subscribe(result => {
if ( result )
{
this.contactsService.deleteSelectedContacts();
}
this.confirmDialogRef = null;
});
}
}