Merge pull request #4932 from manuelmeister/feature/improve-invitatio…

…ns-ui Move invitations to separate view
ecamp · Apr 12, 2024 · 5535b8a · 5535b8a
2 parents 38ad63e + eaae62e
commit 5535b8a
Show file tree

Hide file tree

Showing 11 changed files with 186 additions and 56 deletions.
diff --git a/frontend/src/components/navigation/UserMeta.vue b/frontend/src/components/navigation/UserMeta.vue
@@ -22,7 +22,12 @@
           :class="[btnClasses, { 'v-btn--open': value }]"
           v-on="on"
         >
-          <user-avatar v-if="authUser" :user="authUser" :size="40" />
+          <template v-if="authUser">
+            <v-badge v-if="invitationCount > 0" color="red" dot overlap bordered>
+              <user-avatar :user="authUser" :size="40" />
+            </v-badge>
+            <UserAvatar v-else :user="authUser" :size="40" />
+          </template>
           <span class="sr-only-sm-and-down mx-3">
             {{ authUser.displayName }}
           </span>
@@ -36,7 +41,12 @@
         :class="[btnClasses, { 'v-btn--open': value }]"
         v-on="on"
       >
-        <user-avatar v-if="authUser" :user="authUser" :size="40" />
+        <template v-if="authUser">
+          <v-badge v-if="invitationCount > 0" color="#f00" dot overlap bordered>
+            <user-avatar :user="authUser" :size="40" />
+          </v-badge>
+          <UserAvatar v-else :user="authUser" :size="40" />
+        </template>
         <span class="sr-only-sm-and-down mx-3">
           {{ authUser.displayName }}
         </span>
@@ -56,6 +66,19 @@
         <v-icon left>mdi-format-list-bulleted-triangle</v-icon>
         <span>{{ $tc('components.navigation.userMeta.myCamps') }}</span>
       </v-list-item>
+      <v-list-item
+        block
+        tag="li"
+        exact
+        :to="{ name: 'invitations' }"
+        @click="open = false"
+      >
+        <v-icon left>mdi-email</v-icon>
+        <span>{{ $tc('components.navigation.userMeta.invitations') }}</span>
+        <v-list-item-action-text v-if="invitationCount > 0">
+          <v-badge inline bordered color="#f00" :content="invitationCount" />
+        </v-list-item-action-text>
+      </v-list-item>
       <v-list-item
         v-if="!$vuetify.breakpoint.lgAndUp"
         block
@@ -115,6 +138,9 @@ export default {
     }
   },
   computed: {
+    invitationCount() {
+      return this.api.get().personalInvitations().totalItems
+    },
     newsLink() {
       return getEnv().NEWS_LINK
     },
@@ -134,3 +160,11 @@ export default {
   },
 }
 </script>
+
+<style scoped>
+.v-badge:deep(.v-badge__badge::after) {
+  border-color: red;
+  background-color: red;
+  z-index: -1;
+}
+</style>
diff --git a/...ations/PromptPersonalInvitationReject.vue → ...ations/DialogPersonalInvitationReject.vue b/...ations/PromptPersonalInvitationReject.vue → ...ations/DialogPersonalInvitationReject.vue
@@ -1,20 +1,24 @@
 <template>
-  <PopoverPrompt
+  <DialogForm
     v-model="showDialog"
     type="error"
+    icon="mdi-email"
+    :title="
+      $tc(
+        'components.personalInvitations.dialogPersonalInvitationReject.rejectInvitation'
+      )
+    "
     :error="error"
     :submit-action="submitAction"
     :submit-label="
       $tc(
-        'components.personalInvitations.promptPersonalInvitationReject.rejectInvitation'
+        'components.personalInvitations.dialogPersonalInvitationReject.rejectInvitation'
       )
     "
     submit-color="error"
     submit-icon="mdi-cancel"
     cancel-icon=""
     :cancel-action="close"
-    position="top"
-    :align="align"
     v-bind="$attrs"
   >
     <template #activator="scope">
