mirror of
https://github.com/semaphoreui/semaphore.git
synced 2025-01-21 07:49:34 +01:00
feat(fe): add vue-codemirror
This commit is contained in:
Denis Gukov
parent
290c876045
commit
bb540ed3e2
152
web2/package-lock.json
generated
152
web2/package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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"
|
||||
},
|
||||
|
||||
@ -20,16 +20,24 @@
|
||||
class="mb-4"
|
||||
></v-text-field>
|
||||
|
||||
<v-textarea
|
||||
v-model="item.json"
|
||||
<!-- <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)"
|
||||
:disabled="formSaving"
|
||||
solo
|
||||
></v-textarea>
|
||||
: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`;
|
||||
|
||||
@ -50,33 +50,57 @@
|
||||
v-if="item.type === 'file'"
|
||||
></v-text-field>
|
||||
|
||||
<v-textarea
|
||||
<codemirror
|
||||
:style="{ border: '1px solid lightgray' }"
|
||||
v-model="item.inventory"
|
||||
label="Inventory"
|
||||
:rules="[v => !!v || 'Inventory is required']"
|
||||
required
|
||||
:disabled="formSaving"
|
||||
:options="cmOptions"
|
||||
v-if="item.type === 'static'"
|
||||
solo
|
||||
></v-textarea>
|
||||
<div v-if="item.type === 'static'">
|
||||
/>
|
||||
|
||||
<v-alert
|
||||
dense
|
||||
class="mt-4"
|
||||
type="info"
|
||||
v-if="item.type === 'static'"
|
||||
>
|
||||
Static inventory example:
|
||||
<pre>
|
||||
[website]
|
||||
<pre style="font-size: 14px;">[website]
|
||||
172.18.8.40
|
||||
172.18.8.41
|
||||
</pre>
|
||||
</div>
|
||||
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',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user