allow copying the exported JSON

alexewerlof · Sep 23, 2024 · abbaf4d · abbaf4d
1 parent 2d47d2f
commit abbaf4d
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 15 deletions.
diff --git a/TODO.md b/TODO.md
@@ -7,7 +7,6 @@
 - [ ] Support calendar-bound windows
 - [ ] Add some metrics to the example.json
 - [ ] The likelihood select box should go to the failure page
-- [ ] Allow copying the JSON export
 - [ ] Allow directly saving the JSON export
 - [ ] Allow multiple consequences
 
@@ -25,6 +24,7 @@
 
 # Shipped
 
+- [X] 2024-09-23: Workshop: Allow copying the JSON export
 - [X] 2024-09-23: Workshop: The "Add New" button should be after the current list (e.g. system, service, consumer, consumption)
 - [X] 2024-08-15: rename valid -> eventUnit
 - [X] 2024-08-15: rename good -> metricName

diff --git a/workshop/assessment-app.js b/workshop/assessment-app.js
@@ -11,7 +11,7 @@ import SummaryView from '../views/summary-view.js'
 import { Assessment } from '../models/assessment.js'
 import { config } from '../config.js'
 import { dump } from '../vendor/js-yaml.js'
-import { loadJson, readTextFile } from '../lib/share.js'
+import { copyElementTextToClipboard, loadJson, readTextFile } from '../lib/share.js'
 import FeedbackBlobComponent from '../components/feedback-blob.js'
 
 const exampleJson = await loadJson('example.json')
@@ -64,6 +64,10 @@ export const app = createApp({
 
         clickInput(id) {
             document.getElementById(id).click()
+        },
+
+        async copy(elementId) {
+            return await copyElementTextToClipboard(elementId)
         }
     }
 })
diff --git a/workshop/index.html b/workshop/index.html
@@ -379,19 +379,18 @@ <h2>Mental Model</h2>
             </div>
 
             <div v-if="selectedTab === 'Export'">
-                <article>
-                    <section>
-                        <div class="button-bar">
-                            <button @click="exportToJson()">JSON</button>
-                            <button @click="exportToYaml('yaml')">YAML</button>
-                            <button @click="clickInput('import-file-selector')">Import</button>
-                        </div>
-                        <input hidden type="file" @change="importFile($event)" id="import-file-selector" accept=".json">
-                        <div class="code block">
-                            <pre><code>{{ exportedCode }}</code></pre>
-                        </pre>
-                    </section>
-                </article>
+                <div class="block">
+                    <div class="button-bar">
+                        <button @click="exportToJson()">JSON</button>
+                        <button @click="exportToYaml('yaml')">YAML</button>
+                        <button @click="clickInput('import-file-selector')">Import</button>
+                    </div>
+                    <input hidden type="file" @change="importFile($event)" id="import-file-selector" accept=".json">
+                    <div class="code block">
+                        <pre id="exported-code"><code>{{ exportedCode }}</code></pre>
+                        <button @click="copy('exported-code')" type="button" title="Copy to clipboard">⎘</button>
+                    </pre>
+                </div>
             </div>
         </main>
         <feedback-blob-component prefill="Workshop"></feedback-blob-component>