add menu service to disable submenu items, fix login error, fix routi…

…ngs, add edit account in tracking, loading spinner in records change
kleder · Jan 17, 2018 · 0dffca8 · 0dffca8
1 parent 90022a9
commit 0dffca8
Show file tree

Hide file tree

Showing 18 changed files with 342 additions and 80 deletions.
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -38,6 +38,7 @@ import { ChangeAccountTokenComponent } from './components/change-account-token/c
 import { ToasterService } from './services/toaster.service';
 import { ToolbarComponent } from './components/toolbar/toolbar.component';
 import { SwitchAccountComponent } from './components/switch-account/switch-account.component'
+import { MenuService } from './services/menu.service';
 
 @NgModule({
   declarations: [
@@ -78,7 +79,8 @@ import { SwitchAccountComponent } from './components/switch-account/switch-accou
     TimerService,
     DatabaseService,
     HttpService,
-    ToasterService
+    ToasterService,
+    MenuService
   ],
   bootstrap: [AppComponent]
 })

diff --git a/src/app/components/add-account/add-account.component.html b/src/app/components/add-account/add-account.component.html
@@ -4,17 +4,14 @@
     </div>
     <form class="add-account_content">
         <div class="add-account__form">
-            <input [(ngModel)]="name" name="name" placeholder="Custom name for an account" onfocus="this.placeholder=''" onblur="this.placeholder='Custom name for the account'" type="text">
+            <input id="add-account__name" [(ngModel)]="name" name="name" placeholder="Custom name for an account" onfocus="this.placeholder=''" onblur="this.placeholder='Custom name for the account'" type="text" required>
             <input id="add-account__url" [(ngModel)]="youTrackUrl" name="youTrackUrl" placeholder="YouTrack home URL" onfocus="this.placeholder=''" onblur="this.placeholder='YouTrack home URL'" type="text" required>
             <input id="add-account__token" [(ngModel)]="token" name="token" placeholder="Token" onfocus="this.placeholder=''" onblur="this.placeholder='Token'" type="text" required>
             <div class="add-account__buttons">
-                <button class="btn btn--grey" type="submit" routerLink="/switch-account">CANCEL</button>
+                <button class="btn btn--grey" type="submit" routerLink="/accounts">CANCEL</button>
                 <button class="btn btn--red"(click)="login()" type="submit">ADD ACCOUNT</button>
             </div>
         </div>
         <div class="add-account__hint">How to obtain a new permament token? <a (click)="openInBrowser()">Click here</a></div>
     </form>
-    <div class="loader">
-        <ngx-loading [show]="loader" [config]="{ backdropBorderRadius: '14px' }"></ngx-loading>
-    </div>
 </div>
diff --git a/src/app/components/add-account/add-account.component.scss b/src/app/components/add-account/add-account.component.scss
@@ -45,7 +45,7 @@
       text-align: left;
       box-sizing: border-box;
       cursor: text;
