path: root/packages/web-util/src/forms/ui-form.ts

import {
  buildCodecForObject,
  buildCodecForUnion,
  Codec,
  codecForBoolean,
  codecForConstString,
  codecForLazy,
  codecForList,
  codecForNumber,
  codecForString,
  codecForTimestamp,
  codecOptional,
  Integer,
  TalerProtocolTimestamp,
} from "@gnu-taler/taler-util";

export type FlexibleForm = DoubleColumnForm;

export interface DoubleColumnForm {
  type: "double-column";
  design: Array<DoubleColumnFormSection>;
  // behavior?: (form: Partial<T>) => FormState<T>;
}

export type DoubleColumnFormSection = {
  title: string;
  description?: string;
  fields: UIFormFieldConfig[];
};

// export interface BaseForm {
//   state: TalerExchangeApi.AmlState;
//   threshold: AmountJson;
// }

export type UIFormFieldConfig =
  | UIFormFieldConfigAbsoluteTime
  | UIFormFieldConfigAmount
  | UIFormFieldConfigArray
  | UIFormFieldConfigCaption
  | UIFormFieldConfigChoiseHorizontal
  | UIFormFieldConfigChoiseStacked
  | UIFormFieldConfigFile
  | UIFormFieldConfigGroup
  | UIFormFieldConfigInteger
  | UIFormFieldConfigSelectMultiple
  | UIFormFieldConfigSelectOne
  | UIFormFieldConfigText
  | UIFormFieldConfigTextArea
  | UIFormFieldConfigToggle;

type UIFormFieldConfigAbsoluteTime = {
  type: "absoluteTime";
  properties: UIFormFieldBaseConfig & {
    max?: TalerProtocolTimestamp;
    min?: TalerProtocolTimestamp;
    pattern: string;
  };
};

type UIFormFieldConfigAmount = {
  type: "amount";
  properties: UIFormFieldBaseConfig & {
    max?: Integer;
    min?: Integer;
    currency: string;
  };
};

type UIFormFieldConfigArray = {
  type: "array";
  properties: UIFormFieldBaseConfig & {
    // id of the field shown when the array is collapsed
    labelFieldId: UIHandlerId;
    fields: UIFormFieldConfig[];
  };
};

type UIFormFieldConfigCaption = {
  type: "caption";
  properties: UIFieldBaseDescription;
};

type UIFormFieldConfigGroup = {
  type: "group";
  properties: UIFieldBaseDescription & {
    fields: UIFormFieldConfig[];
  };
};

type UIFormFieldConfigChoiseHorizontal = {
  type: "choiceHorizontal";
  properties: UIFormFieldBaseConfig & {
    choices: Array<SelectUiChoice>;
  };
};

type UIFormFieldConfigChoiseStacked = {
  type: "choiceStacked";
  properties: UIFormFieldBaseConfig & {
    choices: Array<SelectUiChoice>;
  };
};

type UIFormFieldConfigFile = {
  type: "file";
  properties: UIFormFieldBaseConfig & {
    maxBytes?: Integer;
    minBytes?: Integer;
    // comma-separated list of one or more file types
    // https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept#unique_file_type_specifiers
    accept?: string;
  };
};
type UIFormFieldConfigInteger = {
  type: "integer";
  properties: UIFormFieldBaseConfig & {
    max?: Integer;
    min?: Integer;
  };
};

interface SelectUiChoice {
  label: string;
  description?: string;
  value: string;
}

type UIFormFieldConfigSelectMultiple = {
  type: "selectMultiple";
  properties: UIFormFieldBaseConfig & {
    max?: Integer;
    min?: Integer;
    unique?: boolean;
    choices: Array<SelectUiChoice>;
  };
};
type UIFormFieldConfigSelectOne = {
  type: "selectOne";
  properties: UIFormFieldBaseConfig & {
    choices: Array<SelectUiChoice>;
  };
};
type UIFormFieldConfigText = {
  type: "text";
  properties: UIFormFieldBaseConfig;
};
type UIFormFieldConfigTextArea = {
  type: "textArea";
  properties: UIFormFieldBaseConfig;
};
type UIFormFieldConfigToggle = {
  type: "toggle";
  properties: UIFormFieldBaseConfig;
};

