Hi FA community!
Feature(s) impacted
A calendar smart view which will display data from other collections
Observed behavior
I can’t figure out how to access data from other collections from within the component file of a FA smart action
Expected behavior
To display data from other collections via the Belongsto relationship.
Context
Trying to create a smart view calendar displaying booked time off.
Template file
<div id="{{calendarId}}" class="calendar"></div>
Component file code
'use strict';
import Ember from 'ember';
import SmartViewMixin from 'client/mixins/smart-view-mixin';
let calendar = null;
export default Ember.Component.extend(SmartViewMixin, {
store: Ember.inject.service(),
conditionAfter: null,
conditionBefore: null,
loaded: false,
calendarId: null,
tooltipId: null,
loadPlugin: function() {
const that = this;
Ember.run.scheduleOnce('afterRender', this, function() {
if (this.get('viewList.recordPerPage') !== 50) {
this.set('viewList.recordPerPage', 50);
this.sendAction('updateRecordPerPage');
}
that.set('calendarId', `${this.get('element.id')}-calendar`);
that.set('tooltipId', `${this.get('element.id')}-tooltip`);
Ember.$.getScript('//unpkg.com/popper.js/dist/umd/popper.min.js', function() {
Ember.$.getScript('//unpkg.com/tooltip.js/dist/umd/tooltip.min.js', function() {
Ember.$.getScript(
'//cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.js',
function() {
Ember.$.getScript(
'//cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.js',
function() {
Ember.$.getScript(
'//cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/timegrid/main.js',
function() {
const calendarEl = document.getElementById(that.get('calendarId'));
calendar = new FullCalendar.Calendar(calendarEl, {
header: {
left: 'title',
center: '',
right: 'today prev,next dayGridMonth,timeGridWeek',
},
allDaySlot: false,
plugins: ['dayGrid', 'timeGrid'],
defaultView: 'timeGridWeek',
defaultDate: new Date(),
viewRender: function(view, element) {
const field = that.get('collection.fields').findBy('field', 'datetime');
that.sendAction('fetchRecords', { page: 1 });
},
eventRender: function(eventData) {
new Tooltip(eventData.el, {
title: eventData.event.extendedProps.description,
placement: 'top',
trigger: 'hover',
container: 'body',
});
},
eventClick: function(eventData) {
that
.get('router')
.transitionTo(
'rendering.data.collection.list.viewEdit.details',
that.get('collection.id'),
eventData.event.id,
);
},
});
calendar.render();
that.set('loaded', true);
},
);
},
);
},
);
});
});
const cssCoreLink = $('<link>');
const cssDayGridLink = $('<link>');
const cssTimegridLink = $('<link>');
$('head').append(cssCoreLink);
$('head').append(cssDayGridLink);
$('head').append(cssTimegridLink);
cssCoreLink.attr({
rel: 'stylesheet',
type: 'text/css',
href: 'https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/core/main.min.css',
});
cssDayGridLink.attr({
rel: 'stylesheet',
type: 'text/css',
href: 'https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/daygrid/main.min.css',
});
cssTimegridLink.attr({
rel: 'stylesheet',
type: 'text/css',
href: 'https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.2.0/timegrid/main.min.css',
});
});
}.on('init'),
setEvent: function() {
if (!this.get('records')) {
return;
}
this.get('records').forEach(function(holiday) {
console.log(holiday)
const attempt = holiday.get('forest-homeSupportWorker.forest-firstname')
console.log('ATTEMPT', attempt)
const event = {
id: holiday.get('id'),
title: `title`,
start: holiday.get('forest-startDate'),
end: holiday.get('forest-endDate')
};
calendar.addEvent(event);
});
}.observes('loaded', 'records.[]'),
});
Below are the models/collections being used. The first SC refers to the model the smart view is being applied to.
Related collection:
I am looking to pass the name of the homeSupportWorker as the title value to the event object but can’t seem to figure out how to access it. Console.log(holiday) returns a null or undefined value for the Belongsto relation.
Any help would be greatly appreciated!
Many thanks
