From b270e65d2e147fab81d6d4a9fd3de2fcba00fccc Mon Sep 17 00:00:00 2001 From: Cris Date: Tue, 28 Jan 2020 12:26:08 +0100 Subject: [PATCH 01/12] 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())); } // ----------------------------------------------------------------------------------------------------------------- From 198a3eb2d541cd80512ce88060790289fb51516e Mon Sep 17 00:00:00 2001 From: Cris Date: Tue, 28 Jan 2020 12:29:18 +0100 Subject: [PATCH 02/12] Adjusted tabulator size to window screen size --- public/js/lehre/lehrauftrag/acceptLehrauftrag.js | 12 ++++++++++++ public/js/lehre/lehrauftrag/approveLehrauftrag.js | 11 +++++++++++ public/js/lehre/lehrauftrag/orderLehrauftrag.js | 11 +++++++++++ 3 files changed, 34 insertions(+) diff --git a/public/js/lehre/lehrauftrag/acceptLehrauftrag.js b/public/js/lehre/lehrauftrag/acceptLehrauftrag.js index 31ade57fa..c3d89ac52 100644 --- a/public/js/lehre/lehrauftrag/acceptLehrauftrag.js +++ b/public/js/lehre/lehrauftrag/acceptLehrauftrag.js @@ -93,6 +93,11 @@ function hf_filterStringnumberWithOperator(headerValue, rowValue, rowData){ // Tabulator table format functions // ----------------------------------------------------------------------------------------------------------------- +// Returns relative height (depending on screen size) +function func_height(table){ + return $(window).height() * 0.50; +} + // Displays text when table is empty function func_placeholder() { @@ -432,6 +437,13 @@ storniert_tooltip = function(cell){ } $(function() { + + // Redraw table on resize to fit tabulators height to windows height + window.addEventListener('resize', function(){ + $('#tableWidgetTabulator').tabulator('setHeight', $(window).height() * 0.50); + $('#tableWidgetTabulator').tabulator('redraw', true); + }); + // Show all rows $("#show-all").click(function(){ $('#tableWidgetTabulator').tabulator('clearFilter'); diff --git a/public/js/lehre/lehrauftrag/approveLehrauftrag.js b/public/js/lehre/lehrauftrag/approveLehrauftrag.js index f38d251c0..29e2d9651 100644 --- a/public/js/lehre/lehrauftrag/approveLehrauftrag.js +++ b/public/js/lehre/lehrauftrag/approveLehrauftrag.js @@ -106,6 +106,11 @@ function func_initialFilter(){ // Tabulator table format functions // ----------------------------------------------------------------------------------------------------------------- +// Returns relative height (depending on screen size) +function func_height(table){ + return $(window).height() * 0.50; +} + // Displays text when table is empty function func_placeholder() { @@ -492,6 +497,12 @@ akzeptiert_tooltip = function(cell){ } $(function() { + // Redraw table on resize to fit tabulators height to windows height + window.addEventListener('resize', function(){ + $('#tableWidgetTabulator').tabulator('setHeight', $(window).height() * 0.50); + $('#tableWidgetTabulator').tabulator('redraw', true); + }); + // Show all rows $("#show-all").click(function(){ $('#tableWidgetTabulator').tabulator('clearFilter'); diff --git a/public/js/lehre/lehrauftrag/orderLehrauftrag.js b/public/js/lehre/lehrauftrag/orderLehrauftrag.js index a9a59efbb..6471d988f 100644 --- a/public/js/lehre/lehrauftrag/orderLehrauftrag.js +++ b/public/js/lehre/lehrauftrag/orderLehrauftrag.js @@ -111,6 +111,11 @@ function func_dataLoaded(data, table){ // Tabulator table format functions // ----------------------------------------------------------------------------------------------------------------- +// Returns relative height (depending on screen size) +function func_height(table){ + return $(window).height() * 0.50; +} + // Displays text when table is empty function func_placeholder() { @@ -509,6 +514,12 @@ akzeptiert_tooltip = function(cell){ $(function() { + // Redraw table on resize to fit tabulators height to windows height + window.addEventListener('resize', function(){ + $('#tableWidgetTabulator').tabulator('setHeight', $(window).height() * 0.50); + $('#tableWidgetTabulator').tabulator('redraw', true); + }); + // Show all rows $("#show-all").click(function(){ $('#tableWidgetTabulator').tabulator('clearFilter'); From f22931ffa8939449e4a0d77d050957c18faadb2e Mon Sep 17 00:00:00 2001 From: Cris Date: Tue, 28 Jan 2020 12:33:23 +0100 Subject: [PATCH 03/12] Adapted row color when hovering on selected rows Before row color was changing from selected-blue to grey, although row was still selected, which was somehow confusing for the user. Now color stays blue. --- public/css/Tabulator.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/public/css/Tabulator.css b/public/css/Tabulator.css index 359f29e72..eac315f93 100644 --- a/public/css/Tabulator.css +++ b/public/css/Tabulator.css @@ -12,3 +12,8 @@ .tabulator-page.active { color: #337ab7 !important; } + +/* Avoid confusing color change when hovering over selected rows */ +.tabulator-row.tabulator-selected:hover { + background-color: #769bcc !important; +} \ No newline at end of file From bf1427e90104c40af12f56b7c8c33275b57c902a Mon Sep 17 00:00:00 2001 From: Cris Date: Wed, 29 Jan 2020 12:09:10 +0100 Subject: [PATCH 04/12] Added border to tabulator / tabulator header cells --- public/css/Tabulator.css | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/public/css/Tabulator.css b/public/css/Tabulator.css index eac315f93..ffbeed606 100644 --- a/public/css/Tabulator.css +++ b/public/css/Tabulator.css @@ -16,4 +16,18 @@ /* Avoid confusing color change when hovering over selected rows */ .tabulator-row.tabulator-selected:hover { background-color: #769bcc !important; +} + +/* Frame the table */ +.tabulator { + border: 1px solid lightgrey; + border-bottom: none; + margin-top: 20px; + border-top-left-radius: 0.5em; + border-top-right-radius: 0.5em; +} + +/* Frame the header cells */ +.tabulator-col:not(:first-of-type) { + border-left: 0.5px solid lightgrey; } \ No newline at end of file From bc1c33432f9ace5a0398bf195cd26c02814051a2 Mon Sep 17 00:00:00 2001 From: Cris Date: Thu, 30 Jan 2020 12:24:28 +0100 Subject: [PATCH 05/12] Avoid of triple points at end of header title (more space) --- public/css/Tabulator.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/public/css/Tabulator.css b/public/css/Tabulator.css index ffbeed606..718295f4e 100644 --- a/public/css/Tabulator.css +++ b/public/css/Tabulator.css @@ -30,4 +30,9 @@ /* Frame the header cells */ .tabulator-col:not(:first-of-type) { border-left: 0.5px solid lightgrey; +} + +/* More space for header title (avoids triple points at the end) */ +.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title { + overflow: initial; } \ No newline at end of file From 3b2b279bf99b4b1e23fdbd439d90c32c82860ef1 Mon Sep 17 00:00:00 2001 From: Cris Date: Thu, 30 Jan 2020 12:27:13 +0100 Subject: [PATCH 06/12] Changed default visibility / order of columns Now fitted to the users primary needs. Columns can be displayed/hidden via Columnpicker by user afterwards. --- .../lehrauftrag/acceptLehrauftragData.php | 35 ++++++------ .../lehrauftrag/approveLehrauftragData.php | 40 +++++++------- .../lehrauftrag/orderLehrauftragData.php | 55 ++++++++++--------- 3 files changed, 69 insertions(+), 61 deletions(-) diff --git a/application/views/lehre/lehrauftrag/acceptLehrauftragData.php b/application/views/lehre/lehrauftrag/acceptLehrauftragData.php index 08cc94e5f..3211e86a9 100644 --- a/application/views/lehre/lehrauftrag/acceptLehrauftragData.php +++ b/application/views/lehre/lehrauftrag/acceptLehrauftragData.php @@ -9,19 +9,19 @@ $query = ' SELECT /* provide extra row index for tabulator, because no other column has unique ids */ ROW_NUMBER() OVER () AS "row_index", + auftrag, + stg_typ_kurzbz, + gruppe, + typ, lehreinheit_id, lehrveranstaltung_id, projektarbeit_id, studiensemester_kurzbz, studiengang_kz, - stg_typ_kurzbz, semester, orgform_kurzbz, person_id, - typ, - auftrag, lv_oe_kurzbz, - gruppe, stunden, betrag, vertrag_id, @@ -299,19 +299,19 @@ $filterWidgetArray = array( 'reloadDataset' => true, // reload query on page refresh 'columnsAliases' => array( // TODO: use phrasen 'Status', // alias for row_index, because row_index is formatted to display the status icons + 'LV- / Projektbezeichnung', + 'Studiengang', + 'Gruppe', + 'Typ', 'LV-Teil', 'LV-ID', 'PA-ID', 'Studiensemester', 'Studiengang-KZ', - 'Studiengang', 'Semester', 'OrgForm', 'Person-ID', - 'Typ', - 'LV- / Projektbezeichnung', 'Organisationseinheit', - 'Gruppe', 'Stunden', 'Betrag', 'Vertrag-ID', @@ -365,19 +365,22 @@ $filterWidgetArray = array( }', // tabulator properties 'datasetRepFieldsDefs' => '{ row_index: {visible:false}, // necessary for row indexing - lehreinheit_id: {headerFilter:"input", bottomCalc:"count", bottomCalcFormatter:function(cell){return "Anzahl: " + cell.getValue();}}, - lehrveranstaltung_id: {headerFilter:"input"}, + auftrag: { + headerFilter:"input", widthGrow: 3, + bottomCalc:"count", bottomCalcFormatter:function(cell){return "Anzahl: " + cell.getValue();} + }, + stg_typ_kurzbz: {headerFilter:"input"}, + gruppe: {headerFilter:"input"}, + typ: {headerFilter:"input"}, + lehreinheit_id: {visible: false, headerFilter:"input"}, + lehrveranstaltung_id: {visible: false, 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"}, + orgform_kurzbz: {visible: false, headerFilter:"input"}, person_id: {visible: false, headerFilter:"input"}, - typ: {headerFilter:"input"}, - auftrag: {headerFilter:"input"}, - lv_oe_kurzbz: {headerFilter:"input"}, - gruppe: {headerFilter:"input"}, + lv_oe_kurzbz: {visible: false, headerFilter:"input"}, stunden: {align:"right", formatter: form_formatNulltoStringNumber, formatterParams:{precision:1}, headerFilter:"input", headerFilterFunc: hf_filterStringnumberWithOperator, bottomCalc:"sum", bottomCalcParams:{precision:1} diff --git a/application/views/lehre/lehrauftrag/approveLehrauftragData.php b/application/views/lehre/lehrauftrag/approveLehrauftragData.php index 111e7bd01..4ad03e138 100644 --- a/application/views/lehre/lehrauftrag/approveLehrauftragData.php +++ b/application/views/lehre/lehrauftrag/approveLehrauftragData.php @@ -9,20 +9,20 @@ SELECT /* provide extra row index for tabulator, because no other column has unique ids */ ROW_NUMBER() OVER () AS "row_index", personalnummer, + auftrag, + stg_typ_kurzbz, + gruppe, + typ, lehreinheit_id, lehrveranstaltung_id, lv_bezeichnung, projektarbeit_id, studiensemester_kurzbz, studiengang_kz, - stg_typ_kurzbz, semester, orgform_kurzbz, person_id, - typ, - auftrag, lv_oe_kurzbz, - gruppe, lektor, stunden, betrag, @@ -308,20 +308,20 @@ $filterWidgetArray = array( 'columnsAliases' => array( // TODO: use phrasen 'Status', // alias for row_index, because row_index is formatted to display the status icons 'Personalnummer', + 'LV- / Projektbezeichnung', + 'Studiengang', + 'Gruppe', + 'Typ', 'LV-Teil', 'LV-ID', 'LV', 'PA-ID', 'Studiensemester', 'Studiengang-KZ', - 'Studiengang', 'Semester', 'OrgForm', 'Person-ID', - 'Typ', - 'LV- / Projektbezeichnung', 'Organisationseinheit', - 'Gruppe', 'Lektor', 'Stunden', 'Betrag', @@ -384,22 +384,24 @@ $filterWidgetArray = array( // column status is built dynamically in funcTableBuilt(), row_index: {visible:false}, // necessary for row indexing personalnummer: {visible: false, headerFilter:"input"}, - lehreinheit_id: {headerFilter:"input", bottomCalc:"count", - bottomCalcFormatter:function(cell){return "Anzahl: " + cell.getValue();},}, - lehrveranstaltung_id: {headerFilter:"input"}, + auftrag: { + headerFilter:"input", widthGrow: 2, + bottomCalc:"count", bottomCalcFormatter:function(cell){return "Anzahl: " + cell.getValue();} + }, + stg_typ_kurzbz: {headerFilter:"input"}, + gruppe: {headerFilter:"input"}, + typ: {headerFilter:"input"}, + lehreinheit_id: {visible: false, headerFilter:"input"}, + lehrveranstaltung_id: {visible: false, headerFilter:"input"}, lv_bezeichnung: {visible: false, headerFilter:"input"}, projektarbeit_id: {visible: false, headerFilter:"input"}, - studiensemester_kurzbz: {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"}, + orgform_kurzbz: {visible: false, headerFilter:"input"}, person_id: {visible: false, headerFilter:"input"}, - typ: {headerFilter:"input"}, - auftrag: {headerFilter:"input"}, - lv_oe_kurzbz: {headerFilter:"input"}, - gruppe: {headerFilter:"input"}, - lektor: {headerFilter:"input"}, + lv_oe_kurzbz: {visible: false, headerFilter:"input"}, + lektor: {headerFilter:"input", widthGrow: 2}, stunden: {align:"right", formatter: form_formatNulltoStringNumber, formatterParams:{precision:1}, headerFilter:"input", headerFilterFunc: hf_filterStringnumberWithOperator, bottomCalc:"sum", bottomCalcParams:{precision:1}}, diff --git a/application/views/lehre/lehrauftrag/orderLehrauftragData.php b/application/views/lehre/lehrauftrag/orderLehrauftragData.php index d78f5ecfe..5576e7886 100644 --- a/application/views/lehre/lehrauftrag/orderLehrauftragData.php +++ b/application/views/lehre/lehrauftrag/orderLehrauftragData.php @@ -9,13 +9,16 @@ SELECT /* provide extra row index for tabulator, because no other column has unique ids */ ROW_NUMBER() OVER () AS "row_index", personalnummer, + auftrag, + stg_typ_kurzbz, + gruppe, + typ, lehreinheit_id, lehrveranstaltung_id, lv_bezeichnung, projektarbeit_id, studiensemester_kurzbz, studiengang_kz, - stg_typ_kurzbz, semester, /* get valid STPL(s), to which the lehrveranstaltung is assigned to (can be more) */ /* therefore join over lv, studiensemester and semester */ @@ -49,10 +52,7 @@ SELECT ) AS "studienplan_bezeichnung", orgform_kurzbz, person_id, - typ, - auftrag, lv_oe_kurzbz, - gruppe, lektor, stunden, stundensatz, @@ -340,21 +340,22 @@ $filterWidgetArray = array( 'columnsAliases' => array( // TODO: use phrasen 'Status', // alias for row_index, because row_index is formatted to display the status icons 'Personalnummer', + 'LV- / Projektbezeichnung', + 'Studiengang', + 'Gruppe', + 'Typ', 'LV-Teil', 'LV-ID', 'LV', 'PA-ID', 'Studiensemester', 'Studiengang-KZ', - 'Studiengang', + 'Semester', 'Studienplan', 'OrgForm', 'Person-ID', - 'Typ', - 'LV- / Projektbezeichnung', 'Organisationseinheit', - 'Gruppe', 'Lektor', 'Stunden', 'Stundensatz', @@ -419,29 +420,31 @@ $filterWidgetArray = array( // column status is built dynamically in funcTableBuilt() row_index: {visible: false}, personalnummer: {visible: false, headerFilter:"input"}, - lehreinheit_id: {headerFilter:"input", bottomCalc:"count", minWidth: 115, - bottomCalcFormatter:function(cell){return "Anzahl: " + cell.getValue();}}, - lehrveranstaltung_id: {headerFilter:"input"}, + auftrag: { + headerFilter:"input", widthGrow: 2, + bottomCalc:"count", bottomCalcFormatter:function(cell){return "Anzahl: " + cell.getValue();} + }, + stg_typ_kurzbz: {headerFilter:"input"}, + gruppe: {headerFilter:"input"}, + typ: {headerFilter:"input"}, + lehreinheit_id: {visible: false, headerFilter:"input"}, + lehrveranstaltung_id: {visible: false, headerFilter:"input"}, lv_bezeichnung: {visible: false, headerFilter:"input"}, projektarbeit_id: {visible: false, headerFilter:"input"}, - studiensemester_kurzbz: {headerFilter:"input"}, + studiensemester_kurzbz: {visible: false, headerFilter:"input"}, studiengang_kz: {visible: false, headerFilter:"input"}, - stg_typ_kurzbz: {headerFilter:"input", minWidth: 70}, semester: {headerFilter:"input"}, - studienplan_bezeichnung: {headerFilter:"input"}, - orgform_kurzbz: {headerFilter:"input"}, + studienplan_bezeichnung: {visible: false, headerFilter:"input"}, + orgform_kurzbz: {visible: false, headerFilter:"input", widthGrow: 2}, 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", minWidth: 80, formatter: form_formatNulltoStringNumber, formatterParams:{precision:1}, + lv_oe_kurzbz: {headerFilter:"input"}, + lektor: {headerFilter:"input", widthGrow: 2}, + stunden: {align:"right", formatter: form_formatNulltoStringNumber, formatterParams:{precision:1}, headerFilter:"input", headerFilterFunc: hf_filterStringnumberWithOperator, bottomCalc:"sum", bottomCalcParams:{precision:1}}, - stundensatz: {visible: false, align:"right", minWidth: 100, formatter: form_formatNulltoStringNumber, + stundensatz: {visible: false, align:"right", formatter: form_formatNulltoStringNumber, headerFilter:"input", headerFilterFunc: hf_filterStringnumberWithOperator}, - betrag: {align:"right", minWidth: 120, 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:"€"}}, @@ -449,9 +452,9 @@ $filterWidgetArray = array( vertrag_stunden: {visible: false}, vertrag_betrag: {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: {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"} From 8c36b0b67a5a1303de3a89ccf0b1f527f837af37 Mon Sep 17 00:00:00 2001 From: Cris Date: Thu, 30 Jan 2020 12:28:51 +0100 Subject: [PATCH 07/12] =?UTF-8?q?Reduced=20default=20minimum=20size=20of?= =?UTF-8?q?=20columns=20in=20Stornierte=20Lehrauftr=C3=A4ge?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/lehre/lehrauftrag/cancelledLehrauftragData.php | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/application/views/lehre/lehrauftrag/cancelledLehrauftragData.php b/application/views/lehre/lehrauftrag/cancelledLehrauftragData.php index 20629cb84..2dbecbb69 100644 --- a/application/views/lehre/lehrauftrag/cancelledLehrauftragData.php +++ b/application/views/lehre/lehrauftrag/cancelledLehrauftragData.php @@ -87,12 +87,12 @@ $tableWidgetArray = array( 'datasetRepFieldsDefs' => '{ vertrag_id: {visible: false}, vertragsstunden_studiensemester_kurzbz: {visible: false, widthShrink:1}, - vertragstyp_kurzbz: {minWidth: 300}, - bezeichnung: {minWidth: 400}, + vertragstyp_kurzbz: {minWidth: 200}, + bezeichnung: {minWidth: 200}, vertragsstunden: { align:"right", formatter: form_formatNulltoStringNumber, formatterParams:{precision:1}, bottomCalc:"sum", bottomCalcParams:{precision:1}, - minWidth: 300 + minWidth: 200 }, betrag: { align:"right", formatter: form_formatNulltoStringNumber, From e1df2cbf23ed86db046736cc1514d46e72bd47bc Mon Sep 17 00:00:00 2001 From: Cris Date: Thu, 30 Jan 2020 12:30:26 +0100 Subject: [PATCH 08/12] Added tooltips on column headers (displaying title) in TableWidget Now this is a standard behaviour of TableWidget. --- public/js/TableWidget.js | 1 + 1 file changed, 1 insertion(+) diff --git a/public/js/TableWidget.js b/public/js/TableWidget.js index 575ad6b12..7c1b01b93 100644 --- a/public/js/TableWidget.js +++ b/public/js/TableWidget.js @@ -522,6 +522,7 @@ var FHC_TableWidget = { options.columns = arrayTabulatorColumns; options.data = data.dataset; + options.tooltipsHeader = true; // set header tooltip with column title options.rowSelectionChanged = function(data, rows){ _func_rowSelectionChanged(data, rows); }; From 6897ccdd6b4973e260ebbb355c0f751dc0dc7f10 Mon Sep 17 00:00:00 2001 From: Cris Date: Thu, 30 Jan 2020 12:43:50 +0100 Subject: [PATCH 09/12] Moved empty table placeholder text to TableWidget Now this is a standard behaviour of TableWidget. --- .../views/lehre/lehrauftrag/acceptLehrauftragData.php | 1 - .../views/lehre/lehrauftrag/approveLehrauftragData.php | 1 - .../views/lehre/lehrauftrag/cancelledLehrauftragData.php | 1 - .../views/lehre/lehrauftrag/orderLehrauftragData.php | 1 - public/js/TableWidget.js | 8 ++++++++ public/js/lehre/lehrauftrag/acceptLehrauftrag.js | 6 ------ public/js/lehre/lehrauftrag/approveLehrauftrag.js | 6 ------ public/js/lehre/lehrauftrag/orderLehrauftrag.js | 6 ------ 8 files changed, 8 insertions(+), 22 deletions(-) diff --git a/application/views/lehre/lehrauftrag/acceptLehrauftragData.php b/application/views/lehre/lehrauftrag/acceptLehrauftragData.php index 3211e86a9..3fa2c603c 100644 --- a/application/views/lehre/lehrauftrag/acceptLehrauftragData.php +++ b/application/views/lehre/lehrauftrag/acceptLehrauftragData.php @@ -332,7 +332,6 @@ $filterWidgetArray = array( 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) selectable: true, // allow row selection diff --git a/application/views/lehre/lehrauftrag/approveLehrauftragData.php b/application/views/lehre/lehrauftrag/approveLehrauftragData.php index 4ad03e138..7cc5bd533 100644 --- a/application/views/lehre/lehrauftrag/approveLehrauftragData.php +++ b/application/views/lehre/lehrauftrag/approveLehrauftragData.php @@ -344,7 +344,6 @@ $filterWidgetArray = array( 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 diff --git a/application/views/lehre/lehrauftrag/cancelledLehrauftragData.php b/application/views/lehre/lehrauftrag/cancelledLehrauftragData.php index 2dbecbb69..cbf7d8b55 100644 --- a/application/views/lehre/lehrauftrag/cancelledLehrauftragData.php +++ b/application/views/lehre/lehrauftrag/cancelledLehrauftragData.php @@ -70,7 +70,6 @@ $tableWidgetArray = array( 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){ func_rowFormatter(row); }, diff --git a/application/views/lehre/lehrauftrag/orderLehrauftragData.php b/application/views/lehre/lehrauftrag/orderLehrauftragData.php index 5576e7886..f4a122deb 100644 --- a/application/views/lehre/lehrauftrag/orderLehrauftragData.php +++ b/application/views/lehre/lehrauftrag/orderLehrauftragData.php @@ -379,7 +379,6 @@ $filterWidgetArray = array( 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 diff --git a/public/js/TableWidget.js b/public/js/TableWidget.js index 7c1b01b93..7b914cc60 100644 --- a/public/js/TableWidget.js +++ b/public/js/TableWidget.js @@ -523,6 +523,7 @@ var FHC_TableWidget = { options.columns = arrayTabulatorColumns; options.data = data.dataset; options.tooltipsHeader = true; // set header tooltip with column title + options.placeholder = _func_placeholder(); // display text when table is empty options.rowSelectionChanged = function(data, rows){ _func_rowSelectionChanged(data, rows); }; @@ -718,6 +719,13 @@ function _func_columnVisibilityChanged(column, visible){ table.redraw(); } +/* + * Displays text when table is empty + */ +function _func_placeholder(){ + return "

