ParameterGroupForm.vue

<script setup lang="ts">
import FontAwesomeIcon from "@/components/FontAwesomeIcon.vue";
import { computed, type PropType } from "vue";
import MarkdownRenderer from "@/components/MarkdownRenderer.vue";
import type { WorkflowParameters } from "@/types/WorkflowParameters";
import ParameterInput from "@/components/parameter-schema/form-mode/ParameterInput.vue";

const model = defineModel<WorkflowParameters>({ required: true });

const props = defineProps({
  parameterGroup: {
    type: Object,
    required: true,
    validator(value: Record<string, never>) {
      return "object" === value["type"];
    },
  },
  parameterGroupName: {
    type: String,
    required: true,
  },
  showHidden: {
    type: Boolean,
    default: false,
  },
  showOptional: {
    type: Boolean,
    default: false,
  },
  resourceParameters: {
    type: Array as PropType<string[]>,
    required: false,
  },
  mapping: Object as PropType<Record<string, Record<string, string | number>>>,
});
const title = computed<string>(() => props.parameterGroup["title"]);
const icon = computed<string>(() => props.parameterGroup["fa_icon"]);
const description = computed<string>(() => props.parameterGroup["description"]);
const groupHidden = computed<boolean>(() =>
  Object.keys(parameters.value).reduce(
    (acc: boolean, val: string) => acc && parameters.value[val]["hidden"],
    true,
  ),
);
const groupRequired = computed<boolean>(
  () => (props.parameterGroup["required"] ?? []).length > 0,
);
const parameters = computed<Record<string, never>>(
  () => props.parameterGroup["properties"],
);

function parameterRequired(
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  parameterGroup: Record<string, any>,
  parameterName: string,
): boolean {
  return (
    parameterGroup["required"]?.includes(parameterName) || // parameter is required
    parameterGroup["dependentRequired"]?.[parameterName] // parameter is required when another parameter is set
      ?.map((param: string) => model.value[param])
      ?.reduce((acc: boolean, val: string) => acc || val, false)
  );
}

function parameterId(parameterName: string): string {
  return parameterName.replace(/\./g, "");
}
</script>

<template>
  <div
    class="card mb-3"
    :hidden="(!showHidden && groupHidden) || (!showOptional && !groupRequired)"
  >
    <h3 class="card-header" :id="props.parameterGroupName">
      <font-awesome-icon :icon="icon" class="me-2" v-if="icon" />
      {{ title }}
    </h3>
    <div class="card-body">
      <h5 class="card-title" v-if="description">{{ description }}</h5>
      <template
        v-for="(parameter, parameterName) in parameters"
        :key="parameterName"
      >
        <div
          :hidden="
            (!showHidden && parameter['hidden']) ||
            (!showOptional && !parameterRequired(parameterGroup, parameterName))
          "
        >
          <code
            class="p-2 rounded-top border-bottom-0 border bg-secondary-subtle border-secondary"
            >--{{ parameter["name"] ?? parameterName }}</code
          ><span
            v-if="parameterRequired(parameterGroup, parameterName)"
            class="rounded p-1 bg-warning text-light ms-2"
            >required</span
          >
          <div class="input-group">
            <span
              class="input-group-text border-end-0 border border-secondary"
              v-if="parameter['fa_icon']"
            >
              <font-awesome-icon :icon="parameter['fa_icon']" />
            </span>
            <parameter-input
              :parameter="parameter"
              v-model="model[parameterName]"
              :required="parameterRequired(parameterGroup, parameterName)"
              border="secondary"
              :resource-parameter="resourceParameters?.includes(parameterName)"
              :allow-raw="showOptional"
              :mapping="mapping?.[parameterName]"
            />
            <span
              class="input-group-text cursor-pointer px-2 border border-secondary"
              v-if="parameter['help_text']"
              data-bs-toggle="collapse"
              :data-bs-target="'#help-collapse-' + parameterId(parameterName)"
              aria-expanded="false"
              :aria-controls="'help-collapse-' + parameterId(parameterName)"
            >
              <font-awesome-icon
                class="cursor-pointer"
                icon="fa-solid fa-circle-question"
              />
            </span>
          </div>
          <label v-if="parameter['description']">
            <markdown-renderer :markdown="parameter['description']" />
          </label>
          <div
            class="collapse"
            :id="'help-collapse-' + parameterId(parameterName)"
            v-if="parameter['help_text']"
          >
            <div class="p-2 pb-0 mx-2 mb-3 flex-shrink-1 border rounded">
              <markdown-renderer
                class="helpTextCode"
                :markdown="parameter['help_text']"
              />
              <p v-if="parameter['pattern']">
                Pattern: <code>{{ parameter["pattern"] }}</code>
              </p>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<style scoped>
div.card-body {
  backdrop-filter: brightness(1.2);
}

span.cursor-pointer:hover {
  color: var(--bs-info);
  background: var(--bs-light);
}
</style>