more refinements.

butterflyjzf · Jun 16, 2016 · aafa2ac · aafa2ac
1 parent 2eeecb3
commit aafa2ac
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 18 deletions.
diff --git a/frontend/src/metabase/query_builder/actions.js b/frontend/src/metabase/query_builder/actions.js
@@ -418,7 +418,7 @@ export const setQuery = createThunkAction(SET_QUERY, (dataset_query) => {
 
                     // create new vars
                     newVariables.forEach(function (paramName) {
-                        parameters.push({id: Utils.uuid(), target: ["VAR", paramName], label: paramName, type: null});
+                        parameters.push({id: Utils.uuid(), name: paramName, target: ["VAR", paramName], label: paramName, type: null});
                     });
                 }
 

diff --git a/frontend/src/metabase/query_builder/parameters/ParameterEditorParam.jsx b/frontend/src/metabase/query_builder/parameters/ParameterEditorParam.jsx
@@ -1,8 +1,10 @@
 /* eslint "react/prop-types": "warn" */
 import React, { Component, PropTypes } from "react";
 
+import ParameterTypePicker from "./ParameterTypePicker.jsx";
 import Icon from "metabase/components/Icon.jsx";
 import Input from "metabase/components/Input.jsx";
+import PopoverWithTrigger from "metabase/components/PopoverWithTrigger.jsx";
 import Select from "metabase/components/Select.jsx";
 import { PARAMETER_OPTIONS } from "metabase/meta/Dashboard";
 import _ from "underscore";
@@ -32,34 +34,46 @@ export default class ParameterEditorParam extends Component {
     render() {
         const { parameter } = this.props;
 
-        //let { options } = _.findWhere(PARAMETER_OPTIONS, { id: section });
-
         return (
-            <div className="pb2 border-bottom border-dark">
+            <div className="pb2 mb2 border-bottom border-dark">
                 <h3 className="pb1">{parameter.name}</h3>
 
                 <div className="pb2">
                     <h5 className="pb1 text-normal">Label</h5>
-                    <input type="text" defaultValue={parameter.label} className="Input full" onBlur={(e) => this.setParameterAttribute("label", e.target.value)} />
+                    <input
+                        type="text"
+                        defaultValue={parameter.label}
+                        className="p1 text-bold text-grey-4 bordered border-med rounded full"
+                        onKeyUp={(e) => {
+                            if (e.keyCode === 13) {
+                                e.target.blur();
+                            }
+                        }}
+                        onBlur={(e) => this.setParameterAttribute("label", e.target.value)}
+                    />
                 </div>
 
                 <div>
-
                     <h5 className="pb1 text-normal">Type</h5>
-                    <ParameterTypeSelect 
-                        options={PARAMETER_OPTIONS} 
-                        selectedValue={parameter.type || "id"} 
-                        onChange={(opt) => this.setParameterAttribute("type", opt.type)}
-                    />
+                    <PopoverWithTrigger
+                        ref="popover"
+                        triggerElement={
+                            <input
+                                type="text"
+                                value={parameter.type ? _.findWhere(PARAMETER_OPTIONS, { type: parameter.type }).name : "Pick a type..."}
+                                className="p1 text-bold text-grey-4 bordered border-med rounded full cursor-pointer"
+                            />
+                        }
+                    >
+                        <ParameterTypePicker
+                            onChange={(opt) => {
+                                this.setParameterAttribute("type", opt.type);
+                                this.refs.popover.close();
+                            }}
+                        />
+                    </PopoverWithTrigger>
                 </div>
             </div>
         );
     }
 }
-
-const ParameterTypeSelect = ({ options, selectedValue, onChange }) =>
-    <label className="Select mt1">
-        <select className="Select" defaultValue={selectedValue} onChange={(e) => onChange(_.findWhere(options, {type: e.target.value}))}>
-            {options.map(opt => <option key={opt.type} value={opt.type}>{opt.name}</option>)}
-        </select>
-    </label>
diff --git a/frontend/src/metabase/query_builder/parameters/ParameterTypePicker.jsx b/frontend/src/metabase/query_builder/parameters/ParameterTypePicker.jsx
@@ -0,0 +1,71 @@
+/* @flow */
+import React, { Component, PropTypes } from "react";
+
+import { PARAMETER_SECTIONS } from "metabase/meta/Dashboard";
+import type { ParameterOption } from "metabase/meta/types/Dashboard";
+
+import _ from "underscore";
+
+export default class ParameterTypePicker extends Component {
+    props: {
+        onChange: (option: ParameterOption) => {}
+    };
+    state: {
+        section?: string
+    };
+
+    constructor(props: any, context: any) {
+        super(props, context);
+        this.state = {};
+    }
+
+    render() {
+        const { section } = this.state;
+        const { onChange } = this.props;
+        if (section == null) {
+            return <ParameterOptionsSectionsPane sections={PARAMETER_SECTIONS} onSelectSection={(section) => {
+                let { options } = _.findWhere(PARAMETER_SECTIONS, { id: section.id });
+                if (options.length === 1) {
+                    onChange(options[0]);
+                } else {
+                    this.setState({ section: section.id });
+                }
+            }} />
+        } else {
+            let { options } = _.findWhere(PARAMETER_SECTIONS, { id: section });
+            return <ParameterOptionsPane options={options} onSelectOption={(option) => { onChange(option); } }/>
+        }
+    }
+}
+
+const ParameterOptionsSection = ({ section, onClick }) =>
+    <li onClick={onClick} className="p1 px2 cursor-pointer brand-hover">
+        <div className="text-brand text-bold">{section.name}</div>
+        <div>{section.description}</div>
+    </li>
+
+const ParameterOptionsSectionsPane = ({ sections, onSelectSection }) =>
+    <div className="pb2">
+        <h3 className="p2">What do you want to filter?</h3>
+        <ul>
+            { sections.map(section =>
+                <ParameterOptionsSection section={section} onClick={() => onSelectSection(section) }/>
+            )}
+        </ul>
+    </div>
+
+const ParameterOptionItem = ({ option, onClick }) =>
+    <li onClick={onClick} className="p1 px2 cursor-pointer brand-hover">
+        <div className="text-brand text-bold">{option.name}</div>
+        <div>{option.description}</div>
+    </li>
+
+const ParameterOptionsPane = ({ options, onSelectOption }) =>
+    <div className="pb2">
+        <h3 className="p2">What kind of filter?</h3>
+        <ul>
+            { options.map(option =>
+                <ParameterOptionItem option={option} onClick={() => onSelectOption(option)} />
+            )}
+        </ul>
+    </div>
diff --git a/frontend/src/metabase/query_builder/parameters/ParameterValuePicker.jsx b/frontend/src/metabase/query_builder/parameters/ParameterValuePicker.jsx
@@ -31,6 +31,7 @@ export default class ParameterValuePicker extends Component {
 
     determinePickerComponent(type, numValues) {
         switch(type) {
+            case null:                return UnknownWidget;
             case "date/month-year":   return DateMonthYearWidget;
             case "date/quarter-year": return DateQuarterYearWidget;
             case "date/range":        return DateRangeWidget;
@@ -107,3 +108,7 @@ export default class ParameterValuePicker extends Component {
         );
     }
 }
+
+const UnknownWidget = () =>
+    <input type="text" value="No type chosen" disabled={true} />
+UnknownWidget.noPopover = true;