Only list projects where you are the owner that dont belong to a WS a…

…lready
specklesystems · Jan 15, 2025 · 3f08c4a · 3f08c4a
1 parent 676b2b7
commit 3f08c4a
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 116 deletions.
diff --git a/packages/frontend-2/components/workspace/MoveProjectsDialog.vue b/packages/frontend-2/components/workspace/MoveProjectsDialog.vue
@@ -5,44 +5,46 @@
     title="Move projects to workspace"
     :buttons="buttons"
   >
-    <div
-      v-if="hasMoveableProjects"
-      class="flex flex-col mt-2 border rounded-md border-outline-3"
-    >
-      <div
-        v-for="project in moveableProjects"
-        :key="project.id"
-        class="flex px-4 py-3 items-center space-x-2 justify-between border-b last:border-0 border-outline-3"
-      >
-        <div class="flex flex-col flex-1 truncate text-body-xs">
-          <span class="font-medium text-foreground truncate">
-            {{ project.name }}
-          </span>
-          <span class="text-foreground-3 truncate">
-            {{ project.modelCount.totalCount }} model{{
-              project.modelCount.totalCount !== 1 ? 's' : ''
-            }}, {{ project.versions.totalCount }} version{{
-              project.versions.totalCount !== 1 ? 's' : ''
-            }}
-          </span>
-        </div>
-        <span
-          v-tippy="
-            project.role !== Roles.Stream.Owner &&
-            'Only the project owner can move this project'
-          "
+    <template v-if="result?.activeUser?.projects?.totalCount">
+      <div class="flex flex-col mt-2 border rounded-md border-outline-3">
+        <div
+          v-for="project in result?.activeUser?.projects?.items"
+          :key="project.id"
+          class="flex px-4 py-3 items-center space-x-2 justify-between border-b last:border-0 border-outline-3"
         >
-          <FormButton
-            :disabled="project.role !== Roles.Stream.Owner"
-            size="sm"
-            color="outline"
-            @click="onMoveClick(project)"
+          <div class="flex flex-col flex-1 truncate text-body-xs">
+            <span class="font-medium text-foreground truncate">
+              {{ project.name }}
+            </span>
+            <span class="text-foreground-3 truncate">
+              {{ project.modelCount.totalCount }} model{{
+                project.modelCount.totalCount !== 1 ? 's' : ''
+              }}, {{ project.versions.totalCount }} version{{
+                project.versions.totalCount !== 1 ? 's' : ''
+              }}
+            </span>
+          </div>
+          <span
+            v-tippy="
+              project.role !== Roles.Stream.Owner &&
+              'Only the project owner can move this project'
+            "
           >
-            Move...
-          </FormButton>
-        </span>
+            <FormButton
+              :disabled="project.role !== Roles.Stream.Owner"
+              size="sm"
+              color="outline"
+              @click="onMoveClick(project)"
+            >
+              Move...
+            </FormButton>
+          </span>
+        </div>
       </div>
-    </div>
+
+      <InfiniteLoading :settings="{ identifier }" @infinite="onInfiniteLoad" />
+    </template>
+
     <p v-else class="py-4 text-body-xs text-foreground-2">
       You don't have any projects that can be moved into this workspace. Only projects
       you own and that aren't in another workspace can be moved.
@@ -51,7 +53,6 @@
     <ProjectsMoveToWorkspaceDialog
       v-if="selectedProject"
       v-model:open="showMoveToWorkspaceDialog"
-      :workspace="workspace"
       :project="selectedProject"
       event-source="move-projects-dialog"
     />
@@ -61,73 +62,54 @@
 import type { LayoutDialogButton } from '@speckle/ui-components'
 import { graphql } from '~~/lib/common/generated/gql'
 import type {
-  MoveProjectsDialog_WorkspaceFragment,
-  ProjectsMoveToWorkspaceDialog_ProjectFragment
+  ProjectsMoveToWorkspaceDialog_ProjectFragment,
+  MoveProjectsDialogQuery
 } from '~~/lib/common/generated/gql/graphql'
-import { useQuery } from '@vue/apollo-composable'
 import { moveProjectsDialogQuery } from '~~/lib/workspaces/graphql/queries'
-import { Roles } from '@speckle/shared'
-
-graphql(`
-  fragment MoveProjectsDialog_Workspace on Workspace {
-    id
-    ...ProjectsMoveToWorkspaceDialog_Workspace
-    projects {
-      items {
-        id
-        modelCount: models(limit: 0) {
-          totalCount
-        }
-        versions(limit: 0) {
-          totalCount
-        }
-      }
-    }
-  }
-`)
+import { usePaginatedQuery } from '~/lib/common/composables/graphql'
+import { Roles, type Nullable } from '@speckle/shared'
 
 graphql(`
   fragment MoveProjectsDialog_User on User {
-    projects {
+    projects(limit: $limit, cursor: $cursor, filter: $filter) {
+      totalCount
       items {
         ...ProjectsMoveToWorkspaceDialog_Project
         role
-        workspace {
-          id
-        }
       }
     }
   }
 `)
 
-const props = defineProps<{
-  workspace: MoveProjectsDialog_WorkspaceFragment
-}>()
-
 const open = defineModel<boolean>('open', { required: true })
 
-const { result } = useQuery(moveProjectsDialogQuery)
+const {
+  query: { result },
+  identifier,
+  onInfiniteLoad
+} = usePaginatedQuery({
+  query: moveProjectsDialogQuery,
+  baseVariables: computed(() => ({
+    filter: {
+      workspaceId: null,
+      onlyWithRoles: [Roles.Stream.Owner]
+    },
+    cursor: null as Nullable<string>,
+    limit: 10
+  })),
+  resolveKey: () => 'move-projects-dialog',
+  resolveCurrentResult: (result: MoveProjectsDialogQuery | undefined) =>
+    result?.activeUser?.projects,
+  resolveNextPageVariables: (baseVariables, newCursor) => ({
+    ...baseVariables,
+    cursor: newCursor
+  }),
+  resolveCursorFromVariables: (vars) => vars.cursor
+})
 
 const selectedProject = ref<ProjectsMoveToWorkspaceDialog_ProjectFragment | null>(null)
 const showMoveToWorkspaceDialog = ref(false)
 
-const workspaceProjects = computed(() =>
-  props.workspace.projects.items.map((project) => project.id)
-)
-const userProjects = computed(() => result.value?.activeUser?.projects.items || [])
-const projectsWithWorkspace = computed(() =>
-  userProjects.value
-    .filter((project) => !!project.workspace?.id)
-    .map((project) => project.id)
-)
-const moveableProjects = computed(() =>
-  userProjects.value.filter(
-    (project) =>
-      !workspaceProjects.value.includes(project.id) &&
-      !projectsWithWorkspace.value.includes(project.id)
-  )
-)
-const hasMoveableProjects = computed(() => moveableProjects.value.length > 0)
 const buttons = computed((): LayoutDialogButton[] => [
   {
     text: 'Done',

diff --git a/packages/frontend-2/components/workspace/ProjectList.vue b/packages/frontend-2/components/workspace/ProjectList.vue
@@ -120,7 +120,6 @@ graphql(`
     ...WorkspaceSecurity_Workspace
     ...BillingAlert_Workspace
     ...WorkspaceMixpanelUpdateGroup_Workspace
-    ...MoveProjectsDialog_Workspace
     ...InviteDialogWorkspace_Workspace
     projects {
       ...WorkspaceProjectList_ProjectCollection