[events] Show if event needs service (spinner)

src/plugins/events/components/overview/slots/EventSlot.vue

@@ -1,16 +1,20 @@
 <template>
-  <q-card
-    class="q-mx-xs q-mt-sm justify-start content-center items-center rounded-borders shadow-5"
-    bordered
-  >
-    <q-card-section class="text-primary q-pa-xs">
-      <div class="text-weight-bolder text-center" style="font-size: 1.5vw">
-        {{ event.type.name
-        }}<template v-if="event.name"
-          >: <span style="font-size: 1.2vw">{{ event.name }}</span>
-        </template>
+  <q-card class="q-mx-xs q-mt-sm rounded-borders shadow-5" bordered>
+    <q-spinner-rings
+      v-if="serviceNeeded"
+      size="100%"
+      style="max-height: min(3vw, 3em); max-width: min(3vw, 3em); position: absolute"
+      color="warning"
+    />
+    <q-card-section class="text-primary q-pa-xs" style="font-size: clamp(1em, 1.5vw, 1.6em)">
+      <div class="text-weight-bolder text-center">
+        {{ event.type.name }}<template v-if="event.name">: </template
+        ><span style="font-size: 0.9em">
+          {{ event.name }}
+        </span>
       </div>
-      <div v-if="event.description" class="text-weight-medium" style="font-size: 1vw">
+
+      <div v-if="event.description" class="text-weight-medium" style="font-size: 0.75em">
         {{ event.description }}
       </div>
     </q-card-section>
@@ -78,6 +82,14 @@ export default defineComponent({
       set: (v) => emit('update:modelValue', v),
     });
 
+    const serviceNeeded = computed(() =>
+      props.modelValue.jobs.some(
+        (job) =>
+          job.required_services >
+          job.services.reduce((p, c) => ((c.value += p.value) && c) || c, { value: 0 }).value
+      )
+    );
+
     function remove() {
       emit('removeEvent', props.modelValue.id);
     }
@@ -91,6 +103,7 @@ export default defineComponent({
       edit,
       event,
       remove,
+      serviceNeeded,
     };
   },
 });