export type UIFieldBaseDescription = {
  /* label if the field, visible for the user */
  label: string;
  /* long text to be shown on user demand */
  tooltip?: string;

  /* short text to be shown close to the field */
  help?: string;

  /* name of the field, useful for a11y */
  name: string;

  /* if the field should be initialy hidden */
  hidden?: boolean;
  /* ui element to show before */
  addonBeforeId?: string;
  /* ui element to show after */
  addonAfterId?: string;
};

export type UIFormFieldBaseConfig = UIFieldBaseDescription & {
  /* example to be shown inside the field */
  placeholder?: string;

  /* show a mark as required */
  required?: boolean;

  /* readonly and dim */
  disabled?: boolean;

  /* conversion id to conver the string into the value type
      the id should be known to the ui impl
   */
  converterId?: string;

  /* property id of the form */
  id: UIHandlerId;
};

declare const __handlerId: unique symbol;
export type UIHandlerId = string & { [__handlerId]: true };

// FIXME: validate well formed ui field id
const codecForUiFieldId = codecForString as () => Codec<UIHandlerId>;

const codecForUIFormFieldBaseDescriptionTemplate = <
  T extends UIFieldBaseDescription,
>() =>
  buildCodecForObject<T>()
    .property("addonAfterId", codecOptional(codecForString()))
    .property("addonBeforeId", codecOptional(codecForString()))
    .property("hidden", codecOptional(codecForBoolean()))
    .property("help", codecOptional(codecForString()))
    .property("label", codecForString())
    .property("name", codecForString())
    .property("tooltip", codecOptional(codecForString()));

const codecForUIFormFieldBaseConfigTemplate = <
  T extends UIFormFieldBaseConfig,
>() =>
  codecForUIFormFieldBaseDescriptionTemplate<T>()
    .property("id", codecForUiFieldId())
    .property("converterId", codecOptional(codecForString()))
    .property("disabled", codecOptional(codecForBoolean()))
    .property("required", codecOptional(codecForBoolean()))
    .property("placeholder", codecOptional(codecForString()));

const codecForUIFormFieldBaseConfig = (): Codec<UIFormFieldBaseConfig> =>
  codecForUIFormFieldBaseConfigTemplate().build("UIFieldToggleProperties");

const codecForUIFormFieldAbsoluteTimeConfig = (): Codec<
  UIFormFieldConfigAbsoluteTime["properties"]
> =>
  codecForUIFormFieldBaseConfigTemplate<
    UIFormFieldConfigAbsoluteTime["properties"]
  >()
    .property("pattern", codecForString())
    .property("max", codecOptional(codecForTimestamp))
    .property("min", codecOptional(codecForTimestamp))
    .build("UIFormFieldConfigAbsoluteTime.properties");

const codecForUiFormFieldAbsoluteTime =
  (): Codec<UIFormFieldConfigAbsoluteTime> =>
    buildCodecForObject<UIFormFieldConfigAbsoluteTime>()
      .property("type", codecForConstString("absoluteTime"))
      .property("properties", codecForUIFormFieldAbsoluteTimeConfig())
      .build("UIFormFieldConfigAbsoluteTime");

const codecForUIFormFieldAmountConfig = (): Codec<
  UIFormFieldConfigAmount["properties"]
> =>
  codecForUIFormFieldBaseConfigTemplate<UIFormFieldConfigAmount["properties"]>()
    .property("currency", codecForString())
    .property("max", codecOptional(codecForNumber()))
    .property("min", codecOptional(codecForNumber()))
    .build("UIFormFieldConfigAmount.properties");

const codecForUiFormFieldAmount = (): Codec<UIFormFieldConfigAmount> =>
  buildCodecForObject<UIFormFieldConfigAmount>()
    .property("type", codecForConstString("amount"))
    .property("properties", codecForUIFormFieldAmountConfig())
    .build("UIFormFieldConfigAmount");

const codecForUIFormFieldArrayConfig = (): Codec<
  UIFormFieldConfigArray["properties"]
> =>
  codecForUIFormFieldBaseConfigTemplate<UIFormFieldConfigArray["properties"]>()
    .property("labelFieldId", codecForUiFieldId())
    // eslint-disable-next-line @typescript-eslint/no-use-before-define
    .property("fields", codecForList(codecForUiFormField()))
    .build("UIFormFieldConfigArray.properties");

const codecForUiFormFieldArray = (): Codec<UIFormFieldConfigArray> =>
  buildCodecForObject<UIFormFieldConfigArray>()
    .property("type", codecForConstString("array"))
    .property("properties", codecForUIFormFieldArrayConfig())
    .build("UIFormFieldConfigArray");

