feat(query): create new work item dialog (#2791)

* fix(query): create new work item dialog * fix(query-quick-add): change url for create and open * fix(workitemCreate): add close button to workitem create Dialog * chore(tslint): resolve linter error and remove dead code * fix(workitem-effect): Generate Success notification only for query Tab * chore(query): remove extra line and spaces * fix(query): temporarilt disable tests * fix(work-item.effect): change Add and open url for backlog tab * fix(query): fix indentation in query html * fix(quickAdd): show the description of workitem type in dropdown * fix(quickAdd): close popover on outside click * fix(detailpage): preserve route when navigating to detail page * fix(quickAdd): dont dispatch AddSuccess action on workitem creation * fix(quickAdd): reset workitem popup after a workitem is created * fix(query): add infinite scroll module removed during merge * fix(query): permission on query quick add
fabric8-ui · Oct 23, 2018 · 2c33363 · 2c33363
1 parent 6582474
commit 2c33363
Show file tree

Hide file tree

Showing 9 changed files with 252 additions and 21 deletions.
diff --git a/src/app/components_ngrx/planner-query/planner-query.component.html b/src/app/components_ngrx/planner-query/planner-query.component.html
@@ -26,6 +26,35 @@ <h4>Please wait, we are loading your data.</h4>
 			[(ngModel)]="searchQuery"
 				placeholder="Enter your Query...">
 		<span class="f8-query__input-hint">Press Enter to Search....</span>
+		<div
+			*ngIf="!(addDisabled | async)"
+			class="dropdown-kebab-pf dropdown f8-query__create-workitem"
+			[autoClose]="false"
+			(clickOut)="closeCreateWorkItemDialog($event)"
+			[isOpen]="isCreateWorkitemDropdownOpen"
+			(isOpenChange)="createWorkItemDialogChange($event)"
+			dropdown>
+			<button
+				type="button"
+				class="btn btn-primary dropdown-toggle"
+				dropdownToggle>
+					Create WorkItem
+			</button>
+			<div
+				*dropdownMenu
+				 class="dropdown-menu-right dropdown-menu f8-query__create-workitem-menu">
+					<aside>
+							<i class="fa fa-close btn btn-link f8-query__create-workitem-close"
+								(click)="closeCreateWorkItemDialog($event)"></i>
+					</aside>
+					<alm-work-item-quick-add *ngIf="quickAddWorkItemTypes | async as quickAddWorkItemTypes"
+						[wilistview]="'wi-query-view'"
+						[workItemTypes]="quickAddWorkItemTypes"
+						[selectedType]="quickAddWorkItemTypes[0]"
+						[selectedIteration]="selectedIterationSource | async">
+					</alm-work-item-quick-add>
+			</div>
+		</div>
 		<div>
 			<ng-container *ngFor="let breadcrumb of breadcrumbs; let i=index;">
 			>&nbsp;

diff --git a/src/app/components_ngrx/planner-query/planner-query.component.less b/src/app/components_ngrx/planner-query/planner-query.component.less
@@ -24,6 +24,27 @@
     right: 30px;
     top: 25px;
   }
+
+  &__create-workitem {
+    position: absolute;
+    top: 60px;
+    right: 15px;
+
+    &-menu {
+      min-width: 400px;
+      min-height: 150px;
+      right: 0 !important;
+    }
+
+    &-close {
+      float: right;
+      margin-right: 0 !important;
+    }
+  }
+}
+
+.f8-planner__container-class {
+  width: 300px;
 }
 
 .breadcrumbs:hover {

diff --git a/src/app/components_ngrx/planner-query/planner-query.component.ts b/src/app/components_ngrx/planner-query/planner-query.component.ts
@@ -4,18 +4,20 @@ import {
   OnDestroy, OnInit, Renderer2,
   ViewChild, ViewEncapsulation
 } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, NavigationStart, Router } from '@angular/router';
 import { Store } from '@ngrx/store';
 import { sortBy } from 'lodash';
 import { cloneDeep, isEqual } from 'lodash';
 import { EmptyStateConfig } from 'patternfly-ng';
 import { combineLatest, Observable } from 'rxjs';
 import { filter, startWith, switchMap, tap } from 'rxjs/operators';
