✨ use property checklistDetailUrl for generating a link to detail page

Author: FabianWilms

personalization-webcomponents/index-my-checklists.html

@@ -36,7 +36,9 @@
       </strong>
     </noscript>
     <div>
-      <my-checklists first-name="Fabi" />
+        <my-checklists
+            checklist-detail-url="./index-checklist-detail.html"
+        ></my-checklists>
     </div>
   </body>
 </html>

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

@@ -1,8 +1,9 @@
 import type DummyChecklistItem from "@/api/dummyservice/DummyChecklistItem.ts";
 
 export default interface DummyChecklist {
-  title: string;
-  lhmExtId: string;
-  items: DummyChecklistItem[];
-  lastUpdated: Date;
+    id: string;
+    title: string;
+    lhmExtId: string;
+    items: DummyChecklistItem[];
+    lastUpdated: Date;
 }

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

@@ -3,6 +3,7 @@ import type DummyChecklist from "@/api/dummyservice/DummyChecklist.ts";
 export default class DummyChecklistService {
   dummyResponse: DummyChecklist[] = [
     {
+      id: "1111",
       title: "Ich habe wenig Geld.",
       lhmExtId: "111",
       lastUpdated: new Date(),
@@ -45,6 +46,7 @@ export default class DummyChecklistService {
       ],
     },
     {
+      id: "2222",
       title: "Ich will umziehen.",
       lhmExtId: "111",
       lastUpdated: new Date(),
@@ -122,6 +124,7 @@ export default class DummyChecklistService {
       ],
     },
     {
+      id: "3333",
       title: "Ich manage eine Familie.",
       lhmExtId: "111",
       lastUpdated: new Date(),

personalization-webcomponents/src/components/ChecklistCard.vue

@@ -2,6 +2,7 @@
   <muc-card
     :title="checklist.title"
     tagline="Checkliste"
+    @click="gotoChecklist(checklist.id!)"
   >
     <template #headerPrefix>
       <div class="card-header-icon">
@@ -72,10 +73,11 @@ import { computed } from "vue";
 
 import ChecklistitemListitem from "@/components/checklistitem-listitem.vue";
 import MucChip from "@/components/common/muc-chip.vue";
-import { getChecklistIconByTitle } from "@/util/constants.ts";
+import {getChecklistIconByTitle, QUERY_PARAM_CHECKLIST_ID} from "@/util/constants.ts";
 
 const props = defineProps<{
   checklist: DummyChecklist;
+  checklistDetailUrl: string;
 }>();
 
 const todoCount = computed(() => {
@@ -92,6 +94,11 @@ const firstThreeItemsSortedByChecked = computed(() => {
   );
   return sortedItems.slice(0, 3);
 });
+
+
+function gotoChecklist(checklistId: string) {
+  location.href = `${props.checklistDetailUrl}?${QUERY_PARAM_CHECKLIST_ID}=${checklistId}`;
+}
 </script>
 
 <style scoped>

personalization-webcomponents/src/my-checklists.vue

@@ -27,6 +27,8 @@
         >
         </checklist-card>
       </div>
+          :checklist-detail-url="checklistDetailUrl"
+      >
     </muc-card-container>
   </main>
 </template>

personalization-webcomponents/src/util/constants.ts

@@ -1,5 +1,7 @@
 export const FIRSTNAME_DEFAULT = "World";
 
+export const QUERY_PARAM_CHECKLIST_ID = "cl-id";
+
 export function getChecklistIconByTitle(checklistTitle: string) {
   return {
     "Ich habe wenig Geld.": "./assets/img/placeholder_checklist_icon.png",