Skip to content

Commit

Permalink
change json field placeholder from 'asdf' to 'bar' (close #1260) (#1261)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Anupam-dagar @shahidhk
Anupam-dagar authored and shahidhk committed Jan 28, 2019
1 parent 91c19ec commit e528445
Show file tree
Hide file tree
Showing 3 changed files with 90 additions and 44 deletions.
66 changes: 51 additions & 15 deletions console/src/components/Services/Data/TableBrowseRows/EditItem.js
View file
Expand Up @@ -6,6 +6,19 @@ import globals from '../../../../Globals';
import { modalClose } from './EditActions';
import Button from '../../Layout/Button/Button';

import {
getPlaceholder,
INTEGER,
BIGINT,
NUMERIC,
DATE,
BOOLEAN,
UUID,
JSONDTYPE,
JSONB,
TIMESTAMP,
TIMETZ,
} from '../../../../constants';
// import RichTextEditor from 'react-rte';
import { replace } from 'react-router-redux';

Expand Down Expand Up @@ -72,7 +85,7 @@ class EditItem extends Component {
// Text type
let typedInput = (
<input
placeholder="text"
placeholder={getPlaceholder(colType)}
type="text"
className={'form-control ' + styles.insertBox}
onClick={clicker}
Expand All @@ -83,10 +96,10 @@ class EditItem extends Component {
);

// Integer
if (colType === 'integer') {
if (colType === INTEGER) {
typedInput = (
<input
placeholder="integer"
placeholder={getPlaceholder(colType)}
type="text"
className={'form-control ' + styles.insertBox}
onClick={clicker}
Expand All @@ -95,10 +108,10 @@ class EditItem extends Component {
data-test={`typed-input-${i}`}
/>
);
} else if (colType === 'numeric') {
} else if (colType === BIGINT) {
typedInput = (
<input
placeholder="float"
placeholder={getPlaceholder(colType)}
type="text"
className={'form-control ' + styles.insertBox}
onClick={clicker}
Expand All @@ -107,10 +120,10 @@ class EditItem extends Component {
data-test={`typed-input-${i}`}
/>
);
} else if (colType === 'timestamp with time zone') {
} else if (colType === NUMERIC) {
typedInput = (
<input
placeholder={new Date().toISOString()}
placeholder={getPlaceholder(colType)}
type="text"
className={'form-control ' + styles.insertBox}
onClick={clicker}
Expand All @@ -119,10 +132,10 @@ class EditItem extends Component {
data-test={`typed-input-${i}`}
/>
);
} else if (colType === 'date') {
} else if (colType === TIMESTAMP) {
typedInput = (
<input
placeholder={new Date().toISOString().slice(0, 10)}
placeholder={getPlaceholder(colType)}
type="text"
className={'form-control ' + styles.insertBox}
onClick={clicker}
Expand All @@ -131,11 +144,10 @@ class EditItem extends Component {
data-test={`typed-input-${i}`}
/>
);
} else if (colType === 'timetz') {
const time = new Date().toISOString().slice(11, 19);
} else if (colType === DATE) {
typedInput = (
<input
placeholder={`${time}Z or ${time}+05:30`}
placeholder={getPlaceholder(colType)}
type="text"
className={'form-control ' + styles.insertBox}
onClick={clicker}
Expand All @@ -144,10 +156,22 @@ class EditItem extends Component {
data-test={`typed-input-${i}`}
/>
);
} else if (colType === 'json' || colType === 'jsonb') {
} else if (colType === TIMETZ) {
typedInput = (
<input
placeholder={'{"name": "foo"} or [12, "asdf"]'}
placeholder={getPlaceholder(colType)}
type="text"
className={'form-control ' + styles.insertBox}
onClick={clicker}
ref={inputRef}
defaultValue={oldItem[colName]}
data-test={`typed-input-${i}`}
/>
);
} else if (colType === JSONDTYPE || colType === JSONB) {
typedInput = (
<input
placeholder={getPlaceholder(colType)}
type="text"
className={'form-control ' + styles.insertBox}
onClick={clicker}
Expand All @@ -156,7 +180,7 @@ class EditItem extends Component {
data-test={`typed-input-${i}`}
/>
);
} else if (colType === 'boolean') {
} else if (colType === BOOLEAN) {
typedInput = (
<select
className="form-control"
Expand All @@ -173,6 +197,18 @@ class EditItem extends Component {
<option value="false">False</option>
</select>
);
} else if (colType === UUID) {
typedInput = (
<input
placeholder={getPlaceholder(colType)}
type="text"
className={'form-control ' + styles.insertBox}
onClick={clicker}
ref={inputRef}
defaultValue={oldItem[colName]}
data-test={`typed-input-${i}`}
/>
);
} else {
// everything else is text.
// find value to be shown. rich text editor vs clone
Expand Down
36 changes: 8 additions & 28 deletions console/src/components/Services/Data/TableInsertItem/InsertItem.js
View file
Expand Up @@ -5,6 +5,12 @@ import { insertItem, I_RESET } from './InsertActions';
import { ordinalColSort } from '../utils';
import { setTable } from '../DataActions';
import Button from '../../Layout/Button/Button';
import {
getPlaceholder,
BOOLEAN,
JSONB,
JSONDTYPE,
} from '../../../../constants';

class InsertItem extends Component {
constructor() {
Expand Down Expand Up @@ -109,32 +115,6 @@ class InsertItem extends Component {
type: 'text',
};

const getPlaceholder = type => {
switch (type) {
case 'integer':
return 'integer';
case 'bigint':
return 'BIG integer';
case 'numeric':
return 'float';
case 'timestamp with time zone':
return new Date().toISOString();
case 'date':
return new Date().toISOString().slice(0, 10);
case 'timetz':
const time = new Date().toISOString().slice(11, 19);
return `${time}Z or ${time}+05:30`;
case 'uuid':
return 'UUID';
case 'json':
return '{"name": "foo"} or [12, "asdf"]';
case 'jsonb':
return '{"name": "foo"} or [12, "asdf"]';
default:
return 'text';
}
};

const colType = col.data_type;
let typedInput = (
<input {...standardInputProps} placeholder={getPlaceholder(colType)} />
Expand All @@ -150,7 +130,7 @@ class InsertItem extends Component {
);
}

if (colType === 'json' || colType === 'jsonb') {
if (colType === JSONDTYPE || colType === JSONB) {
// JSON/JSONB
typedInput = (
<input
Expand All @@ -163,7 +143,7 @@ class InsertItem extends Component {
);
}

if (colType === 'boolean') {
if (colType === BOOLEAN) {
// Boolean
typedInput = (
<select
Expand Down
32 changes: 31 additions & 1 deletion console/src/constants.js
View file
Expand Up @@ -5,7 +5,37 @@ export const SERIAL = 'serial';
export const BIGINT = 'bigint';
export const BIGSERIAL = 'bigserial';
export const UUID = 'uuid';
export const JSON = 'json';
export const JSONDTYPE = 'json';
export const JSONB = 'jsonb';
export const TIMESTAMP = 'timestamp with time zone';
export const TIME = 'time with time zone';
export const NUMERIC = 'numeric';
export const DATE = 'date';
export const TIMETZ = 'timetz';
export const BOOLEAN = 'boolean';

export const getPlaceholder = type => {
switch (type) {
case 'integer':
return 'integer';
case 'bigint':
return 'BIG integer';
case 'numeric':
return 'float';
case 'timestamp with time zone':
return new Date().toISOString();
case 'date':
return new Date().toISOString().slice(0, 10);
case 'timetz':
const time = new Date().toISOString().slice(11, 19);
return `${time}Z or ${time}+05:30`;
case 'uuid':
return 'UUID';
case 'json':
return '{"name": "foo"} or [12, "bar"]';
case 'jsonb':
return '{"name": "foo"} or [12, "bar"]';
default:
return 'text';
}
};

0 comments on commit e528445

Please sign in to comment.