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

(Scrumboard) final touches..

Browse Source
This commit is contained in:
mustafahlvc 2017-08-30 18:46:07 +03:00
parent ce6797a80b
commit b21526410a
15 changed files with 183 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/core/components/material-color-picker/material-color-picker.component.html
View File

@ -1,4 +1,5 @@
<button md-icon-button
type="button"
class="mat-elevation-z1"
[mdMenuTriggerFor]="colorMenu"
(onMenuOpen)="onMenuOpen()"

84
src/app/main/content/apps/scrumboard/board.model.ts Normal file
View File

@ -0,0 +1,84 @@
import { FuseUtils } from '../../../../core/fuseUtils';
import { List } from './list.model';
import { Card } from './card.model';
const sampleLabels = [
{
'id' : '56027e4119ad3a5dc28b36cd',
'name' : 'Design',
'color': 'md-red-500-bg'
},
{
'id' : '5640635e19ad3a5dc21416b2',
'name' : 'App',
'color': 'md-blue-500-bg'
},
{
'id' : '6540635g19ad3s5dc31412b2',
'name' : 'Feature',
'color': 'md-green-400-bg'
}
];
const sampleMembers = [
{
id : '56027c1930450d8bf7b10758',
name : 'Alice Freeman',
avatar: 'assets/images/avatars/alice.jpg'
},
{
id : '26027s1930450d8bf7b10828',
name : 'Danielle Obrien',
avatar: 'assets/images/avatars/danielle.jpg'
},
{
id : '76027g1930450d8bf7b10958',
name : 'James Lewis',
avatar: 'assets/images/avatars/james.jpg'
},
{
id : '36027j1930450d8bf7b10158',
name : 'Vincent Munoz',
avatar: 'assets/images/avatars/vincent.jpg'
}
];
export class Board
{
name: string;
uri: string;
id: string;
settings: {
color: string,
subscribed: boolean,
cardCoverImages: boolean
};
lists: List[];
cards: Card[];
members: {
id: string,
name: string,
avatar: string
}[];
labels: {
id: string,
name: string,
color: string
}[];
constructor(board)
{
this.name = board.name || 'Untitled Board';
this.uri = board.uri || 'untitled-board';
this.id = board.id || FuseUtils.generateGUID();
this.settings = board.settings || {
color : '',
subscribed : true,
cardCoverImages: true
};
this.lists = [];
this.cards = [];
this.members = board.members || sampleMembers;
this.labels = board.labels || sampleLabels;
}
}

23
src/app/main/content/apps/scrumboard/board/board.component.html
View File

@ -1,13 +1,14 @@
<md-sidenav-container>
<div id="board">
<!-- HEADER -->
<div class="header md-accent-bg p-24" [class]="'md-'+board.settings.color+'-bg'" fxLayout="column">
<div class="header-content" fxLayout="row" fxLayoutAlign="space-between" fxFlex>
<!-- HEADER -->
<div class="header md-accent-bg p-16 p-sm-24" [class]="'md-'+board.settings.color+'-bg'" fxLayout="column">
<div class="header-content" fxLayout="row" fxLayoutAlign="space-between" fxFlex="1 0 auto" fxLayoutWrap>
<!-- BOARD SELECTION BUTTON -->
<div fxLayout="row" fxLayoutAlign="center center">
<div fxLayout="row" fxLayoutAlign="center center" fxFlexOrder="2" fxFlexOrder.gt-xs="1">
<button md-raised-button class="mat-accent header-boards-button"
[class]="'md-'+board.settings.color+'-700-bg'"
routerLink="/apps/scrumboard/boards"
@ -19,7 +20,12 @@
<!-- / BOARD SELECTION BUTTON -->
<!-- BOARD NAME -->
<div class="header-board-name" fxLayout="row" fxLayoutAlign="center center">
<div class="header-board-name mb-8 mb-sm-0"
fxLayout="row" fxLayoutAlign="center center"
fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="center center"
fxFlex="1 0 100%" fxFlex.gt-xs="1 0 auto"
fxFlexOrder="1" fxFlexOrder.gt-xs="2">
<div>
<md-icon *ngIf="board.settings.subscribed" class="board-subscribe s-16">remove_red_eye</md-icon>
<fuse-scrumboard-edit-board-name
fxFlex="1 0 auto"
@ -27,10 +33,11 @@
(onNameChanged)="onBoardNameChanged($event)">
</fuse-scrumboard-edit-board-name>
</div>
</div>
<!-- / BOARD NAME -->
<!-- TOOLBAR -->
<div class="toolbar" fxLayout="row" fxLayoutAlign="space-between center" flex-order="3">
<div class="toolbar" fxLayout="row" fxLayoutAlign="space-between center" fxFlexOrder="3">
<!-- BOARD SETTINGS BUTTON -->
<button md-icon-button (click)="settingsSidenav.toggle()"
@ -46,10 +53,10 @@
</div>
<!-- / HEADER -->
<div fxFlex class="board-content-wrapper p-24">
<div fxFlex class="board-content-wrapper p-16 p-sm-24">
<!-- BOARD -->
<div class="board-content ngx-dnd-container" [class]="board.settings.color+'-100-bg'" fxLayout="row"
<div class="board-content ngx-dnd-container p-16 p-sm-24" [class]="board.settings.color+'-100-bg'" fxLayout="row"
ngxDroppable="list" [model]="board.lists" (out)="onDrop($event)">
<!-- LIST -->