const codecForUiFormFieldCaption = (): Codec<UIFormFieldConfigCaption> =>
  buildCodecForObject<UIFormFieldConfigCaption>()
    .property("type", codecForConstString("caption"))
    .property("properties", codecForUIFormFieldBaseConfig())
    .build("UIFormFieldConfigCaption");

const codecForUiFormSelectUiChoice = (): Codec<SelectUiChoice> =>
  buildCodecForObject<SelectUiChoice>()
    .property("description", codecOptional(codecForString()))
    .property("label", codecForString())
    .property("value", codecForString())
    .build("SelectUiChoice");

const codecForUIFormFieldWithChoiseConfig = (): Codec<
  UIFormFieldConfigChoiseHorizontal["properties"]
> =>
  codecForUIFormFieldBaseConfigTemplate<
    UIFormFieldConfigChoiseHorizontal["properties"]
  >()
    .property("choices", codecForList(codecForUiFormSelectUiChoice()))
    .build("UIFormFieldConfigChoiseHorizontal.properties");

const codecForUiFormFieldChoiceHorizontal =
  (): Codec<UIFormFieldConfigChoiseHorizontal> =>
    buildCodecForObject<UIFormFieldConfigChoiseHorizontal>()
      .property("type", codecForConstString("choiceHorizontal"))
      .property("properties", codecForUIFormFieldWithChoiseConfig())
      .build("UIFormFieldConfigChoiseHorizontal");

const codecForUiFormFieldChoiceStacked =
  (): Codec<UIFormFieldConfigChoiseStacked> =>
    buildCodecForObject<UIFormFieldConfigChoiseStacked>()
      .property("type", codecForConstString("choiceStacked"))
      .property("properties", codecForUIFormFieldWithChoiseConfig())
      .build("UIFormFieldConfigChoiseStacked");

const codecForUIFormFieldFileConfig = (): Codec<
  UIFormFieldConfigFile["properties"]
> =>
  codecForUIFormFieldBaseConfigTemplate<UIFormFieldConfigFile["properties"]>()
    .property("accept", codecOptional(codecForString()))
    .property("maxBytes", codecOptional(codecForNumber()))
    .property("minBytes", codecOptional(codecForNumber()))
    .build("UIFormFieldConfigFile.properties");

const codecForUiFormFieldFile = (): Codec<UIFormFieldConfigFile> =>
  buildCodecForObject<UIFormFieldConfigFile>()
    .property("type", codecForConstString("file"))
    .property("properties", codecForUIFormFieldFileConfig())
    .build("UIFormFieldConfigFile");

const codecForUIFormFieldWithFieldsConfig = (): Codec<
  UIFormFieldConfigGroup["properties"]
> =>
  codecForUIFormFieldBaseDescriptionTemplate<
    UIFormFieldConfigGroup["properties"]
  >()
    // eslint-disable-next-line @typescript-eslint/no-use-before-define
    .property("fields", codecForList(codecForUiFormField()))
    .build("UIFormFieldConfigGroup.properties");

const codecForUiFormFieldGroup = (): Codec<UIFormFieldConfigGroup> =>
  buildCodecForObject<UIFormFieldConfigGroup>()
    .property("type", codecForConstString("group"))
    .property("properties", codecForUIFormFieldWithFieldsConfig())
    .build("UiFormFieldGroup");

const codecForUiFormFieldInteger = (): Codec<UIFormFieldConfigInteger> =>
  buildCodecForObject<UIFormFieldConfigInteger>()
    .property("type", codecForConstString("integer"))
    .property("properties", codecForUIFormFieldBaseConfig())
    .build("UIFormFieldConfigInteger");

const codecForUIFormFieldSelectMultipleConfig = (): Codec<
  UIFormFieldConfigSelectMultiple["properties"]
> =>
  codecForUIFormFieldBaseConfigTemplate<
    UIFormFieldConfigSelectMultiple["properties"]
  >()
    .property("max", codecOptional(codecForNumber()))
    .property("min", codecOptional(codecForNumber()))
    .property("unique", codecOptional(codecForBoolean()))
    .property("choices", codecForList(codecForUiFormSelectUiChoice()))
    .build("UIFormFieldConfigSelectMultiple.properties");

