Premium support for our pure JavaScript UI components


Post by rakshith.snps »

Hi Bryntum team,
We would like to change the position of our undo-redo widget to somewhere around here in our app.

undo-redo-c.png
undo-redo-c.png (47.38 KiB) Viewed 720 times

when I checked the document information. I found parameters such as x , y and owner variables.
we are not sure how to set the owner value as our undo and redo goes outside of the toolbar.
what value can we set for owner to achieve the result in the image.

tbar: 
[ { type: 'undoredo', 
icon: 'b-fa-undo', 
//owner: 'container', // TODO 
floating: true,
 x: 600,
 y: -145, 
 items: { transactionsCombo: null, }, }, ], });

Post by alex.l »

Hi rakshith.snps,

In case of using widget out of tbar of the Gantt, you'll need to specify project it needs to bind to by yourself, because it can't be auto-detected anymore.

Please see docs below, you can use any of these two:
https://bryntum.com/products/gantt/docs/api/Scheduler/widget/UndoRedo#config-project
https://bryntum.com/products/gantt/docs/api/Scheduler/widget/UndoRedo#config-scheduler

All the best,
Alex


Post by Animal »

A helpful hint when reading the documentation is to not show inherited members.

Widget comes with a lot of configurability, so after you get rid of that, it becomes easier. UndoRedo only has two configs and you can easily see what you have to do:

Attachments
Screenshot 2022-12-05 at 06.36.54.png
Screenshot 2022-12-05 at 06.36.54.png (399.92 KiB) Viewed 712 times

Post by rakshith.snps »

Hi Alex,
Thank you for providing some guidance,
We have added the required configs like this

tbar: [
          {
            type: 'undoredo',
            icon: 'b-fa-undo',
            scheduler: umScheduler.scheduler,
            project: umScheduler.scheduler.project,
            // //owner: 'container', // TODO
            // floating: true,
            // x: 600,
            // y: -145,
            items: {
              transactionsCombo: null,
            },
          },
        ],
      });

the scheduler keeps loading , we are not sure why . could you help us in this regard. thank you.

screenLoad.gif
screenLoad.gif (135.48 KiB) Viewed 706 times

Post by alex.l »

You need to use one of them, not both.
What's in console?
Could you please post your app here, we will debug it?

All the best,
Alex


Post by rakshith.snps »

Thanks Alex,
We did try with individual configs of project , scheduler but it did not yield results.
There are no errors on console.

Regarding sharing the app.
Apologies, I am new to posting on Bryntnum forums. Do you mean you need to access to our Salesforce scratch org where the app runs. If thats the case we would like to share it privately.

But if there is another way of how to send a runnable version could you let me know how to do it.

Thank you.


Post by alex.l »

Ok, I see. We need your full config to see how you placed the widget and scheduler, we will apply that to our salesforce demo and try to reproduce.

All the best,
Alex


Post by rakshith.snps »

Hi Alex,
Sorry could you tell me what do you mean by full config? because as per my understanding the entire configuration of scheduler pro is around 400 lines in our product.
I am not sure in what way i should provide the config in a way which is useful for bryntnum team.
Could you provide an example of what you're asking?
Do you also need data that scheduler pro uses.

sorry for my confusion. thank you


Post by alex.l »

Hi rakshith.snps,

By full config I meant the code which allows us to reproduce this problem on our side.
Right now I have no information that may help us to investigate the root cause.

I tested it with very basic setup in our undoredo demo https://bryntum.com/products/scheduler/examples/undoredo/ , here is the code I used

import '../_shared/shared.js'; // not required, our example styling etc.
import Scheduler from '../../lib/Scheduler/view/Scheduler.js';
import '../../lib/Grid/column/TreeColumn.js';
import '../../lib/Grid/column/NumberColumn.js';
import '../../lib/Grid/feature/Tree.js';
import '../../lib/Scheduler/feature/TimeRanges.js';
import '../../lib/Scheduler/feature/Dependencies.js';
import ResourceModel from '../../lib/Scheduler/model/ResourceModel.js';
import EventModel from '../../lib/Scheduler/model/EventModel.js';
import DependencyModel from '../../lib/Scheduler/model/DependencyModel.js';
import StringHelper from '../../lib/Core/helper/StringHelper.js';
import UndoRedo from '../../lib/Scheduler/widget/UndoRedo.js';

