feat(fe): add vue-codemirror

2025-01-20 23:39:56 +01:00 · 2021-08-31 18:25:03 +05:00 · 2021-08-31 18:25:03 +05:00 · bb540ed3e2
commit bb540ed3e2
parent 290c876045
4 changed files with 150 additions and 103 deletions
--- a/web2/package-lock.json
+++ b/web2/package-lock.json
@ -1913,6 +1913,17 @@
            "unique-filename": "^1.1.1"
          }
        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
        "cliui": {
          "version": "6.0.0",
          "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
@ -1960,6 +1971,25 @@
            "path-exists": "^4.0.0"
          }
        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true,
+          "optional": true
+        },
+        "loader-utils": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
+          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "big.js": "^5.2.2",
+            "emojis-list": "^3.0.0",
+            "json5": "^2.1.2"
+          }
+        },
        "locate-path": {
          "version": "5.0.0",
          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
@ -2024,6 +2054,16 @@
            "minipass": "^3.1.1"
          }
        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
        "terser-webpack-plugin": {
          "version": "2.3.8",
          "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-2.3.8.tgz",
@ -2041,6 +2081,18 @@
            "webpack-sources": "^1.4.3"
          }
        },
+        "vue-loader-v16": {
+          "version": "npm:vue-loader@16.5.0",
+          "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.5.0.tgz",
+          "integrity": "sha512-WXh+7AgFxGTgb5QAkQtFeUcHNIEq3PGVQ8WskY5ZiFbWBkOwcCPRs4w/2tVyTbh2q6TVRlO3xfvIukUtjsu62A==",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^4.1.0",
+            "hash-sum": "^2.0.0",
+            "loader-utils": "^2.0.0"
+          }
+        },
        "wrap-ansi": {
          "version": "6.2.0",
          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
@ -4016,6 +4068,11 @@
      "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
      "dev": true
    },
+    "codemirror": {
+      "version": "5.62.3",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.62.3.tgz",
+      "integrity": "sha512-zZAyOfN8TU67ngqrxhOgtkSAGV9jSpN1snbl8elPtnh9Z5A11daR405+dhLzLnuXrwX0WCShWlybxPN3QC/9Pg=="
+    },
    "collection-visit": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
@ -5156,6 +5213,11 @@
      "integrity": "sha512-A46qtFgd+g7pDZinpnwiRJtxbC1hpgf0uzP3iG89scHk0AUC7A1TGxf5OiiOUv/JMZR8GOt8hL900hV0bOy5xA==",
      "dev": true
    },
+    "diff-match-patch": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/diff-match-patch/-/diff-match-patch-1.0.5.tgz",
+      "integrity": "sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw=="
+    },
    "diffie-hellman": {
      "version": "5.0.3",
      "resolved": "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz",
@ -14243,6 +14305,15 @@
        }
      }
    },
+    "vue-codemirror": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/vue-codemirror/-/vue-codemirror-4.0.6.tgz",
+      "integrity": "sha512-ilU7Uf0mqBNSSV3KT7FNEeRIxH4s1fmpG4TfHlzvXn0QiQAbkXS9lLfwuZpaBVEnpP5CSE62iGJjoliTuA8poQ==",
+      "requires": {
+        "codemirror": "^5.41.0",
+        "diff-match-patch": "^1.0.0"
+      }
+    },
    "vue-eslint-parser": {
      "version": "7.1.0",
      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.1.0.tgz",
@ -14296,87 +14367,6 @@
        }
      }
    },
-    "vue-loader-v16": {
-      "version": "npm:vue-loader@16.5.0",
-      "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.5.0.tgz",
-      "integrity": "sha512-WXh+7AgFxGTgb5QAkQtFeUcHNIEq3PGVQ8WskY5ZiFbWBkOwcCPRs4w/2tVyTbh2q6TVRlO3xfvIukUtjsu62A==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "chalk": "^4.1.0",
-        "hash-sum": "^2.0.0",
-        "loader-utils": "^2.0.0"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "4.3.0",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-convert": "^2.0.1"
-          }
-        },
-        "chalk": {
-          "version": "4.1.2",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
-          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^4.1.0",
-            "supports-color": "^7.1.0"
-          }
-        },
-        "color-convert": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "color-name": "~1.1.4"
-          }
-        },
-        "color-name": {
-          "version": "1.1.4",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "dev": true,
-          "optional": true
-        },
-        "has-flag": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
-          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
-          "dev": true,
-          "optional": true
-        },
-        "loader-utils": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
-          "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^2.1.2"
-          }
-        },
-        "supports-color": {
-          "version": "7.2.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
-          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "has-flag": "^4.0.0"
-          }
-        }
-      }
-    },
    "vue-router": {
      "version": "3.4.4",
      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.4.tgz",
--- a/web2/package.json
+++ b/web2/package.json
@ -14,6 +14,7 @@
    "core-js": "^3.6.5",
    "moment": "^2.29.1",
    "vue": "^2.6.11",
+    "vue-codemirror": "^4.0.6",
    "vue-router": "^3.2.0",
    "vuetify": "^2.2.11"
  },
