Merge pull request #404 from AOEpeople/feature/#261927-dashboard-even…

…t-design added indicators to events in the dashboard
AOEpeople · Jan 18, 2024 · 3ceb2b0 · 3ceb2b0
2 parents 79ff91c + c57e997
commit 3ceb2b0
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 40 deletions.
diff --git a/src/Resources/src/components/dashboard/Day.vue b/src/Resources/src/components/dashboard/Day.vue
@@ -1,8 +1,9 @@
 <template>
-  <div class="day-shadow mx-auto grid h-auto max-w-[414px] grid-cols-[auto_minmax(0,1fr)] grid-rows-[minmax(0,1fr)_auto] rounded bg-white sm:max-w-none">
+  <div class="day-shadow mx-auto grid h-auto min-h-[153px] max-w-[414px] grid-cols-[auto_minmax(0,1fr)] grid-rows-[minmax(0,1fr)_auto] rounded bg-white sm:max-w-none">
     <div
       class="relative col-span-1 col-start-1 row-span-2 row-start-1 grid w-[24px] justify-center gap-2 rounded-l-[5px] py-[2px]"
-      :class="[day.isLocked || !day.isEnabled || emptyDay ? 'bg-[#80909F]' : 'bg-primary-2', !day.isLocked && !emptyDay && !guestData ? 'grid-rows-[minmax(0,1fr)_24px]' : '']"
+      :class="[day.isLocked || !day.isEnabled || (emptyDay && !isEventDay) ? 'bg-[#80909F]' : 'bg-primary-2',
+               !day.isLocked && !emptyDay && !guestData ? 'grid-rows-[minmax(0,1fr)_24px]' : '']"
     >
       <span
         class="row-start-1 rotate-180 place-self-center text-center text-[11px] font-bold uppercase leading-4 tracking-[3px] text-white [writing-mode:vertical-lr]"
@@ -36,7 +37,8 @@
       <div
         v-for="(meal, mealID) in day.meals"
         :key="mealID"
-        class="mx-[15px] border-b-[0.7px] py-[13px] last:border-b-0"
+        class="mx-[15px] border-b-[0.7px] last:border-b-0"
+        :class="isEventDay ? 'pt-[13px] pb-[13px] last:pb-0 last:pt-[21px]' : 'py-[13px]'"
       >
         <VariationsData
           v-if="meal.variations"
@@ -59,12 +61,15 @@
     <div
       v-if="emptyDay || !day.isEnabled"
       class="z-[1] col-start-2 row-start-1 grid h-full min-w-[290px] items-center"
+      :class="isEventDay ? 'pt-[24px]' : ''"
     >
-      <span class="description relative ml-[23px] text-primary-1">{{ t('dashboard.no_service') }}</span>
+      <span class="description relative ml-[15px] text-primary-1">
+        {{ t('dashboard.no_service') }}
+      </span>
     </div>
     <EventData
-      v-if="day.event !== null"
-      class="col-start-2 row-start-2 border-t-2"
+      v-if="isEventDay"
+      class="col-start-2 row-start-2"
       :day="day"
     />
   </div>
