Remove unused code, use prettier
This commit is contained in:
Christian Cueni
parent
2ab8f580bc
commit
229262a609
|
|
@ -1,31 +1,31 @@
|
|||
<template>
|
||||
<QuestionSummary :title="props.title" :text="props.text">
|
||||
<h5 class="mb-6 text-base">{{ props.items.length }} {{ $t("feedback.answers") }}</h5>
|
||||
<h5 class="mb-6 text-base">
|
||||
{{ props.items.length }} {{ $t("feedback.answers") }}
|
||||
</h5>
|
||||
<div
|
||||
v-for="{ label, percentage } in chartItems"
|
||||
:key="label"
|
||||
class="mb-6 flex flex-row flex-wrap items-center gap-3 gap-y-2"
|
||||
>
|
||||
<Popover class="relative w-full">
|
||||
<PopoverButton class="focus:outline-none">
|
||||
<div class="w-full text-base font-bold">{{ label }}</div>
|
||||
</PopoverButton>
|
||||
<PopoverPanel
|
||||
class="absolute top-[-200%] z-10 w-[120px] border border-gray-500 bg-white p-1 text-left text-sm font-normal"
|
||||
>
|
||||
<p>
|
||||
{{
|
||||
`"${label}" ${percentage * props.items.length} ${$t(
|
||||
"feedback.answers"
|
||||
)}`
|
||||
}}
|
||||
</p>
|
||||
</PopoverPanel>
|
||||
<Popover class="relative w-full">
|
||||
<PopoverButton class="focus:outline-none">
|
||||
<div class="w-full text-base font-bold">{{ label }}</div>
|
||||
</PopoverButton>
|
||||
<PopoverPanel
|
||||
class="absolute top-[-200%] z-10 w-[120px] border border-gray-500 bg-white p-1 text-left text-sm font-normal"
|
||||
>
|
||||
<p>
|
||||
{{
|
||||
`"${label}" ${percentage * props.items.length} ${$t("feedback.answers")}`
|
||||
}}
|
||||
</p>
|
||||
</PopoverPanel>
|
||||
</Popover>
|
||||
<div
|
||||
class="h-8 bg-sky-500"
|
||||
:style="{ width: `${percentage * 100 * 0.8}%` }"
|
||||
></div>
|
||||
class="h-8 bg-sky-500"
|
||||
:style="{ width: `${percentage * 100 * 0.8}%` }"
|
||||
></div>
|
||||
<div class="text-sm">{{ (percentage * 100).toFixed(1) }}%</div>
|
||||
</div>
|
||||
</QuestionSummary>
|
||||
|
|
|
|||
|
|
@ -1,19 +0,0 @@
|
|||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<li
|
||||
class="flex flex-row justify-between border-b border-gray-500 py-4 leading-[45px] last:border-0"
|
||||
>
|
||||
<div class="flex flex-row">
|
||||
<slot name="left"></slot>
|
||||
</div>
|
||||
<div class="leading-[45px]">
|
||||
<slot name="center"></slot>
|
||||
</div>
|
||||
<div class="leading-[45px]">
|
||||
<slot name="link"></slot>
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import ItListRow from "@/components/ui/ItListRow.vue";
|
||||
import * as log from "loglevel";
|
||||
|
||||
log.debug("ProfileView created");
|
||||
|
||||
const fakeData = {
|
||||
notifications: [
|
||||
{
|
||||
id: 1,
|
||||
source: {
|
||||
name: "Daniel",
|
||||
title: "EFZ Kaufmann/-frau",
|
||||
course: "üK",
|
||||
avatar: "https://picsum.photos/200",
|
||||
},
|
||||
ago: "Vor 1 Stunde",
|
||||
title: "hat den Transferauftrag «Die Motorhaftpflicht» mit dir geteilt.",
|
||||
unread: true,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
source: {
|
||||
name: "Sofia",
|
||||
title: "EFZ Kaufmann/-frau",
|
||||
course: "üK",
|
||||
avatar: "https://picsum.photos/200",
|
||||
},
|
||||
ago: "Vor 1 Tag",
|
||||
title: "hat dir ein Feedback zum Kreis «Analyse» mit dir geteilt.",
|
||||
unread: false,
|
||||
},
|
||||
],
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-gray-200">
|
||||
<div class="container-large">
|
||||
<header class="mt-12 mb-8">
|
||||
<h1>{{ $t("general.notification", 2) }}</h1>
|
||||
</header>
|
||||
<main>
|
||||
<div class="bg-white px-8 py-2">
|
||||
<ItListRow
|
||||
v-for="notification in fakeData.notifications"
|
||||
:key="notification.id"
|
||||
>
|
||||
<template #left>
|
||||
<img
|
||||
class="mr-2 h-[45px] rounded-full"
|
||||
:src="notification.source.avatar"
|
||||
/>
|
||||
<div class="ml-1">
|
||||
<p class="leading-6">
|
||||
{{ `${notification.source.name} ${notification.title}` }}
|
||||
</p>
|
||||
<p class="text-sm leading-6 text-gray-800">
|
||||
{{ `${notification.source.title} ‐ ${notification.ago}` }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
<template #link>
|
||||
<div
|
||||
v-if="notification.unread"
|
||||
class="flex h-[45px] flex-row items-center"
|
||||
>
|
||||
<div class="h-[10px] w-[10px] rounded-full bg-blue-500"></div>
|
||||
</div>
|
||||
</template>
|
||||
</ItListRow>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import IconLogout from "@/components/icons/IconLogout.vue";
|
||||
import IconSettings from "@/components/icons/IconSettings.vue";
|
||||
import HorizontalBarChart from "@/components/ui/HorizontalBarChart.vue";
|
||||
import ItCheckbox from "@/components/ui/ItCheckbox.vue";
|
||||
import ItCheckboxGroup from "@/components/ui/ItCheckboxGroup.vue";
|
||||
import ItDropdown from "@/components/ui/ItDropdown.vue";
|
||||
|
|
@ -9,7 +10,6 @@ import ItRadioGroup from "@/components/ui/ItRadioGroup.vue";
|
|||
import ItTextarea from "@/components/ui/ItTextarea.vue";
|
||||
import RatingScale from "@/components/ui/RatingScale.vue";
|
||||
import VerticalBarChart from "@/components/ui/VerticalBarChart.vue";
|
||||
import HorizontalBarChart from "@/components/ui/HorizontalBarChart.vue";
|
||||
import logger from "loglevel";
|
||||
import { reactive, ref } from "vue";
|
||||
|
||||
|
|
@ -110,7 +110,7 @@ const barChartItems = [
|
|||
"TV",
|
||||
"TV",
|
||||
"TV",
|
||||
"Anderes"
|
||||
"Anderes",
|
||||
];
|
||||
|
||||
function log(data: any) {
|
||||
|
|
@ -447,7 +447,11 @@ function log(data: any) {
|
|||
title="Frage 3"
|
||||
text="Wie zufrieden bist du mit dem Kurs “Überbetriebliche Kurse” im Allgemeinen?"
|
||||
/>
|
||||
<VerticalBarChart title="Frage X" text="Fragentext" :ratings="[true, true, false, true, true, false, true, false]" />
|
||||
<VerticalBarChart
|
||||
title="Frage X"
|
||||
text="Fragentext"
|
||||
:ratings="[true, true, false, true, true, false, true, false]"
|
||||
/>
|
||||
<HorizontalBarChart title="Frage X" text="Fragentext" :items="barChartItems" />
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -126,8 +126,8 @@ function setActiveClasses(translationKey: string) {
|
|||
learningPathStore.learningPathForUser(props.courseSlug, userStore.id)
|
||||
?.circles || []
|
||||
"
|
||||
:course-id="courseSessionStore.courseSessionForRoute?.course.id"
|
||||
:url="courseSessionStore.courseSessionForRoute.course_url"
|
||||
:course-id="courseSessionStore.courseSessionForRoute?.course.id || 0"
|
||||
:url="courseSessionStore.courseSessionForRoute?.course_url || ''"
|
||||
></FeedbackSummary>
|
||||
<div>
|
||||
<!-- progress -->
|
||||
|
|
|
|||
|
|
@ -45,7 +45,8 @@
|
|||
v-else-if="horizontalChartKeys.includes(question.key)"
|
||||
:title="`${$t('feedback.questionTitle')} ${i}`"
|
||||
:text="question.question"
|
||||
:items="feedbackData.questions[question.key].map((a: string) => `${a}%`)" />
|
||||
:items="feedbackData.questions[question.key].map((a: string) => `${a}%`)"
|
||||
/>
|
||||
</li>
|
||||
</ol>
|
||||
</main>
|
||||
|
|
@ -64,6 +65,13 @@ import * as log from "loglevel";
|
|||
import { onMounted, reactive } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
interface FeedbackData {
|
||||
amount: number;
|
||||
questions: {
|
||||
[key: string]: any;
|
||||
};
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
courseSlug: string;
|
||||
circleId: string;
|
||||
|
|
@ -136,7 +144,7 @@ const openKeys = [
|
|||
"instructor_open_feedback",
|
||||
];
|
||||
|
||||
const feedbackData = reactive({});
|
||||
const feedbackData = reactive<FeedbackData>({ amount: 0, questions: {} });
|
||||
|
||||
onMounted(async () => {
|
||||
log.debug("FeedbackPage mounted");
|
||||
|
|
@ -145,7 +153,6 @@ onMounted(async () => {
|
|||
);
|
||||
Object.assign(feedbackData, data);
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -138,10 +138,6 @@ const router = createRouter({
|
|||
path: "/profile",
|
||||
component: () => import("@/pages/ProfilePage.vue"),
|
||||
},
|
||||
{
|
||||
path: "/notifications",
|
||||
component: () => import("@/pages/NotificationsPage.vue"),
|
||||
},
|
||||
{
|
||||
path: "/styleguide",
|
||||
component: () => import("../pages/StyleGuidePage.vue"),
|
||||
|
|
|
|||
Loading…
Reference in New Issue