HelloWorldPlugin.vue

<template>
  <v-container class="pa-0" fluid>
    <!-- Plugin Title -->
    <v-card class="mb-3">
      <v-card-title>
        <div class="text-body-large">{{ nameToDisplay(submodelElementData) }}</div>
      </v-card-title>
    </v-card>

    <v-card>
      <v-card-text class="pt-1">
        <GenericDataVisu :submodel-element-data="submodelElementData.submodelElements" />
      </v-card-text>
    </v-card>
  </v-container>
</template>

<script lang="ts" setup>
  import { computed, onMounted, ref } from 'vue'
  import { useReferableUtils } from '@/composables/AAS/ReferableUtils'
  import { useSMHandling } from '@/composables/AAS/SMHandling'
  import { useAASStore } from '@/store/AASDataStore'

  defineOptions({
    name: 'HelloWorldPlugin',
    semanticId: 'http://hello.world.de/plugin_submodel',
  })

  // Stores
  const aasStore = useAASStore()

  // Composables
  const { setData } = useSMHandling()
  const { nameToDisplay } = useReferableUtils()

  const props = defineProps({
    submodelElementData: {
      type: Object as any,
      default: {} as any,
    },
  })

  // Data
  const submodelData = ref<any>({})

  // Computed Properties
  const selectedNode = computed(() => aasStore.getSelectedNode)

  onMounted(() => {
    initializePlugin()
  })

  async function initializePlugin (): Promise<void> {
    // Check ig the prop has been passed
    if (!props.submodelElementData || Object.keys(props.submodelElementData).length === 0) {
      return // Return if no data is available
    }

    // Extract the Submodel data as a copy from the prop and save it in a local variable
    const copiedSubmodelData = { ...props.submodelElementData }

    // Calculate the pathes of the child elements and save the data in the mySubmodelData variable
    // Set last parameter `withConceptDescriptions` to true, if Concept Descriptions are needed in the plugin
    submodelData.value = await setData(
      copiedSubmodelData,
      selectedNode.value.path,
      false,
      selectedNode.value.timestamp,
    )
  }
</script>