Skip to content

Commit eba0db0

Browse files
FabianWilmsFabianWilms
committed
✨ ♻️ wip my checklists wc
1 parent f0347d4 commit eba0db0

File tree

6 files changed

+228
-19
lines changed

6 files changed

+228
-19
lines changed

‎personalization-webcomponents/src/api/dummyservice/DummyChecklist.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import type DummyChecklistItem from "@/api/dummyservice/DummyChecklistItem.ts";
2+
3+
export default interface DummyChecklist {
4+
title: string,
5+
lhmExtId: string,
6+
items: DummyChecklistItem[],
7+
lastUpdated: Date
8+
}

‎personalization-webcomponents/src/api/dummyservice/DummyChecklistItem.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export default interface DummyChecklistItem {
2+
serviceID: string,
3+
checked: boolean,
4+
title: string,
5+
note: string,
6+
required: boolean
7+
}

‎personalization-webcomponents/src/api/dummyservice/DummyChecklistService.ts‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import type DummyChecklist from "@/api/dummyservice/DummyChecklist.ts";
2+
3+
export default class DummyChecklistService {
4+
5+
getChecklists(): DummyChecklist[] {
6+
return [
7+
{
8+
title: "Ich habe wenig Geld.",
9+
lhmExtId: "111",
10+
lastUpdated: new Date(),
11+
items: [
12+
{ serviceID: "1", checked: false, title: "Schuldner- und Insolvenzberatung der Stadt München", note: "", required: true },
13+
{ serviceID: "2", checked: true, title: "Befreiung vom Rundfunkbeitrag", note: "", required: true },
14+
{ serviceID: "3", checked: true, title: "Städtische Ferienangebote", note: "", required: true },
15+
{ serviceID: "4", checked: true, title: "another item 4", note: "", required: true },
16+
{ serviceID: "5", checked: true, title: "another item 5", note: "", required: true },
17+
]
18+
},
19+
{
20+
title: "Ich will umziehen.",
21+
lhmExtId: "111",
22+
lastUpdated: new Date(),
23+
items: [
24+
{ serviceID: "1", checked: false, title: "Wohnsitz anmelden oder ummelden", note: "", required: true },
25+
{ serviceID: "2", checked: false, title: "Änderung der Adresse in Fahrzeugpapieren", note: "", required: true },
26+
{ serviceID: "3", checked: false, title: "Anmeldung eines Hundes", note: "", required: true },
27+
{ serviceID: "4", checked: false, title: "another item 4", note: "", required: true },
28+
{ serviceID: "5", checked: false, title: "another item 5", note: "", required: true },
29+
{ serviceID: "6", checked: false, title: "another item 6", note: "", required: true },
30+
{ serviceID: "7", checked: false, title: "another item 7", note: "", required: true },
31+
{ serviceID: "8", checked: false, title: "another item 8", note: "", required: true },
32+
{ serviceID: "9", checked: true, title: "another item 9", note: "", required: true },
33+
{ serviceID: "10", checked: true, title: "another item 10", note: "", required: true },
34+
]
35+
},
36+
{
37+
title: "Ich manage eine Familie.",
38+
lhmExtId: "111",
39+
lastUpdated: new Date(),
40+
items: [
41+
{ serviceID: "1", checked: true, title: "Beratung zur Kindertagespflege", note: "", required: true },
42+
{ serviceID: "2", checked: true, title: "Förderung von Kindern im Vorschulalter", note: "", required: true },
43+
{ serviceID: "3", checked: true, title: "Leistungen aus dem Bildungspaket", note: "", required: true },
44+
{ serviceID: "4", checked: true, title: "another item 4", note: "", required: true },
45+
{ serviceID: "5", checked: true, title: "another item 5", note: "", required: true },
46+
{ serviceID: "6", checked: true, title: "another item 6", note: "", required: true },
47+
{ serviceID: "7", checked: true, title: "another item 7", note: "", required: true },
48+
{ serviceID: "8", checked: true, title: "another item 8", note: "", required: true },
49+
{ serviceID: "9", checked: true, title: "another item 9", note: "", required: true },
50+
{ serviceID: "10", checked: true, title: "another item 10", note: "", required: true },
51+
]
52+
},
53+
]
54+
}
55+
}

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

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<template>
2+
<muc-card
3+
:title="checklist.title"
4+
tagline="Checkliste"
5+
>
6+
<template #headerPrefix>
7+
<div
8+
style="padding-right: 16px; font-size: 32px;"
9+
>
10+
<img src="https://assets.muenchen.de/mde/1.0.10/assets/svg/pictograms/pictogram-cash.svg" alt="cash-icon"></img>
11+
</div>
12+
</template>
13+
<template #content>
14+
15+
<div>
16+
<chip
17+
v-if="todoCount"
18+
style="margin-right: 16px"
19+
background-color="#FDD1AC"
20+
>
21+
{{ todoCount }} offen
22+
<svg
23+
style="margin-left: 8px; width: 20px; height: 20px;"
24+
aria-hidden="true"
25+
class="m-button__icon"
26+
>
27+
<use href="#icon-pencil"/>
28+
</svg>
29+
</chip>
30+
<chip
31+
v-if="doneCount"
32+
background-color="#B7D2B7"
33+
>
34+
{{ doneCount }} erledigt
35+
<svg
36+
style="margin-left: 8px; width: 20px; height: 20px;"
37+
aria-hidden="true"
38+
class="m-button__icon"
39+
>
40+
<use href="#icon-check"/>
41+
</svg>
42+
</chip>
43+
</div>
44+
45+
<div
46+
style="padding-top: 16px; padding-bottom: 20px;"
47+
>
48+
<p v-for="(item) in firstThreeItemsSortedByChecked">
49+
<span>{{ item.checked ? "☑️" : "🔘"}}</span>
50+
<span>{{item.title}}</span>
51+
</p>
52+
</div>
53+
54+
<div>
55+
<b>Letzte Änderung:</b> {{ checklist.lastUpdated.toLocaleString() }}
56+
</div>
57+
58+
</template>
59+
</muc-card>
60+
</template>
61+
62+
<script setup lang="ts">
63+
import {MucCard} from "@muenchen/muc-patternlab-vue";
64+
import type DummyChecklist from "@/api/dummyservice/DummyChecklist.ts";
65+
import Chip from "@/components/common/Chip.vue";
66+
import {computed} from "vue";
67+
68+
const props = defineProps<{
69+
checklist: DummyChecklist;
70+
}>();
71+
72+
const todoCount = computed(() => {
73+
return props.checklist.items.filter(value => !value.checked).length;
74+
})
75+
76+
const doneCount = computed(() => {
77+
return props.checklist.items.filter(value => value.checked).length;
78+
})
79+
80+
const firstThreeItemsSortedByChecked = computed(() => {
81+
const sortedItems = [...props.checklist.items].sort((a, b) => (a.checked === b.checked) ? 0 : a.checked ? 1 : -1);
82+
return sortedItems.slice(0, 3);
83+
});
84+
85+
</script>