+import { PermissionQuery } from '../../models/permission.model';
 import { SpaceQuery } from '../../models/space';
 import { WorkItemQuery, WorkItemUI } from '../../models/work-item';
-import { WorkItemTypeQuery } from '../../models/work-item-type';
+import { WorkItemTypeQuery, WorkItemTypeUI } from '../../models/work-item-type';
 import { CookieService } from '../../services/cookie.service';
 import { FilterService } from '../../services/filter.service';
+import { UrlService } from '../../services/url.service';
 import { AppState } from '../../states/app.state';
 import { datatableColumn } from '../planner-list/datatable-config';
 import * as WorkItemActions from  './../../actions/work-item.actions';
@@ -58,6 +60,7 @@ export class PlannerQueryComponent implements OnInit, OnDestroy, AfterViewChecke
       }),
       startWith([])
     );
+  public quickAddWorkItemTypes: Observable<WorkItemTypeUI[]> = this.workItemTypeQuery.getWorkItemTypes();
   public currentQuery: string;
   public breadcrumbs: any[] = [];
   public disableInput: boolean;
@@ -67,10 +70,13 @@ export class PlannerQueryComponent implements OnInit, OnDestroy, AfterViewChecke
   public columns: any[] = [];
   public selectedRows: any = [];
   public searchQuery: string = '';
+  public isCreateWorkitemDropdownOpen: boolean;
   public _lastCheckedScrollHeight: any;
   public _scrollTrigger: number;
   public headerHeight: number = 30;
   public targetHeight: number;
+  public addDisabled: Observable<boolean> =
+    this.permissionQuery.isAllowedToAdd();
 
   private eventListeners: any[] = [];
   private hdrHeight: number = 0;
@@ -91,7 +97,9 @@ export class PlannerQueryComponent implements OnInit, OnDestroy, AfterViewChecke
     private filterService: FilterService,
     private renderer: Renderer2,
     private workItemTypeQuery: WorkItemTypeQuery,
-    private el: ElementRef
+    private urlService: UrlService,
+    private el: ElementRef,
+    private permissionQuery: PermissionQuery
   ) {}
 
   ngOnInit() {
@@ -100,6 +108,23 @@ export class PlannerQueryComponent implements OnInit, OnDestroy, AfterViewChecke
       title: 'No Work Items Available'
     } as EmptyStateConfig;
     this.store.dispatch(new WorkItemActions.ResetWorkItems());
+    this.eventListeners.push(
+      this.router.events
+      .pipe(filter(event => event instanceof NavigationStart))
+      .subscribe(
+      (event: any) => {
+        if (event.url.indexOf('/plan/detail/') > -1) {
+          // It's going to the detail page
+          let url = location.pathname;
+          let query = location.href.split('?');
+          if (query.length == 2) {
+            url = url + '?' + query[1];
+          }
+          this.urlService.recordLastListOrBoard(url);
+        }
+      }
+      )
+    );
   }
 
   ngOnDestroy() {
@@ -194,6 +219,16 @@ export class PlannerQueryComponent implements OnInit, OnDestroy, AfterViewChecke
     });
   }
 
