ParameterSchemaDescriptionComponent.vue

<script setup lang="ts">
import { computed, type PropType, ref } from "vue";
import ParameterGroupDescription from "@/components/parameter-schema/description-mode/ParameterGroupDescription.vue";
import FontAwesomeIcon from "@/components/FontAwesomeIcon.vue";
import type { ClowmInfo } from "@/types/ClowmInfo";

const props = defineProps({
  schema: {
    type: Object,
    required: true,
  },
  clowmInfo: {
    type: Object as PropType<ClowmInfo>,
    required: false,
  },
});

type ParameterGroup = {
  group: string;
  title: string;
  icon?: string;
};

const showHidden = ref<boolean>(false);

const navParameterGroups = computed<ParameterGroup[]>(() => {
  let groups = Object.keys(parameterGroups.value).map((group) => {
    return {
      group: group,
      title: parameterGroups.value[group]["title"],
      icon: parameterGroups.value[group]["fa_icon"],
    };
  });
  if (!showHidden.value) {
    groups = groups.filter(
      // filter all groups that have only hidden parameters
      (group) =>
        Object.keys(parameterGroups.value[group.group]["properties"]).filter(
          (key) =>
            !parameterGroups.value[group.group]["properties"][key]["hidden"],
        ).length > 0,
    );
  }
  return groups;
});

const parameterGroups = computed<Record<string, never>>(() => {
  if (Object.keys(props.schema?.["properties"] ?? {}).length > 0) {
    return {
      ...props.schema?.["definitions"],
      ungrouped_parameters: {
        title: "Ungrouped Parameters",
        properties: props.schema?.["properties"],
        type: "object",
      },
    };
  }
  return props.schema?.["definitions"];
});
</script>

<template>
  <div class="row px-2 mb-5 align-items-start">
    <div class="col-9">
      <div v-for="(group, groupName) in parameterGroups" :key="groupName">
        <parameter-group-description
          :parameter-group="group"
          class="schema-group-description"
          :parameter-group-name="groupName"
          :show-hidden="showHidden"
          :resource-parameters="props.clowmInfo?.resourceParameters"
        />
      </div>
    </div>
    <div
      class="col-3 sticky-top"
      style="top: 70px !important; max-height: calc(100vh - 150px)"
    >
      <nav class="h-100 rounded-1 border">
        <nav class="nav">
          <ul class="ps-0">
            <li
              class="nav-link"
              v-for="group in navParameterGroups"
              :key="group.group"
            >
              <a :href="'#' + group.group">
                <font-awesome-icon
                  :icon="group.icon"
                  v-if="group.icon"
                  class="me-2"
                />
                {{ group.title }}</a
              >
            </li>
          </ul>
          <div class="mx-auto mb-3">
            <input
              type="checkbox"
              class="btn-check ms-1"
              id="btn-check-outlined"
              v-model="showHidden"
              autocomplete="off"
            />
            <label class="btn btn-outline-primary" for="btn-check-outlined">
              <font-awesome-icon
                :icon="showHidden ? 'fa-solid fa-eye' : 'fa-solid fa-eye-slash'"
              />
              Show hidden Parameters
            </label>
          </div>
        </nav>
      </nav>
    </div>
  </div>
</template>

<style scoped>
.schema-group-description:last-of-type {
  border-bottom: var(--bs-border-width) var(--bs-border-style) !important;
}
</style>