TimeTrex/interface/html5/views/ui_kit_sample/UIKitSampleViewController.js

577 lines
21 KiB
JavaScript

import '@/global/widgets/filebrowser/TImage';
import '@/global/widgets/filebrowser/TImageBrowser';
import '@/global/widgets/filebrowser/TImageAdvBrowser';
import '@/global/widgets/color-picker/TColorPicker';
import '@/global/widgets/formula_builder/FormulaBuilder.js'; // imported unnamed as it self executes on to the jQuery object as a jQuery plugin.
import tinyMCE from 'tinymce/tinymce';
import 'tinymce/icons/default'; // Default icons are required for TinyMCE 5.3 or above
import 'tinymce/themes/silver';
import 'tinymce/skins/ui/oxide/skin.css';
import 'tinymce/plugins/link';
import contentUiCss from '!!css-loader!tinymce/skins/ui/oxide/content.css'; // https://www.tiny.cloud/docs/advanced/usage-with-module-loaders/webpack/webpack_es6_npm/
import contentCss from '!!css-loader!tinymce/skins/content/default/content.css';
export class UIKitSampleViewController extends BaseViewController {
constructor( options = {} ) {
_.defaults( options, {
el: '#ui_kit_sample_view_container',
report_api: null,
company_api: null,
combo_box_array: null,
sub_ui_kit_child_sample_view_controller: null,
combo_box_parent_array: [], //Country Array
combo_box_child_array: [] //Province Array
} );
super( options );
}
init( options ) {
//this._super('initialize', options );
this.edit_view_tpl = 'UIKitSampleEditView.html';
this.permission_id = 'user';
this.viewId = 'UIKitSample';
this.script_name = 'UIKitSample';
this.table_name_key = 'ui_kit';
this.context_menu_name = $.i18n._( 'UIKit Sample' );
this.navigation_label = $.i18n._( 'UIKit Sample' );
this.api = TTAPI.APIUIKitSample;
this.report_api = TTAPI.APITimesheetSummaryReport;
this.company_api = TTAPI.APICompany;
this.render();
this.buildContextMenu();
this.initData();
}
initOptions() {
let options = [
{ option_name: 'combo_box', api: this.api },
{ option_name: 'country', field_name: 'combo_box_parent', api: this.company_api },
];
this.initDropDownOptions( options, () => {
this.combo_box_parent_array = this.country_array;
} );
}
onFormItemChange( target, doNotValidate ) {
this.setIsChanged( target );
this.setMassEditingFieldsWhenFormChange( target );
var key = target.getField();
switch ( key ) {
case 'combo_box_parent':
var widget = this.edit_view_ui_dic['combo_box_child'];
widget.setValue( null );
break;
}
this.current_edit_record[key] = target.getValue();
if ( key === 'combo_box_parent' ) {
this.onComboBoxParentChanged();
return;
}
if ( !doNotValidate ) {
this.validate();
}
}
onComboBoxParentChanged() {
var selectVal = this.edit_view_ui_dic['combo_box_parent'].getValue();
this.setComboBoxChild( selectVal, true );
}
setComboBoxChild( val, refresh, selected_value ) {
var $this = this;
var combo_box_child_widget = $this.edit_view_ui_dic['combo_box_child'];
if ( !val || val === '-1' || val === '0' ) {
$this.combo_box_child_array = [];
combo_box_child_widget.setSourceData( [] );
} else {
this.company_api.getOptions( 'province', val, {
onResult: function( res ) {
res = res.getResult();
if ( !res ) {
res = [];
}
$this.combo_box_child_array = Global.buildRecordArray( res );
combo_box_child_widget.setSourceData( $this.combo_box_child_array );
if ( refresh && $this.combo_box_child_array.length > 0 ) {
//Keep current value if it is selected
let child_value = selected_value ? selected_value : $this.combo_box_child_array[0].value;
$this.current_edit_record.combo_box_child = child_value;
combo_box_child_widget.setValue( child_value );
}
}
} );
}
}
getCustomContextMenuModel() {
var context_menu_model = {
exclude: [],
include: []
};
return context_menu_model;
}
buildEditViewUI() {
super.buildEditViewUI();
var $this = this;
var tab_model = {
'tab_input_basic': {
'label': $.i18n._( 'Text / Basic' ),
'html_template': this.getInputTabHtml(),
},
'tab_dropdowns': { 'label': $.i18n._( 'Dropdowns' ) },
'tab_date_selectors': { 'label': $.i18n._( 'Date / Time' ) },
'tab_image_file': { 'label': $.i18n._( 'Pickers' ) },
'tab_sub_view': {
'label': $.i18n._( 'Sub View' ),
'is_sub_view': true,
'init_callback': 'initSubUIKitChildView',
'display_on_mass_edit': false
},
'tab_misc': { 'label': $.i18n._( 'Misc' ) },
'tab_audit': true,
};
this.setTabModel( tab_model );
var form_item_input;
this.navigation.AComboBox( {
api_class: TTAPI.APIUIKitSample,
id: this.script_name + '_navigation',
allow_multiple_selection: false,
layout_name: 'global_ui_kit_sample',
navigation_mode: true,
show_search_inputs: true
} );
this.setNavigation();
//Tab 0 start
var tab_widget = this.edit_view_tab.find( '#tab_input_basic' );
var text_basic_column = tab_widget.find( '.first-column' );
var label, widgetContainer;
this.edit_view_tabs[0] = [];
this.edit_view_tabs[0].push( text_basic_column );
//Text input
form_item_input = Global.loadWidgetByName( FormItemType.TEXT_INPUT );
form_item_input.TTextInput( { field: 'text_input', width: '100%' } );
this.addEditFieldToColumn( $.i18n._( 'Text Input (Display Name)' ), form_item_input, text_basic_column );
//Tags
form_item_input = Global.loadWidgetByName( FormItemType.TAG_INPUT );
form_item_input.TTagInput( { field: 'tag', object_type_id: 110 } );
this.addEditFieldToColumn( $.i18n._( 'Tags' ), form_item_input, text_basic_column, '', null, null, true );
//Textarea
form_item_input = Global.loadWidgetByName( FormItemType.TEXT_AREA );
form_item_input.TTextArea( { field: 'textarea', width: '100%', rows: 4 } );
this.addEditFieldToColumn( $.i18n._( 'Textarea' ), form_item_input, text_basic_column, '', null, null, true );
//Numeric input
form_item_input = Global.loadWidgetByName( FormItemType.TEXT_INPUT );
form_item_input.TTextInput( { field: 'numeric_input', width: '100%' } );
this.addEditFieldToColumn( $.i18n._( 'Numeric (20,4)' ), form_item_input, text_basic_column );
//Password
form_item_input = Global.loadWidgetByName( FormItemType.PASSWORD_INPUT );
form_item_input.TPasswordInput( { field: 'password_input', width: '100%' } );
this.addEditFieldToColumn( $.i18n._( 'Password' ), form_item_input, text_basic_column, '', null, true );
//Checkbox
form_item_input = Global.loadWidgetByName( FormItemType.CHECKBOX );
form_item_input.TCheckbox( { field: 'checkbox' } );
widgetContainer = $( '<div class=\'widget-h-box\'></div>' );
widgetContainer.append( form_item_input );
this.addEditFieldToColumn( $.i18n._( 'Checkbox' ), form_item_input, text_basic_column, '', widgetContainer );
var tab_dropdown = this.edit_view_tab.find( '#tab_dropdowns' );
var tab_dropdown_column_1 = tab_dropdown.find( '.first-column' );
this.edit_view_tabs[1] = [];
this.edit_view_tabs[1].push( tab_dropdown_column_1 );
//Combo Box
form_item_input = Global.loadWidgetByName( FormItemType.COMBO_BOX );
form_item_input.TComboBox( { field: 'combo_box' } );
form_item_input.setSourceData( $this.combo_box_array );
this.addEditFieldToColumn( $.i18n._( 'Combo Box' ), form_item_input, tab_dropdown_column_1, '' );
//Combo Box Parent
form_item_input = Global.loadWidgetByName( FormItemType.COMBO_BOX );
form_item_input.TComboBox( { field: 'combo_box_parent' } );
form_item_input.setSourceData( $this.combo_box_parent_array );
this.addEditFieldToColumn( $.i18n._( 'Combo Box Parent' ), form_item_input, tab_dropdown_column_1, '' );
//Combo Box Child
form_item_input = Global.loadWidgetByName( FormItemType.COMBO_BOX );
form_item_input.TComboBox( { field: 'combo_box_child' } );
form_item_input.setSourceData( $this.combo_box_child_array );
this.addEditFieldToColumn( $.i18n._( 'Combo Box Child' ), form_item_input, tab_dropdown_column_1, '' );
//Awesome Box Multiple
form_item_input = Global.loadWidgetByName( FormItemType.AWESOME_BOX );
form_item_input.AComboBox( {
api_class: TTAPI.APIUser,
allow_multiple_selection: true,
layout_name: 'global_user',
show_search_inputs: true,
set_empty: true,
field: 'awesome_box_multi'
} );
this.addEditFieldToColumn( $.i18n._( 'Awesome Box Multiple' ), form_item_input, tab_dropdown_column_1 );
//Awesome Single
form_item_input = Global.loadWidgetByName( FormItemType.AWESOME_BOX );
form_item_input.AComboBox( {
api_class: TTAPI.APIUser,
allow_multiple_selection: false,
layout_name: 'global_user',
show_search_inputs: true,
set_empty: true,
field: 'awesome_box_single'
} );
this.addEditFieldToColumn( $.i18n._( 'Awesome Box Single' ), form_item_input, tab_dropdown_column_1 );
var tab_date = this.edit_view_tab.find( '#tab_date_selectors' );
var tab_date_column_1 = tab_date.find( '.first-column' );
this.edit_view_tabs[2] = [];
this.edit_view_tabs[2].push( tab_date_column_1 );
//Date
form_item_input = Global.loadWidgetByName( FormItemType.DATE_PICKER );
form_item_input.TDatePicker( { field: 'date' } );
this.addEditFieldToColumn( $.i18n._( 'Date' ), form_item_input, tab_date_column_1 );
// Date Range
form_item_input = Global.loadWidgetByName( FormItemType.DATE_PICKER );
form_item_input.TRangePicker( { field: 'date_range', validation_field: 'date_stamp' } );
this.addEditFieldToColumn( $.i18n._( 'Date Range' ), form_item_input, tab_date_column_1, '', null, true );
//Time
form_item_input = Global.loadWidgetByName( FormItemType.TIME_PICKER );
form_item_input.TTimePicker( { field: 'time', validation_field: 'time_stamp' } );
widgetContainer = $( '<div class=\'widget-h-box\'></div>' );
this.actual_time_label = $( '<span class=\'widget-right-label\'></span>' );
widgetContainer.append( form_item_input );
widgetContainer.append( this.actual_time_label );
this.addEditFieldToColumn( $.i18n._( 'Time' ), form_item_input, tab_date_column_1, '', widgetContainer, true );
var tab_image_file = this.edit_view_tab.find( '#tab_image_file' );
var tab_image_file_column_1 = tab_image_file.find( '.first-column' );
this.edit_view_tabs[3] = [];
this.edit_view_tabs[3].push( tab_image_file_column_1 );
// Photo
form_item_input = Global.loadWidgetByName( FormItemType.IMAGE_AVD_BROWSER );
this.image_browser = form_item_input.TImageAdvBrowser( {
field: '',
default_width: 128,
default_height: 128,
enable_delete: true,
callBack: function( form_data ) {
new ServiceCaller().uploadFile( form_data, 'object_type=user_photo&object_id=' + $this.current_edit_record.id, {
onResult: function( result ) {
if ( result.toLowerCase() === 'true' ) {
$this.image_browser.setImage( ServiceCaller.getURLByObjectType( 'user_photo' ) + '&object_id=' + $this.current_edit_record.id );
} else {
TAlertManager.showAlert( result, 'Error' );
}
}
} );
},
deleteImageHandler: function( e ) {
$this.onDeleteImage();
}
} );
widgetContainer = $( '<div class=\'widget-h-box\'></div>' );
label = $( '<span class=\'widget-right-label\'>' + $.i18n._( 'Upload Disabled' ) + '</span>' );
widgetContainer.append( this.image_browser );
widgetContainer.append( label );
this.addEditFieldToColumn( $.i18n._( 'Photo' ), this.image_browser, tab_image_file_column_1, '', widgetContainer, false, true );
// File
form_item_input = Global.loadWidgetByName( FormItemType.FILE_BROWSER );
this.file_browser = form_item_input.TImageBrowser( { field: 'file', name: 'filedata', accept_filter: '*' } );
widgetContainer = $( '<div class=\'widget-h-box\'></div>' );
label = $( '<span class=\'widget-right-label\'>' + $.i18n._( 'Upload Disabled' ) + '</span>' );
widgetContainer.append( this.file_browser );
widgetContainer.append( label );
this.addEditFieldToColumn( $.i18n._( 'File' ), form_item_input, tab_image_file_column_1, '', widgetContainer, true, true );
//Color
form_item_input = Global.loadWidgetByName( FormItemType.COLOR_PICKER );
form_item_input.TColorPicker( { field: 'color' } );
this.addEditFieldToColumn( $.i18n._( 'Color' ), form_item_input, tab_image_file_column_1 );
//Misc tab
var tab_misc = this.edit_view_tab.find( '#tab_misc' );
var tab_misc_column_1 = tab_misc.find( '.first-column' );
this.edit_view_tabs[4] = [];
this.edit_view_tabs[4].push( tab_misc_column_1 );
form_item_input = Global.loadWidgetByName( FormItemType.SEPARATED_BOX );
form_item_input.SeparatedBox( { label: $.i18n._( 'Separated Box One' ) } );
this.addEditFieldToColumn( null, form_item_input, tab_misc_column_1, '', null, true, false, 'shifts_scheduled_to_work' );
//Formula builder
form_item_input = Global.loadWidgetByName( FormItemType.FORMULA_BUILDER );
form_item_input.FormulaBuilder( {
field: 'formula_builder', width: '100%', onFormulaBtnClick: function() {
TTAPI.APIReportCustomColumn.getOptions( 'formula_functions', {
onResult: function( fun_result ) {
var fun_res_data = fun_result.getResult();
$this.report_api.getOptions( 'filter_columns', { onResult: onColumnsResult } );
function onColumnsResult( col_result ) {
var col_res_data = col_result.getResult();
var default_args = {};
default_args.functions = Global.buildRecordArray( fun_res_data );
default_args.variables = Global.buildRecordArray( col_res_data );
default_args.formula = $this.current_edit_record.formula_builder;
default_args.current_edit_record = Global.clone( $this.current_edit_record );
default_args.api = $this.api;
IndexViewController.openWizard( 'FormulaBuilderWizard', default_args, function( val ) {
$this.current_edit_record.formula_builder = val;
$this.edit_view_ui_dic.formula_builder.setValue( val );
} );
}
}
} );
}
} );
$this.addEditFieldToColumn( $.i18n._( 'Formula' ), form_item_input, tab_misc_column_1, '', null, true, true );
form_item_input = Global.loadWidgetByName( FormItemType.SEPARATED_BOX );
form_item_input.SeparatedBox( { label: $.i18n._( 'Separated Box Two' ) } );
this.addEditFieldToColumn( null, form_item_input, tab_misc_column_1, '', null, true, false, 'shifts_scheduled_to_work' );
}
buildSearchFields() {
super.buildSearchFields();
this.search_fields = [
new SearchField( {
label: $.i18n._( 'Text Input' ),
in_column: 1,
field: 'text_input',
multiple: true,
basic_search: true,
adv_search: true,
form_item_type: FormItemType.TEXT_INPUT
} ),
];
}
setCurrentEditRecordData() {
super.setCurrentEditRecordData();
this.setComboBoxChild( this.current_edit_record.combo_box_parent, true, this.current_edit_record.combo_box_child );
this.setWYSIWGText();
}
setWYSIWGText( el ) {
var $this = this;
var form_item = $( Global.loadWidgetByName( WidgetNamesDic.EDIT_VIEW_FORM_ITEM ) );
var form_item_label_div = form_item.find( '.edit-view-form-item-label-div' );
var form_item_input_div = form_item.find( '.edit-view-form-item-input-div' );
var form_item_label = form_item.find( '.edit-view-form-item-label' );
form_item_label.text( $.i18n._( 'TinyMCE' ) );
form_item_input_div.addClass( 'edit-view-form-item-tinymce-textarea-div' );
var tab_input_basic = this.edit_view_tab.find( '#tab_input_basic' );
// var column = tab_vacancy.find( '.third-column' );
var tab_tab_input_basic3 = tab_input_basic.find( '.third-column' );
tab_tab_input_basic3.html( form_item );
this.edit_view_tabs[0].push( tab_tab_input_basic3 );
this.editFieldResize( 0 );
// var widget = widgets;
form_item_label_div.css( 'height', '340px' );
form_item_label_div.css( 'width', form_item_label_div.width() + 1 );
this.showWYSIWGText();
window.onresize = function() {
if ( this.edit_view ) {
$this.resizeMCE();
}
};
return form_item;
}
showWYSIWGText() {
if ( !this.edit_view_tab ) {
return;
}
var form_item_label_div_width = this.edit_view_tab.find( '#tab_input_basic' ).find( '.third-column' ).find( '.edit-view-form-item-label-div' ).width() + 12;
var el = Global.loadWidgetByName( FormItemType.TINYMCE_TEXT_AREA, true );
var description = this.current_edit_record['wysiwg_text'];
var width = $( this.edit_view_tab.find( '.edit-view-tab' )[0] ).width() - form_item_label_div_width;
var options = {
description: description,
width: ( width - 3 ) + 'px',
height: '335px'
};
var readonly = false;
if ( this.is_viewing ) {
readonly = true;
}
var tpl = _.template( el )( options );
tinyMCE.remove();
this.edit_view_tab.find( '#tab_input_basic' ).find( '.third-column' ).find( '.edit-view-form-item-tinymce-textarea-div' ).html( tpl );
// new tinyMCE.init code here
tinyMCE.init( {
height: '335px',
width: '100%',
autoresize_min_width: ( width - 3 ),
selector: '.tinymce-text-area',
readonly: readonly,
menubar: false,
statusbar: false,
plugins: 'link',
//toolbar: false, //#2589 (showing the default toolbar)
theme: 'silver',
skin: false,
content_css: false,
content_style: contentUiCss.toString() + '\n'
+ contentCss.toString() + '\n'
+ 'body { font-size: 14px; margin-top: 0; color: #404042; }', // taken from PortalJobVacancyDetailController.js:showJobVacancy as we want the text here to match what a user will end up seeing.
} );
var $this = this;
var tinymce_textarea = this.edit_view_tab.find( '#tab_input_basic' ).find( '.third-column' ).find( '.edit-view-form-item-tinymce-textarea-div' );
tinymce_textarea.hide();
var search_for_tinymce = setInterval( function() {
var body = tinymce_textarea.find( 'iframe' ).contents().find( 'body' );
if ( !_.isUndefined( body[0] ) ) {
clearInterval( search_for_tinymce );
$this.resizeMCE();
tinymce_textarea.show();
}
}, 50 );
}
resizeMCE() {
}
setDefaultMenuDeleteIcon( context_btn, grid_selected_length, pId ) {
if ( grid_selected_length >= 1 ) {
ContextMenuManager.disableMenuItem( this.determineContextMenuMountAttributes().id, context_btn.id, true );
} else {
ContextMenuManager.disableMenuItem( this.determineContextMenuMountAttributes().id, context_btn.id, false );
}
}
setEditMenuDeleteIcon( context_btn, pId ) {
if ( !this.current_edit_record || !this.current_edit_record.id ) {
ContextMenuManager.disableMenuItem( this.determineContextMenuMountAttributes().id, context_btn.id, false );
}
}
uniformVariable( records ) {
if ( this.is_mass_editing ) {
return records;
} else {
records.wysiwg_text = tinyMCE.activeEditor.getContent();
}
return records;
}
removeEditView() {
this.sub_ui_kit_child_sample_view_controller = null;
super.removeEditView();
}
initSubUIKitChildView() {
var $this = this;
if ( !this.current_edit_record.id ) {
TTPromise.resolve( 'BaseViewController', 'onTabShow' ); //Since search() isn't called in this case, and we just display the "Please Save This Record ..." message, resolve the promise.
return;
}
TTPromise.add( 'UIKitChildSampleView', 'init' );
if ( this.sub_ui_kit_child_sample_view_controller ) {
this.sub_ui_kit_child_sample_view_controller.buildContextMenu( true );
this.sub_ui_kit_child_sample_view_controller.setDefaultMenu();
$this.sub_ui_kit_child_sample_view_controller.parent_value = $this.current_edit_record.id;
$this.sub_ui_kit_child_sample_view_controller.parent_edit_record = $this.current_edit_record;
$this.sub_ui_kit_child_sample_view_controller.initData(); //Init data in this parent view
TTPromise.resolve( 'UIKitChildSampleView', 'init' );
return;
}
Global.loadScript( 'views/ui_kit_sample/UIKitChildSampleViewController.js', function() {
if ( !$this.edit_view_tab ) {
return;
}
var tab_employee = $this.edit_view_tab.find( '#tab_sub_view' );
var firstColumn = tab_employee.find( '.first-column-sub-view' );
Global.trackView( 'Sub' + 'UIKitChild' + 'View' );
UIKitChildSampleViewController.loadSubView( firstColumn, beforeLoadView, afterLoadView );
} );
function beforeLoadView() {
}
function afterLoadView( subViewController, firstColumn ) {
$this.sub_ui_kit_child_sample_view_controller = subViewController;
$this.sub_ui_kit_child_sample_view_controller.parent_key = 'parent_id';
$this.sub_ui_kit_child_sample_view_controller.parent_value = $this.current_edit_record.id;
$this.sub_ui_kit_child_sample_view_controller.parent_edit_record = $this.current_edit_record;
$this.sub_ui_kit_child_sample_view_controller.parent_view_controller = $this;
TTPromise.wait( 'BaseViewController', 'initialize', function() {
if ( $this.sub_ui_kit_child_sample_view_controller ) {
$this.sub_ui_kit_child_sample_view_controller.initData(); //Init data in this parent view
}
} );
}
}
getInputTabHtml() {
return `<div id="tab_input_basic" class="edit-view-tab-outside">
<div class="edit-view-tab" id="tab_text_content_div">
<div class="first-column"></div>
<div class="second-column"></div>
<div class="fourth-column job-text-summary-description"></div>
<div class="third-column full-width-column"></div>
</div>
</div>`;
}
}