fix: disabled state for select inputs

entrecode · May 24, 2019 · ac83326 · ac83326
1 parent 6aa65e4
commit ac83326
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 12 deletions.
diff --git a/packages/data/src/lib/entry-select/entry-select.component.html b/packages/data/src/lib/entry-select/entry-select.component.html
@@ -20,14 +20,14 @@
         (dndCanceled)="cancelDrag(selected,$event)" (dndEnd)="cancelDrag(selected,$event)">
         <span [class.ec-select-selected]="!solo" [class.ec-select-selected_solo]="solo" (click)="!solo&&editItem(selected,$event)">
           {{selected.display()}}
-          <a (click)="removeItem(selected,false,$event)" *ngIf="!config?.disableRemove">&times;</a>
+          <a (click)="removeItem(selected,false,$event)" *ngIf="!config?.disableRemove&&!disabled">&times;</a>
         </span>
       </li>
       <li dndPlaceholderRef>
         <div class="drag-placeholder" style="width: 48px;"></div>
       </li>
       <li *ngIf="!config?.disableSearchbar" class="ec-select__searchbar">
-        <ec-searchbar [focusEvent]="focusEvent" [autofocus]="false" [property]="lightModel?.titleField" [placeholder]="placeholder||defaultPlaceholder()"
+        <ec-searchbar [disabled]="disabled" [focusEvent]="focusEvent" [autofocus]="false" [property]="lightModel?.titleField" [placeholder]="placeholder||defaultPlaceholder()"
         (keypressed)="handleKey($event,dropdownList)" (focus)="focus($event)" (pasted)="pasteValue($event)" (queryChanged)="filterDropdownList(dropdownList,$event)"></ec-searchbar>
       </li>
     </ul>
@@ -52,7 +52,7 @@
     <a (click)="entryPop.create()" class="btn btn_clear" *ngIf="!config?.disableCreatePop&&hasMethod('post')&&(!solo||selection?.isEmpty())">
       <ec-icon name="add"></ec-icon>
     </a>
-    <a (click)="entryListPop.show($event)" class="btn btn_clear" *ngIf="!config?.disableListPop&&hasMethod('get')">
+    <a (click)="entryListPop.show($event)" class="btn btn_clear" *ngIf="!config?.disableListPop&&hasMethod('get')&&!disabled">
       <ec-icon name="find"></ec-icon>
     </a>
   </nav>

