buildEmployeePanel.js

(
function buildEmployeePanel() {
  Ext.namespace('NS1');
  NS1.currentlySelectedEmployeeID = '';
  NS1.currentlySelectedPersonID = '';
    // editConfig
    // -------------------------------------------------------------------------------------------------------------
    // Create an array variable called employeeSelectorFields holding the variable mapping used by
    // employeeSelectorStore
    // -------------------------------------------------------------------------------------------------------------
    NS1.employeeSelectorFields = [
      {name: 'id_employee', type: 'string', mapping: 'id_employee'},
      {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: 'date_of_birth', type: 'string', mapping: 'date_of_birth'} // not displayed in selector. used for matching
    ];

    // -------------------------------------------------------------------------------------------------------------
    // Create an object reference variable for the employeeSelectorStore object
    // -------------------------------------------------------------------------------------------------------------
    NS1.employeeSelectorStore = new Ext.data.JsonStore({
      url: 'index.php',
      baseParams: {
        option: 'com_opsuk-backoffice',
        //task: 'employee_records',
        //controller: 'employees',
        view: 'employees',
        layout: 'employeeSelector',
        format: 'raw'
      },
      totalProperty:'totalCount',
      root: 'rows',
      idProperty: 'id_employee',
      remoteSort: true,
      fields: NS1.employeeSelectorFields
    });

    // -------------------------------------------------------------------------------------------------------------
    // Create an object reference variable for the employeeSelectorGrid object
    // -------------------------------------------------------------------------------------------------------------
    NS1.employeeSelectorGrid = new Ext.grid.GridPanel({
      //anchor: '100%'
      stripeRows: true
      ,width: 370
      ,height: 400
      ,margin: {top:5, right:10, bottom:5, left:10}
      ,columnLines: true
      //,autoExpandColumn: 'last_name'
      //,loadmsk: true
      ,tbar: [{
        text: 'Add new employee',
        handler: function() {
          NS1.employeeNameAndAddressForm.getForm().reset();
        }
      }]
      ,bbar: new Ext.PagingToolbar({
        store: NS1.employeeSelectorStore,
        displayInfo:true,
        pageSize:15
      })
      //,view: new Ext.grid.GridView({
      // forceFit:true
      //})
      ,store: NS1.employeeSelectorStore
      ,columns: [
        {header: 'employeeID', width: 70, dataIndex: 'id_employee'},
        {header: 'LastName', width: 120, dataIndex: 'last_name', sortable: true},
        {header: 'FirstName', width: 120, dataIndex: 'first_name', sortable: true },
        {header: 'Initials', width: 58, dataIndex: 'initials', sortable: true}
      ]
    });

 // -------------------------------------------------------------------------------------------------------------
 // Create a variable to store the currently selected id_employee value in
 // -------------------------------------------------------------------------------------------------------------
 //var id_employee;

 // -------------------------------------------------------------------------------------------------------------
 // Create an object reference variable for the employeeForm object that is shown in the Name & Address tab of
 // the employeeTabPanel
 // -------------------------------------------------------------------------------------------------------------
 // <script language=Javascript>



 NS1.selectMatchedRow = function (record) {

 if (record.data.first_name == NS1.first_name &&
 record.data.last_name == NS1.last_name &&
 record.data.initials == NS1.initials &&
 record.data.date_of_birth == NS1.date_of_birth
 ){
 // we found a match so select the row
 NS1.employeeSelectorGrid.getSelectionModel().selectRow(NS1.rowIndex);
 return true;
 }
 NS1.rowIndex++;

 };

 NS1.employeeNameAndAddressFormButtons = [
 //new Ext.Toolbar.Fill(),
 {
 text: 'Save',
 handler: function() {
 NS1.employeeNameAndAddressForm.getForm().submit({
 success: function(formObj, actionObj) {
 if (actionObj.result.success == 'false') {
 var msg = 'success = false, ' +
 'errors = ' + actionObj.result.errors.error_msg;
 Ext.MessageBox.alert({
 title:'Error',
 msg: msg,
 minWidth: msg.length,
 });
 } else {
 // reload the employeeSelectorStore
 NS1.employeeSelectorStore.load({params:{start:0, limit:15}});

 // Find the row in the store that matches key values in the employeeNameAndAddressForm
 NS1.rowIndex = '0';
 NS1.first_name = formObj.findField('first_name').getValue();
 NS1.last_name = formObj.findField('last_name').getValue();
 NS1.initials = formObj.findField('initials').getValue();
 NS1.date_of_birth = formObj.findField('date_of_birth').getValue().dateFormat('Y-m-d');
 NS1.employeeSelectorStore.each(NS1.selectMatchedRow, buildEmployeePanel);

 }
 },
 failure: function(f, a) {
 Ext.Msg.alert('Warning', 'Error');
 }
 });
 }
 }
 ];

 NS1.titleStore = new Ext.data.JsonStore({
 url: 'index.php',
 baseParams: {
 option: 'com_opsuk-backoffice',
 view: 'persons',
 layout: 'personTitlesCombo',
 format: 'raw'
 },
 root: 'rows',
 fields : ['id_title', 'title'],
 autoLoad: true
 });

 NS1.titleCombo = new Ext.form.ComboBox({
 store: NS1.titleStore,
 displayField: 'title',
 valueField: 'id_title',
 editable: false,
 mode: 'remote',
 forceSelection: true,
 emptyText: 'Select a title...',
 triggerAction: 'all', // without this the combo won't load from the store!
 fieldLabel: 'Title',
 name: 'title',
 hiddenName: 'id_title',
 allowBlank: false
 });

 NS1.employeeNameFieldset = {
 xtype: 'fieldset',
 labelWidth: 90,
 title: 'Name',
 defaults: { width: 230 },
 defaultType: 'textfield',
 //height: 400,
 autoHeight: true,
 bodyStyle: Ext.isIE ? 'padding: 0 0 5px 15px;' : 'padding: 10px 15px;',
 items: [{
 id: 'id_person_ref',
 fieldLabel: 'PersonID',
 name: 'id_person',
 disabled: true
 },{
 id: 'id_person',
 name: 'id_person',
 hidden: true
 },{
 id: 'first_name',
 fieldLabel: 'First name',
 name: 'first_name'
 },{
 id: 'initials',
 fieldLabel: 'Initials',
 name: 'initials'
 },{
 id: 'last_name',
 fieldLabel: 'Last name',
 name: 'last_name'
 },
 NS1.titleCombo,
 {
 xtype: 'datefield',
 format: 'd/m/Y',
 altFormats: 'Y-m-d',
 id: 'date_of_birth',
 fieldLabel: 'Date of birth',
 name: 'date_of_birth'
 },{
 id: 'mobile',
 fieldLabel: 'Mobile',
 name: 'mobile'

 }]
 };

 NS1.employeeAddressFieldset = {
 xtype: 'fieldset',
 labelWidth: 90,
 title: 'Address',
 defaults: { width: 230 },
 defaultType: 'textfield',
 //height: 400,
 autoHeight: true,
 bodyStyle: Ext.isIE ? 'padding: 0 0 5px 15px;' : 'padding: 10px 15px;',
 items: [{
 id: 'id_address_ref',
 fieldLabel: 'AddressID',
 name: 'id_address_ref',
 disabled: true
 },{
 id: 'id_address',
 name: 'id_address',
 hidden: true
 },{
 id: 'address_line_1',
 fieldLabel: 'Address line 1',
 name: 'address_line_1'
 },{
 id: 'address_line_2',
 fieldLabel: 'Address line 2',
 name: 'address_line_2'
 },{
 id: 'town',
 fieldLabel: 'Town',
 name: 'town'
 },{
 id: 'city',
 fieldLabel: 'City',
 name: 'city'
 },{
 id: 'county',
 fieldLabel: 'County',
 name: 'county'
 },{
 id: 'postcode',
 fieldLabel: 'Postcode',
 name: 'postcode'
 },{
 id: 'telephone',
 fieldLabel: 'Telephone',
 name: 'telephone'
 }]
 };

 NS1.employeeNameAndAddressForm = new Ext.form.FormPanel ({
 //title: 'Edit employees',
 closable: false,
 itemId: 'employeeNameAndAddressForm',
 frame: true,
 labelAlign: 'left',
 bodyStyle: 'padding: 5px',
 //width: 400,
 layout: 'fit',
 bodyStyle:'padding:20px 20px 20px 20px;',
 url: 'index.php',
 baseParams: {
 option: 'com_opsuk-backoffice',
 view: 'persons',
 layout: 'updatePersonRecord',
 format: 'raw',
 employee_cb: 'Y' // since we are using the person update, we simulate a tick in the employee checkbox
 },
 items: [
 NS1.employeeNameFieldset,
 NS1.employeeAddressFieldset,
 {
 buttons: NS1.employeeNameAndAddressFormButtons,
 buttonAlign: 'left'
 }
 ]

 });

//</script>

 // -------------------------------------------------------------------------------------------------------------
 // Create an object reference variable for the employeeHasQqualificationsGrid object that is shown in the Qualifications tab of
 // the employeeTabPanel
 // -------------------------------------------------------------------------------------------------------------
 // <script language=Javascript>
 var employeeHasQualificationsFields = [
 {name: 'id_qualification_record', type: 'string', mapping: 'id_qualification_record'},
 {name: 'id_person', type: 'string', mapping: 'id_person'},
 {name: 'id_qualification', type: 'string', mapping: 'id_qualification'},
 {name: 'qualification', type: 'string', mapping: 'qualification'},
 {name: 'pass', type: 'string', mapping: 'pass'},
 {name: 'course_date', type: 'string', mapping: 'course_date'},
 {name: 'certificate_number', type: 'string', mapping: 'certificate_number'},
 {name: 'expiry_date', type: 'string', mapping: 'expiry_date'},
 {name: 'notes', type: 'string', mapping: 'notes'}
 ];

 var employeeHasQualificationsStore = new Ext.data.JsonStore({
 url: 'index.php',
 baseParams: {
 option: 'com_opsuk-backoffice',
 view: 'employees',
 layout: 'employeeHasQualificationsRecords',
 format: 'raw'
 },
 idProperty: 'id_qualification_record',
 totalProperty:'totalCount',
 root: 'rows',
 //pruneModifiedRecords: true,
 remoteSort: true,
 fields: employeeHasQualificationsFields
 });

 var qualificationStore = new Ext.data.JsonStore({
 url: 'index.php',
 baseParams: {
 option: 'com_opsuk-backoffice',
 view: 'qualifications',
 layout: 'qualificationRecords',
 format: 'raw'
 },
 root: 'rows',
 fields : ['id_qualification', 'qualification'],
 autoLoad: true
 });

 var qualificationCombo = new Ext.form.ComboBox({
 typeAhead: true,
 triggerAction: 'all',
 mode: 'remote',
 store: qualificationStore,
 triggerAction: 'all', // without this the combo won't load from the store!
 displayField: 'qualification',
 valueField: 'id_qualification'
 });

 var qualificationEditor = new Ext.grid.GridEditor(qualificationCombo);

 var passEditor = new Ext.form.TextField();
 var courseDateEditor = new Ext.form.DateField({format:'d/m/Y'});
 var certificateNumberEditor = new Ext.form.TextField();
 var expiryDateEditor = new Ext.form.DateField({format:'d/m/Y'});
 var notesEditor = new Ext.form.TextField();

 var employeeHasQualificationsStoreRowModel = Ext.data.Record.create(employeeHasQualificationsFields);

 var employeeHasQualificationsGrid = new Ext.grid.EditorGridPanel({
 //title: 'Qualifications',
 stripeRows: true,
 autoWidth: true,
 //width: 352,
 height: 400,
 margin: {top:5, right:10, bottom:5, left:10},
 columnLines: true,
 tbar: [{
 text: 'Add qualification'
 ,handler: function () {
 var conn = new Ext.data.Connection();
 conn.request({
 url: 'index.php',
 params: {
 option: 'com_opsuk-backoffice',
 view: 'employees',
 layout: 'createNewPersonHasQualificationRecord',
 format: 'raw',
 id_person: NS1.currentlySelectedPersonID
 }
 ,success: function (resp, opt) {
 var id_qualification_record = Ext.util.JSON.decode(resp.responseText).id_qualification_record;
 employeeHasQualificationsGrid.getStore().insert(0,
 new employeeHasQualificationsStoreRowModel({
 id_qualification_record: id_qualification_record,
 id_person: NS1.currentlySelectedPersonID
 })
 );
 }
 ,failure: function (resp, opt) {
 Ext.Msg.alert('Error', 'Unable to add qualification');
 }
 })
 employeeHasQualificationsGrid.startEditing(0,0);
 }
 }],

 //loadmsk: true,
 bbar: new Ext.PagingToolbar({
 store: employeeHasQualificationsStore,
 displayInfo: true,
 prependButtons: true,
 pageSize: 5
 }),
 clicksToEdit: 1,
 store: employeeHasQualificationsStore,
 columns: [
 // fix up the column settings below
 {header: 'ID', width: 30, dataIndex: 'id_qualification_record', hidden: false, sortable: true },
 {header: 'EmployeeID', width: 80, dataIndex: 'id_employee', hidden: true, sortable: true},
 {header: 'PersonID', width: 80, dataIndex: 'id_person', hidden: true, sortable: true },
 {header: 'Qualification',
 width: 120,
 dataIndex: 'id_qualification',
 sortable: true,
 editor : qualificationEditor,
 renderer:function(value, p, record) {
 return record.data['qualification'];
 }
 },
 {header: 'CourseDate', width: 80,
 dataIndex: 'course_date', sortable: true,
 renderer: Ext.util.Format.dateRenderer('d/m/Y'),
 editor : courseDateEditor},
 {header: 'Pass', width: 60, dataIndex: 'pass', sortable: true, editor : passEditor},
 {header: 'CertificateNumber', width: 110, dataIndex: 'certificate_number', sortable: true,
 editor : certificateNumberEditor},
 {header: 'ExpiryDate', width: 80,
 dataIndex: 'expiry_date', sortable: true,
 renderer: Ext.util.Format.dateRenderer('d/m/Y'),
 editor : expiryDateEditor},
 {header: 'Notes', width: 100, dataIndex: 'notes', sortable: true, editor : notesEditor}
 ],
 listeners: {
 afteredit: function(e) {
 var conn = new Ext.data.Connection();
 conn.request({
 url: 'index.php',
 params: {
 option: 'com_opsuk-backoffice',
 view: 'employees',
 layout: 'updateQualificationRecordField',
 format: 'raw',
 id_qualification_record: 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();
 }
 })

 }
 }
 });
//</script>

 // -------------------------------------------------------------------------------------------------------------
 // Create an object reference variable for the employeeJobInfoForm object that is shown in the JobInfo tab of
 // the employeeTabPanel
 // -------------------------------------------------------------------------------------------------------------
 // <script language=Javascript>
 // This tab panel won't be displayed if there is no employee selected (programming for the to be added later)


 NS1.employeeJobInfoFormButtons = [
 //new Ext.Toolbar.Fill(),
 {
 text: 'Save',
 handler: function() {
 NS1.employeeJobInfoForm.getForm().submit({
 success: function(formObj, actionObj) {
 if (actionObj.result.success == 'false') {
 var msg = 'success = false, ' +
 'errors = ' + actionObj.result.errors.error_msg;
 Ext.MessageBox.alert({
 title:'Error',
 msg: msg,
 minWidth: msg.length,
 });
 }
 },
 failure: function(f, a) {
 Ext.Msg.alert('Warning', 'Error');
 }
 });
 }
 }
 ];

 NS1.jobStore = new Ext.data.JsonStore({
 url: 'index.php',
 baseParams: {
 option: 'com_opsuk-backoffice',
 view: 'jobs',
 layout: 'jobRecords',
 format: 'raw'
 },
 root: 'rows',
 fields : ['id_job', 'job_title'],
 autoLoad: true
 });

 NS1.jobCombo = new Ext.form.ComboBox({
 store: NS1.jobStore,
 displayField: 'job_title',
 valueField: 'id_job',
 editable: false,
 mode: 'remote',
 forceSelection: true,
 emptyText: 'Select a job...',
 triggerAction: 'all', // without this the combo won't load from the store!
 fieldLabel: 'Job',
 name: 'job_title',
 hiddenName: 'id_job',
 allowBlank: false
 });


 NS1.jobGradeStore = new Ext.data.JsonStore({
 url: 'index.php',
 baseParams: {
 option: 'com_opsuk-backoffice',
 view: 'job_grades',
 layout: 'jobGradeRecords',
 format: 'raw'
 },
 root: 'rows',
 fields : ['id_job_grade', 'job_grade'],
 autoLoad: true
 });

 NS1.jobGradeCombo = new Ext.form.ComboBox({
 store: NS1.jobGradeStore,
 displayField: 'job_grade',
 valueField: 'id_job_grade',
 editable: false,
 mode: 'remote',
 forceSelection: true,
 emptyText: 'Select a job...',
 triggerAction: 'all', // without this the combo won't load from the store!
 fieldLabel: 'Job Grade',
 name: 'job_grade',
 hiddenName: 'id_job_grade',
 allowBlank: false
 });

 NS1.employeeJobInfoFieldset = {
 xtype: 'fieldset',
 labelWidth: 90,
 title: 'Job Info',
 defaults: { width: 230 },
 defaultType: 'textfield',
 //height: 400,
 autoHeight: true,
 bodyStyle: Ext.isIE ? 'padding: 0 0 5px 15px;' : 'padding: 10px 15px;',
 items: [{
 id: 'id_employee_ref',
 fieldLabel: 'EmployeeID',
 name: 'id_employee_ref',
 disabled: true
 },{
 id: 'id_employee',
 name: 'id_employee',
 hidden: true
 },
 NS1.jobCombo,
 {
 xtype: 'datefield',
 format: 'd/m/Y',
 altFormats: 'Y-m-d',
 id: 'start_date',
 fieldLabel: 'Start Date',
 name: 'start_date'
 },
 NS1.jobGradeCombo,
 {
 xtype: 'datefield',
 format: 'd/m/Y',
 altFormats: 'Y-m-d',
 id: 'end_date',
 fieldLabel: 'End Date',
 name: 'end_date'
 }
 ]
 };

 NS1.employeeJobInfoForm = new Ext.form.FormPanel ({
 //title: 'Edit employees',
 closable: false,
 itemId: 'employeeJobInfoForm',
 frame: true,
 labelAlign: 'left',
 bodyStyle: 'padding: 5px',
 //width: 400,
 layout: 'fit',
 bodyStyle:'padding:20px 20px 20px 20px;',
 url: 'index.php',
 baseParams: {
 option: 'com_opsuk-backoffice',
 view: 'employees',
 layout: 'updateEmployeeJobInfoRecord',
 format: 'raw'
 },
 items: [
 NS1.employeeJobInfoFieldset,
 {
 buttons: NS1.employeeJobInfoFormButtons,
 buttonAlign: 'left'
 }
 ]

 });

//</script>

 // -------------------------------------------------------------------------------------------------------------
 // Create an object reference variable for the employeeTabPanel object
 // -------------------------------------------------------------------------------------------------------------
 // This is the tab panel section for employeeDetails, Qualifications
 NS1.employeeTabPanel = new Ext.TabPanel({
 stateful: true,
 stateID: 'employeeTabPanel',
 activeTab: 0,
 plain: true,
 border:false,
 height: 220,
 autoHeight: true,
 // this line is necessary for anchoring to work at
 // lower level containers and for full height of tabs
 anchor:'100%',
 // only fields from an active tab are submitted
 // if the following line is not persent
 deferredRender:false,
 // tabs
 items:[{
 title:'Name & Address'
 ,autoScroll:true
 ,xtype: 'panel'
 ,anchor: '100%'
 ,items: [ NS1.employeeNameAndAddressForm ]
 },{
 title:'Job Info'
 ,autoScroll:true
 ,xtype: 'panel'
 ,anchor: '100%'
 ,items: [ NS1.employeeJobInfoForm ]
 },{
 title:'Qualifications'
 ,autoScroll:true
 ,xtype: 'panel'
 ,anchor: '100%'
 ,items: [ employeeHasQualificationsGrid ]
 }]

 });

 // -------------------------------------------------------------------------------------------------------------
 // Create an object reference variable for the main
 // -------------------------------------------------------------------------------------------------------------
 NS1.employeePanel = new Ext.Panel ({
 title: 'Employees',
 closable: true,
 frame: true,
 labelAlign: 'left',
 bodyStyle: 'padding: 5px',
 width: 800,
 layout: 'column',
 bodyStyle:'padding:20px 20px 20px 20px;',
 items: [{
 // Fieldset in Column 1
 xtype: 'fieldset'
 ,title: 'Employee selector'
 ,bodyStyle:'padding:20px 20px 20px 20px'
 ,items: [{
 items: [ NS1.employeeSelectorGrid ]
 }]
 },
 {
 // Right hand fieldset containing tabPanel
 xtype: 'panel'
 //,title: 'Employee Records'
 ,width: 600
 ,height: 800
 ,bodyStyle:'padding: 6px 0px 0px 40px'
 ,items: [ NS1.employeeTabPanel ]
 }]
 });

 // when we first load the employeeForm, simulate selection of the first grid row to
 // cause the rowselect event to fire... this will trigger the on('rowselect' code below
 NS1.employeeSelectorStore.on('load', function(employeeSelectorStore, records, options) {
 if (!NS1.employeeSelectorGrid.getSelectionModel().hasSelection()) {
 NS1.employeeSelectorGrid.getSelectionModel().selectFirstRow();
 }
 });

 NS1.employeeSelectorStore.load({params:{start:0, limit:15}});

 // when we get a rowselect, load the stores for the component items in employeeTabPanel
 NS1.employeeSelectorGrid.getSelectionModel().on('rowselect', function(sm, rowindex, record) {
 if (record.data.id_employee != '') {
 NS1.currentlySelectedEmployeeID = record.data.id_employee;
 NS1.currentlySelectedPersonID = record.data.id_person;
 // -------------------------------------------------------------------------------------------------------------
 // First load the employeeNameAndAddressForm
 // -------------------------------------------------------------------------------------------------------------
 NS1.employeeNameAndAddressForm.getForm().load({
 url: 'index.php',
 params: {
 option: 'com_opsuk-backoffice',
 view: 'employees',
 layout: 'getNameAndAddressRecord',
 format: 'raw',
 id_employee: NS1.currentlySelectedEmployeeID
 },
 success: function(form, action) {
 // create a copy of id_person to go in the ready-only id_person_ref form field
 //NS1.id_person = NS1.employeeNameAndAddressForm.getForm().findField('id_person').getValue();
 NS1.employeeNameAndAddressForm.getForm().findField('id_person_ref').setValue(NS1.currentlySelectedPersonID) ;
 // create a copy of id_address to go in the ready-only id_address_ref form field
 NS1.id_address = NS1.employeeNameAndAddressForm.getForm().findField('id_address').getValue();
 NS1.employeeNameAndAddressForm.getForm().findField('id_address_ref').setValue(NS1.id_address) ;
 },
 failure: function(form, action) {
 Ext.Msg.alert("Load failed", action.result.errors);
 }
 });

 // -------------------------------------------------------------------------------------------------------------
 // Next load the employeeJobInfoForm
 // -------------------------------------------------------------------------------------------------------------

 NS1.employeeJobInfoForm.getForm().load({
 url: 'index.php',
 params: {
 option: 'com_opsuk-backoffice',
 view: 'employees',
 layout: 'getJobInfoRecord',
 format: 'raw',
 id_employee: NS1.currentlySelectedEmployeeID
 },
 success: function(form, action) {
 console.log("employeeJobInfoForm Load succeeded.");
 // create a copy of id_person to go in the ready-only id_person_ref form field
 NS1.employeeJobInfoForm.getForm().findField('id_employee_ref').setValue(NS1.currentlySelectedEmployeeID) ;
 },
 failure: function(form, action) {
 console.log("employeeJobInfoForm Load failed.");
 }
 });

 // -------------------------------------------------------------------------------------------------------------
 // Next load the employeeHasQualificationsStore
 // -------------------------------------------------------------------------------------------------------------
 employeeHasQualificationsStore.removeAll();
 employeeHasQualificationsStore.load({params:{start:0, limit:5, id_employee: NS1.currentlySelectedEmployeeID}});
 }
 });

 return NS1.employeePanel; // return instantiated component
 })();