Merge branch 'update-ui' into 'develop'

UI: fix auto refresh; support "max" option and more

See merge request openxpki-ee/openxpki!634

core/htdocs_source/Dockerfile

@@ -7,7 +7,4 @@ COPY package.json /source/package.json
 COPY package-lock.json /source/package-lock.json
 RUN npm install
 
-# now copy the rest
-COPY . /source
-
 CMD npm run build

core/htdocs_source/Makefile

@@ -1,9 +1,15 @@
 IMAGE=oxiuibuild
 -include Makefile.local
 
-.DEFAULT_GOAL := compile
+.DEFAULT_GOAL := cache
 
-# Docker image is build using the internal Docker cache, the last image
+# main target: compile Ember code using (cached) Docker image
+cache: build compile
+
+# compile Ember code using Docker image (force re-installation of node_modules)
+nocache: build-nocache compile
+
+# Docker image is built using the internal Docker cache, the last image
 # layer holding the copy of the source code is invalidated on code changes
 build:
 	docker build -t $(IMAGE) .
@@ -12,9 +18,8 @@ build:
 build-nocache:
 	docker build --no-cache -t $(IMAGE) .
 
-# main target, compile the ember code using the docker image
-compile: build
-	docker run -v $(abspath ../server/htdocs):/source/dist -ti $(IMAGE)
+compile:
+	docker run -v $(abspath ./):/source:ro -v $(abspath ../server/htdocs):/source/dist -ti $(IMAGE)
 
 # remove the build container
 prune:

core/htdocs_source/app/pods/components/oxifield-bool/template.hbs

@@ -4,6 +4,7 @@
             type="checkbox"
             checked={{@content.value}}
             {{on "input" this.onInput}}
+            {{did-insert @onInsert}}
         />
         {{@content.label}}
     </label>

core/htdocs_source/app/pods/components/oxifield-cert-identifier/template.hbs

@@ -11,6 +11,7 @@
         {{on "input" this.onInput}}
         {{on "focus" this.onFocus}}
         {{on "blur" this.onBlur}}
+        {{did-insert @onInsert}}
     />
     <ul class="dropdown-menu" role="menu">
         {{#each this.searchResults as |result|}}

core/htdocs_source/app/pods/components/oxifield-datetime/template.hbs

@@ -1,4 +1,4 @@
-<div class="row">
+<div class="row" {{did-insert @onInsert}}>
     <div class="col-md-8">
         <BsDatetimepicker
             @date={{this.value}}

core/htdocs_source/app/pods/components/oxifield-main/component.js

@@ -55,12 +55,23 @@ export default class OxifieldMainComponent extends Component {
     }
 
     @action
-    onKeypress(event) {
+    onKeydown(event) {
         // ENTER --> submit form
         if (event.keyCode === 13 && this.field.type !== "textarea") {
             event.stopPropagation();
             event.preventDefault();
             this.args.submit();
         }
+        // TAB --> clonable fields: add another clone
+        if (event.keyCode === 9 && this.field.clonable && this.field.value !== null && this.field.value !== "") {
+            event.stopPropagation();
+            event.preventDefault();
+            this.args.addClone(this.args.field);
+        }
+    }
+
+    @action
+    onInsert(element) {
+        if (this.field.focusClone) element.focus();
     }
 }

core/htdocs_source/app/pods/components/oxifield-main/template.hbs

@@ -11,12 +11,12 @@
         </div>
     {{/if}}
 
-    <div class="{{this.sFieldSize}}" {{on "keypress" this.onKeypress}}>
+    <div class="{{this.sFieldSize}}" {{on "keydown" this.onKeydown}}>
         {{#if @field.tooltip}}
             <BsTooltip @title="{{@field.tooltip}}"/>
         {{/if}}
 
-        {{component this.type content=this.field onChange=this.onChange onError=this.onError}}
+        {{component this.type content=this.field onChange=this.onChange onError=this.onError onInsert=this.onInsert}}
 
         {{#if @field.error}}
             <span class="help-block">{{@field.error}}</span>
@@ -25,15 +25,16 @@
 
     {{#if @field.clonable}}
         <div class="col-md-1 clonable-btn-group">
-
             {{#if @field.canDelete}}
-            <BsButton @type="danger" @onClick={{this.delClone}}>
-                <span class="glyphicon glyphicon-minus"></span>
-            </BsButton>
+                <BsButton @type="danger" @onClick={{this.delClone}}>
+                    <span class="glyphicon glyphicon-minus"></span>
+                </BsButton>
+            {{/if}}
+            {{#if @field.canAdd}}
+                <BsButton @type="primary" @onClick={{this.addClone}}>
+                    <span class="glyphicon glyphicon-plus"></span>
+                </BsButton>
             {{/if}}
-            <BsButton @type="primary" @onClick={{this.addClone}}>
-                <span class="glyphicon glyphicon-plus"></span>
-            </BsButton>
         </div>
     {{/if}}
 </div>

core/htdocs_source/app/pods/components/oxifield-password/template.hbs

@@ -4,4 +4,5 @@
     value={{@content.value}}
     placeholder={{@content.placeholder}}
     {{on "input" this.onInput}}
+    {{did-insert @onInsert}}
 />

core/htdocs_source/app/pods/components/oxifield-passwordverify/template.hbs

@@ -3,11 +3,13 @@
     <input type="text" class="form-control in-form-group"
         value={{this.password}}
         readonly="readonly"
+        {{did-insert @onInsert}}
     />
 {{else}}
     <input type="password" class="form-control in-form-group"
         value={{this.password}}
         {{on "input" this.passwordChange}}
+        {{did-insert @onInsert}}
     />
 {{/if}}
     <input type={{if this.isFixed "text" "password"}} class="form-control in-form-group"

core/htdocs_source/app/pods/components/oxifield-select/component.js

@@ -78,8 +78,9 @@ export default class OxifieldSelectComponent extends Component {
     }
 
     @action
-    focusCustomInput(element) {
+    onInsert(element) {
         element.focus();
+        this.args.onInsert(element);
     }
 
     @action

core/htdocs_source/app/pods/components/oxifield-select/template.hbs

@@ -12,7 +12,12 @@
                 {{did-insert this.focusCustomInput}}
             />
         {{else}}
-            <OxiSelect @list={{this.options}} @selected={{this.sanitizedValue}} @onChange={{this.optionSelected}} />
+            <OxiSelect
+                @list={{this.options}}
+                @selected={{this.sanitizedValue}}
+                @onChange={{this.optionSelected}}
+                {{did-insert @onInsert}}
+            />
         {{/if}}
         <span class="input-group-btn">
             <BsButton @type="default" @active={{this.customMode}} @onClick={{this.toggleCustomMode}}>

core/htdocs_source/app/pods/components/oxifield-static/template.hbs

@@ -1,4 +1,4 @@
-<div class="oxi-no-input">
+<div class="oxi-no-input" {{did-insert @onInsert}}>
     {{#if @content.verbose}}
         {{{@content.verbose}}}
     {{else}}

core/htdocs_source/app/pods/components/oxifield-text/template.hbs

@@ -4,4 +4,5 @@
     value={{@content.value}}
     placeholder={{@content.placeholder}}
     {{on "input" this.onInput}}
+    {{did-insert @onInsert}}
 />

core/htdocs_source/app/pods/components/oxifield-textarea/template.hbs

@@ -5,4 +5,5 @@
     value={{@content.value}}
     placeholder={{@content.placeholder}}
     {{on "input" this.onInput}}
+    {{did-insert @onInsert}}
 />

core/htdocs_source/app/pods/components/oxifield-uploadarea/template.hbs

@@ -10,6 +10,7 @@
             {{on "input" this.setTextInput}}
             {{on "drop" this.fileDropped}}
             {{on "dragover" this.showCopyEffect}}
+            {{did-insert @onInsert}}
         />
     </div>
 </div>

core/htdocs_source/app/pods/components/oxisection-form/component.js

@@ -17,7 +17,10 @@ class Field {
     @tracked error;
     // clonable fields:
     @tracked clonable;
+    @tracked max;
     @tracked canDelete;
+    @tracked canAdd;
+    @tracked focusClone = false; // initially focus clone (after adding)
     // dynamic input fields:
     @tracked keys;
     // oxifield-datetime:
@@ -68,7 +71,7 @@ export default class OxisectionFormComponent extends Component {
             for (const attr of Object.keys(fieldHash)) {
                 if (! Field.prototype.hasOwnProperty(attr)) {
                     /* eslint-disable-next-line no-console */
-                    console.error(`oxisection-form: unknown field property "${attr}" (field "${fieldHash.name}"). If it's a new property, please add it to the 'Field' class defined in oxisection-form.js.`);
+                    console.error(`oxisection-form: unknown field property "${attr}" (field "${fieldHash.name}"). If it's a new property, please add it to the 'Field' class defined in oxisection-form/component.js.`);
                 }
                 else {
                     field[attr] = fieldHash[attr];
@@ -124,7 +127,10 @@ export default class OxisectionFormComponent extends Component {
     _updateCloneFields() {
         for (const name of this.clonableRefNames) {
             let clones = this.fields.filter(f => f._refName === name);
-            for (const clone of clones) { clone.canDelete = true; }
+            for (const clone of clones) {
+                clone.canDelete = true;
+                clone.canAdd = clones.length < clones[0].max;
+            }
             if (clones.length === 1) {
                 clones[0].canDelete = false;
             }
@@ -153,10 +159,12 @@ export default class OxisectionFormComponent extends Component {
 
     @action
     addClone(field) {
+        if (field.canAdd === false) return;
         let fields = this.fields;
         let index = fields.indexOf(field);
         let fieldCopy = field.clone();
         fieldCopy.value = "";
+        fieldCopy.focusClone = true;
         fields.insertAt(index + 1, fieldCopy);
         this._updateCloneFields();
     }
@@ -282,13 +290,13 @@ export default class OxisectionFormComponent extends Component {
         }
         if (isError) { return }
 
-        let data = {
+        let request = {
             action: this.args.def.action,
             ...this._fields2request(),
         };
 
         this.loading = true;
-        return getOwner(this).lookup("route:openxpki").sendAjax(data)
+        return getOwner(this).lookup("route:openxpki").sendAjax(request)
         .then((res) => {
             this.loading = false;
             if (res.status != null) {

core/htdocs_source/app/pods/components/oxisection-grid/component.js

@@ -260,14 +260,14 @@ export default class OxisectionGridComponent extends Component {
             if (index === -1) {
                 throw new Error(`There is no column matching "${button.select}"`);
             }
-            let data = {
+            let request = {
                 action: button.action
             };
-            data[button.selection] = this.sortedData.filterBy("checked").getEach("originalData").getEach("" + index);
+            request[button.selection] = this.sortedData.filterBy("checked").getEach("originalData").getEach("" + index);
             set(button, "loading", true);
 
             getOwner(this).lookup("route:openxpki")
-            .sendAjax(data)
+            .sendAjax(request)
             .then(() => set(button, "loading", false));
         }
         else {

core/htdocs_source/app/pods/openxpki/route.js

@@ -104,17 +104,17 @@ export default class OpenXpkiRoute extends Route {
         }, cfg.timeout);
     }
 
-    sendAjax(data) {
+    sendAjax(request) {
         this.content.isLoading = true;
-        debug("openxpki/route - sendAjax: page = " + data.page);
+        debug("openxpki/route - sendAjax: page = " + request.page);
         // assemble request parameters
         let req = {
             data: {
-                ...data,
+                ...request,
                 "_": new Date().getTime(),
             },
             dataType: "json",
-            type: data.action ? "POST" : "GET",
+            type: request.action ? "POST" : "GET",
             url: this.backendUrl,
         };
         if (req.type === "POST") {
@@ -153,7 +153,7 @@ export default class OpenXpkiRoute extends Route {
                     if (doc.refresh) {
                         debug("openxpki/route - sendAjax response: \"refresh\" " + doc.refresh.href + ", " + doc.refresh.timeout);
                         this.content.refresh = later(this, function() {
-                            this.sendAjax({ data: { page: doc.refresh.href } });
+                            this.sendAjax({ page: doc.refresh.href });
                         }, doc.refresh.timeout);
                     }
                     if (doc.goto) {