+  closeCreateWorkItemDialog(event: MouseEvent) {
+    if (this.isCreateWorkitemDropdownOpen) {
+      this.isCreateWorkitemDropdownOpen = false;
+    }
+  }
+
+  createWorkItemDialogChange(value: boolean) {
+    this.isCreateWorkitemDropdownOpen = value;
+  }
+
   breadcrumbsText(index, query) {
     const parentNumber = this.filterService.isOnlyChildQuery(query.q);
     if (parentNumber !== null) {

diff --git a/src/app/components_ngrx/planner-query/planner-query.module.ts b/src/app/components_ngrx/planner-query/planner-query.module.ts
@@ -1,9 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { TooltipConfig, TooltipModule } from 'ngx-bootstrap';
-import { FeatureFlagResolver, FeatureTogglesService } from 'ngx-feature-flag';
-import { InfiniteScrollModule } from 'ngx-widgets';
+import {
+  BsDropdownConfig,
+  BsDropdownModule,
+  TooltipConfig,
+  TooltipModule
+} from 'ngx-bootstrap';
 import { EmptyStateModule } from 'patternfly-ng/empty-state';
 import { NgxDatatableModule } from 'rh-ngx-datatable';
 import { SpaceQuery } from '../../models/space';
@@ -18,14 +21,20 @@ import { PlannerQueryRoutingModule } from './planner-query-routing.module';
 import { PlannerQueryComponent } from './planner-query.component';
 
 // import { FeatureFlagResolver, FeatureTogglesService } from 'ngx-feature-flag';
+import { InfiniteScrollModule } from 'ngx-widgets';
 import { ErrorHandler } from '../../effects/work-item-utils';
 import { WorkItemTypeQuery } from '../../models/work-item-type';
+import { UrlService } from '../../services/url.service';
 import { NgLetModule } from '../../shared/ng-let';
 import { togglesApiUrlProvider } from '../../shared/toggles-api.provider';
+import { ClickOutModule } from '../../widgets/clickout/clickout.module';
+import { WorkItemQuickAddModule } from '../work-item-quick-add/work-item-quick-add.module';
 
 @NgModule({
   imports: [
+    BsDropdownModule,
     CommonModule,
+    ClickOutModule,
     FormsModule,
     FilterColumnModule,
     EmptyStateModule,
@@ -35,12 +44,14 @@ import { togglesApiUrlProvider } from '../../shared/toggles-api.provider';
     TooltipModule,
     WorkItemCellModule,
     WorkItemPreviewPanelModule,
+    WorkItemQuickAddModule,
     InfiniteScrollModule,
     NgLetModule
   ],
   declarations: [PlannerQueryComponent],
   exports: [PlannerQueryComponent],
   providers: [
+    BsDropdownConfig,
     SpaceQuery,
     CookieService,
     WorkItemQuery,
@@ -49,8 +60,9 @@ import { togglesApiUrlProvider } from '../../shared/toggles-api.provider';
     // FeatureFlagResolver,
     // FeatureTogglesService,
     togglesApiUrlProvider,
+    UrlService,
     WorkItemTypeQuery,
     ErrorHandler
   ]
 })
-export class PlannerQueryModule { }
+export class PlannerQueryModule {}
diff --git a/src/app/components_ngrx/work-item-quick-add/work-item-quick-add.component.html b/src/app/components_ngrx/work-item-quick-add/work-item-quick-add.component.html
@@ -73,6 +73,64 @@
 </div>
 <!-- Table Inline Quick Add Ends -->
 
+<!--Quick Add for Query Tab-->
+
+<div class="f8-quickadd-query__wrapper" *ngIf="wilistview === 'wi-query-view'">
+  <input
+    type="text"
+    placeholder=" Type your title...."
+    #quickAddTitle
+    [formControl]="workItemTitle"
+    [disabled]="blockAdd"
+    [(ngModel)]="workItem.attributes['system.title']"
+    (keyup.enter)="save($event)"
+    (keyup)="checkTitle()"  required/>
+  <div class="dropdown f8-quickadd-query__dropdown" dropdown>
+    <div class="infoArea dropdown">
+      <button class="btn btn-default dropdown-toggle padding-h-10"
+        type="button"
+        dropdownToggle>
+        <i class="fa dib"
+          [ngClass]="selectedType ?
+          selectedType.icon :
+          '' ">
+        </i>
+        <span class="padding-h-5">
+          {{ selectedType ? selectedType.name : '' }}
+        </span>
+        <span class="fa fa-angle-down"></span>
+      </button>
+    </div>
+    <ul class="dropdown-menu"
+      role="menu"
+      *dropdownMenu>
+      <li *ngFor="let type of workItemTypes"
+          role="menuitem"
+          (click)="selectType($event, type)">
+        <div class="dropdown-item planner-dropdown-item pointer">
+          <i class="fa"
+            [ngClass]="type.icon"></i>
+            <span class="padding-h-3">{{ type.name }}</span>
+            <span class="item-desc margin-left-10">{{ type.description }}</span>
+        </div>
+      </li>
+    </ul>
+  </div>
+  <button class="btn btn-primary f8-quickadd-query__create margin-right-5"
+    id="quickadd-save"
+    [disabled]="blockAdd"
+    [ngClass]="{'': validTitle,'disabled':!validTitle}"
+    (click)="save($event)">
+    Create
+  </button>
+  <button class="btn btn-primary f8-quickadd-query__create-open"
+    [disabled]="blockAdd"
+    [ngClass]="{'': validTitle,'disabled':!validTitle}"
+    (click)="save($event, true)">
+    Create and Open
+  </button>
+</div>
+
 <!-- Quick ADD Template for Board View -->
 <!-- <div class="f8-quickadd-card card-pf f8-quickadd-container"
   *ngIf="wilistview === 'wi-card-view'" >

diff --git a/src/app/components_ngrx/work-item-quick-add/work-item-quick-add.component.less b/src/app/components_ngrx/work-item-quick-add/work-item-quick-add.component.less
@@ -142,3 +142,50 @@
     }
   }
 }
