Merge pull request #187 from it-at-m/MUXDBS-100-feedback

Muxdbs 100 feedback

Author: FabianWilms

personalization-webcomponents/src/ChecklistDetail.ce.vue

@@ -24,14 +24,16 @@
               <checklist-list
                 v-if="openCheckList.length !== 0"
                 :checklist-items="openCheckList"
+                :disabled="loadingSort || loadingCheck"
                 @checked="onCheckedOpen"
                 @sort="onSortOpen"
               ></checklist-list>
               <muc-banner
                 v-else
                 class="banner"
                 type="success"
-                >Herzlichen Glückwunsch, Sie haben alle Aufgaben erledigt! Wir
+              >
+                Herzlichen Glückwunsch, Sie haben alle Aufgaben erledigt! Wir
                 bewahren diese Checkliste noch bis zum {{ deletionDate }} für
                 Sie auf. Danach wird sie automatisch gelöscht.
               </muc-banner>
@@ -40,6 +42,7 @@
               </h2>
               <checklist-list
                 v-if="closedCheckList.length !== 0"
+                :disabled="loadingSort || loadingCheck"
                 :checklist-items="closedCheckList"
                 @checked="onCheckedClosed"
                 :is-draggable="false"
@@ -48,7 +51,8 @@
                 v-else
                 class="banner"
                 type="info"
-                >Sie haben noch keine erledigten Aufgaben. Haken Sie Aufgaben in
+              >
+                Sie haben noch keine erledigten Aufgaben. Haken Sie Aufgaben in
                 der Checkliste ab, um sie als erledigt zu markieren.
               </muc-banner>
             </div>
@@ -78,6 +82,8 @@ import { QUERY_PARAM_CHECKLIST_ID, setAccessToken } from "@/util/Constants.ts";
 
 const checklist = ref<Checklist | null>(null);
 const loading = ref(true);
+const loadingSort = ref(false);
+const loadingCheck = ref(false);
 
 const { loggedIn } = useDBSLoginWebcomponentPlugin(_authChangedCallback);
 