diff --git a/packages/data/src/lib/entry-select/entry-select.component.ts b/packages/data/src/lib/entry-select/entry-select.component.ts
@@ -117,6 +117,12 @@ export class EntrySelectComponent extends SelectComponent<EntryResource> impleme
   }
 
   togglePop(e?, noFocus = false) {
+    if (this.disabled) {
+      if (!this.selection.isEmpty()) {
+        this.editItem(this.selection.display[0], e);
+      }
+      return;
+    }
     this.ready.then(() => {
       if (this.dropdown) {
         this.dropdown.show(e);

diff --git a/packages/data/src/lib/resource-select/resource-select.component.html b/packages/data/src/lib/resource-select/resource-select.component.html
@@ -11,11 +11,11 @@
         <span [class.ec-select-selected]="!solo" [class.ec-select-selected_solo]="solo"
           (click)="clickItem(selected, $event)">
           {{selected.display()}}
-          <a (click)="removeItem(selected,$event);" *ngIf="!config.disableRemove">&times;</a>
+          <a (click)="removeItem(selected,$event);" *ngIf="!config?.disableRemove&&!disabled">&times;</a>
         </span>
       </li>
       <li *ngIf="!config?.disableSearchbar" class="ec-select__searchbar">
-        <ec-searchbar [focusEvent]="focusEvent" [autofocus]="false" [property]="config?.label||dropdownConfig?.label"
+        <ec-searchbar [disabled]="disabled" [focusEvent]="focusEvent" [autofocus]="false" [property]="config?.label||dropdownConfig?.label"
           [placeholder]="placeholder||defaultPlaceholder()" (pasted)="pasteValue($event)"
           (keypressed)="handleKey($event,dropdownList)" (focus)="focus($event)"
           (queryChanged)="filterDropdownList(dropdownList,$event)"></ec-searchbar>
@@ -40,7 +40,7 @@
     <a (click)="resourcePop.create()" class="btn btn_clear" *ngIf="!config?.disableCreatePop&&hasMethod('post')">
       <ec-icon name="add"></ec-icon>
     </a>
-    <a (click)="resourceListPop.show($event)" class="btn btn_clear" *ngIf="!config?.disableListPop&&hasMethod('get')">
+    <a (click)="resourceListPop.show($event)" class="btn btn_clear" *ngIf="!config?.disableListPop&&hasMethod('get')&&!disabled">
       <ec-icon name="find"></ec-icon>
     </a>
   </nav>

diff --git a/packages/data/src/lib/resource-select/resource-select.component.ts b/packages/data/src/lib/resource-select/resource-select.component.ts
@@ -96,6 +96,12 @@ export class ResourceSelectComponent extends SelectComponent<Resource> implement
   }
 
   togglePop(e?, noFocus = false) {
+    if (this.disabled) {
+      if (!this.selection.isEmpty()) {
+        this.editItem(this.selection.display[0], e);
+      }
+      return;
+    }
     if (this.dropdown && this.config && !this.config.disableSearchbar) {
       this.dropdown.show(e);
     } else if (this.resourceListPop && this.config && !this.config.disableListPop) {
@@ -177,12 +183,14 @@ export class ResourceSelectComponent extends SelectComponent<Resource> implement
       this.useConfig(this.config);
       return;
     }
-    this.config = <CrudConfig<Resource>>(
-      Object.assign(this.resourceConfig.get(this.relation) /* , { size: 5 } */, this.crudConfig, {
+    this.config = <CrudConfig<Resource>>Object.assign(
+      this.resourceConfig.get(this.relation) /* , { size: 5 } */,
+      this.crudConfig,
+      {
         solo: this.solo,
         selectMode: false,
         disableSelectSwitch: true,
-      } as CrudConfig<Resource>)
+      } as CrudConfig<Resource>,
     );
     this.useConfig(this.config);
   }

diff --git a/packages/ui/src/lib/list/searchbar/searchbar.component.html b/packages/ui/src/lib/list/searchbar/searchbar.component.html
@@ -1,5 +1,5 @@
 <div class="ec-searchbar">
     <input novalidate #inputField [ecFocus]="focusEvent" type="text" [placeholder]="placeholder || defaultPlaceholder"
         class="input" (ngModelChange)="queryValue.next($event)" (paste)="paste.next($event)" [(ngModel)]="query"
-        (keydown)="handleKey($event)" (blur)="blur.emit($event)" (focus)="focus.emit($event)">
+        (keydown)="handleKey($event)" (blur)="blur.emit($event)" (focus)="focus.emit($event)" [disabled]="disabled">
 </div>
diff --git a/packages/ui/src/lib/list/searchbar/searchbar.component.ts b/packages/ui/src/lib/list/searchbar/searchbar.component.ts
@@ -25,6 +25,8 @@ import { ListComponent } from '../list.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SearchbarComponent implements AfterViewInit, Focus, OnInit, OnChanges {
+  /** If true, the input wont be editable */
+  @Input() disabled: boolean;
   /** Searchbar placeholder */
   @Input() placeholder: string;
   /** Default placeholder when no placeholder is given */

diff --git a/packages/ui/src/lib/select/select.component.html b/packages/ui/src/lib/select/select.component.html
@@ -12,14 +12,14 @@
             (dndEnd)="cancelDrag(selected,$event,item)" #item>
             <span [class.ec-select-selected]="!solo" [class.ec-select-selected_solo]="solo" (click)="clickItem(selected,$event)">
                 {{selected.display()}}
-                <a (click)="removeItem(selected,$event)">&times;</a>
+                <a (click)="removeItem(selected,$event)" *ngIf="!config?.disableRemove&&!disabled">&times;</a>
             </span>
         </li>
         <li dndPlaceholderRef>
             <div class="drag-placeholder" style="width: 48px;"></div>
         </li>
         <li *ngIf="!config?.disableSearchbar" class="ec-select__searchbar">
-            <ec-searchbar [autofocus]="false" [property]="config?.label" [placeholder]="placeholder" (focus)="focus($event)"
+            <ec-searchbar [autofocus]="false" [property]="config?.label" [placeholder]="placeholder" (focus)="focus($event)" [disabled]="disabled"
                 (keypressed)="handleKey($event,dropdownList)" (queryChanged)="filterDropdownList(dropdownList,$event)"></ec-searchbar>
         </li>
     </ul>

diff --git a/packages/ui/src/lib/select/select.component.ts b/packages/ui/src/lib/select/select.component.ts
@@ -46,6 +46,8 @@ export class SelectComponent<T> implements ControlValueAccessor, OnInit, OnChang
   dragged: Item<T>;
   /** Configuration Object for List */
   @Input() config: ListConfig<T>;
+  /** If true, the input will be disabled */
+  @Input() disabled: ListConfig<T>;
   /** The visible items */
   @Input() value: Array<T> | T;
   /** The used selection */
@@ -360,4 +362,8 @@ export class SelectComponent<T> implements ControlValueAccessor, OnInit, OnChang
       listComponent.focusFirst();
     });
   }
+
+  setDisabledState(isDisabled) {
+    this.disabled = isDisabled;
+  }
 }