Our pure JavaScript Scheduler component


Post by applysia »

I'm want to add an additional Combobox to the EventEditor that references a resource (in addition to the normal ressourceCombo). This Combo need a reference to the resource store in the config of the scheduler, but i cannot references the CRUD Manger before its created. To do this, my EventModel already has an addidional field "resourceId2" How would I go about this?

My Component:

<template>
    <scheduler
      ref="scheduler"
      :config="config"
      :start-date="startDateObject"
      :end-date="endDateObject"
    />
</template>
<script>
import Scheduler from 'bryntum-vue-shared/src/Scheduler.vue';
export default {
  components: {
    Scheduler,
  },
 data() {
    return {
      config: {
        features: {
          eventEdit: {
            extraItems: {
              resourceId2: {
                type: 'combo',
                index: 2,
                store: null, // How do I get this?
                name: 'resourceId2',
                label: 'Lead',
                weight: 110,
                valueField: 'id',
                displayField: 'name',
                editable: false,
                clearable: true,
              },
            },
          },
       },
     },
   },
},

Post by alex.l »

Hi applysia,

Please check our Vue examples. So, 'drag-onto-tasks' has a grid and a scheduler that share the same store. (https://bryntum.com/examples/scheduler/vue/javascript/drag-onto-tasks/dist/index.html)
Shortly, you could create your store before the scheduler and set it to the scheduler and to the resourceId2.
It also shows how to make chained stores.

All best,
Alex

All the best,
Alex


Post by applysia »

Hi Alex,

thank you for your quick reply. Based on the example I tried the following:

<template>
    <scheduler
      ref="scheduler"
      :config="config"
      :start-date="startDateObject"
      :end-date="endDateObject"
    />
</template>
<script>
import Scheduler from 'bryntum-vue-shared/src/Scheduler.vue';

const resourceStore = new ResourceStore();

export default {
  components: {
    Scheduler,
  },
 data() {
    return {
      config: {
        features: {
          eventEdit: {
            extraItems: {
              resourceId2: {
                type: 'combo',
                index: 2,
                store: resourceStore.makeChained(() => true),
                name: 'resourceId2',
                label: 'Lead',
                weight: 110,
                valueField: 'id',
                displayField: 'name',
                editable: false,
                clearable: true,
              },
            },
          },
       },
       crudManager: {
         resourceStore: resourceStore
         ...
       }
     },
   },
},

But now I'm encountering this error:

Uncaught (in promise) TypeError: _0xf8bd1.getGraph is not a function
    at _0x439090.value (schedulerpro.module.js:81708)
    at _0x439090.value (schedulerpro.module.js:82015)
    at _0x439090.value (schedulerpro.module.js:81944)
    at schedulerpro.module.js:16965
    at Array.forEach (<anonymous>)
    at ResourceStore$1.value (schedulerpro.module.js:16964)
    at ResourceStore$1.value (schedulerpro.module.js:81824)
    at ResourceStore$1.set (schedulerpro.module.js:17828)
    at CrudManager.loadCrudStore (schedulerpro.module.js:72063)
    at CrudManager.value (schedulerpro.module.js:72089)

The resources are displayed correctly, but the events are not loaded and the Scheduler gets stuck in the "Loading"-state. I'm also using the AssignmentStore to allow events to be assigned to multiple resources. Could the be the source of the problem?


Post by alex.l »

Hi applysia,

I just tried to use resourceStore var in the example I sent the link on, and it works to me. It's hard to say what is going on here without a full runnable example. Please, check if your CrudManager's configuration is full and correct (https://bryntum.com/docs/scheduler/#Scheduler/data/CrudManager) and if you still have issues, please attach a runnable example here, we will take a look.

All best,
Alex

All the best,
Alex


Post by applysia »

Hi,

I also tried using the var in the example but it dosen't work for me :D I attached my code.
Thanks for your help.

Attachments
ResourceStoreVarExample.zip
(382.51 KiB) Downloaded 73 times

Post by pmiklashevich »

Hello,

I've checked your testcase, but it's not runnable. I got it fixed by changing how crudManager config is passed to original value:

:crudManager             = "schedulerConfig.crudManager"

There was no errors, but the way you provided ResourceStore it was not applied to the crud manager.
I did it this way:
Scheduler/examples/vue/javascript/drag-onto-tasks/src/App.vue

......
    // scheduler components
    import { AjaxStore, EventStore, ResourceStore } from 'bryntum-scheduler';
    import Task from './lib/Task.js';
    import Employee from './lib/Employee.js';
    import Grid from './components/Grid.vue';
    import Drag from './lib/Drag.js';
    import { Toast, ObjectHelper } from 'bryntum-scheduler'

// we need to import it here because it comes from the package
import 'bryntum-scheduler/scheduler.stockholm.css';

const
    equipmentStore = new AjaxStore({
        modelClass : Task,
        readUrl    : 'data/equipment.json',
        sorters    : [
            { field : 'name', ascending : true }
        ]
    }),
    eventStore = new EventStore({
        modelClass : Task
    }),
    resourceStore = new ResourceStore({
        modelClass : Employee,
    });

ObjectHelper.merge(schedulerConfig, {
    crudManager : {
        autoLoad  : true,
        eventStore,
        resourceStore,
        transport : {
            load : {
                url : 'data/data.json'
            }
        }
    }
});

// App
export default {
    name: 'app',

    // local components
    components: {
        DemoHeader,
        Scheduler,
        Grid
    }, // eo components

    // function that returns data
    data() {
        // console.log(schedulerConfig);
        return {
            schedulerConfig,
            gridConfig : {
                // Use a chained Store to avoid its filtering to interfere with Scheduler rendering
                store : equipmentStore.makeChained(() => true)
            }
        }
    }, // eo function data

    mounted() {
        const
            grid = this.$refs.grid.grid,
            schedule = this.$refs.scheduler.schedulerInstance,
            outerElement = grid.element;
        // make sure you store is applied to the scheduler
        console.log(schedule.resourceStore === resourceStore);
    ......

Also I created a new model class to make sure my store is applied:
Scheduler/examples/vue/javascript/drag-onto-tasks/src/lib/Employee.js

import { ResourceModel } from 'bryntum-scheduler';

export default class Employee extends ResourceModel {
    static get fields() {
        return [
            'mypositionfield'
        ];
    }
}

But when I tried to run the demo I got the following error. You might have seen something similar:

Снимок экрана 2020-09-29 в 19.41.49.png
Снимок экрана 2020-09-29 в 19.41.49.png (624.61 KiB) Viewed 1521 times

I also tried this demo in our 4.0 beta release and it worked there with no issues. It's quite stable now. You can download it from the CustomerZone. Let me know please if it works for you. Official release is going to be in 1-2 weeks.

Снимок экрана 2020-09-29 в 19.47.01.png
Снимок экрана 2020-09-29 в 19.47.01.png (599.31 KiB) Viewed 1521 times

Best regards,
Pavel

Pavlo Miklashevych
Sr. Frontend Developer


Post by applysia »

Hi Pavel,

thank you for your detailed investigation and response. I encountered this error while evaluating wether your product covers our use case, so I'm not a customer (yet). Would it be possible to send me the beta release, so I can further evaluate it?

Best Regards


Post by alex.l »

Hi applysia,

Here is the link to trial version: https://dev.bryntum.com/examples/beta/schedulerpro-4.0.0-beta-2-trial.zip

All best,
Alex

All the best,
Alex


Post by applysia »

Hi,

sadly the beta dosen't work for me... I replicated your code in the drag onto tasks example of the beta. Please see the attached code and image. This is really important for my use case, so I hope you can assist me further or suggest another solution without the store.

Best Regards

Attachments
SchedulerResourceStore.zip
(1.07 MiB) Downloaded 72 times
errors.png
errors.png (811.22 KiB) Viewed 1507 times

Post by pmiklashevich »

Hello! I checked the trial build and was able to reproduce exactly the same error. And then I realized that you're evaluating SchedulerPro! This is the key! Yesterday I checked the code in simple Scheduler. And it worked. In SchedulerPro we have 2 folders with demos:

  • examples - to show how to create a scheduler pro;
  • examples-scheduler which is a copy of Scheduler/examples - to show how to create a simple scheduler based on SchedulerPro package;

So I applied exactly the same code to the 'SchedulerPro/examples-scheduler/vue/javascript/drag-onto-tasks/src/App.vue' and got the same error you posted at the beginning TypeError: project.getGraph is not a function.

When you import { ResourceStore } from 'bryntum-schedulerpro' you import https://www.bryntum.com/docs/scheduler-pro/#SchedulerPro/data/ResourceStore which is supposed to be used in conjunction with ProjectModel and Scheduling Engine. When classes have the same name in both products with use prefixes. For example https://www.bryntum.com/docs/scheduler-pro/#Scheduler/data/ResourceStore is named SchedulerResourceStore in SchedulerPro ('bryntum-schedulerpro').

So to fix the code you just need to import correct class from the package:

    // scheduler components
    import { AjaxStore, SchedulerResourceStore } from 'bryntum-schedulerpro'; // Add SchedulerResourceStore import
    import Task from './lib/Task.js';
    import Grid from './components/Grid.vue';
    import Drag from './lib/Drag.js';
    import { Toast, ObjectHelper } from 'bryntum-schedulerpro' // Add ObjectHelper import

// Create store
const resourceStore = new SchedulerResourceStore();

// Apply store to CrudManager
ObjectHelper.merge(schedulerConfig, {
    crudManager : {
        resourceStore
    }
});

How I know what is used: Scheduler or SchedulerPro. I can check the wrappers.
In case of 'SchedulerPro/examples-scheduler/vue/javascript/drag-onto-tasks' demo this wrapper is used: 'SchedulerPro/examples-scheduler/vue/javascript/_shared/src/Scheduler.vue'. In the wrapper I can see:

import { Scheduler } from 'bryntum-schedulerpro';

For example in scheduler pro vue demo 'SchedulerPro/examples/frameworks/vue/javascript/resource-histogram' the wrapper is 'SchedulerPro/examples/frameworks/npm/vue/schedulerpro/src/SchedulerPro.vue'. In the wrapper I can see that SchedulerPro is imported:

import { SchedulerPro } from 'bryntum-schedulerpro';

I predict your next question will be how to use ResourceStore with SchedulerPro. ProjectModel plays the role of CrudManager.
SchedulerPro/examples/frameworks/vue/javascript/resource-histogram/src/App.vue

import {
  schedulerConfig,
  histogramConfig,
  toolbarConfig
} from './components/config.js';

import { ProjectModel, ObjectHelper, ResourceStore } from "bryntum-schedulerpro";

const resourceStore = new ResourceStore();

const project = (window.project = new ProjectModel({
  resourceStore,
  transport : {
    load : {
      url : 'data/data.json'
    }
  },
  autoLoad  : true
}));

// Apply project to schedulerConfig
ObjectHelper.merge(schedulerConfig, {
  project
});
// Apply project to histogramConfig
ObjectHelper.merge(histogramConfig, {
  project
});

Then compile the demo and check the result

cd SchedulerPro/examples/frameworks/vue/javascript/resource-histogram
npm install
npm run serve

I hope this will help you to continue evaluating our product. We will update the docs to make the class naming clear. I would recommend to stick to the 4.0 beta. Though online docs might have some differences, but you can always ask here and we are glad to help!

Best regards,
Pavel

Pavlo Miklashevych
Sr. Frontend Developer


Post Reply