space-setting-users

add-user, remove-user
het-t · Jun 9, 2024 · 96d112d · 96d112d
1 parent 7b85a14
commit 96d112d
Show file tree

Hide file tree

Showing 15 changed files with 360 additions and 31 deletions.
diff --git a/src/services/api/getVisibleUsers.ts b/src/services/api/getVisibleUsers.ts
@@ -0,0 +1,13 @@
+import makePostReq from "./makePostReq"
+
+interface args {
+    spaceId: string
+}
+
+export const getVisibleUsers = function({
+    spaceId
+}: args) {
+    return makePostReq("/api/v1/getVisibleUsers", {
+        spaceId
+    });
+}
diff --git a/src/services/api/removeUsersFromSpace.ts b/src/services/api/removeUsersFromSpace.ts
@@ -0,0 +1,22 @@
+import makePostReq from "./makePostReq"
+
+interface args {
+    userIds: string[],
+    spaceId: string,
+    revokePagePermissions: boolean,
+    revokeUserTokens: boolean
+}
+
+export const removeUsersFromSpace = function({
+    userIds,
+    spaceId,
+    revokePagePermissions,
+    revokeUserTokens
+}: args) {
+    return makePostReq("/api/v1/removeUsersFromSpace", {
+        userIds,
+        spaceId,
+        revokePagePermissions,
+        revokeUserTokens
+    });
+}
diff --git a/src/stores/spaceSettings.ts b/src/stores/spaceSettings.ts
@@ -0,0 +1,20 @@
+import { defineStore } from "pinia";
+import { ref, Ref } from "vue";
+
+interface IUserPermission {
+    userId: string,
+    role: "member" | "owner"
+}
+
+export const useSpaceSettingsStore = defineStore("spaceSettings", () => {
+    const visibleUsers: Ref<IUserPermission[]> = ref([]);
+
+    function setVisibleUsers(users: IUserPermission[]) {
+        visibleUsers.value = users;
+    }
+
+    return {
+        visibleUsers, setVisibleUsers,
+
+    }
+})
diff --git a/src/ui/components/MenuLeft.vue b/src/ui/components/MenuLeft.vue
@@ -333,7 +333,7 @@ onBeforeMount(async () => {
     width: 220px;
     height: 100vh;
     box-shadow: rgba(0, 0, 0, 0.024) -1px 0 0 0 inset;
-    background-color: rgb(251, 251, 250);
+    background-color: rgb(247, 247, 245);
     flex-grow: 0;
     flex-shrink: 0;
     position: relative;

diff --git a/src/ui/components/RenderPage.vue b/src/ui/components/RenderPage.vue
@@ -187,11 +187,11 @@ const props = defineProps({
 
 const recordValuesStore = useRecordValuesStore();
 
-const pageRecordValue = recordValuesStore.getRecordValue(
-    props.blockId,
-    "block",
-    "f2cf1fd1-8789-4ddd-9190-49f41966c446"
-)
+const pageRecordValue = recordValuesStore.getRecordValue({
+    id: props.blockId,
+    table: "block",
+    spaceId: "f2cf1fd1-8789-4ddd-9190-49f41966c446"
+})
 
 const pageHeadingText = computed(()  => pageRecordValue?.properties?.title?.[0]?.[0]);
 

diff --git a/src/ui/components/SpaceSettings.vue b/src/ui/components/SpaceSettings.vue
@@ -6,7 +6,7 @@
             @click.stop="closeSpaceSettings"
         ></div>
 
-        <div style="box-shadow: rgba(15, 15, 15, 0.05) 0 0 0 1px, rgba(15, 15, 15, 0.1) 0 5px 10px, rgba(15, 15, 15, 0.2) 0 15px 40px; background: white; position: relative; z-index: 1; border-radius: 12px; width: 1150px; height: calc(100vh - 100px); max-height: 715px; max-width: calc(100vw - 100px);">
+        <div style="overflow: hidden; box-shadow: rgba(15, 15, 15, 0.05) 0 0 0 1px, rgba(15, 15, 15, 0.1) 0 5px 10px, rgba(15, 15, 15, 0.2) 0 15px 40px; background: white; position: relative; z-index: 1; border-radius: 12px; width: 1150px; height: calc(100vh - 100px); max-height: 715px; max-width: calc(100vw - 100px);">
             <div style="height: 100%; display: flex; flex-direction: row;">
                 <!-- menu -->
                 <div style="width: 240px; overflow: hidden auto; flex-shrink: 0;">

diff --git a/src/ui/components/SpaceSettingsContentPeople.vue b/src/ui/components/SpaceSettingsContentPeople.vue
@@ -1,7 +1,7 @@
 <template>
     <space-settings-content-header>People</space-settings-content-header>
 
-    <div style="display: flex; overflow: auto visible; width: 100%; position: relative; box-shadow: rgba(55, 53, 47, 0.09) 0px -1px 0px inset; font-size: 14px; padding-left: 0; padding-right: 0; z-index: 1; margin-top: -6px;"
+    <div style="display: flex; overflow: auto visible; width: 100%; position: relative; font-size: 14px; padding-left: 0; padding-right: 0; z-index: 1; margin-top: -6px;"
         class="hide-scrollbar"
     >
         <div style="padding-top: 6px; padding-bottom: 6px; white-space: nowrap; min-width: 0; flex-shrink: 0; color: rgb(55, 53, 47); position: relative;">
@@ -39,16 +39,30 @@
         </div>
     </div>
 
-    <space-settings-table></space-settings-table>
+    <space-settings-table
+        :data="visibleUsers"
+        :columns="columns"
+        :show-action-btn="true"
+        action-btn-component="dialog_space_setting_people_remove"
+        :freez="true"
+    />
 </template>
 
 <script setup>
 import { useGeneralStore } from '@/stores/general';
 import BaseButton from './BaseButton.vue';
 import SpaceSettingsContentHeader from "./SpaceSettingsContentHeading.vue";
 import SpaceSettingsTable from "./SpaceSettingsTable.vue";
+import { useVisibleUsers } from "../composables/useVisibleUsers";
 
 function showAddMemberDialog() {
     useGeneralStore().setCurrentComponentInDefaultOverlay("space_settings_add_member", {});
 }
+
+const columns = [
+    { name: "User", type: "user", width: "219px" },
+    { name: "Role", type: "select", component: "dialog_space_setting_people_select_role", width: "118.5px" }
+];
+
+const { visibleUsers } = useVisibleUsers({});
 </script>
diff --git a/src/ui/components/SpaceSettingsContentPeopleAddMember.vue b/src/ui/components/SpaceSettingsContentPeopleAddMember.vue
@@ -64,6 +64,7 @@ import { ref } from 'vue';
 import { findUserByEmail } from '@/services/api/findUserByEmail';
 import { useGeneralStore } from '@/stores/general';
 import { createUserByEmail } from '@/services/api/createUserByEmail';
+import { useVisibleUsers } from '../composables/useVisibleUsers';
 
 const inviteesEmails = ref("");
 
@@ -77,12 +78,13 @@ const inviterUserId = transformToStandardUUIDFormat(uuid());
 function enqueueSpaceUserAddTransaction(spaceId, inviteeUserId, inviterUserId) {
     const membershipType = "owner";
     const inviteId = transformToStandardUUIDFormat(uuid());
+    const spaceUserId = inviteeUserId + "|" + spaceId;
 
     const operations = [
         makeOperation(  
-            "set",      
+            "update",      
             {
-                id: transformToStandardUUIDFormat(uuid()),
+                id: inviteId,
                 flow_id: "0bb4ed52-a596-430f-a0e1-aa24677580d2",
                 space_id: spaceId,
                 target_id: spaceId,
@@ -111,17 +113,19 @@ function enqueueSpaceUserAddTransaction(spaceId, inviteeUserId, inviterUserId) {
             }
         ),
         makeOperation(
-            "setPermissionItem",
+            "update",
             {
-                type: "user_permission",
-                role: "editor",
+                id: spaceUserId,
                 user_id: inviteeUserId,
-                invite_id: inviteId
+                space_id: spaceId,
+                invite_id: inviteId,
+                membership_type: membershipType
             },
-            ["permissions"],
+            [],
             {
-                table: "xdoc_space",
-                id: spaceId
+                table: "space_user",
+                id: spaceUserId,
+                spaceId
             }
         )
     ];
@@ -157,4 +161,6 @@ async function spaceSettingsPeopleAdd() {
         inviteesEmails.value = "";
     }
 }
+
+useVisibleUsers({ mounted: false, unmounted: true});
 </script>
diff --git a/src/ui/components/SpaceSettingsDialogPeopleRemove.vue b/src/ui/components/SpaceSettingsDialogPeopleRemove.vue
@@ -0,0 +1,53 @@
+<template>
+    <dialog-view width="275px">
+        <base-collection-side-menu-item
+            @click.stop="spaceMemberRemove"
+            style="margin: 6px 4px; padding-right: 6px; color: rgb(235, 87, 87);"
+        >
+            <template #graphic>
+                <svg role="graphics-symbol" viewBox="0 0 14 15" class="handWave" style="width: 17px; height: 17px; display: block; fill: inherit; flex-shrink: 0;"><path d="M12.223 12.396c.888-.893 1.406-1.886 1.551-2.98.15-1.098-.08-2.288-.69-3.568l-1.552-3.275a2.264 2.264 0 00-.417-.594 1.28 1.28 0 00-.95-.404c-.36 0-.677.135-.95.404a1.211 1.211 0 00-.335.628c-.05.247-.023.502.082.766l.383.91c.013.031.011.056-.007.074-.023.019-.048.016-.075-.006L5.537.625C5.232.32 4.897.167 4.532.167c-.36-.005-.688.144-.984.444a1.115 1.115 0 00-.219.308 1.13 1.13 0 00-.096.349c-.291-.2-.59-.288-.895-.26-.3.023-.574.157-.82.403a1.278 1.278 0 00-.397.827c-.023.306.057.6.24.882a.876.876 0 00-.602.287c-.278.274-.415.584-.41.93.004.346.148.66.43.943l.458.458a.877.877 0 00-.348.09 1.115 1.115 0 00-.308.218 1.32 1.32 0 00-.37.615 1.29 1.29 0 00.021.684 1.6 1.6 0 00.397.635l4.231 4.232c.78.775 1.6 1.294 2.461 1.559.866.264 1.72.28 2.564.047.843-.232 1.622-.706 2.338-1.421zm-.841-.793c-.579.58-1.197.957-1.853 1.135-.651.178-1.317.15-1.996-.082-.674-.228-1.335-.663-1.982-1.305L1.497 7.297a.452.452 0 01-.143-.308.38.38 0 01.13-.3.403.403 0 01.3-.137c.119 0 .223.045.315.136l2.495 2.489a.45.45 0 00.355.15.476.476 0 00.342-.15.478.478 0 00.164-.349.461.461 0 00-.15-.362l-3.733-3.74a.446.446 0 01-.143-.3.38.38 0 01.13-.301.425.425 0 01.307-.137.45.45 0 01.315.137l3.48 3.486c.104.1.225.148.361.144a.476.476 0 00.342-.15c.1-.1.153-.22.157-.356a.47.47 0 00-.143-.362L2.283 2.799a.477.477 0 01-.143-.315.41.41 0 01.136-.307.39.39 0 01.301-.123c.119.004.223.05.315.136l4.04 4.034a.434.434 0 00.348.15.5.5 0 00.349-.15c.1-.1.153-.22.157-.356a.46.46 0 00-.137-.355L4.218 2.08a.425.425 0 01-.137-.308c0-.113.041-.216.123-.307a.41.41 0 01.308-.123c.114 0 .218.045.314.136L9.64 6.292c.136.141.282.212.437.212a.577.577 0 00.403-.178.71.71 0 00.192-.342c.032-.136.011-.298-.062-.485L9.748 3.25a.52.52 0 01-.014-.37.42.42 0 01.22-.232.362.362 0 01.32 0c.1.05.185.149.253.294l1.586 3.377c.52 1.121.702 2.108.547 2.96-.155.853-.58 1.627-1.278 2.325z"></path></svg>
+            </template>
+
+            <template #item
+            >Remove from workspace</template>
+        </base-collection-side-menu-item>
+    </dialog-view>    
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+import DialogView from "./DialogView.vue";
+import BaseCollectionSideMenuItem from "./BaseCollectionSideMenuItem.vue";
+import { removeUsersFromSpace } from "@/services/api/removeUsersFromSpace";
+import { useVisibleUsers } from "../composables/useVisibleUsers";
+import { useGeneralStore } from "@/stores/general";
+
+const props = defineProps({
+    userId: {
+        type: String,
+        required: true
+    },
+    spaceId: {
+        type: String,
+        required: true
+    }
+})
+
+async function spaceMemberRemove() {
+    try {
+        await removeUsersFromSpace({
+            userIds: [props.userId],
+            spaceId: props.spaceId,
+            revokePagePermissions: true,
+            revokeUserTokens: true
+        });
+
+        useGeneralStore().hideCurrentComponent();
+    }
+    catch(err) {
+        console.log(err);
+    }
+}
+
+useVisibleUsers({ mounted: false, unmounted: true});
+</script>
diff --git a/src/ui/components/SpaceSettingsTable.vue b/src/ui/components/SpaceSettingsTable.vue
@@ -4,17 +4,111 @@
             <table style="margin-top: 0px; table-layout: fixed; border-collapse: collapse; min-width: 100%;">
                 <thead>
                     <tr>
-                        <space-settings-table-header style="z-index: 4;">User</space-settings-table-header>
-                        <space-settings-table-header>Group</space-settings-table-header>
-                        <space-settings-table-header>Teamspace</space-settings-table-header>
-                        <space-settings-table-header>Role</space-settings-table-header>
+                        <space-settings-table-header
+                            v-for="(column, index) in props.columns"
+                            :key="column.name+index"
+                            :style="`
+                                width: ${column.width};
+                                ${index === 0 && props.freez ? 'position: sticky; top: 0; left: 0; z-index: 4;' : ''}
+                                ${index === 0 ? 'box-shadow: rgb(233, 233, 231) -1px 0px 0px inset, rgb(233, 233, 231) 0px 1px 0px inset, rgb(233, 233, 231) 0px -1px 0px inset;' : ''}
+                            `"
+                        >{{ column.name }}</space-settings-table-header>
+
+                        <space-settings-table-header :empty="true" style="padding: 0 !important;"></space-settings-table-header>
                     </tr>
                 </thead>
+
+                <tbody>
+                    <tr 
+                        v-for="(item, itemIndex) in props.data"
+                        :key="itemIndex"
+                        style="height: 1px; border-bottom: solid 1px rgb(233, 233, 231);"
+                    >
+                        <td 
+                            v-for="(column, columnIndex) in props.columns"
+                            :key="itemIndex + columnIndex"
+                            style="padding-left: 5px; padding-right: 5px;"
+                            :style='(props.freez && columnIndex === 0) ? { boxShadow: "rgb(233, 233, 231) -1px 0px 0px inset", position: "sticky", top: "0px", left: "0px", zIndex: 2, background: "white", paddingRight: "15px", width: column.width }: { width: column.width }'
+                        >
+                            <space-settings-table-cell-user 
+                                v-if="column.type === 'user'"
+                                :userId="item.userId"
+                            />
+
+                            <space-settings-table-cell-select 
+                                v-else-if="column.type === 'select'"
+                            >{{ item.role }}</space-settings-table-cell-select>
+                        </td>
+
+                        <td v-if="props.showActionBtn"
+                            style="padding-left: 5px; padding-right: 5px; width: 51px;"
+                        >
+                            <div style="min-width: 51px; font-size: 14px; color: rgb(55, 53, 47); min-height: 42px; display: flex; align-items: center; height: 100%;">
+                                <div style="width: 100%; display: flex; justify-content: flex-end;">
+                                    <base-button style="height: 24px; width: 24px;"
+                                        @click.stop="showDialogRemoveUser($event, item)"
+                                    >
+                                        <svg role="graphics-symbol" viewBox="0 0 16 16" class="ellipsis" style="width: 20px; height: 20px; display: block; fill: rgb(145, 145, 142); flex-shrink: 0;"><path d="M2.887 9.014c.273 0 .52-.064.738-.192.219-.132.394-.307.526-.526.133-.219.199-.46.199-.725 0-.405-.142-.747-.424-1.025a1.41 1.41 0 00-1.04-.417c-.264 0-.505.066-.724.198a1.412 1.412 0 00-.718 1.244c0 .265.064.506.192.725.132.219.307.394.526.526.219.128.46.192.725.192zm5.113 0a1.412 1.412 0 001.244-.718c.132-.219.198-.46.198-.725 0-.405-.14-.747-.423-1.025A1.386 1.386 0 008 6.129c-.264 0-.506.066-.725.198a1.412 1.412 0 00-.718 1.244c0 .265.064.506.192.725.132.219.308.394.526.526.22.128.46.192.725.192zm5.106 0c.265 0 .506-.064.725-.192.219-.132.394-.307.526-.526.133-.219.199-.46.199-.725 0-.405-.142-.747-.424-1.025a1.394 1.394 0 00-1.026-.417 1.474 1.474 0 00-1.265.718c-.127.218-.19.46-.19.724 0 .265.063.506.19.725.133.219.308.394.527.526.223.128.47.192.738.192z"></path></svg>
+                                    </base-button>
+                                </div>
+                            </div>
+                        </td>
+                    </tr>
+                </tbody>
             </table>
         </div>
     </div>
 </template>
 
 <script setup>
+import SpaceSettingsTableCellSelect from "./SpaceSettingsTableCellSelect.vue";
+import SpaceSettingsTableCellUser from './SpaceSettingsTableCellUser.vue';
 import SpaceSettingsTableHeader from './SpaceSettingsTableHeader.vue';
-</script>
+import BaseButton from "./BaseButton.vue";
+import { defineProps } from 'vue';
+import { useGeneralStore } from "@/stores/general";
+
+const props = defineProps({
+    data: {
+        type: Array,
+        default: () => []
+    },
+    columns: {
+        type: Array,
+        default: () => []
+    },
+    freez: {
+        type: Boolean,
+        default: false
+    },
+    showActionBtn: {
+        type: Boolean,
+        default: true
+    },
+    actionBtnComponent: {
+        type: String,
+        default: ""
+    }
+})
+
+function showDialogRemoveUser(e, item) {
+    const generalStore = useGeneralStore();
+
+    const measures = e.target.getBoundingClientRect();
+
+    generalStore.dialog.top = measures.top;
+    generalStore.dialog.left = measures.left;
+
+    generalStore.setCurrentComponentInDefaultOverlay(
+        props.actionBtnComponent,    
+        item
+    );
+}
+</script>
+
+<style scoped>
+tr td:nth-child(2),
+tr th:nth-child(2) {
+    padding-left: 15px !important;
+}
+</style>
diff --git a/src/ui/components/SpaceSettingsTableCellSelect.vue b/src/ui/components/SpaceSettingsTableCellSelect.vue
@@ -0,0 +1,4 @@
+<template>
+    <div style="color: rgb(120, 119, 116);"
+    ><slot></slot></div>
+</template>