vbv/client/src/views/MediaCategoryDetailView.vue

<script setup lang="ts">
import LinkCard from "@/components/mediaLibrary/LinkCard.vue";
import MediaLink from "@/components/mediaLibrary/MediaLink.vue";
import { useMediaLibraryStore } from "@/stores/mediaLibrary";
import HandlungsfeldLayout from "@/views/HandlungsfeldLayout.vue";
import * as log from "loglevel";
import { computed } from "vue";

const field = {
  title: "Fahrzeug",
  description:
    "Das Auto ist für viele der grösste Stolz! Es birgt aber auch ein grosses Gefahrenpotenzial.  Dabei geht es bei den heutigen Fahrzeugpreisen und Reparaturkosten rasch um namhafte Summen, die der Fahrzeugbesitzer und die Fahrzeugbesitzerin in einem grösseren Schadenfall oft nur schwer selbst aufbringen kann.",
  icon: "/static/icons/demo/icon-hf-fahrzeug-big.svg",
  summary: {
    text: "In diesem berufstypischem Handlungsfeld lernst du alles rund um Motorfahrzeugversicherungen, wie man sein Auto optimal schützen kann, wie du vorgehst bei einem Fahrzeugwechsel, welche Aspekte du bei einer Offerte beachten musst und wie du dem Kunden die Lösung präsentierst.",
    items: [
      "Motorfahrzeughaftpflichtversicherung",
      "Motorfahrzeugkaskoversicherung",
      "Insassenunfallversicherung",
    ],
  },
  items: [
    {
      title: "Lernmedien",
      type: "learnmedia",
      moreLink: "",
      items: [
        {
          title: "Die Motorfahrzeughaftpflicht",
          description: "Buch «Sach- und Vermögensversicherungen» – Kapitel 16",
          iconUrl: "/static/icons/demo/icon-hf-book.png",
          linkText: "PDF anzeigen",
          link: "/static/media/documents/01a_Motorfahrzeughaftpflicht.pdf",
          openWindow: true,
        },
        {
          title: "Die Motorfahrzeughaftpflicht",
          iconUrl: "/static/icons/demo/icon-hf-book.png",
          description: "Buch «Sach- und Vermögensversicherungen» – Kapitel 16",
          linkText: "PDF anzeigen",
          link: "/static/media/documents/01a_Motorfahrzeughaftpflicht.pdf",
          openWindow: true,
        },
        {
          title: "Die Motorfahrzeughaftpflicht",
          iconUrl: "/static/icons/demo/icon-hf-book.png",
          description: "Buch «Sach- und Vermögensversicherungen» – Kapitel 16",
          linkText: "PDF anzeigen",
          link: "/static/media/documents/01a_Motorfahrzeughaftpflicht.pdf",
          openWindow: true,
        },
        {
          title: "Die Motorfahrzeughaftpflicht",
          iconUrl: "/static/icons/demo/icon-hf-book.png",
          description: "Buch «Sach- und Vermögensversicherungen» – Kapitel 16",
          linkText: "PDF anzeigen",
          link: "/static/media/documents/01a_Motorfahrzeughaftpflicht.pdf",
          openWindow: true,
        },
        {
          title: "Die Motorfahrzeughaftpflicht",
          iconUrl: "/static/icons/demo/icon-hf-book.png",
          description: "Buch «Sach- und Vermögensversicherungen» – Kapitel 16",
          linkText: "PDF anzeigen",
          link: "/static/media/documents/01a_Motorfahrzeughaftpflicht.pdf",
          openWindow: true,
        },
      ],
    },
    {
      title: "Links",
      type: "externalLinks",
      moreLink: "",
      items: [
        {
          title: "Nationales Versicherungsbüro",
          iconUrl: "",
          description: "",
          linkText: "Link öffnen",
          link: "https://www.nbi-ngf.ch/h",
          openWindow: true,
        },
        {
          title: "Adressen der Strassenverkehrsämter",
          iconUrl: "",
          description: "",
          linkText: "Link öffnen",
          link: "https://asa.ch/strassenverkehrsaemter/adressen/",
          openWindow: true,
        },
      ],
    },
    {
      title: "Verankerung im Lernpfad",
      type: "internalLinks",
      moreLink: "",
      items: [
        {
          title: "Circle: Einstieg – Lernsequenz: Anwenden",
          iconUrl: "",
          description: "",
          linkText: "Lerineinheit anzeigen",
          link: "http://localhost:8000/learn/versicherungsvermittlerin/versicherungsvermittlerin-circle-analyse",
          openWindow: false,
        },
        {
          title: "Circle: Einstieg – Lernsequenz: Anwenden",
          iconUrl: "",
          description: "",
          linkText: "Lerineinheit anzeigen",
          link: "http://localhost:8000/learn/versicherungsvermittlerin/versicherungsvermittlerin-circle-analyse",
          openWindow: false,
        },
        {
          title: "Circle: Einstieg – Lernsequenz: Anwenden",
          iconUrl: "",
          description: "",
          linkText: "Lerineinheit anzeigen",
          link: "http://localhost:8000/learn/versicherungsvermittlerin/versicherungsvermittlerin-circle-analyse",
          openWindow: false,
        },
        {
          title: "Circle: Einstieg – Lernsequenz: Anwenden",
          iconUrl: "",
          description: "",
          linkText: "Lerineinheit anzeigen",
          link: "http://localhost:8000/learn/versicherungsvermittlerin/versicherungsvermittlerin-circle-analyse",
          openWindow: false,
        },
      ],
    },
    {
      title: "Querverweise",
      type: "realtiveLinks",
      moreLink: "",
      items: [
        {
          title: "Rechtsstreigkeiten",
          iconUrl: "/static/icons/demo/icon-hf-einkommenssicherung.svg",
          description:
            "Lernmedium: Verkehrsrechtsschutz – Buch «Sach- und Vermögensversicherungen/Kapitel 12.3»",
          linkText: "Handlungsfeldanzeigen",
          link: "http://localhost:8000/media/handlungsfeld",
          openWindow: false,
        },
        {
          title: "Rechtsstreigkeiten",
          iconUrl: "/static/icons/demo/icon-hf-einkommenssicherung.svg",
          description:
            "Lernmedium: Verkehrsrechtsschutz – Buch «Sach- und Vermögensversicherungen/Kapitel 12.3»",
          linkText: "Handlungsfeldanzeigen",
          link: "http://localhost:8000/media/handlungsfeld",
          openWindow: false,
        },
      ],
    },
  ],
};

