@gpa-gemstone/react-table
Version:
Table for GPA web applications
322 lines (321 loc) • 15 kB
JavaScript
"use strict";
// ******************************************************************************************************
// DateTimeFilters.tsx - Gbtc
//
// Copyright © 2022, Grid Protection Alliance. All Rights Reserved.
//
// Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
// the NOTICE file distributed with this work for additional information regarding copyright ownership.
// The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
// file except in compliance with the License. You may obtain a copy of the License at:
//
// http://opensource.org/licenses/MIT
//
// Unless agreed to in writing, the subject software distributed under the License is distributed on an
// "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
// License for the specific language governing permissions and limitations.
//
// Code Modification History:
// ----------------------------------------------------------------------------------------------------
// 03/02/2022 - C Lackner
// Generated original version of source code.
// ******************************************************************************************************
Object.defineProperty(exports, "__esModule", { value: true });
exports.DateFilter = DateFilter;
exports.TimeFilter = TimeFilter;
exports.DateTimeFilter = DateTimeFilter;
const React = require("react");
const react_forms_1 = require("@gpa-gemstone/react-forms");
// Defines time and date formats
const momentDateFormat = "MM/DD/YYYY";
const momentTimeFormat = "HH:mm:ss.SSS"; // Also is the gemstone format
// Filter for date only
function DateFilter(props) {
const [date, setDate] = React.useState('');
const [secondDate, setSecondDate] = React.useState('');
const [operator, setOperator] = React.useState('after');
React.useEffect(() => {
if (props.Filter.length === 0) {
setDate('');
setSecondDate('');
}
if (props.Filter.length > 1) {
const f1 = props.Filter.find(f => f.Operator === '>' || f.Operator === '>=');
if (f1 == null)
setDate('');
else
setDate(f1.SearchText);
const f2 = props.Filter.find(f => f.Operator === '<' || f.Operator === '<=');
if (f2 == null)
setSecondDate('');
else
setSecondDate(f2.SearchText);
if (f1 !== null && f2 !== null)
setOperator('between');
else if (f1 == null)
setOperator('before');
else
setOperator('after');
}
if (props.Filter.length === 1) {
setSecondDate('');
if (props.Filter[0].Operator === '>' || props.Filter[0].Operator === '>=')
setOperator('after');
else
setOperator('before');
setDate(props.Filter[0].SearchText);
}
}, [props.Filter]);
React.useEffect(() => {
let handle = null;
if (date === '' && secondDate === '' && props.Filter.length !== 0)
handle = setTimeout(() => props.SetFilter([]), 500);
if (date === '' && secondDate === '')
return () => { if (handle !== null)
clearTimeout(handle); };
if (operator === 'between')
handle = setTimeout(() => props.SetFilter([
{
FieldName: props.FieldName,
IsPivotColumn: false,
Operator: '>=',
Type: 'datetime',
SearchText: date
},
{
FieldName: props.FieldName,
IsPivotColumn: false,
Operator: '<=',
Type: 'datetime',
SearchText: secondDate
}
]), 500);
else
handle = setTimeout(() => props.SetFilter([{
FieldName: props.FieldName,
IsPivotColumn: false,
Operator: (operator === 'after' ? '>' : '<'),
Type: 'datetime',
SearchText: date
}]), 500);
return () => { if (handle !== null)
clearTimeout(handle); };
}, [operator, date, secondDate]);
return React.createElement(React.Fragment, null,
React.createElement("tr", null,
React.createElement("td", null,
React.createElement("select", { className: 'form-control', value: operator, onChange: (evt) => {
const value = evt.target.value;
setOperator(value);
} },
React.createElement("option", { value: 'before' }, "Before"),
React.createElement("option", { value: 'after' }, "After"),
React.createElement("option", { value: 'between' }, "Between")))),
React.createElement("tr", null,
React.createElement("td", null,
React.createElement("input", { type: 'date', className: 'form-control', value: date, onChange: (evt) => {
const value = evt.target.value;
setDate(value);
} }))),
operator === 'between' ? React.createElement(React.Fragment, null,
React.createElement("tr", null,
React.createElement("td", null, "and")),
React.createElement("tr", null,
React.createElement("td", null,
React.createElement("input", { type: 'date', className: 'form-control', value: secondDate, onChange: (evt) => {
const value = evt.target.value;
setSecondDate(value);
} })))) : null);
}
// Time filter only
function TimeFilter(props) {
const [time, setTime] = React.useState('');
const [secondTime, setSecondTime] = React.useState('');
const [operator, setOperator] = React.useState('after');
React.useEffect(() => {
if (props.Filter.length === 0) {
setTime('');
setSecondTime('');
}
if (props.Filter.length > 1) {
const f1 = props.Filter.find(f => f.Operator === '>' || f.Operator === '>=');
if (f1 == null)
setTime('');
else
setTime(f1.SearchText);
const f2 = props.Filter.find(f => f.Operator === '<' || f.Operator === '<=');
if (f2 == null)
setSecondTime('');
else
setSecondTime(f2.SearchText);
if (f1 !== null && f2 !== null)
setOperator('between');
else if (f1 == null)
setOperator('before');
else
setOperator('after');
}
if (props.Filter.length === 1) {
setSecondTime('');
if (props.Filter[0].Operator === '>' || props.Filter[0].Operator === '>=')
setOperator('after');
else
setOperator('before');
setTime(props.Filter[0].SearchText);
}
}, [props.Filter]);
React.useEffect(() => {
let handle = null;
if (time === '' && secondTime === '' && props.Filter.length !== 0)
handle = setTimeout(() => props.SetFilter([]), 500);
if (time === '' && secondTime === '')
return () => { if (handle !== null)
clearTimeout(handle); };
if (operator === 'between')
handle = setTimeout(() => props.SetFilter([
{
FieldName: props.FieldName,
IsPivotColumn: false,
Operator: '>=',
Type: 'datetime',
SearchText: time
},
{
FieldName: props.FieldName,
IsPivotColumn: false,
Operator: '<=',
Type: 'datetime',
SearchText: secondTime
}
]), 500);
else
handle = setTimeout(() => props.SetFilter([{
FieldName: props.FieldName,
IsPivotColumn: false,
Operator: (operator === 'after' ? '>' : '<'),
Type: 'datetime',
SearchText: time
}]), 500);
return () => { if (handle !== null)
clearTimeout(handle); };
}, [operator, time, secondTime]);
return React.createElement(React.Fragment, null,
React.createElement("tr", { onClick: (evt) => { evt.preventDefault(); } },
React.createElement("td", null,
React.createElement("select", { className: 'form-control', value: operator, onChange: (evt) => {
const value = evt.target.value;
setOperator(value);
} },
React.createElement("option", { value: 'before' }, "Before"),
React.createElement("option", { value: 'after' }, "After"),
React.createElement("option", { value: 'between' }, "Between")))),
React.createElement("tr", { onClick: (evt) => { evt.preventDefault(); } },
React.createElement("td", null,
React.createElement("input", { type: 'time', className: 'form-control', value: time, onChange: (evt) => {
const value = evt.target.value;
setTime(value);
} }))),
operator === 'between' ? React.createElement(React.Fragment, null,
React.createElement("tr", { onClick: (evt) => { evt.preventDefault(); } },
React.createElement("td", null, "and")),
React.createElement("tr", { onClick: (evt) => { evt.preventDefault(); } },
React.createElement("td", null,
React.createElement("input", { type: 'time', className: 'form-control', value: secondTime, onChange: (evt) => {
const value = evt.target.value;
setSecondTime(value);
} })))) : null);
}
// DateTime combination filter
function DateTimeFilter(props) {
const [dateTime, setDateTime] = React.useState('');
const [secondDateTime, setSecondDateTime] = React.useState('');
const val = React.useMemo(() => ({ Value: dateTime }), [dateTime]);
const val2 = React.useMemo(() => ({ Value: secondDateTime }), [secondDateTime]);
const [operator, setOperator] = React.useState('after');
React.useEffect(() => {
if (props.Filter.length === 0) {
setDateTime('');
setSecondDateTime('');
}
if (props.Filter.length > 1) {
const f1 = props.Filter.find(f => f.Operator === '>' || f.Operator === '>=');
if (f1 == null)
setDateTime('');
else
setDateTime(f1.SearchText);
const f2 = props.Filter.find(f => f.Operator === '<' || f.Operator === '<=');
if (f2 == null)
setSecondDateTime('');
else
setSecondDateTime(f2.SearchText);
if (f1 !== null && f2 !== null)
setOperator('between');
else if (f1 == null)
setOperator('before');
else
setOperator('after');
}
if (props.Filter.length === 1) {
setSecondDateTime('');
if (props.Filter[0].Operator === '>' || props.Filter[0].Operator === '>=')
setOperator('after');
else
setOperator('before');
setDateTime(props.Filter[0].SearchText);
}
}, [props.Filter]);
React.useEffect(() => {
let handle = null;
if (dateTime === '' && secondDateTime === '' && props.Filter.length !== 0)
handle = setTimeout(() => props.SetFilter([]), 500);
if (dateTime === '' && secondDateTime === '')
return () => { if (handle !== null)
clearTimeout(handle); };
if (operator === 'between')
handle = setTimeout(() => props.SetFilter([
{
FieldName: props.FieldName,
IsPivotColumn: false,
Operator: '>=',
Type: 'datetime',
SearchText: dateTime
},
{
FieldName: props.FieldName,
IsPivotColumn: false,
Operator: '<=',
Type: 'datetime',
SearchText: secondDateTime
}
]), 500);
else
handle = setTimeout(() => props.SetFilter([{
FieldName: props.FieldName,
IsPivotColumn: false,
Operator: (operator === 'after' ? '>' : '<'),
Type: 'datetime',
SearchText: dateTime
}]), 500);
return () => { if (handle !== null)
clearTimeout(handle); };
}, [operator, dateTime, secondDateTime]);
return React.createElement(React.Fragment, null,
React.createElement("tr", { onClick: (evt) => { evt.preventDefault(); } },
React.createElement("td", null,
React.createElement("select", { className: 'form-control', value: operator, onChange: (evt) => {
const value = evt.target.value;
setOperator(value);
} },
React.createElement("option", { value: 'before' }, "Before"),
React.createElement("option", { value: 'after' }, "After"),
React.createElement("option", { value: 'between' }, "Between")))),
React.createElement("tr", { onClick: (evt) => { evt.preventDefault(); } },
React.createElement("td", null,
React.createElement(react_forms_1.DatePicker, { Record: val, Field: "Value", Setter: (r) => setDateTime(r.Value), Label: '', Type: 'datetime-local', Valid: () => true, Format: momentDateFormat + ' ' + momentTimeFormat }))),
operator === 'between' ? React.createElement(React.Fragment, null,
React.createElement("tr", { onClick: (evt) => { evt.preventDefault(); } },
React.createElement("td", null, "and")),
React.createElement("tr", { onClick: (evt) => { evt.preventDefault(); } },
React.createElement("td", null,
React.createElement(react_forms_1.DatePicker, { Record: val2, Field: "Value", Setter: (r) => setSecondDateTime(r.Value), Label: '', Type: 'datetime-local', Valid: () => true, Format: momentDateFormat + ' ' + momentTimeFormat })))) : null);
}