updating structure of plugins, adding file reading capability

components.d.ts

@@ -9,7 +9,6 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     Dashboards: typeof import('./src/components/Dashboards.vue')['default']
-    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
     Home: typeof import('./src/components/Home.vue')['default']
     Interfaces: typeof import('./src/components/Interfaces.vue')['default']
     Navigation: typeof import('./src/components/Navigation.vue')['default']

src/main.ts

@@ -17,7 +17,8 @@
 
 app.use(vuetify).use(router);
 
-const pluginFiles = require.context('./plugins', false, /\.ts$/);
+// parameters: root, recursive, file to match
+const pluginFiles = require.context('./plugins', true, /\.ts$/);
 
 pluginFiles.keys().forEach((filePath: string) => {
   const plugin = pluginFiles(filePath).default; // Get the default export of the plugin
@@ -29,12 +30,12 @@
 });
 
 // provide all global components
 const exportComponents = Object.fromEntries(Object.entries(app._context.components).filter(([key, value]) => key.includes("Export")));
 const importComponents = Object.fromEntries(Object.entries(app._context.components).filter(([key, value]) => key.includes("Import")));
 
 console.log(exportComponents);
 app.provide('exportComponents', exportComponents);
 console.log(importComponents);
 app.provide('importComponents', importComponents);
 
 app.mount('#app');

src/plugins/Exports/JsonExportPlugin.vue

@@ -0,0 +1,28 @@
+<template>
+    <v-btn color='secondary' @click='dialog = true'>Export JSON</v-btn>
+    <v-dialog v-model='dialog'>
+        <v-card>
+            <v-card-title>Select Export Elements</v-card-title>
+            <v-card-text>TBD...</v-card-text>
+            <v-card-actions>
+                <v-btn color='red' @click='dialog = false'>Close</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script lang='ts'>
+import { Options, Vue } from 'vue-class-component';
+
+@Options({
+  data() {
+    return {
+        dialog: false
+    }
+  }
+})
+
+export default class JsonExportComponent extends Vue {}
+</script>
+
+<style scoped></style>

src/plugins/Exports/RdfExportPlugin.vue

@@ -0,0 +1,28 @@
+<template>
+    <v-btn color='secondary' @click='dialog = true'>Export RDF</v-btn>
+    <v-dialog v-model='dialog'>
+        <v-card>
+            <v-card-title>Select Export Elements</v-card-title>
+            <v-card-text>TBD...</v-card-text>
+            <v-card-actions>
+                <v-btn color='red' @click='dialog = false'>Close</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from 'vue-class-component';
+
+@Options({
+  data() {
+    return {
+        dialog: false
+    }
+  }
+})
+
+export default class RdfExportComponent extends Vue {}
+</script>
+
+<style scoped></style>

src/plugins/Exports/json-export-plugin.ts

@@ -0,0 +1,19 @@
+import { App, Plugin } from 'vue';
+import JsonExportComponent from "./JsonExportPlugin.vue"
+
+const jsonExportPlugin: Plugin = {
+    install(app: App) {
+        // global property
+        // app.config.globalProperties.$definedproperty = 'Example Global Property';
+
+        // global method
+        // app.config.globalProperties.$definedMethods = () => {
+        //   console.log('Example Method');
+        // };
+
+        // global component
+        app.component('JsonExportComponent', JsonExportComponent);
+    }
+}
+
+export default jsonExportPlugin;

src/plugins/Exports/rdf-export-plugin.ts

@@ -0,0 +1,19 @@
+import { App, Plugin } from 'vue';
+import RdfExportComponent from "./RdfExportPlugin.vue"
+
+const rdfExportPlugin: Plugin = {
+    install(app: App, options?) {
+        // global property
+        // app.config.globalProperties.$definedproperty = 'Example Global Property';
+
+        // global method
+        // app.config.globalProperties.$definedMethods = () => {
+        //   console.log('Example Method');
+        // };
+
+        // global component
+        app.component('RdfExportComponent', RdfExportComponent);
+    }
+}
+
+export default rdfExportPlugin;

src/plugins/Imports/JsonImportPlugin.vue

@@ -0,0 +1,33 @@
+<template>
+    <v-btn color='primary' @click='dialog = true'>Import JSON</v-btn>
+    <v-dialog v-model='dialog'>
+        <v-card class=w-50>
+            <v-card-title>Select Import Elements</v-card-title>
+            <v-card-actions>
+                <v-file-input
+                    accept='.json'
+                    label='JSON Input'
+                    prepend-icon='mdi-folder_open'
+                    multiple
+                ></v-file-input>
+                <v-btn color='red' @click='dialog = false'>Close</v-btn>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script lang="ts">
+import { Options, Vue } from 'vue-class-component';
+
+@Options({
+  data() {
+    return {
+        dialog: false
+    }
+  }
+})
+
+export default class JsonImportComponent extends Vue {}
+</script>
+
+<style scoped></style>

src/plugins/Imports/json-import-plugin.ts

@@ -0,0 +1,19 @@
+import { App, Plugin } from 'vue';
+import JsonImportComponent from "./JsonImportPlugin.vue"
+
+const jsonImportPlugin: Plugin = {
+    install(app: App) {
+        // global property
+        // app.config.globalProperties.$definedproperty = 'Example Global Property';
+
+        // global method
+        // app.config.globalProperties.$definedMethods = () => {
+        //   console.log('Example Method');
+        // };
+
+        // global component
+        app.component('JsonImportComponent', JsonImportComponent);
+    }
+}
+
+export default jsonImportPlugin;