Keine Daten vorhanden.

"; +} + // Returns TableWidget Header HTML (download-, setting button...) function _renderTabulatorHeaderHTML(tableWidgetDiv){ diff --git a/public/js/lehre/lehrauftrag/acceptLehrauftrag.js b/public/js/lehre/lehrauftrag/acceptLehrauftrag.js index c3d89ac52..341a325fc 100644 --- a/public/js/lehre/lehrauftrag/acceptLehrauftrag.js +++ b/public/js/lehre/lehrauftrag/acceptLehrauftrag.js @@ -98,12 +98,6 @@ function func_height(table){ return $(window).height() * 0.50; } -// Displays text when table is empty -function func_placeholder() -{ - return "

Keine Daten vorhanden.

"; -} - // Formats the rows function func_rowFormatter(row){ var bestellt = row.getData().bestellt; diff --git a/public/js/lehre/lehrauftrag/approveLehrauftrag.js b/public/js/lehre/lehrauftrag/approveLehrauftrag.js index 29e2d9651..7326a95c1 100644 --- a/public/js/lehre/lehrauftrag/approveLehrauftrag.js +++ b/public/js/lehre/lehrauftrag/approveLehrauftrag.js @@ -111,12 +111,6 @@ function func_height(table){ return $(window).height() * 0.50; } -// Displays text when table is empty -function func_placeholder() -{ - return "

