Feature/Add Form support for containsMany field using MultiLine

demos/multiline.php

@@ -12,19 +12,19 @@ public function init()
         parent::init();
 
         $this->addField('item', ['required' => true, 'default' => 'item']);
-        $this->addField('qty', ['type' => 'number', 'caption' => 'Qty / Box', 'required' => true, 'ui' => ['multiline' => ['width' => 2]]]);
-        $this->addField('box', ['type' => 'number', 'caption' => '# of Boxes', 'required' => true, 'ui' => ['multiline' => ['width' => 2]]]);
+        $this->addField('qty', ['type' => 'integer', 'caption' => 'Qty / Box', 'required' => true, 'ui' => ['multiline' => ['width' => 2]]]);
+        $this->addField('box', ['type' => 'integer', 'caption' => '# of Boxes', 'required' => true, 'ui' => ['multiline' => ['width' => 2]]]);
         $this->addExpression('total', ['expr' => function ($row) {
             return $row['qty'] * $row['box'];
-        }, 'type' => 'number']);
+        }, 'type' => 'integer']);
     }
 }
 
 $app->add(['Header', 'MultiLine form field', 'icon' => 'database', 'subHeader' => 'Collect/Edit multiple rows of table record.']);
 
 $data = [];
 
-$inventory = new InventoryItem(new \atk4\data\Persistence_Array($data));
+$inventory = new InventoryItem(new \atk4\data\Persistence\Array_($data));
 
 // Populate some data.
 $total = 0;

js/Release.md

@@ -1,5 +1,11 @@
 ## Release note
 
+### version 1.8.0 (2019-07-23)
+
+- Multiline Vue component now support containsMany / containsOne.
+- Multiline Vue component now support limiting number of row data.
+- Multiline Vue component now support Dropdown as a field type.
+
 ### version 1.7.0
 
 - New atkConfirm plugin. Will display a user confirmaton dialog using fomantic ui modal.

