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

Refactor competenceStore to handle multiple users

This commit is contained in:
Daniel Egger 2022-12-02 15:46:07 +01:00
parent c9ddefd82e
commit 7bddd43b65
5 changed files with 109 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,7 +12,8 @@ log.debug("CompetenceIndexPage created");
const competenceStore = useCompetenceStore();
const failedCriteria = computed(() => {
return competenceStore.flatPerformanceCriteria
return competenceStore
.flatPerformanceCriteria()
.filter((criteria) => {
return criteria.completion_status === "fail";
})
@ -21,7 +22,7 @@ const failedCriteria = computed(() => {
const lastUpdatedCompetences = computed(() => {
return _.orderBy(
competenceStore.competences,
competenceStore.competences(),
[
(competence) => {
let criteria = competence.children;
@ -43,7 +44,7 @@ const lastUpdatedCompetences = computed(() => {
});
const countStatus = computed(() => {
return competenceStore.calcStatusCount(competenceStore.flatPerformanceCriteria);
return competenceStore.calcStatusCount(competenceStore.flatPerformanceCriteria());
});
</script>

2
client/src/pages/competence/CompetenceListPage.vue
View File

@ -31,7 +31,7 @@ const competenceStore = useCompetenceStore();
</div>
<ul v-if="competenceStore.competenceProfilePage">
<li
v-for="competence in competenceStore.competences"
v-for="competence in competenceStore.competences()"
:key="competence.id"
class="bg-white p-8 mb-8"
>

2
client/src/pages/competence/PerformanceCriteriaPage.vue
View File

@ -19,7 +19,7 @@ interface MenuItem {
const competenceStore = useCompetenceStore();
const shownCriteria = computed(() => {
return competenceStore.flatPerformanceCriteria.filter((criteria) => {
return competenceStore.flatPerformanceCriteria().filter((criteria) => {
return criteria.completion_status === activeMenuItem.value.id;
});
});

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

@ -11,7 +11,8 @@ import _ from "lodash";
import { defineStore } from "pinia";
export type CompetenceStoreState = {
competenceProfilePage: CompetenceProfilePage | undefined;
competenceProfilePages: Map<number, CompetenceProfilePage>;
selectedCircle: { id: string; name: string };
availableCircles: { id: string; name: string }[];
};
@ -20,60 +21,12 @@ export const useCompetenceStore = defineStore({
id: "competence",
state: () => {
return {
competenceProfilePage: undefined,
competenceProfilePages: new Map<number, CompetenceProfilePage>(),
selectedCircle: { id: "all", name: "Circle: Alle" },
availableCircles: [],
} as CompetenceStoreState;
},
getters: {
flatPerformanceCriteria: (state) => {
if (!state.competenceProfilePage) {
return [];
}
let criteria = _.orderBy(
state.competenceProfilePage.children.flatMap((competence) => {
return competence.children;
}),
["competence_id"],
["asc"]
);
if (state.selectedCircle.id !== "all") {
criteria = criteria.filter(
(c) => c.circle.translation_key === state.selectedCircle.id
);
}
return criteria;
},
competences: (state) => {
if (state.competenceProfilePage?.children.length) {
return state.competenceProfilePage.children.filter((competence) => {
let criteria = competence.children;
if (state.selectedCircle.id != "all") {
criteria = criteria.filter((criteria) => {
return criteria.circle.translation_key === state.selectedCircle.id;
});
}
return criteria.length > 0;
});
}
return [];
},
criteriaByCompetence: (state) => {
return (competence: CompetencePage) => {
return competence.children.filter((criteria) => {
if (state.selectedCircle.id != "all") {
return criteria.circle.translation_key === state.selectedCircle.id;
}
return competence.children;
});
};
},
},
getters: {},
actions: {
calcStatusCount(criteria: PerformanceCriteria[]) {
if (criteria) {
@ -91,36 +44,107 @@ export const useCompetenceStore = defineStore({
unknown: 0,
};
},
async loadCompetenceProfilePage(slug: string, reload = false) {
this.competenceProfilePage = await itGetCached(`/api/course/page/${slug}/`, {
criteriaByCompetence(competence: CompetencePage) {
return competence.children.filter((criteria) => {
if (this.selectedCircle.id != "all") {
return criteria.circle.translation_key === this.selectedCircle.id;
}
return competence.children;
});
},
flatPerformanceCriteria(userId: number | undefined = undefined) {
if (!userId) {
const userStore = useUserStore();
userId = userStore.id;
}
if (this.competenceProfilePages.get(userId)) {
const competenceProfilePage = this.competenceProfilePages.get(userId);
if (competenceProfilePage) {
let criteria = _.orderBy(
competenceProfilePage.children.flatMap((competence) => {
return competence.children;
}),
["competence_id"],
["asc"]
);
if (this.selectedCircle.id !== "all") {
criteria = criteria.filter(
(c) => c.circle.translation_key === this.selectedCircle.id
);
}
return criteria;
}
}
return [];
},
competences(userId: number | undefined = undefined) {
if (!userId) {
const userStore = useUserStore();
userId = userStore.id;
}
if (this.competenceProfilePages.get(userId)) {
const competenceProfilePage = this.competenceProfilePages.get(userId);
if (competenceProfilePage?.children.length) {
return competenceProfilePage.children.filter((competence) => {
let criteria = competence.children;
if (this.selectedCircle.id != "all") {
criteria = criteria.filter((criteria) => {
return criteria.circle.translation_key === this.selectedCircle.id;
});
}
return criteria.length > 0;
});
}
}
return [];
},
async loadCompetenceProfilePage(
slug: string,
userId: number | undefined = undefined,
reload = false
) {
if (!userId) {
const userStore = useUserStore();
userId = userStore.id;
}
const competenceProfilePage = await itGetCached(`/api/course/page/${slug}/`, {
reload: reload,
});
if (!this.competenceProfilePage) {
if (!competenceProfilePage) {
throw `No competenceProfilePageData found with: ${slug}`;
}
const circles = this.competenceProfilePage.circles.map((c: CircleLight) => {
this.competenceProfilePages.set(userId, competenceProfilePage);
const circles = competenceProfilePage.circles.map((c: CircleLight) => {
return { id: c.translation_key, name: `Circle: ${c.title}` };
});
this.availableCircles = [{ id: "all", name: "Circle: Alle" }, ...circles];
await this.parseCompletionData();
await this.parseCompletionData(userId);
return this.competenceProfilePage;
return this.competenceProfilePages.get(userId);
},
async parseCompletionData() {
const userStore = useUserStore();
if (this.competenceProfilePage && userStore.loggedIn) {
async parseCompletionData(userId: number) {
const competenceProfilePage = this.competenceProfilePages.get(userId);
if (competenceProfilePage) {
const completionStore = useCompletionStore();
const completionData = await completionStore.loadCompletionData(
this.competenceProfilePage.course.id,
userStore.id
competenceProfilePage.course.id,
userId
);
if (completionData) {
this.competenceProfilePage.children.forEach((competence) => {
competenceProfilePage.children.forEach((competence) => {
competence.children.forEach((performanceCriteria) => {
const completion = completionData.find(
(c) => c.page_key === performanceCriteria.translation_key

32
client/src/stores/completion.ts
View File

@ -1,48 +1,46 @@
import { bustItGetCache, itGetCached, itPost } from "@/fetchHelpers";
import { useUserStore } from "@/stores/user";
import type { BaseCourseWagtailPage, CourseCompletion } from "@/types";
import { defineStore } from "pinia";
export type CompletionStoreState = {
completionStore: Map<number, CourseCompletion[]>;
};
export const useCompletionStore = defineStore({
id: "completion",
state: () => {
return {
completionStore: new Map(),
} as CompletionStoreState;
return {};
},
getters: {},
actions: {
async loadCompletionData(courseId: number, userId: number, reload = false) {
const userCompletionData = await itGetCached(
const userCompletionData = (await itGetCached(
`/api/course/completion/${courseId}/${userId}/`,
{
reload: reload,
}
);
)) as CourseCompletion[];
if (userCompletionData === undefined) {
throw `No completionData found with: ${courseId}, ${userId}`;
}
this.completionStore.set(userId, userCompletionData);
return this.completionStore.get(userId) || [];
return userCompletionData || [];
},
async markPage(page: BaseCourseWagtailPage, userId: number) {
async markPage(
page: BaseCourseWagtailPage,
userId: number | undefined = undefined
) {
const completionData = await itPost("/api/course/completion/mark/", {
page_key: page.translation_key,
completion_status: page.completion_status,
});
if (completionData && completionData.length > 0) {
this.completionStore.set(userId, completionData);
bustItGetCache(`/api/course/completion/${completionData[0].course}/`);
if (!userId) {
const userStore = useUserStore();
userId = userStore.id;
}
bustItGetCache(`/api/course/completion/${completionData[0].course}/${userId}/`);
}
return this.completionStore.get(userId) || [];
return completionData as CourseCompletion[];
},
},
});