Oğuzhan Koral
05e00d2c5c
* chore(acc): put permission gql in correct place * feat(acc): swap to new rvt import * fix(acc): add oda secrets * feat(acc): auth cookies * feat(acc): introduce integrations as workspace setting * feat(acc): create sync item from models * fix(acc): bump * fix(acc): naming lost in merge * feat(acc): no acc tab - table under settings * chore(acc): new sync but will disapper * feat(acc): see statuses over model list * chore(acc): fix return type * chore(acc): type saga * chore(acc): status badge * chore(acc): refactor acc gql (#5556) * checkpoint * fix(acc): refactor gql items * feat(acc): double button * chore(acc): gqlgen * fix(acc): model ids are not project ids * chore(acc): bump function version * chore(acc): split up clients * feat(acc): more-optimised gql folder fetching schema * feat(acc): acc folder contents gql impl * feat(acc): apollo cache optimisations * chore(acc): gqlgen * fix(acc): return something for * fix(acc): handle null values correctly * chore(acc): specify prod functions --------- Co-authored-by: Chuck Driesler <chuck@speckle.systems>
96 lines
2.8 KiB
Vue
96 lines
2.8 KiB
Vue
<template>
|
|
<div class="flex flex-row h-full overflow-hidden border rounded-lg bg-foundation">
|
|
<!-- Left Pane for tree -->
|
|
<div class="w-1/4 p-2 overflow-y-auto border-r">
|
|
<h3 class="font-semibold text-lg text-center">Folders</h3>
|
|
<hr class="mb-1" />
|
|
<div v-if="!rootFolder"></div>
|
|
<ul
|
|
v-else-if="rootFolder && rootFolder.children?.items.length"
|
|
class="space-y-1 pt-1"
|
|
>
|
|
<IntegrationsAccFolderNode
|
|
v-for="folder in rootFolderChildren"
|
|
:key="folder.id"
|
|
:project-id="projectId"
|
|
:folder-id="folder.id"
|
|
:tokens="tokens"
|
|
:selected-folder-id="selectedFolderId"
|
|
@select="onFolderClick"
|
|
/>
|
|
</ul>
|
|
</div>
|
|
<!-- Right Pane for content -->
|
|
<div class="w-3/4 p-2 overflow-y-auto">
|
|
<h3 class="font-semibold text-lg text-center">Files</h3>
|
|
<hr class="mb-1" />
|
|
<IntegrationsAccFolderContents
|
|
v-if="!!selectedFolderId"
|
|
:key="`contents-${selectedFolderId}`"
|
|
:project-id="projectId"
|
|
:folder-id="selectedFolderId"
|
|
:tokens="tokens"
|
|
:selected-file-id="selectedFileId"
|
|
@select="onFileSelected"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { AccTokens } from '@speckle/shared/acc'
|
|
import { ref, watch } from 'vue'
|
|
import { useAcc, type AccItemVersion } from '~/lib/acc/composables/useAccFiles'
|
|
import { useAccFolder } from '~/lib/acc/composables/useAccFolderData'
|
|
|
|
const props = defineProps<{
|
|
hubId: string
|
|
projectId: string
|
|
tokens: AccTokens | undefined
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'file-selected': [fileId: string, fileVersion: AccItemVersion]
|
|
}>()
|
|
|
|
const { init, rootProjectFolderId } = useAcc()
|
|
|
|
const rootFolder = useAccFolder(props.projectId, rootProjectFolderId, props.tokens)
|
|
const rootFolderChildren = computed(
|
|
() =>
|
|
rootFolder.value?.children?.items?.filter(
|
|
(child) => child.name === 'Project Files'
|
|
) ?? []
|
|
)
|
|
|
|
const selectedFolderId = ref<string | undefined>()
|
|
const selectedFileId = ref<string | undefined>()
|
|
|
|
const onFolderClick = async (folderId: string) => {
|
|
selectedFolderId.value = folderId
|
|
selectedFileId.value = undefined
|
|
}
|
|
|
|
const onFileSelected = (fileId: string, fileVersion: AccItemVersion) => {
|
|
selectedFileId.value = fileId
|
|
emit('file-selected', fileId, fileVersion)
|
|
}
|
|
|
|
// Watch for changes in projectId to re-initialize the folder tree
|
|
watch(
|
|
() => props.projectId,
|
|
async (newProjectId) => {
|
|
selectedFolderId.value = undefined
|
|
selectedFileId.value = undefined
|
|
if (newProjectId && props.tokens) {
|
|
await init(props.hubId, newProjectId, props.tokens.access_token)
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
)
|
|
|
|
watch(rootFolderChildren, (newValue) => {
|
|
selectedFolderId.value = newValue.at(0)?.id
|
|
})
|
|
</script>
|