Skip to content

Commit

Permalink
clean up routing business
Browse files Browse the repository at this point in the history
  • Loading branch information
@AllanOXDi
AllanOXDi committed Nov 21, 2024
1 parent 8338f8b commit e18471f
Show file tree
Hide file tree
Showing 4 changed files with 147 additions and 265 deletions.
2 changes: 1 addition & 1 deletion kolibri/plugins/coach/assets/src/routes/lessonsRoutes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ import QuestionLearnersPage from '../views/common/reports/QuestionLearnersPage.v
import EditLessonDetails from '../views/lessons/LessonSummaryPage/sidePanels/EditLessonDetails';
import PreviewSelectedResources from '../views/lessons/LessonSummaryPage/sidePanels/PreviewSelectedResources';
import LessonResourceSelection from '../views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection';
import ManageSelectedLessonResources from '../views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResources';
import ManageSelectedLessonResources from '../views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource';
import { classIdParamRequiredGuard, RouteSegments } from './utils';

const {
Expand Down
20 changes: 20 additions & 0 deletions ...s/coach/assets/src/views/lessons/LessonSummaryPage/sidePanels/LessonResourceSelection.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,12 @@

<template #bottomNavigation>
<div class="bottom-nav-container">
<KRouterLink
:text="$tr('numbeOfSelectedResourcesLabel', { count: workingResources.length })"
:primary="true"
:to="{ name: PageNames.LESSON_PREVIEW_SELECTED_RESOURCES }"
:style="{ marginRight: '1em' , marginTop: '0.5em' }"
/>
<KButton
primary
:text="saveAndFinishAction$()"
Expand All @@ -91,6 +97,8 @@
import ContentNodeResource from 'kolibri-common/apiResources/ContentNodeResource';
import ChannelResource from 'kolibri-common/apiResources/ChannelResource';
import AccessibleChannelCard from 'kolibri-common/components/Cards/AccessibleChannelCard.vue';
import { mapState } from 'vuex';
import { PageNames } from '../../../../constants';
export default {
name: 'LessonResourceSelection',
Expand Down Expand Up @@ -149,6 +157,14 @@
saveAndFinishAction$,
};
},
data(){
return {
PageNames,
}
},
computed:{
...mapState('lessonSummary', ['workingResources']),
},
methods: {
closeSidePanel() {
this.$router.go(-1);
Expand All @@ -160,6 +176,10 @@
context:
"In the 'Manage lesson resources' coaches can add new/remove resource material to a lesson.",
},
numbeOfSelectedResourcesLabel:{
message:'{count, number, integer} {count, plural, one {resource selected} other {resources selected}} ',
context:"This is the label that shows the number of resources selected in the lesson resource selection page"
}
},
};
Expand Down
222 changes: 126 additions & 96 deletions ...ch/assets/src/views/lessons/LessonSummaryPage/sidePanels/ManageSelectedLessonResource.vue
View file
Original file line number Diff line number Diff line change
@@ -1,142 +1,175 @@
<template>

<SidePanelModal
alignment="right"
sidePanelWidth="700px"
@closePanel="() => $router.go(-1)"
closeButtonIconType="close"
@closePanel="closeSidePanel"
@shouldFocusFirstEl="() => null"
>


<div>


<p>Lesson : Intro to chemical bond </p>
<template #header>
<h4 class="side-panel-title"> {{ $tr('numberOfSelectedResource',{ count : resourcesTable.length })}}</h4>
<router-view @closePanel="() => $router.go(-1)" />
</template>

<p>Size : 16 MB</p>
<div v-if="resourcesTable.length === 0">
<KCircularLoader />
</div>

<div v-else>
<p>{{ coreString('lessonsLabel') }} : {{ currentLesson.title }} </p>
<p>{{ $tr('sizeLabel') }} : {{ bytesForHumans(currentLesson.size) }}</p>

<DragContainer
v-if="sectionOrderList.length > 0"
:items="sectionOrderList"
@sort=""
<div
v-for="(lesson , index) in resourcesTable"
:key="index"
>
<transition-group>
<Draggable
v-for="(index) in sectionOrderList"
:key="index"
>
<DragHandle>
<KGrid :style="lessonOrderListButtonBorder">
<KGridItem :layout12="{ span: 8 }">
<div style="display:flex;">
<div>
<DragSortWidget
class="drag-title"
moveUpText="up"
moveDownText="down"
:noDrag="true"
:isFirst="index === 0"
:isLast="index === sectionOrderList.length - 1"
@moveUp="() => {}"
@moveDown="() => {}"
/>
</div>
<div style="padding:0px 10px">
<span
class="drag-title"
style="flex: 1"
>
<KIcon
class="icon-style"
icon="practiceSolid"
/>
</span>
</div>
<div>
<span
class="arrange-item-block"
>
<span>
<KRouterLink
text="Metallic bond"
:to="{}"
style="font-size:14px"
/>
</span>
<p style="font-size:12px"> 0.4MB </p>
</span>
</div>
</div>
</KGridItem>