js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "atkjs-ui",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "Agile Toolkit Javascript library.",
   "main": "lib/atkjs-ui.js",
   "scripts": {

js/src/components/multiline.component.js

@@ -1,18 +1,25 @@
 import multilineBody from './multiline/multiline-body.component';
 import multilineHeader from './multiline/multiline-header.component';
 
+/**
+ * MultiLine component.
+ *
+ * 2019-07-23 - add support for containsMany.
+ *  - updateLinesField method now return one level data row, {id:4, field1: 'value1'}
+ *  - getInitData method now handle one level data row.
+ */
 export default {
   name: 'atk-multiline',
   template: `<div >
                 <sui-table v-bind="tableProp">
-                  <atk-multiline-header :fields="fieldData" :state="getMainToggleState" :errors="errors"></atk-multiline-header>
+                  <atk-multiline-header :fields="fieldData" :state="getMainToggleState" :errors="errors" :caption="caption"></atk-multiline-header>
                   <atk-multiline-body :fieldDefs="fieldData" :rowData="rowData" :rowIdField="idField" :deletables="getDeletables" :errors="errors"></atk-multiline-body>
                   <sui-table-footer>
                     <sui-table-row>
                         <sui-table-header-cell/>
                         <sui-table-header-cell :colspan="getSpan" textAlign="right">
                         <div is="sui-button-group">
-                         <sui-button size="small" @click.stop.prevent="onAdd" icon="plus" ref="addBtn"></sui-button>
+                         <sui-button size="small" @click.stop.prevent="onAdd" icon="plus" ref="addBtn" :disabled="isLimitReach"></sui-button>
                          <sui-button size="small" @click.stop.prevent="onDelete" icon="trash" :disabled="isDeleteDisable"></sui-button>                        
                          </div>
                         </sui-table-header-cell>
@@ -33,6 +40,7 @@ export default {
       deletables: [],
       hasChangeCb: this.data.hasChangeCb,
       errors: {},
+      caption: this.data.caption ? this.data.caption : null,
       tableProp: Object.assign({}, this.tableDefault, this.data.options),
       tableDefault : {
         basic: false,
@@ -43,7 +51,7 @@ export default {
         stackable: false,
         inverted: false,
         color: null,
-        columns: null
+        columns: null,
       }
     }
   },
@@ -215,27 +223,48 @@ export default {
      */
     updateLinesField: function() {
       const field = document.getElementsByName(this.linesField)[0];
-      field.value = JSON.stringify(this.rowData);
+
+      let data = this.rowData.map(item => {
+        let newItem = {};
+        for (let i=0; i<item.length; i++) {
+          const key = Object.keys(item[i])[0];
+          newItem[key] = Object.values(item[i])[0];
+        }
+        return {...newItem}
+      });
+
+      field.value = JSON.stringify(data);
     },
     /**
      * Get initial rowData value.
+     * We need to compare fields return by model vs what values give us because it could differ.
+     * For example if a field was add or remove from model after a value was saved. Specially for
+     * array type field like containsMany / containsOne.
+     * In other word, rowData must match fields definition.
      *
      * @returns {Array}
      */
     getInitData: function() {
       let rows = [], value = '';
+      // Get field name.
+      const fields = this.data.fields.map(item => item.field);
+
       // check if input containing data is set and initialized.
       let field = document.getElementsByName(this.linesField)[0];
       if (field) {
         //Map value to our rowData.
-        rows = JSON.parse(field.value).map(fields => {
-          let data = Object.keys(fields).map(field => {
-            return {[field]:fields[field]};
+        let values = JSON.parse(field.value);
+        values = Array.isArray(values) ? values : [];
+
+        values.forEach(value => {
+          const data = fields.map(field => {
+            return {[field]: value[field] ? value[field] : null}
           });
-          data.push({__atkml:this.getUUID()});
-          return data;
+          data.push({__atkml: this.getUUID()});
+          rows.push(data);
         });
       }
+
       return rows;
     },
     /**
@@ -286,12 +315,10 @@ export default {
     postData: async function(row) {
       let data = {};
       const context = this.$refs['addBtn'].$el;
-      //console.log(context);
       let fields = this.fieldData.map( field => field.field);
       fields.forEach( field => {
         data[field] = row.filter(item => field in item)[0][field];
       });
-      //console.log(data);
       data.__atkml_action = 'update-row';
       try {
         let response = await atk.apiService.suiFetch(this.data.url, {data: data, method: 'post', stateContext:context});
@@ -344,6 +371,18 @@ export default {
      */
     isDeleteDisable() {
       return !this.deletables.length > 0;
+    },
+    /**
+     * Check if record limit is reach.
+     * return false if not.
+     *
+     * @returns {boolean}
+     */
+    isLimitReach() {
+      if (this.data.rowLimit === 0) {
+        return false;
+      }
+      return this.data.rowLimit < this.rowData.length + 1;
     }
   }
 }

js/src/components/multiline/multiline-cell.component.js

@@ -1,23 +1,28 @@
+import multilineReadOnly from './multiline-readonly.component';
 
 export default {
   name: 'atk-multiline-cell',
   template: ` 
     <component :is="fieldType"
         :type="inputType"
-        :fluid="true" 
+        :fluid="true"  
         class="fluid" 
         @blur="onBlur"
         @input="onInput"
         v-model="inputValue"
+        :readOnlyValue="fieldValue"
         :name="fieldName"
-        ref="cell"><slot></slot></component>
+        ref="cell"
+        v-bind="fieldProps"></component>
   `,
-  props: ['cellData', 'fieldType', 'fieldValue'],
+  components: {
+    'atk-multiline-readonly': multilineReadOnly,
+  },
+  props: ['cellData', 'fieldType', 'fieldValue', 'options', 'fieldProps'],
   data() {
     return {
       field: this.cellData.field,
       type: this.cellData.type,
-      //this field name will not get serialized and sent on form submit.
       fieldName: '-'+this.cellData.field,
       inputValue: this.fieldValue,
       dirtyValue: this.fieldValue,

js/src/components/multiline/multiline-header.component.js

@@ -7,6 +7,9 @@ export default {
         <sui-table-cell :style="{background:'none'}"></sui-table-cell>
         <sui-table-cell :style="{background:'none'}" state="error" v-for="(column, idx) in columns" :key="idx" v-if="column.isVisible" :textAlign="getTextAlign(column)"><sui-icon name="attention" v-if="getErrorMsg(column)"></sui-icon>{{getErrorMsg(column)}}</sui-table-cell>
       </sui-table-row>
+       <sui-table-row v-if="hasCaption()">
+        <sui-table-headerCell :colspan="getVisibleColumns()">{{caption}}</sui-table-headerCell>
+       </sui-table-row>
         <sui-table-row :verticalAlign="'top'">
         <sui-table-header-cell width="one" textAlign="center"><input type="checkbox" @input="onToggleDeleteAll" :checked.prop="isChecked" :indeterminate.prop="isIndeterminate" ref="check"></input></sui-table-header-cell>
         <sui-table-header-cell v-for="(column, idx) in columns" :key="idx" v-if="column.isVisible" :textAlign="getTextAlign(column)">
@@ -16,7 +19,7 @@ export default {
       </sui-table-row>
     </sui-table-header>
   `,
-  props: ['fields', 'state', 'errors'],
+  props: ['fields', 'state', 'errors', 'caption'],
   data() {
     return {columns: this.fields, isDeleteAll: false}
   },
@@ -26,7 +29,7 @@ export default {
         this.$root.$emit('toggle-delete-all', this.$refs['check'].checked);
       });
     },
