From 32182c3df0215b83972b0c9c4896b54d5d9c6e37 Mon Sep 17 00:00:00 2001 From: Elio Struyf Date: Thu, 10 Nov 2022 17:21:16 +0100 Subject: [PATCH 1/3] #362 - Start on conditional ui --- src/models/PanelSettings.ts | 22 ++++++++++++++++ .../components/Fields/WrapperField.tsx | 26 ++++++++++++++++--- 2 files changed, 45 insertions(+), 3 deletions(-) diff --git a/src/models/PanelSettings.ts b/src/models/PanelSettings.ts index 7a001b0d..4df583a3 100644 --- a/src/models/PanelSettings.ts +++ b/src/models/PanelSettings.ts @@ -82,6 +82,28 @@ export interface Field { dataFileId?: string; dataFileKey?: string; dataFileValue?: string; + + // When clause + when?: WhenClause; +} + +export enum WhenOperator { + equals = "eq", + notEquals = "neq", + contains = "contains", + notContains = "notContains", + greaterThan = "gt", + greaterThanOrEqual = "gte", + lessThan = "lt", + lessThanOrEqual = "lte", + startsWith = "startsWith", + endsWith = "endsWith", +} + +export interface WhenClause { + fieldRef: string; + operator: WhenOperator; + value: any; } export interface DateInfo { diff --git a/src/panelWebView/components/Fields/WrapperField.tsx b/src/panelWebView/components/Fields/WrapperField.tsx index e666cdce..1e345444 100644 --- a/src/panelWebView/components/Fields/WrapperField.tsx +++ b/src/panelWebView/components/Fields/WrapperField.tsx @@ -1,10 +1,8 @@ - - import { Messenger } from '@estruyf/vscode/dist/client'; import * as React from 'react'; import { useCallback, useEffect, useState } from 'react'; import { DateHelper } from '../../../helpers/DateHelper'; -import { BlockFieldData, Field, PanelSettings } from '../../../models'; +import { BlockFieldData, Field, PanelSettings, WhenOperator } from '../../../models'; import { Command } from '../../Command'; import { CommandToCode } from '../../CommandToCode'; import { TagType } from '../../TagType'; @@ -111,6 +109,28 @@ export const WrapperField: React.FunctionComponent = ({ return null; } + // Conditional fields + if (typeof field.when !== "undefined") { + debugger + const when = field.when; + const whenValue = parent[when.fieldRef]; + + if (field.when.operator === WhenOperator.equals) { + if (whenValue !== when.value) { + return null; + } + } else if (field.when.operator === WhenOperator.notEquals) { + if (whenValue === when.value) { + return null; + } + } else if (field.when.operator === WhenOperator.contains) { + if ((typeof whenValue === "string" || whenValue instanceof Array) && !whenValue.includes(when.value)) { + return null; + } + } + } + + if (field.type === 'divider') { return (
From 7a46729a4698cd2eee041610b529df472fce0b6b Mon Sep 17 00:00:00 2001 From: Elio Struyf Date: Sat, 12 Nov 2022 18:11:24 +0100 Subject: [PATCH 2/3] #362 - additional operators --- src/models/PanelSettings.ts | 5 +- .../components/Fields/WrapperField.tsx | 19 ++--- src/utils/fieldWhenClause.ts | 69 +++++++++++++++++++ src/utils/index.ts | 1 + 4 files changed, 77 insertions(+), 17 deletions(-) create mode 100644 src/utils/fieldWhenClause.ts diff --git a/src/models/PanelSettings.ts b/src/models/PanelSettings.ts index 4df583a3..b438fcff 100644 --- a/src/models/PanelSettings.ts +++ b/src/models/PanelSettings.ts @@ -92,18 +92,19 @@ export enum WhenOperator { notEquals = "neq", contains = "contains", notContains = "notContains", + startsWith = "startsWith", + endsWith = "endsWith", greaterThan = "gt", greaterThanOrEqual = "gte", lessThan = "lt", lessThanOrEqual = "lte", - startsWith = "startsWith", - endsWith = "endsWith", } export interface WhenClause { fieldRef: string; operator: WhenOperator; value: any; + caseSensitive?: boolean; } export interface DateInfo { diff --git a/src/panelWebView/components/Fields/WrapperField.tsx b/src/panelWebView/components/Fields/WrapperField.tsx index 1e345444..292e35bf 100644 --- a/src/panelWebView/components/Fields/WrapperField.tsx +++ b/src/panelWebView/components/Fields/WrapperField.tsx @@ -14,6 +14,7 @@ import { JsonField } from '../JsonField'; import { IMetadata } from '../Metadata'; import { TagPicker } from '../TagPicker'; import { ChoiceField, DataFileField, DateTimeField, DraftField, FieldTitle, FileField, ListField, Toggle, TextField, SlugField, PreviewImageField, PreviewImageValue, NumberField } from '.'; +import { fieldWhenClause } from '../../../utils/fieldWhenClause'; export interface IWrapperFieldProps { field: Field; @@ -111,22 +112,10 @@ export const WrapperField: React.FunctionComponent = ({ // Conditional fields if (typeof field.when !== "undefined") { - debugger - const when = field.when; - const whenValue = parent[when.fieldRef]; + const shouldRender = fieldWhenClause(field, parent); - if (field.when.operator === WhenOperator.equals) { - if (whenValue !== when.value) { - return null; - } - } else if (field.when.operator === WhenOperator.notEquals) { - if (whenValue === when.value) { - return null; - } - } else if (field.when.operator === WhenOperator.contains) { - if ((typeof whenValue === "string" || whenValue instanceof Array) && !whenValue.includes(when.value)) { - return null; - } + if (!shouldRender) { + return null; } } diff --git a/src/utils/fieldWhenClause.ts b/src/utils/fieldWhenClause.ts new file mode 100644 index 00000000..7e84c82a --- /dev/null +++ b/src/utils/fieldWhenClause.ts @@ -0,0 +1,69 @@ +import { Field, WhenOperator } from "../models"; +import { IMetadata } from "../panelWebView/components/Metadata"; + + +export const fieldWhenClause = (field: Field, parent: IMetadata): boolean => { + const when = field.when; + if (!when) { + return true; + } + + const whenValue = parent[when.fieldRef]; + + switch (when.operator) { + case WhenOperator.equals: + if (whenValue !== when.value) { + return false; + } + break; + case WhenOperator.notEquals: + if (whenValue === when.value) { + return false; + } + break; + case WhenOperator.contains: + if ((typeof whenValue === "string" || whenValue instanceof Array) && !whenValue.includes(when.value)) { + return false; + } + break; + case WhenOperator.notContains: + if ((typeof whenValue === "string" || whenValue instanceof Array) && whenValue.includes(when.value)) { + return false; + } + break; + case WhenOperator.startsWith: + if (typeof whenValue === "string" && !whenValue.startsWith(when.value)) { + return false; + } + break; + case WhenOperator.endsWith: + if (typeof whenValue === "string" && !whenValue.endsWith(when.value)) { + return false; + } + break; + case WhenOperator.greaterThan: + if (typeof whenValue === "number" && whenValue <= when.value) { + return false; + } + break; + case WhenOperator.greaterThanOrEqual: + if (typeof whenValue === "number" && whenValue < when.value) { + return false; + } + break; + case WhenOperator.lessThan: + if (typeof whenValue === "number" && whenValue >= when.value) { + return false; + } + break; + case WhenOperator.lessThanOrEqual: + if (typeof whenValue === "number" && whenValue > when.value) { + return false; + } + break; + default: + break; + } + + return true; +} \ No newline at end of file diff --git a/src/utils/index.ts b/src/utils/index.ts index c23da193..9b5f7e53 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1,5 +1,6 @@ export * from './copyFileAsync'; export * from './existsAsync'; +export * from './fieldWhenClause'; export * from './mkdirAsync'; export * from './readFileAsync'; export * from './readdirAsync'; From 16b6fff6dc0fd9c51c2ed7f51f17423aa59241a6 Mon Sep 17 00:00:00 2001 From: Elio Struyf Date: Sun, 13 Nov 2022 20:21:47 +0100 Subject: [PATCH 3/3] #362 - Case sensitive + insensitive option --- src/utils/fieldWhenClause.ts | 61 ++++++++++++++++++++++++++++++++++-- 1 file changed, 59 insertions(+), 2 deletions(-) diff --git a/src/utils/fieldWhenClause.ts b/src/utils/fieldWhenClause.ts index 7e84c82a..f20c539c 100644 --- a/src/utils/fieldWhenClause.ts +++ b/src/utils/fieldWhenClause.ts @@ -1,15 +1,51 @@ +import { WhenClause } from './../models/PanelSettings'; import { Field, WhenOperator } from "../models"; import { IMetadata } from "../panelWebView/components/Metadata"; - +/** + * Validate the field its "when" clause + * @param field + * @param parent + * @returns + */ export const fieldWhenClause = (field: Field, parent: IMetadata): boolean => { const when = field.when; if (!when) { return true; } - const whenValue = parent[when.fieldRef]; + let whenValue = parent[when.fieldRef]; + if (when.caseSensitive || typeof when.caseSensitive === "undefined") { + return caseSensitive(when, field, whenValue); + } else { + return caseInsensitive(when, field, whenValue); + } +} +/** + * Case sensitive checks + * @param when + * @param field + * @param whenValue + * @returns + */ +const caseInsensitive = (when: WhenClause, field: Field, whenValue: string | IMetadata | string[] | null) => { + whenValue = lowerValue(whenValue); + + const whenClone = Object.assign({}, when); + whenClone.value = lowerValue(whenClone.value); + + return caseSensitive(whenClone, field, whenValue); +} + +/** + * Case insensitive checks + * @param when + * @param field + * @param whenValue + * @returns + */ +const caseSensitive = (when: WhenClause, field: Field, whenValue: string | IMetadata | string[] | null) => { switch (when.operator) { case WhenOperator.equals: if (whenValue !== when.value) { @@ -66,4 +102,25 @@ export const fieldWhenClause = (field: Field, parent: IMetadata): boolean => { } return true; +} + +/** + * Lower the value(s) + * @param value + * @returns + */ +const lowerValue = (value: string | string[] | any) => { + if (typeof value === "string") { + value = value.toLowerCase(); + } else if (value instanceof Array) { + value = value.map(crntValue => { + if (typeof crntValue === "string") { + return crntValue.toLowerCase(); + } + + return crntValue; + }); + } + + return value; } \ No newline at end of file