-      &.add-account__url, &.add-account__token {
+      &.add-account__name, &.add-account__url, &.add-account__token {
         &--error {
           border-color: $input-error;
         }

diff --git a/src/app/components/add-account/add-account.component.ts b/src/app/components/add-account/add-account.component.ts
@@ -55,22 +55,43 @@ export class AddAccountComponent implements OnInit {
     rAccount.token = this.token;
     rAccount.url = this.youTrackUrl;
     console.log('rAccount',rAccount)
+
     this.apiService.getCurrentUser(rAccount).then(
       (data) => {
         console.log("data", data)
         console.log('rAccount',rAccount)
-        this.account.add(rAccount.name, rAccount.url, rAccount.token);
-        this.loader = false;
-        this.goToBoard()
+        if (rAccount.name.length < 3) {
+          this.clearErrorUrlOrToken()
+          this.errorName()
+          this.loader = false;
+        } else {
+          this.account.add(rAccount.name, rAccount.url, rAccount.token);
+          this.loader = false;
+          this.goToBoard()
+        }
       }, (error) => {
-        this.errorHtml()
+        this.errorUrlOrToken()
         this.toasterService.showToaster("Error eccoured! Incorrect URL or token", 'error')        
         this.loader = false;
         }
     )   
+
+  }
+
+  public errorName() {
+    let url = document.getElementById('add-account__name')
+    url.className += " add-account__name--error"
+    this.toasterService.showToaster("Error eccoured! The name must be longer than 3 characters.", 'error')   
   }
 
-  public errorHtml() {
+  public clearErrorUrlOrToken() {
+    let url = document.getElementById('add-account__url')
+    let token = document.getElementById('add-account__token')
+    url.className = ""
+    token.className = ""
+  }
+
+  public errorUrlOrToken() {
     let url = document.getElementById('add-account__url')
     let token = document.getElementById('add-account__token')
     url.className += " add-account__url--error"
@@ -82,6 +103,7 @@ export class AddAccountComponent implements OnInit {
   }
 
   goToBoard() {
+
     this.router.navigate(['/boards'], { queryParams: {justLoggedIn: true, name: this.name} });
   }
 

diff --git a/src/app/components/boards-choice/boards-choice.component.html b/src/app/components/boards-choice/boards-choice.component.html
@@ -16,7 +16,4 @@
       <button type="submit" (click)="getAllAgiles()">REFRESH</button>        
       </div>
   </ng-template>
-  <div class="loader">
-    <ngx-loading [show]="httpService.loader" [config]="{ backdropBorderRadius: '14px' }"></ngx-loading>
-  </div>
 </div>
diff --git a/src/app/components/boards-choice/boards-choice.component.ts b/src/app/components/boards-choice/boards-choice.component.ts
@@ -7,6 +7,7 @@ import { HttpService } from '../../services/http.service'
 import { RemoteAccount } from 'app/models/RemoteAccount';
 import { ToasterService } from '../../services/toaster.service'
 import { DatabaseService } from '../../services/database.service'
+import { MenuService } from '../../services/menu.service'
 
 @Component({
   selector: 'app-boards-choice',
@@ -27,7 +28,8 @@ export class BoardsChoiceComponent implements OnInit {
     public httpService: HttpService,
     public activatedRoute: ActivatedRoute,
     public toasterService: ToasterService,
-    public databaseService: DatabaseService
+    public databaseService: DatabaseService,
+    public menuService: MenuService    
   ) { 
   }
 
@@ -71,6 +73,7 @@ export class BoardsChoiceComponent implements OnInit {
   }
 
   public goToWorkspace() {
+    this.menuService.enabledWorkspace(true)
     this.router.navigateByUrl('/tracking');
   }
 

diff --git a/src/app/components/edit-account/edit-account.component.html b/src/app/components/edit-account/edit-account.component.html
@@ -1,16 +1,16 @@
 <div class="container">  
   <div class="edit-account__header">
-    <div class="edit-account__title">Edit {{ editingAccount.name || 'unnamed account' }}</div>
+    <div class="edit-account__title" *ngIf="editingAccount?.name.length > 0">Edit {{ editingAccount.name || 'unnamed account' }}</div>
   </div>
   <div class="edit-account__content">
-      <div class="edit-account__form">
+      <div class="edit-account__form" *ngIf="editingAccount?.name.length > 0">
         <div class="edit-account__title">EDIT ACCOUNT</div>          
         <label>Account name</label>
         <input [(ngModel)]="editingAccount.name" name="name" type="text">
         <label>Youtrack URL</label>
         <input [(ngModel)]="editingAccount.url" name="url" type="text">
         <div class="edit-account__buttons">
-            <button class="btn btn--transparent" type="submit" routerLink="/switch-account">CANCEL</button>
+            <button class="btn btn--transparent" type="submit" (click)="backToWorkspace()">CANCEL</button>
             <button class="btn btn--grey" type="submit" (click)="editNameOrUrl(editingAccount)">SAVE CHANGES</button>
         </div>
       </div> 
@@ -27,7 +27,7 @@
           <span class="trec-icon-settings" (click)="editBoard(agile)"></span>
         </div>
         <div class="edit-account__buttons">
-          <button class="btn btn--transparent" type="submit" routerLink="/switch-account">CANCEL</button>
+          <button class="btn btn--transparent" type="submit" routerLink="../tracking">CANCEL</button>
           <button class="btn btn--red" type=”submit” (click)="updateAgilesVisibility()">SAVE CHANGES</button>
         </div>
         </div>

diff --git a/src/app/components/edit-account/edit-account.component.ts b/src/app/components/edit-account/edit-account.component.ts
@@ -29,19 +29,19 @@ export class EditAccountComponent implements OnInit {
   ) { }
 
   ngOnInit() {
-    this.activatedRoute
-    .queryParams
-    .subscribe(params => {
-      this.editingAccount = {
-        id: parseInt(params['accountId']),
-        name: params['accountName'],
-        url: params['accountUrl'],
-      }
-      console.log("this.editingAccount", this.editingAccount)
-    });
+    this.getCurrentAccount()
     this.getAllAgiles()
   }
 
+  async getCurrentAccount() {
+    this.editingAccount = await this.account.Current()
+    console.log("this.editingAccount", this.editingAccount)
+  }
+
+  public backToWorkspace() {
+    this.router.navigate(['tracking'])
+  }
+
   public getAllAgiles() {
     this.api.getAllAgiles().then(
       data => {
@@ -75,7 +75,7 @@ export class EditAccountComponent implements OnInit {
 
   public removeAccount(id) {
     this.databaseService.deleteAccount(id).then(data => {
-      this.router.navigate(['menu'])      
+      this.router.navigate(['/accounts']) 
       this.toasterService.showToaster('Account removed!', "success")
     }, err => {
       this.toasterService.showToaster('An error occured!', "error")            

diff --git a/src/app/components/switch-account/switch-account.component.html b/src/app/components/switch-account/switch-account.component.html
@@ -13,7 +13,7 @@
         <ng-template #noAccounts>
             <div class="accounts__no-account">No accounts added</div>
         </ng-template>
-        <button class="btn btn--red" type="submit" (click)="goToAddAccount()">ADD ACCOUNT</button>    
-        <button class="btn btn--transparent" type="submit" (click)="goBack()">CANCEL</button>
+        <button class="btn btn--red" type="submit" (click)="goToAddAccount(false)">ADD ACCOUNT</button>    
+        <button *ngIf="isCurrentAccountExists" class="btn btn--transparent" type="submit" (click)="goBack()">CANCEL</button>
     </div> 
   </div>
diff --git a/src/app/components/switch-account/switch-account.component.ts b/src/app/components/switch-account/switch-account.component.ts
@@ -4,6 +4,7 @@ import { DataService } from '../../services/data.service'
 import { DatabaseService } from '../../services/database.service'
 import { HttpService } from '../../services/http.service'
 import { AccountService } from '../../services/account.service'
+import { MenuService } from '../../services/menu.service'
 
 @Component({
   selector: 'app-switch-account',
@@ -12,30 +13,35 @@ import { AccountService } from '../../services/account.service'
 })
 export class SwitchAccountComponent implements OnInit {
   public accounts: any  
+  public isCurrentAccountExists: boolean
   constructor(
     public databaseService: DatabaseService,
     public router: Router,
     private activatedRoute: ActivatedRoute,
     private dataService: DataService,
     private accountService: AccountService,
-    private http: HttpService
+    private http: HttpService,
+    private menuService: MenuService
   ) { }
 
   ngOnInit() {
-    this.getAccounts()
+    this.getAccounts().then(() => {
+      console.log("his.isCurrentAccountExists)", this.isCurrentAccountExists)
+      if (!this.isCurrentAccountExists) {
+        this.menuService.enabledWorkspace(false)
+      }
+    })
   }
 
   public async getAccounts(): Promise<any> {
     this.accounts = await this.databaseService.getAccounts();
     console.log("this.accounts", this.accounts)
     if (this.accounts.length == 0) {
-      this.dataService.routeBeforeMenu = ''
+      this.goToAddAccount(true)
     }
-  }
-
-  public editAccount(account) {
-    console.log("account in editAccount", account)
-    this.router.navigate(['edit-account'], { queryParams: {accountId: account.id, accountName: account.name, accountUrl: account.url} });
+    this.accounts.forEach(account => {
+      account.current? this.isCurrentAccountExists = true : ''
+    })    
   }
 
   public setAsCurrent(clickedAccount) {
@@ -46,13 +52,14 @@ export class SwitchAccountComponent implements OnInit {
         account['current'] = true
       }
     })
+    this.menuService.enabledWorkspace(false)
     this.databaseService.destroyCurrentAccount()
     this.databaseService.setCurrentAccount(clickedAccount.id)
     this.goBack()
   }
 
-  goToAddAccount() {
-    this.router.navigate(['add-account'], { queryParams: {firstAccount: false} })    
+  goToAddAccount(arg) {
+    this.router.navigate(['add-account'], { queryParams: {firstAccount: arg} })    
   }
 
   goBack() {

diff --git a/src/app/components/tracking/activity/activity.component.html b/src/app/components/tracking/activity/activity.component.html
@@ -1,26 +1,44 @@
-<div class="record-list" *ngIf="todaySummaryItems?.length !=0; else empty">
-  <div class="record-list__item" *ngFor="let record of todaySummaryItems">
-    <div class="record-list__header">
-      <span class="record-list__summary">{{ record.summary }}</span> 
-      <span class="record-list__todays-time">{{ record.todaysTime | secondsToTime}}</span>
+<div class="container" *ngIf="!loader else loaderContainer">
+  <div class="record-list" *ngIf="todaySummaryItems?.length !=0 else empty">
+    <div class="record-list__item" *ngFor="let record of todaySummaryItems">
+      <div class="record-list__header">
+        <span class="record-list__summary">{{ record.summary }}</span> 
+        <span class="record-list__todays-time">{{ record.todaysTime | secondsToTime}}</span>
+      </div>
+      <div class="record-list__content">
+        <span class="record-list__agile">{{ record.agile }}</span>
+        <button class="record-list__record" [ngClass]="record.id == timerService.currentIssue?.issueId ? 'recording' : ''" (click)="getIssueAndStart(record.id)">
+          <span *ngIf="record.id == timerService.currentIssue?.issueId; else timerOff"><span class="trec-icon-stop"></span>STOP</span>
+          <ng-template #timerOff><span class="trec-icon-record"></span>REC</ng-template>
+        </button>    
+      </div>            
     </div>
-    <div class="record-list__content">
-      <span class="record-list__agile">{{ record.agile }}</span>
-      <button class="record-list__record" [ngClass]="record.id == timerService.currentIssue?.issueId ? 'recording' : ''" (click)="getIssueAndStart(record.id)">
-        <span *ngIf="record.id == timerService.currentIssue?.issueId; else timerOff"><span class="trec-icon-stop"></span>STOP</span>
-        <ng-template #timerOff><span class="trec-icon-record"></span>REC</ng-template>
-      </button>    
-    </div>            
   </div>
+  <ng-template #empty>
+    <div class="record-list--empty" *ngIf="todaySummaryItems?.length == 0">
+      <img src="../../../../assets/dino-foot.png" alt="foot">
+      <div class="record-list__title">You haven't made any time entry yet</div>
+      <div class="record-list__text">Go back to the Boards tab, select the task and hit record.</div>
+      <button (click)="goToBoards()">Boards</button>
+    </div>
+  </ng-template>
 </div>
-<ng-template #empty>
-  <div class="record-list--empty" *ngIf="todaySummaryItems?.length == 0">
-    <img src="../../../../assets/dino-foot.png" alt="foot">
-    <div class="record-list__title">You haven't made any time entry yet</div>
-    <div class="record-list__text">Go back to the Boards tab, select the task and hit record.</div>
-    <button (click)="goToBoards()">Boards</button>
+<ng-template #loaderContainer>
+  <div class="loading-container">
+    <div class="spinner">
+      <div class="lds-css ng-scope">
+        <div class="lds-spinner" style="height:100%"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
+        </div>
+      </div>
+    </div>
+    <div class="loading-container__name"></div>
+    <div class="loading-container__item">
+      <div class="loading-container__title"></div>
+      <div class="loading-container__content"></div>
+    </div>
+    <div class="loading-container__item">
+      <div class="loading-container__title"></div>
+      <div class="loading-container__content"></div>
+    </div>
   </div>
-</ng-template>
-<div class="loader">
-  <ngx-loading [show]="databaseService.loader" [config]="{ backdropBorderRadius: '14px' }"></ngx-loading>
-</div>
+</ng-template>