I had difficulty finding a proper solution for range selection in the PrimeNg turbo data table for the newest version. Therefore I have decided to create a workaround. For the time selection, each click event on the calendar panel fire only one piece of data – the currently selected date. So the calendar range is stateless. You need to remember somehow to keep in memory what date was fired before and implement this logic in a custom filter.

I observed that there are several rules according to which p-calendar component behave when the selection mode "range" is selected. Here are my findings according to which I programmed the logic:

• At first, the calendar component has an empty, undefined selection.
• If one date is selected, only one date is fired on click event.
• If the same date as date previously selected is selected, new date (which is the same as previously selected date) is fired on click event.
• If a date before the already selected date is selected, the selection is cancelled and earlier date is fired on click event.
• If a date after the already selected date is selected, the selection range is visible.
• If any new date is selected after the selection range is visible, a new date is selected, fired upon click event and selection range is cancelled.

When all this wrote down, here is the implementation code for component and custom filter:

record-list.component.html

<p-table #dt [value]="records" sortMode="multiple" [paginator]="true" [rowsPerPageOptions]="rowsPerPageTable" [rows]="rowsPerTable" [showCurrentPageReport]="true" [(first)]="page" styleClass="p-datatable-striped" currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries">
    <ng-template pTemplate="header">
        <tr class="ui-table-thead">
            <th [ngStyle]="{'width':'50%'}" pSortableColumn="createdDate">Created <p-sortIcon field="createdDate"></p-sortIcon></th>
            <th [ngStyle]="{'width':'50%'}" pSortableColumn="info">Info <p-sortIcon field="info"></p-sortIcon></th>
        </tr>
        <tr class="ui-table-thead">
            <th scope="col">
                <p-calendar (onSelect)="onDateSelect($event)" [style]="{'width':'100%'}" selectionMode="range" [readonlyInput]="true" (onClearClick)="onDateClear($event)" [showButtonBar]="true" placeholder="Created Date" class="p-column-filter" dateFormat="yy-mm-dd"></p-calendar>
            </th>
            <th scope="col">
                <input pInputText type="text" [style]="{'width':'100%'}" (input)="dt.filter($event.target.value, 'info', 'contains')" placeholder="Info">
            </th>
        </tr>
    </ng-template>

    <ng-template pTemplate="body" let-rowData>
        <tr ng-repeat="rowData in let-rowData" ng-click="showClient(rowData)">
            <td>{{ rowData.createdDate }}</td>
            <td>{{ rowData.info }}</td>
        </tr>
    </ng-template>

</p-table>

record-list.component.ts

export class RecordListComponent implements OnInit {

    public records: IssueShortInfo[];

    @ViewChild('dt') table: Table;

    cols: any[];
    dateRangeStart: string;
    dateRangeEnd: string;

    rowsPerPageTable: number[] = [25, 50, 100, 200];

    page: number = 0;
    rowsPerTable: number = 25;

    constructor(private recordService: RecordService) {}

    ngOnInit() {

        this.recordService.getAllRecords().subscribe(page => {
            this.getRecords(page);
        }, (error => {
            console.log(error)
        }));

        this.cols = [
            {field: 'id', header: 'Id'},
            {field: 'createdDate', header: 'Created Date'},
            {field: 'info', header: 'Info'}
        ];

        FilterUtils['customCreatedDateFilter'] = (value: string, filter) => {

            if (this.dateRangeStart === value && this.dateRangeEnd === undefined) {
                return true;
            }

            if (this.dateRangeStart === value || this.dateRangeEnd === value) {
                return true;
            }

            if (this.dateRangeStart !== undefined && this.dateRangeEnd !== undefined &&
                moment(this.dateRangeStart).isBefore(value) && moment(this.dateRangeEnd).isAfter(value)) {
                return true;
            }

            return false;
        };
    }

    getRecords(page: Page) {
        this.records = page.content.map(incomingRecordDTO => new Record(incomingRecordDTO));
    }

