Hİ,
I am trying to edit some field in event edit. I need to find the name of the resources with their id. I implemented the code as following;
resourceField: {
weight:0,
onAction(props) {
const { source : { parent : editor }, value } = props;
if (value != 102){
const resource = this.resourceStore.getById(value);
const resourceName = resource.name;
editor.widgetMap.nameField.value = resourceName;
editor.widgetMap.allDay.value = true;
}
}
},
But I am getting an error of this.resourceStore is undefined. I am sharing the all code I could not figure out why I can not reach the data in the resourceStore. Calendar works perfectly there is no error about the load or other things.
import Event from './lib/Event';
import Resource from './lib/Resource';
import { DateHelper,Calendar, StringHelper, Override, Store, DomHelper, Toast} from '@bryntum/calendar';
const sumWidths = (t, e) => t + e.getBoundingClientRect().width;
export const getCalendarConfig = (userId) => {
return {
datePicker : {
showEvents : false
},
userId: userId,
mode : 'week',
weekStartDay : 1,
crudManager : {
validateResponse: true,
phantomIdField: 'phantomId',
prepareRemoved(removed) {
return removed.map(rec => {
return { calendarId : rec.id, resourceTypeName : rec.resourceTypeName, resourceId : rec.resourceId };
});
},
listeners : {
beforeSync({pack}){
pack.events?.added?.forEach(event => {
if(event.resourceId == 102){
event.resourceTypeName = 'Notlar'
}
else {
event.resourceTypeName = 'Özel Günler'
}
}
)
},
requestFail({ response, responseText }){
if (!response) {
Toast.show({
html: `DB'ye eklenirken hata alındı.:<br> Hata mesajı :${responseText}<br>`,
color: 'b-red',
style: 'color:white',
timeout: 0
});
} else if (response.message) {
Toast.show({
html: response.message,
color: 'b-red',
style: 'color:white',
timeout: 0
});
}
},
requestDone(response){
if(response.requestType == 'sync'){
Toast.show({
html: `DB Güncellendi`,
color: 'b-green',
style: 'color:white',
//timeout: 0
});
}
}
},
resourceStore : {
modelClass : Resource
},
eventStore : {
modelClass : Event,
fields : [{
name : 'duration',
persist : false
}],
},
transport : {
load : {
credentials : 'omit',
url : 'loadurl',
headers : {
'Content-Type' : 'application/json'
},
},
sync: {
credentials : 'omit',
params : {
userId : userId
},
url: 'syncurl',
}
},
autoSync : true,
autoLoad : true,
},
sidebar : {
items : {
datePicker : {
showEvents : 'dots'
},
resourceFilter : {
selected: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,102],
store : {
groupers : [
{ field : 'resourceType', ascending : true}
],
//startGroupsCollapsed : true
},
}
}
},
eventEditFeature : {
items : {
resourceField: {
weight:0,
onAction(props) {
const { source : { parent : editor }, value } = props;
if (value != 102){
const resource = this.resourceStore.getById(value);
const resourceName = resource.name;
editor.widgetMap.nameField.value = resourceName;
editor.widgetMap.allDay.value = true;
}
}
},
nameField : {
label : '',
},
isXLRoutage : {
type : 'checkbox',
label : 'XLR Freeze',
name : 'isXLRoutage',
weight : 290,
},
isXLRMFoutage : {
type : 'checkbox',
label : 'XLRMF Freeze',
name : 'isXLRMFoutage',
weight : 290,
},
/*
resourceTypeName:{
type : 'combo',
label : 'Tip',
name : 'resourceTypeName',
items : ['Özel Günler', 'Notlar'],
weight : 290,
},
*/
recurrenceCombo: null,
editRecurrenceButton: null
}
},
/*
tbar : [
{
type : 'combo',
store : themeStore,
label : 'theme',
value : defaultTheme,
displayField : 'name',
valueField : 'value',
onAction(props) {
DomHelper.setTheme(props.value);
}
}
],
*/
/*
items : [
{
type: 'widget',
cls : 'label',
html: 'Theme: '
},
{
type: 'buttonGroup',
toggleGroup: true,
items: ['Stockholm', 'Material', 'Classic-Light','Classic-Dark','Classic'].map(name=>{
return{
id: name.toLowerCase(),
text: name,
pressed: DomHelper.themeInfo.name === name
};
}),
onAction({source : button}){
DomHelper.setTheme(button.text);
}
},
]
*/
modeDefaults : {
allDayEvents : {
//defaultEventRowCount : 8
//autoHeight : true,
expanded : true,
}
},
modes : {
day : {
eventRenderer : ({eventRecord, renderData}) => {
if(eventRecord.isXLRoutage){
if(eventRecord.isXLRMFoutage){
renderData.iconCls['b-fa b-fa-exclamation'] = 1;
return `
<div style= "line-height:3px"><p class="b-event-name">${StringHelper.encodeHtml(eventRecord.name)}</p>
<p><b>XLR ve XLRMF Freeze</b></p>
</div>`;
}else{
renderData.iconCls['b-fa b-fa-exclamation'] = 1;
return `
<div style= "line-height:3px"><p class="b-event-name">${StringHelper.encodeHtml(eventRecord.name)}</p>
<p><b>XLR Freeze</b></p>
</div>`;
}
}else if(eventRecord.isXLRMFoutage){
renderData.iconCls['b-fa b-fa-exclamation'] = 1;
return `
<div style= "line-height:3px"><p class="b-event-name">${StringHelper.encodeHtml(eventRecord.name)}</p>
<p><b>XLRMF Freeze</b></p>
</div>`;
}
},
//autoRowHeight : true
},
week : {
eventRenderer : ({eventRecord, renderData}) => {
if(eventRecord.isXLRoutage){
if(eventRecord.isXLRMFoutage){
renderData.iconCls['b-fa b-fa-exclamation'] = 1;
return `
<div style= "line-height:3px"><p class="b-event-name">${StringHelper.encodeHtml(eventRecord.name)}</p>
<p><b>XLR ve XLRMF Freeze</b></p>
</div>`;
}else{
renderData.iconCls['b-fa b-fa-exclamation'] = 1;
return `
<div style= "line-height:3px"><p class="b-event-name">${StringHelper.encodeHtml(eventRecord.name)}</p>
<p><b>XLR Freeze</b></p>
</div>`;
}
}else if(eventRecord.isXLRMFoutage){
renderData.iconCls['b-fa b-fa-exclamation'] = 1;
return `
<div style= "line-height:3px"><p class="b-event-name">${StringHelper.encodeHtml(eventRecord.name)}</p>
<p><b>XLRMF Freeze</b></p>
</div>`;
}
},
//autoRowHeight : true
},
month : {
showWeekColumn : false,
//autoRowHeight : true
/*
eventRenderer : ({eventRecord, renderData}) => {
if(eventRecord.isXLRoutage){
if(eventRecord.isXLRMFoutage){
renderData.iconCls['b-fa b-fa-exclamation'] = 1;
return `
<div style= "line-height:1px"><p class="b-event-name">${StringHelper.encodeHtml(eventRecord.name)}</p>
<p><b>XLR ve XLRMF Freeze</b></p>
</div>`;
}else{
renderData.iconCls['b-fa b-fa-exclamation'] = 1;
return `
<div style= "line-height:1px"><p class="b-event-name">${StringHelper.encodeHtml(eventRecord.name)}</p>
<p><b>XLR Freeze</b></p>
</div>`;
}
}else if(eventRecord.isXLRMFoutage){
renderData.iconCls['b-fa b-fa-exclamation'] = 1;
return `
<div style= "line-height:1px"><p class="b-event-name">${StringHelper.encodeHtml(eventRecord.name)}</p>
<p><b>XLRMF Freeze</b></p>
</div>`;
}
}
*/
},
year : {
showEvents:'dots',
/*
dayCellRenderer : ({eventRecord, cellConfig, events, date, cellData}) => {
if(cellData.resourceId = 6){
cellConfig.style.fontWeight = '700';
}
}
*/
},
list:{
range : 'day',
subGridConfigs : {
normal: {
refreshFakeScroll() {
const
me = this,
{
virtualScrollerWidth,
header,
footer,
scrollable
} = me,
{ style } = me.element,
{ style : vs } = me.virtualScrollerElement,
// Cannot use scrollWidth because its an integer and we need exact content size
totalFixedWidth = [...header.contentElement.children].reduce(sumWidths, 0);
// Use a fixed scroll width so that when grid is empty (e.g after filtering with no matches),
// it is able to it maintain its scroll-x position and magic mouse swiping
// in the grid area will produce horizontal scrolling.
// https://github.com/bryntum/support/issues/3247
scrollable.scrollWidth = totalFixedWidth;
// This style property ensures all rows expand to accommodate the visible columns
style.setProperty('--total-column-width', `${totalFixedWidth}px`);
// Scroller lays out in the same way as subgrid.
// If we are flexed, the scroller is flexed etc.
vs.width = style.width;
vs.flex = style.flex;
vs.minWidth = style.minWidth;
vs.maxWidth = style.maxWidth;
header.scrollable.syncOverflowState();
footer.scrollable.syncOverflowState();
if (!me.collapsed) {
if (me.overflowingHorizontally) {
virtualScrollerWidth.style.width = `${scrollable.scrollWidth || 0}px`;
// If *any* SubGrids have horizontal overflow, the main grid
// has to show its virtual horizontal scrollbar.
me.grid.virtualScrollers.classList.remove('b-hide-display');
}
else {
virtualScrollerWidth.style.width = 0;
}
}
}
}
},
columns : [
{ field:'name', hidden : true},
{ field:'resources', hidden : true},
{ text: 'Öncelik', field: 'priority', flex: '0 0 85px',
renderer({ record }) {
return [{
tag : 'i',
className : 'b-icon b-icon-circle',
style : `color:${record.resource?.eventColor}`
}, {
text : record.priority
}];
} },
{ text: 'Değişiklik No', field: 'changeNumber', flex: '0 0 125px',
renderer ({record}) {
return {tag : 'a', href : record.adress, text : record.changeNumber}
} },
{ text: 'Açıklama', field: 'changeDetail', flex: '0 0 300px' },
{ text: 'Değişiklik Sahibi', field: 'owner', flex: '0 0 200px' },
{ text: 'Başlangıç Zamanı', field: 'startDate', flex: '0 0 150px' },
{ text: 'Bitiş Zamanı', field: 'endDate', flex: '0 0 150px' },
{ text: 'Sahip Grup', field: 'ownerGroup', flex: '0 0 130px' },
{ text: 'Kayıt Durumu', field: 'recordStatus',flex: '0 0 130px' },
{ text: 'Süreç Durumu', field: 'processStatus',flex: '0 0 200px' },
{ text: 'Proje Adı', field: 'projectName',flex: '0 0 130px' },
{ text: 'Tip', field: 'formType',flex: '0 0 130px' },
{ text: 'Ürünler', field: 'products',flex: '0 0 130px' },
],
features : {
filterBar : {
compactMode:false,
stripe : true,
quickFind : true,
//filter :{property:'startDate', value: }
},
group : {
field : 'resourceTypeName',
}
}
},
},
features : {
weekExpander : true,
eventTooltip : {
showOn : 'click',
align : {
align : 't-b',
// Mustn't shrink because of large, graphical content
minHeight : null
},
renderer(data) {
return this.internalRenderer(data) + `<dl>
${data.eventRecord.get('changeDetail') ? `
<dt>
<i class="b-fa-solid b-fa-circle-info" ></i>
<b>Detay:</b>
</dt>
<dd>
${StringHelper.encodeHtml(data.eventRecord.changeDetail)}
</dd>
<br />
` : ''}
${data.eventRecord.get('owner') ? `
<dt>
<i class="b-fa-solid b-fa-user" ></i>
<b>Değişiklik Sahibi:</b>
</dt>
<dd>
${StringHelper.encodeHtml(data.eventRecord.owner)}
</dd>
<br />
` : ''}
${StringHelper.encodeHtml(data.eventRecord.formType) == 'XLR' ? `
<dt>
<i class="b-fa-solid b-fa-gear" ></i>
<b>Release Tipi:</b>
</dt>
<dd>
Açıksistem
</dd>
<br />
` : ''}
${StringHelper.encodeHtml(data.eventRecord.formType) == 'XLRMF' ? `
<dt>
<i class="b-fa-solid b-fa-gear" ></i>
<b>Release Tipi:</b>
</dt>
<dd>
Anasistem
</dd>
<br />
` : ''}
${data.eventRecord.get('application') ? `
<dt>
<i class="b-fa-solid b-fa-tablet-screen-button" ></i>
<b>Uygulama:</b>
</dt>
<dd>
${StringHelper.encodeHtml(data.eventRecord.application)}
</dd>
<br />
` : ''}
${data.eventRecord.get('products') ? `
<dt>
<i class="b-fa-solid b-fa-book" ></i>
<b>Paket:</b>
</dt>
<dd>
${StringHelper.encodeHtml(data.eventRecord.products)}
</dd>
<br />
` : ''}
${data.eventRecord.get('adress') ? `
<dt>
<i class="b-fa-solid b-fa-link" ></i>
<b>Link:</b>
</dt>
<dd>
<a href=
${StringHelper.encodeHtml(data.eventRecord.adress)}
>
${StringHelper.encodeHtml(data.eventRecord.adress)}
</a>
</dd>
<br />
` : ''}
${data.eventRecord.get('recordStatus') ? `
<dt>
<i class="b-fa-solid b-fa-bars-progress" ></i>
<b>Durum:</b>
</dt>
<dd>
${StringHelper.encodeHtml(data.eventRecord.recordStatus)}
</dd>
<br />
` : ''}
${data.eventRecord.get('processStatus') ? `
<dt>
<i class="b-fa-solid b-fa-bars-progress" ></i>
<b>Durum:</b>
</dt>
<dd>
${StringHelper.encodeHtml(data.eventRecord.processStatus)}
</dd>
<br />
` : ''}
${data.eventRecord.get('isXLRoutage') ? `
<dt>
<i class="b-fa-solid b-fa-snowflake" ></i>
<b>Açıksistem Yazılım Değişikliği Planlanamaz</b>
</dt>
<br />
` : ''}
${data.eventRecord.get('isXLRMFoutage') ? `
<dt>
<i class="b-fa-solid b-fa-snowflake" ></i>
<b>Anasistem Yazılım Değişikliği Planlanamaz</b>
</dt>
<br />
` : ''}
</dl>
`
}
},
},
};
}
//export { calendarConfig };