+
+.f8-quickadd-query {
+  &__wrapper {
+    margin-right: 30px;
+    margin-left: 30px;
+    margin-top: 20px;
+    margin-bottom: 20px;
+
+    input {
+      min-width: 360px;
+    }
+  }
+
+  &__dropdown {
+    margin-top: 15px;
+  }
+
+  &__create {
+    position: absolute;
+    top: 110px;
+    right: 160px;
+  }
+
+  &__create-open {
+    position: absolute;
+    top: 110px;
+    right: 30px;
+  }
+}
+
+.item-desc {
+  display: block;
+  font-size: 12px;
+  font-style: italic;
+  line-height: 17px;
+  color: @color-pf-black-500;
+}
+
+.planner-dropdown-item {
+  padding: 1px 10px;
+  &:hover {
+    background-color: @color-pf-blue-50;
+    border-color: @color-pf-blue-100;
+  }
+}
+
+
diff --git a/src/app/components_ngrx/work-item-quick-add/work-item-quick-add.component.ts b/src/app/components_ngrx/work-item-quick-add/work-item-quick-add.component.ts
@@ -24,6 +24,7 @@ import { PermissionQuery } from './../../models/permission.model';
 import { WorkItemQuery } from './../../models/work-item';
 
 // ngrx stuff
+import { FormControl } from '@angular/forms';
 import { select, Store } from '@ngrx/store';
 import { Observable } from 'rxjs';
 import * as WorkItemActions from './../../actions/work-item.actions';
@@ -55,6 +56,7 @@ export class WorkItemQuickAddComponent implements OnInit, OnDestroy, AfterViewIn
   linkObject: object;
   addDisabled: Observable<boolean> =
     this.permissionQuery.isAllowedToAdd();
+  workItemTitle = new FormControl('');
 
   // Board view specific
   initialDescHeight: number = 0;
@@ -197,6 +199,10 @@ export class WorkItemQuickAddComponent implements OnInit, OnDestroy, AfterViewIn
         parentId: this.parentWorkItemId,
         openDetailPage: openStatus
       }));
+      if (this.wilistview === 'wi-query-view') {
+        this.workItemTitle.setValue('');
+        this.resetQuickAdd();
+      }
     } else {
       this.blockAdd = false;
       this.error = 'Title can not be empty.';

diff --git a/src/app/components_ngrx/work-item-quick-add/work-item-quick-add.module.ts b/src/app/components_ngrx/work-item-quick-add/work-item-quick-add.module.ts
@@ -1,16 +1,24 @@
-import { CommonModule }       from '@angular/common';
-import { NgModule }           from '@angular/core';
-import { FormsModule }        from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 import { BsDropdownConfig, BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { PermissionQuery } from '../../models/permission.model';
+import { CommonSelectorModule } from '../common-selector/common-selector.module';
 import { InfotipModule } from '../infotip/infotip.module';
 import { WorkItemQuickAddComponent } from './work-item-quick-add.component';
 
 @NgModule({
-  imports:      [ BsDropdownModule.forRoot(), CommonModule, FormsModule, InfotipModule ],
-  declarations: [ WorkItemQuickAddComponent ],
-  exports:      [ WorkItemQuickAddComponent ],
-  providers:    [ BsDropdownConfig, PermissionQuery ]
+  imports: [
+    BsDropdownModule.forRoot(),
+    CommonModule,
+    CommonSelectorModule,
+    FormsModule,
+    InfotipModule,
+    ReactiveFormsModule
+  ],
+  declarations: [WorkItemQuickAddComponent],
+  exports: [WorkItemQuickAddComponent],
+  providers: [BsDropdownConfig, PermissionQuery]
 })
-export class WorkItemQuickAddModule { }
+export class WorkItemQuickAddModule {}