const codecForUiFormFieldSelectMultiple =
  (): Codec<UIFormFieldConfigSelectMultiple> =>
    buildCodecForObject<UIFormFieldConfigSelectMultiple>()
      .property("type", codecForConstString("selectMultiple"))
      .property("properties", codecForUIFormFieldSelectMultipleConfig())
      .build("UiFormFieldSelectMultiple");

const codecForUiFormFieldSelectOne = (): Codec<UIFormFieldConfigSelectOne> =>
  buildCodecForObject<UIFormFieldConfigSelectOne>()
    .property("type", codecForConstString("selectOne"))
    .property("properties", codecForUIFormFieldWithChoiseConfig())
    .build("UIFormFieldConfigSelectOne");

const codecForUiFormFieldText = (): Codec<UIFormFieldConfigText> =>
  buildCodecForObject<UIFormFieldConfigText>()
    .property("type", codecForConstString("text"))
    .property("properties", codecForUIFormFieldBaseConfig())
    .build("UIFormFieldConfigText");

const codecForUiFormFieldTextArea = (): Codec<UIFormFieldConfigTextArea> =>
  buildCodecForObject<UIFormFieldConfigTextArea>()
    .property("type", codecForConstString("textArea"))
    .property("properties", codecForUIFormFieldBaseConfig())
    .build("UIFormFieldConfigTextArea");

const codecForUiFormFieldToggle = (): Codec<UIFormFieldConfigToggle> =>
  buildCodecForObject<UIFormFieldConfigToggle>()
    .property("type", codecForConstString("toggle"))
    .property("properties", codecForUIFormFieldBaseConfig())
    .build("UIFormFieldConfigToggle");

const codecForUiFormField = (): Codec<UIFormFieldConfig> =>
  buildCodecForUnion<UIFormFieldConfig>()
    .discriminateOn("type")
    .alternative("array", codecForLazy(codecForUiFormFieldArray))
    .alternative("group", codecForLazy(codecForUiFormFieldGroup))
    .alternative("absoluteTime", codecForUiFormFieldAbsoluteTime())
    .alternative("amount", codecForUiFormFieldAmount())
    .alternative("caption", codecForUiFormFieldCaption())
    .alternative("choiceHorizontal", codecForUiFormFieldChoiceHorizontal())
    .alternative("choiceStacked", codecForUiFormFieldChoiceStacked())
    .alternative("file", codecForUiFormFieldFile())
    .alternative("integer", codecForUiFormFieldInteger())
    .alternative("selectMultiple", codecForUiFormFieldSelectMultiple())
    .alternative("selectOne", codecForUiFormFieldSelectOne())
    .alternative("text", codecForUiFormFieldText())
    .alternative("textArea", codecForUiFormFieldTextArea())
    .alternative("toggle", codecForUiFormFieldToggle())
    .build("UIFormField");

const codecForDoubleColumnFormSection = (): Codec<DoubleColumnFormSection> =>
  buildCodecForObject<DoubleColumnFormSection>()
    .property("title", codecForString())
    .property("description", codecOptional(codecForString()))
    .property("fields", codecForList(codecForUiFormField()))
    .build("DoubleColumnFormSection");

const codecForDoubleColumnForm = (): Codec<DoubleColumnForm> =>
  buildCodecForObject<DoubleColumnForm>()
    .property("type", codecForConstString("double-column"))
    .property("design", codecForList(codecForDoubleColumnFormSection()))
    .build("DoubleColumnForm");

const codecForFlexibleForm = (): Codec<FlexibleForm> =>
  buildCodecForUnion<FlexibleForm>()
    .discriminateOn("type")
    .alternative("double-column", codecForDoubleColumnForm())
    .build<FlexibleForm>("FlexibleForm");

const codecForFormMetadata = (): Codec<FormMetadata> =>
  buildCodecForObject<FormMetadata>()
    .property("label", codecForString())
    .property("id", codecForString())
    .property("version", codecForNumber())
    .property("config", codecForFlexibleForm())
    .build("FormMetadata");

export const codecForUIForms = (): Codec<UiForms> =>
  buildCodecForObject<UiForms>()
    .property("forms", codecForList(codecForFormMetadata()))
    .build("UiForms");

export type FormMetadata = {
  label: string;
  id: string;
  version: number;
  config: FlexibleForm;
};

export interface UiForms {
  // Where libeufin backend is localted
  // default: window.origin without "webui/"
  forms: Array<FormMetadata>;
}