Hi,
I am new to this forum and also pretty new to MongoDB.
I’m currently switching from PHP to JavaScript so this is all a big learning experience.
Right now I am stuck on something.
I am working on a platform tool that allows people to register activities for projects. It looks like this:
The red part is already done, but the green part is where the problem lies.
I have the following document inside my ActivityCard collection:
{
"_id" : "tTuiMhh2LFMqdywgc",
"cardName" : "Diana Walls",
"activitycardType" : 20,
"startingDate" : "1987-07-01",
"remainingHours" : 20,
"activities" : [
{
"activityName" : "Cairo Daniel",
"activityTotal" : "5",
"activityEmployee" : "Repudiandae non voluptate quaerat in eaque qui enim cumque aspernatur incididunt eaque quas cumque",
"activityDate" : "2011-10-14"
},
{
"activityName" : "Chaney Jarvis",
"activityTotal" : "20",
"activityEmployee" : "Fugiat voluptates ad facilis soluta nemo",
"activityDate" : "2010-05-12"
}
],
"isArchived" : 0
}
since the activities only belong to one project, I thought it would be fine to nest the data like the example above. but I would like the print the data below the main data for the activity cards (the red part).
My activity card file where I get the data looks like this:
class ActivityCardDetails extends Component {
constructor(props) {
super(props);
document.title = 'Nieuwe strippenkaart';
this.state = {
message: ''
};
}
renderActivityCardDetails () {
return this.props.activitycards.map( activity => {
return (
<div className="medium-12 details" key={activity._id}>
<input type="hidden" ref="currentActivityCard" value={activity._id} />
<div className="medium-12 page-action">
<Link to='/strippenkaarten' className="link link-purple">
<img src="../images/icons/arrow-left.svg" alt="" />
Terug
</Link>
<Link to='/strippenkaarten' className="link link-purple">
Uren afboeken
</Link>
</div>
<div className="medium-12">
<div className="medium-3">
<div className="top">
<strong>Bedrijfsnaam</strong>
<p>Bedrijfsnaam</p>
</div>
<div className="bottom">
<strong>Locatie</strong>
<p>
Straat <br />
Postcode Plaats <br />
Land
</p>
</div>
</div>
<div className="medium-3">
<div className="top">
<strong>Product</strong>
<p>{activity.cardName}</p>
</div>
<div className="bottom">
<strong>Datum ingang</strong>
<p>{activity.startingDate}</p>
</div>
</div>
<div className="medium-3">
<div className="top">
<strong>Totale uren</strong>
<p>{activity.activitycardType} uur</p>
</div>
<div className="bottom">
<strong>Resterende uren</strong>
<p>{activity.remainingHours} uur</p>
</div>
</div>
<div className="medium-3">
<div className="top">
<strong>Actieve projecten</strong>
<p>gekoppelde projecten</p>
</div>
</div>
<div className="medium-12 progress">
<div className="progress-bar">
<label>{activity.remainingHours} uur resterend</label>
hier komt een nieuwe progress
</div>
</div>
</div>
</div>
);
});
}
renderCardDetails() {
// HERE
// in this loop I need to get the ID for the current activity card, outside the mapping function
}
render() {
return (
<div className="medium-12 activitycard-details details">
{ this.state.message ? <p className="message">{this.state.message}</p> : undefined }
<div className="list-wrapper">
<div className="list-box clear">
{this.renderActivityCardDetails()}
</div>
</div>
</div>
);
}
}
export default withTracker( (props) => {
Meteor.subscribe('activitycards');
const activitycardID = props.match.params.activitycardID;
return {
activitycards: ActivityCards.find( {
'_id': activitycardID
} ).fetch()
};
})(ActivityCardDetails);
Another question I have: In the above code I added an empty method with some comments with one of them being:
// in this loop I need to get the ID for the current activity card, outside the mapping function, I’m referencing to a one to many relations ( store the id’s for children inside the parent).
I don’t know the best way to store the id for the current activity card and get other details for it by the id. Do I need to create multiple render functions as I did above with multiple mapping functions? or is there a better way?
thanks, a lot in advance!