    onDateSelect($event) {

        const eventDate = this.formatDate($event);

        if (this.dateRangeStart === undefined) {
            this.dateRangeStart = eventDate;
        } else if (moment($event).isBefore(this.dateRangeStart)) {
            this.dateRangeStart = eventDate;
            this.dateRangeEnd = undefined;
        } else if (moment($event).isSame(this.dateRangeStart) && this.dateRangeStart !== undefined && this.dateRangeEnd === undefined) {
            this.dateRangeEnd = eventDate;
        } else if (moment($event).isSame(this.dateRangeStart) && this.dateRangeStart !== undefined && this.dateRangeEnd !== undefined) {
            this.dateRangeStart = eventDate;
            this.dateRangeEnd = undefined;
        } else if (moment($event).isAfter(this.dateRangeStart) && this.dateRangeStart !== undefined && this.dateRangeEnd !== undefined) {
            this.dateRangeStart = eventDate;
            this.dateRangeEnd = undefined;
        } else {
            this.dateRangeEnd = eventDate;
        }

        this.table.filter(eventDate, 'createdDate', 'customCreatedDateFilter');
    }

    onDateClear($event) {
        this.dateRangeStart = undefined;
        this.dateRangeEnd = undefined;
        this.table.filter('', 'createdDate', 'equals');
    }

    formatDate(date) {
        let month = date.getMonth() + 1;
        let day = date.getDate();

        if (month < 10) {
            month = '0' + month;
        }

        if (day < 10) {
            day = '0' + day;
        }
        return date.getFullYear() + '-' + month + '-' + day;
    }

    customCreatedDateArrayFilter(event) {
        this.table.filter(event, 'createdDate', 'customCreatedDateFilter');
    }

}

I took code review little bit personally and challenged myself to write the least amount of line; if I can write the shortest solution possible.

Following code is a method which based on the event input is searching through the list of roles and produce a filtered list of roles in the dropdown selection for Angular form.