-    getTextAlign(column) {
+    getTextAlign: function(column) {
       let align = 'left';
       if (!column.isEditable) {
         switch(column.type) {
@@ -40,9 +43,19 @@ export default {
 
       return align;
     },
-    hasError() {
+    getVisibleColumns: function() {
+      let count = 1; // add deletable column;
+      this.columns.forEach(field => {
+        count = field.isVisible ? count + 1 : count;
+      });
+      return count;
+    },
+    hasError: function() {
       return Object.keys(this.errors).length > 0;
     },
+    hasCaption: function() {
+      return this.caption;
+    },
     getErrorMsg: function(column) {
       if (this.hasError()) {
         let rows = Object.keys(this.errors);

js/src/components/multiline/multiline-readonly.component.js

@@ -0,0 +1,9 @@
+/**
+ * Simply display a readonly value.
+ */
+
+export default {
+  template: `<div>{{readOnlyValue}}</div>`,
+  name: 'atk-multiline-readonly',
+  props: ['readOnlyValue']
+}

js/src/components/multiline/multiline-row.component.js

@@ -1,4 +1,4 @@
-import multilineCell from './multiline-cell.component'
+import multilineCell from './multiline-cell.component';
 
 /**
  * A row component.
@@ -14,13 +14,14 @@ export default {
   template: `
     <sui-table-row :verticalAlign="'middle'">
         <sui-table-cell width="one" textAlign="center"><input type="checkbox" @input="onToggleDelete" v-model="toDelete"></input></sui-table-cell>
-        <sui-table-cell  v-for="(column, idx) in columns" :key="idx" :state="getErrorState(column)" :width="column.width" :style="{overflow: 'visible'}" v-if="column.isVisible" :textAlign="getTextAlign(column)">
+        <sui-table-cell  v-for="(column, idx) in columns" :key="idx" :state="getErrorState(column)" :width="getColumnWidth(column)" :style="{overflow: 'visible'}" v-if="column.isVisible" :textAlign="getTextAlign(column)">
          <atk-multiline-cell 
            :fieldType="getFieldType(column)" 
            :cellData="column" 
            @update-value="onUpdateValue" 
            @post-value="onPostRow"
-           :fieldValue="getValue(column)">{{getReadOnlyValue(column)}}</atk-multiline-cell>
+           :fieldValue="getValue(column)"
+           :fieldProps="getFieldProps(column)"></atk-multiline-cell>
         </sui-table-cell>
     </sui-table-row>
   `,
@@ -58,6 +59,9 @@ export default {
       }
       return null;
     },
+    getColumnWidth: function(column) {
+      return column.fieldOptions ? column.fieldOptions.width : null;
+    },
     onEdit: function () {
       this.isEditing = true;
     },
@@ -85,6 +89,42 @@ export default {
       });
       return temp;
     },
+    /**
+     * Return component specific props.
+     * When dropdown is use for example.
+     *
+     * @param column
+     */
+    getFieldProps: function(column) {
+      let props = {};
+      if (column.type === 'enum') {
+         const userOptions = column.fieldOptions ? column.fieldOptions.dropdown : {};
+         const defaultOptions = {
+           floating : true,
+           closeOnBlur : true,
+           openOnFocus : false,
+           selection: true,
+         };
+         props = Object.assign(defaultOptions, userOptions);
+         props.options = this.getEnumValues(column.values);
+      }
+      return props;
+    },
+    /**
+     * Map values for Sui Dropdown.
+     * Values are possible value for dropdown.
+     *
+     * @param values
+     * @returns {{text: *, value: string, key: string}[]}
+     */
+    getEnumValues: function(values){
+      if(values) {
+        return Object.keys(values).map(key => {
+          return {key: key, value: key, text: values[key]}
+        });
+
+      }
+    },
     /**
      * Setup component according to field type.
      * For now support input - checkbox.
@@ -95,11 +135,14 @@ export default {
     getFieldType: function (column) {
       let type = 'sui-input';
       if (!column.isEditable){
-        type = 'div';
+        type = 'atk-multiline-readonly';
       }
       if (column.type === 'boolean') {
         type = 'sui-checkbox'
       }
+      if (column.type === 'enum') {
+        type = 'sui-dropdown';
+      }
       return type;
     },
     /**