BSC UI Datatable component

Component for datatable. Handling all datatable funcionalities and features.

DataTable

• služba dataTable, resp. provider dataTableProvider viz src/frontend/angular_modules/UI/src/services/dataTable.js
• atributová direktiva bsc-data-table viz src/frontend/angular_modules/UI/src/directives/bsc-data-table.js
  • direktivě se předává konfigurační objekt (options), pokud je potřeba s inicializací tabulky počkat, je potřeba options nastavit později, direktiva options watchuje a pokud je předaný objekt, tabulka se inicializuje a watch se zruší
  • direktiva automaticky do scopu přidává vlastnost errors pokud dojde k chybě na serveru kvůli kompatibilitě s direktivou server-validation

DataTable je udělaná tak, že "jen" předkofigurovává datatables viz http://datatables.net/reference/index a přidává pár možností navíc. Zároveň používá extenze ColVis, ColReorder a FixedColumns viz http://datatables.net/extensions/index Tj. všechno nastavení datatables pluginu v dokumentaci lze použít. Globální nastavení pro celý projekt jde nastavit přes provider pomocí metody setDefaults, tj. dataTableProvider.setDefaults({/*....*/}) viz src/frontend/angular_modules/UI/src/index.js. Při získání servicy dataTable se optiony spojí pomocí "deep merge"

Možnosti navíc jsou:

• colVis: pro nastavení extenze ColVis (nastavení zobrazení a skrývání sloupců), aby se dala jednodušejc aktivovat a nastavit, lze použít všechny optiony viz http://datatables.net/extensions/colvis/options

  • je tam navíc optiona enabled, která je defaultně true (tj. extenze se aktivuje)
  • pak je tam navíc optina restoreOnTop, defaultně true, kvůli tomu, že v tom menu, kde se zobrazování a skrývání zaklikává, je tlačítko pro obnovení defaultně dole, tahle optiona ho přesune nahoru

• oColReorder: pro nastavení extenze ColReorder (pro přesouvání pořadí sloupců v tabulce), lze použít všechny optiony viz http://datatables.net/extensions/colreorder/options

  • je tam navíc optina enabled pro zapnutí extenze (defaultně true)

• fixedColumns: pro nastavení extenze FixedColumns (když je tabulka moc široká a objeví se scrollbar, tahle extenze zařídí, že některé sloupce zůstávají při skrollování na svém místě - použito hlavně pro checkboxy a akce) viz http://datatables.net/docs/FixedColumns/3.0.0/FixedColumns.defaults.html

  • je tam navíc optiona enabled pro zapnutí extenze (defaultně true)
  • optiona drawCallback je zabraná, radši tedy nepoužívat

• pageLength: integer nebo funkce vracející integer, nastavení délky pro stránkování

• url: url, která se má získat pro fetchování dat ze serveru. Defaultně se v dataTables fetchování dat ze serveru nastavuje přes optionu ajax, která, pokud je nastavená jako objekt, předává tento objekt funkci jquery.ajax, nicméně pokud je ajax funkce, zavolá se místo toho tato funkce, čehož se využívá a ta je teď defaultně nastavená tak, že používá právě optionu url a angulaří $http servicu

• request: tuhle optionu jsem přidal kvůli jednodušší možnosti ovlivnění fetchování dat, když jsem optionu ajax zabral. Jde o funkci, která dostane jako první parametr data a jako druhý parametr všechny options. Defaultně jde o funkci volající $http.post(options.url)

• actionsTitle: nadpis akcí - defaultně "Actions", tohle se se přenastavuje pomocí provideru globálně pro celou aplikaci

• hideEmptyActionsColumn: skrytí prázdného sloupce s akcemi - pokud akce obsahují jedinou rowAction, sloupec s akcemi se vždy zobrazí - skrytí prázdného sloupce je možné pomocí tohoto přepínače

• actions: definice akcí - pole objektů, pokud jsou akce uvedené, automaticky se přidají do seznamu sloupců a nastaví se jako fixedColumn doprava, každý objekt v poli má nepovinné vlastnosti:

  • visible: boolean nebo funkce vracející boolean, ovlivňuje, zda se akce zobrazí v seznamu nebo ne
  • enabled: boolean nebo funkce vracející boolean, ovlivňuje, zda se akci přidá css třída disabled a to, zda se vyvolá callback ve vlastnosti onClick
  • tooltip: string nebo funkce vracející string pro přidánbí tooltipu na akci
  • href: href akce, defaultně "#"
  • iconClass: třída ikony
  • onClick: callback zavolaný při kliknutí, jako argumenty callback dostane data řádku, index řádku a dataTable API
  • render: možnost ovlivnit vyrenderování akce vlastní funkcí, nicméně se tím přepíše defaultní render, ve kterém je obsažena logika starající se o výše uvedené chování akcí (visible, enabled, tooltip a href), vrací string s domem nebo může jquery objekt

• selection: bool nebo pole, pokud je ovedeno, jako první fixed sloupec se přidají checkboxy, pokud jde o pole, při každé změně zaškrtnutí se změna projeví i do předaného pole, aby na něm šlo např. watchovat nebo předat do šablony

• filter: objekt pro filtrování, musí implementovat metodu $apply(requestData, filterFields) a $loadFromState(stateFilter), všechny vlastnosti nezačínající dolarem se pro jednodušší implementaci dostanou jako druhý argument do metody $apply, ty je poté možno jednoduše přimergovat do dat requestu nebo s nimi manipulovat, jako this je nastaven předaný objekt filter

