Skip to content

Commit bfda95b

Browse files
lehjulehju
authored
✨ add checklist overview components
* ✨ add checklist overview components * ✨ fix detail view * ✨ rename in CamelCase * ✨ review feedback
1 parent 80de09e commit bfda95b

File tree

6 files changed

+696
-18
lines changed

6 files changed

+696
-18
lines changed

‎personalization-webcomponents/index-checklist-overview.html‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,23 @@
5050
appointment-link="http://localhost:3000/"
5151
></dbs-login>
5252
<div>
53-
<checklist-overview first-name="Simon" />
53+
<h1>Overview page</h1>
54+
<checklist-overview
55+
checklist-detail-url="index-checklist-detail.html"
56+
checklist-overview-url="index-my-checklists.html"
57+
new-checklist-url="index.html"
58+
displayed-on-detail-screen="false"
59+
>
60+
</checklist-overview>
61+
62+
<h1>Detail page</h1>
63+
<checklist-overview
64+
checklist-detail-url="index-checklist-detail.html"
65+
checklist-overview-url="index-my-checklists.html"
66+
new-checklist-url="index.html"
67+
displayed-on-detail-screen="true"
68+
>
69+
</checklist-overview>
5470
</div>
5571
</body>
5672
</html>

‎personalization-webcomponents/src/checklist-overview.ce.vue‎

Lines changed: 181 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,138 @@
11
<template>
2-
<div>
2+
<main>
33
<!-- eslint-disable-next-line vue/no-v-html -->
44
<div v-html="mucIconsSprite" />
55
<!-- eslint-disable-next-line vue/no-v-html -->
66
<div v-html="customIconsSprite" />
7-
<muc-callout>
8-
<template #header>
9-
<p>checklist-overview Webcomponent</p>
10-
</template>
11-
<template #content>
12-
<p>{{ calloutContent }}</p>
13-
</template>
14-
</muc-callout>
15-
</div>
7+
<div
8+
v-if="checklists.length > 0 || !displayOptionDetailScreen"
9+
:class="
10+
displayOptionDetailScreen ? 'details-background' : 'overview-padding'
11+
"
12+
>
13+
<div class="container">
14+
<div class="header">
15+
<div class="headline">
16+
<span class="header-icon">
17+
<muc-icon icon="calendar" />
18+
</span>
19+
<h2 tabindex="0">
20+
<span v-if="displayOptionDetailScreen"
21+
>Meine weiteren Checklisten</span
22+
>
23+
<span v-else>Meine Checklisten</span>
24+
25+
<span
26+
v-if="
27+
checklists.length &&
28+
!displayOptionDetailScreen &&
29+
!loadingError
30+
"
31+
>
32+
({{ checklists.length }})</span
33+
>
34+
</h2>
35+
</div>
36+
<muc-link
37+
v-if="!loadingError && checklists.length > 2 && !isMobile"
38+
label="Alle Checklisten anzeigen"
39+
icon="chevron-right"
40+
target="_self"
41+
no-underline
42+
:href="checklistOverviewUrl"
43+
/>
44+
</div>
45+
<error-alert
46+
v-if="loadingError"
47+
class="no-padding-top"
48+
message="Es gibt aktuell leider ein technisches Problem mit dieser Funktion. Bitte versuchen Sie es später noch einmal."
49+
header="Ihre Checklisten können zur Zeit nicht geladen werden."
50+
/>
51+
<muc-card-container
52+
v-else-if="loading"
53+
class="checklist-card-container"
54+
>
55+
<skeleton-loader />
56+
</muc-card-container>
57+
<div v-else>
58+
<checklist-card-viewer
59+
:all-checklists="checklists"
60+
:is-mobile="isMobile"
61+
:new-checklist-url="newChecklistUrl"
62+
:checklist-detail-url="checklistDetailUrl"
63+
:displayed-on-detail-screen="displayOptionDetailScreen"
64+
/>
65+
<muc-link
66+
v-if="!loadingError && checklists.length > 2 && isMobile"
67+
class="mobile-link"
68+
label="Alle Checklisten anzeigen"
69+
icon="chevron-right"
70+
target="_self"
71+
no-underline
72+
:href="checklistOverviewUrl"
73+
/>
74+
</div>
75+
</div>
76+
</div>
77+
</main>
1678
</template>
1779

