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

Initial refactor of the collections list and friends

Browse Source
This commit is contained in:
Andrew Bastin
2021-05-06 20:46:29 -04:00
parent 531a9c0bc8
commit 3888584b58
9 changed files with 184 additions and 383 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
components/collections/Add.vue
View File

@@ -37,71 +37,18 @@
</template>
<script>
import { fb } from "~/helpers/fb"
import { getSettingSubject } from "~/newstore/settings"
import * as team_utils from "~/helpers/teams/utils"
export default {
props: {
show: Boolean,
collectionsType: Object,
},
data() {
return {
name: undefined,
}
},
subscriptions() {
return {
SYNC_COLLECTIONS: getSettingSubject("syncCollections"),
}
},
methods: {
syncCollections() {
if (fb.currentUser !== null && this.SYNC_COLLECTIONS) {
fb.writeCollections(
JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)),
"collections"
)
}
},
addNewCollection() {
if (!this.$data.name) {
this.$toast.info(this.$t("invalid_collection_name"))
return
}
if (this.collectionsType.type == "my-collections") {
this.$store.commit("postwoman/addNewCollection", {
name: this.$data.name,
flag: "rest",
})
this.syncCollections()
} else if (this.collectionsType.type == "team-collections") {
if (this.collectionsType.selectedTeam.myRole != "VIEWER") {
team_utils
.createNewRootCollection(
this.$apollo,
this.$data.name,
this.collectionsType.selectedTeam.id
)
.then((data) => {
// Result
this.$toast.success(this.$t("collection_added"), {
icon: "done",
})
console.log(data)
this.$emit("update-team-collections")
})
.catch((error) => {
// Error
this.$toast.error(this.$t("error_occurred"), {
icon: "done",
})
console.error(error)
})
}
}
this.hideModal()
this.$emit("submit", this.name)
},
hideModal() {
this.$emit("hide-modal")

12
components/collections/ChooseType.vue
View File

@@ -11,10 +11,7 @@
id="team"
class="team"
autofocus
@change="
collectionsType.selectedTeam = myTeams[$event.target.value]
$emit('update-team-collections')
"
@change="updateSelectedTeam(myTeams[$event.target.value])"
>
<option :key="undefined" :value="undefined" hidden disabled selected>
Select team
@@ -36,7 +33,6 @@ import gql from "graphql-tag"
export default {
props: {
collectionsType: Object,
show: Boolean,
},
apollo: {
@@ -55,8 +51,10 @@ export default {
},
methods: {
updateCollectionsType(tabID) {
this.collectionsType.type = tabID
this.$emit("update-team-collections")
this.$emit("update-collection-type", tabID)
},
updateSelectedTeam(team) {
this.$emit("update-selected-team", team)
},
},
}

1
components/collections/Collection.vue
View File

@@ -389,7 +389,6 @@ export default {
)
},
updateQuery(previousResult, { subscriptionData }) {
debugger
if (
subscriptionData.data.teamCollectionAdded.parent &&
subscriptionData.data.teamCollectionAdded.parent.id === this.$props.collection.id

60
components/collections/Edit.vue
View File

@@ -16,7 +16,7 @@
type="text"
id="selectLabel"
v-model="name"
:placeholder="editingCollection.name"
:placeholder="placeholderCollName"
@keyup.enter="saveCollection"
/>
</div>
@@ -37,73 +37,19 @@
</template>
<script>
import { fb } from "~/helpers/fb"
import { getSettingSubject } from "~/newstore/settings"
import * as team_utils from "~/helpers/teams/utils"
export default {
props: {
show: Boolean,
editingCollection: Object,
editingCollectionIndex: Number,
collectionsType: Object,
placeholderCollName: String,
},
data() {
return {
name: undefined,
}
},
subscriptions() {
return {
SYNC_COLLECTIONS: getSettingSubject("syncCollections"),
}
},
methods: {
syncCollections() {
if (fb.currentUser !== null && this.SYNC_COLLECTIONS) {
fb.writeCollections(
JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)),
"collections"
)
}
},
saveCollection() {
if (!this.$data.name) {
this.$toast.info(this.$t("invalid_collection_name"))
return
}
if (this.collectionsType.type == "my-collections") {
const collectionUpdated = {
...this.$props.editingCollection,
name: this.$data.name,
}
this.$store.commit("postwoman/editCollection", {
collection: collectionUpdated,
collectionIndex: this.$props.editingCollectionIndex,
flag: "rest",
})
this.syncCollections()
} else if (this.collectionsType.type == "team-collections") {
if (this.collectionsType.selectedTeam.myRole != "VIEWER") {
team_utils
.renameCollection(this.$apollo, this.$data.name, this.$props.editingCollection.id)
.then((data) => {
// Result
this.$toast.success("Collection Renamed", {
icon: "done",
})
this.$emit("update-team-collections")
})
.catch((error) => {
// Error
this.$toast.error(this.$t("error_occurred"), {
icon: "done",
})
console.error(error)
})
}
}
this.hideModal()
this.$emit("submit", this.name)
},
hideModal() {
this.$emit("hide-modal")

53
components/collections/EditFolder.vue
View File

@@ -37,69 +37,18 @@
</template>
<script>
import { fb } from "~/helpers/fb"
import { getSettingSubject } from "~/newstore/settings"
import * as team_utils from "~/helpers/teams/utils"
export default {
props: {
show: Boolean,
collectionIndex: Number,
folder: Object,
folderIndex: Number,
collectionsType: Object,
},
data() {
return {
name: undefined,
}
},
subscriptions() {
return {
SYNC_COLLECTIONS: getSettingSubject("syncCollections"),
}
},
methods: {
syncCollections() {
if (fb.currentUser !== null && this.SYNC_COLLECTIONS) {
fb.writeCollections(
JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)),
"collections"
)
}
},
editFolder() {
if (this.collectionsType.type == "my-collections") {
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: "rest",
})
this.syncCollections()
} else if (this.collectionsType.type == "team-collections") {
if (this.collectionsType.selectedTeam.myRole != "VIEWER") {
team_utils
.renameCollection(this.$apollo, this.$data.name, this.folder.id)
.then((data) => {
// Result
this.$toast.success(this.$t("folder_renamed"), {
icon: "done",
})
this.$emit("update-team-collections")
})
.catch((error) => {
// Error
this.$toast.error(this.$t("error_occurred"), {
icon: "done",
})
console.error(error)
})
}
}
this.hideModal()
this.$emit("submit", this.name)
},
hideModal() {
this.$emit("hide-modal")

65
components/collections/EditRequest.vue
View File

@@ -17,7 +17,7 @@
id="selectLabel"
v-model="requestUpdateData.name"
@keyup.enter="saveRequest"
:placeholder="request.name"
:placeholder="placeholderReqName"
/>
</div>
<div slot="footer">
@@ -37,19 +37,10 @@
</template>
<script>
import { fb } from "~/helpers/fb"
import { getSettingSubject } from "~/newstore/settings"
import * as team_utils from "~/helpers/teams/utils"
export default {
props: {
show: Boolean,
collectionIndex: Number,
folderIndex: Number,
folderName: String,
request: Object,
requestIndex: [String, Number],
collectionsType: Object,
placeholderReqName: String,
},
data() {
return {
@@ -58,59 +49,9 @@ export default {
},
}
},
subscriptions() {
return {
SYNC_COLLECTIONS: getSettingSubject("syncCollections"),
}
},
methods: {
syncCollections() {
if (fb.currentUser !== null && this.SYNC_COLLECTIONS) {
fb.writeCollections(
JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)),
"collections"
)
}
},
saveRequest() {
const requestUpdated = {
...this.$props.request,
name: this.$data.requestUpdateData.name || this.$props.request.name,
}
if (this.$props.collectionsType.type == "my-collections") {
this.$store.commit("postwoman/editRequest", {
requestCollectionIndex: this.$props.collectionIndex,
requestFolderName: this.$props.folderName,
requestFolderIndex: this.$props.folderIndex,
requestNew: requestUpdated,
requestIndex: this.$props.requestIndex,
flag: "rest",
})
this.syncCollections()
} else if (this.$props.collectionsType.type == "team-collections") {
if (this.collectionsType.selectedTeam.myRole != "VIEWER") {
let requestName = this.$data.requestUpdateData.name || this.$props.request.name
team_utils
.updateRequest(this.$apollo, requestUpdated, requestName, this.$props.requestIndex)
.then((data) => {
// Result
this.$toast.success("Request Renamed", {
icon: "done",
})
this.$emit("update-team-collections")
})
.catch((error) => {
// Error
this.$toast.error(this.$t("error_occurred"), {
icon: "done",
})
console.error(error)
})
}
}
this.hideModal()
this.$emit("submit", this.requestUpdateData)
},
hideModal() {
this.$emit("hide-modal")

5
components/collections/ImportExport.vue
View File

@@ -179,7 +179,9 @@ export default {
}
},
subscriptions() {
SYNC_COLLECTIONS: getSettingSubject("syncCollections")
return {
SYNC_COLLECTIONS: getSettingSubject("syncCollections"),
}
},
props: {
show: Boolean,
@@ -275,7 +277,6 @@ export default {
.replaceWithJSON(this.$apollo, collections, this.collectionsType.selectedTeam.id)
.then((status) => {
if (status) {
this.$emit("update-team-collections")
this.fileImported()
} else {
this.failedImport()

307
components/collections/index.vue
View File

@@ -12,22 +12,20 @@
</div>
<CollectionsChooseType
:collectionsType="collectionsType"
@update-team-collections="updateTeamCollections"
:show="showTeamCollections"
@update-collection-type="updateCollectionType"
@update-selected-team="updateSelectedTeam"
/>
<CollectionsAdd
:collectionsType="collectionsType"
:show="showModalAdd"
@update-team-collections="updateTeamCollections"
@submit="addNewRootCollection"
@hide-modal="displayModalAdd(false)"
/>
<CollectionsEdit
:show="showModalEdit"
:editing-collection="editingCollection"
:editing-collection-index="editingCollectionIndex"
:collectionsType="collectionsType"
:editing-coll-name="editingCollection ? editingCollection.name : ''"
@hide-modal="displayModalEdit(false)"
@update-team-collections="updateTeamCollections"
@submit="updateEditingCollection"
/>
<CollectionsAddFolder
:show="showModalAddFolder"
@@ -38,22 +36,14 @@
/>
<CollectionsEditFolder
:show="showModalEditFolder"
:collection-index="editingCollectionIndex"
:folder="editingFolder"
:folder-index="editingFolderIndex"
:collectionsType="collectionsType"
@submit="updateEditingFolder"
@hide-modal="displayModalEditFolder(false)"
/>
<CollectionsEditRequest
:show="showModalEditRequest"
:collection-index="editingCollectionIndex"
:folder-index="editingFolderIndex"
:folder-name="editingFolderName"
:request="editingRequest"
:request-index="editingRequestIndex"
:collectionsType="collectionsType"
:placeholder-req-name="editingRequest ? editingRequest.name : ''"
@submit="updateEditingRequest"
@hide-modal="displayModalEditRequest(false)"
@update-team-collections="updateTeamCollections"
/>
<CollectionsImportExport
:show="showModalImportExport"
@@ -147,8 +137,8 @@
import { fb } from "~/helpers/fb"
import { getSettingSubject } from "~/newstore/settings"
import gql from "graphql-tag"
import * as team_utils from "~/helpers/teams/utils"
import TeamCollectionAdapter from "~/helpers/teams/TeamCollectionAdapter"
import * as team_utils from "~/helpers/teams/utils"
export default {
props: {
@@ -177,7 +167,6 @@ export default {
type: "my-collections",
selectedTeam: undefined,
},
teamCollections: {},
teamCollectionAdapter: new TeamCollectionAdapter(null),
}
},
@@ -187,108 +176,6 @@ export default {
teamCollectionsNew: this.teamCollectionAdapter.collections$,
}
},
apollo: {
myTeams: {
query: gql`
query GetMyTeams {
myTeams {
id
name
myRole
}
}
`,
pollInterval: 10000,
},
$subscribe: {
teamsCollectionAdded: {
query: gql`
subscription teamCollectionAdded($teamID: String!) {
teamCollectionAdded(teamID: $teamID) {
id
title
parent {
id
title
}
}
}
`,
variables() {
return {
teamID: this.collectionsType.selectedTeam.id,
}
},
skip() {
return this.collectionsType.selectedTeam == undefined
},
result({ data }) {
console.log(data)
if (data.teamCollectionAdded.parent == null) {
debugger
this.teamCollections[this.collectionsType.selectedTeam.id].push({
id: data.teamCollectionAdded.id,
title: data.teamCollectionAdded.title,
__typename: data.teamCollectionAdded.__typename,
})
}
},
},
teamsCollectionUpdated: {
query: gql`
subscription teamCollectionUpdated($teamID: String!) {
teamCollectionUpdated(teamID: $teamID) {
id
title
parent {
id
title
}
}
}
`,
variables() {
return {
teamID: this.collectionsType.selectedTeam.id,
}
},
skip() {
return this.collectionsType.selectedTeam == undefined
},
result({ data }) {
const current = this.teamCollections[this.collectionsType.selectedTeam.id]
const index = current.findIndex((x) => x.id === data.teamCollectionUpdated.id)
if (index >= 0) {
current[index].title = data.teamCollectionUpdated.title
}
this.teamCollections[this.collectionsType.selectedTeam.id] = current
},
},
teamsCollectionRemoved: {
query: gql`
subscription teamCollectionRemoved($teamID: String!) {
teamCollectionRemoved(teamID: $teamID)
}
`,
variables() {
return {
teamID: this.collectionsType.selectedTeam.id,
}
},
skip() {
return this.collectionsType.selectedTeam == undefined
},
result({ data }) {
this.teamCollections[this.collectionsType.selectedTeam.id] = this.teamCollections[
this.collectionsType.selectedTeam.id
].filter((x) => x.id !== data.teamCollectionRemoved)
},
},
},
},
watch: {
"collectionsType.type": function emitstuff() {
this.$emit("update-collection", this.$data.collectionsType.type)
@@ -315,15 +202,9 @@ export default {
collections =
fb.currentUser !== null ? fb.currentCollections : this.$store.state.postwoman.collections
} else {
if (
this.collectionsType.selectedTeam &&
this.collectionsType.selectedTeam.id in this.teamCollections
) {
collections = this.teamCollectionsNew
} else {
collections = []
}
collections = this.teamCollectionsNew
}
if (!this.filterText) {
return collections
}
@@ -341,7 +222,9 @@ export default {
for (let request of collection.requests) {
if (request.name.toLowerCase().includes(filterText)) filteredRequests.push(request)
}
for (let folder of collection.folders) {
for (let folder of this.collectionsType.type === "team-collections"
? collection.children
: collection.folders) {
const filteredFolderRequests = []
for (let request of folder.requests) {
if (request.name.toLowerCase().includes(filterText))
@@ -379,16 +262,158 @@ export default {
},
methods: {
updateTeamCollections() {
this.$emit("select-collection-type")
if (this.collectionsType.selectedTeam == undefined) return
team_utils
.rootCollectionsOfTeam(this.$apollo, this.collectionsType.selectedTeam.id)
.then((collections) => {
this.$set(this.teamCollections, this.collectionsType.selectedTeam.id, collections)
// TODO: Remove this at some point
},
updateSelectedTeam(newSelectedTeam) {
this.collectionsType.selectedTeam = newSelectedTeam
},
updateCollectionType(newCollectionType) {
this.collectionsType.type = newCollectionType
},
// Intented to be called by the CollectionAdd modal submit event
addNewRootCollection(name) {
if (!name) {
this.$toast.info(this.$t("invalid_collection_name"))
return
}
if (this.collectionsType.type === "my-collections") {
this.$store.commit("postwoman/addNewCollection", {
name,
flag: "rest",
})
.catch((error) => {
console.log(error)
this.syncCollections()
} else if (
this.collectionsType.type === "team-collections" &&
this.collectionsType.selectedTeam.myRole !== "VIEWER"
) {
team_utils
.createNewRootCollection(this.$apollo, name, this.collectionsType.selectedTeam.id)
.then(() => {
this.$toast.success(this.$t("collection_added"), {
icon: "done",
})
})
.catch((error) => {
this.$toast.error(this.$t("error_occurred"), {
icon: "done",
})
console.error(error)
})
}
this.displayModalAdd(false)
},
// Intented to be called by CollectionEdit modal submit event
updateEditingCollection(newName) {
if (!newName) {
this.$toast.info(this.$t("invalid_collection_name"))
return
}
if (this.collectionsType.type === "my-collections") {
const collectionUpdated = {
...this.editingCollection,
name: newName,
}
this.$store.commit("postwoman/editCollection", {
collection: collectionUpdated,
collectionIndex: this.editingCollectionIndex,
flag: "rest",
})
this.syncCollections()
} else if (
this.collectionsType.type === "team-collections" &&
this.collectionsType.selectedTeam.myRole !== "VIEWER"
) {
team_utils
.renameCollection(this.$apollo, newName, this.editingCollection.id)
.then(() => {
// TODO: $t translations ?
this.$toast.success("Collection Renamed", {
icon: "done",
})
})
.catch((error) => {
this.$toast.error(this.$t("error_occurred"), {
icon: "done",
})
console.error(error)
})
}
this.displayModalEdit(false)
},
// Intended to be called by CollectionEditFolder modal submit event
updateEditingFolder(name) {
if (this.collectionsType.type == "my-collections") {
this.$store.commit("postwoman/editFolder", {
collectionIndex: this.editingCollectionIndex,
folder: { ...this.editingFolder, name: name },
folderIndex: this.editingFolderIndex,
folderName: this.editingFolder.name,
flag: "rest",
})
this.syncCollections()
} else if (
this.collectionsType.type == "team-collections" &&
this.collectionsType.selectedTeam.myRole !== "VIEWER"
) {
team_utils
.renameCollection(this.$apollo, name, this.editingFolder.id)
.then(() => {
// Result
this.$toast.success(this.$t("folder_renamed"), {
icon: "done",
})
})
.catch((error) => {
// Error
this.$toast.error(this.$t("error_occurred"), {
icon: "done",
})
console.error(error)
})
}
this.displayModalEditFolder(false)
},
// Intented to by called by CollectionsEditRequest modal submit event
updateEditingRequest(requestUpdateData) {
const requestUpdated = {
...this.editingRequest,
name: requestUpdateData.name || this.editingRequest.name,
}
if (this.collectionsType.type == "my-collections") {
this.$store.commit("postwoman/editRequest", {
requestCollectionIndex: this.editingCollectionIndex,
requestFolderName: this.editingFolderName,
requestFolderIndex: this.editingFolderIndex,
requestNew: requestUpdated,
requestIndex: this.editingRequestIndex,
flag: "rest",
})
this.syncCollections()
} else if (
this.collectionsType.type === "team-collections" &&
this.collectionsType.selectedTeam.myRole !== "VIEWER"
) {
let requestName = requestUpdateData.name || this.editingRequest.name
team_utils
.updateRequest(this.$apollo, requestUpdated, requestName, this.editingRequestIndex)
.then(() => {
this.$toast.success("Request Renamed", {
icon: "done",
})
this.$emit("update-team-collections")
})
.catch((error) => {
this.$toast.error(this.$t("error_occurred"), {
icon: "done",
})
console.error(error)
})
}
this.displayModalEditRequest(false)
},
displayModalAdd(shouldDisplay) {
this.showModalAdd = shouldDisplay
@@ -436,7 +461,7 @@ export default {
this.$apollo
.mutate({
mutation: gql`
mutation($childTitle: String!, $collectionID: String!) {
mutation CreateChildCollection($childTitle: String!, $collectionID: String!) {
createChildCollection(childTitle: $childTitle, collectionID: $collectionID) {
id
}
@@ -448,7 +473,7 @@ export default {
collectionID: folder.id,
},
})
.then((data) => {
.then(() => {
// Result
this.$toast.success(this.$t("folder_added"), {
icon: "done",