diff --git a/lib/GADS.pm b/lib/GADS.pm index bacdf3c84..54c4f8fa4 100644 --- a/lib/GADS.pm +++ b/lib/GADS.pm @@ -4740,7 +4740,7 @@ sub _process_edit message => $message, # Send values back to browser to display on main record. Only # include ones that user has access to - values => +{ map { $_->field => $record->fields->{$_->id}->as_string } @{$source_curval->curval_fields} }, + values => +{ map { $_->field => $record->get_field_value($_)->as_string } @{$source_curval->curval_fields} }, }); return ($return, undef, 1); } diff --git a/src/frontend/components/button/_button.scss b/src/frontend/components/button/_button.scss index 0290624ff..25a7bdbf1 100644 --- a/src/frontend/components/button/_button.scss +++ b/src/frontend/components/button/_button.scss @@ -262,6 +262,7 @@ $btn-border-radius: 23px; content: "\E80a"; margin-right: 0.75rem; color: $brand-secundary; + transition: all 0.2s ease; } &:hover, @@ -497,11 +498,11 @@ $btn-border-radius: 23px; } } -.sorting_asc .btn-sort::before { +.dt-ordering-asc .btn-sort::before { transform: rotate(-90deg); } -.sorting_desc .btn-sort::before { +.dt-ordering-desc .btn-sort::before { transform: rotate(90deg); } diff --git a/src/frontend/components/data-table/_data-table.scss b/src/frontend/components/data-table/_data-table.scss index 2c3ef721f..81ea25433 100644 --- a/src/frontend/components/data-table/_data-table.scss +++ b/src/frontend/components/data-table/_data-table.scss @@ -151,8 +151,8 @@ table.dataTable thead .sorting_disabled { &:hover, &:active, &:focus, - .sorting_asc &, - .sorting_desc & { + .dt-ordering-asc &, + .dt-ordering-desc & { color: $brand-secundary; .btn-sort { diff --git a/src/frontend/components/data-table/lib/component.js b/src/frontend/components/data-table/lib/component.js index 00d1557df..006ec8a9a 100644 --- a/src/frontend/components/data-table/lib/component.js +++ b/src/frontend/components/data-table/lib/component.js @@ -1,10 +1,8 @@ /* eslint-disable @typescript-eslint/no-this-alias */ import { Component, initializeRegisteredComponents } from 'component' -import 'datatables.net' -import 'datatables.net-buttons' import 'datatables.net-bs4' -import 'datatables.net-responsive' +import 'datatables.net-buttons-bs4' import 'datatables.net-responsive-bs4' import 'datatables.net-rowreorder-bs4' import { setupDisclosureWidgets, onDisclosureClick } from 'components/more-less/lib/disclosure-widgets' @@ -13,6 +11,8 @@ import { bindToggleTableClickHandlers } from './toggle-table' const MORE_LESS_TRESHOLD = 50 +//TODO: It is worth noting that there are significant changes between DataTables.net v1 and v2 (hence the major version increase) +// We are currently using v2 in this component, but with various deprecated features in use that may need to be updated in the future class DataTableComponent extends Component { constructor(element) { super(element) @@ -43,6 +43,7 @@ class DataTableComponent extends Component { this.columns = columns this.el.DataTable(conf) this.initializingTable = true + $('.dt-column-order').remove() //datatables.net adds it's own ordering class - we remove it because it's easier than rewriting basically everywhere we use datatables if (this.hasCheckboxes) { this.addSelectAllCheckbox() @@ -601,6 +602,10 @@ class DataTableComponent extends Component { } } + conf.columns.forEach((column) => { + column.orderable = column.orderable === 1 + }); + if (conf.serverSide) { conf.columns.forEach((column) => { column.render = (data, type, row, meta) => this.renderData(type, row, meta) @@ -624,7 +629,7 @@ class DataTableComponent extends Component { $header.html(`
${headerContent}
`) // Add sort button to column header - if ($header.hasClass('sorting')) { + if ($header.hasClass('dt-orderable-asc') || $header.hasClass('dt-orderable-desc')) { self.addSortButton(dataTable, column, headerContent) }