• stateStorage: objekt starající se o ukládání a nahrávání stavu, pokud je uveden, přepisuje optiony stateSave na true, stateLoadCallback a stateSaveCallback, musí implementovat metody load() a save(state), je připravená třída DataTableStorage viz src/frontend/angular_modules/UI/src/services/DataTableStorage.js

• stateId: string identifikátor stavu, pokud není uveden, je vygenerován tak, jak to dělají dataTables, nicméně jsme s tím měli problém, že pokud se aplikovala dataTable znovu na stejný element (což se někde dělo, nejspíš při řřekliknutí tabu a zpět), tak se vygeneroval nový idefntifikátor, tudíž je lepší ho uvádět

• onInstantiated: callback, který se zavolá po inicializaci dataTable a jako argument je mu předána instance dataTable API viz http://datatables.net/reference/api/

Portace ze stare dataTable

Pokud portujete stare instance datatable na toto nove API, muzete pouzit dataTableFactory.legacyTableFixes, ktera prevede nektere atributy z pole columns na nastaveni kompatibilni s novou dataTable (minWidth, maxWidth, required, renderTemplate, render=string, render=object, order

Eventy (jde o jquery eventy, takže jako první argument se do listeneru dostane jquery event objekt):

• render: obdoba draw, nicméně draw se volá dvakrát, pokud je zapnutý FixedColumns, tahle eventa se vyvolá jen jednou
• selectionChanged: vyvolá se v okamžiku změny zaškrtnutí checkboxů, do argumentů se dostane pole objektů (zaškrtlých řádků)
• requestData: pokud není přepsaná optiona ajax, vyvolá se před odesláním requestu na server, aby bylo možno upravit odeslaná data, která se předávají jako argument
• responseData: vyvolá se po úspěšné odpovědi od serveru, předávají se responseData, status, headers
• error: vyvolá se pokud server neodpoví "kladně", předávají se responseData, status, headers

Tooltipy

Tooltipy je možno nastavovat pomocí data atributu data-tooltip

API

Do API jsem přidal reference na API extenzí, tzn. lze použít např. dataTable.fixedColumns.fnRedrawLayout().

Příklad (jen pro ilustraci, je to upravený z něčeho, na čem jsem to sice zkoušel, ale už ne po úpravě, implementovaný je to např. v src/frontend/angular_modules/$views/src/payments/transaction-history/single-payments/single-payments-controller.js, ale to jsem nedělal já):

	var renderDate = _.bind($filter('date'), null, _, 'dd. MM. yyyy');
	
	function renderStatus(data, type, row, meta) {
		var text =  $filter('ibcatalog')(data, 'CLIENTTRANSACTIONSTATUSTYPES');
		if (!row.errorText) return '<span>' + text + '</span>';

		return '<span data-tooltip="\'' + row.errorText + '\'">' + text + '</span>';
	}

	function translate(title) {
		return $translate.instant('views.payments.transaction-history.' + title + '-label');
	}
	
	$scope.selection = [];
	$scope.filter = {
		firstFilterField: 'first',
		secondFilterField: 'second',
		$fieldNotPresentInFilterFields: new Date(),
		$apply: function(requestData, filterFields) {
			angular.extend(requestData, filterFields);
			requestData.date = this.$fieldNotPresentInFilterFields.getTime()
		},
		$loadFromState: function(filterState) {
			angular.extend(this, filterState);
		}
	};
	
	$scope.dataTableOptions = {
		url: urls.search,
		selection: $scope.selection,
		columns: [
			{data: 'valueDate', title: translate('value-date'), render: renderDate},
			{data: 'bornDate', title: translate('born-date'), visible: false, render: renderDate},
			{data: 'lastSignatureDate', title: translate('last-signature-date'), visible: false, orderable: false, render: renderDate},
			{data: 'sumAmount', title: translate('amount')},
			{data: 'currencyId', title: translate('currency')},
			{data: 'statusId', title: translate('transaction-status'), render: renderStatus},
			{data: 'debitAccountIBAN', title: translate('payer-account'), render: $filter('ibanHtml')},
			{data: 'debitAccountName', title: translate('payer-account-name'), visible: false},
			{data: 'creditAccountNumber', title: translate('payee-account'), render: $filter('ibanHtml')},
			{data: 'creditAccountName', title: translate('payee-account-name'), orderable: false},
			{data: 'clientReference', title: translate('client-reference'), orderable: false},
			{data: 'creditBICCode', title: translate('payee-bank'), visible: false, orderable: false},
			{data: 'variableSymbol', title: translate('variable-symbol'), visible: false, orderable: false},
			{data: 'constantSymbol', title: translate('constant-symbol'), visible: false, orderable: false},
			{data: 'specificSymbol', title: translate('specific-symbol'), visible: false, orderable: false},
			{data: 'messageForPayer', title: translate('message-for-payer'), visible: false, orderable: false}
		],
		actions: [
			{
				icon: 'fa fa-check fa-lg',
				tooltip: function(data) {
					return 'operId: ' + data.operId';
				},
				onClick: function(data, index, dataTable) {
					console.log('clicked on the first action');
				}
			},
			{
				icon: 'fa fa-list-alt fa-lg',
				tooltip: 'another tooltip',
				onClick: function(data, index, dataTable) {
					console.log('clicked on the second action');
				}
			}
		],
		onInstantiated: function(dataTable) {
			dataTable.on('selectionChanged', function(event, selection) {
				console.log(selection);
			});
		}uz to ta
	};

v HTML: <table bsc-data-table="dataTableOptions"></table>

Run

Install dependency

npm install  

Build dist

npm run build