Keine Daten vorhanden.

"; -} - // Formats the group header function func_groupHeader(data){ return data[0].lv_bezeichnung + "  " + ' ( LV-ID: ' + data[0].lehrveranstaltung_id + ' )'; // change name to lehrveranstaltung; diff --git a/public/js/lehre/lehrauftrag/orderLehrauftrag.js b/public/js/lehre/lehrauftrag/orderLehrauftrag.js index 6471d988f..379a02b6a 100644 --- a/public/js/lehre/lehrauftrag/orderLehrauftrag.js +++ b/public/js/lehre/lehrauftrag/orderLehrauftrag.js @@ -116,12 +116,6 @@ function func_height(table){ return $(window).height() * 0.50; } -// Displays text when table is empty -function func_placeholder() -{ - return "

Keine Daten vorhanden.

"; -} - // Formats the group header function func_groupHeader(data) { return data[0].lv_bezeichnung + "  " + ' ( LV-ID: ' + data[0].lehrveranstaltung_id + ' )'; // change name to lehrveranstaltung; From bce7f60df43509875467378ecf89c4ec7e986bbc Mon Sep 17 00:00:00 2001 From: Cris Date: Thu, 30 Jan 2020 13:22:49 +0100 Subject: [PATCH 10/12] Moved layout options to TableWidget Now this is a standard behaviour of TableWidget. --- .../views/lehre/lehrauftrag/acceptLehrauftragData.php | 3 --- .../views/lehre/lehrauftrag/approveLehrauftragData.php | 3 --- .../views/lehre/lehrauftrag/cancelledLehrauftragData.php | 6 ------ .../views/lehre/lehrauftrag/orderLehrauftragData.php | 3 --- public/js/TableWidget.js | 7 +++++-- 5 files changed, 5 insertions(+), 17 deletions(-) diff --git a/application/views/lehre/lehrauftrag/acceptLehrauftragData.php b/application/views/lehre/lehrauftrag/acceptLehrauftragData.php index 3fa2c603c..7b9443edb 100644 --- a/application/views/lehre/lehrauftrag/acceptLehrauftragData.php +++ b/application/views/lehre/lehrauftrag/acceptLehrauftragData.php @@ -328,10 +328,7 @@ $filterWidgetArray = array( 'datasetRepOptions' => '{ 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 headerFilterPlaceholder: " ", index: "row_index", // assign specific column as unique id (important for row indexing) selectable: true, // allow row selection diff --git a/application/views/lehre/lehrauftrag/approveLehrauftragData.php b/application/views/lehre/lehrauftrag/approveLehrauftragData.php index 7cc5bd533..5e1ae27b6 100644 --- a/application/views/lehre/lehrauftrag/approveLehrauftragData.php +++ b/application/views/lehre/lehrauftrag/approveLehrauftragData.php @@ -340,10 +340,7 @@ $filterWidgetArray = array( 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 headerFilterPlaceholder: " ", groupBy:"lehrveranstaltung_id", groupToggleElement:"header", //toggle group on click anywhere in the group header diff --git a/application/views/lehre/lehrauftrag/cancelledLehrauftragData.php b/application/views/lehre/lehrauftrag/cancelledLehrauftragData.php index cbf7d8b55..ba7b0d4f6 100644 --- a/application/views/lehre/lehrauftrag/cancelledLehrauftragData.php +++ b/application/views/lehre/lehrauftrag/cancelledLehrauftragData.php @@ -64,12 +64,6 @@ $tableWidgetArray = array( 'Storniert am' ), 'datasetRepOptions' => '{ - 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 rowFormatter:function(row){ func_rowFormatter(row); }, diff --git a/application/views/lehre/lehrauftrag/orderLehrauftragData.php b/application/views/lehre/lehrauftrag/orderLehrauftragData.php index f4a122deb..ca671fbd4 100644 --- a/application/views/lehre/lehrauftrag/orderLehrauftragData.php +++ b/application/views/lehre/lehrauftrag/orderLehrauftragData.php @@ -375,10 +375,7 @@ $filterWidgetArray = array( 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 headerFilterPlaceholder: " ", groupBy:"lehrveranstaltung_id", groupToggleElement:"header", //toggle group on click anywhere in the group header diff --git a/public/js/TableWidget.js b/public/js/TableWidget.js index 7b914cc60..204d69280 100644 --- a/public/js/TableWidget.js +++ b/public/js/TableWidget.js @@ -522,8 +522,11 @@ var FHC_TableWidget = { options.columns = arrayTabulatorColumns; options.data = data.dataset; - options.tooltipsHeader = true; // set header tooltip with column title - options.placeholder = _func_placeholder(); // display text when table is empty + options.persistentLayout = true; // enables persistence (default store in localStorage if available, else in cookie) + options.persistenceID = data.tableUniqueId; // TableWidget unique id to store persistence data seperately for multiple tables + options.movableColumns = true; // allows changing column order + options.tooltipsHeader = true; // set header tooltip with column title + options.placeholder = _func_placeholder(); // display text when table is empty options.rowSelectionChanged = function(data, rows){ _func_rowSelectionChanged(data, rows); }; From b2542b5fcca581f37a9f9ef1794009edefd06e09 Mon Sep 17 00:00:00 2001 From: Cris Date: Thu, 30 Jan 2020 17:09:31 +0100 Subject: [PATCH 11/12] Added HELP button and collapsable help-info to TableWidget [ALPHA VERSION] Now this is a standard behaviour of TableWidget. Removed also table related help information from general Hilfe-zu-dieser-Seite help. [ALPHA VERSION]: minor issue to be fixed: button color not toggling correctly when opening help then settings (and way round) --- .../lehre/lehrauftrag/acceptLehrauftrag.php | 22 ----- .../lehre/lehrauftrag/approveLehrauftrag.php | 22 ----- .../lehre/lehrauftrag/orderLehrauftrag.php | 23 ------ public/css/Tabulator.css | 1 - public/js/TableWidget.js | 82 ++++++++++++++++++- 5 files changed, 81 insertions(+), 69 deletions(-) diff --git a/application/views/lehre/lehrauftrag/acceptLehrauftrag.php b/application/views/lehre/lehrauftrag/acceptLehrauftrag.php index 14ebacecb..15de019e5 100644 --- a/application/views/lehre/lehrauftrag/acceptLehrauftrag.php +++ b/application/views/lehre/lehrauftrag/acceptLehrauftrag.php @@ -83,28 +83,6 @@ $this->load->view(