<KGridItem :layout12="{ span: 4 }">
<span
class="add-minus-button"
>
<KIcon
class="icon-style"
style="font-weight:600"
icon="emptyTopic"
/>
<KIcon
class="icon-style"
style="font-weight:600"
icon="minus"
<KGrid :style="lessonOrderListButtonBorder">
<KGridItem :layout12="{ span: 6 }">
<div style="display:flex;">
<div>
<DragSortWidget
moveUpText="up"
moveDownText="down"
:noDrag="true"
:isFirst="index === 0"
:isLast="index === resourcesTable.length - 1"
@moveUp="() => {}"
@moveDown="() => {}"
/>
</div>
<div style="padding:0px 10px">
<span
style="flex: 1"
>
<LearningActivityIcon
:kind="lesson.learning_activities[0]"
class="icon-style"
/>
</span>
</div>
<div>
<span
class="arrange-item-block"
>
<span>
<KRouterLink
v-if="lesson.link"
:text="lesson.title"
:to="lesson.link"
style="font-size:14px"
/>
</span>
</KGridItem>
<p style="font-size:12px"> 4MB </p>
</span>
</div>
</div>
</KGridItem>

<KGridItem :layout12="{ span: 6 }">
<span
class="add-minus-button"
>
<KIconButton
icon="emptyTopic"
@click="()=>{ }"
/>

<KIconButton
icon="minus"
@click="removeResource(lesson.id)"
/>
</span>
</KGridItem>

</KGrid>
</div>
</div>

</KGrid>
</DragHandle>
</Draggable>
</transition-group>
</DragContainer>

<template #bottomNavigation>
<div class="bottom-buttons-style">
<KButton
:primary="true"
text="save & finish"
@click="() => {}"
@click="closeSidePanel()"
/>
</div>
</div>
</template>
</SidePanelModal>

</template>


<script>
import Draggable from 'kolibri.coreVue.components.Draggable';
import DragContainer from 'kolibri.coreVue.components.DragContainer';
import DragHandle from 'kolibri.coreVue.components.DragHandle';
import DragSortWidget from 'kolibri.coreVue.components.DragSortWidget';
import DragSortWidget from 'kolibri-common/components/sortable/DragSortWidget';
import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
import LearningActivityIcon from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityIcon.vue';
import bytesForHumans from 'kolibri/uiText/bytesForHumans';
import SidePanelModal from 'kolibri-common/components/SidePanelModal';
import { mapState } from 'vuex';
export default {
name:'ManageSelectedLessonResources',
components: {
Draggable,
DragContainer,
DragHandle,
DragSortWidget,
SidePanelModal,
LearningActivityIcon,
SidePanelModal
},
mixins:[commonCoreStrings],
data(){
return {
sectionOrderList:[ 1,2,3,4,5]
resources: [],
isLoading:false,
}
},
computed: {
...mapState('lessonSummary', ['currentLesson', 'workingResources','resourceCache']),
lessonOrderListButtonBorder(){
return {
borderBottom: `1px solid ${this.$themePalette.grey.v_200}`,
height:`4em`,
marginTop:`0.5em`
};
},
resourcesTable(){
return this.workingResources.map(resource => {
const content = this.resourceCache[resource.contentnode_id];
if (!content) {
return this.missingResourceObj(resource.contentnode_id);
}
const tableRow = {
...content,
node_id: content.id,
};
const link = {};
if (link) {
tableRow.link = link;
}
return tableRow;
})
},
},
methods:{
removeResource(id){
this.resources = this.resources.filter((lesson) => lesson.id !== id);
},
closeSidePanel() {
this.$router.go(-2);
},
bytesForHumans,
},
$trs:{
sizeLabel:{
message: 'Size',
context: 'Size of the lesson'
},
numberOfSelectedResource: {
message: '{count, number, integer} {count, plural, one {resource selected} other {resources selected}}',
context:'Indicates the number of resources selected'
}
}
}
Expand All @@ -148,15 +181,12 @@
.add-minus-button{
float:right;
}
.arrange-item-block{
display:block;
}
.icon-style{
font-size:24px;
}
.bottom-buttons-style {
position: absolute;
right: 0;
Expand Down
Loading

0 comments on commit e18471f

Please sign in to comment.