Skip to content

Commit fe0645d

Browse files
FabianWilmsFabianWilms
committed
💄 add loading animation
1 parent eba0db0 commit fe0645d

File tree

6 files changed

+206
-60
lines changed

6 files changed

+206
-60
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
export default interface DummyChecklistItem {
22
serviceID: string,
3-
checked: boolean,
3+
checked: Date | null,
44
title: string,
55
note: string,
66
required: boolean

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

Lines changed: 54 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -2,54 +2,59 @@ import type DummyChecklist from "@/api/dummyservice/DummyChecklist.ts";
22

33
export default class DummyChecklistService {
44

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-
]
5+
dummyResponse: DummyChecklist[] = [
6+
{
7+
title: "Ich habe wenig Geld.",
8+
lhmExtId: "111",
9+
lastUpdated: new Date(),
10+
items: [
11+
{ serviceID: "1", checked: null, title: "Schuldner- und Insolvenzberatung der Stadt München", note: "", required: true },
12+
{ serviceID: "2", checked: new Date(), title: "Befreiung vom Rundfunkbeitrag", note: "", required: true },
13+
{ serviceID: "3", checked: new Date(), title: "Städtische Ferienangebote", note: "", required: true },
14+
{ serviceID: "4", checked: new Date(), title: "another item 4", note: "", required: true },
15+
{ serviceID: "5", checked: new Date(), title: "another item 5", note: "", required: true },
16+
]
17+
},
18+
{
19+
title: "Ich will umziehen.",
20+
lhmExtId: "111",
21+
lastUpdated: new Date(),
22+
items: [
23+
{ serviceID: "1", checked: null, title: "Wohnsitz anmelden oder ummelden", note: "", required: true },
24+
{ serviceID: "2", checked: null, title: "Änderung der Adresse in Fahrzeugpapieren", note: "", required: true },
25+
{ serviceID: "3", checked: null, title: "Anmeldung eines Hundes", note: "", required: true },
26+
{ serviceID: "4", checked: null, title: "another item 4", note: "", required: true },
27+
{ serviceID: "5", checked: null, title: "another item 5", note: "", required: true },
28+
{ serviceID: "6", checked: null, title: "another item 6", note: "", required: true },
29+
{ serviceID: "7", checked: null, title: "another item 7", note: "", required: true },
30+
{ serviceID: "8", checked: null, title: "another item 8", note: "", required: true },
31+
{ serviceID: "9", checked: new Date(), title: "another item 9", note: "", required: true },
32+
{ serviceID: "10", checked: new Date(), title: "another item 10", note: "", required: true },
33+
]
34+
},
35+
{
36+
title: "Ich manage eine Familie.",
37+
lhmExtId: "111",
38+
lastUpdated: new Date(),
39+
items: [
40+
{ serviceID: "1", checked: new Date(), title: "Beratung zur Kindertagespflege", note: "", required: true },
41+
{ serviceID: "2", checked: new Date(), title: "Förderung von Kindern im Vorschulalter", note: "", required: true },
42+
{ serviceID: "3", checked: new Date(), title: "Leistungen aus dem Bildungspaket", note: "", required: true },
43+
{ serviceID: "4", checked: new Date(), title: "another item 4", note: "", required: true },
44+
{ serviceID: "5", checked: new Date(), title: "another item 5", note: "", required: true },
45+
{ serviceID: "6", checked: new Date(), title: "another item 6", note: "", required: true },
46+
{ serviceID: "7", checked: new Date(), title: "another item 7", note: "", required: true },
47+
{ serviceID: "8", checked: new Date(), title: "another item 8", note: "", required: true },
48+
{ serviceID: "9", checked: new Date(), title: "another item 9", note: "", required: true },
49+
{ serviceID: "10", checked: new Date(), title: "another item 10", note: "", required: true },
50+
]
51+
},
52+
]
53+
54+
getChecklists(): Promise<DummyChecklist[]> {
55+
return new Promise(
56+
resolve =>
57+
setTimeout(() =>
58+
resolve(this.dummyResponse), 1000))
5459
}
5560
}

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<template #content>
1414

1515
<div>
16-
<chip
16+
<muc-chip
1717
v-if="todoCount"
1818
style="margin-right: 16px"
1919
background-color="#FDD1AC"
@@ -26,8 +26,8 @@
2626
>
2727
<use href="#icon-pencil"/>
2828
</svg>
29-
</chip>
30-
<chip
29+
</muc-chip>
30+
<muc-chip
3131
v-if="doneCount"
3232
background-color="#B7D2B7"
3333
>
@@ -39,7 +39,7 @@
3939
>
4040
<use href="#icon-check"/>
4141
</svg>
42-
</chip>
42+
</muc-chip>
4343
</div>
4444

