frontend/Collaborators.vue: enable edit functions only for manager

But allow deactivating your own CampCollaboration, as long as
you are not the last manager.
Prohibit the removal of the last manager.
In this view, removing the buttons didn't look well, so i disabled them.

Issue: ecamp#1415

frontend/src/components/camp/CollaboratorListItem.vue

@@ -18,6 +18,7 @@
         color="normal"
         icon="mdi-refresh"
         :animate="resendingEmail"
+        :disabled="disabled"
         @click="resendInvitation">
         {{ $tc('components.camp.collaboratorListItem.resendEmail') }}
       </icon-button>
@@ -36,10 +37,12 @@
         item-text="translation"
         :my="0"
         dense
-        vee-rules="required" />
+        vee-rules="required"
+        :disabled="disabled || isLastManager" />
     </v-list-item-action>
     <v-list-item-action class="ml-2">
       <button-delete
+        :disabled="(disabled && !isOwnCampCollaboration) || isLastManager"
         icon="mdi-cancel"
         @click="api.del(collaborator)">
         {{ $tc("components.camp.collaboratorListItem.deactivate") }}
@@ -58,11 +61,31 @@ export default {
   name: 'CollaboratorListItem',
   components: { ButtonDelete, ApiSelect, UserAvatar, IconButton },
   props: {
-    collaborator: { type: Object, required: true }
+    collaborator: { type: Object, required: true },
+    disabled: { type: Boolean, default: false }
   },
   data: () => ({
     resendingEmail: false
   }),
+  computed: {
+    isLastManager () {
+      const camp = this.collaborator.camp()
+      const isManager = this.collaborator.role === 'manager'
+      const lastManager = camp
+        ?.campCollaborations()
+        ?.items
+        ?.filter(collaborator => collaborator.status === 'established')
+        .filter(collaborator => collaborator.role === 'manager')
+        .length <= 1
+      return isManager && lastManager
+    },
+    isOwnCampCollaboration () {
+      if (!(typeof this.collaborator.user === 'function')) {
+        return false
+      }
+      return this.api.get().profile().user().id === this.collaborator.user().id
+    }
+  },
   methods: {
     resendInvitation () {
       this.resendingEmail = true

frontend/src/components/camp/InactiveCollaboratorListItem.vue

@@ -12,16 +12,18 @@
       </v-list-item-subtitle>
     </v-list-item-content>
     <v-list-item-action class="ml-5">
-      <icon-button color="normal"
-                   icon="mdi-refresh"
-                   @click="api.patch(collaborator, {status: 'invited'})">
+      <icon-button
+        color="normal"
+        icon="mdi-refresh"
+        :disabled="disabled"
+        @click="api.patch(collaborator, {status: 'invited'})">
         {{ $tc('components.camp.inactiveCampCollaboratorListItem.inviteAgain') }}
       </icon-button>
     </v-list-item-action>
     <v-list-item-action>
       <dialog-entity-delete :entity="collaborator">
         <template #activator="{ on }">
-          <button-delete v-on="on" />
+          <button-delete :disabled="disabled" v-on="on" />
         </template>
         {{ $tc('components.camp.inactiveCampCollaboratorListItem.delete') }} <br>
         <ul>
@@ -50,7 +52,8 @@ export default {
   name: 'InactiveCollaboratorListItem',
   components: { IconButton, ButtonDelete, DialogEntityDelete, UserAvatar },
   props: {
-    collaborator: { type: Object, required: true }
+    collaborator: { type: Object, required: true },
+    disabled: { type: Boolean, default: false }
   }
 }
 </script>

frontend/src/views/camp/Collaborators.vue

@@ -9,27 +9,30 @@ Displays collaborators of a single camp.
           <v-skeleton-loader v-if="collaborators.length <= 0" type="list-item-avatar-two-line@3" class="px-0" />
           <collaborator-list-item
             v-for="collaborator in establishedCollaborators"
-            :key="collaborator._meta.self" :collaborator="collaborator" />
+            :key="collaborator._meta.self" :collaborator="collaborator"
+            :disabled="!isManager" />
         </v-list>
       </content-group>
 
       <content-group v-if="invitedCollaborators.length > 0" :title="$tc('views.camp.collaborators.openInvitations')">
         <v-list>
           <collaborator-list-item
             v-for="collaborator in invitedCollaborators"
-            :key="collaborator._meta.self" :collaborator="collaborator" />
+            :key="collaborator._meta.self" :collaborator="collaborator"
+            :disabled="!isManager" />
         </v-list>
       </content-group>
 
       <content-group v-if="inactiveCollaborators.length > 0" :title="$tc('views.camp.collaborators.inactiveCollaborators')">
         <v-list>
           <inactive-collaborator-list-item
             v-for="collaborator in inactiveCollaborators"
-            :key="collaborator._meta.self" :collaborator="collaborator" />
+            :key="collaborator._meta.self" :collaborator="collaborator"
+            :disabled="!isManager" />
         </v-list>
       </content-group>
 
-      <content-group :title="$tc('views.camp.collaborators.invite')">
+      <content-group v-if="isManager" :title="$tc('views.camp.collaborators.invite')">
         <v-form @submit.prevent="invite">
           <v-container>
             <v-row
@@ -78,6 +81,7 @@ import ButtonAdd from '@/components/buttons/ButtonAdd.vue'
 import ETextField from '@/components/form/base/ETextField.vue'
 import ESelect from '@/components/form/base/ESelect.vue'
 import InactiveCollaboratorListItem from '@/components/camp/InactiveCollaboratorListItem.vue'
+import { campRoleMixin } from '@/mixins/campRoleMixin'
 
 const DEFAULT_INVITE_ROLE = 'member'
 
@@ -92,6 +96,7 @@ export default {
     ESelect,
     InactiveCollaboratorListItem
   },
+  mixins: [campRoleMixin],
   props: {
     camp: { type: Function, required: true }
   },