diff --git a/src/components/DataFilter.ts b/src/components/DataFilter.ts index e995e7b..ef4e73d 100644 --- a/src/components/DataFilter.ts +++ b/src/components/DataFilter.ts @@ -1,5 +1,5 @@ import _ from 'lodash'; -import { Query, Column, DataTableOptions, JS_QUERY_DEFAULT, FieldQuery } from './Vue2DataTable'; +import { DataTableOptions, JS_QUERY_DEFAULT } from './Vue2DataTable'; import { TDNode } from 'treedoc'; import { TableUtil } from '../models/TableUtil'; diff --git a/src/components/JsonTable.vue b/src/components/JsonTable.vue index 6ef52eb..fdeb854 100644 --- a/src/components/JsonTable.vue +++ b/src/components/JsonTable.vue @@ -104,12 +104,12 @@ export default class JsonTable extends Vue { columns: [], data: [], filteredData: [], - // filteredDataAsObjectArray: [], rawData: [], total: 0, // Have to initialize all the fields to make them able to be persisted in cache. (reactivity problem by proxy?) query: new Query(), - xprops: { tstate: null, columnStatistic: {}, filteredDataAsObjectArray:[] }, + // !!!Have to initialize xprops.filteredData to make it reactive + xprops: { tstate: null, filteredData:[] }, }; defTableOpt!: any; // !! class based component, we have to initialized the data field, "undefined" won't be reactive. !! @@ -323,7 +323,10 @@ export default class JsonTable extends Vue { @Watch('query', {deep: true}) - watchQuery() { this.queryData(); } + watchQuery() { + console.log("query changed: " + JSON.stringify(this.query)); + this.queryData(); + } @Watch('isColumnExpanded') watchisColumnExpanded() { diff --git a/src/components/SimpleValue.vue b/src/components/SimpleValue.vue index 27a5aa2..d479f8a 100644 --- a/src/components/SimpleValue.vue +++ b/src/components/SimpleValue.vue @@ -20,6 +20,17 @@ import TreeState from '../models/TreeState'; import TreeUtil from '../models/TreeUtil'; import _ from 'lodash'; +// number and between 1980-01-01 and 2040-01-01, maybe a Date +const START_TIME = new Date('1980-01-01').getTime(); +const END_TIME = new Date('2040-01-01').getTime(); + +function tryDate(val: number): Date | null{ + if (val > START_TIME && val < END_TIME) { + return new Date(val); + } + return null; +} + @Component export default class SimpleValue extends Vue { @Prop() tnode!: TDNode; @@ -33,17 +44,10 @@ export default class SimpleValue extends Vue { } get date() { - // number and between 1980-01-01 and 2040-01-01, maybe a Date const val = Number(this.tnode.value); - if (_.isNumber(val) && val > 315532800000 && val < 2208988800000) { - return `\n${new Date(val as number).toISOString()}`; - } - // Numbers that are in seconds - if (_.isNumber(val) && val > 315532800 && val < 2208988800) { - return `\n${new Date((val as number) * 1000).toISOString()}`; - } - - return null; + if (!_.isNumber(val)) return null; + const date = tryDate(val) || tryDate(val * 1000) || tryDate(val / 1000_000); + return date ? `\n${date.toISOString()}` : null; } get refAbsolute() { diff --git a/src/components/Vue2DataTable.ts b/src/components/Vue2DataTable.ts index 494b7a1..305dc1a 100644 --- a/src/components/Vue2DataTable.ts +++ b/src/components/Vue2DataTable.ts @@ -10,6 +10,7 @@ export declare interface Column { export class FieldQuery { query: string = ''; + compiledQuery: string = ''; isRegex: boolean = false; // If it's array, the query string will be parsed with JSONex Parser as array of string // For example: "abc,def" will be parsed as ["abc", "def"], '"ab\"c", "def"' will be parsed as ['ab"c', 'def'] @@ -19,6 +20,15 @@ export class FieldQuery { queryCompiled?: (string | RegExp)[]; compile() { + // Avoid recompile if query is not changes which will cause infinite update loop from vue + if (this.query === this.compiledQuery) + return; + this.compiledQuery = this.query; + + if (!this.query) { + this.queryCompiled = []; + return; + } const values: string[] = this.isArray ? TD.parse(this.query, {defaultRootType: TDNodeType.ARRAY}) : [this.query]; // console.log('compile', this.query, values); this.queryCompiled = values.map(q => {