Skip to content

Instantly share code, notes, and snippets.

@nickweavers

nickweavers/worksheet.js

Created February 22, 2010 21:50
Show Gist options
  • Save nickweavers/311558 to your computer and use it in GitHub Desktop.
Save nickweavers/311558 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
worksheet.js
( function() {
// byEvent
// -------------------------------------------------------------------------------------------------------------
// Create an array variable called eventFields holding the variable mapping used by eventStore
// -------------------------------------------------------------------------------------------------------------
var eventFields = [
{name: 'id_booking', type: 'string', mapping: 'id_booking'},
{name: 'id_booking_ref', type: 'string', mapping: 'id_booking'},
{name: 'id_event', type: 'string', mapping: 'id_event'},
{name: 'id_event_ref', type: 'string', mapping: 'id_event'},
{name: 'id_client', type: 'string', mapping: 'id_client'},
{name: 'event_date', type: 'string', mapping: 'event_date'},
{name: 'company', type: 'string', mapping: 'company'},
{name: 'invoice_number', type: 'string', mapping: 'invoice_number'},
{name: 'purchase_order_number', type: 'string', mapping: 'purchase_order_number'}
];
// -------------------------------------------------------------------------------------------------------------
// Create an object reference variable for the eventStore object
// -------------------------------------------------------------------------------------------------------------
var eventStore = new Ext.data.JsonStore({
url: 'index.php', // main joomla entry point
baseParams: {
option: 'com_opsuk-backoffice', // joomla component
view: 'worksheets', // joomla view
layout: 'eventRecords', // joomla layout
format: 'raw' // joomla format
},
totalProperty:'totalCount',
root: 'rows',
idProperty: 'id_booking',
remoteSort: true,
fields: eventFields
});
// -------------------------------------------------------------------------------------------------------------
// Create an object reference variable for the eventDetailsFieldset object
// -------------------------------------------------------------------------------------------------------------
var eventDetailsFieldset = {
xtype: 'fieldset',
labelWidth: 90,
title: 'Event details',
//defaults: { width: 230 },
defaultType: 'textfield',
/*
buttons: formButtons,
buttonAlign: 'left',
*/
height: 250,
//autoHeight: true,
bodyStyle: Ext.isIE ? 'padding: 0 0 5px 15px;' : 'padding: 10px 15px;',
items: [{
id: 'id_booking_ref',
fieldLabel: 'BookingID',
name: 'id_booking_ref',
width: 80,
disabled: true
},{
id: 'id_booking',
name: 'id_booking',
hidden: true
},{
id: 'id_event_ref',
fieldLabel: 'EventID',
name: 'id_event_ref',
width: 80,
disabled: true
},{
id: 'id_event_ref',
fieldLabel: 'EventID',
name: 'id_event_ref',
width: 80,
disabled: true,
},{
id: 'company',
fieldLabel: 'Company name',
name: 'company',
width: 230,
},{
id: 'purchase_order_number',
fieldLabel: 'PO No.',
name: 'purchase_order_number',
width: 80,
clearCls: 'x-form-field'
},{
id: 'invoice_number',
fieldLabel: 'Invoice No.',
name: 'invoice_number',
width: 80
}
]
};
// var rowModel = Ext.data.Record.create(eventFields);
// -------------------------------------------------------------------------------------------------------------
// Create an object reference variable for the eventSelector object
// -------------------------------------------------------------------------------------------------------------
var eventSelector = new Ext.grid.GridPanel({
//title: 'Edit Clients',
stripeRows: true,
//autoWidth: true,
width: 422,
height: 200,
margin: {top:5, right:10, bottom:5, left:10},
columnLines: true,
//loadmsk: true,
bbar: new Ext.PagingToolbar({
store: eventStore,
displayInfo:true,
pageSize:5
}),
clicksToEdit: 1,
store: eventStore,
columns: [ // fix up the column settings below
{header: 'BookingID', width: 60, dataIndex: 'id_booking' },
{header: 'EventID', width: 70, dataIndex: 'id_event' },
{header: 'Event Date', width: 70, dataIndex: 'event_date', sortable: true },
{header: 'Company', width: 220, dataIndex: 'company', sortable: true }
],
listeners: {
},
viewConfig: {
onLoad: Ext.emptyFn,
//forceFit:true,
listeners: {
beforerefresh: function(v) {
v.scrollTop = v.scroller.dom.scrollTop;
v.scrollHeight = v.scroller.dom.scrollHeight;
},
refresh: function(v) {
v.scroller.dom.scrollTop = v.scrollTop +
(v.scrollTop == 0 ? 0 : v.scroller.dom.scrollHeight - v.scrollHeight);
}
}
}
});
// -------------------------------------------------------------------------------------------------------------
// Create an object reference variable for the timesheetGrid object that is shown in the Timesheet tab of the
// worksheetTabPanel
// -------------------------------------------------------------------------------------------------------------
var timesheetFields = [
{name: 'id_assignment', type: 'string', mapping: 'id_assignment'},
{name: 'id_event', type: 'string', mapping: 'id_event'},
{name: 'id_personnel', type: 'string', mapping: 'id_personnel'},
{name: 'id_person', type: 'string', mapping: 'id_person'},
{name: 'first_name', type: 'string', mapping: 'first_name'},
{name: 'initials', type: 'string', mapping: 'initials'},
{name: 'last_name', type: 'string', mapping: 'last_name'},
{name: 'id_job', type: 'string', mapping: 'id_job'},
{name: 'job_title', type: 'string', mapping: 'job_title'},
{name: 'rate_1a_start', type: 'string', mapping: 'rate_1a_start'},
{name: 'rate_1a_finish', type: 'string', mapping: 'rate_1a_finish'},
{name: 'rate_2a_start', type: 'string', mapping: 'rate_2a_start'},
{name: 'rate_2a_finish', type: 'string', mapping: 'rate_2a_finish'},
{name: 'rate_b_start', type: 'string', mapping: 'rate_b_start'},
{name: 'rate_b_finish', type: 'string', mapping: 'rate_b_finish'},
{name: 'total_1a', type: 'string', mapping: 'total_1a'},
{name: 'total_2a', type: 'string', mapping: 'total_2a'},
{name: 'total_b', type: 'string', mapping: 'total_b'}
];
var timesheetStore = new Ext.data.JsonStore({
url: 'index.php',
baseParams: {
option: 'com_opsuk-backoffice',
view: 'worksheets',
layout: 'timesheetRecords',
format: 'raw'
//id_event: worksheetForm.getForm().findField('id_event').getValue(),
},
totalProperty:'totalCount',
root: 'rows',
remoteSort: true,
fields: timesheetFields
});
var rate_1a_startEditor = new Ext.form.TimeField({format:'H:i'});
var rate_1a_finishEditor = new Ext.form.TimeField({format:'H:i'});
var rate_2a_startEditor = new Ext.form.TimeField({format:'H:i'});
var rate_2a_finishEditor = new Ext.form.TimeField({format:'H:i'});
var rate_b_startEditor = new Ext.form.TimeField({format:'H:i'});
var rate_b_finishEditor = new Ext.form.TimeField({format:'H:i'});
var rowModel = Ext.data.Record.create(timesheetFields);
var timesheetGrid = new Ext.grid.EditorGridPanel({
//title: 'timesheet',
stripeRows: true,
autoWidth: true,
//width: 352,
height: 400,
margin: {top:5, right:10, bottom:5, left:10},
columnLines: true,
//loadmsk: true,
bbar: new Ext.PagingToolbar({
store: timesheetStore,
displayInfo: true,
prependButtons: true,
pageSize: 10
}),
clicksToEdit: 1,
store: timesheetStore,
columns: [ // fix up the column settings below
{header: 'AssignmentID', width: 80, dataIndex: 'id_assignment', sortable: true},
{header: 'PersonnelID', width: 80, dataIndex: 'id_personnel'},
{header: 'PersonID', width: 80, dataIndex: 'id_person', hidden: true },
{header: 'FirstName', width: 90, dataIndex: 'first_name', sortable: true },
{header: 'Initials', width: 60, dataIndex: 'initials', sortable: true},
{header: 'LastName', width: 100, dataIndex: 'last_name', sortable: true},
{header: 'JobID', width: 80, dataIndex: 'id_job', sortable: true},
{header: 'JobTitle', width: 100, dataIndex: 'job_title', sortable: true},
{header: '1a start', width: 60, dataIndex: 'rate_1a_start', sortable: true, editor : rate_1a_startEditor},
{header: '1a finish', width: 60, dataIndex: 'rate_1a_finish', sortable: true, editor : rate_1a_finishEditor},
{header: '2a start', width: 60, dataIndex: 'rate_2a_start', sortable: true, editor : rate_2a_startEditor},
{header: '2a finish', width: 60, dataIndex: 'rate_2a_finish', sortable: true, editor : rate_2a_finishEditor},
{header: 'b start', width: 60, dataIndex: 'rate_b_start', sortable: true, editor : rate_b_startEditor},
{header: 'b finish', width: 60, dataIndex: 'rate_b_finish', sortable: true, editor : rate_b_finishEditor},
{header: 'Total 1a', width: 60, dataIndex: 'total_1a', sortable: true},
{header: 'Total 2a', width: 60, dataIndex: 'total_2a', sortable: true},
{header: 'Total b', width: 60, dataIndex: 'total_b', sortable: true}
],
listeners: {
afteredit: function(e) {
var conn = new Ext.data.Connection();
conn.request({
url: 'index.php',
params: {
option: 'com_opsuk-backoffice',
view: 'worksheets',
layout: 'updateTimesheetField',
format: 'raw',
id_assignment: e.record.id, // the primary row index is id_assignment and stored in id
field: e.field,
value: e.value
},
success: function(resp, opt) {
e.record.commit();
},
failure: function(resp, opt) {
e.record.reject();
}
})
}
}
});
// -------------------------------------------------------------------------------------------------------------
// Create an object reference variable for the worksheetTabPanel object
// -------------------------------------------------------------------------------------------------------------
// This is the tab panel section for Timesheets, Wages, Expenses, Absence, Totals
var worksheetTabPanel = new Ext.TabPanel({
stateful: true,
stateID: 'worksheetTabPanel',
activeTab: 0,
plain: true,
border:false,
height: 350,
// this line is necessary for anchoring to work at
// lower level containers and for full height of tabs
anchor:'100% 100%',
// only fields from an active tab are submitted
// if the following line is not persent
deferredRender:false,
// tabs
items:[{
title:'Timesheets',
autoScroll:true,
xtype: 'panel',
anchor: '100%',
items: [ timesheetGrid ]
},{
title:'Wages',
autoScroll:true,
xtype: 'panel',
anchor: '100%'
//items: [ wagesGrid ]
},{
title:'Expenses',
autoScroll:true,
xtype: 'panel',
anchor: '100%'
//items: [ expensesGrid ]
}]
});
// -------------------------------------------------------------------------------------------------------------
// Create an object reference variable for the worksheetForm object
// -------------------------------------------------------------------------------------------------------------
var worksheetForm = new Ext.FormPanel ({
title: 'Worksheets',
closable: true,
//id: 'editPersons', // if you assgn an id manually, you can only generate a single tab
frame: true,
labelAlign: 'left',
bodyStyle: 'padding: 5px',
width: 600,
layout: 'column',
bodyStyle:'padding:20px 20px 20px 20px;',
url: 'index.php',
baseParams: {
option: 'com_opsuk-backoffice',
view: 'worksheets',
layout: 'updateClientCompanyRecord',
format: 'raw'
},
items: [{
// Fieldset in Column 1
xtype: 'fieldset',
title: 'Event selection',
columnWidth: 0.38,
layout: 'form',
anchor: '100%',
bodyStyle:'padding:20px 20px 20px 20px',
/*
tbar: [{
text: 'Add new client company',
handler: function() {
worksheetForm.getForm().reset();
}
}],
*/
items: [{
xtype: 'panel',
anchor: '100%',
items: [ eventSelector ]
}]
}, {
// Fieldset in Column 2 - Panel inside
columnWidth: 0.5,
bodyStyle:'padding: 0px 20px 0px 20px',
items: [ eventDetailsFieldset ]
}, {
// fullwidth lower fieldset containing tabPanel
xtype: 'fieldset',
title: 'Sheets',
columnWidth: 1.0,
height: 500,
anchor: '100%',
bodyStyle:'padding: 20px 20px 0px 20px',
items: [ worksheetTabPanel ]
}
]
});
eventStore.on('load', function(eventStore, records, options) {
if (records && records.length > 0) {
eventSelector.getSelectionModel().selectFirstRow();
}
});
eventStore.load({params:{start:0, limit:5}});
eventSelector.getSelectionModel().on('rowselect', function(sm, rowindex, record) {
worksheetForm.getForm().loadRecord(record);
if (record.data.id_event != '') {
timesheetStore.load({params:{start:0, limit:5, id_event: record.data.id_event}});
//personForm.getForm().findField('employee_cb').disable();
}
});
return worksheetForm; // return instantiated component
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment