Skip to content

Commit

Permalink
Add Transfers of Care Popover
Browse files Browse the repository at this point in the history
  • Loading branch information
@ahoncharov
ahoncharov committed Jan 25, 2018
1 parent 357cff3 commit 882eb4c
Show file tree
Hide file tree
Showing 4 changed files with 169 additions and 81 deletions.
54 changes: 54 additions & 0 deletions src/components/pages/TransfersOfCare/transfers-of-care-components/TransfersOfCarePopover.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import React, { PureComponent } from 'react';
import PropTypes from "prop-types";
import classNames from 'classnames';

import { valuesNames, valuesLabels, typesOptions } from '../forms.config';
import { connect } from "react-redux";
import Spinner from '../../../ui-elements/Spinner/Spinner';

import { bindActionCreators } from "redux";
import {fetchPatientReferralsRequest} from "../../Referrals/ducks/fetch-patient-referrals.duck";

import {patientDiagnosesSelector} from "../../ProblemsDiagnosis/selectors";

import _ from "lodash/fp";
import {getDDMMMYYYY} from "../../../../utils/time-helpers.utils";

// const mapDispatchToProps = dispatch => ({
// actions: bindActionCreators({
// fetchPatientReferralsRequest,
// }, dispatch) });
//
// @connect(patientDiagnosesSelector, mapDispatchToProps)
export default class TransfersOfCarePopover extends PureComponent {
static propTypes = {
record: PropTypes.object,
};

state = {};

componentWillReceiveProps(nextProps) {

}

render() {
// const { isSubmit, input: { value } } = this.props;
// const { } = this.state;
// console.log(typesRecords);
// console.log('records', records);
const title = 'It\'s me - Popover!';

return (
<div className="record-popover" style={{display: 'block'}}>
<div className="record-popover-header">
<div className="record-popover-title">{title}</div>
</div>

<div className="record-popover-body">
<div className="record-popover-content">
</div>
</div>
</div>
)
}
}
171 changes: 104 additions & 67 deletions ...mponents/pages/TransfersOfCare/transfers-of-care-components/TransfersOfCareRecordsEdit.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
import React, { PureComponent } from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import _ from "lodash/fp";
import classNames from 'classnames';
import {getDDMMMYYYY} from "../../../../utils/time-helpers.utils";

import SelectFormGroup from '../../../form-fields/SelectFormGroup';
import TransfersOfCarePopover from './TransfersOfCarePopover';
import Spinner from '../../../ui-elements/Spinner/Spinner';
import { valuesNames, valuesLabels, typesOptions } from '../forms.config';
import { connect } from "react-redux";
import Spinner from '../../../ui-elements/Spinner/Spinner';

import { bindActionCreators } from "redux";
// import PropTypes from "prop-types";
import {fetchPatientReferralsRequest} from "../../Referrals/ducks/fetch-patient-referrals.duck";
import {fetchPatientVitalsRequest} from "../../Vitals/ducks/fetch-patient-vitals.duck";
import {fetchPatientEventsRequest} from "../../Events/ducks/fetch-patient-events.duck";
Expand All @@ -19,8 +21,8 @@ import {patientMedicationsSelector} from "../../Medications/selectors";
import {patientVitalsSelector} from "../../Vitals/selectors";
import {patientEventsSelector} from "../../Events/selectors";
import {patientReferralsSelector} from "../../Referrals/selectors";
import _ from "lodash/fp";
import {getDDMMMYYYY} from "../../../../utils/time-helpers.utils";

const PREFIX_POPOVER_ID = 'toc-popover-';

