Skip to content
Snippets Groups Projects
Commit 119732bd authored by Rafael László's avatar Rafael László :speech_balloon:
Browse files

cleanup

parent 5c454857
No related branches found
No related tags found
No related merge requests found
......@@ -37,6 +37,7 @@ class TraineeTableRow extends Component {
};
}
// Hides and shows the Add and More popup
triggerAdd = () => this.setState({ ...this.state, showAddPopup: !this.state.showAddPopup})
triggerMore = () => this.setState({ ...this.state, showMorePopup: !this.state.showMorePopup })
......@@ -50,6 +51,7 @@ class TraineeTableRow extends Component {
<Table.Cell textAlign='center'>
{trainee.full_name}
</Table.Cell>
{/* Show and change Visitors status */}
{!this.props.edit ?
<Table.Cell textAlign='center'>
{
......@@ -62,7 +64,7 @@ class TraineeTableRow extends Component {
<Icon color='red' name='cancel' />
}
</Table.Cell>
:
:
<Table.Cell textAlign='center'>
<Dropdown
defaultValue={isVisitor ? 'Visitor' : isAbsent ? 'Absent' : 'No'}
......@@ -72,33 +74,37 @@ class TraineeTableRow extends Component {
/>
</Table.Cell>
}
{/* Notes for trainees */}
<Table.Cell>
<Grid>
<Grid.Row>
{/* Note text */}
<Grid.Column floated='left' width={8}>
{notes.length > 0 ?
<Comment>
<Comment.Content>
<Comment.Author><b>{notes[0].created_by_name}:</b></Comment.Author>
<Comment.Text style={{wordWrap: 'break-word'}}>
{notes[0].note.length > 25 ? notes[0].note.slice(0, 25).concat('...')
:
notes[0].note }
{notes[0].note.length > 25 ?
notes[0].note.slice(0, 25).concat('...')
:
notes[0].note
}
</Comment.Text>
</Comment.Content>
</Comment>
:
:
null
}
}
</Grid.Column>
{/* Note buttons */}
<Grid.Column floated='right' width={6} textAlign='right'>
{notes.length > 0 ?
<Popup
basic
<Popup basic
open={this.state.showMorePopup}
trigger={<Button icon='comment alternate outline'
onClick={this.triggerMore} />}
trigger={
<Button icon='comment alternate outline' onClick={this.triggerMore} />
}
content={notes.map((note) => {
return (
<Comment.Content>
......@@ -111,11 +117,12 @@ class TraineeTableRow extends Component {
})}
/>
:
null
null
}
<Popup
trigger={<Button icon='plus' onClick={this.triggerAdd}/>}
basic
<Popup basic
trigger={
<Button icon='plus' onClick={this.triggerAdd}/>
}
open={this.state.showAddPopup}
content={
<Form reply>
......@@ -123,7 +130,7 @@ class TraineeTableRow extends Component {
value={note.note}
onChange={e => this.props.writeNote(e)}
/>
<Button
<Button primary
onClick={() => {
this.triggerAdd()
this.props.postEventNote({
......@@ -136,10 +143,9 @@ class TraineeTableRow extends Component {
content='Megjegyzés hozzáadása'
labelPosition='left'
icon='edit'
primary
/>
</Form>
}
}
/>
</Grid.Column>
</Grid.Row>
......
......@@ -9,27 +9,32 @@ class Trainees extends Component {
this.props.getStaffEvents();
}
// Number of visited events
VisitedStatusNumber(trainee) {
return (this.props.events.filter((event) => {
return event.visitors.includes(trainee.id)
})).length;
}
// Every event with visit status in table cells
renderVisitedStatus(trainee) {
return (this.props.events.map((event) => {
if (event.visitors.includes(trainee.id)) {
return (
<Table.Cell textAlign='center'>
<Icon color='green' name='checkmark' />
</Table.Cell>);
</Table.Cell>
);
}
return (
<Table.Cell textAlign='center'>
<Icon color='red' name='cancel' />
</Table.Cell>);
</Table.Cell>
);
}));
}
// Every event rendered
renderTraineesWithEvents() {
return this.props.trainees.map((trainee) =>
{ return (
......@@ -42,57 +47,74 @@ class Trainees extends Component {
);
});
}
renderTraineesWithPoints() {
return this.props.trainees.map((trainee) =>
{ return (
<Table.Row textAlign='center'>
<Table.Cell>
{trainee.full_name}
</Table.Cell>
<Table.Cell textAlign='center'>
{`${this.VisitedStatusNumber(trainee)} / ${this.props.events.length}`}
</Table.Cell>
</Table.Row>
);
// Only visit number rendered
renderTraineesWithVisitNum() {
return this.props.trainees.map((trainee) =>{
return (
<Table.Row textAlign='center'>
<Table.Cell>
{trainee.full_name}
</Table.Cell>
<Table.Cell textAlign='center'>
{`${this.VisitedStatusNumber(trainee)} / ${this.props.events.length}`}
</Table.Cell>
</Table.Row>
);
});
}
renderTableHeader() {
return (this.props.events.map(event => (
<Table.HeaderCell textAlign='center'>
// Column for each event
renderTableHeaderEvents() {
return (this.props.events.map(event => {
return (<Table.HeaderCell textAlign='center'>
{event.name}
</Table.HeaderCell>)));
</Table.HeaderCell>
)
}));
}
render() {
return (
<Container textAlign='center'>
{/* Rendered on larger screens */}
<Responsive minWidth={600} >
<Table color='blue' unstackable celled selectable compact>
<Table.Header>
<Table.Row>
<Table.HeaderCell textAlign='center'>Képződők</Table.HeaderCell>
{ this.renderTableHeader() }
<Table.HeaderCell textAlign='center'>
Képződők
</Table.HeaderCell>
{ this.renderTableHeaderEvents() }
</Table.Row>
</Table.Header>
<Table.Body>
{this.props.trainees ? this.renderTraineesWithEvents() : 'Nincsenek képződők'}
{this.props.trainees ?
this.renderTraineesWithEvents()
:
'Nincsenek képződők'
}
</Table.Body>
</Table>
</Responsive>
{/* Rendered on mobile */}
<Responsive maxWidth={599} >
<Table color='blue' unstackable celled selectable compact>
<Table.Header>
<Table.Row>
<Table.HeaderCell textAlign='center'>Képződők</Table.HeaderCell>
<Table.HeaderCell textAlign='center'>
Képződők
</Table.HeaderCell>
<Table.HeaderCell textAlign='center'>
Részvételi arány
</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
{this.props.trainees ? this.renderTraineesWithPoints() : 'Nincsenek képződők'}
{this.props.trainees ?
this.renderTraineesWithVisitNum()
:
'Nincsenek képződők'
}
</Table.Body>
</Table>
</Responsive>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment