btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

: rotating_light: Lint

Browse Source
This commit is contained in:
Liyas Thomas
2019-10-25 13:44:34 +05:30
parent 96adfa0b5a
commit a09d7d76d3
35 changed files with 3133 additions and 2620 deletions
Download Patch File Download Diff File Expand all files Collapse all files

197
components/collections/importExportCollections.vue
View File

@@ -1,110 +1,117 @@
<template>
<div>
<modal v-if="show" @close="hideModel">
<div slot="header">
<ul>
<li>
<div class="flex-wrap">
<h3 class="title">Import / Export Collections</h3>
<div>
<button class="icon" @click="hideModel">
<i class="material-icons">close</i>
</button>
</div>
</div>
</li>
</ul>
<modal v-if="show" @close="hideModel">
<div slot="header">
<ul>
<li>
<div class="flex-wrap">
<h3 class="title">Import / Export Collections</h3>
<div>
<button class="icon" @click="hideModel">
<i class="material-icons">close</i>
</button>
</div>
<div slot="body">
<textarea v-model='collectionJson' rows="8">
</textarea>
</div>
<div slot="footer">
<ul>
<li>
<button class="icon" @click="openDialogChooseFileToReplaceWith">
<i class="material-icons">get_app</i>
<span>Replace with JSON</span>
<input type="file" @change="replaceWithJSON" style="display: none;" ref="inputChooseFileToReplaceWith">
</button>
</li>
<li>
<button class="icon" @click="openDialogChooseFileToImportFrom">
<i class="material-icons">get_app</i>
<span>Import from JSON</span>
<input type="file" @change="importFromJSON" style="display: none;" ref="inputChooseFileToImportFrom">
</button>
</li>
<li>
<button class="icon" @click="exportJSON">
<i class="material-icons">get_app</i>
<span>Export JSON</span>
</button>
</li>
</ul>
</div>
</modal>
</div>
</li>
</ul>
</div>
<div slot="body">
<textarea v-model="collectionJson" rows="8"></textarea>
</div>
<div slot="footer">
<ul>
<li>
<button class="icon" @click="openDialogChooseFileToReplaceWith">
<i class="material-icons">get_app</i>
<span>Replace with JSON</span>
<input
type="file"
@change="replaceWithJSON"
style="display: none;"
ref="inputChooseFileToReplaceWith"
/>
</button>
</li>
<li>
<button class="icon" @click="openDialogChooseFileToImportFrom">
<i class="material-icons">get_app</i>
<span>Import from JSON</span>
<input
type="file"
@change="importFromJSON"
style="display: none;"
ref="inputChooseFileToImportFrom"
/>
</button>
</li>
<li>
<button class="icon" @click="exportJSON">
<i class="material-icons">get_app</i>
<span>Export JSON</span>
</button>
</li>
</ul>
</div>
</modal>
</template>
<script>
import modal from "../../components/modal";
import modal from "../../components/modal";
export default {
export default {
props: {
show: Boolean,
show: Boolean
},
components: {
modal,
modal
},
computed: {
collectionJson () {
return JSON.stringify(this.$store.state.postwoman.collections, null, 2);
}
collectionJson() {
return JSON.stringify(this.$store.state.postwoman.collections, null, 2);
}
},
methods: {
hideModel() {
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 collections = JSON.parse(content);
this.$store.commit('postwoman/replaceCollections', collections);
};
reader.readAsText(this.$refs.inputChooseFileToReplaceWith.files[0]);
},
importFromJSON() {
let reader = new FileReader();
reader.onload = (event) => {
let content = event.target.result;
let collections = JSON.parse(content);
this.$store.commit('postwoman/importCollections', collections);
};
reader.readAsText(this.$refs.inputChooseFileToImportFrom.files[0]);
},
exportJSON() {
let text = this.collectionJson;
text = text.replace(/\n/g, '\r\n');
let blob = new Blob([text], {
type: 'text/json'
});
let anchor = document.createElement('a');
anchor.download = 'postwoman-collection.json';
anchor.href = window.URL.createObjectURL(blob);
anchor.target = '_blank';
anchor.style.display = 'none';
document.body.appendChild(anchor);
anchor.click();
document.body.removeChild(anchor);
}
},
};
hideModel() {
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 collections = JSON.parse(content);
this.$store.commit("postwoman/replaceCollections", collections);
};
reader.readAsText(this.$refs.inputChooseFileToReplaceWith.files[0]);
},
importFromJSON() {
let reader = new FileReader();
reader.onload = event => {
let content = event.target.result;
let collections = JSON.parse(content);
this.$store.commit("postwoman/importCollections", collections);
};
reader.readAsText(this.$refs.inputChooseFileToImportFrom.files[0]);
},
exportJSON() {
let text = this.collectionJson;
text = text.replace(/\n/g, "\r\n");
let blob = new Blob([text], {
type: "text/json"
});
let anchor = document.createElement("a");
anchor.download = "postwoman-collection.json";
anchor.href = window.URL.createObjectURL(blob);
anchor.target = "_blank";
anchor.style.display = "none";
document.body.appendChild(anchor);
anchor.click();
document.body.removeChild(anchor);
}
}
};
</script>