[ANGULAR] How to call functions between config.ts and x.component.ts

[Srb]

Hello Team,
I'm refactoring code and I found a little problem when organize my project as an example that you provide.
At the beginning the config is inside the component.ts and my method's are accesible but when I separate and put on config.ts the problem I have is how to call my custom method's for validations.

On Config.ts

 export const  calendarConfig : Partial<CalendarConfig> = {   
    

  //.......config.....
    features : {
        

    eventMenu    : {
        processItems : ({eventRecord, items})=>{
           if((eventRecord.data.type == "shift")){
            items.showSessionItem ={
                text : "Shift Menu Item",
                onItem({eventRecord}){
                    console.log(eventRecord)
                }
            }
           };
           if((eventRecord.data.type == "Period")){
            items.showSessionItem ={
                text : "Period Menu Item",
                onItem({eventRecord}){
                    console.log(eventRecord)
                }
            }
           };
           if((eventRecord.data.type == "Break")){
            items.showSessionItem ={
                text : "Break Menu Item",
                onItem({eventRecord}){
                    console.log(eventRecord)
                }
            }
           };
        
        },
        items : {
            editEvent:false,
            copyEvent: false,
            cutEvent: false,
            deleteEvent: false,
            duplicate : false,

            copyFromView : {
                text : '<div>Copy current view to..</div>',
                icon: 'b-fa b-fa-fw b-fa-plus-circle',
                onItem: function($event){this.copyFromView()},    <----------Method on component.ts
            },
        },
       
        
    },
    scheduleMenu : {
        items : {
            // Knocks out the predefined addEvent item
            addEvent : false,
            copyFromView : {
                text : '<div>Copy current view on..</div>',
                icon: 'b-fa b-fa-fw b-fa-plus-circle',
                onItem: function($event){this.copyFromView()},    <----------Method on component.ts
            }
        }
        
    },
    drag:{
        async validateResizeFn({eventRecord, drag}){
            console.log("validation in course");
            if(this.authorizeShiftCalendarChange(eventRecord)){   }<----------Method on component.ts
    }
},

I know these questions maybe is more related to know Angular languages and structure and not in your component logic, but I didn't found the correct way to solve, if can bring me a little help to solve it will be a great help for me.
Thanks in advance

[fabio.mazza]

Hi Srb,
could you please provide us the code or at least more info about what authorizeShiftCalendarChange and copyFromView fn do?
From what I understand so far, your validation methods are helper functions, so you can just move them in an helper class and then call them easily in your config.ts.

helpers.ts

export default class Helpers {
    static copyFromView() { return ...; }
    static authorizeShiftCalendarChange(eventRecord: EventModel) { return ...; }
}

config.ts

Import Helpers from './helpers'
....
    drag:{
        async validateResizeFn({eventRecord, drag}){
            console.log("validation in course");
            if(Helpers.authorizeShiftCalendarChange(eventRecord)){   }<----------Method on helpers.ts
    }
....

[Srb]

Hi Fabio,
Inside authorizeShiftCalendarChange it's...

 authorizeShiftCalendarChange = (record:any ):boolean=>{//startDate: Date, endDate: Date,resourceId:string,type:string, eventid?:any
        let shiftCalendarToEvaluate:any; 
           

        //If isAtTime turns true breaks the loop and returns true.
        var isAtTime:boolean=false;

       
        let store = this.calendarComponent.instance.eventStore.getEventsForResource(record.resourceId);
        if(store!=undefined){
            if(store.length>0){
                
                store.forEach((eventOp:any)=>{
                   
                    if(!isAtTime && eventOp.data.type == record.type){
                       
                            if(
                                //Presence control on the same hour at workCell 
                                record.startDate.valueOf() == eventOp.startDate.valueOf() && record.endDate.valueOf() == eventOp.endDate.valueOf() && record.eventid != eventOp.id ||
                                record.startDate.valueOf() < eventOp.startDate.valueOf() && record.endDate.valueOf() > eventOp.startDate.valueOf() && record.eventid != eventOp.id ||
                                record.startDate.valueOf() > eventOp.startDate.valueOf() && record.endDate.valueOf() < eventOp.endDate.valueOf() && record.eventid != eventOp.id ||
                                record.startDate.valueOf() < eventOp.endDate.valueOf()   && record.endDate.valueOf() > eventOp.endDate.valueOf() && record.eventid != eventOp.id ||
                                record.startDate.valueOf() < eventOp.startDate.valueOf() && record.endDate.valueOf() > eventOp.endDate.valueOf() && record.eventid != eventOp.id){
                                  
                                isAtTime=true;
                            };
                    }
                    if(record.type != 'shift'){
                        let shiftContainer = this.SC.find(sc=>sc.id==record.shiftReference)
                        if( shiftContainer.startDate >= record.startDate || shiftContainer.EndDate <= record.startDate){
                            isAtTime = true;
                        }
                    }
                })    
            }
        }
        
 console.log("Movement authorised",!isAtTime)
 return !isAtTime 
}

The thing is... I iterate across the store to know if some events of the same type match it... that's because the function can't be static.
There's some function on the component to evaluate these cases from the config?

copyFromView is getting the currentView, get his events and create custom objects to send at backend and save it.

Thank's for the help.
Sergio.

[alex.l]

Hi Sergio,

config.js is a static JS object which cannot contain such code that using app.component.js as a context of its methods. Initially we created config.js only for static configurations, such as initial configs or methods that has no dependencies outside.
To have access to methods from component.js you could try to manually apply the context for your methods after import, or define those methods in component.js file and avoid using config.js for such purposes. As you already mentioned, it's not a framework way of using methods.

[Srb]

I resolved the issue returning the code to the component.ts, but that movement was made only in order to follow your examples and reorder the code.
It's not a problem, but is a little confusing that the examples using this structure if we can't use it on angular.

Thank's

[marcio]

Hey Srb,

Thanks for the feedback, we're looking to improve our framework integration experience and we'll be working on that.