From abe60e746801b02324de136704d19278a992c57b Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 13 Nov 2024 16:48:35 +0100
Subject: [PATCH] Make dropdown component usable as heading

---
 client/src/components/ui/ItDropdownSelect.vue | 30 +++++++++++++------
 .../cockpitPage/CockpitExpertHomePage.vue     |  4 ++-
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/client/src/components/ui/ItDropdownSelect.vue b/client/src/components/ui/ItDropdownSelect.vue
index b1cb47df..7947550d 100644
--- a/client/src/components/ui/ItDropdownSelect.vue
+++ b/client/src/components/ui/ItDropdownSelect.vue
@@ -9,6 +9,8 @@ interface Props {
   items?: DropdownSelectable[];
   borderless?: boolean;
   placeholderText?: string | null;
+  asHeading?: boolean; // style the dropdown to be used as a page heading
+  typeName?: string; // to display the type of the selected item, e.g. `Circle: Fahrzeug` instead of `Fahrzeug`
 }
 
 const emit = defineEmits<{
@@ -24,6 +26,8 @@ const props = withDefaults(defineProps<Props>(), {
   },
   items: () => [],
   placeholderText: null,
+  asHeading: false,
+  typeName: "",
 });
 
 const dropdownSelected = computed<DropdownSelectable>({
@@ -36,26 +40,34 @@ const dropdownSelected = computed<DropdownSelectable>({
   <Listbox v-model="dropdownSelected" as="div">
     <div class="relative w-full">
       <ListboxButton
-        class="relative flex w-full cursor-default flex-row items-center bg-white py-3 pl-5 pr-10 text-left"
-        :class="{
-          border: !props.borderless,
-          'font-bold': !props.borderless,
-        }"
+        :class="[
+          {
+            border: !borderless && !asHeading,
+            'font-bold': !borderless,
+          },
+          asHeading
+            ? 'group flex w-full items-center gap-1 rounded-md bg-transparent px-3 text-base focus:outline-none'
+            : 'relative flex w-full cursor-default flex-row items-center bg-white py-3 pl-5 pr-10 text-left',
+        ]"
         data-cy="dropdown-select"
       >
         <span v-if="dropdownSelected.iconName" class="mr-4">
           <component :is="dropdownSelected.iconName"></component>
         </span>
-        <span class="block truncate">
-          {{ dropdownSelected.name }}
+        <span class="block h-11 truncate text-4xl">
+          {{ typeName }} {{ dropdownSelected.name }}
           <span v-if="placeholderText && !dropdownSelected.name" class="text-gray-900">
             {{ placeholderText }}
           </span>
         </span>
         <span
-          class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2"
+          class="pointer-events-none flex items-center pr-2"
+          :class="asHeading ? '' : 'absolute inset-y-0 right-0'"
         >
-          <it-icon-arrow-down class="h-5 w-5" aria-hidden="true" />
+          <it-icon-arrow-down
+            :class="asHeading ? 'h-12 w-12' : 'h-5 w-5'"
+            aria-hidden="true"
+          />
         </span>
       </ListboxButton>
 
diff --git a/client/src/pages/cockpit/cockpitPage/CockpitExpertHomePage.vue b/client/src/pages/cockpit/cockpitPage/CockpitExpertHomePage.vue
index 052f347b..1f659dda 100644
--- a/client/src/pages/cockpit/cockpitPage/CockpitExpertHomePage.vue
+++ b/client/src/pages/cockpit/cockpitPage/CockpitExpertHomePage.vue
@@ -19,10 +19,12 @@ const props = defineProps<{
 </script>
 <template>
   <div v-if="expertCockpitStore.circles?.length">
-    <div v-if="expertCockpitStore.currentCircle" class="container-large">
+    <div v-if="expertCockpitStore.currentCircle" class="container-large pt-10">
       <div class="mb-9 flex flex-col lg:flex-row lg:items-center lg:justify-between">
         <ItDropdownSelect
+          :as-heading="true"
           :model-value="expertCockpitStore.currentCircle"
+          type-name="Circle:"
           class="mt-4 w-full lg:mt-0 lg:w-96"
           :items="expertCockpitStore.circles"
           @update:model-value="expertCockpitStore.setCurrentCourseCircleFromEvent"