Skip to content

Commit a13295b

Browse files
Rad14ntRad14nt
authored
Merge pull request #96 from SafeExamBrowser/Restyle-BreadCrumb
Client - BreadCrumb.vue
2 parents 6de30b7 + 352fbcf commit a13295b

21 files changed

Lines changed: 207 additions & 351 deletions

File tree

‎client/package-lock.json‎

Lines changed: 23 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎client/package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,6 @@
9191
"pinia": "^3.0.3",
9292
"playwright": "^1.56.1",
9393
"prettier": "^3.6.2",
94-
"sass": "1.77.6",
9594
"storybook": "^10.0.4",
9695
"typescript": "^5.4.5",
9796
"typescript-eslint": "^8.43.0",

‎client/src/components/layout/pages/BasicPage.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ import BreadCrumb from "@/components/widgets/breadCrumb/BreadCrumb.vue";
5151
5252
defineProps<{
5353
title: string;
54-
breadCrumb: BreadCrumbItem[];
54+
breadCrumb?: BreadCrumbItem[];
5555
}>();
5656
5757
const slots = useSlots();

‎client/src/components/views/screen-proctoring/gallery/GalleryViewPage.vue‎

Lines changed: 23 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,8 @@
11
<template>
22
<!-- Breadcrumb -->
33
<v-row dense>
4-
<v-col class="pl-5 mb-1" cols="12" md="10">
5-
<div class="path-text d-flex align-center">
6-
<span
7-
class="breadcrumb-link"
8-
@click="navigateTo(constants.HOME_PAGE_ROUTE)"
9-
>
10-
{{ translate("titles.home") }}
11-
</span>
12-
<span class="breadcrumb-arrow">›</span>
13-
<span
14-
class="breadcrumb-link"
15-
@click="navigateTo(constants.MONITORING_ROUTE)"
16-
>
17-
{{ translate("titles.monitoring") }}
18-
</span>
19-
<span
20-
v-if="monitoringStore.selectedExam !== null"
21-
class="breadcrumb-arrow"
22-
>›</span
23-
>
24-
<span
25-
v-if="monitoringStore.selectedExam !== null"
26-
class="breadcrumb-link"
27-
@click="
28-
navigateTo(
29-
constants.MONITORING_OVERVIEW_ROUTE +
30-
'/' +
31-
monitoringStore.selectedExam.id.toString(),
32-
)
33-
"
34-
>
35-
{{ translate("titles.overview") }}
36-
</span>
37-
</div>
4+
<v-col cols="12" md="10">
5+
<BreadCrumb :items="breadCrumbItems" />
386
</v-col>
397
</v-row>
408
<v-window
@@ -93,20 +61,20 @@
9361
</template>
9462

9563
<script setup lang="ts">
96-
import { onBeforeMount, onBeforeUnmount, ref, watch } from "vue";
64+
import { computed, onBeforeMount, onBeforeUnmount, ref, watch } from "vue";
9765
import { useRoute } from "vue-router";
9866
import { useAppBarStore } from "@/stores/store";
9967
import { storeToRefs } from "pinia";
10068
import GalleryImage from "./GalleryImage.vue";
10169
import { SortOrder } from "@/models/screen-proctoring/sortOrderEnum";
10270
import { MetaData, ScreenshotData } from "@/models/screen-proctoring/session";
10371
import { GroupUuid } from "@/models/screen-proctoring/group";
104-
import { navigateTo } from "@/router/navigation";
105-
import * as constants from "@/utils/constants";
10672
import { translate } from "@/utils/generalUtils";
10773
import { useMonitoringStore } from "@/stores/seb-server/monitoringStore";
10874
import { getGroupByUuid } from "@/services/screen-proctoring/groupService";
10975
import * as galleryUtils from "@/components/views/screen-proctoring/gallery/utils/galleryUtils.ts";
76+
import BreadCrumb from "@/components/widgets/breadCrumb/BreadCrumb.vue";
77+
import type { BreadCrumbItem } from "@/components/widgets/breadCrumb/types.ts";
11078
11179
import { getScreenshotDataByTimestamp } from "@/services/screen-proctoring/screenshotDataService.ts";
11280
@@ -130,6 +98,24 @@ const appBarStore = useAppBarStore();
13098
const appBarStoreRef = storeToRefs(appBarStore);
13199
const monitoringStore = useMonitoringStore();
132100
101+
const breadCrumbItems = computed<BreadCrumbItem[]>(() => {
102+
const items: BreadCrumbItem[] = [
103+
{ label: translate("titles.monitoring"), link: "MonitoringList" },
104+
];
105+
106+
const selectedExam = monitoringStore.selectedExam;
107+
if (selectedExam !== null) {
108+
items.push({
109+
label: translate("titles.overview"),
110+
link: "MonitoringOverview",
111+
params: { examId: selectedExam.id.toString() },
112+
});
113+
}
114+
115+
items.push({ label: translate("titles.galleryView") });
116+
return items;
117+
});
118+
133119
// remaining
134120
const groupUuid: string = useRoute().params.uuid.toString();
135121
let intervalGroup: ReturnType<typeof setInterval> | null = null;