--- a/web2/src/components/EnvironmentForm.vue
+++ b/web2/src/components/EnvironmentForm.vue
@ -20,16 +20,24 @@
      class="mb-4"
    ></v-text-field>

-    <v-textarea
-      v-model="item.json"
-      label="Environment (This has to be a JSON object)"
-      :disabled="formSaving"
-      solo
-    ></v-textarea>
+<!--    <v-textarea-->
+<!--      v-model="item.json"-->
+<!--      label="Environment (This has to be a JSON object)"-->
+<!--      :disabled="formSaving"-->
+<!--      solo-->
+<!--    ></v-textarea>-->
+
+    <codemirror
+        label="Environment (This has to be a JSON object)"
+        :style="{ border: '1px solid lightgray' }"
+        v-model="item.json"
+        :options="cmOptions"
+    />

    <v-alert
        dense
        type="info"
+        class="mt-4"
    >
      Must be valid JSON. You may use the key <code>ENV</code> to pass environment variables
      to ansible-playbook.
@ -45,10 +53,34 @@
  </v-form>
 </template>
 <script>
+/* eslint-disable import/no-extraneous-dependencies,import/extensions */
+
 import ItemFormBase from '@/components/ItemFormBase';

+import { codemirror } from 'vue-codemirror';
+import 'codemirror/lib/codemirror.css';
+import 'codemirror/mode/vue/vue.js';
+import 'codemirror/addon/lint/json-lint.js';
+
 export default {
  mixins: [ItemFormBase],
+  components: {
+    codemirror,
+  },
+
+  data() {
+    return {
+      cmOptions: {
+        tabSize: 2,
+        mode: 'application/json',
+        lineNumbers: true,
+        line: true,
+        lint: true,
+        indentWithTabs: false,
+      },
+    };
+  },
+
  methods: {
    getItemsUrl() {
      return `/api/project/${this.projectId}/environment`;
--- a/web2/src/components/InventoryForm.vue
+++ b/web2/src/components/InventoryForm.vue
@ -50,33 +50,57 @@
      v-if="item.type === 'file'"
    ></v-text-field>

-    <v-textarea
-      v-model="item.inventory"
-      label="Inventory"
-      :rules="[v => !!v || 'Inventory is required']"
-      required
-      :disabled="formSaving"
-      v-if="item.type === 'static'"
-      solo
-    ></v-textarea>
-    <div v-if="item.type === 'static'">
+    <codemirror
+        :style="{ border: '1px solid lightgray' }"
+        v-model="item.inventory"
+        :options="cmOptions"
+        v-if="item.type === 'static'"
+    />
+
+    <v-alert
+        dense
+        class="mt-4"
+        type="info"
+        v-if="item.type === 'static'"
+    >
      Static inventory example:
-      <pre>
-    [website]
-    172.18.8.40
-    172.18.8.41
-      </pre>
-    </div>
+      <pre style="font-size: 14px;">[website]
+172.18.8.40
+172.18.8.41</pre>
+    </v-alert>
  </v-form>
 </template>
+<style>
+.CodeMirror {
+  height: 200px !important;
+}
+</style>
 <script>
+/* eslint-disable import/no-extraneous-dependencies,import/extensions */
+
 import ItemFormBase from '@/components/ItemFormBase';
 import axios from 'axios';

+import { codemirror } from 'vue-codemirror';
+import 'codemirror/lib/codemirror.css';
+import 'codemirror/mode/vue/vue.js';
+import 'codemirror/addon/lint/json-lint.js';
+
 export default {
  mixins: [ItemFormBase],
+  components: {
+    codemirror,
+  },
  data() {
    return {
+      cmOptions: {
+        tabSize: 2,
+        mode: 'text/x-ini',
+        lineNumbers: true,
+        line: true,
+        lint: true,
+        indentWithTabs: false,
+      },
      keys: null,
      inventoryTypes: [{
        id: 'static',