19
src/app/main/content/apps/scrumboard/board/board.component.scss
View File

@ -19,9 +19,7 @@
> .header {
position: relative;
height: 96px;
min-height: 96px;
max-height: 96px;
background-image: none;
z-index: 49;
@ -111,7 +109,6 @@
left: 0;
height: 100%;
background: #E5E7E8;
padding: 24px;
overflow-y: hidden;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
@ -133,19 +130,3 @@
}
}
}
.is-mobile {
#board {
.list-card {
.list-card-sort-handle {
display: block;
}
}
}
}
.list-card-sort-helper {
}

9
src/app/main/content/apps/scrumboard/board/board.component.ts
View File

@ -2,8 +2,8 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ScrumboardService } from '../scrumboard.service';
import { Subscription } from 'rxjs/Subscription';
import { FuseUtils } from '../../../../../core/fuseUtils';
import { Location } from '@angular/common';
import { List } from '../list.model';
@Component({
selector : 'fuse-scrumboard-board',
@ -38,13 +38,8 @@ export class FuseScrumboardBoardComponent implements OnInit, OnDestroy
{
return;
}
const newList = {
id : FuseUtils.generateGUID(),
name : newListName,
idCards: []
};
this.scrumboardService.addList(newList);
this.scrumboardService.addList(new List({name: newListName}));
}
onBoardNameChanged(newName)

14
src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.html
View File

@ -74,7 +74,7 @@
<form class="px-16 py-8" #newChecklistForm="ngForm" (submit)="addChecklist(newChecklistForm)" (click)="$event.stopPropagation()"
fxLayout="column" fxLayoutAlign="start end">
<md-input-container floatPlaceholder="never" (click)="$event.stopPropagation()" fxFlex >
<md-input-container floatPlaceholder="never" (click)="$event.stopPropagation()" fxFlex>
<input #newCheckListTitleField mdInput ngModel #checklistTitle="ngModel" name="checklistTitle" placeholder="Checklist title" required>
</md-input-container>
@ -125,10 +125,11 @@
<div *ngIf="card" md-dialog-content class="p-24 m-0" perfect-scrollbar>
<div fxLayout="row" fxLayoutAlign="space-between center">
<div fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="space-between center"
fxLayout.xs="column" fxLayoutAlign="center center">
<!-- BREADCRUMB -->
<div class="card-breadcrumb" fxLayout="row" fxLayoutAlign="start center">
<div class="card-breadcrumb mb-16 mb-sm-0" fxLayout="row" fxLayoutAlign="start center">
<span>{{board.name}}</span>
<md-icon class="s-20">chevron_right</md-icon>
<span>{{list.name}}</span>
@ -171,7 +172,8 @@
<div class="sections">
<!-- LABELS SECTION -->
<div *ngIf="card.idLabels[0] || card.idMembers[0]" class="section" fxLayout="row">
<div *ngIf="card.idLabels[0] || card.idMembers[0]" class="section"
fxLayout="column" fxLayout.gt-xs="row">
<div *ngIf="card.idLabels[0]" fxFlex class="labels">
<div class="section-header" fxLayout="row" fxLayoutAlign="start center">
@ -224,7 +226,9 @@
<div class="attachment" *ngFor="let item of card.attachments" [ngSwitch]="item.type">
<div *ngSwitchCase="'image'" fxLayout="row">
<div *ngSwitchCase="'image'"
fxLayout.gt-xs="row" fxLayoutAlign.gt-xs="start center"
fxLayout="column" fxLayoutAlign="center start">
<div class="attachment-preview mat-elevation-z2"
[ngStyle]="{'background-image': 'url('+item.src+')'}">

6
src/app/main/content/apps/scrumboard/board/dialogs/card/card.component.scss
View File

@ -59,10 +59,10 @@
.card-name {
width: 100%;
font-size: 24px;
font-size: 22px;
.editable-input {
font-size: 24px;
@include media-breakpoint(xs) {
font-size: 14px;
}
}

4
src/app/main/content/apps/scrumboard/board/dialogs/card/label-selector/label-selector.component.html
View File

@ -12,7 +12,7 @@
<div fxFlex fxLayout="column" perfect-scrollbar>
<div class="label pl-12 mx-8 mb-8" *ngFor="let label of board.labels" fxFlex="1 0 auto" fxLayout="row" fxFlexAlign="space-between center"
<div class="label pl-12 mx-8 mb-8" *ngFor="let label of board.labels" fxFlex="0 0 auto" fxLayout="row" fxFlexAlign="space-between center"
[class]="label.color">
<md-checkbox fxFlex fxLayout="row" fxLayoutAlign="start center" [checked]="card.idLabels.indexOf(label.id) > -1"
@ -41,7 +41,7 @@
<input mdInput placeholder="Name" [(ngModel)]="selectedLabel.name" (change)="onLabelChange()">
</md-input-container>
<fuse-material-color-picker [(selectedClass)]="selectedLabel.color" class="ml-8" (change)="onLabelChange()"></fuse-material-color-picker>
<fuse-material-color-picker [(selectedClass)]="selectedLabel.color" class="ml-8" (change)="$event.preventDefault;onLabelChange()"></fuse-material-color-picker>
</div>
</div>

2
src/app/main/content/apps/scrumboard/board/edit-board-name/edit-board-name.component.html
View File

@ -10,7 +10,7 @@
class="board-name-form" fxFlex="1 0 auto"
*ngIf="formActive" fxFlex="row">
<input formControlName="name" #nameInput fxFlex placeholder="Write a board name">
<input formControlName="name" #nameInput fxFlex="1 0 auto" placeholder="Write a board name">
<button md-icon-button fxFlex="0 1 auto">
<md-icon>check</md-icon>

4
src/app/main/content/apps/scrumboard/board/list/card/card.component.scss
View File

@ -11,10 +11,6 @@
transition: box-shadow 150ms ease;
cursor: pointer;
&.ui-sortable-helper {
box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.list-card-sort-handle {
display: none;
position: absolute;

16
src/app/main/content/apps/scrumboard/board/list/list.component.scss
View File

@ -7,10 +7,6 @@
padding-right: 24px;
height: 100%;
&.ui-sortable-helper .list {
box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}
.list {
max-height: 100%;
background-color: #EEF0F2;
@ -24,6 +20,10 @@
padding: 0 8px 0 16px;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
@include media-breakpoint(xs) {
height: 48px;
min-height: 48px;
}
}
.list-content {
@ -36,14 +36,6 @@
position: relative;
min-height: 32px;
padding: 0 16px;
.card-sortable-placeholder {
background: rgba(0, 0, 0, 0.06);
}
> div {
transition: none !important;
}
}
}

20
src/app/main/content/apps/scrumboard/board/list/list.component.ts
View File

@ -7,6 +7,7 @@ import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
import { MdDialog, MdDialogRef } from '@angular/material';
import { FuseScrumboardCardDialogComponent } from '../dialogs/card/card.component';
import { FuseConfirmDialogComponent } from '../../../../../../core/components/confirm-dialog/confirm-dialog.component';
import { Card } from '../../card.model';
@Component({
selector : 'fuse-scrumboard-board-list',
@ -56,24 +57,7 @@ export class FuseScrumboardBoardListComponent implements OnInit, OnDestroy
return;
}
const newCard = {
id : FuseUtils.generateGUID(),
name : newCardName,
description : '',
idAttachmentCover: '',
idMembers : [],
idLabels : [],
attachments : [],
subscribed : false,
checklists : [],
checkItems : 0,
checkItemsChecked: 0,
comments : [],
activities : [],
due : null
};
this.scrumboardService.addCard(this.list.id, newCard);
this.scrumboardService.addCard(this.list.id, new Card({name: newCardName}));
setTimeout(() => {
this.listScroll.scrollToBottom(0, 400);

37
src/app/main/content/apps/scrumboard/card.model.ts Normal file
View File

@ -0,0 +1,37 @@
import { FuseUtils } from '../../../../core/fuseUtils';
export class Card
{
id: string;
name: string;
description: string;
idAttachmentCover: string;
idMembers: string[];
idLabels: string[];
attachments: any[];
subscribed: boolean;
checklists: any[];
checkItems: number;
checkItemsChecked: number;
comments: any[];
activities: any[];
due: string;
constructor(card)
{
this.id = card.id || FuseUtils.generateGUID();
this.name = card.name || '';
this.description = card.description || '';
this.idAttachmentCover = card.idAttachmentCover || '';
this.idMembers = card.idMembers || [];
this.idLabels = card.idLabels || [];
this.attachments = card.attachments || [];
this.subscribed = card.subscribed || true;
this.checklists = card.checklists || [];
this.checkItems = card.checkItems || 0;
this.checkItemsChecked = card.checkItemsChecked || 0;
this.comments = card.comments || [];
this.activities = card.activities || [];
this.due = card.due || '';
}
}

15
src/app/main/content/apps/scrumboard/list.model.ts Normal file
View File

@ -0,0 +1,15 @@
import { FuseUtils } from '../../../../core/fuseUtils';
export class List
{
id: string;
name: string;
idCards: string[];
constructor(list)
{
this.id = list.id || FuseUtils.generateGUID();
this.name = list.name || '';
this.idCards = [];
}
}

60
src/app/main/content/apps/scrumboard/scrumboard.component.ts
View File

@ -1,8 +1,8 @@
import { Component, OnDestroy, OnInit } from '@angular/core';
import { ScrumboardService } from './scrumboard.service';
import { Subscription } from 'rxjs/Subscription';
import { FuseUtils } from '../../../../core/fuseUtils';
import { Router } from '@angular/router';
import { Board } from './board.model';
@Component({
selector : 'fuse-scrumboard',
@ -34,63 +34,7 @@ export class FuseScrumboardComponent implements OnInit, OnDestroy
newBoard()
{
const newBoard = {
name : 'Untitled Board',
uri : 'untitled-board',
id : FuseUtils.generateGUID(),
settings: {
color : '',
subscribed : true,
cardCoverImages: true
},
lists : [],
cards : [],
members : [
{
id : '56027c1930450d8bf7b10758',
name : 'Alice Freeman',
avatar: 'assets/images/avatars/alice.jpg'
},
{
id : '26027s1930450d8bf7b10828',
name : 'Danielle Obrien',
avatar: 'assets/images/avatars/danielle.jpg'
},
{
id : '76027g1930450d8bf7b10958',
name : 'James Lewis',
avatar: 'assets/images/avatars/james.jpg'
},
{
id : '36027j1930450d8bf7b10158',
name : 'Vincent Munoz',
avatar: 'assets/images/avatars/vincent.jpg'
}
],
labels : [
{
id : '26022e4129ad3a5sc28b36cd',
name : 'High Priority',
color: 'red'
},
{
id : '56027e4119ad3a5dc28b36cd',
name : 'Design',
color: 'orange'
},
{
id : '5640635e19ad3a5dc21416b2',
name : 'App',
color: 'blue'
},
{
id : '6540635g19ad3s5dc31412b2',
name : 'Feature',
color: 'green'
}
]
};
const newBoard = new Board({});
this.scrumboardService.createNewBoard(newBoard).then(() => {
this.router.navigate(['/apps/scrumboard/boards/' + newBoard.id + '/' + newBoard.uri]);
});