- -

Auswahl

-
- -
-
- -

Ansicht

-
- Spaltenbreite verändern -

- Um die Spaltenbreite zu verändern, fährt man im Spaltenkopf langsam mit dem Mauszeiger auf - den rechten Rand der entprechenden Spalte.
- Sobald sich der Mauszeiger in einen Doppelpfeil verwandelt, wird die Maustaste geklickt und - mit gedrückter Maustaste die Spalte nach rechts erweitert oder nach links verkleinert. -

-
-
diff --git a/application/views/lehre/lehrauftrag/approveLehrauftrag.php b/application/views/lehre/lehrauftrag/approveLehrauftrag.php index f36ae7dc7..ed1852654 100644 --- a/application/views/lehre/lehrauftrag/approveLehrauftrag.php +++ b/application/views/lehre/lehrauftrag/approveLehrauftrag.php @@ -123,28 +123,6 @@ $this->load->view(
-

Auswahl

-
- -
-
- -

Ansicht

-
- Spaltenbreite verändern -

- Um die Spaltenbreite zu verändern, fährt man im Spaltenkopf langsam mit dem Mauszeiger auf - den rechten Rand der entprechenden Spalte.
- Sobald sich der Mauszeiger in einen Doppelpfeil verwandelt, wird die Maustaste geklickt und - mit gedrückter Maustaste die Spalte nach rechts erweitert oder nach links verkleinert. -

-
-
- diff --git a/application/views/lehre/lehrauftrag/orderLehrauftrag.php b/application/views/lehre/lehrauftrag/orderLehrauftrag.php index 27793e8ba..1e79bee0d 100644 --- a/application/views/lehre/lehrauftrag/orderLehrauftrag.php +++ b/application/views/lehre/lehrauftrag/orderLehrauftrag.php @@ -124,29 +124,6 @@ $this->load->view(
- -

Auswahl

-
- -
-
- -

Ansicht

-
- Spaltenbreite verändern -

- Um die Spaltenbreite zu verändern, fährt man im Spaltenkopf langsam mit dem Mauszeiger auf - den rechten Rand der entprechenden Spalte.
- Sobald sich der Mauszeiger in einen Doppelpfeil verwandelt, wird die Maustaste geklickt und - mit gedrückter Maustaste die Spalte nach rechts erweitert oder nach links verkleinert. -

-
-
- diff --git a/public/css/Tabulator.css b/public/css/Tabulator.css index 718295f4e..0545101c9 100644 --- a/public/css/Tabulator.css +++ b/public/css/Tabulator.css @@ -22,7 +22,6 @@ .tabulator { border: 1px solid lightgrey; border-bottom: none; - margin-top: 20px; border-top-left-radius: 0.5em; border-top-right-radius: 0.5em; } diff --git a/public/js/TableWidget.js b/public/js/TableWidget.js index 204d69280..bc49b8c69 100644 --- a/public/js/TableWidget.js +++ b/public/js/TableWidget.js @@ -204,6 +204,32 @@ var FHC_TableWidget = { tableWidgetDiv.find("#tableWidgetTabulator").tabulator("download", "csv", "data.csv", {bom:true}); }) + // Click-Event to collapse help div + tableWidgetDiv.find('#help').on('click', function() + { + + //... auch unteren event für settings hier hinein + $('#tabulatorHelp-' + 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'}); + } + + if($('#tabulatorSettings-' + tableUniqueId).hasClass('collapse in')) + { + $('#tabulatorSettings-' + tableUniqueId).removeClass('in'); + // $('#settings').toggleClass('active focus'); + } + }) + // Click-Event to collapse settings div tableWidgetDiv.find('#settings').on('click', function() { @@ -222,6 +248,12 @@ var FHC_TableWidget = { { $(this).css({'background-color': '#e6e6e6'}); } + + if($('#tabulatorHelp-' + tableUniqueId).hasClass('collapse in')) + { + $('#tabulatorHelp-' + tableUniqueId).removeClass('in'); + // $('#help').toggleClass('active focus'); + } }) /** @@ -738,7 +770,8 @@ function _renderTabulatorHeaderHTML(tableWidgetDiv){ tabulatorHeaderHTML += ''; @@ -751,6 +784,8 @@ function _renderTabulatorHeaderCollapseHTML(tableWidgetDiv){ var tableUniqueId = tableWidgetDiv.attr('tableUniqueId'); var tabulatorHeaderCollapseHTML = ''; + + // CollapseHTML 'Settings' tabulatorHeaderCollapseHTML += '
'; tabulatorHeaderCollapseHTML += '
'; tabulatorHeaderCollapseHTML += '
'; @@ -799,6 +834,51 @@ function _renderTabulatorHeaderCollapseHTML(tableWidgetDiv){ tabulatorHeaderCollapseHTML += '
'; // end col tabulatorHeaderCollapseHTML += '
'; // end row + // CollapseHTML 'Help' + tabulatorHeaderCollapseHTML += '
'; + tabulatorHeaderCollapseHTML += '
'; + tabulatorHeaderCollapseHTML += '
'; + tabulatorHeaderCollapseHTML += '
'; + + tabulatorHeaderCollapseHTML += '

Tabelleneinstellungen

'; + tabulatorHeaderCollapseHTML += '
'; + tabulatorHeaderCollapseHTML += 'Spalten ein- und ausblenden'; + tabulatorHeaderCollapseHTML += '

'; + tabulatorHeaderCollapseHTML += '

    '; + tabulatorHeaderCollapseHTML += '
  • Mit einem Klick auf ' + + 'werden die Einstellungen geöffnet.
    • '; + tabulatorHeaderCollapseHTML += '
  • Auf Spalteneinstellungen klicken
    • '; + tabulatorHeaderCollapseHTML += '
  • Durch (wiederholtes) Klicken auf die einzelnen Spaltennamen können ' + + 'diese in der Tabelle beliebig oft aktiviert / deaktiviert werden.
    • '; + tabulatorHeaderCollapseHTML += '
  • Mit einem Klick auf ' + + 'werden die Einstellungen wieder geschlossen.
    • '; + tabulatorHeaderCollapseHTML += '
'; + tabulatorHeaderCollapseHTML += '

'; + tabulatorHeaderCollapseHTML += 'Spaltenbreite verändern'; + tabulatorHeaderCollapseHTML += '

Um die Spaltenbreite zu verändern, fährt man im Spaltenkopf langsam ' + + 'mit dem Mauszeiger auf den rechten Rand der entprechenden Spalte.
' + + 'Sobald sich der Mauszeiger in einen Doppelpfeil verwandelt, wird die Maustaste geklickt und ' + + 'mit gedrückter Maustaste die Spalte nach rechts erweitert oder nach links verkleinert.'; + tabulatorHeaderCollapseHTML += '

'; + tabulatorHeaderCollapseHTML += '
INFO: Alle individuellen Tabelleneinstellungen werden in ' + + 'Ihrem Browser Cache gespeichert. Wenn Sie Ihren Browser Cache löschen, werden Ihre Einstellungen zurückgesetzt und ' + + 'müssen gegebenenfalls neu eingestellt werden.'; + tabulatorHeaderCollapseHTML += '
'; + tabulatorHeaderCollapseHTML += '

'; // end panel-body + + tabulatorHeaderCollapseHTML += '

Zeilen auswählen

'; + tabulatorHeaderCollapseHTML += '
'; + tabulatorHeaderCollapseHTML += '
    '; + tabulatorHeaderCollapseHTML += '
  • Einzeln auswählen: Strg + Klick auf einzelne Zeile(n)
    • '; + tabulatorHeaderCollapseHTML += '
  • Bereich auswählen: Shift + Klick auf Anfangs- und Endzeile
    • '; + tabulatorHeaderCollapseHTML += '
  • Alle auswählen: Button \'Alle auswählen\'
    • '; + tabulatorHeaderCollapseHTML += '
'; + tabulatorHeaderCollapseHTML += '

'; // end panel-body + + tabulatorHeaderCollapseHTML += '
'; // end well + tabulatorHeaderCollapseHTML += '
'; // end col collapse + tabulatorHeaderCollapseHTML += '
'; // end row + return tabulatorHeaderCollapseHTML; } From 3a8e7427a7683f9413336e81ed078644ef814a35 Mon Sep 17 00:00:00 2001 From: Cris Date: Tue, 11 Feb 2020 08:59:23 +0100 Subject: [PATCH 12/12] Enhanced active status behaviour of button group Active status of button help / settings was not clear before. This is corrected now. --- public/js/TableWidget.js | 63 +++++++++++++++------------------------- 1 file changed, 24 insertions(+), 39 deletions(-) diff --git a/public/js/TableWidget.js b/public/js/TableWidget.js index bc49b8c69..eebe5265c 100644 --- a/public/js/TableWidget.js +++ b/public/js/TableWidget.js @@ -204,57 +204,40 @@ var FHC_TableWidget = { tableWidgetDiv.find("#tableWidgetTabulator").tabulator("download", "csv", "data.csv", {bom:true}); }) - // Click-Event to collapse help div + // Click-Event to toggle the collapsable help panel tableWidgetDiv.find('#help').on('click', function() { + // Hide the collapsable settings panel, if it actually shown + $('#tabulatorSettings-' + tableUniqueId).collapse('hide'); - //... auch unteren event für settings hier hinein + // Toggle the collapsable help panel $('#tabulatorHelp-' + 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'}); - } - - if($('#tabulatorSettings-' + tableUniqueId).hasClass('collapse in')) - { - $('#tabulatorSettings-' + tableUniqueId).removeClass('in'); - // $('#settings').toggleClass('active focus'); - } }) - // Click-Event to collapse settings div + // Click-Event to toggle the collapsable settings panel tableWidgetDiv.find('#settings').on('click', function() { + // Hide the collapsable help panel, if it actually shown + $('#tabulatorHelp-' + tableUniqueId).collapse('hide'); - //... auch unteren event für settings hier hinein + // Toggle the collapsable settings panel $('#tabulatorSettings-' + tableUniqueId).collapse('toggle'); + }) - $(this).toggleClass('active focus'); - - // De/activate and un/focus on clicked settings button - if(!$(this).hasClass('active focus')) + /* Beautify button group behaviour + * Let buttons stay active even until they are clicked again to close the collapsable help- oder setting panels + * Also remove the disturbing button focus behaviour + */ + $(".btn-group > .btn").click(function(){ + if ($(this).hasClass("active")) { - $(this).css({'background-color': 'white', 'border-color' : '#ccc', 'outline': 'none'}); + $(this).removeClass('active').css('outline', 'none'); } else { - $(this).css({'background-color': '#e6e6e6'}); + $(this).addClass("active").css('outline', 'none').siblings().removeClass("active"); } - - if($('#tabulatorHelp-' + tableUniqueId).hasClass('collapse in')) - { - $('#tabulatorHelp-' + tableUniqueId).removeClass('in'); - // $('#help').toggleClass('active focus'); - } - }) + }); /** * Click-Event to select all rows @@ -774,6 +757,7 @@ function _renderTabulatorHeaderHTML(tableWidgetDiv){ tabulatorHeaderHTML += ''; tabulatorHeaderHTML += ''; tabulatorHeaderHTML += ''; + tabulatorHeaderHTML += '


'; return tabulatorHeaderHTML; } @@ -786,7 +770,6 @@ function _renderTabulatorHeaderCollapseHTML(tableWidgetDiv){ var tabulatorHeaderCollapseHTML = ''; // CollapseHTML 'Settings' - tabulatorHeaderCollapseHTML += '
'; tabulatorHeaderCollapseHTML += '
'; tabulatorHeaderCollapseHTML += '
'; tabulatorHeaderCollapseHTML += '
'; @@ -794,10 +777,13 @@ function _renderTabulatorHeaderCollapseHTML(tableWidgetDiv){ tabulatorHeaderCollapseHTML += '
'; tabulatorHeaderCollapseHTML += ''; // end panel-heading - tabulatorHeaderCollapseHTML += '
'; + tabulatorHeaderCollapseHTML += '
'; tabulatorHeaderCollapseHTML += '
'; tabulatorHeaderCollapseHTML += '
'; @@ -835,7 +821,6 @@ function _renderTabulatorHeaderCollapseHTML(tableWidgetDiv){ tabulatorHeaderCollapseHTML += '
'; // end row // CollapseHTML 'Help' - tabulatorHeaderCollapseHTML += '
'; tabulatorHeaderCollapseHTML += '
'; tabulatorHeaderCollapseHTML += '
'; tabulatorHeaderCollapseHTML += '
';