class Gate extends ResourceModel {
    static get fields() {
        return [
            'capacity'
        ];
    }
}

const scheduler = new Scheduler({
    appendTo : 'container',

features : {
    tree         : true,
    regionResize : true,
    dependencies : true
},

rowHeight : 45,
barMargin : 5,

columns : [
    {
        type  : 'tree',
        text  : 'Name',
        width : 200,
        field : 'name'
    }, {
        type  : 'number',
        text  : 'Capacity',
        width : 80,
        field : 'capacity'
    }
],

startDate          : new Date(2017, 11, 2, 8),
viewPreset         : 'hourAndDay',
enableUndoRedoKeys : true,
crudManager        : {
    autoLoad      : true,
    resourceStore : {
        modelClass : Gate
    },
    transport : {
        load : {
            url : 'data/data.json'
        }
    },
    // This config enables response validation and dumping of found errors to the browser console.
    // It's meant to be used as a development stage helper only so please set it to false for production systems.
    validateResponse : true
},

// Scheduler always has a Project instance internally, we need to configure its internal StateTrackingManager
// so that the UndoRedo widget gets customized titles in its transaction dropdown.
project : {
    stm : {
        autoRecord : true,

        getTransactionTitle(transaction) {
            const lastAction = transaction.queue[transaction.queue.length - 1];

            let { type, model } = lastAction;

            if (lastAction.modelList && lastAction.modelList.length) {
                model = lastAction.modelList[0];
            }

            let title = 'Transaction ' + this.position;

            if (type === 'UpdateAction' && model instanceof EventModel) {
                title = 'Edit flight ' + model.name;
            }
            else if (type === 'UpdateAction' && model instanceof ResourceModel) {
                title = 'Edit gate ' + model.name;
            }
            else if (type === 'RemoveAction' && model instanceof EventModel) {
                title = 'Remove flight ' + model.name;
            }
            else if (type === 'RemoveAction' && model instanceof ResourceModel) {
                title = 'Remove gate ' + model.name;
            }
            else if (type === 'AddAction' && model instanceof EventModel) {
                title = 'Add flight ' + model.name;
            }
            else if (type === 'AddAction' && model instanceof DependencyModel) {
                title = StringHelper.xss`Link ${model.fromEvent.name} -> ${model.toEvent.name}`;
            }

            return title;
        }
    }
},

eventRenderer({ eventRecord, resourceRecord, renderData }) {
    renderData.iconCls = 'b-fa b-fa-plane';

    if (resourceRecord.isLeaf) {
        renderData.eventColor = 'blue';

        return StringHelper.encodeHtml(eventRecord.name);
    }
    else {
        renderData.eventColor = 'orange';
        return '';
    }
}

// tbar : [{
//     type  : 'undoredo',
//     icon  : 'b-fa-undo',
//     items : {
//         transactionsCombo : {
//             width : 250,
//             displayValueRenderer(value, combo) {
//                 const stmPos = combo.up('panel', true).project.stm.position || 0;

//                 return stmPos + ' undo actions / ' + (this.store.count - stmPos) + ' redo actions';
//             }
//         }
//     }
// }]
});

new UndoRedo({
    appendTo : 'container',
    ref   : 'undoRedo',

items : {
    transactionsCombo : null
},
scheduler : scheduler
});

It works well. So we need more info to help you.

All the best,
Alex


Post by rakshith.snps »

Hi Alex,
Thank you for providing the above sample code .
I was able to understand what was going wrong with our code thanks to the above the code.
The issue was resolved.


Post Reply