From 0aa8c052fef2d91f422614ffa050491b6061ba7d Mon Sep 17 00:00:00 2001
From: Ashley <admin@ashleybailey.me>
Date: Tue, 3 Oct 2023 22:13:47 +0100
Subject: [PATCH] feat(invitation): Add manageInvitation() method

This commit adds the `manageInvitation()` method to the `InvitationItem` component. This method opens a modal dialog using the `$modal` plugin to display invitation details and a save button. The save button is initially disabled.
---
 .../InvitationList/InvitationItem.vue         | 27 +++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/frontend/src/modules/admin/components/Invitations/InvitationList/InvitationItem.vue b/frontend/src/modules/admin/components/Invitations/InvitationList/InvitationItem.vue
index 9919bf8aa..b997e1652 100644
--- a/frontend/src/modules/admin/components/Invitations/InvitationList/InvitationItem.vue
+++ b/frontend/src/modules/admin/components/Invitations/InvitationList/InvitationItem.vue
@@ -11,12 +11,12 @@
                 <FormKit type="button" @click="openShareSheet" :classes="{ input: '!bg-secondary !px-3.5 h-[36px]' }">
                     <i class="fa-solid fa-share"></i>
                 </FormKit>
-                <FormKit v-if="invite.used" type="button" @click="openInvitationUserList" :classes="{ input: '!bg-secondary !px-3.5 h-[36px]' }">
+                <FormKit v-if="invite.used && invite.used_by && invite.used_by.length > 0" type="button" @click="openInvitationUserList" :classes="{ input: '!bg-secondary !px-3.5 h-[36px]' }">
                     <i class="fa-solid fa-user-group"></i>
                 </FormKit>
             </div>
             <div class="flex flex-row space-x-2">
-                <FormKit type="button" :classes="{ input: '!bg-secondary !px-3.5 h-[36px]' }" v-if="false">
+                <FormKit type="button" data-theme="secondary" @click="manageInvitation" :classes="{ input: '!bg-secondary !px-3.5 h-[36px]' }">
                     <i class="fa-solid fa-edit"></i>
                 </FormKit>
                 <FormKit type="button" :disabled="disabled.delete" @click="deleteLocalInvitation" :classes="{ input: '!bg-red-600 !px-3.5 h-[36px]' }">
@@ -35,10 +35,12 @@ import { mapActions, mapState } from "pinia";
 import { useClipboard } from "@vueuse/core";
 
 import type { Invitation } from "@/types/api/invitations";
+import type { CustomModalOptions } from "@/plugins/modal";
 
 import ListItem from "@/components/ListItem.vue";
 import SimpleUserList from "../SimpleUserList/SimpleUserList.vue";
 import ShareSheet from "../ShareSheet.vue";
+import InvitationManager from "../../InvitationManager/InvitationManager.vue";
 
 export default defineComponent({
     name: "InvitationItem",
@@ -67,6 +69,27 @@ export default defineComponent({
         };
     },
     methods: {
+        async manageInvitation() {
+            const modal_options: CustomModalOptions = {
+                title: this.__("Invitation Details"),
+                buttons: [
+                    {
+                        text: this.__("Save"),
+                        attrs: {
+                            "data-theme": "primary",
+                            disabled: true,
+                        },
+                        emit: "saveInvitation",
+                    },
+                ],
+            };
+
+            const modal_props = {
+                invitation: this.invite,
+            };
+
+            this.$modal.openModal(InvitationManager, modal_options, modal_props);
+        },
         async copyToClipboard() {
             if (this.clipboard.isSupported) {
                 this.clipboard.copy(`${window.location.origin}/j/${this.invite.code}`);