MOBILE-2338 data: Search modal

src/addon/mod/data/classes/field-plugin-component.ts

@@ -12,6 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { Input } from '@angular/core';
+import { FormGroup, FormBuilder } from '@angular/forms';
 
 /**
  * Base class for component to render a field.
@@ -22,5 +23,29 @@ export class AddonModDataFieldPluginComponent {
     @Input() value?: any; // The value of the field.
     @Input() database?: any; // Database object.
     @Input() error?: string; // Error when editing.
-    @Input() viewAction: string; // Action to perform.
+    @Input() viewAction?: string; // Action to perform.
+    @Input() form?: FormGroup; // Form where to add the form control. Just required for edit and search modes.
+    @Input() search?: any; // The search value of all fields.
+
+    constructor(protected fb: FormBuilder) { }
+
+    /**
+     * Add the form control for the search mode.
+     *
+     * @param {string} fieldName Control field name.
+     * @param {any}    value     Initial set value.
+     */
+    protected addControl(fieldName: string, value?: any): void {
+        if (!this.form) {
+            return;
+        }
+
+        if (this.mode == 'search') {
+            this.form.addControl(fieldName, this.fb.control(this.search[fieldName] || null));
+        }
+
+        if (this.mode == 'edit') {
+            this.form.addControl(fieldName, this.fb.control(value || null));
+        }
+    }
 }

src/addon/mod/data/components/field-plugin/field-plugin.ts

@@ -12,6 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { Component, Input, OnInit, Injector, ViewChild } from '@angular/core';
+import { FormGroup } from '@angular/forms';
 import { AddonModDataProvider } from '../../providers/data';
 import { AddonModDataFieldsDelegate } from '../../providers/fields-delegate';
 import { CoreDynamicComponent } from '@components/dynamic-component/dynamic-component';
@@ -32,6 +33,8 @@ export class AddonModDataFieldPluginComponent implements OnInit {
     @Input() database?: any; // Database object.
     @Input() error?: string; // Error when editing.
     @Input() viewAction: string; // Action to perform.
+    @Input() form?: FormGroup; // Form where to add the form control. Just required for edit and search modes.
+    @Input() search?: any; // The search value of all fields.
 
     fieldComponent: any; // Component to render the plugin.
     data: any; // Data to pass to the component.
@@ -63,12 +66,14 @@ export class AddonModDataFieldPluginComponent implements OnInit {
                     value: this.value,
                     database: this.database,
                     error: this.error,
-                    viewAction: this.viewAction
+                    viewAction: this.viewAction,
+                    form: this.form,
+                    search: this.search
                 };
 
-            } else {
-                this.fieldLoaded = true;
             }
+        }).finally(() => {
+            this.fieldLoaded = true;
         });
     }
 }

src/addon/mod/data/components/index/index.html

@@ -58,7 +58,7 @@
         <a (click)="searchReset()">{{ 'addon.mod_data.resetsettings' | translate}}</a>
     </ion-item>
 
-    <div class="core-data-contents addon-data-entries-{{data.id}}" *ngIf="!isEmpty">
+    <div class="addon-data-contents addon-data-entries-{{data.id}}" *ngIf="!isEmpty">
         <style *ngIf="cssTemplate">
             {{ cssTemplate }}
         </style>

src/addon/mod/data/components/index/index.scss

@@ -1,5 +1,5 @@
 addon-mod-data-index {
-    .core-data-contents {
+    .addon-data-contents {
       overflow: visible;
       white-space: normal;
       word-break: break-word;

src/addon/mod/data/components/index/index.ts

@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import { Component, Optional, Injector } from '@angular/core';
-import { Content, ModalController } from 'ionic-angular';
+import { Content, ModalController, NavController } from 'ionic-angular';
 import { CoreTimeUtilsProvider } from '@providers/utils/time';
 import { CoreUtilsProvider } from '@providers/utils/utils';
 import { CoreGroupsProvider, CoreGroupInfo } from '@providers/groups';
@@ -42,7 +42,6 @@ export class AddonModDataIndexComponent extends CoreCourseModuleMainActivityComp
     data: any = {};
     fields: any;
     selectedGroup: number;
-    advancedSearch: any;
     timeAvailableFrom: number | boolean;
     timeAvailableFromReadable: string | boolean;
     timeAvailableTo: number | boolean;
@@ -79,7 +78,7 @@ export class AddonModDataIndexComponent extends CoreCourseModuleMainActivityComp
             private dataOffline: AddonModDataOfflineProvider, @Optional() @Optional() content: Content,
             private dataSync: AddonModDataSyncProvider, private timeUtils: CoreTimeUtilsProvider,
             private groupsProvider: CoreGroupsProvider, private commentsProvider: CoreCommentsProvider,
-            private modalCtrl: ModalController, private utils: CoreUtilsProvider) {
+            private modalCtrl: ModalController, private utils: CoreUtilsProvider, protected navCtrl: NavController) {
         super(injector);
 
         // Refresh entries on change.
@@ -222,7 +221,6 @@ export class AddonModDataIndexComponent extends CoreCourseModuleMainActivityComp
                     this.fields[field.id] = field;
                 });
                 this.fieldsArray = this.utils.objectToArray(this.fields);
-                this.advancedSearch = this.dataHelper.displayAdvancedSearchFields(this.data.asearchtemplate, this.fieldsArray);
 
                 return this.fetchEntriesData();
             });
@@ -349,9 +347,16 @@ export class AddonModDataIndexComponent extends CoreCourseModuleMainActivityComp
      * Display the chat users modal.
      */
     showSearch(): void {
-        const modal = this.modalCtrl.create('AddonModDataSearchPage');
+        const modal = this.modalCtrl.create('AddonModDataSearchPage', {
+            search: this.search,
+            fields: this.fields,
+            data: this.data});
         modal.onDidDismiss((data) => {
-            // @TODO.
+            // Add data to search object.
+            if (data) {
+                this.search = data;
+                this.searchEntries(0);
+            }
         });
         modal.present();
     }
@@ -366,14 +371,6 @@ export class AddonModDataIndexComponent extends CoreCourseModuleMainActivityComp
         this.loaded = false;
         this.search.page = page;
 
-        if (this.search.searchingAdvanced) {
-            this.search.advanced = this.dataHelper.getSearchDataFromForm(document.forms['addon-mod_data-advanced-search-form'],
-                this.fieldsArray);
-            this.search.searching = this.search.advanced.length > 0;
-        } else {
-            this.search.searching = this.search.text.length > 0;
-        }
-
         return this.fetchEntriesData().catch((message) => {
             this.domUtils.showErrorModalDefault(message, 'core.course.errorgetmodule', true);
         }).finally(() => {
@@ -405,6 +402,37 @@ export class AddonModDataIndexComponent extends CoreCourseModuleMainActivityComp
         });
     }
 
