Grid With Date Filter

1 Purpose

This template example can be used for general lists or reports. It uses sc-datatables and the html panel components to create a reporting grid, along with a styling definition for the panel. This template contains a filter function that is controlled by a ruleset which are used to filter the template on one of the date fields.

2 Template Example

   "components": [
         {
            "componentName": "sc-drop-down",
            "name": "dateFilterDropDown",
            "label": "Apply Date Filter",
            "dropDownList": [
                "Today",
                "Next 7 Days",
                "No date"
            ],
            "disableSave": true
        },
        {
            "componentName": "sc-date-time",
            "label": "Date Filter From",
            "name": "dateFilterFrom",
            "disableSave": true,
            "enabled": false
        },
        {
            "componentName": "sc-date-time",
            "label": "Date Filter To",
            "name": "dateFilterTo",
            "disableSave": true,
            "enabled": false
        },
        {
            "componentName": "sc-datatables",
            "fullWidth": true,
            "filter": "{'query':{'bool':{'filter':[{'term':{'systemHeader.systemType':'document'}},{'term':{'appTags':'asset'}},{'match':{'userOrganisation':'{{{document.userOrganisation}}}'}}],'should':[{'match':{'assetInspectionStatus':'Completed'}}]}}}",
            "gridColumns": [
                {
                    "displayName": "Description",
                    "field": "assetDescription",
                    "width": 1,
                    "type": "url",
                    "filter": "textFilter",
                    "href": "form/{{{documentId}}}"
                },
                {
                    "displayName": "Asset ID",
                    "field": "assetId",
                    "width": 1,
                    "type": "url",
                    "href": "form/{{{documentId}}}"
                },
                {
                    "displayName": "Asset Class",
                    "field": "assetType",
                    "width": 1,
                    "type": "text",
                    "filter": "textFilter"
                },
                {
                    "displayName": "Status",
                    "field": "assetInspectionStatus",
                    "width": 1,
                    "type": "string"
                },
                {
                    "displayName": "Schedule Date",
                    "field": "scheduledInspectionDate",
                    "width": 2,
                    "type": "date",
                    "filter": "dateFilter",
                    "sort": {
                        "direction": "desc",
                        "precedence": 1
                    }
                }
            ],
            "label": "Completed On-site Inspection",
            "listAllDocuments": false,
            "name": "table",
            "disableAutoDisplay": true,
            "showReload": true,
            "rowsPerPage": 50,
            "columnSearch": true,
            "disableSave": true,
            "enableColumnMoving": true,
            "enableColumnResizing": true,
            "exportTypes": [
                "Copy",
                "CSV"
            ]
        }]
    "hideCommandBar": true,
    "appTags": [
        "test",
        "testSub"
    ],

3 Ruleset

The ruleset block assumes that the 'JayRule' include and MomentJS is available.

....

    ruleDateFilter : {
            ruleCondition : function(ntf) {
                return ( ntf.context.fieldChanged === 'dateFilterDropDown' );
            },

            ruleAction : function(ntf) { 
                var ft3 = ntf.scope;

                let endDate = ''; 
                let startDate = '';
                let eqry = {'query':{'bool':{'filter':[{'term':{'systemHeader.systemType':'document'}},{'term':{'appTags':'asset'}},{'term':{'assetInspectionStatus':'Completed'}} ]}}};

                ft3.enableField('dateFilterFrom', false);
                ft3.enableField('dateFilterTo', false);

                // test dropdown
                if (ntf.document.dateFilterDropDown === "Today") {
                     startDate = ft3.moment().startOf("day"); 
                     endDate = ft3.moment().endOf("day");
                     ntf.document.dateFilterFrom = startDate;
                    ntf.document.dateFilterTo = endDate;
                }
                else if (ntf.document.dateFilterDropDown === "Next 7 Days"){
                    startDate = ft3.moment().startOf("day");
                    endDate = ft3.moment().startOf('day').add(1,'weeks');
                    ntf.document.dateFilterFrom = startDate;
                    ntf.document.dateFilterTo = endDate;
                }

                else if (ntf.document.dateFilterDropDown ==="No date" || ntf.document.dateFilterDropDown ==="" ){
                    delete ntf.document.dateFilterFrom;
                    delete ntf.document.dateFilterTo;
                }

                // modify filter for date range
                if(startDate && endDate){
                    eqry.query.bool.filter.push({'range':{'scheduledInspectionDate':{'gte':startDate,'lte':endDate }}});

                } 

                // set filter
                ft3.setFilter('table',eqry);

            }
        }