Add learning sequence field
This commit is contained in:
Christian Cueni
parent
5e0b69702f
commit
e8085831df
|
|
@ -10,6 +10,7 @@
|
|||
"save": "Speichern",
|
||||
"learningUnit": "Lerneinheit",
|
||||
"learningPath": "Lernpfad",
|
||||
"learningSequence": "Lernsequenz",
|
||||
"show": "Anschauen",
|
||||
"circles": "Circles",
|
||||
"transferTask": "Transferauftrag | Transferaufträge",
|
||||
|
|
@ -34,13 +35,16 @@
|
|||
"duration": "Dauer",
|
||||
"circleContentBoxTitle": "Das lernst du in diesem Circle.",
|
||||
"gotQuestions": "Hast du Fragen?",
|
||||
"documentsTitle": "Unterlagen",
|
||||
"documentsDescription": "Stelle deinen Lernenden zusätzliche Inhalte zur Verfügung.",
|
||||
"documentsAction": "Unterlagen hochladen",
|
||||
"documentsModalAction": "Datei auswählen",
|
||||
"documentsModalLabel": "Datei",
|
||||
"documentsModalFileName": "Name",
|
||||
"documentsModalNameInformation": "Max. 70 Zeichen"
|
||||
"documents": {
|
||||
"title": "Unterlagen",
|
||||
"description": "Stelle deinen Lernenden zusätzliche Inhalte zur Verfügung.",
|
||||
"action": "Unterlagen hochladen",
|
||||
"modalAction": "Datei auswählen",
|
||||
"fileLabel": "Datei",
|
||||
"modalFileName": "Name",
|
||||
"modalNameInformation": "Max. 70 Zeichen",
|
||||
"chooseSequence": "Wähle eine Lernsequenz aus"
|
||||
}
|
||||
},
|
||||
"learningContent": {
|
||||
"completeAndContinue": "Abschliessen und weiter"
|
||||
|
|
|
|||
|
|
@ -137,7 +137,7 @@ function setActiveCircle(id: number) {
|
|||
diagram-type="horizontalSmall"
|
||||
></LearningPathDiagram>
|
||||
</div>
|
||||
<div>KMU Teil 1</div>
|
||||
<div>Einstieg</div>
|
||||
</div>
|
||||
<div class="ml-4 flex flex-row items-center">
|
||||
<div class="flex flex-row items-center mr-6">
|
||||
|
|
|
|||
|
|
@ -2,18 +2,21 @@
|
|||
import CircleDiagram from "@/components/learningPath/CircleDiagram.vue";
|
||||
import CircleOverview from "@/components/learningPath/CircleOverview.vue";
|
||||
import LearningSequence from "@/components/learningPath/LearningSequence.vue";
|
||||
import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
|
||||
import ItModal from "@/components/ui/ItModal.vue";
|
||||
import * as log from "loglevel";
|
||||
import { ref } from "vue";
|
||||
import { reactive, ref } from "vue";
|
||||
|
||||
import { useAppStore } from "@/stores/app";
|
||||
import { useCircleStore } from "@/stores/circle";
|
||||
import { humanizeDuration } from "@/utils/humanizeDuration";
|
||||
import _ from "lodash";
|
||||
import { computed, onMounted } from "vue";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { useRoute } from "vue-router";
|
||||
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
|
||||
log.debug("CircleView.vue created", route);
|
||||
|
||||
|
|
@ -23,6 +26,14 @@ const props = defineProps<{
|
|||
}>();
|
||||
|
||||
const showUploadModal = ref(false);
|
||||
const formData = reactive({
|
||||
file: "",
|
||||
name: "",
|
||||
learningSequence: {
|
||||
id: -1,
|
||||
name: t("circlePage.documents.chooseSequence"),
|
||||
},
|
||||
});
|
||||
|
||||
const appStore = useAppStore();
|
||||
appStore.showMainNavigationBar = true;
|
||||
|
|
@ -38,6 +49,13 @@ const duration = computed(() => {
|
|||
return "";
|
||||
});
|
||||
|
||||
const dropdownLearningSequences = computed(() =>
|
||||
circleStore.circle?.learningSequences.map((sequence) => ({
|
||||
id: sequence.id,
|
||||
name: sequence.title,
|
||||
}))
|
||||
);
|
||||
|
||||
onMounted(async () => {
|
||||
log.debug("CircleView.vue mounted", props.courseSlug, props.circleSlug);
|
||||
|
||||
|
|
@ -141,17 +159,17 @@ onMounted(async () => {
|
|||
|
||||
<div class="block border mt-8 p-6">
|
||||
<h3 class="text-blue-dark">
|
||||
{{ $t("circlePage.documentsTitle") }}
|
||||
{{ $t("circlePage.documents.title") }}
|
||||
</h3>
|
||||
<div class="leading-relaxed mt-4">
|
||||
{{ $t("circlePage.documentsDescription") }}
|
||||
{{ $t("circlePage.documents.description") }}
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="btn-primary mt-4 text-xl"
|
||||
@click="showUploadModal = true"
|
||||
>
|
||||
{{ $t("circlePage.documentsAction") }}
|
||||
{{ $t("circlePage.documents.action") }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
|
@ -182,26 +200,39 @@ onMounted(async () => {
|
|||
</div>
|
||||
</div>
|
||||
<ItModal v-model="showUploadModal">
|
||||
<template #title>{{ $t("circlePage.documentsAction") }}</template>
|
||||
<template #title>{{ $t("circlePage.documents.action") }}</template>
|
||||
<template #body>
|
||||
<form>
|
||||
<label class="block text-bold" for="upload">{{
|
||||
$t("circlePage.documentsModalLabel")
|
||||
$t("circlePage.documents.fileLabel")
|
||||
}}</label>
|
||||
<div class="btn-secondary mt-4 mb-8 text-xl relative cursor-pointer">
|
||||
<input id="upload" type="file" class="absolute opacity-0" />
|
||||
{{ $t("circlePage.documentsModalAction") }}
|
||||
{{ $t("circlePage.documents.modalAction") }}
|
||||
</div>
|
||||
<!--p>{{ $t("circlePage.documentsModalInformation") }}</p-->
|
||||
<div class="mb-8">
|
||||
<label class="block text-bold mb-4" for="name">{{
|
||||
$t("circlePage.documentsModalFileName")
|
||||
$t("circlePage.documents.modalFileName")
|
||||
}}</label>
|
||||
<input type="text" id="name" class="w-1/2 mb-2" />
|
||||
<p>{{ $t("circlePage.documentsModalNameInformation") }}</p>
|
||||
<p>{{ $t("circlePage.documents.modalNameInformation") }}</p>
|
||||
</div>
|
||||
<div class="mb-8">
|
||||
<label class="block text-bold mb-4" for="learningsequnce">{{
|
||||
$t("general.learningSequence")
|
||||
}}</label>
|
||||
<ItDropdownSelect
|
||||
v-model="formData.learningSequence"
|
||||
class="w-full lg:w-96 mt-4 lg:mt-0"
|
||||
:items="dropdownLearningSequences"
|
||||
>
|
||||
</ItDropdownSelect>
|
||||
</div>
|
||||
<div class="-mx-8 px-8 pt-4 border-t">
|
||||
<button class="btn-primary text-xl mb-0">{{ $t("general.save") }}</button>
|
||||
<button class="btn-primary text-xl mb-0">
|
||||
{{ $t("general.save") }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue