From 35b3a3204fa69dcf9caea331ca1bcc55fe5d9fe0 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Thu, 8 Dec 2022 08:34:25 +0100
Subject: [PATCH] Update CompetenceDetail component

---
 .../competences/CompetenceDetail.vue          | 24 ++++++++++++++-----
 client/src/components/ui/ItPersonRow.vue      |  2 +-
 client/src/components/ui/ItToggleArrow.vue    | 10 +++++---
 .../pages/cockpit/CockpitUserProfilePage.vue  | 10 +++++---
 4 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/client/src/components/competences/CompetenceDetail.vue b/client/src/components/competences/CompetenceDetail.vue
index 5744a6c1..c1eec950 100644
--- a/client/src/components/competences/CompetenceDetail.vue
+++ b/client/src/components/competences/CompetenceDetail.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import PerformanceCriteriaRow from "@/components/competences/PerformanceCriteriaRow.vue";
 import ItProgress from "@/components/ui/ItProgress.vue";
+import ItToggleArrow from "@/components/ui/ItToggleArrow.vue";
 import { useCompetenceStore } from "@/stores/competence";
 import type { CompetencePage } from "@/types";
 import { ref } from "vue";
@@ -11,10 +12,12 @@ interface Props {
   competence: CompetencePage;
   courseSlug: string;
   showAssessAgain?: boolean;
+  isInline?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   showAssessAgain: true,
+  isInline: false,
 });
 
 const isOpen = ref(false);
@@ -28,19 +31,28 @@ const togglePerformanceCriteria = () => {
   <div>
     <div :class="{ 'pb-8 border-b mb-4': isOpen }" class="-mx-8 px-8">
       <div
-        class="mb-4 flex flex-row justify-between items-center"
+        class="flex flex-row justify-between items-center"
+        :class="props.isInline ? '' : 'mb-4'"
         role="button"
         aria-pressed="false"
         @click="togglePerformanceCriteria()"
       >
-        <h2 class="text-large">
+        <h2 :class="props.isInline ? ['text-bold', 'w-2/5'] : 'text-large'">
           {{ competence.competence_id }} {{ competence.title }}
         </h2>
-        <div class="transition-transform" :class="{ 'rotate-180': isOpen }">
-          <it-icon-arrow-down class="h-10 w-10" aria-hidden="true" />
-        </div>
+        <ItProgress
+          v-if="isInline"
+          class="w-[330px]"
+          :status-count="
+            competenceStore.calcStatusCount(
+              competenceStore.criteriaByCompetence(competence)
+            )
+          "
+        ></ItProgress>
+        <ItToggleArrow :is-open="isOpen" :small="isInline"></ItToggleArrow>
       </div>
       <ItProgress
+        v-if="!isInline"
         :status-count="
           competenceStore.calcStatusCount(
             competenceStore.criteriaByCompetence(competence)
@@ -52,7 +64,7 @@ const togglePerformanceCriteria = () => {
       <li
         v-for="performanceCriteria in competenceStore.criteriaByCompetence(competence)"
         :key="performanceCriteria.id"
-        class="mb-4 pb-4 border-b"
+        class="mb-4 pb-4 border-b last:border-0"
       >
         <PerformanceCriteriaRow
           :criteria="performanceCriteria"
diff --git a/client/src/components/ui/ItPersonRow.vue b/client/src/components/ui/ItPersonRow.vue
index 851fce21..6f3561d9 100644
--- a/client/src/components/ui/ItPersonRow.vue
+++ b/client/src/components/ui/ItPersonRow.vue
@@ -10,7 +10,7 @@ const props = defineProps<{
     class="py-4 leading-[45px] border-t border-gray-500 flex flex-col lg:flex-row justify-between"
   >
     <div class="flex flex-row md:w-1/4 items-center">
-      <img class="h-[45px] rounded-full mr-2" :src="avatarUrl"/>
+      <img class="h-[45px] rounded-full mr-2" :src="avatarUrl" />
       <p class="text-bold lg:leading-[45px]">{{ name }}</p>
     </div>
     <div class="flex-1 flex items-center">
diff --git a/client/src/components/ui/ItToggleArrow.vue b/client/src/components/ui/ItToggleArrow.vue
index c2e57a79..e95b25f7 100644
--- a/client/src/components/ui/ItToggleArrow.vue
+++ b/client/src/components/ui/ItToggleArrow.vue
@@ -10,13 +10,17 @@ const props = withDefaults(defineProps<Props>(), {
 });
 
 function sizeClasses() {
-  return props.small ? ["h-8", "w-8"] : ["h-10", "w-10"];
+  const classes = props.small ? ["h-8", "w-8"] : ["h-10", "w-10"];
+  if (props.isOpen) {
+    classes.push("rotate-180");
+  }
+  return classes;
 }
 </script>
 
 <template>
-  <div class="transition-transform" :class="{ 'rotate-180': isOpen }">
-    <it-icon-arrow-down :class="sizeClasses()" aria-hidden="true" />
+  <div class="transition-transform" :class="sizeClasses()">
+    <it-icon-arrow-down aria-hidden="true" />
   </div>
 </template>
 <style lang="scss" scoped></style>
diff --git a/client/src/pages/cockpit/CockpitUserProfilePage.vue b/client/src/pages/cockpit/CockpitUserProfilePage.vue
index 9feb5c1e..c12edf68 100644
--- a/client/src/pages/cockpit/CockpitUserProfilePage.vue
+++ b/client/src/pages/cockpit/CockpitUserProfilePage.vue
@@ -61,7 +61,7 @@ function setActiveClasses(isActive: boolean) {
         </div>
       </header>
       <main>
-        <div v-if="learningPath" class="bg-white w-full mb-8">
+        <div v-if="learningPath" class="bg-white w-full pt-8 pb-4 mb-8">
           <LearningPathDiagram
             class="mx-auto max-w-[1920px] max-h-[90px] lg:max-h-[380px] w-full px-4"
             diagram-type="horizontal"
@@ -84,16 +84,20 @@ function setActiveClasses(isActive: boolean) {
           </li>
         </ul>
         <div>
-          <ul v-if="competenceStore.competenceProfilePage(user.user_id)">
+          <ul
+            class="px-8 bg-white"
+            v-if="competenceStore.competenceProfilePage(user.user_id)"
+          >
             <li
               v-for="competence in competenceStore.competences(user.user_id)"
               :key="competence.id"
-              class="bg-white p-8 mb-8"
+              class="p-8 border-b last:border-0 border-gray-500"
             >
               <CompetenceDetail
                 :competence="competence"
                 :course-slug="props.courseSlug"
                 :show-assess-again="false"
+                :is-inline="true"
               ></CompetenceDetail>
             </li>
           </ul>