Kristaps Fabians Geikins
83d8035dc2
* root + server * frontend * frontend-2 * dui3 * dui3 * tailwind theme * ui-components * preview service * viewer * viewer-sandbox * fileimport-service * webhook service * objectloader * shared * ui-components-nuxt * WIP full config * WIP full linter * eslint projectwide util * minor fix * removing redundant ci * clean up test errors * fixed prettier formatting * CI improvements * TSC lint fix * 'buildBatch' needs to be async since some batch types (like Text) require it. Removed a disabled liniting rule from ObjLoader * removed unnecessary void --------- Co-authored-by: AlexandruPopovici <alexandrupopoviciioan@gmail.com>
61 lines
1.6 KiB
Vue
61 lines
1.6 KiB
Vue
<template>
|
|
<div>
|
|
<CommonLoadingBar v-show="loading" :loading="loading" />
|
|
<div class="space-y-1">
|
|
<div v-for="kvp in limitedKvps" :key="kvp.key">
|
|
<ViewerDataviewerRow :prop="kvp" />
|
|
</div>
|
|
<div v-if="limit < kvps.length">
|
|
<FormButton text full-width size="xs" @click="limit += 20">
|
|
show more
|
|
</FormButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { CommonLoadingBar } from '@speckle/ui-components'
|
|
import { useLazyQuery } from '@vue/apollo-composable'
|
|
import { useInjectedViewerState } from '~/lib/viewer/composables/setup'
|
|
import { viewerRawObjectQuery } from '~/lib/viewer/graphql/queries'
|
|
|
|
const { projectId } = useInjectedViewerState()
|
|
|
|
const props = defineProps<{
|
|
object: Record<string, unknown>
|
|
}>()
|
|
|
|
const { result, loading, load } = useLazyQuery(viewerRawObjectQuery, () => ({
|
|
streamId: projectId.value,
|
|
objectId: props.object['referencedId'] as string
|
|
}))
|
|
|
|
if (props.object['referencedId']) {
|
|
load()
|
|
}
|
|
|
|
const kvps = computed(() => {
|
|
const obj = (result.value?.stream?.object?.data || props.object) as Record<
|
|
string,
|
|
unknown
|
|
>
|
|
const keys = Object.keys(obj)
|
|
const localKvps = []
|
|
for (const key of keys) {
|
|
// if (!obj[key]) continue // TODO: deal with null/undef
|
|
const value = obj[key] || obj[key] === 0 ? obj[key] : 'null'
|
|
localKvps.push({
|
|
key,
|
|
value,
|
|
type: Array.isArray(value) ? 'array' : typeof value
|
|
})
|
|
}
|
|
return localKvps
|
|
})
|
|
|
|
const limit = ref(20)
|
|
const limitedKvps = computed(() => {
|
|
return kvps.value.slice(0, limit.value)
|
|
})
|
|
</script>
|