Skip to content

Commit cfd359e

Browse files
aaronziaaronzi
authored
Adds Improvements to handover documentation SMT Plugin (#1102)
1 parent 0da9f46 commit cfd359e

File tree

7 files changed

+260
-207
lines changed

7 files changed

+260
-207
lines changed

‎aas-web-ui/src/components/Plugins/Submodels/HandoverDocumentation_v2_0/HandoverDocumentation_v2_0.vue‎

Lines changed: 56 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515
</template>
1616

1717
<v-list-item-title>
18-
{{ nameToDisplay(document) }}
19-
<DescriptionTooltip :description-array="document?.description" />
18+
{{ getDocumentTitle(document, i) }}
19+
<DescriptionTooltip :description-array="getDescriptionArray(document)" />
2020
</v-list-item-title>
2121
</v-list-item>
2222
</v-expansion-panel-title>
@@ -30,39 +30,35 @@
3030
<!-- Document Versions -->
3131
<template v-if="(document.documentVersionInfo ?? []).length > 0">
3232
<div class="text-caption text-subtitleText">
33-
<template v-if="(document.documentVersionInfo ?? []).length > 0">
34-
<!-- Tabs for document versions- -->
35-
<v-tabs
36-
:model-value="getVersionTab(document)"
37-
density="comfortable"
38-
color="primary"
39-
class="mt-2"
40-
@update:model-value="(val) => setVersionTab(document, val)">
41-
<v-tab
42-
v-for="(versionSmc, v) in document.documentVersionInfo ?? []"
43-
:key="versionSmc.id ?? versionSmc.idShort ?? `version-${v}`"
44-
:value="v">
45-
{{ nameToDisplay(versionSmc) }}
46-
</v-tab>
47-
</v-tabs>
48-
<v-divider class="mt-2" />
49-
<v-window :model-value="getVersionTab(document)" class="mt-3">
50-
<v-window-item
51-
v-for="(versionSmc, v) in document.documentVersionInfo ?? []"
52-
:key="versionSmc.id ?? versionSmc.idShort ?? `version-${v}`"
53-
:value="v">
54-
<div class="pt-4">
55-
<!-- Table for Version Metadata -->
56-
<VersionMetadataTable :version-smc="versionSmc" />
57-
58-
<!-- Tabs for File and Digital Files -->
59-
<VersionAttachments
60-
:version-smc="versionSmc"
61-
:version-index="Number(v)" />
62-
</div>
63-
</v-window-item>
64-
</v-window>
65-
</template>
33+
<!-- Tabs for document versions -->
34+
<v-tabs
35+
:model-value="getVersionTab(document)"
36+
density="comfortable"
37+
color="primary"
38+
class="mt-2"
39+
@update:model-value="(val) => onVersionTabUpdate(document, val)">
40+
<v-tab
41+
v-for="(versionSmc, v) in document.documentVersionInfo ?? []"
42+
:key="versionSmc.id ?? versionSmc.idShort ?? `version-${v}`"
43+
:value="v">
44+
{{ nameToDisplay(versionSmc) }}
45+
</v-tab>
46+
</v-tabs>
47+
<v-divider class="mt-2" />
48+
<v-window :model-value="getVersionTab(document)" class="mt-3">
49+
<v-window-item
50+
v-for="(versionSmc, v) in document.documentVersionInfo ?? []"
51+
:key="versionSmc.id ?? versionSmc.idShort ?? `version-${v}`"
52+
:value="v">
53+
<div class="pt-4">
54+
<!-- Table for Version Metadata -->
55+
<VersionMetadataTable :version-smc="versionSmc" />
56+
57+
<!-- Tabs for File and Digital Files -->
58+
<VersionAttachments :version-smc="versionSmc" />
59+
</div>
60+
</v-window-item>
61+
</v-window>
6662
</div>
6763
</template>
6864

@@ -91,11 +87,13 @@
9187
</template>
9288

9389
<script lang="ts" setup>
90+
import type { DocumentLike, SubmodelElementLike } from './types';
9491
import { onMounted, ref } from 'vue';
9592
import { useReferableUtils } from '@/composables/AAS/ReferableUtils';
9693
import { useSMHandling } from '@/composables/AAS/SMHandling';
9794
import { useSME } from '@/composables/AAS/SubmodelElements/SubmodelElement';
9895
import { getSubmodelElementBySemanticId, getSubmodelElementsBySemanticId } from '@/utils/AAS/SemanticIdUtils';
96+
import { getDescriptionArray, getDisplayTitleOrFallback } from './utils/submodelElementUtils';
9997
10098
defineOptions({
10199
name: 'HandoverDocumentation',
@@ -106,20 +104,17 @@
106104
const { nameToDisplay } = useReferableUtils();
107105
const { hasValue } = useSME();
108106
109-
// Properties
110-
const props = defineProps({
111-
submodelElementData: {
112-
type: Object as any,
113-
default: {} as any,
114-
},
115-
});
107+
// Props
108+
const props = defineProps<{
109+
submodelElementData?: SubmodelElementLike;
110+
}>();
116111
117112
// Data
118113
const isLoading = ref(false);
119-
const handoverDocumentationData = ref({} as any);
114+
const handoverDocumentationData = ref<SubmodelElementLike>({});
120115
const panel = ref(null as number | null);
121-
const documents = ref([] as any);
122-
const documentsSml = ref<any>(null);
116+
const documents = ref<DocumentLike[]>([]);
117+
const documentsSml = ref<SubmodelElementLike | null>(null);
123118
const versionTab = ref<Record<string, number>>({});
124119
125120
onMounted(() => {
@@ -137,7 +132,7 @@
137132
138133
handoverDocumentationData.value = await setData(
139134
{ ...props.submodelElementData },
140-
props.submodelElementData.path
135+
props.submodelElementData.path ?? ''
141136
);
142137
143138
// Get Documents SML
@@ -155,11 +150,11 @@
155150
const documentSmcs = getSubmodelElementsBySemanticId(
156151
'0173-1#02-ABI500#003/0173-1#01-AHF579#003',
157152
documentsSml.value
158-
);
153+
) as SubmodelElementLike[];
159154
documents.value = documentSmcs;
160155
161156
// For each Document → get Document data
162-
documents.value.forEach((doc: any) => {
157+
documents.value.forEach((doc: DocumentLike) => {
163158
//function for Document Versions
164159
extractDocumentVersionInfo(doc);
165160
@@ -175,14 +170,14 @@
175170
const documentIdSmcs = getSubmodelElementsBySemanticId(
176171
'0173-1#02-ABI501#003/0173-1#01-AHF580#003',
177172
documentIdsSml
178-
);
173+
) as SubmodelElementLike[];
179174
180175
doc.documentIds = documentIdSmcs;
181176
});
182177
isLoading.value = false;
183178
}
184179
185-
function extractDocumentVersionInfo(doc: any): void {
180+
function extractDocumentVersionInfo(doc: DocumentLike): void {
186181
// Get Document Version Info SML (container, one per document)
187182
const documentVersionInfoSml = getSubmodelElementBySemanticId('0173-1#02-ABI503#003', doc);
188183
@@ -198,17 +193,24 @@
198193
const documentVersionInfoSmcs = getSubmodelElementsBySemanticId(
199194
'0173-1#02-ABI503#003/0173-1#01-AHF582#003',
200195
documentVersionInfoSml
201-
).filter((sme: any) => hasValue(sme));
196+
).filter((sme: unknown) => hasValue(sme)) as SubmodelElementLike[];
202197
203198
doc.documentVersionInfo = documentVersionInfoSmcs;
204-
return;
205199
}
206-
function getVersionTab(document: any): number {
200+
function getVersionTab(document: DocumentLike): number {
207201
const key = document?.id ?? document?.idShort ?? 'doc';
208202
return versionTab.value[key] ?? 0;
209203
}
210-
function setVersionTab(document: any, index: number): void {
204+
function setVersionTab(document: DocumentLike, index: number): void {
211205
const key = document?.id ?? document?.idShort ?? 'doc';
212206
versionTab.value[key] = index;
213207
}
208+
function onVersionTabUpdate(document: DocumentLike, value: unknown): void {
209+
setVersionTab(document, typeof value === 'number' ? value : 0);
210+
}
211+
212+
function getDocumentTitle(document: DocumentLike, index: number): string {
213+
const documentName = String(nameToDisplay(document) ?? '');
214+
return getDisplayTitleOrFallback(documentName, 'Document', index);
215+
}
214216
</script>

‎aas-web-ui/src/components/Plugins/Submodels/HandoverDocumentation_v2_0/components/DocumentIdsTable.vue‎

Lines changed: 27 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,21 @@
44
<v-table>
55
<thead>
66
<tr>
7-
<th v-for="idProperty in props.documentIds?.[0]?.value ?? []" :key="idProperty.idShort">
7+
<th v-for="idProperty in getHeaderProperties()" :key="idProperty.idShort">
88
<div class="text-caption">
99
<span>{{ nameToDisplay(idProperty) }}</span>
10-
<DescriptionTooltip :description-array="idProperty?.description" />
10+
<DescriptionTooltip :description-array="getDescriptionArray(idProperty)" />
1111
</div>
1212
</th>
1313
</tr>
1414
</thead>
1515

1616
<tbody>
1717
<tr
18-
v-for="(documentIdSMC, j) in getDocumentIds(props.documentIds)"
19-
v-show="hasValue(documentIdSMC)"
18+
v-for="(documentIdSMC, j) in visibleDocumentIds"
2019
:key="documentIdSMC.idShort ?? String(j)"
2120
:class="Number(j) % 2 === 0 ? 'bg-tableEven' : 'bg-tableOdd'">
22-
<td v-for="idProperty in documentIdSMC.value ?? []" :key="idProperty.idShort">
21+
<td v-for="idProperty in getRowProperties(documentIdSMC)" :key="idProperty.idShort">
2322
<!-- MultiLanguageProperty -->
2423
<template v-if="idProperty.modelType === 'MultiLanguageProperty'">
2524
<!-- Show english value, if available -->
@@ -54,8 +53,11 @@
5453
<v-alert v-else class="mt-3" density="compact" type="warning" variant="outlined" text="No Document IDs available" />
5554
</template>
5655
<script lang="ts" setup>
56+
import type { SubmodelElementLike } from '../types';
57+
import { computed } from 'vue';
5758
import { useReferableUtils } from '@/composables/AAS/ReferableUtils';
5859
import { useSME } from '@/composables/AAS/SubmodelElements/SubmodelElement';
60+
import { asSubmodelElementArray, getDescriptionArray, getLangSets } from '../utils/submodelElementUtils';
5961
6062
const { nameToDisplay } = useReferableUtils();
6163
const { hasValue, valueToDisplay } = useSME();
@@ -64,18 +66,27 @@
6466
name: 'DocumentIdsTable',
6567
});
6668
67-
const props = defineProps({
68-
documentIds: {
69-
type: Array as any,
70-
default: () => [],
71-
},
72-
});
69+
const props = withDefaults(
70+
defineProps<{
71+
documentIds?: SubmodelElementLike[];
72+
}>(),
73+
{
74+
documentIds: () => [],
75+
}
76+
);
77+
78+
const visibleDocumentIds = computed(() => props.documentIds.filter((entry) => hasValue(entry)));
7379
74-
// return only entries that have text
75-
function getLangSets(idProperty: any): any[] {
76-
return (idProperty?.value ?? []).filter((ls: any) => ls?.text?.length > 0);
80+
function getHeaderProperties(): SubmodelElementLike[] {
81+
if (props.documentIds.length === 0) {
82+
return [];
83+
}
84+
85+
const firstEntry = props.documentIds[0];
86+
return asSubmodelElementArray(firstEntry.value);
7787
}
78-
function getDocumentIds(documentIds: any): any[] {
79-
return Array.isArray(documentIds) ? documentIds : [];
88+
89+
function getRowProperties(documentIdSMC: SubmodelElementLike): SubmodelElementLike[] {
90+
return asSubmodelElementArray(documentIdSMC.value);
8091
}
8192
</script>

‎aas-web-ui/src/components/Plugins/Submodels/HandoverDocumentation_v2_0/components/FilePreviewRenderer.vue‎

Lines changed: 28 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -29,40 +29,44 @@
2929
</div>
3030
</template>
3131
<script lang="ts" setup>
32+
import type { SubmodelElementLike } from '../types';
3233
import { useSMEFile } from '@/composables/AAS/SubmodelElements/File';
3334
3435
defineOptions({
3536
name: 'FilePreviewRenderer',
3637
});
38+
3739
const { downloadFile } = useSMEFile();
3840
39-
const props = defineProps({
40-
file: {
41-
type: Object as any,
42-
default: null,
43-
},
44-
downloadLabel: {
45-
type: String,
46-
default: 'Download File',
47-
},
48-
});
49-
function isImageFile(file: any): boolean {
50-
return !!file?.contentType && file.contentType.includes('image');
41+
const props = withDefaults(
42+
defineProps<{
43+
file?: SubmodelElementLike | null;
44+
downloadLabel?: string;
45+
}>(),
46+
{
47+
file: null,
48+
downloadLabel: 'Download File',
49+
}
50+
);
51+
52+
function getContentType(file: SubmodelElementLike | null | undefined): string {
53+
return file?.contentType?.toLowerCase() ?? '';
54+
}
55+
56+
function isImageFile(file: SubmodelElementLike | null | undefined): boolean {
57+
return getContentType(file).includes('image');
5158
}
52-
function isPdfFile(file: any): boolean {
53-
return !!file?.contentType && file.contentType.includes('pdf');
59+
60+
function isPdfFile(file: SubmodelElementLike | null | undefined): boolean {
61+
return getContentType(file).includes('pdf');
5462
}
55-
function isCADFile(file: any): boolean {
56-
return (
57-
!!file?.contentType &&
58-
(file.contentType.includes('sla') ||
59-
file.contentType.includes('stl') ||
60-
file.contentType.includes('model') ||
61-
file.contentType.includes('obj') ||
62-
file.contentType.includes('gltf'))
63-
);
63+
64+
function isCADFile(file: SubmodelElementLike | null | undefined): boolean {
65+
const contentType = getContentType(file);
66+
return ['sla', 'stl', 'model', 'obj', 'gltf'].some((type) => contentType.includes(type));
6467
}
65-
function showDownloadButton(file: any): boolean {
68+
69+
function showDownloadButton(file: SubmodelElementLike | null | undefined): boolean {
6670
return !!file?.value;
6771
}
6872
</script>

0 commit comments

Comments
 (0)