feat: Confetti on Deadline Confirm

nuxt/components/modal/ConfirmUserDeadline.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import party from 'party-js'
+
 const props = defineProps<{
   userDeadlineId: number
 }>()
@@ -23,6 +25,11 @@ const { refresh: onConfirmDeadline, status } = useFetch<any>(() => `user-deadlin
     }
   },
 })
+
+function confirmDeadline(event) {
+  party.confetti(event)
+  onConfirmDeadline()
+}
 </script>
 
 <template>
@@ -38,7 +45,7 @@ const { refresh: onConfirmDeadline, status } = useFetch<any>(() => `user-deadlin
     }"
   >
     <template #footer>
-      <UButton color="primary" label="Abschließen" :loading="status === 'pending'" @click="onConfirmDeadline" />
+      <UButton color="primary" label="Abschließen" :loading="status === 'pending'" @click="confirmDeadline" />
       <UButton color="white" label="Abbrechen" @click="isOpen = false" />
     </template>
   </UDashboardModal>

package.json

@@ -35,6 +35,7 @@
   },
   "dependencies": {
     "laravel-echo": "^1.16.0",
+    "party-js": "^2.2.0",
     "pusher-js": "8.4.0-rc2"
   }
 }

pnpm-lock.yaml

@@ -11,6 +11,9 @@ dependencies:
   laravel-echo:
     specifier: ^1.16.0
     version: 1.16.0
+  party-js:
+    specifier: ^2.2.0
+    version: 2.2.0
   pusher-js:
     specifier: 8.4.0-rc2
     version: 8.4.0-rc2
@@ -7176,6 +7179,10 @@ packages:
     engines: {node: '>= 0.8'}
     dev: true
 
+  /party-js@2.2.0:
+    resolution: {integrity: sha512-50hGuALCpvDTrQLPQ1fgUgxKIWAH28ShVkmeK/3zhO0YJyCqkhrZhQEkWPxDYLvbFJ7YAXyROmFEu35gKpZLtQ==}
+    dev: false
+
   /path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}