@@ -23,7 +27,7 @@
     <slot>
       {{
         $tc(
-          'components.personalInvitations.promptPersonalInvitationReject.warningText',
+          'components.personalInvitations.dialogPersonalInvitationReject.warningText',
           0,
           { campTitle: campTitle }
         )
@@ -34,16 +38,16 @@
         {{ error }}
       </slot>
     </template>
-  </PopoverPrompt>
+  </DialogForm>
 </template>
 
 <script>
 import DialogBase from '@/components/dialog/DialogBase.vue'
-import PopoverPrompt from '@/components/prompt/PopoverPrompt.vue'
+import DialogForm from '@/components/dialog/DialogForm.vue'
 
 export default {
-  name: 'PromptPersonalInvitationReject',
-  components: { PopoverPrompt },
+  name: 'DialogPersonalInvitationReject',
+  components: { DialogForm },
   extends: DialogBase,
   props: {
     entity: { type: Object, required: true },

diff --git a/frontend/src/components/personal_invitations/PersonalInvitations.vue b/frontend/src/components/personal_invitations/PersonalInvitations.vue
@@ -1,23 +1,31 @@
 <template>
-  <v-list class="py-0">
+  <div>
+    <v-card-text v-if="invitations.items.length === 0">
+      <p>
+        {{
+          $tc('components.personalInvitations.personalInvitations.noOpenInvitations', 0, {
+            email: authUser.profile().email,
+          })
+        }}
+      </p>
+    </v-card-text>
     <template v-if="$vuetify.breakpoint.mdAndUp">
       <v-list-item v-for="invitation in invitations.items" :key="invitation._meta.self">
         <v-list-item-content>
           <v-list-item-title>{{ invitation.campTitle }}</v-list-item-title>
         </v-list-item-content>
         <v-list-item-action>
-          <PromptPersonalInvitationReject
+          <DialogPersonalInvitationReject
             :entity="invitation"
             :camp-title="invitation.campTitle"
-            align="right"
             @submit="rejectInvitation(invitation)"
           >
             <template #activator="{ on }">
               <v-btn class="px-4" text v-on="on">
                 {{ $tc('components.personalInvitations.personalInvitations.reject') }}
               </v-btn>
             </template>
-          </PromptPersonalInvitationReject>
+          </DialogPersonalInvitationReject>
         </v-list-item-action>
         <v-list-item-action>
           <v-btn color="primary" @click="acceptInvitation(invitation)">
@@ -35,18 +43,17 @@
         </template>
         <v-list-item>
           <v-list-item-action>
-            <PromptPersonalInvitationReject
+            <DialogPersonalInvitationReject
               :entity="invitation"
               :camp-title="invitation.campTitle"
-              align="left"
               @submit="rejectInvitation(invitation)"
             >
               <template #activator="{ on }">
                 <v-btn class="px-4" text v-on="on">
                   {{ $tc('components.personalInvitations.personalInvitations.reject') }}
                 </v-btn>
               </template>
-            </PromptPersonalInvitationReject>
+            </DialogPersonalInvitationReject>
           </v-list-item-action>
           <v-spacer />
           <v-list-item-action>
@@ -57,12 +64,13 @@
         </v-list-item>
       </v-list-group>
     </template>
-  </v-list>
+  </div>
 </template>
 <script>
 import { errorToMultiLineToast } from '../toast/toasts.js'
 import { isNavigationFailure, NavigationFailureType } from 'vue-router'
-import PromptPersonalInvitationReject from './PromptPersonalInvitationReject.vue'
+import DialogPersonalInvitationReject from './DialogPersonalInvitationReject.vue'
+import { mapGetters } from 'vuex'
 
 const ignoreNavigationFailure = (e) => {
   if (!isNavigationFailure(e, NavigationFailureType.redirected)) {
@@ -72,11 +80,14 @@ const ignoreNavigationFailure = (e) => {
 
 export default {
   name: 'PersonalInvitations',
-  components: { PromptPersonalInvitationReject },
+  components: { DialogPersonalInvitationReject },
   computed: {
     invitations() {
       return this.api.get().personalInvitations()
     },
+    ...mapGetters({
+      authUser: 'getLoggedInUser',
+    }),
   },
   methods: {
     acceptInvitation(invitation) {

diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
@@ -282,19 +282,21 @@
     },
     "navigation": {
       "userMeta": {
+        "invitations": "Einladungen",
         "logOut": "Ausloggen",
         "myCamps": "Meine Lager",
         "profile": "Profil"
       }
     },
     "personalInvitations": {
+      "dialogPersonalInvitationReject": {
+        "rejectInvitation": "Einladung ablehnen",
+        "warningText": "Möchtest du die Einladung zum Lager \"{campTitle}\" wirklich ablehnen?"
+      },
       "personalInvitations": {
         "accept": "Akzeptieren",
+        "noOpenInvitations": "Keine offene Einladungen. Wurde die Einladung an eine andere Adresse als \"{email}\" versendet?",
         "reject": "Ablehnen"
-      },
-      "promptPersonalInvitationReject": {
-        "rejectInvitation": "Einladung ablehnen",
-        "warningText": "Möchtest du dem Lager \"{campTitle}\" wirklich nicht beitreten?"
       }
     },
     "print": {
@@ -684,7 +686,6 @@
     "camps": {
       "create": "Lager erstellen",
       "pastCamps": "Alte Lager",
-      "personalInvitations": "Einladungen",
       "prototypeCamps": "Vorlagen",
       "title": "Meine Lager"
     },
@@ -699,6 +700,9 @@
         "title": "Kategorien"
       }
     },
+    "invitations": {
+      "personalInvitations": "Einladungen"
+    },
     "material": {
       "materialLists": {
         "title": "Materiallisten"

diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
@@ -282,19 +282,21 @@
     },
     "navigation": {
       "userMeta": {
+        "invitations": "Invitations",
         "logOut": "Log out",
         "myCamps": "My camps",
         "profile": "Profile"
       }
     },
     "personalInvitations": {
+      "dialogPersonalInvitationReject": {
+        "rejectInvitation": "Reject invitation",
+        "warningText": "Are you sure you want to reject the initation to the camp \"{campTitle}\"?"
+      },
       "personalInvitations": {
         "accept": "Accept",
+        "noOpenInvitations": "No open invitations. Was the invitation sent to an address other than \"{email}\"?",
         "reject": "Reject"
-      },
-      "promptPersonalInvitationReject": {
-        "rejectInvitation": "Reject invitation",
-        "warningText": "Are you sure you do not want to join the camp \"{campTitle}\"?"
       }
     },
     "print": {
@@ -683,7 +685,6 @@
     "camps": {
       "create": "Create a camp",
       "pastCamps": "Past camps",
-      "personalInvitations": "Invitations",
       "prototypeCamps": "Prototypes",
       "title": "My Camps"
     },
@@ -698,6 +699,9 @@
         "title": "Categories"
       }
     },
+    "invitations": {
+      "personalInvitations": "Invitations"
+    },
     "material": {
       "materialLists": {
         "title": "Material lists"

diff --git a/frontend/src/locales/fr.json b/frontend/src/locales/fr.json
@@ -267,11 +267,21 @@
     },
     "navigation": {
       "userMeta": {
+        "invitations": "Invitations",
         "logOut": "Se déconnecter",
         "myCamps": "Mes camps",
         "profile": "Profil"
       }
     },
+    "personalInvitations": {
+      "dialogPersonalInvitationReject": {
+        "rejectInvitation": "Refuser l'invitation",
+        "warningText": "Tu veux vraiment refuser l'invitation au camp \"{campTitle}\" ?"
+      },
+      "personalInvitations": {
+        "noOpenInvitations": "Aucune invitation ouverte. L'invitation a-t-elle été envoyée à une autre adresse que \"{email}\" ?"
+      }
+    },
     "print": {
       "config": {
         "activityConfig": {
@@ -671,6 +681,9 @@
         "title": "Catégories"
       }
     },
+    "invitations": {
+      "personalInvitations": "Invitations"
+    },
     "material": {
       "materialLists": {
         "title": "Liste de matériel"

diff --git a/frontend/src/locales/it.json b/frontend/src/locales/it.json
@@ -259,11 +259,21 @@
     },
     "navigation": {
       "userMeta": {
+        "invitations": "Inviti",
         "logOut": "Disconnettiti",
         "myCamps": "I miei campi",
         "profile": "Profilo"
       }
     },
+    "personalInvitations": {
+      "dialogPersonalInvitationReject": {
+        "rejectInvitation": "Rifiuta l'invito",
+        "warningText": "Volete davvero declinare l'invito al campo \"{campTitle}\"?"
+      },
+      "personalInvitations": {
+        "noOpenInvitations": "Nessun invito aperto. L'invito è stato inviato a un indirizzo diverso da \"{email}\"?"
+      }
+    },
     "print": {
       "config": {
         "activityConfig": {
@@ -651,6 +661,9 @@
         "title": "Categorie"
       }
     },
+    "invitations": {
+      "personalInvitations": "Inviti"
+    },
     "material": {
       "materialLists": {
         "title": "Liste di materiali"