From b270e65d2e147fab81d6d4a9fd3de2fcba00fccc Mon Sep 17 00:00:00 2001 From: Cris Date: Tue, 28 Jan 2020 12:26:08 +0100 Subject: [PATCH] Extended FHC_TableWidget with column picker, header & footer MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Added standard behaviour to FHC_TableWidget: . Added column picker to new TableWidgetHeader div. . Moved former footerElement (including Alle aus-/abwählen buttons, CSV Downloads) from single specific files to new TableWidgetFooter divs. . Adapted other files to work with new FHC_TableWidget behaviour --- .../lehrauftrag/acceptLehrauftragData.php | 61 ++--- .../lehrauftrag/approveLehrauftragData.php | 53 ++-- .../lehrauftrag/cancelledLehrauftragData.php | 23 +- .../lehre/lehrauftrag/orderLehrauftrag.php | 9 +- .../lehrauftrag/orderLehrauftragData.php | 80 +++--- application/views/widgets/table/table.php | 12 +- public/js/TableWidget.js | 229 +++++++++++++++++- .../js/lehre/lehrauftrag/acceptLehrauftrag.js | 72 ++---- .../lehre/lehrauftrag/approveLehrauftrag.js | 74 ++---- .../js/lehre/lehrauftrag/orderLehrauftrag.js | 73 ++---- 10 files changed, 417 insertions(+), 269 deletions(-) diff --git a/application/views/lehre/lehrauftrag/acceptLehrauftragData.php b/application/views/lehre/lehrauftrag/acceptLehrauftragData.php index 27a348ae7..08cc94e5f 100644 --- a/application/views/lehre/lehrauftrag/acceptLehrauftragData.php +++ b/application/views/lehre/lehrauftrag/acceptLehrauftragData.php @@ -326,10 +326,12 @@ $filterWidgetArray = array( 'Angenommen von' ), 'datasetRepOptions' => '{ - height: 550, - layout: "fitColumns", // fit columns to width of table - responsiveLayout: "hide", // hide columns that dont fit on the table - movableColumns: true, // allows changing column + height: func_height(this), + layout: "fitColumns", // fit columns to width of table + persistentLayout:true, // enables persistence (default store in localStorage if available, else in cookie) + persistenceID: "acceptLehrauftrag", // TableWidget unique id to store persistence data seperately for multiple tables + autoResize: false, // prevent auto resizing of table (false to allow adapting table size when cols are (de-)activated + movableColumns: true, // allows changing column placeholder: func_placeholder(), headerFilterPlaceholder: " ", index: "row_index", // assign specific column as unique id (important for row indexing) @@ -339,7 +341,6 @@ $filterWidgetArray = array( selectableCheck: function(row){ return func_selectableCheck(row); }, - footerElement: func_footerElement(), rowUpdated:function(row){ func_rowUpdated(row); }, @@ -357,40 +358,44 @@ $filterWidgetArray = array( }, renderStarted:function(){ func_renderStarted(this); - } + }, + tableWidgetFooter: { + selectButtons: true + } }', // tabulator properties 'datasetRepFieldsDefs' => '{ row_index: {visible:false}, // necessary for row indexing - lehreinheit_id: {headerFilter:"input", bottomCalc:"count", bottomCalcFormatter:function(cell){return "Anzahl: " + cell.getValue();}, width: "7%"}, - lehrveranstaltung_id: {headerFilter:"input", width: "5%"}, - projektarbeit_id: {visible: false}, - studiensemester_kurzbz: {visible: false}, - studiengang_kz: {visible: false}, - stg_typ_kurzbz: {headerFilter:"input", width: "5%"}, + lehreinheit_id: {headerFilter:"input", bottomCalc:"count", bottomCalcFormatter:function(cell){return "Anzahl: " + cell.getValue();}}, + lehrveranstaltung_id: {headerFilter:"input"}, + projektarbeit_id: {visible: false, headerFilter:"input"}, + studiensemester_kurzbz: {visible: false, headerFilter:"input"}, + studiengang_kz: {visible: false, headerFilter:"input"}, + stg_typ_kurzbz: {headerFilter:"input"}, semester: {headerFilter:"input"}, orgform_kurzbz: {headerFilter:"input"}, - person_id: {visible: false}, - typ: {headerFilter:"input", width: "7%"}, - auftrag: {headerFilter:"input", width: "15%"}, - lv_oe_kurzbz: {headerFilter:"input", width: "8%"}, - gruppe: {headerFilter:"input", width: "5%"}, + person_id: {visible: false, headerFilter:"input"}, + typ: {headerFilter:"input"}, + auftrag: {headerFilter:"input"}, + lv_oe_kurzbz: {headerFilter:"input"}, + gruppe: {headerFilter:"input"}, stunden: {align:"right", formatter: form_formatNulltoStringNumber, formatterParams:{precision:1}, headerFilter:"input", headerFilterFunc: hf_filterStringnumberWithOperator, - bottomCalc:"sum", bottomCalcParams:{precision:1}, width: "5%"}, - betrag: {align:"right", width: "6%", formatter: form_formatNulltoStringNumber, + bottomCalc:"sum", bottomCalcParams:{precision:1} + }, + betrag: {align:"right", formatter: form_formatNulltoStringNumber, headerFilter:"input", headerFilterFunc: hf_filterStringnumberWithOperator, - bottomCalc:"sum", bottomCalcParams:{precision:2}, bottomCalcFormatter:"money", bottomCalcFormatterParams:{decimal: ",", thousand: ".", symbol:"€"}, - width: "8%"}, + bottomCalc:"sum", bottomCalcParams:{precision:2}, bottomCalcFormatter:"money", bottomCalcFormatterParams:{decimal: ",", thousand: ".", symbol:"€"} + }, vertrag_id: {visible: false}, vertrag_stunden: {visible: false}, vertrag_betrag: {visible: false}, - mitarbeiter_uid: {visible: false}, - bestellt: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: bestellt_tooltip, width: "8%"}, - erteilt: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: erteilt_tooltip, width: "8%"}, - akzeptiert: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: akzeptiert_tooltip, width: "8%"}, - bestellt_von: {visible: false}, - erteilt_von: {visible: false}, - akzeptiert_von: {visible: false} + mitarbeiter_uid: {visible: false, headerFilter:"input"}, + bestellt: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: bestellt_tooltip}, + erteilt: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: erteilt_tooltip}, + akzeptiert: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: akzeptiert_tooltip}, + bestellt_von: {visible: false, headerFilter:"input"}, + erteilt_von: {visible: false, headerFilter:"input"}, + akzeptiert_von: {visible: false, headerFilter:"input"} }', // col properties ); diff --git a/application/views/lehre/lehrauftrag/approveLehrauftragData.php b/application/views/lehre/lehrauftrag/approveLehrauftragData.php index fbc30db1c..111e7bd01 100644 --- a/application/views/lehre/lehrauftrag/approveLehrauftragData.php +++ b/application/views/lehre/lehrauftrag/approveLehrauftragData.php @@ -337,14 +337,17 @@ $filterWidgetArray = array( 'Angenommen von' ), 'datasetRepOptions' => '{ - height: 700, - layout: "fitColumns", // fit columns to width of table - responsiveLayout: "hide", // hide columns that dont fit on the table - movableColumns: true, // allows changing column + height: func_height(this), + layout: "fitColumns", // fit columns to width of table + layoutColumnsOnNewData: true, // ajust column widths to the data each time TableWidget is loaded + persistentLayout:true, // enables persistence (default store in localStorage if available, else in cookie) + persistenceID: "approveLehrauftrag", // TableWidget unique id to store persistence data seperately for multiple tables + autoResize: false, // prevent auto resizing of table (false to allow adapting table size when cols are (de-)activated + movableColumns: true, // allows changing column placeholder: func_placeholder(), headerFilterPlaceholder: " ", groupBy:"lehrveranstaltung_id", - groupToggleElement:"header", //toggle group on click anywhere in the group header + groupToggleElement:"header", //toggle group on click anywhere in the group header groupHeader: function(value, count, data, group){ return func_groupHeader(data); }, @@ -357,7 +360,6 @@ $filterWidgetArray = array( return func_selectableCheck(row); }, initialFilter: func_initialFilter(), - footerElement: func_footerElement(), rowUpdated:function(row){ func_rowUpdated(row); }, @@ -373,44 +375,47 @@ $filterWidgetArray = array( }, tableBuilt: function(){ func_tableBuilt(this); - } + }, + tableWidgetFooter: { + selectButtons: true + } }', // tabulator properties 'datasetRepFieldsDefs' => '{ // column status is built dynamically in funcTableBuilt(), row_index: {visible:false}, // necessary for row indexing - personalnummer: {visible: false}, - lehreinheit_id: {headerFilter:"input", bottomCalc:"count", width: "7%", + personalnummer: {visible: false, headerFilter:"input"}, + lehreinheit_id: {headerFilter:"input", bottomCalc:"count", bottomCalcFormatter:function(cell){return "Anzahl: " + cell.getValue();},}, lehrveranstaltung_id: {headerFilter:"input"}, - lv_bezeichnung: {visible: false}, - projektarbeit_id: {visible: false}, + lv_bezeichnung: {visible: false, headerFilter:"input"}, + projektarbeit_id: {visible: false, headerFilter:"input"}, studiensemester_kurzbz: {headerFilter:"input"}, - studiengang_kz: {visible: false}, - stg_typ_kurzbz: {headerFilter:"input", width: "5%"}, + studiengang_kz: {visible: false, headerFilter:"input"}, + stg_typ_kurzbz: {headerFilter:"input"}, semester: {headerFilter:"input"}, orgform_kurzbz: {headerFilter:"input"}, - person_id: {visible: false}, + person_id: {visible: false, headerFilter:"input"}, typ: {headerFilter:"input"}, - auftrag: {headerFilter:"input", width:"20%"}, + auftrag: {headerFilter:"input"}, lv_oe_kurzbz: {headerFilter:"input"}, gruppe: {headerFilter:"input"}, - lektor: {headerFilter:"input", widthGrow: 3}, + lektor: {headerFilter:"input"}, stunden: {align:"right", formatter: form_formatNulltoStringNumber, formatterParams:{precision:1}, headerFilter:"input", headerFilterFunc: hf_filterStringnumberWithOperator, bottomCalc:"sum", bottomCalcParams:{precision:1}}, - betrag: {align:"right", width: "8%", formatter: form_formatNulltoStringNumber, + betrag: {align:"right", formatter: form_formatNulltoStringNumber, headerFilter:"input", headerFilterFunc: hf_filterStringnumberWithOperator, bottomCalc:"sum", bottomCalcParams:{precision:2}, bottomCalcFormatter:"money", bottomCalcFormatterParams:{decimal: ",", thousand: ".", symbol:"€"}}, vertrag_id: {visible: false}, vertrag_stunden: {visible: false}, vertrag_betrag: {visible: false}, - mitarbeiter_uid: {visible: false}, - bestellt: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: bestellt_tooltip, width: "8%"}, - erteilt: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: erteilt_tooltip, width: "8%"}, - akzeptiert: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: akzeptiert_tooltip, width: "8%"}, - bestellt_von: {visible: false}, - erteilt_von: {visible: false}, - akzeptiert_von: {visible: false}, + mitarbeiter_uid: {visible: false, headerFilter:"input"}, + bestellt: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: bestellt_tooltip}, + erteilt: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: erteilt_tooltip}, + akzeptiert: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: akzeptiert_tooltip}, + bestellt_von: {visible: false, headerFilter:"input"}, + erteilt_von: {visible: false, headerFilter:"input"}, + akzeptiert_von: {visible: false, headerFilter:"input"}, }', // col properties ); diff --git a/application/views/lehre/lehrauftrag/cancelledLehrauftragData.php b/application/views/lehre/lehrauftrag/cancelledLehrauftragData.php index 04d314636..20629cb84 100644 --- a/application/views/lehre/lehrauftrag/cancelledLehrauftragData.php +++ b/application/views/lehre/lehrauftrag/cancelledLehrauftragData.php @@ -64,8 +64,11 @@ $tableWidgetArray = array( 'Storniert am' ), 'datasetRepOptions' => '{ - layout: "fitColumns", // fit columns to width of table - responsiveLayout: "hide", // hide columns that dont fit on the table + layout: "fitColumns", // fit columns to width of table + layoutColumnsOnNewData: true, // ajust column widths to the data each time TableWidget is loaded + persistentLayout: true, // enables persistence (default store in localStorage if available, else in cookie) + persistenceID: "cancelledLehrauftrag", // TableWidget unique id to store persistence data seperately for multiple tables + autoResize: false, // prevent auto resizing of table (false to allow adapting table size when cols are (de-)activated movableColumns: true, // allows changing column placeholder: func_placeholder(), rowFormatter:function(row){ @@ -79,22 +82,24 @@ $tableWidgetArray = array( }, tableBuilt: function(){ func_tableBuilt(this); - } + }, }', // tabulator properties 'datasetRepFieldsDefs' => '{ vertrag_id: {visible: false}, - vertragsstunden_studiensemester_kurzbz: {visible: false}, - vertragstyp_kurzbz: {widthGrow: 2}, - bezeichnung: {widthGrow: 2}, + vertragsstunden_studiensemester_kurzbz: {visible: false, widthShrink:1}, + vertragstyp_kurzbz: {minWidth: 300}, + bezeichnung: {minWidth: 400}, vertragsstunden: { align:"right", formatter: form_formatNulltoStringNumber, formatterParams:{precision:1}, - bottomCalc:"sum", bottomCalcParams:{precision:1} + bottomCalc:"sum", bottomCalcParams:{precision:1}, + minWidth: 300 }, betrag: { align:"right", formatter: form_formatNulltoStringNumber, - bottomCalc:"sum", bottomCalcParams:{precision:2}, bottomCalcFormatter:"money", bottomCalcFormatterParams:{decimal: ",", thousand: ".", symbol:"€"} + bottomCalc:"sum", bottomCalcParams:{precision:2}, bottomCalcFormatter:"money", bottomCalcFormatterParams:{decimal: ",", thousand: ".", symbol:"€"}, + minWidth: 200 }, - storniert: {align:"center", mutator: mut_formatStringDate, tooltip: storniert_tooltip}, + storniert: {align:"center", mutator: mut_formatStringDate, tooltip: storniert_tooltip, minWidth: 200}, storniert_von: {visible: false}, letzterStatus_vorStorniert: {visible: false} }', // col properties diff --git a/application/views/lehre/lehrauftrag/orderLehrauftrag.php b/application/views/lehre/lehrauftrag/orderLehrauftrag.php index b04aa7985..27793e8ba 100644 --- a/application/views/lehre/lehrauftrag/orderLehrauftrag.php +++ b/application/views/lehre/lehrauftrag/orderLehrauftrag.php @@ -35,7 +35,7 @@ $this->load->view(
-

