From 31e882df332abdc3861fec6be357c278df3bf73c Mon Sep 17 00:00:00 2001
From: parkera <parkera>
Date: Tue, 8 Mar 2016 13:41:42 +0000
Subject: [PATCH] 3024 : Preliminary basic layout
SVN: 35839
---
.../1/as/webapps/eln-lims/html/css/style.css | 13 +-
.../webapps/eln-lims/html/js/util/FormUtil.js | 58 +++++++--
.../AdvancedSearchController.js | 27 ++++
.../AdvancedSearch/AdvancedSearchModel.js | 19 +++
.../AdvancedSearch/AdvancedSearchView.js | 121 ++++++++++++++++++
5 files changed, 229 insertions(+), 9 deletions(-)
create mode 100644 plasmid/source/core-plugins/eln-lims/1/as/webapps/eln-lims/html/js/views/AdvancedSearch/AdvancedSearchController.js
create mode 100644 plasmid/source/core-plugins/eln-lims/1/as/webapps/eln-lims/html/js/views/AdvancedSearch/AdvancedSearchModel.js
create mode 100644 plasmid/source/core-plugins/eln-lims/1/as/webapps/eln-lims/html/js/views/AdvancedSearch/AdvancedSearchView.js
diff --git a/plasmid/source/core-plugins/eln-lims/1/as/webapps/eln-lims/html/css/style.css b/plasmid/source/core-plugins/eln-lims/1/as/webapps/eln-lims/html/css/style.css
index 880159ae724..2656e63b677 100644
--- a/plasmid/source/core-plugins/eln-lims/1/as/webapps/eln-lims/html/css/style.css
+++ b/plasmid/source/core-plugins/eln-lims/1/as/webapps/eln-lims/html/css/style.css
@@ -66,7 +66,18 @@ h1, h2, legend {
padding: 8px 12px 6px 14px !important;
}
*/
-
+
+/*
+ * Inline Form
+ */
+.form-inline > .form-group {
+ margin-right: 10px;
+}
+
+.form-inline > .form-group > label {
+ margin-right: 5px;
+}
+
/*
* Login Screen
*/
diff --git a/plasmid/source/core-plugins/eln-lims/1/as/webapps/eln-lims/html/js/util/FormUtil.js b/plasmid/source/core-plugins/eln-lims/1/as/webapps/eln-lims/html/js/util/FormUtil.js
index 27ab3c94953..f741648fb14 100644
--- a/plasmid/source/core-plugins/eln-lims/1/as/webapps/eln-lims/html/js/util/FormUtil.js
+++ b/plasmid/source/core-plugins/eln-lims/1/as/webapps/eln-lims/html/js/util/FormUtil.js
@@ -284,6 +284,32 @@ var FormUtil = new function() {
return $component;
}
+ this.getEntityTypeDropdown = function() {
+
+ var $component = $("<select>", {class : 'form-control'});
+
+ $component.append($("<option>").attr('value', '').attr('selected', '').text(''));
+ $component.append($("<option>").attr('value', 'Experiment').text('Experiment'));
+ $component.append($("<option>").attr('value', 'Sample').text('Sample'));
+ $component.append($("<option>").attr('value', 'Dataset').text('Dataset'));
+
+ return $component;
+ }
+
+ this.getDropdown = function(mapVals, placeHolder) {
+
+ var $component = $("<select>", {class : 'form-control'});
+ if(placeHolder) {
+ $component.append($("<option>").attr('value', '').attr('selected', '').attr('disabled', '').text(placeHolder));
+ }
+ for(var mIdx = 0; mIdx < mapVals.length; mIdx++) {
+ $component.append($("<option>").attr('value', mapVals[mIdx].value).text(mapVals[mIdx].label));
+ }
+
+ return $component;
+ }
+
+
this.getDataSetsDropDown = function(code, dataSetTypes) {
var $component = $("<select>", { class : 'form-control ' });
$component.attr('id', code);
@@ -442,7 +468,7 @@ var FormUtil = new function() {
//
// Get Field with container to obtain a correct layout
//
- this.getFieldForComponentWithLabel = function($component, label, postComponent) {
+ this.getFieldForComponentWithLabel = function($component, label, postComponent, isInline) {
var $fieldset = $('<div>');
var $controlGroup = $('<div>', {class : 'form-group'});
@@ -455,21 +481,37 @@ var FormUtil = new function() {
if(label) {
labelText = label + requiredText + ":";
}
+ var labelColumnClass = ""
+ if(!isInline) {
+ labelColumnClass = this.labelColumnClass;
+ }
+ var $controlLabel = $('<label>', { class : 'control-label ' + labelColumnClass }).html(labelText);
- var $controlLabel = $('<label>', { class : 'control-label ' + this.labelColumnClass }).html(labelText);
- var $controls = $('<div>', { class : 'controls ' + this.controlColumnClass });
+ var controlColumnClass = ""
+ if(!isInline) {
+ controlColumnClass = this.controlColumnClass;
+ }
+ var $controls = $('<div>', { class : 'controls ' + controlColumnClass });
$controlGroup.append($controlLabel);
- $controlGroup.append($controls);
+
+ if(isInline) {
+ $controlGroup.append($component);
+ } else {
+ $controls.append($component);
+ $controlGroup.append($controls);
+ }
+
if(postComponent) {
$controlGroup.append(postComponent);
}
$fieldset.append($controlGroup);
- $controls.append($component);
-
-
- return $fieldset;
+ if(isInline) {
+ return $controlGroup;
+ } else {
+ return $fieldset;
+ }
}
this.getFieldForLabelWithText = function(label, text, id, postComponent, cssForText) {
diff --git a/plasmid/source/core-plugins/eln-lims/1/as/webapps/eln-lims/html/js/views/AdvancedSearch/AdvancedSearchController.js b/plasmid/source/core-plugins/eln-lims/1/as/webapps/eln-lims/html/js/views/AdvancedSearch/AdvancedSearchController.js
new file mode 100644
index 00000000000..697c71e8a20
--- /dev/null
+++ b/plasmid/source/core-plugins/eln-lims/1/as/webapps/eln-lims/html/js/views/AdvancedSearch/AdvancedSearchController.js
@@ -0,0 +1,27 @@
+/*
+ * Copyright 2014 ETH Zuerich, Scientific IT Services
+ *
+ * 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.
+ */
+
+function AdvancedSearchController(mainController, mode) {
+ this._mainController = mainController;
+ this._advancedSearchModel = new AdvancedSearchModel(mode);
+ this._advancedSearchView = new AdvancedSearchView(this, this._advancedSearchModel);
+
+ this.init = function($container) {
+ var _this = this;
+ _this._advancedSearchView.repaint($container);
+ }
+
+}
\ No newline at end of file
diff --git a/plasmid/source/core-plugins/eln-lims/1/as/webapps/eln-lims/html/js/views/AdvancedSearch/AdvancedSearchModel.js b/plasmid/source/core-plugins/eln-lims/1/as/webapps/eln-lims/html/js/views/AdvancedSearch/AdvancedSearchModel.js
new file mode 100644
index 00000000000..0402a5f211d
--- /dev/null
+++ b/plasmid/source/core-plugins/eln-lims/1/as/webapps/eln-lims/html/js/views/AdvancedSearch/AdvancedSearchModel.js
@@ -0,0 +1,19 @@
+/*
+ * Copyright 2014 ETH Zuerich, Scientific IT Services
+ *
+ * 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.
+ */
+
+function AdvancedSearchModel(mode) {
+ this.mode = mode;
+}
\ No newline at end of file
diff --git a/plasmid/source/core-plugins/eln-lims/1/as/webapps/eln-lims/html/js/views/AdvancedSearch/AdvancedSearchView.js b/plasmid/source/core-plugins/eln-lims/1/as/webapps/eln-lims/html/js/views/AdvancedSearch/AdvancedSearchView.js
new file mode 100644
index 00000000000..b1fb26b01c7
--- /dev/null
+++ b/plasmid/source/core-plugins/eln-lims/1/as/webapps/eln-lims/html/js/views/AdvancedSearch/AdvancedSearchView.js
@@ -0,0 +1,121 @@
+/*
+ * Copyright 2014 ETH Zuerich, Scientific IT Services
+ *
+ * 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.
+ */
+
+function AdvancedSearchView(advancedSearchController, advancedSearchModel) {
+ this._advancedSearchController = advancedSearchController;
+ this._advancedSearchModel = advancedSearchModel;
+
+ this.repaint = function($container) {
+ var _this = this;
+ $container.empty();
+
+ //Layout
+ var $formColumn = $("<form>", {
+ "class" : "form-inline",
+ 'role' : "form",
+ 'action' : 'javascript:void(0);'
+ });
+
+ //Form Layout
+ var $entityTypeDropdown = FormUtil.getEntityTypeDropdown();
+ $formColumn.append(FormUtil.getFieldForComponentWithLabel($entityTypeDropdown, "Search For", null, true));
+
+ var andOrOptions = [{value : "AND", label : "AND"}, {value : "OR", label : "OR"}];
+ var $andOrDropdownComponent = FormUtil.getDropdown(andOrOptions, "Select logical operator");
+ $formColumn.append(FormUtil.getFieldForComponentWithLabel($andOrDropdownComponent, "Using", null, true));
+
+ var $submitButton = FormUtil.getButtonWithIcon('glyphicon-search').append(" Search");
+
+ $submitButton.click(function() {
+ _this._advancedSearchController.search();
+ });
+ $formColumn.append($submitButton);
+
+ //table to select field type, name, and value
+ var $table = $("<table>", { class : "table"});
+ $thead = $("<thead>");
+ this._$tbody = $("<tbody>");
+
+ //initialize dropdowns & buttons
+ var fieldTypeOptions = [{value : "Property", label : "Property"}, {value : "Attribute", label : "Attribute"}, {value : "Parent", label : "Parent"}, {value : "Children", label : "Children"}, {value : "Space", label : "Space"}];
+ $fieldTypeDropdownComponent = FormUtil.getDropdown(fieldTypeOptions, "All");
+
+ //todo there should be ONE add button at the top! (?)
+ this._$addButton = $("<button>", { class : "btn btn-default", text: "+"});
+ this._$addButton.click(function() {
+ _this._paintInputRow();
+ });
+
+ $table
+ .append($thead)
+ .append(this._$tbody);
+
+ $thead
+ .append($("<tr>")
+ .append($("<th>").text("Field Type"))
+ .append($("<th>").text("Field Name"))
+ .append($("<th>").text("Field Value"))
+ .append($("<th>").append(this._$addButton))
+ );
+
+ this._paintInputRow();
+
+ //Triggers Layout refresh
+ $container.append($formColumn).append($table);
+
+ }
+
+ this._paintInputRow = function() {
+ var $newRow = $("<tr>");
+ $newRow.append($("<td>").append(this._getNewFieldTypeDropdownComponent()))
+ .append($("<td>").append(this._getNewFieldNameDropdownComponent()))
+ .append($("<td>").append($("<input>", { class : "form-control", type: "text"})))
+ .append($("<td>").append(this._getMinusButtonComponentForRow(this._$tbody, $newRow)));
+
+ this._$tbody.append($newRow);
+ }
+
+ //should make new objects every time. otherwise, using the same object will produce odd results!
+ //how to make an on-select event??
+ this._getNewFieldTypeDropdownComponent = function() {
+ var fieldTypeOptions = [{value : "Property", label : "Property"}, {value : "Attribute", label : "Attribute"}, {value : "Parent", label : "Parent"}, {value : "Children", label : "Children"}, {value : "Space", label : "Space"}];
+ var $fieldTypeComponent = FormUtil.getDropdown(fieldTypeOptions, "All");
+ $fieldTypeComponent.click(function() {
+ alert("selecting something! now the field name box changes...");
+ });
+ return $fieldTypeComponent;
+ }
+
+ //todo generate the names when there is something selected in the method above
+ this._getNewFieldNameDropdownComponent = function() {
+ var fieldNameOptions = [{value : "name1", label : "name1"}, {value : "name2", label : "name2"}];
+ var $fieldNameComponent = FormUtil.getDropdown(fieldNameOptions, "All");
+ return $fieldNameComponent;
+ }
+
+ this._getMinusButtonComponentForRow = function($tbody, $row) {
+ var $minusButton = $("<button>", { class : "btn btn-default", text: "-"});
+ $minusButton.click(function() {
+ if($tbody.children().length > 1) {
+ $row.remove();
+ } else {
+ Util.showError("There must be at least one row of search criteria present.");
+ }
+ });
+ return $minusButton;
+ }
+
+}
\ No newline at end of file
--
GitLab