Enhances Download AAS Window

aas-web-ui/src/components.d.ts

@@ -40,6 +40,7 @@ declare module 'vue' {
     DescriptionTooltip: typeof import('./components/UIComponents/DescriptionTooltip.vue')['default']
     DisplayField: typeof import('./components/Widgets/DisplayField.vue')['default']
     DisplayNameElement: typeof import('./components/UIComponents/DisplayNameElement.vue')['default']
+    DownloadAAS: typeof import('./components/AppNavigation/DownloadAAS.vue')['default']
     Entity: typeof import('./components/SubmodelElements/Entity.vue')['default']
     File: typeof import('./components/SubmodelElements/File.vue')['default']
     FileForm: typeof import('./components/EditorComponents/SubmodelElements/FileForm.vue')['default']

aas-web-ui/src/components/AppNavigation/AASList.vue

@@ -199,7 +199,7 @@
                                         </template>
                                         <v-sheet border>
                                             <v-list dense slim density="compact" class="py-0">
-                                                <v-list-item @click="downloadAasx(item)">
+                                                <v-list-item @click="openDownloadDialog(item)">
                                                     <template #prepend>
                                                         <v-icon size="x-small">mdi-download</v-icon>
                                                     </template>
@@ -244,7 +244,7 @@
                                             color="listItemText"
                                             class="ml-n2"
                                             style="z-index: 9000"
-                                            @click.stop="downloadAasx(item)"></v-btn>
+                                            @click.stop="openDownloadDialog(item)"></v-btn>
                                         <!-- Remove from AAS Registry Button -->
                                         <v-btn
                                             icon="mdi-close"
@@ -282,6 +282,8 @@
     <UploadAAS v-model="uploadAASDialog"></UploadAAS>
     <!-- Dialog for deleting AAS -->
     <DeleteAAS v-model="deleteDialog" :aas="aasToDelete" :list-loading-state="listLoading"></DeleteAAS>
+    <!-- Dialog for downloading AAS -->
+    <DownloadAAS v-model="downloadAASDialog" :aas="aasToDownload"></DownloadAAS>
 </template>
 
 <script lang="ts" setup>
@@ -292,7 +294,6 @@
     import { useTheme } from 'vuetify';
     import { useAASHandling } from '@/composables/AAS/AASHandling';
     import { useReferableUtils } from '@/composables/AAS/ReferableUtils';
-    import { useAASRepositoryClient } from '@/composables/Client/AASRepositoryClient';
     import { useClipboardUtil } from '@/composables/ClipboardUtil';
     import { useAASStore } from '@/store/AASDataStore';
     import { useEnvStore } from '@/store/EnvironmentStore';
@@ -308,7 +309,6 @@
     const router = useRouter();
 
     // Composables
-    const { downloadAasx } = useAASRepositoryClient();
     const { fetchAasDescriptorList, fetchAasList, aasIsAvailableById } = useAASHandling();
     const { nameToDisplay, descriptionToDisplay } = useReferableUtils();
     const { copyToClipboard } = useClipboardUtil();
@@ -322,12 +322,14 @@
     const theme = useTheme();
 
     // Data
     const aasList = ref([] as Array<any>) as Ref<Array<any>>; // Variable to store the AAS Data (AAS or AAS Descriptors)
     const aasListUnfiltered = ref([] as Array<any>) as Ref<Array<any>>; // Variable to store the AAS Data before filtering
     const debouncedFilterAasList = debounce(filterAasList, 300); // Debounced function to filter the AAS List
     const listLoading = ref(false); // Variable to store if the AAS List is loading
     const deleteDialog = ref(false); // Variable to store if the Delete Dialog should be shown
+    const downloadAASDialog = ref(false); // Variable to store if the DownloadAAS Dialog should be shown
     const aasToDelete = ref({}); // Variable to store the AAS to be deleted
+    const aasToDownload = ref({}); // Variable to store the AAS to be downloaded
     const virtualScrollRef: Ref<VirtualScrollInstance | null> = ref(null); // Reference to the Virtual Scroll Component
     const uploadAASDialog = ref(false); // Variable to store if the Upload AAS Dialog should be shown
     const editDialog = ref(false); // Variable to store if the Edit Dialog should be shown
@@ -579,6 +581,11 @@
         aasToDelete.value = aasOrAasDescriptor;
     }
 
