Smart view routing

Feature(s) impacted

Please describe in this mandatory section the feature(s) that will be discussed in this topic.

  • Smart Views: Calendars routing

Observed behaviour

Please describe in this mandatory section the current behaviour you observe.

  • When clicking an event on the smart calendar, FA reports that the route does not exist.

Expected behaviour

Please describe in this mandatory section the behaviour you are expecting.

  • When clicking the calendar event, the user will be redirected to a the details page of the record.

Context

Please provide in this mandatory section, the relevant information about your configuration:

As mentioned, I am creating a calendar smart view. When the user clicks on an event they should ideally be routed to the details tab of that recorded event.
However, following the FA demo as well as another example the routing doesn’t exist.
I would greatly appreciate if someone could help me solve this routing issue.

Here is a snippet of the route I am currently using

  eventClick: function(eventData, jsEvent, view) {
    that
      .get('router')
         .transitionTo(
            'rendering.data.collection.list.view-edit.details',
             that.get('collection.id'),
             eventData.event.id,
           );
  },

Below I have included the entire code of the file for more context

'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, jsEvent, view) {
                          that
                            .get('router')
                            .transitionTo(
                              'rendering.data.collection.list.view-edit.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) {
      const firstName = holiday.get('forest-homeSupportWorker.forest-firstname')
      const lastName = holiday.get('forest-homeSupportWorker.forest-lastname')
      const event = {
        id: holiday.get('id'),
        title: `Time off: ${firstName} ${lastName}`,
        start: holiday.get('forest-startDate'),
        end: holiday.get('forest-endDate')
      };
      
      calendar.addEvent(event);
    });
  }.observes('loaded', 'records.[]'),
});

If you need more information please let me know
Thanks in advance!!

Hi @Talha :wave: if I am not mistaken the route inside transition should be

'project.rendering.data.collection.list.view-edit.details'

Can you confirm that it works like this? And I would request a change in the documentation.

EDIT:
According to the documentation the transitionTo of enventClick contain 'project' can you give me the link of the documentation you watched please? :pray:

1 Like

Hi Arnaud,

Thanks for getting back to me. That’s my mistake, I was using a third party example which didn’t have project at the beginning and for whatever reason it didn’t occur to me to put that in when I was looking at the docs :sweat_smile:.

Apologies :’)