@@ -94,6 +99,7 @@ const props = defineProps<{
 const day = props.guestData ? props.guestData : dashboardStore.getDay(props.weekID, props.dayID);
 const weekday = computed(() => translateWeekday(day.date, locale));
 const emptyDay = Object.keys(day.meals).length === 0;
+const isEventDay = day.event !== null;
 </script>
 
 <style>

diff --git a/src/Resources/src/components/dashboard/EventData.vue b/src/Resources/src/components/dashboard/EventData.vue
@@ -1,28 +1,43 @@
 <template>
   <div
-    class="flex w-full flex-row items-center px-[15px] py-[13px]"
+    class="grid w-full grid-cols-1 grid-rows-[minmax(0,2fr)_auto_minmax(0,1fr)]"
   >
-    <div class="grid w-full grid-cols-[24px_minmax(0,1fr)] gap-1">
+    <BannerSpacer>
       <EventIcon
-        class="w-[24px] self-center"
+        class="w-[20px] self-center"
+        :size="20"
       />
+      <span
+        class="text-[14px] font-bold leading-[20px] tracking-[0.5px] text-primary-1"
+      >
+        {{ t('event.event') }}
+      </span>
+      <EventIcon
+        class="w-[20px] self-center"
+        :size="20"
+      />
+    </BannerSpacer>
+    <div
+      class="flex w-full flex-row items-center px-[15px]"
+    >
       <span class="mr-[5px] inline-block grow self-center break-words text-[12px] font-bold leading-[20px] tracking-[0.5px] text-primary-1 min-[380px]:text-note">
         {{ getEventById(day.event.eventId)?.title }}
       </span>
+      <ParticipationCounter
+        class="justify-self-end"
+        :limit="0"
+        :mealCSS="new Date(day.date.date) > new Date() ? 'bg-primary-4' : 'bg-[#80909F]'"
+      >
+        {{ day.event?.participations }}
+      </ParticipationCounter>
+      <CheckBox
+        class="justify-self-end"
+        :isActive="new Date(day.date.date) > new Date()"
+        :isChecked="day.event?.isParticipating ?? false"
+        @click="day.event?.isParticipating === false ? joinEvent(day.date.date) : leaveEvent(day.date.date)"
+      />
     </div>
-    <ParticipationCounter
-      class="justify-self-end"
-      :limit="0"
-      :mealCSS="new Date(day.date.date) > new Date() ? 'bg-primary-4' : 'bg-[#80909F]'"
-    >
-      {{ day.event?.participations }}
-    </ParticipationCounter>
-    <CheckBox
-      class="justify-self-end"
-      :isActive="new Date(day.date.date) > new Date()"
-      :isChecked="day.event?.isParticipating ?? false"
-      @click="day.event?.isParticipating === false ? joinEvent(day.date.date) : leaveEvent(day.date.date)"
-    />
+    <div />
   </div>
 </template>
 
@@ -32,10 +47,13 @@ import { useEvents } from '@/stores/eventsStore';
 import ParticipationCounter from '../menuCard/ParticipationCounter.vue';
 import CheckBox from '../misc/CheckBox.vue';
 import EventIcon from '../misc/EventIcon.vue';
+import BannerSpacer from '../misc/BannerSpacer.vue';
+import { useI18n } from 'vue-i18n';
 
 defineProps<{
   day: Day
 }>();
 
+const { t } = useI18n();
 const { getEventById, joinEvent, leaveEvent } = useEvents();
 </script>
diff --git a/src/Resources/src/components/misc/BannerSpacer.vue b/src/Resources/src/components/misc/BannerSpacer.vue
@@ -0,0 +1,21 @@
+<template>
+  <div
+    class="justify-content grid w-full grid-cols-[minmax(0,1fr)_minmax(0,3fr)_minmax(0,1fr)] grid-rows-1 items-center py-2"
+  >
+    <div
+      class="col-span-1 col-start-1 h-[2px] bg-[#e5e7eb]"
+    />
+    <span
+      class="col-span-1 col-start-2 flex h-full flex-row items-center justify-around gap-2 rounded-full border-[2px] border-solid px-4 py-1"
+    >
+      <slot />
+    </span>
+    <div
+      class="col-span-1 col-start-3 h-[2px] bg-[#e5e7eb]"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
diff --git a/src/Resources/src/components/misc/EventIcon.vue b/src/Resources/src/components/misc/EventIcon.vue
@@ -1,9 +1,9 @@
 <template>
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    height="24"
+    :height="size"
     viewBox="0 -960 960 960"
-    width="24"
+    :width="size"
   >
     <path
       d="m212-212 282-100-182-182-100 282Zm709-467q-9 9-21 9t-21-9l-3-3q-14-14-35-14t-35 14L603-479q-9 9-21 9t-21-9q-9-9-9-21t9-21l203-203q32-32 77-32t77 32l3 3q9 9 9 21t-9 21ZM399-799q9-9 21-9t21 9l5 5q32 32 32 76t-32 76l-3 3q-9 9-21 9t-21-9q-9-9-9-21t9-21l3-3q14-14 14-34t-14-34l-5-5q-9-9-9-21t9-21Zm162-80q9-9 21-9t21 9l43 43q32 32 32 77t-32 77L523-559q-9 9-21 9t-21-9q-9-9-9-21t9-21l123-123q14-14 14-35t-14-35l-43-43q-9-9-9-21t9-21Zm320 480q-9 9-21 9t-21-9l-43-43q-14-14-35-14t-35 14l-43 43q-9 9-21 9t-21-9q-9-9-9-21t9-21l43-43q32-32 77-32t77 32l43 43q9 9 9 21t-9 21ZM212-212Zm-104 52 151-420q5-13 15.5-20t22.5-7q8 0 15 3t13 9l270 270q6 6 9 13t3 15q0 12-7 22.5T580-259L160-108q-12 5-23 1.5T118-118q-8-8-11.5-19t1.5-23Z"
@@ -14,8 +14,10 @@
 
 <script setup lang="ts">
 withDefaults(defineProps<{
-  fillColour?: string
+  fillColour?: string,
+  size?: number
 }>(), {
-  fillColour: 'fill-primary'
+  fillColour: 'fill-primary',
+  size: 24
 })
 </script>
diff --git a/src/Resources/src/locales/de.json b/src/Resources/src/locales/de.json
@@ -132,7 +132,8 @@
       "submit": "Erstellen",
       "title": "Titel",
       "isPublic": "Öffentliches Event?"
-    }
+    },
+    "event": "Event"
   },
   "flashMessage": {
     "error": {

diff --git a/src/Resources/src/locales/en.json b/src/Resources/src/locales/en.json
@@ -132,7 +132,8 @@
       "submit": "Create",
       "title": "Title",
       "isPublic": "Public event?"
-    }
+    },
+    "event": "Event"
   },
   "flashMessage": {
     "error": {

diff --git a/tests/e2e/cypress/e2e/Dashboard.cy.ts b/tests/e2e/cypress/e2e/Dashboard.cy.ts
@@ -34,9 +34,8 @@ describe('Test Dashboard View', () => {
             .find('span')
             .contains('Afterwork')
             .parent()
-            .parent()
             .find('div')
-            .eq(1)
+            .eq(0)
             .find('div')
             .eq(1)
             .contains('span', '17')
@@ -240,9 +239,8 @@ describe('Test Dashboard View', () => {
             .find('span')
             .contains('Afterwork')
             .parent()
-            .parent()
             .find('div')
-            .eq(4)
+            .eq(3)
             .children()
             .should('have.length', 0);
 
@@ -258,9 +256,8 @@ describe('Test Dashboard View', () => {
             .find('span')
             .contains('Afterwork')
             .parent()
-            .parent()
             .find('div')
-            .eq(4)
+            .eq(3)
             .click();
 
         // confirm event has been joined
@@ -275,9 +272,8 @@ describe('Test Dashboard View', () => {
             .find('span')
             .contains('Afterwork')
             .parent()
-            .parent()
             .find('div')
-            .eq(4)
+            .eq(3)
             .children()
             .should('have.length', 1);
 
@@ -293,9 +289,8 @@ describe('Test Dashboard View', () => {
             .find('span')
             .contains('Afterwork')
             .parent()
-            .parent()
             .find('div')
-            .eq(4)
+            .eq(3)
             .click();
 
         // confirm event has been left
@@ -310,9 +305,8 @@ describe('Test Dashboard View', () => {
             .find('span')
             .contains('Afterwork')
             .parent()
-            .parent()
             .find('div')
-            .eq(4)
+            .eq(3)
             .children()
             .should('have.length', 0);
     });