-
Notifications
You must be signed in to change notification settings - Fork 181
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(fe2): workspace project list (#2616)
* Create and Use ProjectList * ProjectList and WorkspaceList * Workspace Header * Header Actions Menu * Add projects to Workspace * Add middleware * Remove unused title * Rename WorkspaceList * useDebouncedSearch * Merge ProjectList into Dashboard * Make workspaceId reactive * Remove unneeded useSubscription * Merge Dashboard into index * Add fragments * Cache updates * gql * GQL * Linting updates * Updates from CR * Changes from CR * Changes from PR. Middleware added * Updates from CR * GQL * Updates from CR * Updates from CR * Updates from CR * Add id to WorkspaceHeader_Workspace * GQL * Fragment naming * Use identifier * Comment buttons not yet ready * Fix problem with pagination
- Loading branch information
1 parent
afe1d19
commit e3f9037
Showing
15 changed files
with
532 additions
and
79 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
134 changes: 134 additions & 0 deletions
134
packages/frontend-2/components/workspace/ProjectList.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,134 @@ | ||
| <template> | ||
| <div> | ||
| <WorkspaceHeader | ||
| v-if="workspace" | ||
| :icon="Squares2X2Icon" | ||
| :workspace-info="workspace" | ||
| /> | ||
| <div class="flex flex-col gap-4 mt-4"> | ||
| <div class="flex flex-col sm:flex-row gap-2 sm:items-center justify-between"> | ||
| <div class="flex flex-col sm:flex-row gap-2"> | ||
| <FormTextInput | ||
| name="modelsearch" | ||
| :show-label="false" | ||
| placeholder="Search..." | ||
| :custom-icon="MagnifyingGlassIcon" | ||
| color="foundation" | ||
| wrapper-classes="grow md:grow-0 md:w-60" | ||
| show-clear | ||
| v-bind="bind" | ||
| v-on="on" | ||
| ></FormTextInput> | ||
| </div> | ||
| <FormButton v-if="!isGuest" @click="openNewProject = true"> | ||
| New project | ||
| </FormButton> | ||
| </div> | ||
| </div> | ||
|
|
||
| <CommonLoadingBar :loading="showLoadingBar" class="my-2" /> | ||
|
|
||
| <ProjectsDashboardEmptyState | ||
| v-if="showEmptyState" | ||
| @create-project="openNewProject = true" | ||
| /> | ||
|
|
||
| <template v-else-if="projects?.items?.length"> | ||
| <ProjectsDashboardFilled :projects="projects" /> | ||
| <InfiniteLoading :settings="{ identifier }" @infinite="onInfiniteLoad" /> | ||
| </template> | ||
|
|
||
| <CommonEmptySearchState v-else-if="!showLoadingBar" @clear-search="clearSearch" /> | ||
|
|
||
| <ProjectsAddDialog v-model:open="openNewProject" :workspace-id="workspaceId" /> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { MagnifyingGlassIcon, Squares2X2Icon } from '@heroicons/vue/24/outline' | ||
| import { useQuery, useQueryLoading } from '@vue/apollo-composable' | ||
| import { useActiveUser } from '~~/lib/auth/composables/activeUser' | ||
| import type { Optional, StreamRoles } from '@speckle/shared' | ||
| import { | ||
| workspacePageQuery, | ||
| workspaceProjectsQuery | ||
| } from '~~/lib/workspaces/graphql/queries' | ||
| import { useDebouncedTextInput } from '@speckle/ui-components' | ||
| import { usePaginatedQuery } from '~/lib/common/composables/graphql' | ||
| import { graphql } from '~~/lib/common/generated/gql' | ||
| import type { | ||
| WorkspaceProjectList_ProjectCollectionFragment, | ||
| WorkspaceProjectsQueryQueryVariables | ||
| } from '~~/lib/common/generated/gql/graphql' | ||
| graphql(` | ||
| fragment WorkspaceProjectList_ProjectCollection on ProjectCollection { | ||
| totalCount | ||
| items { | ||
| ...ProjectDashboardItem | ||
| } | ||
| cursor | ||
| } | ||
| `) | ||
| const selectedRoles = ref(undefined as Optional<StreamRoles[]>) | ||
| const openNewProject = ref(false) | ||
| const { isGuest } = useActiveUser() | ||
| const areQueriesLoading = useQueryLoading() | ||
| const props = defineProps<{ | ||
| workspaceId: string | ||
| }>() | ||
| const { | ||
| on, | ||
| bind, | ||
| value: search | ||
| } = useDebouncedTextInput({ | ||
| debouncedBy: 800 | ||
| }) | ||
| const { result: initialQueryResult } = useQuery(workspacePageQuery, { | ||
| workspaceId: props.workspaceId, | ||
| filter: { | ||
| search: (search.value || '').trim() || null | ||
| } | ||
| }) | ||
| const { query, identifier, onInfiniteLoad } = usePaginatedQuery< | ||
| { workspace: { projects: WorkspaceProjectList_ProjectCollectionFragment } }, | ||
| WorkspaceProjectsQueryQueryVariables | ||
| >({ | ||
| query: workspaceProjectsQuery, | ||
| baseVariables: computed(() => ({ | ||
| workspaceId: props.workspaceId, | ||
| filter: { | ||
| search: (search.value || '').trim() || null | ||
| } | ||
| })), | ||
| resolveKey: (vars: WorkspaceProjectsQueryQueryVariables) => ({ | ||
| workspaceId: vars.workspaceId, | ||
| search: vars.filter?.search || '' | ||
| }), | ||
| resolveInitialResult: () => initialQueryResult.value?.workspace.projects, | ||
| resolveCurrentResult: (result) => result?.workspace?.projects, | ||
| resolveNextPageVariables: (baseVariables, newCursor) => ({ | ||
| ...baseVariables, | ||
| cursor: newCursor | ||
| }), | ||
| resolveCursorFromVariables: (vars) => vars.cursor | ||
| }) | ||
| const workspace = computed(() => initialQueryResult.value?.workspace) | ||
| const projects = computed(() => query.result.value?.workspace?.projects) | ||
| const showEmptyState = computed(() => !projects.value?.items?.length) | ||
| const showLoadingBar = computed(() => { | ||
| return areQueriesLoading.value && (!!search.value || !projects.value?.items?.length) | ||
| }) | ||
| const clearSearch = () => { | ||
| search.value = '' | ||
| selectedRoles.value = [] | ||
| } | ||
| </script> |
Oops, something went wrong.