const props = defineProps<{
  mediaCategorySlug: string;
}>();

log.debug("MediaCategoryDetailView created", props.mediaCategorySlug);

const mediaStore = useMediaLibraryStore();

const mediaCategory = computed(() => {
  return mediaStore.mediaLibraryPage?.children.find(
    (category) => category.slug === props.mediaCategorySlug
  );
});

const maxCardItems = 4;
const maxListItems = 6;

const displayAsCard = (itemType: string): boolean => {
  return itemType === "learnmedia" || itemType === "realtiveLinks";
};

const hasMoreItems = (items: object[], maxItems: number): boolean => {
  return items.length > maxItems;
};

const getMaxDisplayItems = (items: object[], maxItems: number) => {
  return items.slice(0, maxItems);
};

const getMaxDisplayItemsForType = (itemType: string, items: object[]) => {
  return displayAsCard(itemType)
    ? getMaxDisplayItems(items, maxCardItems)
    : getMaxDisplayItems(items, maxListItems);
};

const hasMoreItemsForType = (itemType: string, items: object[]) => {
  const maxItems = displayAsCard(itemType) ? maxCardItems : maxListItems;
  return hasMoreItems(items, maxItems);
};
</script>

<template>
  <Teleport v-if="mediaStore.mediaLibraryPage && mediaCategory" to="body">
    <HandlungsfeldLayout>
      <template #header>
        <div class="flex justify-between">
          <div class="w-5/12">
            <h3 class="font-normal text-large mb-3">Handlungsfeld</h3>
            <h1 class="mb-4 lg:mb-8">{{ mediaCategory.title }}</h1>
            <p>{{ mediaCategory.introduction_text }}</p>
          </div>
          <img class="w-5/12" :src="field.icon" />
        </div>
      </template>
      <template #body>
        <section class="mb-20">
          <h2 class="mb-4">{{ mediaCategory.description_title }}</h2>
          <p class="mb-4 lg:w-2/3">{{ mediaCategory.description_text }}</p>
          <ul>
            <li
              v-for="item in mediaCategory.items"
              :key="item"
              class="mb-2 h-10 leading-10 flex items-center"
            >
              <span
                class="text-sky-500 bg-[url('/static/icons/icon-check.svg')] bg-no-repeat h-10 w-10 mr-2"
              ></span>
              {{ item.value }}
            </li>
          </ul>
        </section>
        <section v-for="item in field.items" :key="item.title" class="mb-20">
          <h2 class="mb-4">{{ item.title }}</h2>
          <ul
            :class="{
              'grid gap-4 grid-cols-1 lg:grid-cols-2': displayAsCard(item.type),
              'border-t': !displayAsCard(item.type),
              'mb-6': hasMoreItemsForType(item.type, item.items),
            }"
          >
            <li
              v-for="subItem in getMaxDisplayItemsForType(item.type, item.items)"
              :key="subItem.link"
            >
              <LinkCard
                v-if="displayAsCard(item.type)"
                :title="subItem.title"
                :icon="subItem.iconUrl"
                :description="subItem.description"
                :url="subItem.link"
                :link-text="subItem.linkText"
                :open-window="subItem.openWindow"
              />
              <div v-else class="flex items-center justify-between border-b py-4">
                <h4 class="text-bold">{{ subItem.title }}</h4>
                <media-link :blank="subItem.openWindow" :to="subItem.link" class="link"
                  >{{ subItem.linkText }}
                </media-link>
              </div>
            </li>
          </ul>
          <router-link
            v-if="hasMoreItemsForType(item.type, item.items)"
            to="/media/handlungsfeldlist"
            class="flex items-center"
          >
            <span>Alle anschauen</span>
            <it-icon-arrow-right></it-icon-arrow-right>
          </router-link>
        </section>
      </template>
    </HandlungsfeldLayout>
  </Teleport>
</template>

<style scoped>
.it-icon-hf {
  color: blue;
}

.it-icon-hf > * {
  @apply m-auto;
}
</style>