From 934d4c6945b3beaa0673966ef2920b38e79b7123 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Mon, 5 Dec 2022 15:51:44 +0100
Subject: [PATCH] Add page, refactor arrow

---
 .../competences/CompetenceDetail.vue          | 11 ++-
 client/src/components/ui/ItProgress.vue       | 52 ++++++++++++++
 client/src/components/ui/ItToggleArrow.vue    | 23 ++++++
 client/src/locales/de.json                    | 11 ++-
 client/src/pages/ProfilePage.vue              | 71 ++++++++++++++++++-
 client/tailwind.config.js                     |  1 +
 6 files changed, 159 insertions(+), 10 deletions(-)
 create mode 100644 client/src/components/ui/ItProgress.vue
 create mode 100644 client/src/components/ui/ItToggleArrow.vue

diff --git a/client/src/components/competences/CompetenceDetail.vue b/client/src/components/competences/CompetenceDetail.vue
index 4831e0b7..d5a04e8e 100644
--- a/client/src/components/competences/CompetenceDetail.vue
+++ b/client/src/components/competences/CompetenceDetail.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
-import ComptenceProgress from "@/components/competences/CompetenceProgress.vue";
+import CompetenceProgress from "@/components/competences/CompetenceProgress.vue";
 import PerformanceCriteriaRow from "@/components/competences/PerformanceCriteriaRow.vue";
+import ItToggleArrow from "@/components/ui/ItToggleArrow.vue";
 import { useCompetenceStore } from "@/stores/competence";
 import type { CompetencePage } from "@/types";
 import { ref } from "vue";
@@ -30,17 +31,15 @@ const togglePerformanceCriteria = () => {
         <h2 class="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>
+        <ItToggleArrow :is-open="isOpen"></ItToggleArrow>
       </div>
-      <ComptenceProgress
+      <CompetenceProgress
         :status-count="
           competenceStore.calcStatusCount(
             competenceStore.criteriaByCompetence(competence)
           )
         "
-      ></ComptenceProgress>
+      ></CompetenceProgress>
     </div>
     <ul v-if="isOpen">
       <li
diff --git a/client/src/components/ui/ItProgress.vue b/client/src/components/ui/ItProgress.vue
new file mode 100644
index 00000000..93628f5a
--- /dev/null
+++ b/client/src/components/ui/ItProgress.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps<{
+  statusCount?: {
+    fail: number;
+    success: number;
+    unknown: number;
+  };
+}>();
+
+const total = computed(() => {
+  return (
+    (props.statusCount?.fail || 0) +
+    (props.statusCount?.success || 0) +
+    (props.statusCount?.unknown || 0)
+  );
+});
+
+const done = computed(() => {
+  if (total.value === 0) {
+    return 0;
+  }
+
+  return ((props.statusCount?.success || 0) / total.value) * 100;
+});
+
+const notDone = computed(() => {
+  if (total.value === 0) {
+    return 0;
+  }
+
+  return ((props.statusCount?.fail || 0) / total.value) * 100 + done.value;
+});
+</script>
+
+<template>
+  <span class="relative w-full h-2 bg-gray-300 inline-block">
+    <span
+      v-if="notDone !== done"
+      class="absolute bg-orange-500 h-full"
+      :style="{ width: `${notDone}%` }"
+    ></span>
+    <span
+      v-if="done > 0"
+      class="absolute bg-green-500 h-full"
+      :style="{ width: `${done}%` }"
+    ></span>
+  </span>
+</template>
+
+<style lang="scss" scoped></style>
diff --git a/client/src/components/ui/ItToggleArrow.vue b/client/src/components/ui/ItToggleArrow.vue
new file mode 100644
index 00000000..b677eec7
--- /dev/null
+++ b/client/src/components/ui/ItToggleArrow.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+
+interface Props {
+  isOpen: boolean;
+  small?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isOpen: false,
+  small: false,
+});
+
+function sizeClasses(isSmall: boolean) {
+  return isSmall ? ["h-8", "w-8"] : ["h-10", "w-10"];
+}
+</script>
+
+<template>
+  <div class="transition-transform" :class="{ 'rotate-180': isOpen }">
+    <it-icon-arrow-down :class="sizeClasses(small)" aria-hidden="true" />
+  </div>
+</template>
+<style lang="scss" scoped></style>
diff --git a/client/src/locales/de.json b/client/src/locales/de.json
index 39e266c7..b94e9ca7 100644
--- a/client/src/locales/de.json
+++ b/client/src/locales/de.json
@@ -10,7 +10,12 @@
     "save": "Speichern",
     "learningUnit": "Lerneinheit",
     "learningPath": "Lernpfad",