+    /**
+     * Opens add entries form.
+     */
+    gotoAddEntries(): void {
+        const stateParams = {
+            moduleId: this.module.id,
+            module: this.module,
+            courseId: this.courseId,
+            group: this.selectedGroup
+        };
+
+        this.navCtrl.push('AddonModDataEditPage', stateParams);
+    }
+
+    /**
+     * Goto the selected entry.
+     *
+     * @param {number} entryId Entry ID.
+     */
+    gotoEntry(entryId: number): void {
+        const stateParams = {
+            module: this.module,
+            moduleid: this.module.id,
+            courseid: this.courseId,
+            entryid: entryId,
+            group: this.selectedGroup
+        };
+
+        this.navCtrl.push('AddonModDataEntryPage', stateParams);
+    }
+
     /**
      * Fetch offline entries.
      *

src/addon/mod/data/fields/checkbox/component/checkbox.html

@@ -1,16 +1,17 @@
-<ion-list *ngIf="mode != 'show'">
+<span *ngIf="mode != 'show'" [formGroup]="form">
     <span *ngIf="mode == 'edit'" [core-mark-required]="field.required"></span>
-    <ion-item *ngFor="let option of options" [formGroup]="form">
+    <core-input-errors *ngIf="error && mode == 'edit'" [control]="form.controls['f_'+field.id]" [errorMessages]="error"></core-input-errors>
-        <ion-label>{{ option }}</ion-label>
-        <ion-checkbox item-end [formControlName]="'f_'+field.id" [(ngModel)]="values[option]">
-        </ion-checkbox>
-        <core-input-errors *ngIf="error && mode == 'edit'" [control]="form.controls['f_'+field.id]" [errorMessages]="errors"></core-input-errors>
-    </ion-item>
 
-    <ion-item *ngIf="mode == 'search'" [formGroup]="form">
+    <ion-select [formControlName]="'f_'+field.id" multiple="true" [placeholder]="'addon.mod_data.menuchoose' | translate" core-input-errors [selectOptions]="{title: field.name}">
+        <ion-option *ngFor="let option of options" [value]="option.value">{{option.key}}</ion-option>
+    </ion-select>
+
+
+    <ion-item *ngIf="mode == 'search'">
         <ion-label>{{ 'addon.mod_data.selectedrequired' | translate }}</ion-label>
-        <ion-checkbox item-end [formControlName]="'f_'+field.id+'_allreq'" [(ngModel)]="values['f_'+field.id+'_allreq']">
+        <ion-checkbox item-end [formControlName]="'f_'+field.id+'_allreq'" [(ngModel)]="search['f_'+field.id+'_allreq']">
         </ion-checkbox>
     </ion-item>
-</ion-list>
+</span>
+
 <core-format-text *ngIf="mode == 'show' && value && value.content" [text]="value.content"></core-format-text>

src/addon/mod/data/fields/checkbox/component/checkbox.ts

@@ -11,10 +11,8 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { Component, OnInit, ElementRef } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl } from '@angular/forms';
+import { FormBuilder } from '@angular/forms';
-import { CoreDomUtilsProvider } from '@providers/utils/dom';
-import { CoreTextUtilsProvider } from '@providers/utils/text';
 import { AddonModDataFieldPluginComponent } from '../../../classes/field-plugin-component';
 
 /**
@@ -26,13 +24,10 @@ import { AddonModDataFieldPluginComponent } from '../../../classes/field-plugin-
 })
 export class AddonModDataFieldCheckboxComponent extends AddonModDataFieldPluginComponent implements OnInit {
 
-    control: FormControl;
+    options = [];
-    options: number;
-    values = {};
 
-    constructor(protected fb: FormBuilder, protected domUtils: CoreDomUtilsProvider, protected textUtils: CoreTextUtilsProvider,
+    constructor(protected fb: FormBuilder) {
-            element: ElementRef) {
+        super(fb);
-        super();
     }
 
     /**
@@ -45,21 +40,28 @@ export class AddonModDataFieldCheckboxComponent extends AddonModDataFieldPluginC
 
     protected render(): void {
         if (this.mode == 'show') {
-            this.value.content = this.value.content.split('##').join('<br>');
+            this.value.content = this.value && this.value.content && this.value.content.split('##').join('<br>');
 
             return;
         }
 
-        this.options = this.field.param1.split('\n');
+        this.options = this.field.param1.split('\n').map((option) => {
-
+            return { key: option, value: option };
-        if (this.mode == 'edit' && this.value) {
-            this.values = {};
-
-            this.value.content.split('##').forEach((value) => {
-                this.values[value] = true;
         });
 
-            //this.control = this.fb.control(text);
+        if (this.mode == 'edit' && this.value && this.value.content) {
+            this.value.content.split('##').forEach((value) => {
+                const x = this.options.findIndex((option) => value == option.key);
+                if (x >= 0) {
+                    this.options[x].selected = true;
                 }
+            });
+        }
+
+        if (this.mode == 'search') {
+            this.addControl('f_' + this.field.id + '_allreq');
+        }
+
+        this.addControl('f_' + this.field.id);
     }
 }

src/addon/mod/data/fields/checkbox/providers/handler.ts

@@ -49,20 +49,22 @@ export class AddonModDataFieldCheckboxHandler implements AddonModDataFieldHandle
         const fieldName = 'f_' + field.id,
             reqName = 'f_' + field.id + '_allreq';
 
-        const checkboxes = [],
+        const options = field.param1.split('\n'),
+            checkboxes = [],
             values = [];
-        inputData[fieldName].forEach((value, option) => {
+        options.forEach((option) => {
-            if (value) {
+            if (inputData[fieldName + '_' + option]) {
                 checkboxes.push(option);
             }
         });
+
         if (checkboxes.length > 0) {
             values.push({
                 name: fieldName,
                 value: checkboxes
             });
 
-            if (inputData[reqName]['1']) {
+            if (inputData[reqName]) {
                 values.push({
                     name: reqName,
                     value: true
@@ -85,9 +87,10 @@ export class AddonModDataFieldCheckboxHandler implements AddonModDataFieldHandle
     getFieldEditData(field: any, inputData: any, originalFieldData: any): any {
         const fieldName = 'f_' + field.id;
 
-        const checkboxes = [];
+        const options = field.param1.split('\n'),
-        inputData[fieldName].forEach((value, option) => {
+            checkboxes = [];
-            if (value) {
+        options.forEach((option) => {
+            if (inputData[fieldName + '_' + option]) {
                 checkboxes.push(option);
             }
         });

src/addon/mod/data/fields/date/component/date.html

@@ -1,12 +1,14 @@
-<span *ngIf="mode == 'edit'" [core-mark-required]="field.required"></span>
+<span *ngIf="mode != 'show'" [formGroup]="form">
-<ion-datetime *ngIf="mode != 'show'" [formControlName]="'f_'+field.id" [placeholder]="'core.date' | translate" [disabled]="!enable && mode == 'search'"></ion-datetime>
+    <span *ngIf="mode == 'edit'" [core-mark-required]="field.required"></span>
-<core-input-errors *ngIf="error && mode == 'edit'" [control]="form.controls['f_'+field.id]" [errorMessages]="errors"></core-input-errors>
+    <ion-datetime [formControlName]="'f_'+field.id" [placeholder]="'core.date' | translate" [disabled]="mode == 'search' && !search['f_'+field.id+'_z']" [displayFormat]="format"></ion-datetime>
+    <core-input-errors *ngIf="error && mode == 'edit'" [control]="form.controls['f_'+field.id]" [errorMessages]="errors"></core-input-errors>
 
-<ion-item *ngIf="mode == 'search'" [formGroup]="form">
+    <ion-item *ngIf="mode == 'search'">
         <ion-label>{{ 'addon.mod_data.usedate' | translate }}</ion-label>
-    <ion-checkbox item-end [formControlName]="'f_'+field.id+'_z'" [(ngModel)]="values['f_'+field.id+'_z']">
+        <ion-checkbox item-end [formControlName]="'f_'+field.id+'_z'" [(ngModel)]="search['f_'+field.id+'_z']">
         </ion-checkbox>
-</ion-item>
+    </ion-item>
+</span>
 
 <core-format-text *ngIf="mode == 'show' && value && value.content"  [text]="value.content * 1000 | coreFormatDate:'dfdaymonthyear'"></core-format-text>
 

src/addon/mod/data/fields/date/component/date.ts

@@ -11,10 +11,9 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { Component, OnInit, ElementRef } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl } from '@angular/forms';
+import { FormBuilder } from '@angular/forms';
-import { CoreDomUtilsProvider } from '@providers/utils/dom';
+import { CoreTimeUtilsProvider } from '@providers/utils/time';
-import { CoreTextUtilsProvider } from '@providers/utils/text';
 import { AddonModDataFieldPluginComponent } from '../../../classes/field-plugin-component';
 
 /**
@@ -26,14 +25,13 @@ import { AddonModDataFieldPluginComponent } from '../../../classes/field-plugin-
 })
 export class AddonModDataFieldDateComponent extends AddonModDataFieldPluginComponent implements OnInit {
 
-    control: FormControl;
     values = {};
     enable: boolean;
     val: any;
+    format: string;
 
-    constructor(protected fb: FormBuilder, protected domUtils: CoreDomUtilsProvider, protected textUtils: CoreTextUtilsProvider,
+    constructor(protected fb: FormBuilder, protected timeUtils: CoreTimeUtilsProvider) {
-            element: ElementRef) {
+        super(fb);
-        super();
     }
 
     /**
@@ -49,15 +47,23 @@ export class AddonModDataFieldDateComponent extends AddonModDataFieldPluginCompo
             return;
         }
 
-        if (this.mode == 'edit' && this.value) {
+        if (!this.value) {
-            this.enable = true;
-        } else {
             this.value = {
                 content: Math.floor(Date.now() / 1000)
             };
-            this.enable = false;
         }
 
         this.val = new Date(this.value.content * 1000);
+
+        this.format = this.timeUtils.getLocalizedDateFormat('LL');
+
+        if (this.mode == 'search') {
+            this.addControl('f_' + this.field.id + '_z');
+            this.search['f_' + this.field.id] = this.search['f_' + this.field.id + '_y'] ? new Date(
+                this.search['f_' + this.field.id + '_y'] + '-' + this.search['f_' + this.field.id + '_m'] + '-' +
+                this.search['f_' + this.field.id + '_d']) : this.val;
+        }
+
+        this.addControl('f_' + this.field.id, this.val);
     }
 }

src/addon/mod/data/fields/date/providers/handler.ts

@@ -49,7 +49,7 @@ export class AddonModDataFieldDateHandler implements AddonModDataFieldHandler {
         const fieldName = 'f_' + field.id,
             enabledName = 'f_' + field.id + '_z';
 
-        if (inputData[enabledName]['1']) {
+        if (inputData[enabledName] && typeof inputData[fieldName] == 'string') {
             const values = [],
                 date = inputData[fieldName].split('-'),
                 year = date[0],

src/addon/mod/data/fields/file/component/file.html

@@ -1,7 +1,12 @@
-<span *ngIf="mode == 'edit'" [core-mark-required]="field.required"></span>
+<span *ngIf="mode == 'edit'" [formGroup]="form">
-<core-input-errors *ngIf="error && mode == 'edit'" [errorMessages]="error"></core-input-errors>
+    <span [core-mark-required]="field.required"></span>
-<input *ngIf="mode == 'search'" type="text" [placeholder]="field.name" [name]="'f_'+field.id">
+    <core-input-errors *ngIf="error" [errorMessages]="error"></core-input-errors>
- <core-attachments *ngIf="mode == 'edit'" [files]="files" [maxSize]="maxSizeBytes" maxSubmissions="1" [component]="component" [componentId]="componentId" [allowOffline]="true"></core-attachments>
+    <core-attachments [files]="files" [maxSize]="maxSizeBytes" maxSubmissions="1" [component]="component" [componentId]="componentId" [allowOffline]="true"></core-attachments>
+</span>
+
+<span *ngIf="mode == 'search'" [formGroup]="form">
+    <ion-input type="text" [formControlName]="'f_'+field.id" [placeholder]="field.name"></ion-input>
+</span>
 
 <ng-container *ngIf="mode == 'show'">
     <div *ngFor="let file of files" no-lines>

src/addon/mod/data/fields/file/component/file.ts

@@ -11,10 +11,8 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { Component, OnInit, ElementRef } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl } from '@angular/forms';
+import { FormBuilder } from '@angular/forms';
-import { CoreDomUtilsProvider } from '@providers/utils/dom';
-import { CoreTextUtilsProvider } from '@providers/utils/text';
 import { AddonModDataFieldPluginComponent } from '../../../classes/field-plugin-component';
 import { CoreFileSessionProvider } from '@providers/file-session';
 import { AddonModDataProvider } from '../../../providers/data';
@@ -28,15 +26,13 @@ import { AddonModDataProvider } from '../../../providers/data';
 })
 export class AddonModDataFieldFileComponent extends AddonModDataFieldPluginComponent implements OnInit {
 
-    control: FormControl;
     files = [];
     component: string;
     componentId: number;
     maxSizeBytes: number;
 
-    constructor(protected fb: FormBuilder, protected domUtils: CoreDomUtilsProvider, protected textUtils: CoreTextUtilsProvider,
+    constructor(protected fb: FormBuilder, private fileSessionprovider: CoreFileSessionProvider) {
-            element: ElementRef, private fileSessionprovider: CoreFileSessionProvider) {
+        super(fb);
-        super();
     }
 
     /**
@@ -77,5 +73,7 @@ export class AddonModDataFieldFileComponent extends AddonModDataFieldPluginCompo
                 this.fileSessionprovider.setFiles(this.component, this.database.id + '_' + this.field.id, this.files);
             }
         }
+
+        this.addControl('f_' + this.field.id);
     }
 }

src/addon/mod/data/fields/latlong/component/latlong.html

@@ -1,17 +1,19 @@
-<ion-input *ngIf="mode == 'search'" type="text" [placeholder]="field.name" [formControlName]="'f_'+field.id"></ion-input>
+<span *ngIf="mode != 'show'" [formGroup]="form">
+    <ion-input *ngIf="mode == 'search'" type="text" [placeholder]="field.name" [formControlName]="'f_'+field.id"></ion-input>
 
-<span *ngIf="mode == 'edit'" [core-mark-required]="field.required"></span>
+    <span *ngIf="mode == 'edit'" [core-mark-required]="field.required"></span>
 
-<core-input-errors *ngIf="error && mode == 'edit'" [control]="form.controls['f_'+field.id]" [errorMessages]="errors"></core-input-errors>
+    <core-input-errors *ngIf="error && mode == 'edit'" [control]="form.controls['f_'+field.id]" [errorMessages]="errors"></core-input-errors>
 
-<ion-item *ngIf="mode == 'edit'" [formGroup]="form">
+    <ion-item *ngIf="mode == 'edit'" [formGroup]="form">
         <ion-input type="text" [formControlName]="'f_'+field.id+'_0'" [(ngModel)]="north" maxlength="10" core-input-errors></ion-input>
         <span class="placeholder-icon" item-right>°N</span>
-</ion-item>
+    </ion-item>
-<ion-item *ngIf="mode == 'edit'" [formGroup]="form">
+    <ion-item *ngIf="mode == 'edit'" [formGroup]="form">
         <ion-input type="text" [formControlName]="'f_'+field.id+'_1'" [(ngModel)]="east" maxlength="10" core-input-errors></ion-input>
         <span class="placeholder-icon" item-right>°E</span>
-</ion-item>
+    </ion-item>
+</span>
 
 
 <span *ngIf="mode == 'show' && value">

src/addon/mod/data/fields/latlong/component/latlong.ts

@@ -11,11 +11,9 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { Component, OnInit, ElementRef } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl } from '@angular/forms';
+import { FormBuilder } from '@angular/forms';
 import { Platform } from 'ionic-angular';
-import { CoreDomUtilsProvider } from '@providers/utils/dom';
-import { CoreTextUtilsProvider } from '@providers/utils/text';
 import { AddonModDataFieldPluginComponent } from '../../../classes/field-plugin-component';
 
 /**
@@ -27,14 +25,11 @@ import { AddonModDataFieldPluginComponent } from '../../../classes/field-plugin-
 })
 export class AddonModDataFieldLatlongComponent extends AddonModDataFieldPluginComponent implements OnInit {
 
-    control: FormControl;
-    values = {};
     north: number;
     east: number;
 
-    constructor(protected fb: FormBuilder, protected domUtils: CoreDomUtilsProvider, protected textUtils: CoreTextUtilsProvider,
+    constructor(protected fb: FormBuilder, private platform: Platform) {
-            element: ElementRef, private platform: Platform) {
+        super(fb);
-        super();
     }
 
     /**
@@ -86,5 +81,12 @@ export class AddonModDataFieldLatlongComponent extends AddonModDataFieldPluginCo
             this.north = (this.value && parseFloat(this.value.content)) || null;
             this.east = (this.value && parseFloat(this.value.content1)) || null;
         }
+
+        if (this.mode == 'edit') {
+            this.addControl('f_' + this.field.id + '_0', this.north);
+            this.addControl('f_' + this.field.id + '_1', this.east);
+        } else if (this.mode == 'search') {
+            this.addControl('f_' + this.field.id);
+        }
     }
 }

src/addon/mod/data/fields/menu/component/menu.html

@@ -1,9 +1,11 @@
-<span *ngIf="mode == 'edit'" [core-mark-required]="field.required"></span>
+<span *ngIf="mode != 'show'" [formGroup]="form">
-<core-input-errors *ngIf="error && mode == 'edit'" [control]="form.controls['f_'+field.id]" [errorMessages]="error"></core-input-errors>
+    <span *ngIf="mode == 'edit'" [core-mark-required]="field.required"></span>
+    <core-input-errors *ngIf="error && mode == 'edit'" [control]="form.controls['f_'+field.id]" [errorMessages]="error"></core-input-errors>
 
-<ion-select *ngIf="mode != 'show'" [formControlName]="'f_'+field.id" [placeholder]="'addon.mod_data.menuchoose' | translate" core-input-errors [(ngModel)]="val">
+    <ion-select [formControlName]="'f_'+field.id" [placeholder]="'addon.mod_data.menuchoose' | translate" core-input-errors [selectOptions]="{title: field.name}">
         <ion-option value="">{{ 'addon.mod_data.menuchoose' | translate }}</ion-option>
         <ion-option *ngFor="let option of options" [value]="option">{{option}}</ion-option>
-</ion-select>
+    </ion-select>
+</span>
 
 <core-format-text *ngIf="mode == 'show' && value && value.content" [text]="value.content"></core-format-text>

src/addon/mod/data/fields/menu/component/menu.ts

@@ -11,10 +11,8 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { Component, OnInit, ElementRef } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl } from '@angular/forms';
+import { FormBuilder } from '@angular/forms';
-import { CoreDomUtilsProvider } from '@providers/utils/dom';
-import { CoreTextUtilsProvider } from '@providers/utils/text';
 import { AddonModDataFieldPluginComponent } from '../../../classes/field-plugin-component';
 
 /**
@@ -26,13 +24,10 @@ import { AddonModDataFieldPluginComponent } from '../../../classes/field-plugin-
 })
 export class AddonModDataFieldMenuComponent extends AddonModDataFieldPluginComponent implements OnInit {
 
-    control: FormControl;
-    val: string;
     options = [];
 
-    constructor(protected fb: FormBuilder, protected domUtils: CoreDomUtilsProvider, protected textUtils: CoreTextUtilsProvider,
+    constructor(protected fb: FormBuilder) {
-            element: ElementRef) {
+        super(fb);
-        super();
     }
 
     /**
@@ -50,8 +45,11 @@ export class AddonModDataFieldMenuComponent extends AddonModDataFieldPluginCompo
 
         this.options = this.field.param1.split('\n');
 
+        let val;
         if (this.mode == 'edit' && this.value) {
-            this.val = this.value.content;
+            val = this.value.content;
         }
+
+        this.addControl('f_' + this.field.id, val);
     }
 }

src/addon/mod/data/fields/multimenu/component/multimenu.html

@@ -1,8 +1,17 @@
-<span *ngIf="mode == 'edit'" [core-mark-required]="field.required"></span>
+<span *ngIf="mode != 'show'" [formGroup]="form">
-<core-input-errors *ngIf="error && mode == 'edit'" [control]="form.controls['f_'+field.id]" [errorMessages]="error"></core-input-errors>
+    <span *ngIf="mode == 'edit'" [core-mark-required]="field.required"></span>
+    <core-input-errors *ngIf="error && mode == 'edit'" [control]="form.controls['f_'+field.id]" [errorMessages]="error"></core-input-errors>
 
-<!--<mm-multiple-select *ngIf="mode != 'show'" title="{{field.name}}" name="f_{{field.id}}" options="options"></mm-multiple-select>
+    <ion-select [formControlName]="'f_'+field.id" multiple="true" [placeholder]="'addon.mod_data.menuchoose' | translate" core-input-errors [selectOptions]="{title: field.name}">
+        <ion-option *ngFor="let option of options" [value]="option.value">{{option.key}}</ion-option>
+    </ion-select>
 
-<ion-checkbox *ngIf="mode == 'search'" name="f_{{field.id}}_allreq" ng-value="1">{{ 'addon.mod_data.selectedrequired' | translate }}</ion-checkbox>-->
 
-<core-format-text *ngIf="mode == 'show' && value && value.content" [text]="value.content.split('##').join('<br>')"></core-format-text>
+    <ion-item *ngIf="mode == 'search'">
+        <ion-label>{{ 'addon.mod_data.selectedrequired' | translate }}</ion-label>
+        <ion-checkbox item-end [formControlName]="'f_'+field.id+'_allreq'" [(ngModel)]="search['f_'+field.id+'_allreq']">
+        </ion-checkbox>
+    </ion-item>
+</span>
+
+<core-format-text *ngIf="mode == 'show' && value && value.content" [text]="value.content"></core-format-text>

src/addon/mod/data/fields/multimenu/component/multimenu.ts

@@ -11,10 +11,8 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { Component, OnInit, ElementRef } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl } from '@angular/forms';
+import { FormBuilder } from '@angular/forms';
-import { CoreDomUtilsProvider } from '@providers/utils/dom';
-import { CoreTextUtilsProvider } from '@providers/utils/text';
 import { AddonModDataFieldPluginComponent } from '../../../classes/field-plugin-component';
 
 /**
@@ -26,12 +24,10 @@ import { AddonModDataFieldPluginComponent } from '../../../classes/field-plugin-
 })
 export class AddonModDataFieldMultimenuComponent extends AddonModDataFieldPluginComponent implements OnInit {
 
-    control: FormControl;
     options = [];
 
-    constructor(protected fb: FormBuilder, protected domUtils: CoreDomUtilsProvider, protected textUtils: CoreTextUtilsProvider,
+    constructor(protected fb: FormBuilder) {
-            element: ElementRef) {
+        super(fb);
-        super();
     }
 
     /**
@@ -44,6 +40,8 @@ export class AddonModDataFieldMultimenuComponent extends AddonModDataFieldPlugin
 
     protected render(): void {
         if (this.mode == 'show') {
+            this.value.content = this.value && this.value.content && this.value.content.split('##').join('<br>');
+
             return;
         }
 
@@ -59,5 +57,11 @@ export class AddonModDataFieldMultimenuComponent extends AddonModDataFieldPlugin
                 }
             });
         }
+
+        if (this.mode == 'search') {
+            this.addControl('f_' + this.field.id + '_allreq');
+        }
+
+        this.addControl('f_' + this.field.id);
     }
 }

src/addon/mod/data/fields/multimenu/providers/handler.ts

@@ -49,17 +49,15 @@ export class AddonModDataFieldMultimenuHandler implements AddonModDataFieldHandl
         const fieldName = 'f_' + field.id,
             reqName = 'f_' + field.id + '_allreq';
 
-        if (inputData[fieldName].length > 0) {
+        if (inputData[fieldName] && inputData[fieldName].length > 0) {
-            const options = inputData[fieldName].split('###'),
+            const values = [];
-                values = [];
 
-            if (options.length > 0) {
             values.push({
                 name: fieldName,
-                    value: options
+                value: inputData[fieldName]
             });
 
-                if (inputData[reqName]['1']) {
+            if (inputData[reqName]) {
                 values.push({
                     name: reqName,
                     value: true
@@ -68,7 +66,6 @@ export class AddonModDataFieldMultimenuHandler implements AddonModDataFieldHandl
 
             return values;
         }
-        }
 
         return false;
     }

src/addon/mod/data/fields/number/component/number.html

@@ -1,7 +1,9 @@
-<span *ngIf="mode == 'edit'" [core-mark-required]="field.required"></span>
+<span *ngIf="mode != 'show'" [formGroup]="form">
+    <span *ngIf="mode == 'edit'" [core-mark-required]="field.required"></span>
 
-<core-input-errors *ngIf="error && mode == 'edit'" [control]="form.controls['f_'+field.id]" [errorMessages]="error"></core-input-errors>
+    <core-input-errors *ngIf="error && mode == 'edit'" [control]="form.controls['f_'+field.id]" [errorMessages]="error"></core-input-errors>
 
-<ion-input *ngIf="mode != 'show'" type="number" [formControlName]="'f_'+field.id" [placeholder]="field.name" [(ngModel)]="val"></ion-input>
+    <ion-input type="number" [formControlName]="'f_'+field.id" [placeholder]="field.name"></ion-input>
+</span>
 
 <core-format-text *ngIf="mode == 'show' && value && value.content" [text]="value.content"></core-format-text>

src/addon/mod/data/fields/number/component/number.ts

@@ -11,10 +11,8 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { Component, OnInit, ElementRef } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl } from '@angular/forms';
+import { FormBuilder } from '@angular/forms';
-import { CoreDomUtilsProvider } from '@providers/utils/dom';
-import { CoreTextUtilsProvider } from '@providers/utils/text';
 import { AddonModDataFieldPluginComponent } from '../../../classes/field-plugin-component';
 
 /**
@@ -26,12 +24,10 @@ import { AddonModDataFieldPluginComponent } from '../../../classes/field-plugin-
 })
 export class AddonModDataFieldNumberComponent extends AddonModDataFieldPluginComponent implements OnInit {
 
-    control: FormControl;
     val: number;
 
-    constructor(protected fb: FormBuilder, protected domUtils: CoreDomUtilsProvider, protected textUtils: CoreTextUtilsProvider,
+    constructor(protected fb: FormBuilder) {
-            element: ElementRef) {
+        super(fb);
-        super();
     }
 
     /**
@@ -50,5 +46,7 @@ export class AddonModDataFieldNumberComponent extends AddonModDataFieldPluginCom
         if (this.mode == 'edit' && this.value) {
             this.val = this.value && parseFloat(this.value.content);
         }
+
+        this.addControl('f_' + this.field.id, this.val);
     }
 }

src/addon/mod/data/fields/picture/component/picture.html

@@ -1,16 +1,20 @@
-<span *ngIf="mode == 'edit'" [core-mark-required]="field.required"></span>
+<span *ngIf="mode == 'edit'" [formGroup]="form">
+    <span [core-mark-required]="field.required"></span>
 
-<core-input-errors *ngIf="error && mode == 'edit'" [errorMessages]="error"></core-input-errors>
+    <core-input-errors *ngIf="error" [errorMessages]="error"></core-input-errors>
 
-<input *ngIf="mode == 'search'" type="text" [placeholder]="field.name" [name]="'f_'+field.id">
+    <core-attachments [files]="files" [maxSize]="maxSizeBytes" maxSubmissions="1" [component]="component" [componentId]="componentId" [allowOffline]="true"></core-attachments>
 
-<core-attachments *ngIf="mode == 'edit'" [files]="files" [maxSize]="maxSizeBytes" maxSubmissions="1" [component]="component" [componentId]="componentId" [allowOffline]="true"></core-attachments>
+    <ion-item>
-
-<ion-item *ngIf="mode == 'edit'" [formGroup]="form">
         <ion-label>{{ 'addon.mod_data.alttext' | translate }}</ion-label>
         <ion-input type="text" [formControlName]="'f_'+field.id+'_alttext'" [(ngModel)]="alttext" [placeholder]=" 'addon.mod_data.alttext' | translate" ></ion-input>
         <span class="placeholder-icon" item-right>°N</span>
-</ion-item>
+    </ion-item>
+</span>
+
+<span *ngIf="mode == 'search'" [formGroup]="form">
+    <ion-input type="text" [formControlName]="'f_'+field.id" [placeholder]="field.name"></ion-input>
+</span>
 
 <span *ngIf="mode == 'list' && imageUrl" (click)="viewAction()"><img [src]="imageUrl" [alt]="title" [title]="title" class="core-media-adapt-width list_picture" core-external-content/></span>
 

src/addon/mod/data/fields/picture/component/picture.ts

@@ -11,10 +11,8 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { Component, OnInit, ElementRef } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl } from '@angular/forms';
+import { FormBuilder } from '@angular/forms';
-import { CoreDomUtilsProvider } from '@providers/utils/dom';
-import { CoreTextUtilsProvider } from '@providers/utils/text';
 import { AddonModDataFieldPluginComponent } from '../../../classes/field-plugin-component';
 import { CoreFileSessionProvider } from '@providers/file-session';
 import { AddonModDataProvider } from '../../../providers/data';
@@ -28,7 +26,6 @@ import { AddonModDataProvider } from '../../../providers/data';
 })
 export class AddonModDataFieldPictureComponent extends AddonModDataFieldPluginComponent implements OnInit {
 
-    control: FormControl;
     files = [];
     component: string;
     componentId: number;
@@ -42,9 +39,8 @@ export class AddonModDataFieldPictureComponent extends AddonModDataFieldPluginCo
     width: string;
     height: string;
 
-    constructor(protected fb: FormBuilder, protected domUtils: CoreDomUtilsProvider, protected textUtils: CoreTextUtilsProvider,
+    constructor(protected fb: FormBuilder, private fileSessionprovider: CoreFileSessionProvider) {
-            element: ElementRef, private fileSessionprovider: CoreFileSessionProvider) {
+        super(fb);
-        super();
     }
 
     /**
@@ -124,5 +120,7 @@ export class AddonModDataFieldPictureComponent extends AddonModDataFieldPluginCo
                 this.height = this.field.param2 || '';
             }
         }
+
+        this.addControl('f_' + this.field.id);
     }
 }

src/addon/mod/data/fields/radiobutton/component/radiobutton.html

@@ -1,9 +1,11 @@
-<span *ngIf="mode == 'edit'" [core-mark-required]="field.required"></span>
+<span *ngIf="mode != 'show'" [formGroup]="form">
-<core-input-errors *ngIf="error && mode == 'edit'" [control]="form.controls['f_'+field.id]" [errorMessages]="error"></core-input-errors>
+    <span *ngIf="mode == 'edit'" [core-mark-required]="field.required"></span>
+    <core-input-errors *ngIf="error && mode == 'edit'" [control]="form.controls['f_'+field.id]" [errorMessages]="error"></core-input-errors>
 
-<ion-select *ngIf="mode != 'show'" [formControlName]="'f_'+field.id" [placeholder]="'addon.mod_data.menuchoose' | translate" core-input-errors [(ngModel)]="val">
+    <ion-select [formControlName]="'f_'+field.id" [placeholder]="'addon.mod_data.menuchoose' | translate" core-input-errors [selectOptions]="{title: field.name}">
         <ion-option value="">{{ 'addon.mod_data.menuchoose' | translate }}</ion-option>
         <ion-option *ngFor="let option of options" [value]="option">{{option}}</ion-option>
-</ion-select>
+    </ion-select>
+</span>
 
 <core-format-text *ngIf="mode == 'show' && value && value.content" [text]="value.content"></core-format-text>

src/addon/mod/data/fields/radiobutton/component/radiobutton.ts

@@ -11,10 +11,8 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { Component, OnInit, ElementRef } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl } from '@angular/forms';
+import { FormBuilder } from '@angular/forms';
-import { CoreDomUtilsProvider } from '@providers/utils/dom';
-import { CoreTextUtilsProvider } from '@providers/utils/text';
 import { AddonModDataFieldPluginComponent } from '../../../classes/field-plugin-component';
 
 /**
@@ -26,13 +24,10 @@ import { AddonModDataFieldPluginComponent } from '../../../classes/field-plugin-
 })
 export class AddonModDataFieldRadiobuttonComponent extends AddonModDataFieldPluginComponent implements OnInit {
 
-    control: FormControl;
+    options = [];
-    options: number;
-    val: number;
 
-    constructor(protected fb: FormBuilder, protected domUtils: CoreDomUtilsProvider, protected textUtils: CoreTextUtilsProvider,
+    constructor(protected fb: FormBuilder) {
-            element: ElementRef) {
+        super(fb);
-        super();
     }
 
     /**
@@ -50,8 +45,11 @@ export class AddonModDataFieldRadiobuttonComponent extends AddonModDataFieldPlug
 
         this.options = this.field.param1.split('\n');
 
+        let val;
         if (this.mode == 'edit' && this.value) {
-            this.val = this.value.content;
+            val = this.value.content;
         }
+
+        this.addControl('f_' + this.field.id, val);
     }
 }

src/addon/mod/data/fields/text/component/text.html

@@ -1,7 +1,9 @@
-<span *ngIf="mode == 'edit'" [core-mark-required]="field.required"></span>
+<span *ngIf="mode != 'show'" [formGroup]="form">
+    <span *ngIf="mode == 'edit'" [core-mark-required]="field.required"></span>
 
-<core-input-errors *ngIf="error && mode == 'edit'" [control]="form.controls['f_'+field.id]" [errorMessages]="error"></core-input-errors>
+    <core-input-errors *ngIf="error && mode == 'edit'" [control]="form.controls['f_'+field.id]" [errorMessages]="error"></core-input-errors>
 
-<ion-input *ngIf="mode != 'show'" type="text" [formControlName]="'f_'+field.id" [placeholder]="field.name" [(ngModel)]="val"></ion-input>
+    <ion-input type="text" [formControlName]="'f_'+field.id" [placeholder]="field.name" [(ngModel)]="val"></ion-input>
+</span>
 
 <core-format-text *ngIf="mode == 'show' && value && value.content" [text]="value.content"></core-format-text>

src/addon/mod/data/fields/text/component/text.ts

@@ -11,10 +11,8 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { Component, OnInit, ElementRef } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl } from '@angular/forms';
+import { FormBuilder } from '@angular/forms';
-import { CoreDomUtilsProvider } from '@providers/utils/dom';
-import { CoreTextUtilsProvider } from '@providers/utils/text';
 import { AddonModDataFieldPluginComponent } from '../../../classes/field-plugin-component';
 
 /**
@@ -26,12 +24,10 @@ import { AddonModDataFieldPluginComponent } from '../../../classes/field-plugin-
 })
 export class AddonModDataFieldTextComponent extends AddonModDataFieldPluginComponent implements OnInit {
 
-    control: FormControl;
     val: number;
 
-    constructor(protected fb: FormBuilder, protected domUtils: CoreDomUtilsProvider, protected textUtils: CoreTextUtilsProvider,
+    constructor(protected fb: FormBuilder) {
-            element: ElementRef) {
+        super(fb);
-        super();
     }
 
     /**
@@ -50,5 +46,7 @@ export class AddonModDataFieldTextComponent extends AddonModDataFieldPluginCompo
         if (this.mode == 'edit' && this.value) {
             this.val = this.value.content;
         }
+
+        this.addControl('f_' + this.field.id, this.val);
     }
 }

src/addon/mod/data/fields/textarea/component/textarea.html

@@ -1,10 +1,13 @@
-<span *ngIf="mode == 'edit'" [core-mark-required]="field.required"></span>
+<span *ngIf="mode != 'show'" [formGroup]="form">
 
-<core-input-errors *ngIf="error && mode == 'edit'" [control]="form.controls['f_'+field.id]" [errorMessages]="error"></core-input-errors>
+    <span *ngIf="mode == 'edit'" [core-mark-required]="field.required"></span>
 
-<input *ngIf="mode == 'search'" type="text" [placeholder]="field.name" [name]="'f_'+field.id">
+    <core-input-errors *ngIf="error && mode == 'edit'" [control]="form.controls['f_'+field.id]" [errorMessages]="error"></core-input-errors>
 
-<core-rich-text-editor *ngIf="mode == 'edit'" item-content [control]="form.controls['f_'+field.id]" [placeholder]="field.name" [formControlName]="'f_'+field.id"></core-rich-text-editor>
+    <ion-input *ngIf="mode == 'search'" type="text" [placeholder]="field.name" [formControlName]="'f_'+field.id"></ion-input>
-<!-- @todo: [component]="component" [componentId]="componentId" -->
+
+    <core-rich-text-editor *ngIf="mode == 'edit'" item-content [control]="form.controls['f_'+field.id]" [placeholder]="field.name" [formControlName]="'f_'+field.id"></core-rich-text-editor>
+    <!-- @todo: [component]="component" [componentId]="componentId" -->
+</span>
 
 <core-format-text *ngIf="mode == 'show' && value" [text]="value.content" [component]="component" [componentId]="componentId"></core-format-text>

src/addon/mod/data/fields/textarea/component/textarea.ts

@@ -11,9 +11,8 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { Component, OnInit, ElementRef } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl } from '@angular/forms';
+import { FormBuilder } from '@angular/forms';
-import { CoreDomUtilsProvider } from '@providers/utils/dom';
 import { CoreTextUtilsProvider } from '@providers/utils/text';
 import { AddonModDataProvider } from '../../../providers/data';
 import { AddonModDataFieldPluginComponent } from '../../../classes/field-plugin-component';
@@ -27,13 +26,11 @@ import { AddonModDataFieldPluginComponent } from '../../../classes/field-plugin-
 })
 export class AddonModDataFieldTextareaComponent extends AddonModDataFieldPluginComponent implements OnInit {
 
-    control: FormControl;
     component: string;
     componentId: number;
 
-    constructor(protected fb: FormBuilder, protected domUtils: CoreDomUtilsProvider, protected textUtils: CoreTextUtilsProvider,
+    constructor(protected fb: FormBuilder, protected textUtils: CoreTextUtilsProvider) {
-            element: ElementRef) {
+        super(fb);
-        super();
     }
 
     format(value: any): string {
@@ -62,8 +59,8 @@ export class AddonModDataFieldTextareaComponent extends AddonModDataFieldPluginC
         if (this.mode == 'edit') {
             const files = (this.value && this.value.files) || [],
                 text = this.value ? this.textUtils.replacePluginfileUrls(this.value.content, files) : '';
-
-            this.control = this.fb.control(text);
         }
+
+        this.addControl('f_' + this.field.id, '');
     }
 }

src/addon/mod/data/fields/url/component/url.html

@@ -1,7 +1,9 @@
-<span *ngIf="mode == 'edit'" [core-mark-required]="field.required"></span>
+<span *ngIf="mode != 'show'" [formGroup]="form">
+    <span *ngIf="mode == 'edit'" [core-mark-required]="field.required"></span>
 
-<core-input-errors *ngIf="error && mode == 'edit'" [control]="form.controls['f_'+field.id]" [errorMessages]="error"></core-input-errors>
+    <core-input-errors *ngIf="error && mode == 'edit'" [control]="form.controls['f_'+field.id]" [errorMessages]="error"></core-input-errors>
 
-<ion-input *ngIf="mode != 'show'" type="url" [formControlName]="'f_'+field.id" [placeholder]="field.name" [(ngModel)]="val"></ion-input>
+    <ion-input type="url" [formControlName]="'f_'+field.id" [placeholder]="field.name" [(ngModel)]="val"></ion-input>
+</span>
 
 <a *ngIf="mode == 'show' && value && value.content" [href]="value.content" core-link capture="true">{{field.name}}</a>

src/addon/mod/data/fields/url/component/url.ts

@@ -11,10 +11,8 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { Component, OnInit, ElementRef } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
-import { FormBuilder, FormControl } from '@angular/forms';
+import { FormBuilder } from '@angular/forms';
-import { CoreDomUtilsProvider } from '@providers/utils/dom';
-import { CoreTextUtilsProvider } from '@providers/utils/text';
 import { AddonModDataFieldPluginComponent } from '../../../classes/field-plugin-component';
 
 /**
@@ -26,12 +24,10 @@ import { AddonModDataFieldPluginComponent } from '../../../classes/field-plugin-
 })
 export class AddonModDataFieldUrlComponent extends AddonModDataFieldPluginComponent implements OnInit {
 
-    control: FormControl;
     val: number;
 
-    constructor(protected fb: FormBuilder, protected domUtils: CoreDomUtilsProvider, protected textUtils: CoreTextUtilsProvider,
+    constructor(protected fb: FormBuilder) {
-            element: ElementRef) {
+        super(fb);
-        super();
     }
 
     /**
@@ -50,5 +46,7 @@ export class AddonModDataFieldUrlComponent extends AddonModDataFieldPluginCompon
         if (this.mode == 'edit' && this.value) {
             this.val = this.value.content;
         }
+
+        this.addControl('f_' + this.field.id, this.val);
     }
 }

src/addon/mod/data/pages/search/search.html

@@ -0,0 +1,55 @@
+<ion-header>
+    <ion-navbar>
+        <ion-title>{{ 'addon.mod_data.search' | translate }}</ion-title>
+        <ion-buttons end>
+            <button ion-button icon-only (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+                <ion-icon name="close"></ion-icon>
+            </button>
+        </ion-buttons>
+    </ion-navbar>
+</ion-header>
+<ion-content>
+    <div class="fixed-content core-tabs-bar">
+        <a [attr.aria-selected]="!search.searchingAdvanced" (click)="toggleAdvanced()">{{ 'addon.mod_data.search' | translate}}</a>
+        <a [attr.aria-selected]="search.searchingAdvanced" (click)="toggleAdvanced()">{{ 'addon.mod_data.advancedsearch' | translate }}</a>
+    </div>
+    <form (ngSubmit)="searchEntries()" [formGroup]="searchForm">
+        <ion-list no-margin>
+            <ion-item [hidden]="search.searchingAdvanced">
+                <ion-input type="text" placeholder="{{ 'addon.mod_data.search' | translate}}" [(ngModel)]="search.text" name="text" formControlName="text"></ion-input>
+            </ion-item>
+            <ion-item text-wrap>
+                <ion-label>{{ 'core.sortby' | translate }}</ion-label>
+                <ion-select interface="popover" name="sortBy" formControlName="sortBy">
+                    <optgroup *ngIf="fieldsArray.length" label="{{ 'addon.mod_data.fields' | translate }}">
+                        <ion-option *ngFor="let field of fieldsArray" [value]="field.id">{{field.name}}</ion-option>
+                    </optgroup>
+                    <optgroup label="{{ 'addon.mod_data.other' | translate }}">
+                        <ion-option value="0">{{ 'addon.mod_data.timeadded' | translate }}</ion-option>
+                        <ion-option value="-4">{{ 'addon.mod_data.timemodified' | translate }}</ion-option>
+                        <ion-option value="-1">{{ 'addon.mod_data.authorfirstname' | translate }}</ion-option>
+                        <ion-option value="-2">{{ 'addon.mod_data.authorlastname' | translate }}</ion-option>
+                        <ion-option value="-3" *ngIf="data.approval">{{ 'addon.mod_data.approved' | translate }}</ion-option>
+                    </optgroup>
+                </ion-select>
+            </ion-item>
+            <ion-list radio-group [(ngModel)]="search.sortDirection" name="sortDirection" formControlName="sortDirection">
+                <ion-item>
+                    <ion-label>{{ 'addon.mod_data.ascending' | translate }}</ion-label>
+                    <ion-radio value="ASC"></ion-radio>
+                </ion-item>
+                <ion-item>
+                    <ion-label>{{ 'addon.mod_data.descending' | translate }}</ion-label>
+                    <ion-radio value="DESC"></ion-radio>
+                </ion-item>
+            </ion-list>
+            <div padding [hidden]="!advancedSearch || !search.searchingAdvanced" class="addon-data-advanced-search">
+                <core-compile-html [text]="advancedSearch" [jsData]="jsData" [extraImports]="extraImports"></core-compile-html>
+            </div>
+        </ion-list>
+        <button ion-button block margin type="submit" icon-start>
+            <ion-icon name="search"></ion-icon>
+            {{ 'addon.mod_data.search' | translate }}
+        </button>
+    </form>
+</ion-content>

src/addon/mod/data/pages/search/search.module.ts

@@ -0,0 +1,35 @@
+// (C) Copyright 2015 Martin Dougiamas
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { TranslateModule } from '@ngx-translate/core';
+import { CoreDirectivesModule } from '@directives/directives.module';
+import { AddonModDataComponentsModule } from '../../components/components.module';
+import { AddonModDataSearchPage } from './search';
+import { CoreCompileHtmlComponentModule } from '@core/compile/components/compile-html/compile-html.module';
+
+@NgModule({
+    declarations: [
+        AddonModDataSearchPage,
+    ],
+    imports: [
+        CoreDirectivesModule,
+        AddonModDataComponentsModule,
+        CoreCompileHtmlComponentModule,
+        IonicPageModule.forChild(AddonModDataSearchPage),
+        TranslateModule.forChild()
+    ],
+})
+export class AddonModDataSearchPageModule {}

src/addon/mod/data/pages/search/search.scss

@@ -0,0 +1,57 @@
+page-addon-mod-data-search {
+    form {
+        background-color: $list-background-color;
+    }
+
+    table {
+        width: 100%;
+    }
+    td {
+        vertical-align: top;
+    }
+
+    .addon-data-advanced-search {
+        background-color: $list-background-color;
+
+        @if ($text-input-md-show-focus-highlight) {
+            .input-md input:focus {
+                @include md-input-highlight($text-input-md-highlight-color);
+            }
+        }
+
+        .input-md input {
+            @include padding-horizontal(null, ($item-md-padding-end / 2));
+            border-bottom: 1px solid $list-md-border-color;
+            &:focus {
+                @include md-input-highlight($text-input-md-highlight-color);
+            }
+        }
+
+        .input-ios input {
+            @include padding-horizontal(null, $item-ios-padding-end / 2);
+            @include safe-area-padding-horizontal(null, $item-ios-padding-end / 2);
+            border-bottom: $hairlines-width solid $list-ios-border-color;
+            &:focus {
+                @include ios-input-highlight($text-input-ios-highlight-color);
+            }
+        }
+
+        .input-wp input {
+            @include padding-horizontal(null, ($item-wp-padding-end / 2));
+            border-bottom: 1px solid $list-wp-border-color;
+            &:focus {
+                border-color: $text-input-wp-highlight-color;
+            }
+        }
+
+        ion-select {
+            width: 100%;
+            left: 0;
+            max-width: none;
+        }
+
+        .core-item-has-rich-text-editor {
+            margin-right: 1px;
+        }
+    }
+}

src/addon/mod/data/pages/search/search.ts

@@ -0,0 +1,189 @@
+// (C) Copyright 2015 Martin Dougiamas
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Component } from '@angular/core';
+import { IonicPage, NavParams, ViewController } from 'ionic-angular';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { CoreUtilsProvider } from '@providers/utils/utils';
+import { CoreDomUtilsProvider } from '@providers/utils/dom';
+import { AddonModDataComponentsModule } from '../../components/components.module';
+import { AddonModDataFieldsDelegate } from '../../providers/fields-delegate';
+
+/**
+ * Page that displays the search modal.
+ */
+@IonicPage({ segment: 'addon-mod-data-search' })
+@Component({
+    selector: 'page-addon-mod-data-search',
+    templateUrl: 'search.html',
+})
+export class AddonModDataSearchPage {
+    search: any;
+    fields: any;
+    data: any;
+    advancedSearch: any;
+    extraImports = [AddonModDataComponentsModule];
+    searchForm: FormGroup;
+    jsData: any;
+    fieldsArray: any;
+
+    constructor(params: NavParams, private viewCtrl: ViewController, fb: FormBuilder, protected utils: CoreUtilsProvider,
+            protected domUtils: CoreDomUtilsProvider, protected fieldsDelegate: AddonModDataFieldsDelegate) {
+        this.search = params.get('search');
+        this.fields = params.get('fields');
+        this.data = params.get('data');
+
+        const advanced = {};
+        this.search.advanced.forEach((field) => {
+            advanced[field.name] = field.value ? JSON.parse(field.value) : '';
+        });
+        this.search.advanced = advanced;
+
+        this.searchForm = fb.group({
+            text: [this.search.text],
+            sortBy: [this.search.sortBy],
+            sortDirection: [this.search.sortDirection],
+            firstname: [this.search.advanced['firstname'] || ''],
+            lastname: [this.search.advanced['lastname'] || '']
+        });
+
+        this.fieldsArray = this.utils.objectToArray(this.fields);
+        this.advancedSearch = this.renderAdvancedSearchFields();
+    }
+
+    /**
+     * Displays Advanced Search Fields.
+     *
+     * @return {string}         Generated HTML.
+     */
+    protected renderAdvancedSearchFields(): string {
+        if (!this.data.asearchtemplate) {
+            return '';
+        }
+
+        this.jsData = {
+            fields: this.fields,
+            form: this.searchForm,
+            search: this.search.advanced
+        };
+
+        let template = this.data.asearchtemplate,
+            replace, render;
+
+        // Replace the fields found on template.
+        this.fieldsArray.forEach((field) => {
+            replace = '[[' + field.name + ']]';
+            replace = replace.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
+            replace = new RegExp(replace, 'gi');
+
+            // Replace field by a generic directive.
+            render = '<addon-mod-data-field-plugin mode="search" [field]="fields[' + field.id +
+                ']" [form]="form" [search]="search"></addon-mod-data-field-plugin>';
+            template = template.replace(replace, render);
+        });
+
+        // Not pluginable other search elements.
+        // Replace firstname field by the text input.
+        replace = new RegExp('##firstname##', 'gi');
+        render = '<span [formGroup]="form"><ion-input type="text" name="firstname" \
+        [placeholder]="\'addon.mod_data.authorfirstname\' | translate" formControlName="firstname"></ion-input></span>';
+        template = template.replace(replace, render);
+
+        // Replace lastname field by the text input.
+        replace = new RegExp('##lastname##', 'gi');
+        render = '<span [formGroup]="form"><ion-input type="text" name="lastname" \
+        [placeholder]="\'addon.mod_data.authorlastname\' | translate" formControlName="lastname"></ion-input></span>';
+        template = template.replace(replace, render);
+
+        return template;
+    }
+
+    /**
+     * Retrieve the entered data in search in a form.
+     *
+     * @param {any} searchedData Array with the entered form values.
+     * @return {any[]}          Array with the answers.
+     */
+    getSearchDataFromForm(searchedData: any): any[] {
+        const advancedSearch = [];
+
+        // Filter and translate fields to each field plugin.
+        this.fieldsArray.forEach((field) => {
+            const fieldData = this.fieldsDelegate.getFieldSearchData(field, searchedData);
+
+            if (fieldData) {
+                fieldData.forEach((data) => {
+                    data.value = JSON.stringify(data.value);
+                    // WS wants values in Json format.
+                    advancedSearch.push(data);
+                });
+            }
+        });
+
+        // Not pluginable other search elements.
+        if (searchedData['firstname']) {
+            // WS wants values in Json format.
+            advancedSearch.push({
+                name: 'firstname',
+                value: JSON.stringify(searchedData['firstname'])
+            });
+        }
+
+        if (searchedData['lastname']) {
+            // WS wants values in Json format.
+            advancedSearch.push({
+                name: 'lastname',
+                value: JSON.stringify(searchedData['lastname'])
+            });
+        }
+
+        return advancedSearch;
+    }
+
+    /**
+     * Close modal.
+     *
+     * @param {any} [data] Data to return to the page.
+     */
+    closeModal(data?: any): void {
+        this.viewCtrl.dismiss(data);
+    }
+
+    /**
+     * Toggles between advanced to normal search.
+     */
+    toggleAdvanced(): void {
+        this.search.searchingAdvanced = !this.search.searchingAdvanced;
+    }
+
+    /**
+     * Done editing.
+     */
+    searchEntries(): void {
+        const searchedData = this.searchForm.value;
+
+        if (this.search.searchingAdvanced) {
+            this.search.advanced = this.getSearchDataFromForm(searchedData);
+            this.search.searching = this.search.advanced.length > 0;
+        } else {
+            this.search.text = searchedData.text;
+            this.search.searching = this.search.text.length > 0;
+        }
+
+        this.search.sortBy = searchedData.sortBy;
+        this.search.sortDirection = searchedData.sortDirection;
+
+        this.closeModal(this.search);
+    }
+}