+    function openDownloadDialog(aasDescriptor: any): void {
+        downloadAASDialog.value = true;
+        aasToDownload.value = aasDescriptor;
+    }
+
     function openEditDialog(createNew: boolean, aasOrAasDescriptor?: any): void {
         editDialog.value = true;
         newShell.value = createNew;

aas-web-ui/src/components/AppNavigation/DownloadAAS.vue

@@ -0,0 +1,143 @@
+<template>
+    <v-dialog v-model="downloadDialog" max-width="500px">
+        <v-card>
+            <v-card-title>Configure AASX Package</v-card-title>
+            <v-divider></v-divider>
+            <v-card-text class="pb-0">
+                <div>You selected the AAS with the ID</div>
+                <span class="text-primary font-weight-bold">{{ aas.id }}</span>
+                <span> for download.</span><br />
+                <v-sheet border rounded class="mt-4">
+                    <v-data-table-virtual
+                        v-model="selected"
+                        density="compact"
+                        :headers="headers"
+                        :items="submodelIds"
+                        style="overflow-y: auto; max-height: 300px"
+                        item-value="smId"
+                        fixed-header
+                        show-select>
+                        <template #[`header.smId`]>
+                            <div class="font-weight-bold">Submodel</div>
+                        </template>
+                        <template #[`item.smId`]="{ item }">
+                            <div>
+                                {{ nameToDisplay(item.submodel) }}
+                            </div>
+                            <div class="text-medium-emphasis">
+                                {{ item.smId }}
+                            </div>
+                        </template>
+                    </v-data-table-virtual>
+                </v-sheet>
+                <v-checkbox v-model="downloadCDs" label="Also download Concept Descriptions" hide-details></v-checkbox>
+            </v-card-text>
+            <v-divider></v-divider>
+            <v-card-actions>
+                <v-spacer></v-spacer>
+                <v-btn @click="downloadDialog = false">Cancel</v-btn>
+                <v-btn variant="tonal" color="primary" :loading="downloadLoading" @click="download">Download</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script lang="ts" setup>
+    import { ref, watch } from 'vue';
+    import { useReferableUtils } from '@/composables/AAS/ReferableUtils';
+    import { useAASRepositoryClient } from '@/composables/Client/AASRepositoryClient';
+    import { useSMRepositoryClient } from '@/composables/Client/SMRepositoryClient';
+    import { useIDUtils } from '@/composables/IDUtils';
+    import { useRequestHandling } from '@/composables/RequestHandling';
+    import { base64Encode } from '@/utils/EncodeDecodeUtils';
+    import { downloadFile } from '@/utils/generalUtils';
+
+    const { getSubmodelRefsById } = useAASRepositoryClient();
+    const { fetchSmById } = useSMRepositoryClient();
+    const { generateUUIDFromString } = useIDUtils();
+    const { nameToDisplay } = useReferableUtils();
+
+    const { getRequest } = useRequestHandling();
+
+    const props = defineProps<{
+        modelValue: boolean;
+        aas: any;
+    }>();
+
+    const emit = defineEmits<{
+        (event: 'update:modelValue', value: boolean): void;
+    }>();
+
+    const downloadDialog = ref(false);
+    const downloadLoading = ref(false);
+
+    const headers = [{ title: 'Submodel', align: 'start', sortable: false, key: 'smId' }] as any;
+
+    const selected = ref<string[]>([]);
+    const submodelIds = ref<any[]>([]);
+    const downloadEndpoint = ref<string>('');
+    const downloadCDs = ref<boolean>(true);
+
+    watch(
+        () => props.modelValue,
+        async (value) => {
+            downloadDialog.value = value;
+            selected.value = [];
+            submodelIds.value = [];
+            downloadEndpoint.value = '';
+            downloadCDs.value = true;
+            downloadLoading.value = false;
+            if (!props.aas) return;
+            const submodelRefs = await getSubmodelRefsById(props.aas.id);
+            downloadEndpoint.value = props.aas.endpoints[0].protocolInformation.href.split('/shells')[0];
+            for (const submodelRef of submodelRefs) {
+                const submodel = await fetchSmById(submodelRef.keys[0].value);
+                submodelIds.value.push({ smId: submodelRef.keys[0].value, smIdShort: submodel.idShort, submodel });
+                selected.value.push(submodelRef.keys[0].value);
+            }
+        }
+    );
+
+    watch(
+        () => downloadDialog.value,
+        (value) => {
+            emit('update:modelValue', value);
+        }
+    );
+
+    async function download(): Promise<void> {
+        downloadLoading.value = true;
+        let aasSerializationPath = downloadEndpoint.value;
+        aasSerializationPath +=
+            '/serialization?aasIds=' +
+            base64Encode(props.aas.id) +
+            '&submodelIds=' +
+            selected.value.map((submodelId: string) => base64Encode(submodelId)).join('&submodelIds=') +
+            '&includeConceptDescriptions=' +
+            (downloadCDs.value || true);
+
+        const aasSerializationContext = 'retrieving AAS serialization';
+        const disableMessage = false;
+        const aasSerializationHeaders = new Headers();
+        aasSerializationHeaders.append('Accept', 'application/asset-administration-shell-package+xml');
+
+        const aasSerializationResponse = await getRequest(
+            aasSerializationPath,
+            aasSerializationContext,
+            disableMessage,
+            aasSerializationHeaders
+        );
+        if (aasSerializationResponse.success) {
+            const aasSerialization = aasSerializationResponse.data;
+
+            const aasIdShort = props.aas.idShort;
+
+            const filename =
+                (aasIdShort && aasIdShort.trim() !== '' ? aasIdShort.trim() : generateUUIDFromString(props.aas.id)) +
+                '.aasx';
+
+            downloadFile(filename, aasSerialization);
+            downloadLoading.value = false;
+        }
+    }
+</script>