1880
<script setup lang="ts">
19-
import { MucCallout } from "@muenchen/muc-patternlab-vue";
81+
import type DummyChecklist from "@/api/dummyservice/DummyChecklist.ts";
82+
83+
import {
84+
MucCardContainer,
85+
MucIcon,
86+
MucLink,
87+
} from "@muenchen/muc-patternlab-vue";
2088
import customIconsSprite from "@muenchen/muc-patternlab-vue/assets/icons/custom-icons.svg?raw";
2189
import mucIconsSprite from "@muenchen/muc-patternlab-vue/assets/icons/muc-icons.svg?raw";
22-
import { computed } from "vue";
90+
import { onMounted, ref } from "vue";
2391
24-
import { FIRSTNAME_DEFAULT } from "@/util/constants";
92+
import DummyChecklistService from "@/api/dummyservice/DummyChecklistService.ts";
93+
import ChecklistCardViewer from "@/components/ChecklistCardViewer.vue";
94+
import ErrorAlert from "@/components/common/ErrorAlert.vue";
95+
import SkeletonLoader from "@/components/common/skeleton-loader.vue";
96+
import { QUERY_PARAM_CHECKLIST_ID } from "@/util/constants.ts";
2597
26-
const { firstName = FIRSTNAME_DEFAULT } = defineProps<{
27-
firstName?: string;
98+
const { displayedOnDetailScreen } = defineProps<{
99+
checklistDetailUrl: string;
100+
checklistOverviewUrl: string;
101+
newChecklistUrl: string;
102+
displayedOnDetailScreen: string;
28103
}>();
29104
30-
const calloutContent = computed(() => {
31-
return `Hello ${firstName}`;
105+
const checklists = ref<DummyChecklist[]>([]);
106+
const loading = ref(true);
107+
const loadingError = ref(false);
108+
const isMobile = ref(false);
109+
const displayOptionDetailScreen =
110+
displayedOnDetailScreen.toLowerCase() === "true";
111+
112+
const checksMobile = () => {
113+
isMobile.value = window.matchMedia("(max-width: 767px)").matches;
114+
};
115+
116+
onMounted(() => {
117+
loading.value = true;
118+
checksMobile();
119+
window.addEventListener("resize", checksMobile);
120+
121+
const dcl = new DummyChecklistService();
122+
dcl
123+
.getChecklists()
124+
.then((checklist) => {
125+
checklists.value = checklist;
126+
127+
if (displayOptionDetailScreen) {
128+
const urlParams = new URLSearchParams(window.location.search);
129+
const checklistId = urlParams.get(QUERY_PARAM_CHECKLIST_ID);
130+
checklists.value = checklists.value.filter(
131+
(checklist) => checklist.id != checklistId
132+
);
133+
}
134+
})
135+
.finally(() => (loading.value = false));
32136
});
33137
</script>
34138

@@ -37,3 +141,63 @@ const calloutContent = computed(() => {
37141
@import "@muenchen/muc-patternlab-vue/assets/css/custom-style.css";
38142
@import "@muenchen/muc-patternlab-vue/style.css";
39143
</style>
144+
145+
<style scoped>
146+
/* Padding on overview page */
147+
.overview-padding {
148+
padding-top: 40px;
149+
}
150+
151+
/* Background color on details page */
152+
.details-background {
153+
background-color: var(--color-neutrals-blue-xlight);
154+
padding: 24px 0;
155+
}
156+
157+
/* Header styles */
158+
.header {
159+
display: flex;
160+
align-items: center;
161+
justify-content: space-between;
162+
padding-bottom: 24px;
163+
}
164+
165+
/* Headline styles */
166+
.headline {
167+
display: flex;
168+
align-items: center;
169+
}
170+
171+
.header-icon {
172+
margin-right: 8px;
173+
}
174+
175+
/* Mobile link styles */
176+
.mobile-link {
177+
padding-top: 24px;
178+
}
179+
180+
/* No padding-top on error message */
181+
.no-padding-top {
182+
padding-top: 0 !important;
183+
}
184+
185+
.checklist-card-container {
186+
grid-template-columns: repeat(auto-fit, 100%);
187+
}
188+
189+
/* CSS for desktop */
190+
@media (min-width: 768px) {
191+
.overview-padding {
192+
padding-top: 40px;
193+
}
194+
195+
.details-background {
196+
padding: 64px 0;
197+
}
198+
199+
.checklist-card-container {
200+
grid-template-columns: repeat(auto-fit, 589px);
201+
}
202+
}
203+
</style>

‎personalization-webcomponents/src/components/AddChecklistCard.vue‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<template>
2+
<div class="add-card">
3+
<a
4+
class="no-link-style"
5+
:href="newChecklistUrl"
6+
>
7+
<div class="add-card-content">
8+
<div class="add-card-header">
9+
<h3>{{ title }}</h3>
10+
</div>
11+
<slot name="content" />
12+
<div class="add-card-button">
13+
<muc-button
14+
class="add-card-muc-button"
15+
icon="arrow-right"
16+
variant="primary"
17+
>Checkliste erstellen</muc-button
18+
>
19+
</div>
20+
</div>
21+
</a>
22+
</div>
23+
</template>
24+
25+
<script setup lang="ts">
26+
import { MucButton } from "@muenchen/muc-patternlab-vue";
27+
28+
defineProps<{
29+
title: string;
30+
newChecklistUrl: string;
31+
}>();
32+
33+
defineSlots<{
34+
/**
35+
* Content beneath the heading shown as text.
36+
*/
37+
content(): unknown;
38+
}>();
39+
</script>
40+
41+
<style scoped>
42+
.no-link-style {
43+
text-decoration: none !important;
44+
color: var(--color-neutrals-grey) !important;
45+
}
46+
47+
.add-card {
48+
cursor: pointer;
49+
border: solid 1px var(--color-neutrals-blue);
50+
border-bottom: solid 5px var(--color-brand-main-blue);
51+
transition: background-color ease-in 150ms;
52+
background-color: var(--color-neutrals-blue-xlight);
53+
}
54+
55+
.add-card:hover {
56+
background-color: #e5eef5;
57+
}
58+
59+
.add-card:hover .add-card-muc-button {
60+
background-color: #004376;
61+
}
62+
63+
.add-card-content {
64+
text-align: center;
65+
padding: 32px 24px;
66+
}
67+
68+
.add-card-header {
69+
margin-bottom: 16px;
70+
}
71+
72+
.add-card-button {
73+
margin-top: 24px;
74+
}
75+
</style>

0 commit comments

Comments
 (0)