‎personalization-webcomponents/src/components/common/Chip.vue‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<script setup lang="ts">
2+
defineProps({
3+
backgroundColor: {
4+
type: String,
5+
default: "#fff"
6+
}
7+
})
8+
9+
</script>
10+
11+
<template>
12+
<div
13+
class="chip"
14+
:style="'background-color: ' + backgroundColor"
15+
>
16+
<div class="chip-content">
17+
<slot />
18+
</div>
19+
</div>
20+
</template>
21+
22+
<style scoped>
23+
.chip {
24+
display: inline-flex;
25+
flex-direction: row;
26+
border: none;
27+
cursor: default;
28+
height: 32px;
29+
line-height: 32px;
30+
outline: none;
31+
padding: 0;
32+
font-size: 0.875rem;
33+
white-space: nowrap;
34+
align-items: center;
35+
border-radius: 16px;
36+
vertical-align: middle;
37+
text-decoration: none;
38+
justify-content: center;
39+
}
40+
41+
.chip-content {
42+
cursor: inherit;
43+
display: flex;
44+
align-items: center;
45+
user-select: none;
46+
white-space: nowrap;
47+
padding-left: 16px;
48+
padding-right: 16px;
49+
opacity: 0.95;
50+
}
51+
</style>

‎personalization-webcomponents/src/my-checklists.vue‎

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,38 @@
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>my-checklists Webcomponent</p>
10-
</template>
11-
<template #content>
12-
<p>{{ calloutContent }}</p>
13-
</template>
14-
</muc-callout>
15-
</div>
7+
<h1>Aktive Checklisten ({{ checklists.length }})</h1>
8+
<muc-card-container
9+
style="grid-template-columns: repeat(auto-fit,589px)"
10+
>
11+
<checklist-card
12+
v-for="(checklist, index) in checklists"
13+
:key="index"
14+
:checklist="checklist">
15+
</checklist-card>
16+
</muc-card-container>
17+
</main>
1618
</template>
1719

1820
<script setup lang="ts">
19-
import { MucCallout } from "@muenchen/muc-patternlab-vue";
2021
import customIconsSprite from "@muenchen/muc-patternlab-vue/assets/icons/custom-icons.svg?raw";
2122
import mucIconsSprite from "@muenchen/muc-patternlab-vue/assets/icons/muc-icons.svg?raw";
22-
import { computed } from "vue";
23+
import {onMounted, ref} from "vue";
24+
import {MucCardContainer} from "@muenchen/muc-patternlab-vue";
25+
import type DummyChecklist from "@/api/dummyservice/DummyChecklist.ts";
26+
import DummyChecklistService from "@/api/dummyservice/DummyChecklistService.ts";
27+
import ChecklistCard from "@/components/ChecklistCard.vue";
2328
24-
import { FIRSTNAME_DEFAULT } from "@/util/constants";
29+
const checklists = ref<DummyChecklist[]>([]);
2530
26-
const { firstName = FIRSTNAME_DEFAULT } = defineProps<{
27-
firstName?: string;
28-
}>();
31+
onMounted(() => {
32+
const dcl = new DummyChecklistService();
33+
checklists.value = dcl.getChecklists();
34+
})
2935
30-
const calloutContent = computed(() => {
31-
return `Hello ${firstName}`;
32-
});
3336
</script>
3437

3538
<style>

0 commit comments

Comments
 (0)