‎client/src/components/views/seb-server/exam-template/wizard/CreateExamTemplateWizard.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@
44
:bread-crumb="[
55
{
66
label: $t('titles.examTemplateList'),
7-
link: resolveRoutePath('ExamTemplateList'),
7+
link: 'ExamTemplateList',
88
},
99
{
1010
label: $t('titles.createTemplateExam'),
11-
link: resolveRoutePath('CreateExamTemplateWizard'),
11+
link: 'CreateExamTemplateWizard',
1212
},
1313
{ label: store.currentStep.title },
1414
]"
@@ -47,7 +47,7 @@ import { useCreateExamTemplateStore } from "./composables/store/useCreateExamTem
4747
import { useCreateExamTemplate } from "./composables/api/useCreateExamTemplate";
4848
import LoadingFallbackComponent from "@/components/widgets/loadingFallbackComponent/LoadingFallbackComponent.vue";
4949
import { watchEffect } from "vue";
50-
import { navigateToRoute, resolveRoutePath } from "@/router/navigation";
50+
import { navigateToRoute } from "@/router/navigation";
5151
5252
const {
5353
create: createExamTemplate,

‎client/src/components/views/seb-server/exam/detail/ExamDetailInfo.vue‎

Lines changed: 8 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,13 @@
11
<template>
22
<!-- Breadcrumb and Title-->
33
<v-row dense>
4-
<v-col class="pl-5 mb-1" cols="12" md="10">
5-
<div class="path-text d-flex align-center">
6-
<span
7-
class="breadcrumb-link"
8-
@click="navigateTo(constants.HOME_PAGE_ROUTE)"
9-
>
10-
{{ translate("titles.home") }}
11-
</span>
12-
13-
<span class="breadcrumb-arrow">›</span>
14-
15-
<span
16-
class="breadcrumb-link"
17-
@click="navigateTo(constants.EXAM_ROUTE)"
18-
>
19-
{{ translate("titles.exams") }}
20-
</span>
21-
22-
<span class="breadcrumb-arrow">›</span>
23-
</div>
4+
<v-col cols="12" md="10">
5+
<BreadCrumb
6+
:items="[
7+
{ label: translate('titles.exams'), link: 'ExamList' },
8+
{ label: examStore.selectedExam?.quizName ?? '' },
9+
]"
10+
/>
2411
</v-col>
2512

2613
<v-col class="pl-10" cols="12" md="10">
@@ -153,18 +140,15 @@
153140

154141
<script setup lang="ts">
155142
import { useExamStore } from "@/stores/seb-server/examStore";
156-
import * as constants from "@/utils/constants";
157143
import * as timeUtils from "@/utils/timeUtils";
158144
import * as generalUtils from "@/utils/generalUtils";
159145
import {
160146
ExamStatusEnum,
161147
ExamTypeEnum,
162148
} from "@/models/seb-server/examFiltersEnum";
163149
import { translate } from "@/utils/generalUtils";
164-
import { navigateTo } from "@/router/navigation";
150+
import BreadCrumb from "@/components/widgets/breadCrumb/BreadCrumb.vue";
165151
166152
// stores
167153
const examStore = useExamStore();
168154
</script>
169-
170-
<style scoped></style>

‎client/src/components/views/seb-server/exam/exams/ExamList.vue‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
<template>
2-
<BasicPage :title="$t('titles.exams')" :bread-crumb="breadCrumb">
2+
<BasicPage
3+
:title="$t('titles.exams')"
4+
:bread-crumb="[{ label: $t('titles.exams') }]"
5+
>
36
<template #PanelTop>
47
<SearchBar
58
v-model="searchInputValue"
@@ -70,18 +73,12 @@ import {
7073
} from "@/components/views/seb-server/exam/exams/composables/useExamFilters.ts";
7174
import { useExams } from "@/components/views/seb-server/exam/exams/api/useExams.ts";
7275
import { getRouteName } from "@/router/routeNames.ts";
73-
import { translate } from "@/utils/generalUtils.ts";
7476
import type { Exams } from "@/models/seb-server/exam.ts";
75-
import type { BreadCrumbItem } from "@/components/widgets/breadCrumb/types.ts";
7677
import {
7778
ExamStatusEnum,
7879
examStatusColor,
7980
} from "@/models/seb-server/examFiltersEnum.ts";
8081
81-
const breadCrumb: BreadCrumbItem[] = [
82-
{ label: translate("titles.home"), link: "/" },
83-
];
84-
8582
const { headers: examTableHeaders, cellFormatters } = useExamTableHeaders();
8683
const filterSections = useExamFilters();
8784

‎client/src/components/views/seb-server/home/HomePageInfo.vue‎

Lines changed: 0 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,5 @@
11
<template>
22
<v-row data-testid="homePageInfo-page-container" dense>
3-
<!-- Breadcrumb -->
4-
<v-col
5-
class="pl-5 mb-1"
6-
cols="12"
7-
data-testid="homePageInfo-breadcrumb-container"
8-
md="10"
9-
>
10-
<div
11-
class="path-text d-flex align-center"
12-
data-testid="homePageInfo-breadcrumb-wrapper"
13-
>
14-
<span
15-
class="breadcrumb-active"
16-
data-testid="homePageInfo-breadcrumbHome-link"
17-
style="visibility: hidden"
18-
@click="navigateTo(constants.HOME_PAGE_ROUTE)"
19-
>
20-
{{ translate("titles.home") }}
21-
</span>
22-
23-
<span
24-
class="breadcrumb-arrow"
25-
data-testid="homePageInfo-breadcrumbArrow-icon"
26-
style="visibility: hidden"
27-
>›</span
28-
>
29-
</div>
30-
</v-col>
31-
323
<!-- Title -->
334
<v-col
345
class="pl-10"
@@ -55,9 +26,7 @@
5526

5627
<script setup lang="ts">
5728
import { useAppBarStore } from "@/stores/store";
58-
import * as constants from "@/utils/constants";
5929
import { translate } from "@/utils/generalUtils";
60-
import { navigateTo } from "@/router/navigation";
6130
import { onBeforeMount } from "vue";
6231
6332
// stores
@@ -67,5 +36,3 @@ onBeforeMount(() => {
6736
appBarStore.title = translate("titles.home");
6837
});
6938
</script>
70-
71-
<style scoped></style>

0 commit comments

Comments
 (0)