feat(config-preview): copy & download-button

Closes #105

Signed-off-by: Lukas Mertens <[email protected]>

commit-id:8c155f5f

src/components/ConfigPreview.vue

@@ -6,6 +6,10 @@
     <template v-slot:default="{ isActive }">
       <v-card title="Config Preview">
         <v-card-text>
+          <div class="controls">
+            <v-btn icon="mdi-download" @click="downloadConfig()"></v-btn>
+            <v-btn icon="mdi-content-copy" @click="copyConfig()"></v-btn>
+          </div>
           <v-tabs v-model="tab">
             <v-tab value="yaml">
               YAML
@@ -29,7 +33,14 @@
 </template>
 
 <style scoped lang="scss">
-
+  .controls {
+    display: flex;
+    justify-content: flex-end;
+    position: absolute;
+    top: 1.5rem;
+    right: 1.5rem;
+    gap: 0.5rem;
+  }
 </style>
 
 <script lang="ts">
@@ -43,10 +54,12 @@ export default {
 </script>
 <script setup lang="ts">
 import EVConfigModel from "@/modules/evbc/config_model";
-import {computed, ref} from "vue";
-
+import {computed, inject, ref} from "vue";
+import {Notyf} from "notyf";
 import yaml from 'js-yaml';
 
+const notyf = inject<Notyf>('notyf')
+
 
 const props = defineProps<{
   config: EVConfigModel,
@@ -57,5 +70,42 @@ const tab = ref('yaml');
 const jsonCode = computed(() => JSON.stringify(props.config.serialize(), null, 2));
 const yamlCode = computed(() => yaml.dump(props.config.serialize()));
 
+const downloadConfig = () => {
+  let filename = '';
+  let contentType = '';
+  let content = '';
+
+  if (tab.value === 'json') {
+    filename = `${props.config._name}.json`;
+    contentType = 'application/json';
+    content = jsonCode.value;
+  } else if (tab.value === 'yaml') {
+    filename = `${props.config._name}.yaml`;
+    contentType = 'text/yaml';
+    content = yamlCode.value;
+  }
+
+  const blob = new Blob([content], {type: contentType});
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a); // This line is necessary for the Firefox browser
+  a.click();
+  document.body.removeChild(a); // Clean up
+  URL.revokeObjectURL(url); // Free up memory
+};
+
+const copyConfig = () => {
+  let content = '';
+  if (tab.value === 'json') {
+    content = jsonCode.value;
+  } else if (tab.value === 'yaml') {
+    content = yamlCode.value;
+  }
+  navigator.clipboard.writeText(content);
+  notyf.success("Copied to clipboard!");
+};
+
 </script>