@@ -205,12 +205,7 @@ $this->load->view(

-
-
- load->view('lehre/lehrauftrag/orderLehrauftragData.php'); ?> -
-
-
+ load->view('lehre/lehrauftrag/orderLehrauftragData.php'); ?>
diff --git a/application/views/lehre/lehrauftrag/orderLehrauftragData.php b/application/views/lehre/lehrauftrag/orderLehrauftragData.php index b2fa3ac2f..d78f5ecfe 100644 --- a/application/views/lehre/lehrauftrag/orderLehrauftragData.php +++ b/application/views/lehre/lehrauftrag/orderLehrauftragData.php @@ -371,20 +371,22 @@ $filterWidgetArray = array( 'Angenommen von' ), 'datasetRepOptions' => '{ - height: 700, - layout:"fitColumns", // fit columns to width of table - responsiveLayout:"hide", // hide columns that dont fit on the table - movableColumns: true, // allows changing column - placeholder: func_placeholder(), - headerFilterPlaceholder: " ", - groupBy:"lehrveranstaltung_id", - groupToggleElement:"header", //toggle group on click anywhere in the group header - groupHeader: function(value, count, data, group){ - return func_groupHeader(data); - }, - footerElement: func_footerElement(), - columnCalcs:"both", // show column calculations at top and bottom of table and in groups - index: "row_index", // assign specific column as unique id (important for row indexing) + height: func_height(this), + layout:"fitColumns", // fit columns to width of table + layoutColumnsOnNewData: true, // ajust column widths to the data each time TableWidget is loaded + persistentLayout:true, // enables persistence (default store in localStorage if available, else in cookie) + persistenceID: "orderLehrauftrag", // TableWidget unique id to store persistence data seperately for multiple tables + autoResize: false, // prevent auto resizing of table (false to allow adapting table size when cols are (de-)activated + movableColumns: true, // allows changing column order + placeholder: func_placeholder(), // shown on empty table (no data) + headerFilterPlaceholder: " ", + groupBy:"lehrveranstaltung_id", + groupToggleElement:"header", //toggle group on click anywhere in the group header + groupHeader: function(value, count, data, group){ + return func_groupHeader(data); + }, + columnCalcs:"both", // show column calculations at top and bottom of table and in groups + index: "row_index", // assign specific column as unique id (important for row indexing) selectable: true, // allows row selection selectableRangeMode: "click", // allows range selection using shift end click on end of range selectablePersistence:false, // deselect previously selected rows when table is filtered, sorted or paginated @@ -409,46 +411,50 @@ $filterWidgetArray = array( dataLoaded: function(data){ func_dataLoaded(data, this); }, + tableWidgetFooter: { + selectButtons: true + } }', // tabulator properties 'datasetRepFieldsDefs' => '{ // column status is built dynamically in funcTableBuilt() row_index: {visible: false}, - personalnummer: {visible: false}, - lehreinheit_id: {headerFilter:"input", bottomCalc:"count", width: "7%", + personalnummer: {visible: false, headerFilter:"input"}, + lehreinheit_id: {headerFilter:"input", bottomCalc:"count", minWidth: 115, bottomCalcFormatter:function(cell){return "Anzahl: " + cell.getValue();}}, lehrveranstaltung_id: {headerFilter:"input"}, - lv_bezeichnung: {visible: false}, - projektarbeit_id: {visible: false}, + lv_bezeichnung: {visible: false, headerFilter:"input"}, + projektarbeit_id: {visible: false, headerFilter:"input"}, studiensemester_kurzbz: {headerFilter:"input"}, - studiengang_kz: {visible: false}, - stg_typ_kurzbz: {headerFilter:"input", width: "5%"}, + studiengang_kz: {visible: false, headerFilter:"input"}, + stg_typ_kurzbz: {headerFilter:"input", minWidth: 70}, semester: {headerFilter:"input"}, - studienplan_bezeichnung: {headerFilter:"input", width: "7%"}, + studienplan_bezeichnung: {headerFilter:"input"}, orgform_kurzbz: {headerFilter:"input"}, - person_id: {visible: false}, - typ: {headerFilter:"input"}, - auftrag: {headerFilter:"input", width:"15%"}, - lv_oe_kurzbz: {headerFilter:"input"}, - gruppe: {headerFilter:"input"}, + person_id: {visible: false, headerFilter:"input"}, + typ: {headerFilter:"input", minWidth:100}, + auftrag: {headerFilter:"input", minWidth:280}, + lv_oe_kurzbz: {headerFilter:"input", minWidth:80}, + gruppe: {headerFilter:"input", minWidth:120}, lektor: {headerFilter:"input", widthGrow: 3}, - stunden: {align:"right", formatter: form_formatNulltoStringNumber, formatterParams:{precision:1}, + stunden: {align:"right", minWidth: 80, formatter: form_formatNulltoStringNumber, formatterParams:{precision:1}, headerFilter:"input", headerFilterFunc: hf_filterStringnumberWithOperator, bottomCalc:"sum", bottomCalcParams:{precision:1}}, - stundensatz: {visible: false}, - betrag: {align:"right", width: "8%", formatter: form_formatNulltoStringNumber, + stundensatz: {visible: false, align:"right", minWidth: 100, formatter: form_formatNulltoStringNumber, + headerFilter:"input", headerFilterFunc: hf_filterStringnumberWithOperator}, + betrag: {align:"right", minWidth: 120, formatter: form_formatNulltoStringNumber, headerFilter:"input", headerFilterFunc: hf_filterStringnumberWithOperator, bottomCalc:"sum", bottomCalcParams:{precision:2}, bottomCalcFormatter:"money", bottomCalcFormatterParams:{decimal: ",", thousand: ".", symbol:"€"}}, - vertrag_id: {visible: false}, + vertrag_id: {visible: false, headerFilter:"input"}, vertrag_stunden: {visible: false}, vertrag_betrag: {visible: false}, - mitarbeiter_uid: {visible: false}, - bestellt: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: bestellt_tooltip, width: "8%"}, - erteilt: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: erteilt_tooltip, width: "8%"}, - akzeptiert: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: akzeptiert_tooltip, width: "8%"}, - bestellt_von: {visible: false}, - erteilt_von: {visible: false}, - akzeptiert_von: {visible: false} + mitarbeiter_uid: {visible: false, headerFilter:"input"}, + bestellt: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: bestellt_tooltip, minWidth: 100}, + erteilt: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: erteilt_tooltip, minWidth: 100}, + akzeptiert: {align:"center", headerFilter:"input", mutator: mut_formatStringDate, tooltip: akzeptiert_tooltip, minWidth: 100}, + bestellt_von: {visible: false, headerFilter:"input"}, + erteilt_von: {visible: false, headerFilter:"input"}, + akzeptiert_von: {visible: false, headerFilter:"input"} }', // col properties ); diff --git a/application/views/widgets/table/table.php b/application/views/widgets/table/table.php index e73aec335..936c32dc8 100644 --- a/application/views/widgets/table/table.php +++ b/application/views/widgets/table/table.php @@ -1,17 +1,21 @@ - +
+ +
+
-
- -
+
+ +
+
diff --git a/public/js/TableWidget.js b/public/js/TableWidget.js index 89e7cf3d5..575ad6b12 100644 --- a/public/js/TableWidget.js +++ b/public/js/TableWidget.js @@ -182,11 +182,90 @@ var FHC_TableWidget = { */ _turnOnEvents: function(tableWidgetDiv) { + var tableUniqueId = tableWidgetDiv.attr('tableUniqueId'); + // If the choosen dataset representation is tablesorter if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABLESORTER) { FHC_TableWidget._enableTableSorter(tableWidgetDiv); // enable the tablesorter } + + // If the choosen dataset representation is tabulator + if (FHC_TableWidget._datasetRepresentation == DATASET_REP_TABULATOR) + { + // --------------------------------------------------------------------------------------------------------- + // Add events to the elements + // --------------------------------------------------------------------------------------------------------- + + // Click-Event to download csv + tableWidgetDiv.find('#download-csv').on('click', function() + { + // BOM for correct UTF-8 char output + tableWidgetDiv.find("#tableWidgetTabulator").tabulator("download", "csv", "data.csv", {bom:true}); + }) + + // Click-Event to collapse settings div + tableWidgetDiv.find('#settings').on('click', function() + { + + //... auch unteren event für settings hier hinein + $('#tabulatorSettings-' + tableUniqueId).collapse('toggle'); + + $(this).toggleClass('active focus'); + + // De/activate and un/focus on clicked settings button + if(!$(this).hasClass('active focus')) + { + $(this).css({'background-color': 'white', 'border-color' : '#ccc', 'outline': 'none'}); + } + else + { + $(this).css({'background-color': '#e6e6e6'}); + } + }) + + /** + * Click-Event to select all rows + * Default is ALL rows. This can be modified via hook tableWidgetHook_selectAllButton. + */ + if (typeof tableWidgetHook_selectAllButton == 'function') + { + tableWidgetDiv.find('#select-all').on('click', function() { + tableWidgetHook_selectAllButton(tableWidgetDiv); + }); + } + else + { + tableWidgetDiv.find('#select-all').on('click', function() { + tableWidgetDiv.find("#tableWidgetTabulator").tabulator('selectRow', true); + }); + } + + // Click-Event to deselect all rows + tableWidgetDiv.find('#deselect-all').on('click', function() + { + tableWidgetDiv.find("#tableWidgetTabulator").tabulator('deselectRow'); + }) + + // Click-Event to toggle column-picker columns + tableWidgetDiv.find('.btn-select-col').on('click', function() + { + var selected = this.value; + + tableWidgetDiv.find("#tableWidgetTabulator").tabulator('toggleColumn', selected); + + $(this).toggleClass('active'); + + if(!$(this).hasClass('active')) + { + $(this).css('background-color', 'white'); + } + else + { + $(this).css('background-color', '#e6e6e6'); + } + }) + } }, _renderDataset: function(tableWidgetDiv, data) { @@ -443,11 +522,43 @@ var FHC_TableWidget = { options.columns = arrayTabulatorColumns; options.data = data.dataset; - + options.rowSelectionChanged = function(data, rows){ + _func_rowSelectionChanged(data, rows); + }; + options.columnVisibilityChanged = function(column, visible) { + _func_columnVisibilityChanged(column, visible); + }; + // Renders the tabulator tableWidgetDiv.find("#tableWidgetTabulator").tabulator(options); } } + + // ------------------------------------------------------------------------------------------------------------- + // Render TableWidget Header and -Footer + // ------------------------------------------------------------------------------------------------------------- + + // Render tableWidgetHeader + var tabulatorHeaderHTML = _renderTabulatorHeaderHTML(tableWidgetDiv); + tableWidgetDiv.find('#tableWidgetHeader').append(tabulatorHeaderHTML); + + // Render the collapsable div triggered by button in tableWidgetHeader + var tabulatorHeaderCollapseHTML = _renderTabulatorHeaderCollapseHTML(tableWidgetDiv); + tableWidgetDiv.find('#tableWidgetHeader').after(tabulatorHeaderCollapseHTML); + + /** + * tableWidgetFooter is NOT rendered by default. + * tableWidgetFooter is rendered, if tableWidgetFooter is set in tabulators datasetRepOptions. + * Setup options like this: + * tableWidgetFooter: { + * selectButtons: true // tableWidgetFooter properties are checked in _renderTabulatorFooterHTML function + * } + */ + if (options.tableWidgetFooter != 'undefined' && options.tableWidgetFooter != null) + { + var tabulatorFooterHTML = _renderTabulatorFooterHTML(options.tableWidgetFooter); + tableWidgetDiv.find('#tableWidgetFooter').append(tabulatorFooterHTML); + } }, /** @@ -584,6 +695,122 @@ var FHC_TableWidget = { } }; +//********************************************************************************************************************** +// Render functions +//********************************************************************************************************************** +/* + * Processed when row selection changed. + * Displays number of selected rows on row selection change. + */ +function _func_rowSelectionChanged (data, rows){ + + $('#number-selected').html("Ausgewählte Zeilen: " + rows.length + ""); +} + +/* Processed when columns visibility changed (e.g. using the column picker). + * Redraws the table to expand columns to table width. + */ +function _func_columnVisibilityChanged(column, visible){ + + var table = column.getTable(); + + table.redraw(); +} + +// Returns TableWidget Header HTML (download-, setting button...) +function _renderTabulatorHeaderHTML(tableWidgetDiv){ + + var tableUniqueId = tableWidgetDiv.attr('tableUniqueId'); + + var tabulatorHeaderHTML = ''; + tabulatorHeaderHTML += ''; + + return tabulatorHeaderHTML; +} + +// Returns collapsable HTML element for TableWidget header buttons +function _renderTabulatorHeaderCollapseHTML(tableWidgetDiv){ + + var tableUniqueId = tableWidgetDiv.attr('tableUniqueId'); + + var tabulatorHeaderCollapseHTML = ''; + tabulatorHeaderCollapseHTML += '
'; + tabulatorHeaderCollapseHTML += '
'; + tabulatorHeaderCollapseHTML += '
'; + tabulatorHeaderCollapseHTML += '
'; + + tabulatorHeaderCollapseHTML += '
'; + tabulatorHeaderCollapseHTML += ''; // end panel-heading + tabulatorHeaderCollapseHTML += '
'; + tabulatorHeaderCollapseHTML += '
'; + tabulatorHeaderCollapseHTML += '
'; + + // Create column picker (Spalten einstellen) + tableWidgetDiv.find('#tableWidgetTabulator').tabulator('getColumns').forEach(function(column) + { + var field = column.getField(); + var title = column.getDefinition().title; + var active_status = column.getVisibility() ? 'active' : ''; + + // If certain columns should be excluded from the column picker (define them in a blacklist array) + if (typeof tableWidgetBlacklistArray_columnUnselectable != 'undefined' && + Array.isArray(tableWidgetBlacklistArray_columnUnselectable) && + tableWidgetBlacklistArray_columnUnselectable.length) + { + if ($.inArray(field, tableWidgetBlacklistArray_columnUnselectable) < 0) + { + tabulatorHeaderCollapseHTML += ''; + } + } + // Else provide all tabulator fields as pickable columns + else + { + tabulatorHeaderCollapseHTML += ''; + } + }); + + tabulatorHeaderCollapseHTML += '
'; // end btn-group + tabulatorHeaderCollapseHTML += '
'; // end panel-body + tabulatorHeaderCollapseHTML += '
'; // end panel-collapse + tabulatorHeaderCollapseHTML += '
'; // end panel + + tabulatorHeaderCollapseHTML += '
'; // end panel-group + tabulatorHeaderCollapseHTML += '
'; // end col + tabulatorHeaderCollapseHTML += '
'; // end row + + return tabulatorHeaderCollapseHTML; +} + +// Returns TableWidget Footer HTML (de-/select buttons,...) +function _renderTabulatorFooterHTML(tableWidgetFooterOptions){ + + var tabulatorFooterHTML = ''; + + // If property selectButtons is true, render 'Alle auswaehlen / Alle abwaehlen' buttons + if (tableWidgetFooterOptions.selectButtons != 'undefined' && tableWidgetFooterOptions.selectButtons == true) + { + tabulatorFooterHTML += ''; + tabulatorFooterHTML += '

'; + } + + return tabulatorFooterHTML; +} + /** * When JQuery is up */ diff --git a/public/js/lehre/lehrauftrag/acceptLehrauftrag.js b/public/js/lehre/lehrauftrag/acceptLehrauftrag.js index 03c72e2f2..31ade57fa 100644 --- a/public/js/lehre/lehrauftrag/acceptLehrauftrag.js +++ b/public/js/lehre/lehrauftrag/acceptLehrauftrag.js @@ -19,6 +19,18 @@ const ICON_LEHRAUFTRAG_APPROVED = ''; const ICON_LEHRAUFTRAG_CANCELLED = ''; +// Fields that should not be provided in the column picker +var tableWidgetBlacklistArray_columnUnselectable = [ + 'status', + 'row_index', + 'betrag', + 'vertrag_id', + 'vertrag_stunden', + 'vertrag_betrag', + 'storniert_von', // fields from cancelledLehrauftragData + 'letzterStatus_vorStorniert' // fields from cancelledLehrauftragData +]; + // ----------------------------------------------------------------------------------------------------------------- // Mutators - setter methods to manipulate table data when entering the tabulator // ----------------------------------------------------------------------------------------------------------------- @@ -254,66 +266,22 @@ function func_renderComplete(table){ ); } -// Tabulator footer element +// TableWidget Footer element // ----------------------------------------------------------------------------------------------------------------- -// Adds a footer with buttons select all / deselect all / download -function func_footerElement(){ - - var footer_html = '
'; - footer_html += '
'; - - footer_html += ''; - - footer_html += ''; - - footer_html += '
'; - footer_html += '
'; - - return footer_html; -} - -// Performs download CSV -function footer_downloadCSV(){ - $('#tableWidgetTabulator').tabulator("download", "csv", "data.csv", {bom:true}); // BOM for correct UTF-8 char output -} - /* - * Performs select all + * Hook to overwrite TableWigdgets select-all-button behaviour * Select all (filtered) rows and ignore rows that are bestellt and erteilt */ -function footer_selectAll(){ - $('#tableWidgetTabulator').tabulator('getRows', true) - .filter(row => row.getData().bestellt != null && // bestellt - row.getData().erteilt != null && // AND erteilt - row.getData().akzeptiert == null && // AND NOT akzeptiert - row.getData().status != 'Geändert') // AND NOT geändert +function tableWidgetHook_selectAllButton(tableWidgetDiv){ + tableWidgetDiv.find("#tableWidgetTabulator").tabulator('getRows', true) + .filter(row => row.getData().bestellt != null && // bestellt + row.getData().erteilt != null && // AND erteilt + row.getData().akzeptiert == null && // AND NOT akzeptiert + row.getData().status != 'Geändert') // AND NOT geändert .forEach((row => row.select())); } -/* - * Performs deselect all - * Deselect all (filtered) rows - */ -function footer_deselectAll(){ - $('#tableWidgetTabulator').tabulator('deselectRow'); -} - -// Displays number of selected rows on row selection change -function func_rowSelectionChanged(data, rows){ - $('#number-selected').html("Für Annehmen ausgewählt: " + rows.length + ""); -} - // ----------------------------------------------------------------------------------------------------------------- // Tabulator columns format functions // ----------------------------------------------------------------------------------------------------------------- diff --git a/public/js/lehre/lehrauftrag/approveLehrauftrag.js b/public/js/lehre/lehrauftrag/approveLehrauftrag.js index 94e6af473..f38d251c0 100644 --- a/public/js/lehre/lehrauftrag/approveLehrauftrag.js +++ b/public/js/lehre/lehrauftrag/approveLehrauftrag.js @@ -19,6 +19,17 @@ const ICON_LEHRAUFTRAG_ORDERED = ''; const ICON_LEHRAUFTRAG_CHANGED = ''; +// Fields that should not be provided in the column picker +var tableWidgetBlacklistArray_columnUnselectable = [ + 'status', + 'row_index', + 'personalnummer', + 'betrag', + 'vertrag_id', + 'vertrag_stunden', + 'vertrag_betrag' +]; + // ----------------------------------------------------------------------------------------------------------------- // Mutators - setter methods to manipulate table data when entering the tabulator // ----------------------------------------------------------------------------------------------------------------- @@ -301,65 +312,20 @@ function func_rowUpdated(row){ row.getElement().style["pointerEvents"] = "none"; } - -// Tabulator footer element +// TableWidget Footer element // ----------------------------------------------------------------------------------------------------------------- -// Adds a footer with buttons select all / deselect all / download -function func_footerElement(){ - - var footer_html = '
'; - footer_html += '
'; - - footer_html += ''; - - footer_html += ''; - - footer_html += '
'; - footer_html += '
'; - - return footer_html; -} - -// Performs download CSV -function footer_downloadCSV(){ - $('#tableWidgetTabulator').tabulator("download", "csv", "data.csv", {bom:true}); // BOM for correct UTF-8 char output -} - /* - * Performs select all + * Hook to overwrite TableWigdgets select-all-button behaviour * Select all (filtered) rows that are bestellt */ -function footer_selectAll(){ - $('#tableWidgetTabulator').tabulator('getRows', true) - .filter(row => row.getData().personalnummer >= 0 && // NOT dummies - row.getData().bestellt != null && // AND bestellt - row.getData().erteilt == null && // AND NOT erteilt - row.getData().status != 'Geändert') // AND NOT geaendert - .forEach((row => row.select())); -} - -/* - * Performs deselect all - * Deselect all (filtered) rows - */ -function footer_deselectAll(){ - $('#tableWidgetTabulator').tabulator('deselectRow'); -} - -// Displays number of selected rows on row selection change -function func_rowSelectionChanged(data, rows){ - $('#number-selected').html("Für Erteilung ausgewählt: " + rows.length + ""); +function tableWidgetHook_selectAllButton(tableWidgetDiv){ + tableWidgetDiv.find("#tableWidgetTabulator").tabulator('getRows', true) + .filter(row => row.getData().personalnummer >= 0 && // NOT dummies + row.getData().bestellt != null && // AND bestellt + row.getData().erteilt == null && // AND NOT erteilt + row.getData().status != 'Geändert') // AND NOT geaendert + .forEach((row => row.select())); } // ----------------------------------------------------------------------------------------------------------------- diff --git a/public/js/lehre/lehrauftrag/orderLehrauftrag.js b/public/js/lehre/lehrauftrag/orderLehrauftrag.js index 4e58272e5..a9a59efbb 100644 --- a/public/js/lehre/lehrauftrag/orderLehrauftrag.js +++ b/public/js/lehre/lehrauftrag/orderLehrauftrag.js @@ -18,6 +18,17 @@ const ICON_LEHRAUFTRAG_ORDERED = ''; const ICON_LEHRAUFTRAG_CHANGED = ''; +// Fields that should not be provided in the column picker +var tableWidgetBlacklistArray_columnUnselectable = [ + 'status', + 'row_index', + 'personalnummer', + 'betrag', + 'vertrag_id', + 'vertrag_stunden', + 'vertrag_betrag' +]; + // ----------------------------------------------------------------------------------------------------------------- // Mutators - setter methods to manipulate table data when entering the tabulator // ----------------------------------------------------------------------------------------------------------------- @@ -309,64 +320,20 @@ function func_rowUpdated(row){ row.getElement().style["pointerEvents"] = "none"; } -// Tabulator footer element +// TableWidget Footer element // ----------------------------------------------------------------------------------------------------------------- -// Adds a footer with buttons select all / deselect all / download -function func_footerElement(){ - - var footer_html = '
'; - footer_html += '
'; - - footer_html += ''; - - footer_html += ''; - - footer_html += '
'; - footer_html += '
'; - - return footer_html; -} - -// Performs download CSV -function footer_downloadCSV(){ - $('#tableWidgetTabulator').tabulator("download", "csv", "data.csv", {bom:true}); // BOM for correct UTF-8 char output -} - /* - * Performs select all + * Hook to overwrite TableWigdgets select-all-button behaviour * Select all (filtered) rows and ignore rows which have status bestellt */ -function footer_selectAll(){ - $('#tableWidgetTabulator').tabulator('getRows', true) - .filter(row => row.getData().personalnummer >= 0 && // NOT dummies - row.getData().bestellt == null || // AND neu - row.getData().bestellt != null && // OR (bestellt - row.getData().status == 'Geändert') // AND geaendert) - .forEach((row => row.select())); -} - -/* - * Performs deselect all - * Deselect all (filtered) rows - */ -function footer_deselectAll(){ - $('#tableWidgetTabulator').tabulator('deselectRow'); -} - -// Displays number of selected rows on row selection change -function func_rowSelectionChanged(data, rows){ - $('#number-selected').html("Für Bestellung ausgewählt: " + rows.length + ""); +function tableWidgetHook_selectAllButton(tableWidgetDiv){ + tableWidgetDiv.find("#tableWidgetTabulator").tabulator('getRows', true) + .filter(row => row.getData().personalnummer >= 0 && // NOT dummies + row.getData().bestellt == null || // AND neu + row.getData().bestellt != null && // OR (bestellt + row.getData().status == 'Geändert') // AND geaendert) + .forEach((row => row.select())); } // -----------------------------------------------------------------------------------------------------------------