ParameterSchemaDescriptionComponent.vue

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

const props = defineProps({
  schema: {
    type: Object,
    required: true,
  },
});

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

const navParameterGroups = computed<ParameterGroup[]>(() =>
  Object.keys(parameterGroups.value)
    .map((group) => {
      return {
        group: group,
        title: parameterGroups.value[group]["title"],
        icon: parameterGroups.value[group]["fa_icon"],
      };
    })
    .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
    )
);

const parameterGroups = computed<Record<string, never>>(
  () => props.schema["definitions"]
);
</script>

<template>
  <div class="row mb-5 align-items-start">
    <div class="col-9">
      <div v-for="(group, groupName) in parameterGroups" :key="groupName">
        <parameter-group-description
          :parameter-group="group"
          :parameter-group-name="groupName"
        />
      </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>
        </nav>
      </nav>
    </div>
  </div>
</template>

<style scoped></style>