ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add multiple rows in cockpit list circles

This commit is contained in:
Christian Cueni 2023-01-31 16:18:04 +01:00
parent 8b2aab8298
commit bbd74d85b3
12 changed files with 100 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client/src/components/learningPath/CircleDiagram.vue
View File

@ -2,7 +2,7 @@
import { useCircleStore } from "@/stores/circle"; import { useCircleStore } from "@/stores/circle";
import type { DefaultArcObject } from "d3"; import type { DefaultArcObject } from "d3";
import * as d3 from "d3"; import * as d3 from "d3";
import * as _ from "lodash"; import pick from "lodash/pick";
import * as log from "loglevel"; import * as log from "loglevel";
import { computed, onMounted } from "vue"; import { computed, onMounted } from "vue";
@ -64,7 +64,7 @@ const pieData = computed(() => {
{ {
startAngle: angle.startAngle, startAngle: angle.startAngle,
endAngle: angle.endAngle, endAngle: angle.endAngle,
..._.pick(thisLearningSequence, ["title", "icon", "translation_key", "slug"]), ...pick(thisLearningSequence, ["title", "icon", "translation_key", "slug"]),
arrowStartAngle: angle.endAngle + (angle.startAngle - angle.endAngle) / 2, arrowStartAngle: angle.endAngle + (angle.startAngle - angle.endAngle) / 2,
arrowEndAngle: angle.startAngle + (angle.startAngle - angle.endAngle) / 2, arrowEndAngle: angle.startAngle + (angle.startAngle - angle.endAngle) / 2,
someFinished: someFinished(thisLearningSequence), someFinished: someFinished(thisLearningSequence),

21
client/src/components/learningPath/LearningPathDiagram.vue
View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import * as d3 from "d3"; import * as d3 from "d3";
import * as _ from "lodash"; import kebabCase from "lodash/kebabCase";
import * as log from "loglevel"; import * as log from "loglevel";
// @ts-ignore // @ts-ignore
@ -12,7 +12,7 @@ import type { LearningSequence, Topic } from "@/types";
import { computed, onMounted, reactive, watch } from "vue"; import { computed, onMounted, reactive, watch } from "vue";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
export type DiagramType = "horizontal" | "vertical" | "horizontalSmall"; export type DiagramType = "horizontal" | "vertical" | "horizontalSmall" | "singleSmall";
export interface Props { export interface Props {
diagramType?: DiagramType; diagramType?: DiagramType;
@ -21,6 +21,7 @@ export interface Props {
learningPath: LearningPath; learningPath: LearningPath;
// set to undefined (default) to show all circles // set to undefined (default) to show all circles
showCircleTranslationKeys: string[]; showCircleTranslationKeys: string[];
pullUp?: boolean;
} }
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
@ -28,6 +29,7 @@ const props = withDefaults(defineProps<Props>(), {
postfix: "", postfix: "",
profileUserId: "", profileUserId: "",
showCircleTranslationKeys: undefined, showCircleTranslationKeys: undefined,
pullUp: true,
}); });
log.debug( log.debug(
@ -37,14 +39,14 @@ log.debug(
props.showCircleTranslationKeys props.showCircleTranslationKeys
); );
const state = reactive({ width: 1640, height: 384 }); const state = reactive({ width: 1640, height: 384, startY: 0 });
const svgId = computed(() => { const svgId = computed(() => {
return `learningpath-diagram-${props.learningPath?.slug}-${props.diagramType}${props.postfix}`; return `learningpath-diagram-${props.learningPath?.slug}-${props.diagramType}${props.postfix}`;
}); });
const viewBox = computed(() => { const viewBox = computed(() => {
return `0 0 ${state.width} ${state.height}`; return `0 ${state.startY} ${state.width} ${state.height}`;
}); });
const vueRouter = useRouter(); const vueRouter = useRouter();
@ -135,7 +137,7 @@ const circles = computed(() => {
frontend_url: circle.frontend_url, frontend_url: circle.frontend_url,
id: circle.id, id: circle.id,
translation_key: circle.translation_key, translation_key: circle.translation_key,
slug: _.kebabCase(circle.title), slug: kebabCase(circle.title),
}); });
} }
}); });
@ -164,6 +166,10 @@ function render() {
if (props.diagramType === "vertical") { if (props.diagramType === "vertical") {
state.width = Math.min(960, window.innerWidth - 32); state.width = Math.min(960, window.innerWidth - 32);
state.height = 860; state.height = 860;
} else if (props.diagramType === "singleSmall") {
state.height = 260;
state.startY = 60;
state.width = circleWidth * circles.value.length;
} else { } else {
state.width = circleWidth * circles.value.length; state.width = circleWidth * circles.value.length;
} }
@ -466,10 +472,11 @@ function render() {
<div class="svg-container h-full content-start"> <div class="svg-container h-full content-start">
<svg <svg
:id="svgId" :id="svgId"
class="learning-path-visualization mx-auto -mt-6 h-full lg:mt-0" class="learning-path-visualization mx-auto h-full lg:mt-0"
:class="{ :class="{
'max-h-[90px]': ['horizontalSmall'].includes(diagramType), 'max-h-[90px]': ['horizontalSmall', 'singleSmall'].includes(diagramType),
'max-h-[90px] lg:max-h-[380px]': ['horizontal'].includes(diagramType), 'max-h-[90px] lg:max-h-[380px]': ['horizontal'].includes(diagramType),
'-mt-6': pullUp,
}" }"
:viewBox="viewBox" :viewBox="viewBox"
></svg> ></svg>

4
client/src/components/learningPath/LearningSequence.vue
View File

@ -7,7 +7,7 @@ import type {
LearningSequence, LearningSequence,
} from "@/types"; } from "@/types";
import { humanizeDuration } from "@/utils/humanizeDuration"; import { humanizeDuration } from "@/utils/humanizeDuration";
import _ from "lodash"; import findLast from "lodash/findLast";
import { computed } from "vue"; import { computed } from "vue";
import LearningContentBadge from "./LearningContentTypeBadge.vue"; import LearningContentBadge from "./LearningContentTypeBadge.vue";
@ -52,7 +52,7 @@ const allFinished = computed(() => {
const continueTranslationKeyTuple = computed(() => { const continueTranslationKeyTuple = computed(() => {
if (props.learningSequence && circleStore.circle) { if (props.learningSequence && circleStore.circle) {
const lastFinished = _.findLast( const lastFinished = findLast(
circleStore.circle.flatLearningContents, circleStore.circle.flatLearningContents,
(learningContent) => { (learningContent) => {
return learningContent.completion_status === "success"; return learningContent.completion_status === "success";

2
client/src/components/ui/ItRow.vue
View File

@ -8,7 +8,7 @@
<div class="flex flex-1 items-center"> <div class="flex flex-1 items-center">
<slot name="center"></slot> <slot name="center"></slot>
</div> </div>
<div class="flex items-center md:w-1/4"> <div class="flex items-center lg:w-1/4">
<slot name="link"></slot> <slot name="link"></slot>
</div> </div>
</li> </li>

91
client/src/pages/cockpit/CockpitIndexPage.vue
View File

@ -10,6 +10,7 @@ import { useCompetenceStore } from "@/stores/competence";
import { useCourseSessionsStore } from "@/stores/courseSessions"; import { useCourseSessionsStore } from "@/stores/courseSessions";
import { useLearningPathStore } from "@/stores/learningPath"; import { useLearningPathStore } from "@/stores/learningPath";
import { useUserStore } from "@/stores/user"; import { useUserStore } from "@/stores/user";
import groupBy from "lodash/groupBy";
import log from "loglevel"; import log from "loglevel";
import { computed } from "vue"; import { computed } from "vue";
@ -25,10 +26,14 @@ const competenceStore = useCompetenceStore();
const learningPathStore = useLearningPathStore(); const learningPathStore = useLearningPathStore();
const courseSessionStore = useCourseSessionsStore(); const courseSessionStore = useCourseSessionsStore();
function userCountStatus(userId: number) { function userCountStatusForCircle(userId: number, translationKey: string) {
return competenceStore.calcStatusCount( const criteria = competenceStore.flatPerformanceCriteria(
competenceStore.flatPerformanceCriteria(userId, cockpitStore.selectedCircles) userId,
cockpitStore.selectedCircles
); );
const grouped = groupBy(criteria, "circle.translation_key");
return competenceStore.calcStatusCount(grouped[translationKey]);
} }
const circles = computed(() => { const circles = computed(() => {
@ -141,9 +146,15 @@ function setActiveClasses(translationKey: string) {
:avatar-url="csu.avatar_url" :avatar-url="csu.avatar_url"
> >
<template #center> <template #center>
<div class="flex flex-row items-center justify-between"> <div
<div class="mr-6 flex flex-row items-center gap-4"> class="mt-2 flex w-full flex-row items-center justify-between lg:mt-0"
<div class="h-12"> >
<ul class="w-full">
<li
class="flex h-12 items-center justify-between"
v-for="(circle, i) of cockpitStore.selectedCircles"
:key="i"
>
<LearningPathDiagram <LearningPathDiagram
v-if=" v-if="
learningPathStore.learningPathForUser( learningPathStore.learningPathForUser(
@ -157,44 +168,44 @@ function setActiveClasses(translationKey: string) {
csu.user_id csu.user_id
) as LearningPath ) as LearningPath
" "
:postfix="`cockpit-${csu.user_id}`" :postfix="`cockpit-${csu.user_id}-${i}`"
:profile-user-id="`${csu.user_id}`" :profile-user-id="`${csu.user_id}`"
:show-circle-translation-keys="cockpitStore.selectedCircles" :show-circle-translation-keys="[circle]"
diagram-type="horizontalSmall" :pull-up="false"
diagram-type="singleSmall"
class="mr-4"
></LearningPathDiagram> ></LearningPathDiagram>
</div> <p class="lg:min-w-[150px]">
<div> {{ selectedCirclesTitles[i] }}
<span v-for="title in selectedCirclesTitles" :key="title">
{{ title }}
</span>
</div>
</div>
<div class="ml-4 flex flex-row items-center">
<div class="mr-6 flex flex-row items-center">
<it-icon-smiley-thinking
class="mr-2 inline-block h-8 w-8"
></it-icon-smiley-thinking>
<p class="text-bold inline-block">
{{ userCountStatus(csu.user_id).fail }}
</p>
</div>
<li class="mr-6 flex flex-row items-center">
<it-icon-smiley-happy
class="mr-2 inline-block h-8 w-8"
></it-icon-smiley-happy>
<p class="text-bold inline-block">
{{ userCountStatus(csu.user_id).success }}
</p> </p>
<div class="ml-4 flex flex-row items-center">
<div class="mr-6 flex flex-row items-center">
<it-icon-smiley-thinking
class="mr-2 inline-block h-8 w-8"
></it-icon-smiley-thinking>
<p class="text-bold inline-block">
{{ userCountStatusForCircle(csu.user_id, circle).fail }}
</p>
</div>
<li class="mr-6 flex flex-row items-center">
<it-icon-smiley-happy
class="mr-2 inline-block h-8 w-8"
></it-icon-smiley-happy>
<p class="text-bold inline-block">
{{ userCountStatusForCircle(csu.user_id, circle).success }}
</p>
</li>
<li class="flex flex-row items-center">
<it-icon-smiley-neutral
class="mr-2 inline-block h-8 w-8"
></it-icon-smiley-neutral>
<p class="text-bold inline-block">
{{ userCountStatusForCircle(csu.user_id, circle).unknown }}
</p>
</li>
</div>
</li> </li>
<li class="flex flex-row items-center"> </ul>
<it-icon-smiley-neutral
class="mr-2 inline-block h-8 w-8"
></it-icon-smiley-neutral>
<p class="text-bold inline-block">
{{ userCountStatus(csu.user_id).unknown }}
</p>
</li>
</div>
</div> </div>
</template> </template>
<template #link> <template #link>

7
client/src/pages/competence/CompetenceIndexPage.vue
View File

@ -3,7 +3,8 @@ import PerformanceCriteriaRow from "@/components/competences/PerformanceCriteria
import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue"; import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
import ItProgress from "@/components/ui/ItProgress.vue"; import ItProgress from "@/components/ui/ItProgress.vue";
import { useCompetenceStore } from "@/stores/competence"; import { useCompetenceStore } from "@/stores/competence";
import _ from "lodash"; import maxBy from "lodash/maxBy";
import orderBy from "lodash/orderBy";
import * as log from "loglevel"; import * as log from "loglevel";
import { computed } from "vue"; import { computed } from "vue";
@ -25,7 +26,7 @@ const failedCriteria = computed(() => {
}); });
const lastUpdatedCompetences = computed(() => { const lastUpdatedCompetences = computed(() => {
return _.orderBy( return orderBy(
competenceStore.competences(), competenceStore.competences(),
[ [
(competence) => { (competence) => {
@ -38,7 +39,7 @@ const lastUpdatedCompetences = computed(() => {
}); });
} }
return ( return (
_.maxBy(criteria, "completion_status_updated_at") maxBy(criteria, "completion_status_updated_at")
?.completion_status_updated_at || "" ?.completion_status_updated_at || ""
); );
}, },

4
client/src/pages/learningPath/CirclePage.vue
View File

@ -13,7 +13,7 @@ import { useCircleStore } from "@/stores/circle";
import { useCourseSessionsStore } from "@/stores/courseSessions"; import { useCourseSessionsStore } from "@/stores/courseSessions";
import type { CourseSessionUser, DocumentUploadData } from "@/types"; import type { CourseSessionUser, DocumentUploadData } from "@/types";
import { humanizeDuration } from "@/utils/humanizeDuration"; import { humanizeDuration } from "@/utils/humanizeDuration";
import _ from "lodash"; import sumBy from "lodash/sumBy";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
const route = useRoute(); const route = useRoute();
@ -44,7 +44,7 @@ const circleStore = useCircleStore();
const duration = computed(() => { const duration = computed(() => {
if (circleStore.circle) { if (circleStore.circle) {
const minutes = _.sumBy(circleStore.circle.learningSequences, "minutes"); const minutes = sumBy(circleStore.circle.learningSequences, "minutes");
return humanizeDuration(minutes); return humanizeDuration(minutes);
} }

10
client/src/services/circle.ts
View File

@ -10,7 +10,9 @@ import type {
LearningUnitPerformanceCriteria, LearningUnitPerformanceCriteria,
WagtailCircle, WagtailCircle,
} from "@/types"; } from "@/types";
import _ from "lodash"; import groupBy from "lodash/groupBy";
import partition from "lodash/partition";
import values from "lodash/values";
export function parseLearningSequences( export function parseLearningSequences(
circle: Circle, circle: Circle,
@ -192,7 +194,7 @@ export class Circle implements WagtailCircle {
public allFinishedInLearningSequence(translationKey: string): boolean { public allFinishedInLearningSequence(translationKey: string): boolean {
if (translationKey) { if (translationKey) {
const [performanceCriteria, learningContents] = _.partition( const [performanceCriteria, learningContents] = partition(
this.flatChildren.filter( this.flatChildren.filter(
(lc) => lc.parentLearningSequence?.translation_key === translationKey (lc) => lc.parentLearningSequence?.translation_key === translationKey
), ),
@ -201,8 +203,8 @@ export class Circle implements WagtailCircle {
} }
); );
const groupedPerformanceCriteria = _.values( const groupedPerformanceCriteria = values(
_.groupBy(performanceCriteria, (pc) => pc.parentLearningUnit?.id) groupBy(performanceCriteria, (pc) => pc.parentLearningUnit?.id)
); );
return ( return (

18
client/src/services/learningPath.ts
View File

@ -1,4 +1,4 @@
import * as _ from "lodash"; import orderBy from "lodash/orderBy";
import { Circle } from "@/services/circle"; import { Circle } from "@/services/circle";
import type { import type {
@ -11,15 +11,13 @@ import type {
} from "@/types"; } from "@/types";
function getLastCompleted(courseId: number, completionData: CourseCompletion[]) { function getLastCompleted(courseId: number, completionData: CourseCompletion[]) {
return _.orderBy(completionData, ["updated_at"], "desc").find( return orderBy(completionData, ["updated_at"], "desc").find((c: CourseCompletion) => {
(c: CourseCompletion) => { return (
return ( c.completion_status === "success" &&
c.completion_status === "success" && c.course === courseId &&
c.course === courseId && c.page_type === "learnpath.LearningContent"
c.page_type === "learnpath.LearningContent" );
); });
}
);
} }
export class LearningPath implements WagtailLearningPath { export class LearningPath implements WagtailLearningPath {

10
client/src/stores/competence.ts
View File

@ -7,7 +7,9 @@ import type {
CompetenceProfilePage, CompetenceProfilePage,
PerformanceCriteria, PerformanceCriteria,
} from "@/types"; } from "@/types";
import _ from "lodash"; import cloneDeep from "lodash/cloneDeep";
import groupBy from "lodash/groupBy";
import orderBy from "lodash/orderBy";
import { defineStore } from "pinia"; import { defineStore } from "pinia";
export type CompetenceStoreState = { export type CompetenceStoreState = {
@ -30,7 +32,7 @@ export const useCompetenceStore = defineStore({
actions: { actions: {
calcStatusCount(criteria: PerformanceCriteria[]) { calcStatusCount(criteria: PerformanceCriteria[]) {
if (criteria) { if (criteria) {
const grouped = _.groupBy(criteria, "completion_status"); const grouped = groupBy(criteria, "completion_status");
return { return {
fail: grouped?.fail?.length || 0, fail: grouped?.fail?.length || 0,
success: grouped?.success?.length || 0, success: grouped?.success?.length || 0,
@ -73,7 +75,7 @@ export const useCompetenceStore = defineStore({
if (this.competenceProfilePages.get(userId)) { if (this.competenceProfilePages.get(userId)) {
const competenceProfilePage = this.competenceProfilePages.get(userId); const competenceProfilePage = this.competenceProfilePages.get(userId);
if (competenceProfilePage) { if (competenceProfilePage) {
let criteria = _.orderBy( let criteria = orderBy(
competenceProfilePage.children.flatMap((competence) => { competenceProfilePage.children.flatMap((competence) => {
return competence.children; return competence.children;
}), }),
@ -147,7 +149,7 @@ export const useCompetenceStore = defineStore({
throw `No competenceProfilePageData found with: ${slug}`; throw `No competenceProfilePageData found with: ${slug}`;
} }
this.competenceProfilePages.set(userId, _.cloneDeep(competenceProfilePage)); this.competenceProfilePages.set(userId, cloneDeep(competenceProfilePage));
const circles = competenceProfilePage.circles.map((c: CircleLight) => { const circles = competenceProfilePage.circles.map((c: CircleLight) => {
return { id: c.translation_key, name: `Circle: ${c.title}` }; return { id: c.translation_key, name: `Circle: ${c.title}` };

4
client/src/stores/courseSessions.ts
View File

@ -6,7 +6,7 @@ import type {
CourseSessionUser, CourseSessionUser,
ExpertSessionUser, ExpertSessionUser,
} from "@/types"; } from "@/types";
import _ from "lodash"; import uniqBy from "lodash/uniqBy";
import log from "loglevel"; import log from "loglevel";
import { defineStore } from "pinia"; import { defineStore } from "pinia";
import { computed, ref } from "vue"; import { computed, ref } from "vue";
@ -72,7 +72,7 @@ export const useCourseSessionsStore = defineStore("courseSessions", () => {
// these will become getters // these will become getters
const coursesFromCourseSessions = computed(() => const coursesFromCourseSessions = computed(() =>
// TODO: refactor after implementing of Klassenkonzept // TODO: refactor after implementing of Klassenkonzept
_.uniqBy(courseSessions.value, "course.id") uniqBy(courseSessions.value, "course.id")
); );
const courseSessionForRoute = computed(() => { const courseSessionForRoute = computed(() => {

4
client/src/stores/learningPath.ts
View File

@ -2,7 +2,7 @@ import { itGetCached } from "@/fetchHelpers";
import { LearningPath } from "@/services/learningPath"; import { LearningPath } from "@/services/learningPath";
import { useCompletionStore } from "@/stores/completion"; import { useCompletionStore } from "@/stores/completion";
import { useUserStore } from "@/stores/user"; import { useUserStore } from "@/stores/user";
import _ from "lodash"; import cloneDeep from "lodash/cloneDeep";
import { defineStore } from "pinia"; import { defineStore } from "pinia";
export type LearningPathStoreState = { export type LearningPathStoreState = {
@ -62,7 +62,7 @@ export const useLearningPathStore = defineStore({
); );
const learningPath = LearningPath.fromJson( const learningPath = LearningPath.fromJson(
_.cloneDeep(learningPathData), cloneDeep(learningPathData),
completionData completionData
); );
this.learningPaths.set(key, learningPath); this.learningPaths.set(key, learningPath);