4545
<div
@@ -62,7 +62,7 @@
6262
<script setup lang="ts">
6363
import {MucCard} from "@muenchen/muc-patternlab-vue";
6464
import type DummyChecklist from "@/api/dummyservice/DummyChecklist.ts";
65-
import Chip from "@/components/common/Chip.vue";
65+
import MucChip from "@/components/common/muc-chip.vue";
6666
import {computed} from "vue";
6767
6868
const props = defineProps<{

‎personalization-webcomponents/src/components/common/Chip.vue‎ renamed to ‎personalization-webcomponents/src/components/common/muc-chip.vue‎

File renamed without changes.

‎personalization-webcomponents/src/components/common/skeleton-loader.vue‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
<script setup lang="ts">
2+
3+
import {MucCard, MucCardContainer} from "@muenchen/muc-patternlab-vue";
4+
</script>
5+
6+
<template>
7+
8+
<muc-card
9+
title=""
10+
>
11+
<template #headerPrefix>
12+
<div class="prod--wrapper">
13+
<div class="prod--col prod--details">
14+
<div class="prod--row prod--name">
15+
<span
16+
id="productName"
17+
class="prod--name-text skeleton-loader"
18+
/>
19+
</div>
20+
</div>
21+
</div>
22+
</template>
23+
<template #content>
24+
<div class="prod--wrapper">
25+
<div class="prod--col prod--details">
26+
<div class="prod--row prod--description">
27+
<span
28+
id="productId"
29+
class="prod--description-text skeleton-loader"
30+
/>
31+
</div>
32+
<div class="prod--row prod--description">
33+
<span
34+
id="productId"
35+
class="prod--description-text skeleton-loader"
36+
/>
37+
</div>
38+
</div>
39+
</div>
40+
</template>
41+
</muc-card>
42+
</template>
43+
44+
<style scoped>
45+
.prod--wrapper {
46+
display: flex;
47+
width: 95%;
48+
}
49+
50+
.prod--wrapper .prod--row {
51+
display: flex;
52+
flex-direction: row;
53+
}
54+
55+
.prod--wrapper .prod--col {
56+
display: flex;
57+
flex-direction: column;
58+
}
59+
60+
.prod--wrapper .prod--img {
61+
width: 20%;
62+
margin: 0 15px;
63+
}
64+
65+
.prod--wrapper .prod--img .prod--img-graphic {
66+
max-height: 100%;
67+
height: 100%;
68+
vertical-align: top;
69+
max-width: 100%;
70+
}
71+
72+
.prod--wrapper .prod--details {
73+
width: 90%;
74+
margin-left: 17px;
75+
}
76+
77+
.prod--wrapper .prod--details .prod--name {
78+
margin-bottom: 3px;
79+
width: 85%;
80+
display: block;
81+
max-width: 100%;
82+
}
83+
84+
.prod--wrapper .prod--details .prod--name .prod--name-para {
85+
margin: 0 auto;
86+
}
87+
88+
.prod--wrapper .prod--details .prod--name .prod--name-text {
89+
font-weight: bold;
90+
font-size: 16px;
91+
line-height: 23px;
92+
color: #002877;
93+
height: 40px;
94+
}
95+
96+
.prod--wrapper .prod--details .prod--description {
97+
margin-bottom: 13px;
98+
}
99+
100+
.prod--wrapper .prod--details .prod--description .prod--description-text {
101+
font-size: 13px;
102+
line-height: 18px;
103+
color: #666666;
104+
}
105+
106+
.skeleton-loader:empty {
107+
width: 100%;
108+
height: 15px;
109+
display: block;
110+
background: linear-gradient(
111+
to right,
112+
rgba(255, 255, 255, 0),
113+
rgba(255, 255, 255, 0.5) 50%,
114+
rgba(255, 255, 255, 0) 80%
115+
),
116+
lightgray;
117+
background-repeat: repeat-y;
118+
background-size: 50px 500px;
119+
background-position: 0 0;
120+
animation: shine 1s infinite alternate;
121+
}
122+
123+
@keyframes shine {
124+
to {
125+
background-position: 100% 0;
126+
}
127+
}
128+
</style>

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

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,20 @@
11
<template>
22
<main>
33
<!-- eslint-disable-next-line vue/no-v-html -->
4-
<div v-html="mucIconsSprite" />
4+
<div v-html="mucIconsSprite"/>
55
<!-- eslint-disable-next-line vue/no-v-html -->
6-
<div v-html="customIconsSprite" />
6+
<div v-html="customIconsSprite"/>
77
<h1>Aktive Checklisten ({{ checklists.length }})</h1>
88
<muc-card-container
9-
style="grid-template-columns: repeat(auto-fit,589px)"
9+
style="grid-template-columns: repeat(auto-fit,589px)"
1010
>
11+
<skeleton-loader
12+
v-for="() in [1,2,3,4]"
13+
v-if="loading"
14+
>
15+
</skeleton-loader>
1116
<checklist-card
17+
v-else
1218
v-for="(checklist, index) in checklists"
1319
:key="index"
1420
:checklist="checklist">
@@ -21,16 +27,23 @@
2127
import customIconsSprite from "@muenchen/muc-patternlab-vue/assets/icons/custom-icons.svg?raw";
2228
import mucIconsSprite from "@muenchen/muc-patternlab-vue/assets/icons/muc-icons.svg?raw";
2329
import {onMounted, ref} from "vue";
24-
import {MucCardContainer} from "@muenchen/muc-patternlab-vue";
30+
import {MucCardContainer, MucCard} from "@muenchen/muc-patternlab-vue";
2531
import type DummyChecklist from "@/api/dummyservice/DummyChecklist.ts";
2632
import DummyChecklistService from "@/api/dummyservice/DummyChecklistService.ts";
2733
import ChecklistCard from "@/components/ChecklistCard.vue";
34+
import SkeletonLoader from "@/components/common/skeleton-loader.vue";
2835
2936
const checklists = ref<DummyChecklist[]>([]);
37+
const loading = ref(false);
3038
3139
onMounted(() => {
40+
loading.value = true;
3241
const dcl = new DummyChecklistService();
33-
checklists.value = dcl.getChecklists();
42+
dcl.getChecklists()
43+
.then((checklist) => {
44+
checklists.value = checklist;
45+
})
46+
.finally(() => loading.value = false);
3447
})
3548
3649
</script>

0 commit comments

Comments
 (0)