searchRoles(event) {
    let roleList = [];
    this.rolesFiltered = User.ROLES.filter(role =>
        role.label.toLocaleLowerCase().includes(event.query.toLocaleLowerCase());
    if (this.editForm.value.roles) {
        this.rolesFiltered.forEach(filteredRole => {
            const isInForm = this.editForm.value.roles.some(formRole => {
                return filteredRole.value.includes(formRole.value);
            });
            if (!isInForm) {
                roleList.push(filteredRole);
            }
        });
    } else {
        roleList = this.rolesFiltered;
    }
    this.rolesFiltered = roleList;
}

The original code had 18 lines of code. Can you find anything odd with it? Do you think this is the shortest way possible? Read further and if you have any more suggestion or ideas for this piece of code, please share them in comments.

I see at least 3 things which are wrong with this code.

1. There is a loop in a loop. Therefore, finding the roles to display is equal to O(n²). I had a hunch that this can be decreased to down O(n).
2. It seems there is too much unnecessary if-else nesting.
3. Assigning a value on the end of the code seems also as an inappropriate solution. It is connected with a 2nd point, and I also had another hunch this can be mitigated.

searchRoles(event) {
    this.dropdownRoles = User.ROLES.filter(role =>
        role.label.toLocaleLowerCase().includes(event.query.toLocaleLowerCase())
    );
    if (this.editForm.value.roles) {
        let tempRoleList = [];
        this.dropdownRoles.forEach(dropdownRole => {
            if (!this.editForm.value.roles.includes(dropdownRole)) {
              tempRoleList.push(dropdownRole);
            }
        });
        this.dropdownRoles = tempRoleList;
    }
}

First of all, I tried to get rid of the temporary variable. It is necessary now. But only in case if you want to temporary store the case that there is already a role selected and you want to pick up roles from the shortened general list of roles.

The first iteration had 13 lines of code.

searchRoles(event) {
    this.dropdownRoles = User.ROLES.filter(role =>
        role.label.toLocaleLowerCase().includes(event.query.toLocaleLowerCase())
    );
    if (this.editForm.value.roles) {
        var i = this.dropdownRoles.length;
        while (i--) {
            if (this.editForm.value.roles.includes(this.dropdownRoles[i])) {
                this.dropdownRoles.splice(i, 1);
            }
        }
    }
}

Then I have decided that looping over all dropdown roles so it can help me save some more instructions if it is made correctly. Looping backward I also cut off all used roles and I was getting back only unselected roles in the dropdown menu.

Looping backward reduced the lines even more into 12 lines of code.

searchRoles(event) {
    this.dropdownRoles = User.ROLES.filter(role =>
      role.label.toLocaleLowerCase().includes(event.query.toLocaleLowerCase())
    );
    if (this.editForm.value.roles) {
        for (var i = this.dropdownRoles.length - 1; i >= 0; i--) {
            if (this.editForm.value.roles.includes(this.dropdownRoles[i])) {
                this.dropdownRoles.splice(i, 1);
            }
        }
    }
}

I googled the possibility to make this code shorter and eventually it is possible by refactoring while loop and by using TypeScript syntactic sugar to assign variable for dropdown list in for cycle.

Rewriting while to for in TypeScript brought reduction to 11 lines of code.

searchRoles(event) {
    function filterRoles(role, editForm) {
        if (!editForm.includes(role)) {
            return role;
        }
    }
    this.dropdownRoles = User.ROLES.filter(role =>
        role.label.toLocaleLowerCase().includes(event.query.toLocaleLowerCase())
    );
    if (this.editForm.value.roles) {
        this.dropdownRoles = this.dropdownRoles.filter(dropdownRole => filterRoles(dropdownRole, this.editForm.value.roles));
    }
}

When I didn’t know how to minimize it further I asked myself a different question – Is possible to rewrite this code in functional paradigm?

So I turned to functional programming and decided to use the same idea for filtering as in initial querying of user input. I have created a standalone local function which took 2 arguments.

Rewriting the solution in a functional way increased method back to 12 lines of code.

searchRoles(event) {
    this.dropdownRoles = User.ROLES.filter(role =>
        role.label.toLocaleLowerCase().includes(event.query.toLocaleLowerCase())
    );
    if (this.editForm.value.roles) {
        this.dropdownRoles = this.dropdownRoles.filter(dropdownRole => {
            if (!this.editForm.value.roles.includes(dropdownRole)) {
                return dropdownRole;
            }
        });
    }
}

However, removing the function and making it anonymous decreased the code length to 11 lines. As a side-effect, the solution is rewritten more robustly and functionally.

While I played with other versions of functional refactoring, I picked up the last one because it was the most readable solution. You know, less code is better (easier maintenance, less prone to errors, etc.). But we need to remember that not every code is readable code.

I started investigating the cause of the issue. First, I examined with Spring backend REST endpoint call with the breakpoint. The entity with the date was already coming incorrect from the Angular frontend. The backend endpoint on entry showed incorrect data, so the error was automatically not in the backend code.

At the frontend call for the backend REST endpoint, I also used JSON.stringify(object) to check if the produced entity which was leaving the frontend to the backend was correct. What I found was that it was also already incorrect.

Consequently, the issue happened somewhere between the user browser and Angular call for the backend. In this way, I also eliminated the possibility that the problem was somewhere in the Spring JSON conversion library (I used Jackson).

In the end, I figured it out. The issue was in class, which was migrating datepicker form data into the object. While the Angular calendar datepicker collect the date from the browser also with local time zone as a string, data to JSON ware pushed as a JavaScript Date class without a time zone. So if you, for example, pickup up any date, it was selected as the date for midnight with the timezone offset and transferred from string to Date as the day before due the offset counted as date subtraction.

I was working in Central Europe. In the case of Central Europe (CET), where I was working, the browser records +1 hour from GMT in datepicker based on local PC time settings. So if I pick up the date, hours and minutes are selected for midnight (00:00). However, Date class takes the datepicker string and subtract the negative offset from midnight and set a selected date for a day before.

This is the Angular’s datepicker component HTML code from the component form:

<div class="ui-g-6">
    <div>
        <label for="startDate">Start Date</label>
    </div>
    <vrm-form-field [control]="editForm.controls['startDate']">
        <p-calendar id="startDate"
            [formControlName]="'startDate'"
            dateFormat="yy-mm-dd"
            yearRange="1900:2100">
        </p-calendar>
    </vrm-form-field>
</div>

Following static function created an object from form datepicker which was pushed to REST endpoint before the fix:

static mapFromFormData(form: any) {
    return new ImportantDate(form.startDate);
}

To fix the problem, I created a workaround. I made a Utility class with moment library, which takes a datepicker string and select only required date information.

export class Utils {
  public static formatDate(date: any): string {
    if (date === undefined || date === null) {
      return undefined;
    } else {
      return moment(date).format('YYYY-MM-DD');
    }
  }
}

You can see the implementation of the static Utils method, which fixed the date.

static mapFromFormData(form: any) {
    return new ImportantDate(
        Utils.formatDate(form.startDate)
    );
}