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

Initial Collection State System implementation

Browse Source 
Co-authored-by: Liyas Thomas <hi@liyasthomas.com>
This commit is contained in:
Andrew Bastin
2021-05-27 23:22:17 -04:00
parent ac1937f9be
commit eda8c7da41
22 changed files with 872 additions and 487 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
components/collections/graphql/Add.vue
View File

@@ -36,41 +36,32 @@
</SmartModal>
</template>
<script>
import { fb } from "~/helpers/fb"
<script lang="ts">
import Vue from "vue"
import { addGraphqlCollection } from "~/newstore/collections"
export default {
export default Vue.extend({
props: {
show: Boolean,
},
data() {
return {
name: null,
name: null as string | null,
}
},
methods: {
syncCollections() {
if (fb.currentUser !== null && fb.currentSettings[0]) {
if (fb.currentSettings[0].value) {
fb.writeCollections(
JSON.parse(
JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
),
"collectionsGraphql"
)
}
}
},
addNewCollection() {
if (!this.$data.name) {
this.$toast.info(this.$t("invalid_collection_name"))
if (!this.name) {
this.$toast.info(this.$t("invalid_collection_name").toString())
return
}
this.$store.commit("postwoman/addNewCollection", {
name: this.$data.name,
flag: "graphql",
addGraphqlCollection({
name: this.name,
folders: [],
requests: [],
})
this.syncCollections()
this.hideModal()
},
hideModal() {
@@ -78,5 +69,5 @@ export default {
this.$emit("hide-modal")
},
},
}
})
</script>

25
components/collections/graphql/AddFolder.vue
View File

@@ -36,13 +36,12 @@
</SmartModal>
</template>
<script>
import { fb } from "~/helpers/fb"
<script lang="ts">
import Vue from "vue"
export default {
export default Vue.extend({
props: {
show: Boolean,
folder: { type: Object, default: () => {} },
folderPath: { type: String, default: null },
collectionIndex: { type: Number, default: null },
},
@@ -52,25 +51,13 @@ export default {
}
},
methods: {
syncCollections() {
if (fb.currentUser !== null && fb.currentSettings[0]) {
if (fb.currentSettings[0].value) {
fb.writeCollections(
JSON.parse(
JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
),
"collectionsGraphql"
)
}
}
},
addFolder() {
// TODO: Blocking when name is null ?
this.$emit("add-folder", {
name: this.name,
folder: this.folder,
path: this.folderPath || `${this.collectionIndex}`,
})
this.syncCollections()
this.hideModal()
},
hideModal() {
@@ -78,5 +65,5 @@ export default {
this.$emit("hide-modal")
},
},
}
})
</script>

39
components/collections/graphql/Collection.vue
View File

@@ -42,7 +42,6 @@
class="icon"
@click="
$emit('add-folder', {
folder: collection,
path: `${collectionIndex}`,
})
"
@@ -135,10 +134,11 @@
</div>
</template>
<script>
import { fb } from "~/helpers/fb"
<script lang="ts">
import Vue from "vue"
import { removeGraphqlCollection } from "~/newstore/collections"
export default {
export default Vue.extend({
props: {
collectionIndex: { type: Number, default: null },
collection: { type: Object, default: () => {} },
@@ -154,38 +154,27 @@ export default {
}
},
methods: {
syncCollections() {
if (fb.currentUser !== null && fb.currentSettings[0]) {
if (fb.currentSettings[0].value) {
fb.writeCollections(
JSON.parse(
JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
),
"collectionsGraphql"
)
}
}
},
toggleShowChildren() {
this.showChildren = !this.showChildren
},
removeCollection() {
this.$store.commit("postwoman/removeCollection", {
collectionIndex: this.collectionIndex,
flag: "graphql",
})
this.$toast.error(this.$t("deleted"), {
removeGraphqlCollection(this.collectionIndex)
this.$toast.error(this.$t("deleted").toString(), {
icon: "delete",
})
this.syncCollections()
},
dropEvent({ dataTransfer }) {
dropEvent({ dataTransfer }: any) {
this.dragging = !this.dragging
// TODO: Fix this
const oldCollectionIndex = dataTransfer.getData("oldCollectionIndex")
const oldFolderIndex = dataTransfer.getData("oldFolderIndex")
const oldFolderName = dataTransfer.getData("oldFolderName")
const requestIndex = dataTransfer.getData("requestIndex")
const flag = "graphql"
this.$store.commit("postwoman/moveRequest", {
oldCollectionIndex,
newCollectionIndex: this.$props.collectionIndex,
@@ -196,8 +185,8 @@ export default {
requestIndex,
flag,
})
this.syncCollections()
// this.syncCollections()
},
},
}
})
</script>

37
components/collections/graphql/Edit.vue
View File

@@ -36,10 +36,11 @@
</SmartModal>
</template>
<script>
import { fb } from "~/helpers/fb"
<script lang="ts">
import Vue from "vue"
import { editGraphqlCollection } from "~/newstore/collections"
export default {
export default Vue.extend({
props: {
show: Boolean,
editingCollection: { type: Object, default: () => {} },
@@ -47,37 +48,21 @@ export default {
},
data() {
return {
name: null,
name: null as string | null,
}
},
methods: {
syncCollections() {
if (fb.currentUser !== null && fb.currentSettings[0]) {
if (fb.currentSettings[0].value) {
fb.writeCollections(
JSON.parse(
JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
),
"collectionsGraphql"
)
}
}
},
saveCollection() {
if (!this.$data.name) {
this.$toast.info(this.$t("invalid_collection_name"))
if (!this.name) {
this.$toast.info(this.$t("invalid_collection_name").toString())
return
}
const collectionUpdated = {
...this.$props.editingCollection,
name: this.$data.name,
name: this.name,
}
this.$store.commit("postwoman/editCollection", {
collection: collectionUpdated,
collectionIndex: this.$props.editingCollectionIndex,
flag: "graphql",
})
this.syncCollections()
editGraphqlCollection(this.editingCollectionIndex, collectionUpdated)
this.hideModal()
},
hideModal() {
@@ -85,5 +70,5 @@ export default {
this.$emit("hide-modal")
},
},
}
})
</script>

33
components/collections/graphql/EditFolder.vue
View File

@@ -36,15 +36,15 @@
</SmartModal>
</template>
<script>
import { fb } from "~/helpers/fb"
<script lang="ts">
import Vue from "vue"
import { editGraphqlFolder } from "~/newstore/collections"
export default {
export default Vue.extend({
props: {
show: Boolean,
collectionIndex: { type: Number, default: null },
folder: { type: Object, default: () => {} },
folderIndex: { type: Number, default: null },
folderPath: { type: String, default: null },
},
data() {
return {
@@ -52,27 +52,8 @@ export default {
}
},
methods: {
syncCollections() {
if (fb.currentUser !== null && fb.currentSettings[0]) {
if (fb.currentSettings[0].value) {
fb.writeCollections(
JSON.parse(
JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
),
"collectionsGraphql"
)
}
}
},
editFolder() {
this.$store.commit("postwoman/editFolder", {
collectionIndex: this.$props.collectionIndex,
folder: { ...this.$props.folder, name: this.$data.name },
folderIndex: this.$props.folderIndex,
folderName: this.$props.folder.name,
flag: "graphql",
})
this.syncCollections()
editGraphqlFolder(this.folderPath, { ...this.folder, name: this.name })
this.hideModal()
},
hideModal() {
@@ -80,5 +61,5 @@ export default {
this.$emit("hide-modal")
},
},
}
})
</script>

38
components/collections/graphql/EditRequest.vue
View File

@@ -36,53 +36,33 @@
</SmartModal>
</template>
<script>
import { fb } from "~/helpers/fb"
<script lang="ts">
import Vue from "vue"
import { editGraphqlRequest } from "~/newstore/collections"
export default {
export default Vue.extend({
props: {
show: Boolean,
collectionIndex: { type: Number, default: null },
folderIndex: { type: Number, default: null },
folderName: { type: String, default: null },
folderPath: { type: String, default: null },
request: { type: Object, default: () => {} },
requestIndex: { type: Number, default: null },
},
data() {
return {
requestUpdateData: {
name: null,
name: null as any | null,
},
}
},
methods: {
syncCollections() {
if (fb.currentUser !== null && fb.currentSettings[0]) {
if (fb.currentSettings[0].value) {
fb.writeCollections(
JSON.parse(
JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
),
"collectionsGraphql"
)
}
}
},
saveRequest() {
const requestUpdated = {
...this.$props.request,
name: this.$data.requestUpdateData.name || this.$props.request.name,
}
this.$store.commit("postwoman/editRequest", {
requestCollectionIndex: this.$props.collectionIndex,
requestFolderName: this.$props.folderName,
requestFolderIndex: this.$props.folderIndex,
requestNew: requestUpdated,
requestIndex: this.$props.requestIndex,
flag: "graphql",
})
this.syncCollections()
editGraphqlRequest(this.folderPath, this.requestIndex, requestUpdated)
this.hideModal()
},
hideModal() {
@@ -90,5 +70,5 @@ export default {
this.$emit("hide-modal")
},
},
}
})
</script>

41
components/collections/graphql/Folder.vue
View File

@@ -43,9 +43,7 @@
<button
v-close-popover
class="icon"
@click="
$emit('edit-folder', { folder, folderIndex, collectionIndex })
"
@click="$emit('edit-folder', { folder, folderPath })"
>
<i class="material-icons">edit</i>
<span>{{ $t("edit") }}</span>
@@ -122,10 +120,11 @@
</div>
</template>
<script>
import { fb } from "~/helpers/fb"
<script lang="ts">
import Vue from "vue"
import { removeGraphqlFolder } from "~/newstore/collections"
export default {
export default Vue.extend({
name: "Folder",
props: {
folder: { type: Object, default: () => {} },
@@ -143,34 +142,16 @@ export default {
}
},
methods: {
syncCollections() {
if (fb.currentUser !== null && fb.currentSettings[0]) {
if (fb.currentSettings[0].value) {
fb.writeCollections(
JSON.parse(
JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
),
"collectionsGraphql"
)
}
}
},
toggleShowChildren() {
this.showChildren = !this.showChildren
},
removeFolder() {
this.$store.commit("postwoman/removeFolder", {
collectionIndex: this.$props.collectionIndex,
folderName: this.$props.folder.name,
folderIndex: this.$props.folderIndex,
flag: "graphql",
})
this.syncCollections()
this.$toast.error(this.$t("deleted"), {
removeGraphqlFolder(this.folderPath)
this.$toast.error(this.$t("deleted").toString(), {
icon: "delete",
})
},
dropEvent({ dataTransfer }) {
dropEvent({ dataTransfer }: any) {
this.dragging = !this.dragging
const oldCollectionIndex = dataTransfer.getData("oldCollectionIndex")
const oldFolderIndex = dataTransfer.getData("oldFolderIndex")
@@ -178,6 +159,8 @@ export default {
const requestIndex = dataTransfer.getData("requestIndex")
const flag = "graphql"
// TODO: Discuss
this.$store.commit("postwoman/moveRequest", {
oldCollectionIndex,
newCollectionIndex: this.$props.collectionIndex,
@@ -188,8 +171,8 @@ export default {
requestIndex,
flag,
})
this.syncCollections()
// this.syncCollections()
},
},
}
})
</script>

39
components/collections/graphql/ImportExport.vue
View File

@@ -131,6 +131,10 @@
<script>
import { fb } from "~/helpers/fb"
import {
graphqlCollections$,
setGraphqlCollections,
} from "~/newstore/collections"
export default {
props: {
@@ -142,13 +146,14 @@ export default {
showJsonCode: false,
}
},
subscriptions() {
return {
collections: graphqlCollections$,
}
},
computed: {
collectionJson() {
return JSON.stringify(
this.$store.state.postwoman.collectionsGraphql,
null,
2
)
return JSON.stringify(this.collections, null, 2)
},
},
methods: {
@@ -194,12 +199,8 @@ export default {
})
.then(({ files }) => {
const collections = JSON.parse(Object.values(files)[0].content)
this.$store.commit("postwoman/replaceCollections", {
data: collections,
flag: "graphql",
})
setGraphqlCollections(collections)
this.fileImported()
this.syncToFBCollections()
})
.catch((error) => {
this.failedImport()
@@ -238,12 +239,8 @@ export default {
this.failedImport()
return
}
this.$store.commit("postwoman/replaceCollections", {
data: collections,
flag: "graphql",
})
setGraphqlCollections(collections)
this.fileImported()
this.syncToFBCollections()
}
reader.readAsText(this.$refs.inputChooseFileToReplaceWith.files[0])
this.$refs.inputChooseFileToReplaceWith.value = ""
@@ -310,18 +307,6 @@ export default {
})
this.fileImported()
},
syncToFBCollections() {
if (fb.currentUser !== null && fb.currentSettings[0]) {
if (fb.currentSettings[0].value) {
fb.writeCollections(
JSON.parse(
JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
),
"collectionsGraphql"
)
}
}
},
fileImported() {
this.$toast.info(this.$t("file_imported"), {
icon: "folder_shared",

42
components/collections/graphql/Request.vue
View File

@@ -32,11 +32,9 @@
class="icon"
@click="
$emit('edit-request', {
collectionIndex,
folderIndex,
folderName,
request,
requestIndex,
folderPath,
})
"
>
@@ -62,15 +60,14 @@
</div>
</template>
<script>
import { fb } from "~/helpers/fb"
<script lang="ts">
import Vue from "vue"
import { removeGraphqlRequest } from "~/newstore/collections"
export default {
export default Vue.extend({
props: {
request: { type: Object, default: () => {} },
collectionIndex: { type: Number, default: null },
folderIndex: { type: Number, default: null },
folderName: { type: String, default: null },
folderPath: { type: String, default: null },
requestIndex: { type: Number, default: null },
doc: Boolean,
},
@@ -81,43 +78,26 @@ export default {
}
},
methods: {
syncCollections() {
if (fb.currentUser !== null && fb.currentSettings[0]) {
if (fb.currentSettings[0].value) {
fb.writeCollections(
JSON.parse(
JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
),
"collectionsGraphql"
)
}
}
},
selectRequest() {
this.$store.commit("postwoman/selectGraphqlRequest", {
request: this.request,
})
},
dragStart({ dataTransfer }) {
dragStart({ dataTransfer }: any) {
this.dragging = !this.dragging
// TODO: Discuss
dataTransfer.setData("oldCollectionIndex", this.$props.collectionIndex)
dataTransfer.setData("oldFolderIndex", this.$props.folderIndex)
dataTransfer.setData("oldFolderName", this.$props.folderName)
dataTransfer.setData("requestIndex", this.$props.requestIndex)
},
removeRequest() {
this.$store.commit("postwoman/removeRequest", {
collectionIndex: this.$props.collectionIndex,
folderName: this.$props.folderName,
requestIndex: this.$props.requestIndex,
flag: "graphql",
})
this.$toast.error(this.$t("deleted"), {
removeGraphqlRequest(this.folderPath, this.requestIndex)
this.$toast.error(this.$t("deleted").toString(), {
icon: "delete",
})
this.confirmRemove = false
this.syncCollections()
},
},
}
})
</script>

57
components/collections/graphql/index.vue
View File

@@ -26,7 +26,6 @@
/>
<CollectionsGraphqlAddFolder
:show="showModalAddFolder"
:folder="editingFolder"
:folder-path="editingFolderPath"
@add-folder="onAddFolder($event)"
@hide-modal="displayModalAddFolder(false)"
@@ -36,13 +35,12 @@
:collection-index="editingCollectionIndex"
:folder="editingFolder"
:folder-index="editingFolderIndex"
:folder-path="editingFolderPath"
@hide-modal="displayModalEditFolder(false)"
/>
<CollectionsGraphqlEditRequest
:show="showModalEditRequest"
:collection-index="editingCollectionIndex"
:folder-index="editingFolderIndex"
:folder-name="editingFolderName"
:folder-path="editingFolderPath"
:request="editingRequest"
:request-index="editingRequestIndex"
@hide-modal="displayModalEditRequest(false)"
@@ -94,7 +92,7 @@
</template>
<script>
import { fb } from "~/helpers/fb"
import { graphqlCollections$, addGraphqlFolder } from "~/newstore/collections"
export default {
props: {
@@ -119,17 +117,14 @@ export default {
filterText: "",
}
},
subscriptions() {
return {
collections: graphqlCollections$,
}
},
computed: {
collections() {
return fb.currentUser !== null
? fb.currentGraphqlCollections
: this.$store.state.postwoman.collectionsGraphql
},
filteredCollections() {
const collections =
fb.currentUser !== null
? fb.currentGraphqlCollections
: this.$store.state.postwoman.collectionsGraphql
const collections = this.collections
if (!this.filterText) return collections
@@ -216,32 +211,21 @@ export default {
this.$data.editingCollection = collection
this.$data.editingCollectionIndex = collectionIndex
this.displayModalEdit(true)
this.syncCollections()
},
onAddFolder({ name, path }) {
const flag = "graphql"
this.$store.commit("postwoman/addFolder", {
name,
path,
flag,
})
addGraphqlFolder(name, path)
this.displayModalAddFolder(false)
this.syncCollections()
},
addFolder(payload) {
const { folder, path } = payload
this.$data.editingFolder = folder
const { path } = payload
this.$data.editingFolderPath = path
this.displayModalAddFolder(true)
},
editFolder(payload) {
const { collectionIndex, folder, folderIndex } = payload
this.$data.editingCollectionIndex = collectionIndex
this.$data.editingFolder = folder
this.$data.editingFolderIndex = folderIndex
const { folder, folderPath } = payload
this.editingFolder = folder
this.editingFolderPath = folderPath
this.displayModalEditFolder(true)
this.syncCollections()
},
editRequest(payload) {
const {
@@ -257,7 +241,6 @@ export default {
this.$data.editingRequest = request
this.$data.editingRequestIndex = requestIndex
this.displayModalEditRequest(true)
this.syncCollections()
},
resetSelectedData() {
this.$data.editingCollection = undefined
@@ -267,18 +250,6 @@ export default {
this.$data.editingRequest = undefined
this.$data.editingRequestIndex = undefined
},
syncCollections() {
if (fb.currentUser !== null && fb.currentSettings[0]) {
if (fb.currentSettings[0].value) {
fb.writeCollections(
JSON.parse(
JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
),
"collectionsGraphql"
)
}
}
},
},
}
</script>