src/addon/mod/data/providers/helper.ts

@@ -92,46 +92,6 @@ export class AddonModDataHelperProvider {
         });
     }
 
-    /**
-     * Displays Advanced Search Fields.
-     *
-     * @param {string} template Template HMTL.
-     * @param {any[]}  fields   Fields that defines every content in the entry.
-     * @return {string}         Generated HTML.
-     */
-    displayAdvancedSearchFields(template: string, fields: any[]): string {
-        if (!template) {
-            return '';
-        }
-
-        let replace;
-
-        // Replace the fields found on template.
-        fields.forEach((field) => {
-            replace = '[[' + field.name + ']]';
-            replace = replace.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
-            replace = new RegExp(replace, 'gi');
-
-            // Replace field by a generic directive.
-            const render = '<addon-mod-data-field-plugin mode="search" [field]="fields[' + field.id +
-                ']"></addon-mod-data-field-plugin>';
-            template = template.replace(replace, render);
-        });
-
-        // Not pluginable other search elements.
-        // Replace firstname field by the text input.
-        replace = new RegExp('##fn##', 'gi');
-        let render = '<input type="text" name="firstname" placeholder="{{ \'addon.mod_data.authorfirstname\' | translate }}">';
-        template = template.replace(replace, render);
-
-        // Replace lastname field by the text input.
-        replace = new RegExp('##ln##', 'gi');
-        render = '<input type="text" name="lastname" placeholder="{{ \'addon.mod_data.authorlastname\' | translate }}">';
-        template = template.replace(replace, render);
-
-        return template;
-    }
-
     /**
      * Displays fields for being shown.
      *
@@ -215,55 +175,6 @@ export class AddonModDataHelperProvider {
         };
     }
 
-    /**
-     * Retrieve the entered data in search in a form.
-     * We don't use ng-model because it doesn't detect changes done by JavaScript.
-     *
-     * @param  {any}   form     Form (DOM element).
-     * @param  {any[]} fields   Fields that defines every content in the entry.
-     * @return {any[]}          Array with the answers.
-     */
-    getSearchDataFromForm(form: any, fields: any[]): any[] {
-        if (!form || !form.elements) {
-            return [];
-        }
-
-        const searchedData = this.domUtils.getDataFromForm(form);
-
-        // Filter and translate fields to each field plugin.
-        const advancedSearch = [];
-        fields.forEach((field) => {
-            const fieldData = this.fieldsDelegate.getFieldSearchData(field, searchedData);
-
-            if (fieldData) {
-                fieldData.forEach((data) => {
-                    data.value = JSON.stringify(data.value);
-                    // WS wants values in Json format.
-                    advancedSearch.push(data);
-                });
-            }
-        });
-
-        // Not pluginable other search elements.
-        if (searchedData['firstname']) {
-            // WS wants values in Json format.
-            advancedSearch.push({
-                name: 'firstname',
-                value: JSON.stringify(searchedData['firstname'])
-            });
-        }
-
-        if (searchedData['lastname']) {
-            // WS wants values in Json format.
-            advancedSearch.push({
-                name: 'lastname',
-                value: JSON.stringify(searchedData['lastname'])
-            });
-        }
-
-        return advancedSearch;
-    }
-
     /**
      * Get a list of stored attachment files for a new entry. See $mmaModDataHelper#storeFiles.
      *

src/app/app.scss

@@ -171,6 +171,10 @@ ion-avatar ion-img, ion-avatar img {
   font-style: italic;
 }
 
+ion-datetime {
+  position: relative;
+}
+
 /** Format Text */
 core-format-text[maxHeight], *[core-format-text][maxHeight],
 core-format-text[ng-reflect-max-height], *[core-format-text][ng-reflect-max-height] {

src/components/tabs/tabs.scss

@@ -1,5 +1,4 @@
-core-tabs {
+.core-tabs-bar {
-    .core-tabs-bar {
     left: 0;
     position: relative;
     z-index: $z-index-toolbar;
@@ -21,8 +20,40 @@ core-tabs {
             border-bottom: 2px solid $core-top-tabs-color-active !important;
         }
     }
-    }
+}
 
+.md .core-tabs-bar > a {
+    // @extend .tabs-md .tab-button;
+    min-height: $tabs-md-tab-min-height;
+
+    font-weight: $tabs-md-tab-font-weight;
+    color: $tabs-md-tab-text-color;
+}
+
+.ios .core-tabs-bar > a {
+    // @extend .tabs-ios .tab-button;
+    max-width: $tabs-ios-tab-max-width;
+    min-height: $tabs-ios-tab-min-height;
+
+    font-size: $tabs-ios-tab-font-size;
+    font-weight: $tabs-ios-tab-font-weight;
+    color: $tabs-ios-tab-text-color;
+}
+
+.wp .core-tabs-bar > a {
+    //@extend .tabs-wp .tab-button;
+    @include border-radius(0);
+
+    min-height: $tabs-wp-tab-min-height;
+
+    border-bottom: $tabs-wp-tab-border;
+    font-size: $tabs-wp-tab-font-size;
+    font-weight: $tabs-wp-tab-font-weight;
+    color: $tabs-wp-tab-color;
+    box-shadow: none;
+}
+
+core-tabs {
     .core-tabs-content-container {
         height: 100%;
 
@@ -47,7 +78,7 @@ core-tabs {
         }
     }
 
-    core-tab {
+    core-tab, .core-tab {
         display: none;
         height: 100%;
         position: relative;
@@ -71,8 +102,7 @@ core-tabs {
     overflow: hidden !important;
 }
 
-.ios core-tabs {
+.ios .core-tabs-bar {
-    .core-tabs-bar {
     -webkit-box-pack: center;
     -webkit-justify-content: center;
     -ms-flex-pack: center;
@@ -80,13 +110,10 @@ core-tabs {
     > a {
         font-size: 1.6rem;
     }
-    }
 }
 
-.md core-tabs {
+.md .core-tabs-bar::after {
-    .core-tabs-bar::after {
     @extend .header-md::after;
-    }
 }
 
 .ios, .md, .wp {