fix:teamspace-setting

render teamname, team permissions from data
het-t · Jul 22, 2024 · 38b24d7 · 38b24d7
1 parent f5dd775
commit 38b24d7
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 7 deletions.
diff --git a/src/ui/components/DialogTeamspaceSettingMembers.vue b/src/ui/components/DialogTeamspaceSettingMembers.vue
@@ -33,7 +33,7 @@
 
                     <span>
                         <base-button style="padding: 0 8px; height: 28px;"
-                        >Full access</base-button>
+                        >{{ getMemberTypeAccessLevel("explicit_team_owner_permission") }}</base-button>
                     </span>
                 </div>
 
@@ -44,7 +44,7 @@
 
                     <span>
                         <base-button style="padding: 0 8px; height: 28px;"
-                        >Full access</base-button>
+                        >{{ getMemberTypeAccessLevel("explicit_team_permission") }}</base-button>
                     </span>
                 </div>
 
@@ -55,7 +55,7 @@
 
                     <span>
                         <base-button style="padding: 0 8px; height: 28px;"
-                        >Full access</base-button>
+                        >{{ getMemberTypeAccessLevel("space_permission") }}</base-button>
                     </span>
                 </div>
             </div>
@@ -115,9 +115,7 @@
                     }}</span>
                 </base-button>
             </div>    
-
         </div>
-
     </div>
 </template>
 
@@ -159,7 +157,7 @@ function handleTeamspaceTypesDisplay() {
 
 const recordValuesStore = useRecordValuesStore();
 
-const { memberships } = recordValuesStore.getRecordValue({
+const { memberships, permissions } = recordValuesStore.getRecordValue({
     id: props.teamId,
     table: "team",
     spaceId: "f2cf1fd1-8789-4ddd-9190-49f41966c446"
@@ -172,4 +170,14 @@ memberships.map(({ user_id: id }) => syncRecordValueFromApi(
     id, 
     "f2cf1fd1-8789-4ddd-9190-49f41966c446"
 ));
+
+function getMemberTypeAccessLevel(memberType) {
+    switch(permissions.find(({ type }) => type === memberType)?.role) {
+        case "editor": return "Full access";
+        case "edit_only": return "Edit";
+        case "comment_only": return "Comment";
+        case "view_only": return "View";
+        default: return "Unknown"
+    }
+}
 </script>
diff --git a/src/ui/views/TeamspaceSetting.vue b/src/ui/views/TeamspaceSetting.vue
@@ -11,7 +11,8 @@
                 <div style="height: 100%; user-select: none;">
                     <div style="display: flex; padding-top: 20px; flex-direction: column; height: 100%; width: 100%;">
                         <div style="display: flex; margin: 0 36px; flex-shrink: 0; align-items: center;">
-                            <div style="font-weight: 600; font-size: 16px;">XDoc</div>
+                            <div style="font-weight: 600; font-size: 16px;"
+                            >{{ teamName }}</div>
                             <div style="flex-grow: 1"></div>
                             <base-button style="padding: 0 16px; border-radius: 13px; font-weight: 600; font-size: 13px; height: 26px;"
                                 :hover-style="{ backgroundColor: 'rgba(55, 53, 47, 0.16)' }"
@@ -93,6 +94,7 @@ import DialogTeamspaceSettingMembers from '../components/DialogTeamspaceSettingM
 import DialogTeamspaceSettingMemberships from '../components/DialogTeamspaceSettingMemberships.vue';
 import DialogTeamspaceTypes from '../components/DialogTeamspaceTypes.vue';
 import { reactive, defineProps, computed } from 'vue';
+import { useRecordValuesStore } from '@/stores/recordValues';
 
 const props = defineProps({
     teamId: {
@@ -101,6 +103,12 @@ const props = defineProps({
     }
 });
 
+const teamName = useRecordValuesStore().getRecordValue({
+    id: props.teamId,
+    table: "team",
+    spaceId: "f2cf1fd1-8789-4ddd-9190-49f41966c446"
+}).name;
+
 const generalStore = useGeneralStore();
 
 const component = computed(() => generalStore.getCurrentComponentAndProps());