Env management
This commit is contained in:
Jacob Anavisca
77
components/environments/addEnvironment.vue
Normal file
77
components/environments/addEnvironment.vue
Normal file
@@ -0,0 +1,77 @@
|
|||||||
|
<template>
|
||||||
|
<modal v-if="show" @close="hideModal">
|
||||||
|
<div slot="header">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<div class="flex-wrap">
|
||||||
|
<h3 class="title">{{ $t("new_environment") }}</h3>
|
||||||
|
<div>
|
||||||
|
<button class="icon" @click="hideModal">
|
||||||
|
<i class="material-icons">close</i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div slot="body">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
v-model="name"
|
||||||
|
:placeholder="$t('my_new_environment')"
|
||||||
|
@keyup.enter="addNewEnvironment"
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div slot="footer">
|
||||||
|
<div class="flex-wrap">
|
||||||
|
<span></span>
|
||||||
|
<span>
|
||||||
|
<button class="icon" @click="hideModal">
|
||||||
|
{{ $t("cancel") }}
|
||||||
|
</button>
|
||||||
|
<button class="icon primary" @click="addNewEnvironment">
|
||||||
|
{{ $t("save") }}
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
show: Boolean
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
modal: () => import("../../components/modal")
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
name: undefined
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
addNewEnvironment() {
|
||||||
|
if (!this.$data.name) {
|
||||||
|
this.$toast.info($t("invalid_environment_name"));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let newEnvironment = [{
|
||||||
|
name: this.$data.name,
|
||||||
|
variables: []
|
||||||
|
}]
|
||||||
|
this.$store.commit("postwoman/importAddEnvironments", newEnvironment);
|
||||||
|
this.$emit("hide-modal");
|
||||||
|
},
|
||||||
|
hideModal() {
|
||||||
|
this.$emit("hide-modal");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
206
components/environments/editEnvironment.vue
Normal file
206
components/environments/editEnvironment.vue
Normal file
@@ -0,0 +1,206 @@
|
|||||||
|
<template>
|
||||||
|
<modal v-if="show" @close="hideModal">
|
||||||
|
<div slot="header">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<div class="flex-wrap">
|
||||||
|
<h3 class="title">{{ $t("edit_environment") }}</h3>
|
||||||
|
<div>
|
||||||
|
<button class="icon" @click="hideModal">
|
||||||
|
<i class="material-icons">close</i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div slot="body">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
v-model="name"
|
||||||
|
:placeholder="editingEnvironment.name"
|
||||||
|
@keyup.enter="saveEnvironment"
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<div class="flex-wrap">
|
||||||
|
<label for="variableList">{{ $t("env_variable_list") }}</label>
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
class="icon"
|
||||||
|
@click="clearContent($event)"
|
||||||
|
v-tooltip.bottom="$t('clear')"
|
||||||
|
>
|
||||||
|
<i class="material-icons">clear_all</i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<textarea
|
||||||
|
id="variableList"
|
||||||
|
readonly
|
||||||
|
v-textarea-auto-height="variableString"
|
||||||
|
v-model="variableString"
|
||||||
|
:placeholder="$t('add_one_variable')"
|
||||||
|
rows="1"
|
||||||
|
></textarea>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul v-for="(variable, index) in this.editingEnvCopy.variables" :key="index">
|
||||||
|
<li>
|
||||||
|
<input
|
||||||
|
:placeholder="$t('parameter_count', { count: index + 1 })"
|
||||||
|
:name="'param' + index"
|
||||||
|
:value="variable.key"
|
||||||
|
@change="
|
||||||
|
$store.commit('postwoman/setVariableKey', {
|
||||||
|
index,
|
||||||
|
value: $event.target.value
|
||||||
|
})
|
||||||
|
"
|
||||||
|
autofocus
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<input
|
||||||
|
:placeholder="$t('value_count', { count: index + 1 })"
|
||||||
|
:name="'value' + index"
|
||||||
|
:value="variable.value"
|
||||||
|
@change="
|
||||||
|
$store.commit('postwoman/setVariableValue', {
|
||||||
|
index,
|
||||||
|
value: $event.target.value
|
||||||
|
})
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
|
<div>
|
||||||
|
<li>
|
||||||
|
<button
|
||||||
|
class="icon"
|
||||||
|
@click="removeEnvironmentVariable(index)"
|
||||||
|
v-tooltip.bottom="$t('delete')"
|
||||||
|
id="variable"
|
||||||
|
>
|
||||||
|
<i class="material-icons">delete</i>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
</div>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<button class="icon" @click="addEnvironmentVariable">
|
||||||
|
<i class="material-icons">add</i>
|
||||||
|
<span>{{ $t("add_new") }}</span>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div slot="footer">
|
||||||
|
<div class="flex-wrap">
|
||||||
|
<span></span>
|
||||||
|
<span>
|
||||||
|
<button class="icon" @click="hideModal">
|
||||||
|
{{ $t("cancel") }}
|
||||||
|
</button>
|
||||||
|
<button class="icon primary" @click="saveEnvironment">
|
||||||
|
{{ $t("save") }}
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import textareaAutoHeight from "../../directives/textareaAutoHeight";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
directives: {
|
||||||
|
textareaAutoHeight
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
show: Boolean,
|
||||||
|
editingEnvironment: Object,
|
||||||
|
editingEnvironmentIndex: Number
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
modal: () => import("../../components/modal")
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
name: undefined
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
editingEnvironment: function(update) {
|
||||||
|
this.$store.commit("postwoman/setEditingEnvironment", this.$props.editingEnvironment);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
editingEnvCopy() {
|
||||||
|
return this.$store.state.postwoman.editingEnvironment
|
||||||
|
},
|
||||||
|
variableString() {
|
||||||
|
const result = this.editingEnvCopy.variables
|
||||||
|
return result === "" ? "" : JSON.stringify(result);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
clearContent(e) {
|
||||||
|
this.$store.commit("postwoman/removeVariables", [])
|
||||||
|
e.target.innerHTML = this.doneButton;
|
||||||
|
this.$toast.info(this.$t("cleared"), {
|
||||||
|
icon: "clear_all"
|
||||||
|
});
|
||||||
|
setTimeout(
|
||||||
|
() => (e.target.innerHTML = '<i class="material-icons">clear_all</i>'),
|
||||||
|
1000
|
||||||
|
);
|
||||||
|
},
|
||||||
|
addEnvironmentVariable() {
|
||||||
|
let value = { key: "", value: "" }
|
||||||
|
this.$store.commit("postwoman/addVariable", value);
|
||||||
|
},
|
||||||
|
removeEnvironmentVariable(index) {
|
||||||
|
let variableIndex = index
|
||||||
|
const oldVariables = this.editingEnvCopy.variables.slice()
|
||||||
|
const newVariables = this.editingEnvCopy.variables.filter((variable, index) => variableIndex !== index)
|
||||||
|
|
||||||
|
this.$store.commit("postwoman/removeVariable", newVariables)
|
||||||
|
this.$toast.error(this.$t("deleted"), {
|
||||||
|
icon: "delete",
|
||||||
|
action: {
|
||||||
|
text: this.$t("undo"),
|
||||||
|
onClick: (e, toastObject) => {
|
||||||
|
this.$store.commit("postwoman/removeVariable", oldVariables);
|
||||||
|
toastObject.remove();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
saveEnvironment() {
|
||||||
|
if (!this.$data.name) {
|
||||||
|
this.$toast.info(this.$t("invalid_environment_name"));
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const environmentUpdated = {
|
||||||
|
...this.editingEnvCopy,
|
||||||
|
name: this.$data.name
|
||||||
|
};
|
||||||
|
this.$store.commit("postwoman/saveEnvironment", {
|
||||||
|
environment: environmentUpdated,
|
||||||
|
environmentIndex: this.$props.editingEnvironmentIndex
|
||||||
|
});
|
||||||
|
this.$emit("hide-modal");
|
||||||
|
},
|
||||||
|
hideModal() {
|
||||||
|
this.$data.name = undefined
|
||||||
|
this.$emit("hide-modal");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
65
components/environments/environment.vue
Normal file
65
components/environments/environment.vue
Normal file
@@ -0,0 +1,65 @@
|
|||||||
|
<template>
|
||||||
|
<div class="flex-wrap">
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
class="icon"
|
||||||
|
@click="$emit('select-environment')"
|
||||||
|
v-tooltip="$t('use_environment')"
|
||||||
|
>
|
||||||
|
<i class="material-icons">insert_drive_file</i>
|
||||||
|
<span>{{ environment.name }}</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<v-popover>
|
||||||
|
<button class="tooltip-target icon" v-tooltip="$t('more')">
|
||||||
|
<i class="material-icons">more_vert</i>
|
||||||
|
</button>
|
||||||
|
<template slot="popover">
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
class="icon"
|
||||||
|
@click="$emit('edit-environment')"
|
||||||
|
v-close-popover
|
||||||
|
>
|
||||||
|
<i class="material-icons">create</i>
|
||||||
|
<span>{{ $t("edit") }}</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button class="icon" @click="removeEnvironment" v-close-popover>
|
||||||
|
<i class="material-icons">delete</i>
|
||||||
|
<span>{{ $t("delete") }}</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</v-popover>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
ul {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul li {
|
||||||
|
display: flex;
|
||||||
|
padding-left: 16px;
|
||||||
|
border-left: 1px solid var(--brd-color);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
environment: Object,
|
||||||
|
environmentIndex: Number
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
removeEnvironment() {
|
||||||
|
if (!confirm("Are you sure you want to remove this environment?")) return;
|
||||||
|
this.$store.commit("postwoman/removeEnvironment", this.environmentIndex);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
170
components/environments/importExportEnvironment.vue
Normal file
170
components/environments/importExportEnvironment.vue
Normal file
@@ -0,0 +1,170 @@
|
|||||||
|
<template>
|
||||||
|
<modal v-if="show" @close="hideModal">
|
||||||
|
<div slot="header">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<div class="flex-wrap">
|
||||||
|
<h3 class="title">Import / Export Environment</h3>
|
||||||
|
<div>
|
||||||
|
<button class="icon" @click="hideModal">
|
||||||
|
<i class="material-icons">close</i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-wrap">
|
||||||
|
<!-- TODO db syncing
|
||||||
|
button needs to be switchded to
|
||||||
|
:disabled=="!fb.currentUser"
|
||||||
|
-->
|
||||||
|
<span
|
||||||
|
v-tooltip="{
|
||||||
|
content: !fb.currentUser
|
||||||
|
? $t('login_first')
|
||||||
|
: $t('replace_current')
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
:disabled="true"
|
||||||
|
class="icon"
|
||||||
|
@click="syncEnvironments"
|
||||||
|
>
|
||||||
|
<i class="material-icons">folder_shared</i>
|
||||||
|
<span>{{ $t("import_from_sync") }}</span>
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
class="icon"
|
||||||
|
@click="openDialogChooseFileToReplaceWith"
|
||||||
|
v-tooltip="$t('replace_current')"
|
||||||
|
>
|
||||||
|
<i class="material-icons">create_new_folder</i>
|
||||||
|
<span>{{ $t("replace_json") }}</span>
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
@change="replaceWithJSON"
|
||||||
|
style="display: none;"
|
||||||
|
ref="inputChooseFileToReplaceWith"
|
||||||
|
accept="application/json"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="icon"
|
||||||
|
@click="openDialogChooseFileToImportFrom"
|
||||||
|
v-tooltip="$t('preserve_current')"
|
||||||
|
>
|
||||||
|
<i class="material-icons">folder_special</i>
|
||||||
|
<span>{{ $t("import_json") }}</span>
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
@change="importFromJSON"
|
||||||
|
style="display: none;"
|
||||||
|
ref="inputChooseFileToImportFrom"
|
||||||
|
accept="application/json"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div slot="body">
|
||||||
|
<textarea v-model="environmentJson" rows="8"></textarea>
|
||||||
|
</div>
|
||||||
|
<div slot="footer">
|
||||||
|
<div class="flex-wrap">
|
||||||
|
<span></span>
|
||||||
|
<span>
|
||||||
|
<button class="icon" @click="hideModal">
|
||||||
|
{{ $t("cancel") }}
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
class="icon primary"
|
||||||
|
@click="exportJSON"
|
||||||
|
v-tooltip="$t('download_file')"
|
||||||
|
>
|
||||||
|
{{ $t("export") }}
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { fb } from "../../functions/fb";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
fb
|
||||||
|
};
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
show: Boolean
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
modal: () => import("../../components/modal")
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
environmentJson() {
|
||||||
|
return JSON.stringify(this.$store.state.postwoman.environments, null, 2);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
hideModal() {
|
||||||
|
this.$emit("hide-modal");
|
||||||
|
},
|
||||||
|
openDialogChooseFileToReplaceWith() {
|
||||||
|
this.$refs.inputChooseFileToReplaceWith.click();
|
||||||
|
},
|
||||||
|
openDialogChooseFileToImportFrom() {
|
||||||
|
this.$refs.inputChooseFileToImportFrom.click();
|
||||||
|
},
|
||||||
|
replaceWithJSON() {
|
||||||
|
let reader = new FileReader();
|
||||||
|
reader.onload = event => {
|
||||||
|
let content = event.target.result;
|
||||||
|
let environment = JSON.parse(content);
|
||||||
|
this.$store.commit("postwoman/replaceEnvironments", environment);
|
||||||
|
};
|
||||||
|
reader.readAsText(this.$refs.inputChooseFileToReplaceWith.files[0]);
|
||||||
|
this.fileImported();
|
||||||
|
},
|
||||||
|
importFromJSON() {
|
||||||
|
let reader = new FileReader();
|
||||||
|
reader.onload = event => {
|
||||||
|
let content = event.target.result;
|
||||||
|
let environment = JSON.parse(content);
|
||||||
|
this.$store.commit("postwoman/importAddEnvironments", environment);
|
||||||
|
};
|
||||||
|
reader.readAsText(this.$refs.inputChooseFileToImportFrom.files[0]);
|
||||||
|
this.fileImported();
|
||||||
|
},
|
||||||
|
exportJSON() {
|
||||||
|
let text = this.environmentJson;
|
||||||
|
text = text.replace(/\n/g, "\r\n");
|
||||||
|
let blob = new Blob([text], {
|
||||||
|
type: "text/json"
|
||||||
|
});
|
||||||
|
let anchor = document.createElement("a");
|
||||||
|
anchor.download = "postwoman-environment.json";
|
||||||
|
anchor.href = window.URL.createObjectURL(blob);
|
||||||
|
anchor.target = "_blank";
|
||||||
|
anchor.style.display = "none";
|
||||||
|
document.body.appendChild(anchor);
|
||||||
|
anchor.click();
|
||||||
|
document.body.removeChild(anchor);
|
||||||
|
this.$toast.success(this.$t("download_started"), {
|
||||||
|
icon: "done"
|
||||||
|
});
|
||||||
|
},
|
||||||
|
syncEnvironments() {
|
||||||
|
// TODO
|
||||||
|
},
|
||||||
|
fileImported() {
|
||||||
|
this.$toast.info(this.$t("file_imported"), {
|
||||||
|
icon: "folder_shared"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
133
components/environments/index.vue
Normal file
133
components/environments/index.vue
Normal file
@@ -0,0 +1,133 @@
|
|||||||
|
<template>
|
||||||
|
<pw-section class="green" icon="history" :label="$t('environment')" ref="environment">
|
||||||
|
<addEnvironment :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
|
||||||
|
<editEnvironment
|
||||||
|
:show="showModalEdit"
|
||||||
|
:editingEnvironment="editingEnvironment"
|
||||||
|
:editingEnvironmentIndex="editingEnvironmentIndex"
|
||||||
|
@hide-modal="displayModalEdit(false)"
|
||||||
|
/>
|
||||||
|
<importExportEnvironment
|
||||||
|
:show="showModalImportExport"
|
||||||
|
@hide-modal="displayModalImportExport(false)"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="flex-wrap">
|
||||||
|
<div>
|
||||||
|
<button class="icon" @click="displayModalAdd(true)">
|
||||||
|
<i class="material-icons">add</i>
|
||||||
|
<span>{{ $t("new") }}</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<button class="icon" @click="displayModalImportExport(true)">
|
||||||
|
{{ $t("import_export") }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p v-if="environments.length === 0" class="info">
|
||||||
|
Create new environment
|
||||||
|
</p>
|
||||||
|
<virtual-list
|
||||||
|
class="virtual-list"
|
||||||
|
:class="{ filled: environments.length }"
|
||||||
|
:size="152"
|
||||||
|
:remain="Math.min(5, environments.length)"
|
||||||
|
>
|
||||||
|
<ul>
|
||||||
|
<li v-for="(environment, index) in environments" :key="environment.name">
|
||||||
|
<environment
|
||||||
|
:environmentIndex="index"
|
||||||
|
:environment="environment"
|
||||||
|
@edit-environment="editEnvironment(environment, index)"
|
||||||
|
@select-environment="$emit('use-environment', environment)"
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
|
<li v-if="environments.length === 0">
|
||||||
|
<label>Environments are empty</label>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</virtual-list>
|
||||||
|
</pw-section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.virtual-list {
|
||||||
|
max-height: calc(100vh - 276px);
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import environment from "./environment";
|
||||||
|
// import { fb } from "../functions/fb";
|
||||||
|
|
||||||
|
const updateOnLocalStorage = (propertyName, property) =>
|
||||||
|
window.localStorage.setItem(propertyName, JSON.stringify(property));
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
environment,
|
||||||
|
"pw-section": () => import("../section"),
|
||||||
|
addEnvironment: () => import("./addEnvironment"),
|
||||||
|
editEnvironment: () => import("./editEnvironment"),
|
||||||
|
importExportEnvironment: () => import("./importExportEnvironment"),
|
||||||
|
VirtualList: () => import("vue-virtual-scroll-list")
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showModalImportExport: false,
|
||||||
|
showModalAdd: false,
|
||||||
|
showModalEdit: false,
|
||||||
|
editingEnvironment: undefined,
|
||||||
|
editingEnvironmentIndex: undefined,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
environments() {
|
||||||
|
return this.$store.state.postwoman.environments;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async mounted() {
|
||||||
|
this._keyListener = function(e) {
|
||||||
|
if (e.key === "Escape") {
|
||||||
|
e.preventDefault();
|
||||||
|
this.showModalImportExport = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
document.addEventListener("keydown", this._keyListener.bind(this));
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
displayModalAdd(shouldDisplay) {
|
||||||
|
this.showModalAdd = shouldDisplay;
|
||||||
|
},
|
||||||
|
displayModalEdit(shouldDisplay) {
|
||||||
|
this.showModalEdit = shouldDisplay;
|
||||||
|
|
||||||
|
if (!shouldDisplay) this.resetSelectedData();
|
||||||
|
},
|
||||||
|
displayModalImportExport(shouldDisplay) {
|
||||||
|
this.showModalImportExport = shouldDisplay;
|
||||||
|
},
|
||||||
|
editEnvironment(environment, environmentIndex) {
|
||||||
|
this.$data.editingEnvironment = environment;
|
||||||
|
this.$data.editingEnvironmentIndex = environmentIndex;
|
||||||
|
this.displayModalEdit(true);
|
||||||
|
},
|
||||||
|
resetSelectedData() {
|
||||||
|
this.$data.editingEnvironment = undefined;
|
||||||
|
this.$data.editingEnvironmentIndex = undefined;
|
||||||
|
},
|
||||||
|
syncEnvironments() {
|
||||||
|
// TODO
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
document.removeEventListener("keydown", this._keyListener);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -45,6 +45,14 @@ export default {
|
|||||||
preview_html: "Preview HTML",
|
preview_html: "Preview HTML",
|
||||||
history: "History",
|
history: "History",
|
||||||
collections: "Collections",
|
collections: "Collections",
|
||||||
|
environment: "Environment",
|
||||||
|
new_environment: "New Environment",
|
||||||
|
my_new_environment: "My New Environment",
|
||||||
|
edit_environment: "Edit Environment",
|
||||||
|
env_variable_list: "Variable List",
|
||||||
|
invalid_environment_name: "Please provide a valid name for the environment",
|
||||||
|
use_environment: "Use environment",
|
||||||
|
add_one_variable: "(add at least one variable)",
|
||||||
import_curl: "Import cURL",
|
import_curl: "Import cURL",
|
||||||
import: "Import",
|
import: "Import",
|
||||||
generate_code: "Generate code",
|
generate_code: "Generate code",
|
||||||
|
|||||||
@@ -1075,6 +1075,11 @@
|
|||||||
<div class="tab">
|
<div class="tab">
|
||||||
<collections />
|
<collections />
|
||||||
</div>
|
</div>
|
||||||
|
<input id="environment-tab" type="radio" name="side" />
|
||||||
|
<label for="environment-tab">{{ $t("environment") }}</label>
|
||||||
|
<div class="tab">
|
||||||
|
<environments @use-environment="useSelectedEnvironment($event)" />
|
||||||
|
</div>
|
||||||
<input id="sync-tab" type="radio" name="side" />
|
<input id="sync-tab" type="radio" name="side" />
|
||||||
<label for="sync-tab">{{ $t("notes") }}</label>
|
<label for="sync-tab">{{ $t("notes") }}</label>
|
||||||
<div class="tab">
|
<div class="tab">
|
||||||
@@ -1451,7 +1456,8 @@ export default {
|
|||||||
saveRequestAs: () => import("../components/collections/saveRequestAs"),
|
saveRequestAs: () => import("../components/collections/saveRequestAs"),
|
||||||
Editor: AceEditor,
|
Editor: AceEditor,
|
||||||
inputform: () => import("../components/firebase/inputform"),
|
inputform: () => import("../components/firebase/inputform"),
|
||||||
ballsfeed: () => import("../components/firebase/feeds")
|
ballsfeed: () => import("../components/firebase/feeds"),
|
||||||
|
environments: () => import("../components/environments")
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@@ -2039,6 +2045,14 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
useSelectedEnvironment(environment) {
|
||||||
|
let preRequestScriptString = ''
|
||||||
|
for (let variable of environment.variables) {
|
||||||
|
preRequestScriptString = preRequestScriptString + `pw.env.set('${variable.key}', '${variable.value}');\n`
|
||||||
|
}
|
||||||
|
this.preRequestScript = preRequestScriptString
|
||||||
|
this.showPreRequestScript = true
|
||||||
|
},
|
||||||
checkCollections() {
|
checkCollections() {
|
||||||
const checkCollectionAvailability =
|
const checkCollectionAvailability =
|
||||||
this.$store.state.postwoman.collections &&
|
this.$store.state.postwoman.collections &&
|
||||||
|
|||||||
@@ -74,6 +74,13 @@ export const state = () => ({
|
|||||||
requests: []
|
requests: []
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
environments: [
|
||||||
|
{
|
||||||
|
name: "My Env Variables",
|
||||||
|
variables: []
|
||||||
|
}
|
||||||
|
],
|
||||||
|
editingEnvironment: {},
|
||||||
selectedRequest: {},
|
selectedRequest: {},
|
||||||
editingRequest: {}
|
editingRequest: {}
|
||||||
});
|
});
|
||||||
@@ -102,6 +109,61 @@ export const mutations = {
|
|||||||
settings[key] = value;
|
settings[key] = value;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
removeVariables({ editingEnvironment }, value) {
|
||||||
|
editingEnvironment.variables = value
|
||||||
|
},
|
||||||
|
|
||||||
|
setEditingEnvironment(state, value ) {
|
||||||
|
state.editingEnvironment = {...value}
|
||||||
|
},
|
||||||
|
|
||||||
|
setVariableKey({ editingEnvironment }, { index, value }) {
|
||||||
|
editingEnvironment.variables[index].key = value;
|
||||||
|
},
|
||||||
|
|
||||||
|
setVariableValue({ editingEnvironment }, { index, value }) {
|
||||||
|
editingEnvironment.variables[index].value = value;
|
||||||
|
},
|
||||||
|
|
||||||
|
removeVariable({ editingEnvironment }, variables) {
|
||||||
|
editingEnvironment.variables = variables;
|
||||||
|
},
|
||||||
|
|
||||||
|
addVariable({ editingEnvironment }, value) {
|
||||||
|
editingEnvironment.variables.push(value);
|
||||||
|
},
|
||||||
|
|
||||||
|
replaceEnvironments(state, environments) {
|
||||||
|
state.environments = environments;
|
||||||
|
},
|
||||||
|
|
||||||
|
importAddEnvironments(state, environments) {
|
||||||
|
state.environments = [...state.environments, ...environments];
|
||||||
|
|
||||||
|
let index = 0;
|
||||||
|
for (let environment of state.environments) {
|
||||||
|
environment.environmentIndex = index;
|
||||||
|
index += 1;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
removeEnvironment({ environments }, environmentIndex) {
|
||||||
|
environments.splice(environmentIndex, 1);
|
||||||
|
},
|
||||||
|
|
||||||
|
saveEnvironment({ environments }, payload) {
|
||||||
|
const { environment, environmentIndex } = payload;
|
||||||
|
const { name } = environment;
|
||||||
|
const duplicateEnvironment = environments.some(item => {
|
||||||
|
return item.environmentIndex !== environmentIndex && item.name.toLowerCase() === name.toLowerCase()
|
||||||
|
});
|
||||||
|
if (duplicateEnvironment) {
|
||||||
|
this.$toast.info("Duplicate environment");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
environments[environmentIndex] = environment;
|
||||||
|
},
|
||||||
|
|
||||||
replaceCollections(state, collections) {
|
replaceCollections(state, collections) {
|
||||||
state.collections = collections;
|
state.collections = collections;
|
||||||
},
|
},
|
||||||
@@ -323,3 +385,9 @@ export const mutations = {
|
|||||||
state.selectedRequest = Object.assign({}, request);
|
state.selectedRequest = Object.assign({}, request);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// export const getters = {
|
||||||
|
// getEditingEnvironment: state => {
|
||||||
|
// return state.editingEnvironment
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|||||||
Reference in New Issue
Block a user