Allow to edit abbreviation + color and to leave camp for own collaboration

frontend/src/components/collaborator/CollaboratorEdit.vue

@@ -65,7 +65,7 @@
     <CollaboratorForm
       :collaboration="entityData"
       :status="collaborator.status"
-      :readonly-role="isLastManager"
+      :readonly-role="isLastManager || !isManager"
       :initial-collaboration="collaborator"
     >
       <template #statusChange>
@@ -131,6 +131,7 @@ import { errorToMultiLineToast } from '@/components/toast/toasts.js'
 import CollaboratorListItem from '@/components/collaborator/CollaboratorListItem.vue'
 import PromptEntityDelete from '@/components/prompt/PromptEntityDelete.vue'
 import campCollaborationDisplayName from '../../../../common/helpers/campCollaborationDisplayName'
+import isOwnCampCollaboration from './isOwnCampCollaboration.js'
 
 export default {
   name: 'CollaboratorEdit',
@@ -173,10 +174,7 @@ export default {
       )
     },
     isOwnCampCollaboration() {
-      if (!(typeof this.collaborator.user === 'function')) {
-        return false
-      }
-      return this.$store.state.auth.user?.id === this.collaborator.user().id
+      return isOwnCampCollaboration(this.collaborator, this.$store.state.auth)
     },
     name() {
       return campCollaborationDisplayName(this.collaborator, this.$tc.bind(this), false)

frontend/src/components/collaborator/CollaboratorList.vue

@@ -1,18 +1,20 @@
 <template>
   <v-list class="mx-n2">
-    <transition-group v-if="isManager" name="list">
+    <transition-group name="list">
       <div v-for="collaborator in sortedCollaborators" :key="collaborator._meta.self">
-        <CollaboratorEdit :collaborator="collaborator" :inactive="inactive" />
+        <CollaboratorEdit
+          v-if="isManager || isOwnCollaborationMap[collaborator._meta.self]"
+          :collaborator="collaborator"
+          :inactive="inactive"
+        />
+        <CollaboratorListItem
+          v-else
+          :key="collaborator._meta.self"
+          :collaborator="collaborator"
+          :inactive="inactive"
+        />
       </div>
     </transition-group>
-    <template v-else>
-      <CollaboratorListItem
-        v-for="collaborator in sortedCollaborators"
-        :key="collaborator._meta.self"
-        :collaborator="collaborator"
-        :inactive="inactive"
-      />
-    </template>
   </v-list>
 </template>
 
@@ -21,6 +23,7 @@ import CollaboratorEdit from '@/components/collaborator/CollaboratorEdit.vue'
 import CollaboratorListItem from '@/components/collaborator/CollaboratorListItem.vue'
 import { sortBy } from 'lodash-es'
 import campCollaborationDisplayName from '@/common/helpers/campCollaborationDisplayName.js'
+import isOwnCampCollaboration from './isOwnCampCollaboration.js'
 
 const ROLE_ORDER = ['manager', 'member', 'guest']
 
@@ -44,6 +47,17 @@ export default {
           campCollaborationDisplayName(c, this.$tc.bind(this)).toLowerCase()
       )
     },
+
+    isOwnCollaborationMap() {
+      const result = {}
+      this.collaborators.forEach((collaborator) => {
+        result[collaborator._meta.self] = isOwnCampCollaboration(
+          collaborator,
+          this.$store.state.auth
+        )
+      })
+      return result
+    },
   },
 }
 </script>

frontend/src/components/collaborator/PromptCollaboratorDeactivate.vue

@@ -35,6 +35,7 @@ import DialogBase from '@/components/dialog/DialogBase.vue'
 import campCollaborationDisplayName from '@/common/helpers/campCollaborationDisplayName.js'
 import { errorToMultiLineToast } from '@/components/toast/toasts'
 import PopoverPrompt from '@/components/prompt/PopoverPrompt.vue'
+import isOwnCampCollaboration from './isOwnCampCollaboration.js'
 
 export default {
   name: 'PromptCollaboratorDeactivate',
@@ -45,10 +46,7 @@ export default {
   },
   computed: {
     isOwnCampCollaboration() {
-      if (!(typeof this.entity.user === 'function')) {
-        return false
-      }
-      return this.$store.state.auth.user?.id === this.entity.user().id
+      return isOwnCampCollaboration(this.entity, this.$store.state.auth)
     },
     displayName() {
       return campCollaborationDisplayName(this.entity, this.$tc.bind(this))
@@ -65,9 +63,13 @@ export default {
         .catch((e) => this.$toast.error(errorToMultiLineToast(e)))
 
       // User left camp -> navigate to camp-overview
-      promise.then(
-        () => this.isOwnCampCollaboration && this.$router.push({ name: 'camps' })
-      )
+      promise.then(() => {
+        if (!this.isOwnCampCollaboration) {
+          return
+        }
+        this.api.get().camps().$reload()
+        this.$router.push({ name: 'camps' })
+      })
 
       return promise
     },

frontend/src/components/collaborator/isOwnCampCollaboration.js

@@ -0,0 +1,19 @@
+/**
+ * @typedef Collaborator {
+ *   user: () => { id: string },
+ * }
+ *
+ * @typedef Auth {
+ *   user: { id: string },
+ * }
+ *
+ * @param {Collaborator} collaborator
+ * @param {Auth} auth
+ * @returns {boolean}
+ */
+export default function isOwnCampCollaboration(collaborator, auth) {
+  if (!(typeof collaborator.user === 'function')) {
+    return false
+  }
+  return auth.user?.id === collaborator.user().id
+}