-    "show": "Anschauen"
+    "show": "Anschauen",
+    "circles": "Circles",
+    "transferTask": "Transferauftrag | Transferaufträge",
+    "feedback": "Feedback | Feedbacks",
+    "exam": "Prüfung | Prüfungen",
+    "certificate": "Zertifikat | Zertifikate"
   },
   "mainNavigation": {
     "logout": "Abmelden",
@@ -45,6 +50,7 @@
     "progressLink": "KompetenzNavi öffnen"
   },
   "competences": {
+    "competences": "Kompetenzen",
     "title": "KompetenzNavi",
     "lastImprovements": "Letzte verbesserte Kompetenzen",
     "showAll": "Alle anschauen",
@@ -68,5 +74,8 @@
     "imprint": "Impressum",
     "contact": "Kontakt",
     "faq": "FAQ"
+  },
+  "messages": {
+    "sendMessage": "Nachricht schreiben"
   }
 }
diff --git a/client/src/pages/ProfilePage.vue b/client/src/pages/ProfilePage.vue
index 39fecb5e..43d5138a 100644
--- a/client/src/pages/ProfilePage.vue
+++ b/client/src/pages/ProfilePage.vue
@@ -1,13 +1,78 @@
 <script setup lang="ts">
 import * as log from "loglevel";
+import ItProgress from "@/components/ui/ItProgress.vue";
 
 log.debug("ProfileView created");
+
+const fakeData = {
+  statusCount: {
+    fail: 2,
+    success: 9,
+    unknown: 2
+  }
+}
+
+
+function setActiveClasses(isActive: boolean) {
+  return isActive
+    ? ["border-blue-900", "border-b-2"]
+    : ["text-bg-900"];
+}
 </script>
 
 <template>
-  <main class="px-8 py-8">
-    <h1>Profil</h1>
-  </main>
+  <div class="bg-gray-200">
+    <div class="container-large">
+      <nav class="py-4 pb-4">
+        <router-link
+          class="btn-text inline-flex items-center pl-0"
+          :to="'/'"
+        >
+          <it-icon-arrow-left/>
+          <span>{{ $t("general.back") }}</span>
+        </router-link>
+      </nav>
+      <header class="flex flex-row items-center mb-12">
+        <img class="w-44 h-44 rounded-full mr-8" src="https://picsum.photos/200"/>
+        <div>
+          <h1 class="mb-2">Daniel Baumgartner</h1>
+          <p class="mb-2">d.baumgartner@gmail.com</p>
+          <p class="bg-message bg-no-repeat pl-6 bg-[center_left_-4px]">{{ $t("messages.sendMessage") }}</p>
+        </div>
+      </header>
+      <main>
+        <div class="bg-white w-full mb-8">
+          ich bin ein Lernpfad
+        </div>
+        <ul class="flex flex-row border-b-2 mb-5">
+          <li class="mr-12 pb-3 relative top-px" :class="setActiveClasses(true)">
+            <button>{{ $t("competences.competences") }}</button>
+          </li>
+          <li class="mr-12">
+            <button>{{ $t("general.transferTask", 2) }}</button>
+          </li>
+          <li class="mr-12">
+            <button>{{ $t("general.exam", 2) }}</button>
+          </li>
+          <li class="mr-12">
+            <button>{{ $t("general.certificate", 2) }}</button>
+          </li>
+        </ul>
+        <div>
+          <ul class="bg-white px-8 py-2">
+            <li class="border-b border-grey-200 last:border-01 flex flex-row py-4">
+              <h2 class="text-bold w-1/2">Weiterempfehlung für Neukunden generieren</h2>
+              <div class="w-1/2">
+                <ItProgress
+                  :status-count="fakeData.statusCount">
+                </ItProgress>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </main>
+    </div>
+  </div>
 </template>
 
 <style scoped></style>
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
index 4500fa97..dcf25e77 100644
--- a/client/tailwind.config.js
+++ b/client/tailwind.config.js
@@ -23,6 +23,7 @@ module.exports = {
         "handlungsfelder-overview":
           "url('/static/icons/icon-handlungsfelder-overview.svg')",
         "lernmedien-overview": "url('/static/icons/icon-lernmedien-overview.svg')",
+        "message": "url('/static/icons/icon-message.svg')",
       },
       borderColor: (theme) => ({
         DEFAULT: theme("colors.gray.500"),