feat: can generate multiple uuids

Signed-off-by: Corentin Thomasset <corentin.thomasset74@gmail.com>

1 files changed, 23 insertions, 7 deletions

diff --git a/src/routes/tools/UuidGenerator.vue b/src/routes/tools/UuidGenerator.vue
index d910f24..c4b3f1b 100644
--- a/src/routes/tools/UuidGenerator.vue
+++ b/src/routes/tools/UuidGenerator.vue
@@ -3,11 +3,12 @@
         <v-card-title>Uuid v4 generator</v-card-title>
 
         <v-card-text>
-            <v-text-field outlined v-model="token" class="centered-input"/>
+            <v-text-field outlined v-model="quantity" type="number" label="Quantity" dense class="quantity"/>
+            <v-textarea outlined v-model="token" class="centered-input" :rows="quantity <= 10 ? quantity : 10" readonly/>
 
             <div class="text-center">
                 <v-btn @click="refreshBool = !refreshBool" depressed class="mr-4">Refresh</v-btn>
-                <v-btn @click="copyToken()" depressed>Copy token</v-btn>
+                <v-btn @click="copyToken()" depressed>Copy uuid{{ quantity > 1 ? 's' : ''}}</v-btn>
             </div>
         </v-card-text>
     </v-card>
@@ -19,10 +20,13 @@
     const noop = () => {
     };
 
+    const generateUuid = () => ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16));
+
     export default {
         name: "UuidGenerator",
         data: () => ({
-            refreshBool: true
+            refreshBool: true,
+            quantity: 1
         }),
         methods: {
             copyToken() {
@@ -34,14 +38,26 @@
             token() {
                 if (this.refreshBool) noop(); // To force recomputation
 
-                return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c => (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16));
+                return Array.from({length: this.quantity}, generateUuid).join('\n');
             }
         }
     }
 </script>
 
-<style scoped>
-    ::v-deep .centered-input input {
-        text-align: center
+<style scoped lang="less">
+    .quantity{
+        width: 100px;
+        margin: auto;
+        text-align: center;
+
+        ::v-deep input{
+            text-align: center;
+        }
+    }
+
+    ::v-deep .centered-input textarea {
+        text-align: center;
+        margin-top: 13px !important;
+        font-family: Consolas, monospace;
     }
 </style>
\ No newline at end of file