@@ -152,7 +158,7 @@ const deletionDate = computed(() => {
 
 function onCheckedOpen(serviceID: string) {
   if (checklist.value) {
-    loading.value = true;
+    loadingCheck.value = true;
     const service = new ChecklistService();
     service
       .checkChecklistentry(checklist.value.id, serviceID)
@@ -170,13 +176,13 @@ function onCheckedOpen(serviceID: string) {
       .catch((err) => {
         console.debug(err);
       })
-      .finally(() => (loading.value = false));
+      .finally(() => (loadingCheck.value = false));
   }
 }
 
 function onCheckedClosed(serviceID: string) {
   if (checklist.value) {
-    loading.value = true;
+    loadingCheck.value = true;
     const service = new ChecklistService();
     service
       .uncheckChecklistentry(checklist.value.id, serviceID)
@@ -194,7 +200,7 @@ function onCheckedClosed(serviceID: string) {
       .catch((err) => {
         console.debug(err);
       })
-      .finally(() => (loading.value = false));
+      .finally(() => (loadingCheck.value = false));
   }
 }
 
@@ -211,7 +217,7 @@ function onSortOpen(evt: { oldIndex: number; newIndex: number }) {
     return item.serviceID === elementToSort.serviceID;
   }) as number;
   if (oldIndex >= 0 && checklist.value) {
-    loading.value = true;
+    loadingSort.value = true;
 
     const newIndex = oldIndex + (evt.newIndex - evt.oldIndex);
     const element = checklist.value.checklistItems[oldIndex] as ChecklistItem;
@@ -235,7 +241,7 @@ function onSortOpen(evt: { oldIndex: number; newIndex: number }) {
       .catch((err) => {
         console.debug(err);
       })
-      .finally(() => (loading.value = false));
+      .finally(() => (loadingSort.value = false));
   }
 }
 </script>

personalization-webcomponents/src/components/ChecklistList.vue

@@ -18,7 +18,6 @@
           role="listitem"
           aria-roledescription="sortierbares Listenelement"
           :class="{
-            muted: element.checked !== null,
             'keyboard-dragging': draggedIndex === index,
           }"
           :aria-grabbed="draggedIndex === index ? 'true' : 'false'"
@@ -28,20 +27,36 @@
           :key="element.serviceID"
           @keydown="handleEnterKeyDown"
         >
-          <input
-            type="checkbox"
+          <p13n-checkbox
             :id="'cb-' + element.serviceID"
-            class="radio-look"
-            :checked="element.checked !== null"
+            :aria-label="
+              !!element.checked
+                ? element.title + ' als nicht erledigt markieren.'
+                : element.title + ' als erledigt markieren.'
+            "
+            :checked="!!element.checked"
             :disabled="disabled"
-            @change="() => onSelectChange(element.serviceID)"
+            style="margin-left: 8px"
+            @check="() => onSelectChange(element.serviceID)"
           />
           <span
+            tabindex="0"
             class="label-text"
-            @click.prevent="openDialog(element)"
-            style="cursor: pointer"
+            :class="{
+              muted: element.checked !== null,
+            }"
+            @click="(evt) => openDialog(element, evt)"
+            @keydown="
+              (evt) => (evt.keyCode == 32 ? openDialog(element, evt) : null)
+            "
           >
             <b>{{ element.title }}</b>
+            <span
+              class="required-label"
+              v-if="element.required"
+            >
+              - verpflichtend
+            </span>
           </span>
           <span
             v-if="isDraggable"
@@ -82,6 +97,8 @@ import { MucIcon } from "@muenchen/muc-patternlab-vue";
 import { Sortable } from "sortablejs-vue3";
 import { computed, onBeforeUnmount, onMounted, ref } from "vue";
 
+import P13nCheckbox from "@/components/P13nCheckbox.vue";
+
 const props = withDefaults(
   defineProps<{
     checklistItems: ChecklistItem[];
@@ -120,7 +137,8 @@ function onSelectChange(serviceID: string) {
   emit("checked", serviceID);
 }
 
-function openDialog(item: ChecklistItem) {
+function openDialog(item: ChecklistItem, evt: Event) {
+  evt.preventDefault();
   dialogItem.value = item;
   dialogVisible.value = true;
   emit("label-click", item);
@@ -182,24 +200,24 @@ function handleArrowKeyDown(event: KeyboardEvent) {
   background-color: #d0e7ff;
 }
 
-.container {
-  max-width: 600px;
-  margin: 1rem auto;
-  padding-left: 0;
-}
-
 .list {
   list-style: none;
   padding: 0;
   margin: 0;
-  border-top: 1px solid #ddd;
+  border-top: 1px solid var(--color-neutrals-beau-blue-light, #e5eef5);
+  border-bottom: 1px solid var(--color-neutrals-beau-blue-light, #e5eef5);
+}
+
+.container {
+  padding-left: 0;
+  padding-right: 0;
+  padding-bottom: 56px;
 }
 
 .list-item {
   display: flex;
   align-items: center;
-  padding: 0.5rem 1rem;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--color-neutrals-beau-blue-light, #e5eef5);
   user-select: none;
   cursor: grab;
   color: var(--color-brand-main-blue);
@@ -211,75 +229,32 @@ function handleArrowKeyDown(event: KeyboardEvent) {
 
 /* text grayed out when selected */
 .muted {
-  color: #7a8d9f;
+  color: #7a8d9f !important;
 }
 
-.radio-look {
-  appearance: none;
-  -webkit-appearance: none;
-  flex: 0 0 16px;
-  width: 16px;
-  height: 16px;
-  border: 2px solid var(--color-neutrals-grey);
-  border-radius: 50%;
-  background: white;
-  box-sizing: border-box;
-  margin-right: 0.8rem;
-  position: relative;
+.label-text {
   cursor: pointer;
-  outline-offset: 2px;
-  transition:
-    border-color 0.2s ease,
-    background-color 0.2s ease;
-}
-
-.radio-look:hover {
-  border-color: var(--color-brand-main-blue);
-  background-color: #cce4ff;
-}
-
-.radio-look:hover::before {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 10px;
-  height: 10px;
-  background-color: var(--color-brand-main-blue);
-  border-radius: 50%;
-  transform: translate(-50%, -50%);
-  opacity: 0.3;
-  pointer-events: none;
-  transition: opacity 0.2s ease;
-}
-
-.radio-look:checked {
-  border-color: var(--color-brand-main-blue);
-  background-color: var(--color-brand-main-blue);
-}
-
-.radio-look:checked::before {
-  content: "✓";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  color: white;
-  font-weight: bold;
-  font-size: 14px;
-  line-height: 1;
-  transform: translate(-50%, -45%);
-  pointer-events: none;
+  color: var(--color-brand-main-blue);
+  /* Body/Body 1 Bold */
+  font-family: "Open Sans", sans-serif;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 150%; /* 27px */
+
+  padding: 16px 8px;
+  flex-grow: 1;
   user-select: none;
-  transition: color 0.2s ease;
 }
 
-.radio-look:checked:hover::before {
-  opacity: 0.8;
+.label-text:hover {
+  text-decoration: underline;
 }
 
-.label-text {
-  flex-grow: 1;
-  user-select: none;
+@media (max-width: 576px) {
+  .label-text {
+    padding: 12px 8px;
+  }
 }
 
 .drag-handle {
@@ -320,4 +295,14 @@ function handleArrowKeyDown(event: KeyboardEvent) {
   overflow-y: auto;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
 }
+
+.required-label {
+  color: var(--neutrals-grey, #3a5368);
+  /* Body/Body 2 */
+  font-family: "Open Sans", sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%;
+}
 </style>