Add single select feld && switch on click

app/assets/stylesheets/content/work_packages/inplace_editing/_edit_fields.sass

@@ -82,6 +82,9 @@
     .wp-table--cell-span
       vertical-align: middle
 
+  &.inplace-edit .custom-option
+    display: inline
+
 // Editable fields cursor
 .-editable .wp-table--cell-span,
 .wp-table--cell-span.-editable
@@ -101,6 +104,7 @@
 
   .inplace-edit--read-value--value-span
     width: 100%
+    white-space: nowrap
     .error.macro-unavailable
       display: inline-block
 

frontend/app/components/wp-display/field-types/wp-display-string-objects-field.directive.html

@@ -1,7 +1,8 @@
 <div ng-repeat="value in vm.field.value" title="{{ value }}" class="custom-option">
-  {{ value }}
+  <span ng-if="$first && vm.field.value.length > 1"> {{ value }} and {{ vm.field.value.length - 1}} others </span>
+  <span ng-if="$first && vm.field.value.length == 1"> {{ value }} </span>
 </div>
 
 <div title="no value" ng-if="vm.field.value.length == 0" class="custom-option -empty">
   -
-</divn>
+</div>

frontend/app/components/wp-edit/field-types/wp-edit-multi-select-field.directive.html

@@ -1,5 +1,31 @@
-<div class="textarea-wrapper">
+<div ng-class="vm.field.isMultiselect ? 'textarea-wrapper' : 'inline-label'">
+
   <select
+    ng-if="!vm.field.isMultiselect"
+    ng-model="vm.workPackage[vm.fieldName]"
+    class="focus-input wp-inline-edit--field inplace-edit--textarea -animated form--select"
+    wp-edit-field-requirements="vm.field.schema"
+    ng-options="value as (value.name || value.value) for value in vm.field.options track by value.href"
+    ng-required="vm.field.required"
+    ng-focus="vm.handleUserFocus()"
+    ng-disabled="vm.workPackage.inFlight"
+    focus="vm.shouldFocus()"
+    focus-priority="vm.shouldFocus()"
+    ng-attr-id="{{vm.htmlId}}"
+    ng-change="vm.handleUserSubmit()"
+  >
+    <option
+      value=""
+      ng-bind="vm.field.text.requiredPlaceholder"
+      ng-if="vm.field.currentValueInvalid || vm.field.options.length == 0"
+      ng-selected="vm.field.currentValueInvalid || vm.field.options.length == 0"
+      disabled
+    >
+    </option>
+  </select>
+
+  <select
+    ng-if="vm.field.isMultiselect"
     ng-model="vm.workPackage[vm.fieldName]"
     class="focus-input wp-inline-edit--field inplace-edit--textarea -animated form--select"
     wp-edit-field-requirements="vm.field.schema"
@@ -23,7 +49,20 @@
     </option>
   </select>
 
+  <a href class="form-label no-decoration-on-hover -transparent" ng-click="vm.field.toggleMultiselect()">
+    <icon-wrapper icon-name="minus2"
+                  ng-if="vm.field.isMultiselect"
+                  css-class="icon4">
+    </icon-wrapper>
+
+    <icon-wrapper icon-name="add"
+                  ng-if="!vm.field.isMultiselect"
+                  css-class="icon4">
+    </icon-wrapper>
+  </a>
+
   <wp-edit-field-controls ng-show="!vm.inEditMode"
+                          ng-if="vm.field.isMultiselect"
                           field-controller="vm"
                           on-save="vm.handleUserSubmit()"
                           on-cancel="vm.handleUserCancel()"

frontend/app/components/wp-edit/field-types/wp-edit-multi-select-field.module.ts

@@ -34,6 +34,7 @@ export class MultiSelectEditField extends EditField {
   public options:any[];
   public template:string = '/components/wp-edit/field-types/wp-edit-multi-select-field.directive.html';
   public text:{requiredPlaceholder:string, placeholder:string, save:string, cancel:string};
+  public isMultiselect: boolean;
 
   // Dependencies
   protected I18n:op.I18n = <op.I18n> MultiSelectEditField.$injector.get('I18n');
@@ -43,6 +44,8 @@ export class MultiSelectEditField extends EditField {
   constructor(workPackage:WorkPackageResourceInterface, fieldName:string, schema:op.FieldSchema) {
     super(workPackage, fieldName, schema);
 
+    this.isMultiselect = false;
+
     const I18n:any = this.$injector.get('I18n');
     this.text = {
       requiredPlaceholder: I18n.t('js.placeholders.selection'),
@@ -67,6 +70,12 @@ export class MultiSelectEditField extends EditField {
     }
   }
 
+  public toggleMultiselect() {
+    console.log(this.isMultiselect);
+    this.isMultiselect = !this.isMultiselect;
+    console.log(this.isMultiselect);
+  };
+
   private setValues(availableValues:any[], sortValuesByName:boolean = false) {
     if (sortValuesByName) {
       availableValues.sort(function(a:any, b:any) {