const mapDispatchToProps = dispatch => ({
actions: bindActionCreators({
Expand All @@ -38,6 +40,13 @@ const mapDispatchToProps = dispatch => ({
@connect(patientVitalsSelector)
export default class TransfersOfCareRecordsEdit extends PureComponent {
state = {
typeRecords: '',
indexOfSelectedRecord: '',
indexOfTypeEvents: '',
waitingDataOf: '',
isRecordsLoading: false,
indexOfOpenedPopover: null,

typesRecords: {
diagnosis: {
title: 'Problems / Diagnosis',
Expand Down Expand Up @@ -80,14 +89,20 @@ export default class TransfersOfCareRecordsEdit extends PureComponent {
records: null,
},
},

typeRecords: '',
indexOfSelectedRecord: '',
indexOfTypeEvents: '',
waitingDataOf: '',
isRecordsLoading: false,
};

componentWillMount() {
window.addEventListener('resize', this.handleClosePopover);
window.addEventListener('orientationchange', this.handleClosePopover);
document.addEventListener('click', this.handleDocumentClick);
}

componentWillUnmount() {
window.removeEventListener('resize', this.handleClosePopover);
window.removeEventListener('orientationchange', this.handleClosePopover);
document.removeEventListener('click', this.handleDocumentClick);
}

componentWillReceiveProps(nextProps) {
const { waitingDataOf } = this.state;
if (nextProps[waitingDataOf]) {
Expand Down Expand Up @@ -250,6 +265,7 @@ export default class TransfersOfCareRecordsEdit extends PureComponent {
newRecords.splice(index, 1);

onChange(newRecords);
this.handleTogglePopover(null);
};

// Functionality of Drag and Drop
Expand All @@ -260,27 +276,44 @@ export default class TransfersOfCareRecordsEdit extends PureComponent {

return result;
};

onDragStart = () => {
this.handleTogglePopover(null);
};
onDragEnd = result => {
// dropped outside the list
if(!result.destination) { return }
const { input: { onChange, value } } = this.props;
const newRecords = this.reorder(value, result.source.index, result.destination.index);
this.handleTogglePopover(null);
onChange(newRecords);
};

getItemStyle = (isDragging, draggableStyle) => ({
opacity: isDragging ? 0.5 : 1,
...draggableStyle
});

// Functionality of Popover
handleTogglePopover = (index) => {
this.setState({indexOfOpenedPopover: this.state.indexOfOpenedPopover !== index ? index : null})
};
handleClosePopover = () => {
this.handleTogglePopover(null);
};
handleDocumentClick = (ev) => {
const target = ev.target;
const popoverWrapper = target.closest('.record-popover-wrapper');

if (!popoverWrapper) {
this.handleTogglePopover(null);
}
};


render() {
const { isSubmit, input: { value } } = this.props;
const { isSubmit, input: { value }, match } = this.props;
const records = value;
const { typesRecords, typeRecords, indexOfSelectedRecord, isRecordsLoading,
indexOfTypeEvents } = this.state;
// console.log(typesRecords);
// console.log('records', records);
const { typesRecords, typeRecords, indexOfSelectedRecord,
isRecordsLoading, indexOfTypeEvents, indexOfOpenedPopover } = this.state;

return (
<div>
Expand Down Expand Up @@ -346,65 +379,69 @@ export default class TransfersOfCareRecordsEdit extends PureComponent {
}

{ records && records.length ?
<DragDropContext onDragEnd={this.onDragEnd}>
<DragDropContext onDragStart={this.onDragStart} onDragEnd={this.onDragEnd}>
<Droppable droppableId="droppable">
{(provided, snapshot) => (
{(provided) => (
<div className="panel-body-inner-table"
ref={provided.innerRef} >
<div className="form-group">
<div className="record-popover-wrapper">
<div className="table table-striped table-hover table-bordered rwd-table table-fixedcol table-no-cursor table-transferOfCare">
<div className='table__head'>
<div className="table__row">
<div className="table__col">{valuesLabels.RECORDS_NAME}</div>
<div className="table__col table__col-type">{valuesLabels.RECORDS_TYPE}</div>
<div className="table__col table__col-date">{valuesLabels.RECORDS_DATE}</div>
<div className="table__col table__col-source">{valuesLabels.RECORDS_SOURCE}</div>
<div className="table__col table__col-control" />
</div>
<div className="table table-striped table-hover table-bordered rwd-table table-fixedcol table-transferOfCare">
<div className='table__head'>
<div className="table__row">
<div className="table__col">{valuesLabels.RECORDS_NAME}</div>
<div className="table__col table__col-type">{valuesLabels.RECORDS_TYPE}</div>
<div className="table__col table__col-date">{valuesLabels.RECORDS_DATE}</div>
<div className="table__col table__col-source">{valuesLabels.RECORDS_SOURCE}</div>
<div className="table__col table__col-control" />
</div>
<div className="table__body">
{ records.map((record, index) =>
<Draggable
key={`record-${index}`}
draggableId={`record-${index}`}
index={index}
>
{(provided, snapshot) => (
<div className="table__row-holder">
<div className="table__row"
ref={provided.innerRef}
{...provided.draggableProps}
style={this.getItemStyle(
snapshot.isDragging,
provided.draggableProps.style
)}
>
<div className="table__col dnd-handle-wrapper"
data-th={valuesLabels.RECORDS_NAME}>
<div className="dnd-handle" {...provided.dragHandleProps}>
<i className="fa fa-bars" />
</div>
<span>{record[valuesNames.RECORDS_NAME]}</span>
</div>
<div className="table__col table__col-type" data-th={valuesLabels.RECORDS_TYPE}><span>{record[valuesNames.RECORDS_TYPE]}</span></div>
<div className="table__col table__col-date" data-th={valuesLabels.RECORDS_DATE}><span>{record[valuesNames.RECORDS_DATE]}</span></div>
<div className="table__col table__col-source" data-th={valuesLabels.RECORDS_SOURCE}><span>{record[valuesNames.RECORDS_SOURCE]}</span></div>
<div className="table__col table__col-control table-transferOfCare__control" data-th="">
<div
className="btn btn-smaller btn-danger btn-icon-normal"
onClick={() => {this.removeRecord(index);}}
><i className="btn-icon fa fa-times" /></div>
</div>
<div className="table__body">
{ records.map((record, index) =>
<Draggable
key={`record-${index}`}
draggableId={`record-${index}`}
index={index}
>
{(provided, snapshot) => (
<div className="table__row-holder record-popover-wrapper">
<div className="table__row"
ref={provided.innerRef}
{...provided.draggableProps}
style={this.getItemStyle(
snapshot.isDragging,
provided.draggableProps.style
)}
onClick={() => {this.handleTogglePopover(index)}}
>
<div className="table__col dnd-handle-wrapper"
data-th={valuesLabels.RECORDS_NAME}>
<div className="dnd-handle" {...provided.dragHandleProps}>
<i className="fa fa-bars" />
</div>
<span>{record[valuesNames.RECORDS_NAME]}</span>
</div>
<div className="table__col table__col-type" data-th={valuesLabels.RECORDS_TYPE}><span>{record[valuesNames.RECORDS_TYPE]}</span></div>
<div className="table__col table__col-date" data-th={valuesLabels.RECORDS_DATE}><span>{record[valuesNames.RECORDS_DATE]}</span></div>
<div className="table__col table__col-source" data-th={valuesLabels.RECORDS_SOURCE}><span>{record[valuesNames.RECORDS_SOURCE]}</span></div>
<div className="table__col table__col-control table-transferOfCare__control" data-th="">
<div
className="btn btn-smaller btn-danger btn-icon-normal"
onClick={() => {this.removeRecord(index);}}
><i className="btn-icon fa fa-times" /></div>
</div>
{provided.placeholder}
</div>
)}
</Draggable>)}
{provided.placeholder}
</div>
{provided.placeholder}
{index === indexOfOpenedPopover ?
<TransfersOfCarePopover
id={`${PREFIX_POPOVER_ID}${index}`}
record={record}
match={match}
/> : null}
</div>
)}
</Draggable>)}
{provided.placeholder}
</div>
{/*<transfer-of-care-popover-component></transfer-of-care-popover-component>*/}
</div>
</div>
</div>
Expand Down
13 changes: 6 additions & 7 deletions src/styles/components/_table-div.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,24 +42,23 @@
}
.table-striped.table-hover {
background-color: map-get($colored-table, 'background');
&.table__col {
&.table__body {
.table__row {
&:hover td[data-table-hover] {
&:hover .table__col[data-table-hover] {
background-color: map-get($colored-table, 'row-background-hover');
}
&.hovered td[data-table-hover] {
&.hovered .table__col[data-table-hover] {
background-color: map-get($colored-table, 'row-background-hover');
}
}
}
}
.table__col[ng-click] { cursor: pointer; }

.is-not-touch-device .table-hover > .table__body > .table__row[ng-click]:hover > .table__col,
.is-not-touch-device .table-hover > .table__body > .table__row:hover > .table__col[ng-click],
.is-not-touch-device .table-hover > .table__body > .table__row[ng-click]:hover,
.is-not-touch-device .table-hover > .table__body > .table__row.hovered {
.is-not-touch-device .table-hover > .table__body .table__row:hover > .table__col,
.is-not-touch-device .table-hover > .table__body .table__row.hovered {
background-color: map-get($colored-table, 'row-background-hover');
cursor: pointer;
}

.table-bordered {
Expand Down
12 changes: 5 additions & 7 deletions src/styles/themes/theme-source/components/_table-div.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,21 +22,19 @@
}
.table-striped.table-hover {
background-color: map-get($colored-table, 'background');
&.table__col {
&.table__body {
.table__row {
&:hover td[data-table-hover] {
&:hover .table__col[data-table-hover] {
background-color: map-get($colored-table, 'row-background-hover');
}
&.hovered td[data-table-hover] {
&.hovered .table__col[data-table-hover] {
background-color: map-get($colored-table, 'row-background-hover');
}
}
}
}
.is-not-touch-device .table-hover > .table__body > .table__row[ng-click]:hover > .table__col,
.is-not-touch-device .table-hover > .table__body > .table__row:hover > .table__col[ng-click],
.is-not-touch-device .table-hover > .table__body > .table__row[ng-click]:hover,
.is-not-touch-device .table-hover > .table__body > .table__row.hovered {
.is-not-touch-device .table-hover > .table__body .table__row:hover > .table__col,
.is-not-touch-device .table-hover > .table__body .table__row.hovered {
background-color: map-get($colored-table, 'row-background-hover');
}

Expand Down

0 comments on commit 882eb4c

Please sign in to comment.