Skip to content
This repository has been archived by the owner on Dec 13, 2020. It is now read-only.

Commit

Permalink
Work in progress - lookup #600
Browse files Browse the repository at this point in the history
  • Loading branch information
@Dunkat
Dunkat committed Apr 28, 2017
1 parent 3bdbf44 commit 83cc241
Show file tree
Hide file tree
Showing 5 changed files with 149 additions and 82 deletions.
1 change: 0 additions & 1 deletion src/actions/GenericActions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,6 @@ export function autocompleteRequest(
docType, propertyName, query, docId, tabId, rowId, entity, subentity,
subentityId, viewId
) {
console.log(entity);
return () => axios.get(
config.API_URL +
'/' + entity +
Expand Down
32 changes: 31 additions & 1 deletion src/assets/css/inputs.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -643,9 +643,39 @@ input:checked + .input-slider:before {
top: calc(100% + 1px);
}

.input-flex {
.lookup-wrapper {
display: flex;
padding: 0;
}

.raw-lookup-wrapper {
display: flex;
align-items: center;
padding: .3rem .50rem;
}

.raw-lookup-wrapper-bcg:hover {
background: $brand-pulse-effect;
}

.raw-lookup-wrapper .input-dropdown-container {
min-width: 0;
}

.lookup-wrapper .input-dropdown-container {
position: static;
}

.lookup-wrapper .input-dropdown-container .input-dropdown{
position: static;
margin: 0;
border-bottom: none;
}

.lookup-wrapper .meta-icon-down-1 {
display: none;
}

.input-field {
border: 0;
width: 100%;
Expand Down
27 changes: 21 additions & 6 deletions src/components/widget/List/List.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,8 @@ class List extends Component {
super(props);
this.state = {
list: [],
loading: false
loading: false,
selectedItem: ''
}
}

Expand All @@ -40,16 +41,30 @@ class List extends Component {
}

handleSelect = (option) => {
const {onChange} = this.props;
onChange(option);
const {onChange, lookupList, properties} = this.props;
console.log('handleSelect');
console.log(option);
console.log(option[Object.keys(option)[0]]);
if(lookupList){
onChange(properties[0].field, option);
this.setState({
selectedItem: option
});
} else {
onChange(option);
}

}

render() {
const {
rank, readonly, defaultValue, selected, align, updated, rowId,
emptyText, tabIndex, mandatory, validStatus
emptyText, tabIndex, mandatory, validStatus, lookupList
} = this.props;
const {list, loading} = this.state;
const {list, loading, selectedItem} = this.state;

console.log('defaultValue');
console.log(defaultValue);

return (
<RawList
Expand All @@ -60,7 +75,7 @@ class List extends Component {
rank={rank}
readonly={readonly}
defaultValue={defaultValue}
selected={selected}
selected={lookupList ? selectedItem : selected}
align={align}
updated={updated}
rowId={rowId}
Expand Down
134 changes: 76 additions & 58 deletions src/components/widget/Lookup/Lookup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import {
import RawLookup from './RawLookup';

import LookupList from './LookupList';
import List from '../List/List';

class Lookup extends Component {
constructor(props) {
Expand All @@ -39,17 +40,21 @@ class Lookup extends Component {
const {
rank, readonly, defaultValue, placeholder, align, isModal, updated,
filterWidget, mandatory, rowId, tabIndex, validStatus, recent, onChange,
newRecordCaption, properties, windowType, parameterName, entity, dataId
newRecordCaption, properties, windowType, parameterName, entity, dataId, tabId,
subentity, subentityId, viewId
} = this.props;

const {isInputEmpty} = this.props;

console.log('defaultValue');
console.log(defaultValue);

return (
<div
onKeyDown={this.handleKeyDown}
ref={(c) => this.dropdown = c}
className={
'input-dropdown-container input-flex input-' +
'input-dropdown-container lookup-wrapper input-' +
(rank ? rank : 'primary') +
(updated ? ' pulse-on' : ' pulse-off') +
(filterWidget ? ' input-full' : '')+
Expand All @@ -65,67 +70,80 @@ class Lookup extends Component {
>

{
properties && properties.map(item => {
console.log('asa');
properties && properties.map((item, index) => {
{
<RawLookup
newRecordCaption={newRecordCaption}
defaultValue={defaultValue}
properties={properties}
placeholder={placeholder}
readonly={readonly}
tabIndex={tabIndex}
windowType={windowType}
parameterName={parameterName}
entity={entity}
dataId={dataId}
isModal={isModal}
recent={recent}
rank={rank}
updated={updated}
filterWidget={filterWidget}
mandatory={mandatory}
validStatus={validStatus}
align={align}
onChange={onChange}
/>
if(item.source === 'lookup'){
return <RawLookup
key={index}
newRecordCaption={newRecordCaption}
defaultValue={defaultValue}
properties={properties}
placeholder={placeholder}
readonly={readonly}
tabIndex={tabIndex}
windowType={windowType}
parameterName={parameterName}
entity={entity}
dataId={dataId}
isModal={isModal}
recent={recent}
rank={rank}
updated={updated}
filterWidget={filterWidget}
mandatory={mandatory}
validStatus={validStatus}
align={align}
onChange={onChange}
item={item}
/>

} else if (item.source === 'list') {

const objectValue = getItemsByProperty(
defaultValue, 'field', item.field
)[0].value;

console.log('objectValue');
console.log(objectValue);


return <div className="raw-lookup-wrapper raw-lookup-wrapper-bcg" key={index}>
<List
dataId={dataId}
entity={entity}
windowType={windowType}
filterWidget={filterWidget}
properties={[item]}
tabId={tabId}
rowId={rowId}
subentity={subentity}
subentityId={subentityId}
viewId={viewId}
onChange={onChange}
lookupList={true}
defaultValue={objectValue[Object.keys(objectValue)[0]]}
/>
</div>
}


}
})
}

<RawLookup
newRecordCaption={newRecordCaption}
defaultValue={defaultValue}
properties={properties}
placeholder={placeholder}
readonly={readonly}
tabIndex={tabIndex}
windowType={windowType}
parameterName={parameterName}
entity={entity}
dataId={dataId}
isModal={isModal}
recent={recent}
rank={rank}
updated={updated}
filterWidget={filterWidget}
mandatory={mandatory}
validStatus={validStatus}
align={align}
onChange={onChange}
/>

{isInputEmpty ?
<div className="input-icon input-icon-lg">
<i className="meta-icon-preview" />
</div> :
<div className="input-icon input-icon-lg">
{!readonly && <i
onClick={this.handleClear}
className="meta-icon-close-alt"
/>}
</div>
}


{isInputEmpty ?
<div className="input-icon input-icon-lg raw-lookup-wrapper">
<i className="meta-icon-preview" />
</div> :
<div className="input-icon input-icon-lg raw-lookup-wrapper">
{!readonly && <i
onClick={this.handleClear}
className="meta-icon-close-alt"
/>}
</div>
}

</div>
)
Expand Down
37 changes: 21 additions & 16 deletions src/components/widget/Lookup/RawLookup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ class RawLookup extends Component {
}

componentDidMount() {
const {selected} = this.props;
const {selected, item} = this.props;

this.handleValueChanged();

Expand Down Expand Up @@ -85,6 +85,9 @@ class RawLookup extends Component {
} else {
// handling selection when main is not set or set.

console.log(mainProperty[0].field);
console.log(select);

if(property === '') {
const promise = onChange(
mainProperty[0].field, select, this.getAllDropdowns
Expand Down Expand Up @@ -248,9 +251,10 @@ class RawLookup extends Component {
handleChange = (handleChangeOnFocus) => {
const {
dispatch, recent, windowType, dataId, filterWidget, parameterName,
tabId, rowId, entity, subentity, subentityId, viewId
tabId, rowId, entity, subentity, subentityId, viewId, item
} = this.props;


const {mainProperty} = this.state;

if(this.inputSearch.value != ''){
Expand Down Expand Up @@ -402,18 +406,17 @@ class RawLookup extends Component {
}
}


render() {
const { handleAddNew, onClickOutside, disableOnClickOutside, isModal, rank, updated, filterWidget, mandatory, validStatus, align,
creatingNewDisabled, newRecordCaption, placeholder, readonly, tabIndex} = this.props;
creatingNewDisabled, newRecordCaption, placeholder, readonly, tabIndex, item} = this.props;

const {
propertiesCopy, isInputEmpty, list, query, loading, selected,
isOpen, validLocal, mainProperty
} = this.state;

return (
<div>
<div className="raw-lookup-wrapper raw-lookup-wrapper-bcg">
<div className={
'input-dropdown input-block'

Expand All @@ -422,17 +425,19 @@ class RawLookup extends Component {
'input-editable ' +
(align ? 'text-xs-' + align + ' ' : '')
}>
<input
type="text"
className="input-field js-input-field font-weight-semibold"
onChange={this.handleChange}
onFocus={this.handleFocus}
ref={(c) => this.inputSearch = c}
placeholder={placeholder}
disabled={readonly}
tabIndex={tabIndex}

/>

<input
type="text"
className="input-field js-input-field font-weight-semibold"
onChange={this.handleChange}
onFocus={this.handleFocus}
ref={(c) => this.inputSearch = c}
placeholder={placeholder}
disabled={readonly}
tabIndex={tabIndex}

/>

</div>


Expand Down

0 comments on commit 83cc241

Please sign in to comment.