Skip to content
Snippets Groups Projects
Commit 26b52250 authored by Tom Robinson's avatar Tom Robinson
Browse files

Add sections to special_type selection, misc polish

parent c016ea55
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 80 additions and 49 deletions
resources/frontend_client/app/admin/metadata/components/MetadataField.react.js
+ 3
− 0
View file @ 26b52250
......@@ -48,6 +48,7 @@ export default React.createClass({
var typeSelect = (
<Select
className="TableEditor-field-type"
placeholder="Select a field type"
value={_.find(MetabaseCore.field_field_types, (type) => type.id === this.props.field.field_type)}
options={MetabaseCore.field_field_types}
onChange={this.onTypeChange}
......@@ -57,6 +58,7 @@ export default React.createClass({
var specialTypeSelect = (
<Select
className="TableEditor-field-special-type"
placeholder="Select a special type"
value={_.find(MetabaseCore.field_special_types, (type) => type.id === this.props.field.special_type)}
options={MetabaseCore.field_special_types}
onChange={this.onSpecialTypeChange}
......@@ -68,6 +70,7 @@ export default React.createClass({
targetSelect = (
<Select
className="TableEditor-field-target"
placeholder="Select a target"
value={this.props.field.target && _.find(this.props.idfields, (field) => field.id === this.props.field.target.id)}
options={this.props.idfields}
optionNameFn={(field) => field.displayName}
......
resources/frontend_client/app/admin/metadata/components/MetadataHeader.react.js
+ 3
− 3
View file @ 26b52250
......@@ -50,9 +50,9 @@ export default React.createClass({
}
}];
var tetherOptions = {
attachment: 'top left',
targetAttachment: 'bottom left',
targetOffset: '15px 0'
attachment: 'top center',
targetAttachment: 'bottom center',
targetOffset: '10px 0'
};
var triggerElement = (
<span className="text-bold cursor-pointer text-default">
......
resources/frontend_client/app/admin/metadata/components/Select.react.js
+ 18
− 12
View file @ 26b52250
......@@ -29,16 +29,24 @@ export default React.createClass({
var selectedName = this.props.value ? this.props.optionNameFn(this.props.value) : this.props.placeholder;
var triggerElement = (
<div className="flex flex-full align-center">
<div className={"flex flex-full align-center" + (!this.props.value ? " text-grey-3" : "")}>
<span>{selectedName}</span>
<Icon className="flex-align-right" name="chevrondown" width="10" height="10"/>
</div>
);
var sections = {};
this.props.options.forEach(function (option) {
var sectionName = option.section || "";
sections[sectionName] = sections[sectionName] || { title: sectionName || undefined, items: [] };
sections[sectionName].items.push(option);
});
sections = Object.keys(sections).map((sectionName) => sections[sectionName]);
var columns = [
{
selectedItem: this.props.value,
items: this.props.options,
sections: sections,
itemTitleFn: this.props.optionNameFn,
itemDescriptionFn: (item) => item.description,
itemSelectFn: (item) => {
......@@ -51,19 +59,17 @@ export default React.createClass({
var tetherOptions = {
attachment: 'top center',
targetAttachment: 'bottom center',
targetOffset: '10px 0'
targetOffset: '5px 0'
};
return (
<div className="AdminSelect flex align-center">
<PopoverWithTrigger ref="popover"
className={"PopoverBody PopoverBody--withArrow " + (this.props.className || "")}
tetherOptions={tetherOptions}
triggerElement={triggerElement}
triggerClasses={this.props.className + " flex flex-full align-center" }>
<ColumnarSelector columns={columns}/>
</PopoverWithTrigger>
</div>
<PopoverWithTrigger ref="popover"
className={"PopoverBody PopoverBody--withArrow " + (this.props.className || "")}
tetherOptions={tetherOptions}
triggerElement={triggerElement}
triggerClasses={this.props.className + " AdminSelect flex align-center" }>
<ColumnarSelector columns={columns}/>
</PopoverWithTrigger>
);
}
......
resources/frontend_client/app/admin/metadata/metadata.controllers.js
+ 1
− 2
View file @ 26b52250
......@@ -64,10 +64,9 @@ function($scope, $route, $routeParams, $location, $q, $timeout, databases, Metab
var result = yield Metabase.db_idfields({ 'dbId': $scope.databaseId }).$promise;
if (result && !result.error) {
$scope.idfields = result.map(function(field) {
field.displayName = field.table.name + " → " + field.name;
field.displayName = field.table.display_name + " → " + field.display_name;
return field;
});
console.log($scope.idfields);
} else {
console.warn(result);
}
......
resources/frontend_client/app/components/columnar_selector/columnar_selector.css
+ 7
− 2
View file @ 26b52250
......@@ -21,13 +21,18 @@
}
.ColumnarSelector-title {
color: color(var(--base-grey) shade(30%));
text-transform: uppercase;
font-size: 10px;
font-weight: 700;
padding: var(--padding-2);
padding: var(--padding-1);
padding-left: var(--padding-3);
}
.ColumnarSelector-section:first-child .ColumnarSelector-title {
padding-top: var(--padding-3);
}
.ColumnarSelector-description {
margin-top: 0.5em;
color: color(var(--base-grey) shade(30%));
......@@ -49,7 +54,7 @@
}
.ColumnarSelector-row:hover .ColumnarSelector-description {
color: rgba(255,255,255,0.25);
color: rgba(255,255,255,0.50);
}
.ColumnarSelector-row--selected {
......
resources/frontend_client/app/lib/core.js
+ 47
− 29
View file @ 26b52250
......@@ -89,68 +89,86 @@
};
this.field_special_types = [{
'id': null,
'name': 'None'
'id': 'id',
'name': 'Entity Key',
'section': 'Overall Row',
'description': 'The primary key for this table.'
}, {
'id': 'name',
'name': 'Entity Name',
'section': 'Overall Row',
'description': 'The "name" of each record. Usually a column called "name", "title", etc.'
}, {
'id': 'fk',
'name': 'Foreign Key',
'section': 'Overall Row',
'description': 'Points to another table to make a connection.'
}, {
'id': 'avatar',
'name': 'Avatar Image URL'
'name': 'Avatar Image URL',
'section': 'Common'
}, {
'id': 'category',
'name': 'Category'
'name': 'Category',
'section': 'Common'
}, {
'id': 'city',
'name': 'City'
'name': 'City',
'section': 'Common'
}, {
'id': 'country',
'name': 'Country'
'name': 'Country',
'section': 'Common'
}, {
'id': 'desc',
'name': 'Description'
}, {
'id': 'fk',
'name': 'Foreign Key'
}, {
'id': 'id',
'name': 'Entity Key'
'name': 'Description',
'section': 'Common'
}, {
'id': 'image',
'name': 'Image URL'
'name': 'Image URL',
'section': 'Common'
}, {
'id': 'json',
'name': 'Field containing JSON'
'name': 'Field containing JSON',
'section': 'Common'
}, {
'id': 'latitude',
'name': 'Latitude'
'name': 'Latitude',
'section': 'Common'
}, {
'id': 'longitude',
'name': 'Longitude'
}, {
'id': 'name',
'name': 'Entity Name'
'name': 'Longitude',
'section': 'Common'
}, {
'id': 'number',
'name': 'Number'
'name': 'Number',
'section': 'Common'
}, {
'id': 'state',
'name': 'State'
'name': 'State',
'section': 'Common'
}, {
id: 'timestamp_seconds',
name: 'UNIX Timestamp (Seconds)'
name: 'UNIX Timestamp (Seconds)',
'section': 'Common'
}, {
id: 'timestamp_milliseconds',
name: 'UNIX Timestamp (Milliseconds)'
name: 'UNIX Timestamp (Milliseconds)',
'section': 'Common'
}, {
'id': 'url',
'name': 'URL'
'name': 'URL',
'section': 'Common'
}, {
'id': 'zip_code',
'name': 'Zip Code'
'name': 'Zip Code',
'section': 'Common'
}];
this.field_field_types = [{
'id': 'info',
'name': 'Information',
'description': 'Non-numerical value that is not meant to be used'
'description': 'Non-numerical value that is not meant to be used.'
}, {
'id': 'metric',
'name': 'Metric',
......@@ -158,11 +176,11 @@
}, {
'id': 'dimension',
'name': 'Dimension',
'description': 'A high or low-cardinality numerical string value that is meant to be used as a grouping'
'description': 'A high or low-cardinality numerical string value that is meant to be used as a grouping.'
}, {
'id': 'sensitive',
'name': 'Sensitive Information',
'description': 'A Fields that should never be shown anywhere'
'description': 'A field that should never be shown anywhere.'
}];
this.boolean_types = [{
......
resources/frontend_client/app/query_builder/columnar_selector.react.js
+ 1
− 1
View file @ 26b52250
......@@ -46,7 +46,7 @@ export default React.createClass({
titleElement = <div className="ColumnarSelector-title">{title}</div>
}
return (
<section key={sectionIndex}>
<section key={sectionIndex} className="ColumnarSelector-section">
{titleElement}
<ul className="ColumnarSelector-rows">{items}</ul>
</section>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment