thanks for the help, I bind the function with widget map, but is it dynamic or static binding.
when I am trying to access any of the varibales inside yourMethodName of the ts file, then it is showing undefined.
consoling any of the variables inside yourMethodName of app.ts file gives undefined.
export class CalendarComponent extends BaseComponent implements AfterViewInit {
@ViewChild(BryntumCalendarComponent)
bryntumCalendarComponent: BryntumCalendarComponent;
private calendar: Calendar;
private eventStore: EventStore;
calendarConfig = config;
events: Array<CalendarEventModel>;
allEvents : Array<CalendarEventModel>;
assignments: Array<AssignmentModel>;
resources: Array<CalendarResouce>;
authUserEmail: string;
meetingsData: Array<MeetingsDto> = [];
attachmentList: any = [];
routeQueryParamsSubscription: Subscription;
dialogRef: MatDialogRef<DialogCalendarEvent>;
newMeetingDialogRef: MatDialogRef<any>;
filterByOptions ={
'Subject':'name',
'Chair':'pm',
}
filterBy = 'Subject';
filterText;
updateLoading = this._updateLoading.bind(this);
meetingType: Array<CalendarResouce> = [
{
id: ResourceIds.ALL_CALENDAR_ENTRIES_RESOURCE_ID,
name: 'All Calendar entries',
eventColor: '#7498BF',
},
{
id: 6,
name: 'Analyst/Consultant Meeting',
eventColor: '#8A8E2B',
},
{
id: 1,
name: 'Company Visit',
eventColor: '#958BBF',
},
{
id: 2,
name: 'Conference',
eventColor: '#C67A9E',
},
{
id: 3,
name: 'Group',
eventColor: '#7C9D7C',
},
{
id: 4,
name: 'One on One',
eventColor: '#DBAA5A',
},
{
id: 5,
name: 'Other',
eventColor: '#AA5051',
},
{
id: ResourceIds.UNDEFINED_RESOURCE_ID,
name: 'Undefined',
eventColor: '#AAAAAA',
},
{
id: ResourceIds.MY_MEETINGS_ID,
name: 'My Meetings',
eventColor: '#6871C1',
},
];
isLoading = true;
constructor(
public router: Router,
private route: ActivatedRoute,
private ngStore: Store,
private authService: AuthService,
private meetingsService: MeetingsService,
public dialog: MatDialog,
public zone: NgZone
) {
super();
}
_updateLoading(loading: boolean): void {
this.zone.run(() => {
this.isLoading = loading;
});
}
onFilterByChange(event){
this.filterBy = event.value;
this.filterText = '';
}
onFilterTextChange(event){
let sub = event.value.toLowerCase();
//all these
console.log(this.allEvents);
console.log(this.filterByOptions);
console.log(this.filterBy);
this.events = this.allEvents.filter(item => item[this.filterByOptions[this.filterBy]]
.toLowerCase()
.startsWith(sub.slice(0, Math.max(item[this.filterByOptions[this.filterBy]].length - 1, 1)))
);
}
ngAfterViewInit(): void {
this.route.queryParams.subscribe((params) => {
if (params.eventId) {
this.dialog.open(DialogCalendarEvent, {
minWidth: '50vw',
maxHeight: '85vh',
position: {
top: '5.5rem',
},
data: {
event: params.eventId,
},
});
} else if (params.createNewMeeting) {
this.addNewMeeting();
}
});
this.authUserEmail = this.authService.getEmail();
const params = {
starts: dateFormat(moment().startOf('week').toDate()),
ends: dateFormat(moment().endOf('week').toDate()),
limit: undefined,
offset: 0,
};
this.updateLoading(true);
this.meetingsService.getMeetings(params).subscribe((data) => {
this.meetingsData = data;
this.parseData();
setTimeout(() => {
this.updateLoading(false);
});
});
}
parseData(): void {
this.allEvents = this.parseEvents();
this.events = [...this.allEvents];
this.resources = this.meetingType;
this.assignments = this.parseAssignments();
this.calendar = this.bryntumCalendarComponent.instance;
this.calendar.widgetMap['filterBy'].on('change', this.onFilterByChange);
this.calendar.widgetMap['filterText'].on('change', this.onFilterTextChange);
this.eventStore = this.calendar.eventStore;
this.calendar.project.assignmentStore.data = this.assignments;
this.calendar.features.drag.disabled = true;
}
parseEvents(): Array<CalendarEventModel> {
const events = [];
this.meetingsData.forEach((item) => {
const obj = {
id: item.id,
startDate: item.starts,
date: getShortMonthFormattedDate(new Date(item.starts)),
startTime: moment(item.starts).format('hh:mm a'),
endTime: moment(item.ends).format('hh:mm a'),
endDate: item.ends,
name: item.subject,
meetingTypeId: item.meetingTypeId !== 0 ? item.meetingTypeId : 7,
pm: item.pm,
analyst: item.analyst,
createdBy: item.createdBy,
location: item.location,
company: item.company,
sector: item.sector,
};
events.push(obj);
});
return events;
}
parseAssignments(): Array<AssignmentModel> {
const events = [...this.events];
const existedMeetingIds = new Set<number>();
this.meetingsData.forEach((item) => {
const obj = {
meetingTypeId:
item.meetingTypeId !== 0
? item.meetingTypeId
: ResourceIds.UNDEFINED_RESOURCE_ID,
};
existedMeetingIds.add(obj.meetingTypeId);
});
const assignments = [];
let idCounter = 1;
[...existedMeetingIds].forEach((eventId) => {
events.forEach((data) => {
if (data.meetingTypeId === eventId) {
const assign = {
id: idCounter,
eventId: data.id,
resourceId: data.meetingTypeId,
};
assignments.push(assign);
idCounter++;
//adding assignment for All calendar entries
const allRecord = {
id: idCounter,
eventId: data.id,
resourceId: ResourceIds.ALL_CALENDAR_ENTRIES_RESOURCE_ID,
};
assignments.push(allRecord);
idCounter++;
//adding my meetings
const includedEmails = new Set<string>();
includedEmails.add(data.pm);
includedEmails.add(data.createdBy);
data.analyst?.split(',').forEach((element) => {
element.trim() !== '' ? includedEmails.add(element.trim()) : null;
});
if (includedEmails.has(this.authUserEmail)) {
const myMeetingsRecord = {
id: idCounter,
eventId: data.id,
resourceId: ResourceIds.MY_MEETINGS_ID,
};
assignments.push(myMeetingsRecord);
idCounter++;
}
}
});
});
return assignments;
}
getMeetingsData(params: GetMeetingsDto) {
this.updateLoading(true);
this.meetingsService.getMeetings(params).subscribe((data) => {
this.meetingsData = data;
this.parseData();
setTimeout(() => {
this.updateLoading(false);
});
});
}