WIP - Board administration

src/app/settings/board-settings/board-settings.component.html

@@ -90,10 +90,41 @@
             </tbody>
         </table>
 
-        <button>
+        <button *ngIf="activeUser.security_level === 1"
-            <i class="icon icon-plus"></i>
+            (click)="showModal('Add')">
-            Add Board
+            <i class="icon icon-plus"></i> Add Board
         </button>
     </div>
 </section>
 
+<tb-modal modal-title="{{ modalProps.title }} Board"
+    modal-id="{{ MODAL_ID }}" wide="true">
+    <label>
+        Board Name
+        <input type="text" name="board-name" placeholder="Board Name"
+            [(ngModel)]="modalProps.boardName">
+    </label>
+    <div class="half-modal">
+        <label>Columns</label>
+        <p>TODO: Display existing columns</p>
+        <div class="quick-add">
+            <input type="text" name="new-column"
+                placeholder="Column Name" [(ngModel)]="modalProps.newColumnName">
+            <button class="flat" (click)="addColumn()">
+                <i class="icon icon-plus"></i>
+            </button>
+        </div>
+    </div>
+    <div class="half-modal">
+        <label>Categories</label>
+        <p>TODO: List existing categories</p>
+        <div class="quick-add">
+            <input type="text" name="new-category" placeholder="Category Name"
+                [(ngModel)]="modalProps.newCategoryName">
+            <button class="flat" (click)="addCategory()">
+                <i class="icon icon-plus"></i>
+            </button>
+        </div>
+    </div>
+</tb-modal>
+

src/app/settings/board-settings/board-settings.component.ts

@@ -2,10 +2,12 @@ import { Component } from '@angular/core';
 
 import {
     ApiResponse,
+    User,
     Modal,
     Notification,
     ModalService,
-    NotificationsService
+    NotificationsService,
+    AuthService
 } from '../../shared/index';
 
 @Component({
@@ -14,5 +16,31 @@ import {
     directives: [ Modal ]
 })
 export class BoardSettings {
+    private activeUser: User;
+    private loading = true;
+    private modalProps;
+
+    private MODAL_ID: string;
+
+    constructor(private auth: AuthService, private modal: ModalService) {
+        this.MODAL_ID = 'board-addedit-form';
+        this.modalProps = {
+            boardName: ''
+        };
+
+        auth.userChanged
+            .subscribe(activeUser => {
+                this.activeUser = activeUser;
+            });
+    }
+
+    private showModal(title: string): void {
+        let isAdd = (title === 'Add');
+        this.modalProps = {
+            title: title
+        };
+
+        this.modal.open(this.MODAL_ID);
+    }
 }
 

src/app/settings/user-admin/user-admin.component.ts

@@ -38,9 +38,9 @@ class ModalProperties {
 export class UserAdmin {
     private activeUser: User;
     private users: Array<UserDisplay>;
-    private loading: boolean = true;
     private modalProps: ModalProperties;
     private userToRemove: UserDisplay;
+    private loading = true;
 
     private MODAL_ID: string;
     private MODAL_CONFIRM_ID: string;

src/app/shared/modal/modal.component.html

@@ -1,7 +1,7 @@
 <div *ngIf="isOpen">
     <div class="modal-overlay" (click)="close(true)"></div>
 
-    <div class="modal">
+    <div class="modal" [ngClass]="{ wide: wide }">
         <div class="title" *ngIf="modalTitle">
             <h2>
                 {{ modalTitle }}

src/app/shared/modal/modal.component.ts

@@ -15,6 +15,7 @@ export class Modal implements OnInit {
     @Input('modal-id') modalId = '';
     @Input('modal-title') modalTitle = '';
     @Input() blocking = false;
+    @Input() wide = false;
     isOpen = false;
 
     constructor(private modalService: ModalService) {

src/scss/_board.scss

@@ -90,24 +90,6 @@
         }
     }
 
-    .quick-add {
-        padding: 7px;
-
-        input {
-            width: calc(100% - 42px);
-        }
-
-        button {
-            background-color: $white;
-            border-color: $color-border;
-            color: $color-text;
-            height: 36px;
-            margin-left: 2px;
-            padding: 9px;
-            vertical-align: bottom;
-        }
-    }
-
     .tasks {
         padding: 7px;
         padding-bottom: 0;

src/scss/_core.scss

@@ -55,6 +55,16 @@ table {
     margin-bottom: 1em;
 }
 
+// Override scss-base flat styles
+[type="reset"].flat,
+[type="button"].flat,
+[type="submit"].flat,
+button.flat,
+.btn.flat {
+    background-color: $white;
+    color: $color-primary;
+}
+
 button {
     transition: background .3s;
 }
@@ -131,3 +141,17 @@ button {
     padding: 3px 5px 1px;
 }
 
+.quick-add {
+    padding: 7px;
+
+    input {
+        width: calc(100% - 42px);
+    }
+
+    button {
+        height: 36px;
+        margin-left: 2px;
+        padding: 9px;
+    }
+}
+

src/scss/_modal.scss

@@ -14,6 +14,7 @@
     background-color: $white;
     left: calc(50% - 200px);
     max-height: calc(100% - 10em);
+    max-width: 100%;
     min-height: 10em;
     overflow-y: auto;
     position: fixed;
@@ -21,6 +22,11 @@
     width: 400px;
     z-index: 1100;
 
+    &.wide {
+        left: calc(50% - 300px);
+        width: 600px;
+    }
+
     .title {
         background-color: $color-heading-bg;
 

src/scss/_nav-top.scss

@@ -23,11 +23,6 @@
     .buttons {
         float: right;
         margin-top: -2.2em;
-
-        .flat {
-            background-color: lighten($color-background, 10%);
-            color: $color-primary;
-        }
     }
 }
 

src/scss/_settings.scss

@@ -18,6 +18,16 @@
         @include span-columns(9 of 18);
     }
 
+    .half-modal {
+        float: left;
+        margin-right: 1%;
+        width: 49%;
+
+        &:last-of-type {
+            margin: 0;
+        }
+    }
+
     .no-bottom-margin {
         margin-bottom: 0;
     }