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

merge feat/teams-new-ui

Browse Source 
Co-authored-by: Isha Gupta <40794215+IshaGupta18@users.noreply.github.com>
Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>
Co-authored-by: Osheen Sachdev <45964755+oshhh@users.noreply.github.com>
Co-authored-by: Rohan Rajpal <rohan46000@gmail.com>
Co-authored-by: Raghav Gupta <raghav.gupta0307@gmail.com>
This commit is contained in:
Liyas Thomas
2021-04-26 09:37:18 +00:00
committed by GitHub
parent 6a8019c7a0
commit 1bc57f159c
27 changed files with 8278 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
components/collections/Add.vue
View File

@@ -39,10 +39,12 @@
<script>
import { fb } from "~/helpers/fb"
import { getSettingSubject } from "~/newstore/settings"
import team_utils from "~/helpers/teams/utils"
export default {
props: {
show: Boolean,
collectionsType: Object,
},
data() {
return {
@@ -68,12 +70,38 @@ export default {
this.$toast.info(this.$t("invalid_collection_name"))
return
}
this.$store.commit("postwoman/addNewCollection", {
name: this.$data.name,
flag: "rest",
})
this.$emit("hide-modal")
this.syncCollections()
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()
},
hideModal() {
this.$emit("hide-modal")

63
components/collections/ChooseType.vue Normal file
View File

@@ -0,0 +1,63 @@
<template>
<div v-if="show">
<SmartTabs styles="m-4" :id="'collections_tab'" v-on:tab-changed="updateCollectionsType">
<SmartTab :id="'my-collections'" :label="'My Collections'" :selected="true"> </SmartTab>
<SmartTab :id="'team-collections'" :label="'Team Collections'">
<ul>
<li>
<span class="select-wrapper">
<select
type="text"
id="team"
class="team"
autofocus
@change="
collectionsType.selectedTeam = myTeams[$event.target.value]
$emit('update-team-collections')
"
>
<option :key="undefined" :value="undefined" hidden disabled selected>
Select team
</option>
<option v-for="(team, index) in myTeams" :key="index" :value="index">
{{ team.name }}
</option>
</select>
</span>
</li>
</ul>
</SmartTab>
</SmartTabs>
</div>
</template>
<script>
import gql from "graphql-tag"
export default {
props: {
collectionsType: Object,
show: Boolean,
},
apollo: {
myTeams: {
query: gql`
query GetMyTeams {
myTeams {
id
name
myRole
}
}
`,
pollInterval: 10000,
},
},
methods: {
updateCollectionsType(tabID) {
this.collectionsType.type = tabID
this.$emit("update-team-collections")
},
},
}
</script>

396
components/collections/Collection.vue
View File

@@ -13,7 +13,7 @@
<i class="material-icons" v-show="!showChildren && !isFiltered">arrow_right</i>
<i class="material-icons" v-show="showChildren || isFiltered">arrow_drop_down</i>
<i class="material-icons">folder</i>
<span>{{ collection.name }}</span>
<span>{{ collection.name ? collection.name : collection.title }}</span>
</button>
<div>
<button
@@ -32,7 +32,31 @@
>
<i class="material-icons">check_box</i>
</button>
<v-popover>
<div v-if="collectionsType.type !== 'my-collections' && showChildren">
<button
class="icon"
v-if="cursor !== ''"
@click="
cursor = prevCursor
pageNo -= 1
"
>
Prev
</button>
<span v-if="cursor !== '' || (requests && requests.length === 10)">{{ pageNo }}</span>
<button
class="icon"
v-if="requests && requests.length === 10"
@click="
prevCursor = cursor
cursor = requests[requests.length - 1].id
pageNo += 1
"
>
Next
</button>
</div>
<v-popover v-if="!saveRequest">
<button class="tooltip-target icon" v-tooltip.left="$t('more')">
<i class="material-icons">more_vert</i>
</button>
@@ -48,13 +72,43 @@
</button>
</div>
<div>
<button class="icon" @click="$emit('edit-collection')" v-close-popover>
<button
v-if="
collectionsType.type == 'team-collections' &&
collectionsType.selectedTeam.myRole == 'VIEWER'
"
class="icon"
@click="$emit('edit-collection')"
v-close-popover
disabled
>
<i class="material-icons">create</i>
<div v-tooltip.left="$t('disable_new_collection')">
<span>{{ $t("edit") }}</span>
</div>
</button>
<button v-else class="icon" @click="$emit('edit-collection')" v-close-popover>
<i class="material-icons">create</i>
<span>{{ $t("edit") }}</span>
</button>
</div>
<div>
<button class="icon" @click="confirmRemove = true" v-close-popover>
<button
v-if="
collectionsType.type == 'team-collections' &&
collectionsType.selectedTeam.myRole == 'VIEWER'
"
class="icon"
@click="confirmRemove = true"
v-close-popover
disabled
>
<i class="material-icons">add</i>
<div v-tooltip.left="$t('disable_new_collection')">
<span>{{ $t("delete") }}</span>
</div>
</button>
<button v-else class="icon" @click="confirmRemove = true" v-close-popover>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
@@ -66,8 +120,10 @@
<div v-show="showChildren || isFiltered">
<ul class="flex-col">
<li
v-for="(folder, index) in collection.folders"
:key="folder.name"
v-for="(folder, index) in collectionsType.type === 'my-collections'
? collection.folders
: folders"
:key="folder.name ? folder.name : folder.title"
class="ml-8 border-l border-brdColor"
>
<CollectionsFolder
@@ -76,33 +132,62 @@
:folder-path="`${collectionIndex}/${index}`"
:collection-index="collectionIndex"
:doc="doc"
:saveRequest="saveRequest"
:collectionsType="collectionsType"
:isFiltered="isFiltered"
@add-folder="$emit('add-folder', $event)"
@edit-folder="$emit('edit-folder', $event)"
@edit-request="$emit('edit-request', $event)"
@update-team-collections="$emit('update-team-collections')"
@select-folder="
$emit('select-folder', {
name:
(collectionsType.type == 'my-collections' ? folder.name : folder.title) +
'/' +
$event.name,
id: $event.id,
reqIdx: $event.reqIdx,
})
"
/>
</li>
</ul>
<ul class="flex-col">
<li
v-for="(request, index) in collection.requests"
v-for="(request, index) in collectionsType.type === 'my-collections'
? collection.requests
: requests"
:key="index"
class="ml-8 border-l border-brdColor"
>
<CollectionsRequest
:request="request"
:request="
collectionsType.type === 'my-collections' ? request : JSON.parse(request.request)
"
:collection-index="collectionIndex"
:folder-index="-1"
:folder-name="collection.name"
:request-index="index"
:request-index="collectionsType.type === 'my-collections' ? index : request.id"
:doc="doc"
@edit-request="$emit('edit-request', $event)"
:saveRequest="saveRequest"
:collectionsType="collectionsType"
@edit-request="editRequest($event)"
@select-request="
$emit('select-folder', {
name: $event.name,
id: collection.id,
reqIdx: $event.idx,
})
"
/>
</li>
</ul>
<ul>
<li
v-if="collection.folders.length === 0 && collection.requests.length === 0"
v-if="
(folders == undefined || folders.length === 0) &&
(requests == undefined || requests.length === 0)
"
class="flex ml-8 border-l border-brdColor"
>
<p class="info">
@@ -123,6 +208,7 @@
<script>
import { fb } from "~/helpers/fb"
import { getSettingSubject } from "~/newstore/settings"
import gql from "graphql-tag"
export default {
props: {
@@ -131,6 +217,8 @@ export default {
doc: Boolean,
isFiltered: Boolean,
selected: Boolean,
saveRequest: Boolean,
collectionsType: Object,
},
data() {
return {
@@ -138,6 +226,9 @@ export default {
dragging: false,
selectedFolder: {},
confirmRemove: false,
prevCursor: "",
cursor: "",
pageNo: 0,
}
},
subscriptions() {
@@ -145,7 +236,237 @@ export default {
SYNC_COLLECTIONS: getSettingSubject("syncCollections"),
}
},
apollo: {
requests: {
query: gql`
query getCollectionRequests($collectionID: String!, $cursor: String) {
requestsInCollection(collectionID: $collectionID, cursor: $cursor) {
id
title
request
}
}
`,
subscribeToMore: [
{
document: gql`
subscription teamRequestAdded($teamID: String!) {
teamRequestAdded(teamID: $teamID) {
id
request
title
collection {
id
title
}
}
}
`,
variables() {
return { teamID: this.$props.collectionsType.selectedTeam.id }
},
skip() {
return this.$props.collectionsType.selectedTeam === undefined
},
updateQuery(previousResult, { subscriptionData }) {
if (
subscriptionData.data.teamRequestAdded.collection.id === this.$props.collection.id
) {
previousResult.requestsInCollection.push({
id: subscriptionData.data.teamRequestAdded.id,
request: subscriptionData.data.teamRequestAdded.request,
title: subscriptionData.data.teamRequestAdded.title,
__typename: subscriptionData.data.teamRequestAdded.__typename,
})
return previousResult
}
},
},
{
document: gql`
subscription teamRequestUpdated($teamID: String!) {
teamRequestUpdated(teamID: $teamID) {
id
request
title
collection {
id
title
}
}
}
`,
variables() {
return { teamID: this.$props.collectionsType.selectedTeam.id }
},
skip() {
return this.$props.collectionsType.selectedTeam === undefined
},
updateQuery(previousResult, { subscriptionData }) {
if (
subscriptionData.data.teamRequestUpdated.collection.id === this.$props.collection.id
) {
const index = previousResult.requestsInCollection.findIndex(
(x) => x.id === subscriptionData.data.teamRequestUpdated.id
)
previousResult.requestsInCollection[index].title =
subscriptionData.data.teamRequestUpdated.title
previousResult.requestsInCollection[index].request =
subscriptionData.data.teamRequestUpdated.request
return previousResult
}
},
},
{
document: gql`
subscription teamRequestDeleted($teamID: String!) {
teamRequestDeleted(teamID: $teamID)
}
`,
variables() {
return { teamID: this.$props.collectionsType.selectedTeam.id }
},
skip() {
return this.$props.collectionsType.selectedTeam === undefined
},
updateQuery(previousResult, { subscriptionData }) {
const index = previousResult.requestsInCollection.findIndex(
(x) => x.id === subscriptionData.data.teamRequestDeleted
)
if (index !== -1) previousResult.requestsInCollection.splice(index, 1)
return previousResult
},
},
],
variables() {
return {
collectionID: this.$props.collection.id,
cursor: this.$data.cursor,
}
},
update: (response) => response.requestsInCollection,
skip() {
return this.$props.collection.id === undefined
},
fetchPolicy: "no-cache",
},
folders: {
query: gql`
query getCollectionChildren($collectionID: String!) {
collection(collectionID: $collectionID) {
children {
id
title
}
}
}
`,
subscribeToMore: [
{
document: gql`
subscription teamCollectionAdded($teamID: String!) {
teamCollectionAdded(teamID: $teamID) {
id
title
parent {
id
title
}
}
}
`,
variables() {
return { teamID: this.$props.collectionsType.selectedTeam.id }
},
skip() {
return this.$props.collectionsType.selectedTeam === undefined
},
updateQuery(previousResult, { subscriptionData }) {
if (subscriptionData.data.teamCollectionAdded.parent.id === this.$props.collection.id) {
previousResult.collection.children.push({
id: subscriptionData.data.teamCollectionAdded.id,
title: subscriptionData.data.teamCollectionAdded.title,
__typename: subscriptionData.data.teamCollectionAdded.__typename,
})
return previousResult
}
},
},
{
document: gql`
subscription teamCollectionUpdated($teamID: String!) {
teamCollectionUpdated(teamID: $teamID) {
id
title
parent {
id
title
}
}
}
`,
variables() {
return { teamID: this.$props.collectionsType.selectedTeam.id }
},
skip() {
return this.$props.collectionsType.selectedTeam === undefined
},
updateQuery(previousResult, { subscriptionData }) {
if (
subscriptionData.data.teamCollectionUpdated.parent.id === this.$props.collection.id
) {
const index = previousResult.collection.children.findIndex(
(x) => x.id === subscriptionData.data.teamCollectionUpdated.id
)
previousResult.collection.children[index].title =
subscriptionData.data.teamCollectionUpdated.title
return previousResult
}
},
},
{
document: gql`
subscription teamCollectionRemoved($teamID: String!) {
teamCollectionRemoved(teamID: $teamID)
}
`,
variables() {
return { teamID: this.$props.collectionsType.selectedTeam.id }
},
skip() {
return this.$props.collectionsType.selectedTeam === undefined
},
updateQuery(previousResult, { subscriptionData }) {
const index = previousResult.collection.children.findIndex(
(x) => x.id === subscriptionData.data.teamCollectionRemoved
)
if (index !== -1) previousResult.collection.children.splice(index, 1)
return previousResult
},
},
],
variables() {
return {
collectionID: this.$props.collection.id,
}
},
update: (response) => response.collection.children,
skip() {
return this.$props.collection.id === undefined
},
fetchPolicy: "no-cache",
},
},
methods: {
editRequest(event) {
this.$emit("edit-request", event)
if (this.$props.saveRequest)
this.$emit("select-folder", {
name: this.$data.collection.name,
id: this.$data.collection.id,
reqIdx: event.requestIndex,
})
},
syncCollections() {
if (fb.currentUser !== null && this.SYNC_COLLECTIONS) {
fb.writeCollections(
@@ -155,17 +476,54 @@ export default {
}
},
toggleShowChildren() {
if (this.$props.saveRequest)
this.$emit("select-folder", { name: "", id: this.$props.collection.id, reqIdx: "" })
this.showChildren = !this.showChildren
},
removeCollection() {
this.$store.commit("postwoman/removeCollection", {
collectionIndex: this.collectionIndex,
flag: "rest",
})
this.$toast.error(this.$t("deleted"), {
icon: "delete",
})
this.syncCollections()
if (this.collectionsType.type == "my-collections") {
this.$store.commit("postwoman/removeCollection", {
collectionIndex: this.collectionIndex,
flag: "rest",
})
this.$toast.error(this.$t("deleted"), {
icon: "delete",
})
this.syncCollections()
} else if (this.collectionsType.type == "team-collections") {
if (this.collectionsType.selectedTeam.myRole != "VIEWER") {
this.$apollo
.mutate({
// Query
mutation: gql`
mutation($collectionID: String!) {
deleteCollection(collectionID: $collectionID)
}
`,
// Parameters
variables: {
collectionID: this.collection.id,
},
})
.then((data) => {
// Result
this.$toast.success(this.$t("deleted"), {
icon: "delete",
})
console.log(data)
this.$emit("update-team-collections")
})
.catch((error) => {
// Error
this.$toast.error(this.$t("error_occurred"), {
icon: "done",
})
console.error(error)
})
}
}
this.confirmRemove = false
},
dropEvent({ dataTransfer }) {
this.dragging = !this.dragging

44
components/collections/Edit.vue
View File

@@ -39,12 +39,14 @@
<script>
import { fb } from "~/helpers/fb"
import { getSettingSubject } from "~/newstore/settings"
import team_utils from "~/helpers/teams/utils"
export default {
props: {
show: Boolean,
editingCollection: Object,
editingCollectionIndex: Number,
collectionsType: Object,
},
data() {
return {
@@ -70,20 +72,42 @@ export default {
this.$toast.info(this.$t("invalid_collection_name"))
return
}
const collectionUpdated = {
...this.$props.editingCollection,
name: this.$data.name,
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.$store.commit("postwoman/editCollection", {
collection: collectionUpdated,
collectionIndex: this.$props.editingCollectionIndex,
flag: "rest",
})
this.$emit("hide-modal")
this.syncCollections()
this.hideModal()
},
hideModal() {
this.$emit("hide-modal")
this.$data.name = undefined
},
},
}

40
components/collections/EditFolder.vue
View File

@@ -39,6 +39,7 @@
<script>
import { fb } from "~/helpers/fb"
import { getSettingSubject } from "~/newstore/settings"
import team_utils from "~/helpers/teams/utils"
export default {
props: {
@@ -46,6 +47,7 @@ export default {
collectionIndex: Number,
folder: Object,
folderIndex: Number,
collectionsType: Object,
},
data() {
return {
@@ -67,15 +69,37 @@ export default {
}
},
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: "rest",
})
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.syncCollections()
},
hideModal() {
this.$emit("hide-modal")

44
components/collections/EditRequest.vue
View File

@@ -39,6 +39,7 @@
<script>
import { fb } from "~/helpers/fb"
import { getSettingSubject } from "~/newstore/settings"
import team_utils from "~/helpers/teams/utils"
export default {
props: {
@@ -47,7 +48,8 @@ export default {
folderIndex: Number,
folderName: String,
request: Object,
requestIndex: Number,
requestIndex: [String, Number],
collectionsType: Object,
},
data() {
return {
@@ -76,17 +78,39 @@ export default {
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: "rest",
})
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.syncCollections()
},
hideModal() {
this.$emit("hide-modal")

336
components/collections/Folder.vue
View File

@@ -14,10 +14,34 @@
<i class="material-icons" v-show="!showChildren && !isFiltered">arrow_right</i>
<i class="material-icons" v-show="showChildren || isFiltered">arrow_drop_down</i>
<i class="material-icons">folder_open</i>
<span>{{ folder.name }}</span>
<span>{{ folder.name ? folder.name : folder.title }}</span>
</button>
</div>
<v-popover>
<div v-if="collectionsType.type !== 'my-collections' && showChildren">
<button
class="icon"
v-if="cursor !== ''"
@click="
cursor = prevCursor
pageNo -= 1
"
>
Prev
</button>
<span v-if="cursor !== '' || (requests && requests.length === 10)">{{ pageNo }}</span>
<button
class="icon"
v-if="requests && requests.length === 10"
@click="
prevCursor = cursor
cursor = requests[requests.length - 1].id
pageNo += 1
"
>
Next
</button>
</div>
<v-popover v-if="!saveRequest">
<button class="tooltip-target icon" v-tooltip.left="$t('more')">
<i class="material-icons">more_vert</i>
</button>
@@ -52,9 +76,9 @@
</v-popover>
</div>
<div v-show="showChildren || isFiltered">
<ul v-if="folder.folders && folder.folders.length" class="flex-col">
<ul v-if="folders && folders.length" class="flex-col">
<li
v-for="(subFolder, subFolderIndex) in folder.folders"
v-for="(subFolder, subFolderIndex) in folders"
:key="subFolder.name"
class="ml-8 border-l border-brdColor"
>
@@ -63,38 +87,52 @@
:folder-index="subFolderIndex"
:collection-index="collectionIndex"
:doc="doc"
:saveRequest="saveRequest"
:collectionsType="collectionsType"
:folder-path="`${folderPath}/${subFolderIndex}`"
@add-folder="$emit('add-folder', $event)"
@edit-folder="$emit('edit-folder', $event)"
@edit-request="$emit('edit-request', $event)"
@update-team-collections="$emit('update-team-collections')"
@select-folder="
$emit('select-folder', {
name: subFolder.name + '/' + $event.name,
id: subFolder.id,
reqIdx: $event.reqIdx,
})
"
/>
</li>
</ul>
<ul class="flex-col">
<li
v-for="(request, index) in folder.requests"
v-for="(request, index) in requests"
:key="index"
class="flex ml-8 border-l border-brdColor"
>
<CollectionsRequest
:request="request"
:request="
collectionsType.type == 'my-collections' ? request : JSON.parse(request.request)
"
:collection-index="collectionIndex"
:folder-index="folderIndex"
:folder-name="folder.name"
:request-index="index"
:request-index="collectionsType.type === 'my-collections' ? index : request.id"
:doc="doc"
:saveRequest="saveRequest"
:collectionsType="collectionsType"
@edit-request="$emit('edit-request', $event)"
@select-request="
$emit('select-folder', {
name: $event.name,
id: folder.id,
reqIdx: $event.idx,
})
"
/>
</li>
</ul>
<ul
v-if="
folder.folders &&
folder.folders.length === 0 &&
folder.requests &&
folder.requests.length === 0
"
>
<ul v-if="folders && folders.length === 0 && requests && requests.length === 0">
<li class="flex ml-8 border-l border-brdColor">
<p class="info"><i class="material-icons">not_interested</i> {{ $t("folder_empty") }}</p>
</li>
@@ -112,6 +150,8 @@
<script>
import { fb } from "~/helpers/fb"
import { getSettingSubject } from "~/newstore/settings"
import team_utils from "~/helpers/teams/utils"
import gql from "graphql-tag"
export default {
name: "folder",
@@ -121,13 +161,18 @@ export default {
collectionIndex: Number,
folderPath: String,
doc: Boolean,
saveRequest: Boolean,
isFiltered: Boolean,
collectionsType: Object,
},
data() {
return {
showChildren: false,
dragging: false,
confirmRemove: false,
prevCursor: "",
cursor: "",
pageNo: 0,
}
},
subscriptions() {
@@ -135,6 +180,221 @@ export default {
SYNC_COLLECTIONS: getSettingSubject("syncCollections"),
}
},
apollo: {
folders: {
query: gql`
query getCollectionChildren($collectionID: String!) {
collection(collectionID: $collectionID) {
children {
id
title
}
}
}
`,
subscribeToMore: [
{
document: gql`
subscription teamCollectionAdded($teamID: String!) {
teamCollectionAdded(teamID: $teamID) {
id
title
parent {
id
title
}
}
}
`,
variables() {
return { teamID: this.$props.collectionsType.selectedTeam.id }
},
skip() {
return this.$props.collectionsType.selectedTeam === undefined
},
updateQuery(previousResult, { subscriptionData }) {
if (subscriptionData.data.teamCollectionAdded.parent.id === this.$props.folder.id) {
previousResult.collection.children.push({
id: subscriptionData.data.teamCollectionAdded.id,
title: subscriptionData.data.teamCollectionAdded.title,
__typename: subscriptionData.data.teamCollectionAdded.__typename,
})
return previousResult
}
},
},
{
document: gql`
subscription teamCollectionUpdated($teamID: String!) {
teamCollectionUpdated(teamID: $teamID) {
id
title
parent {
id
title
}
}
}
`,
variables() {
return { teamID: this.$props.collectionsType.selectedTeam.id }
},
skip() {
return this.$props.collectionsType.selectedTeam === undefined
},
updateQuery(previousResult, { subscriptionData }) {
if (subscriptionData.data.teamCollectionUpdated.parent.id === this.$props.folder.id) {
const index = previousResult.collection.children.findIndex(
(x) => x.id === subscriptionData.data.teamCollectionUpdated.id
)
previousResult.collection.children[index].title =
subscriptionData.data.teamCollectionUpdated.title
return previousResult
}
},
},
{
document: gql`
subscription teamCollectionRemoved($teamID: String!) {
teamCollectionRemoved(teamID: $teamID)
}
`,
variables() {
return { teamID: this.$props.collectionsType.selectedTeam.id }
},
skip() {
return this.$props.collectionsType.selectedTeam === undefined
},
updateQuery(previousResult, { subscriptionData }) {
const index = previousResult.collection.children.findIndex(
(x) => x.id === subscriptionData.data.teamCollectionRemoved
)
if (index !== -1) previousResult.collection.children.splice(index, 1)
return previousResult
},
},
],
variables() {
return {
collectionID: this.$props.folder.id,
}
},
update: (response) => response.collection.children,
skip() {
return this.$props.collectionsType.selectedTeam === undefined
},
fetchPolicy: "no-cache",
},
requests: {
query: gql`
query getCollectionRequests($collectionID: String!, $cursor: String) {
requestsInCollection(collectionID: $collectionID, cursor: $cursor) {
id
title
request
}
}
`,
subscribeToMore: [
{
document: gql`
subscription teamRequestAdded($teamID: String!) {
teamRequestAdded(teamID: $teamID) {
id
request
title
collection {
id
title
}
}
}
`,
variables() {
return { teamID: this.$props.collectionsType.selectedTeam.id }
},
skip() {
return this.$props.collectionsType.selectedTeam === undefined
},
updateQuery(previousResult, { subscriptionData }) {
if (subscriptionData.data.teamRequestAdded.collection.id === this.$props.folder.id) {
previousResult.requestsInCollection.push({
id: subscriptionData.data.teamRequestAdded.id,
request: subscriptionData.data.teamRequestAdded.request,
title: subscriptionData.data.teamRequestAdded.title,
__typename: subscriptionData.data.teamRequestAdded.__typename,
})
return previousResult
}
},
},
{
document: gql`
subscription teamRequestUpdated($teamID: String!) {
teamRequestUpdated(teamID: $teamID) {
id
request
title
collection {
id
title
}
}
}
`,
variables() {
return { teamID: this.$props.collectionsType.selectedTeam.id }
},
skip() {
return this.$props.collectionsType.selectedTeam === undefined
},
updateQuery(previousResult, { subscriptionData }) {
if (subscriptionData.data.teamRequestUpdated.collection.id === this.$props.folder.id) {
const index = previousResult.requestsInCollection.findIndex(
(x) => x.id === subscriptionData.data.teamRequestUpdated.id
)
previousResult.requestsInCollection[index].title =
subscriptionData.data.teamRequestUpdated.title
previousResult.requestsInCollection[index].request =
subscriptionData.data.teamRequestUpdated.request
return previousResult
}
},
},
{
document: gql`
subscription teamRequestDeleted($teamID: String!) {
teamRequestDeleted(teamID: $teamID)
}
`,
variables() {
return { teamID: this.$props.collectionsType.selectedTeam.id }
},
skip() {
return this.$props.collectionsType.selectedTeam === undefined
},
updateQuery(previousResult, { subscriptionData }) {
const index = previousResult.requestsInCollection.findIndex(
(x) => x.id === subscriptionData.data.teamRequestDeleted
)
if (index !== -1) previousResult.requestsInCollection.splice(index, 1)
return previousResult
},
},
],
variables() {
return {
collectionID: this.$props.folder.id,
cursor: this.$data.cursor,
}
},
update: (response) => response.requestsInCollection,
skip() {
return this.$props.collectionsType.selectedTeam === undefined
},
fetchPolicy: "no-cache",
},
},
methods: {
syncCollections() {
if (fb.currentUser !== null && this.SYNC_COLLECTIONS) {
@@ -145,19 +405,45 @@ export default {
}
},
toggleShowChildren() {
if (this.$props.saveRequest)
this.$emit("select-folder", { name: "", id: this.$props.folder.id, reqIdx: "" })
this.showChildren = !this.showChildren
},
removeFolder() {
this.$store.commit("postwoman/removeFolder", {
collectionIndex: this.$props.collectionIndex,
folderName: this.$props.folder.name,
folderIndex: this.$props.folderIndex,
flag: "rest",
})
this.syncCollections()
this.$toast.error(this.$t("deleted"), {
icon: "delete",
})
if (this.collectionsType.type == "my-collections") {
this.$store.commit("postwoman/removeFolder", {
collectionIndex: this.$props.collectionIndex,
folderName: this.$props.folder.name,
folderIndex: this.$props.folderIndex,
flag: "rest",
})
this.syncCollections()
this.$toast.error(this.$t("deleted"), {
icon: "delete",
})
} else if (this.collectionsType.type == "team-collections") {
if (this.collectionsType.selectedTeam.myRole != "VIEWER") {
team_utils
.deleteCollection(this.$apollo, this.folder.id)
.then((data) => {
// Result
this.$toast.success(this.$t("deleted"), {
icon: "delete",
})
console.log(data)
this.$emit("update-team-collections")
this.confirmRemove = false
})
.catch((error) => {
// Error
this.$toast.error(this.$t("error_occurred"), {
icon: "done",
})
console.error(error)
})
this.$emit("update-team-collections")
}
}
},
dropEvent({ dataTransfer }) {
this.dragging = !this.dragging

190
components/collections/ImportExport.vue
View File

@@ -2,9 +2,17 @@
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<div class="row-wrapper">
<h3 class="title">{{ $t("import_export") }} {{ $t("collections") }}</h3>
<h3 class="title">{{ $t(mode) }}</h3>
<div>
<v-popover>
<button
class="tooltip-target icon"
v-if="mode != 'import_export'"
@click="mode = 'import_export'"
v-tooltip.left="$t('back')"
>
<i class="material-icons">arrow_left</i>
</button>
<v-popover v-if="mode == 'import_export' && collectionsType.type == 'my-collections'">
<button class="tooltip-target icon" v-tooltip.left="$t('more')">
<i class="material-icons">more_vert</i>
</button>
@@ -45,13 +53,18 @@
</div>
</div>
<div slot="body" class="flex flex-col">
<div class="flex flex-col items-start p-2">
<div v-if="mode == 'import_export'" class="flex flex-col items-start p-2">
<span
v-tooltip="{
content: !fb.currentUser ? $t('login_first') : $t('replace_current'),
}"
>
<button :disabled="!fb.currentUser" class="icon" @click="syncCollections">
<button
:disabled="!fb.currentUser"
v-if="collectionsType.type == 'my-collections'"
class="icon"
@click="syncCollections"
>
<i class="material-icons">folder_shared</i>
<span>{{ $t("import_from_sync") }}</span>
</button>
@@ -86,26 +99,65 @@
accept="application/json"
/>
</button>
<button
class="icon"
@click="mode = 'import_from_my_collections'"
v-tooltip="$t('replace_current')"
v-if="collectionsType.type == 'team-collections'"
>
<i class="material-icons">folder_special</i>
<span>{{ "Import from My Collections" }}</span>
</button>
<button
class="icon"
@click="
() => {
mode = 'export_as_json'
getJSONCollection()
}
"
v-tooltip="$t('show_code')"
>
<i class="material-icons">folder_special</i>
<span>{{ "Export As JSON" }}</span>
</button>
</div>
<div v-if="showJsonCode" class="row-wrapper">
<div v-if="mode == 'import_from_my_collections'">
<span class="select-wrapper">
<select
type="text"
autofocus
@change="
($event) => {
mySelectedCollectionID = $event.target.value
}
"
>
<option :key="undefined" :value="undefined" hidden disabled selected>
Select Collection
</option>
<option v-for="(collection, index) in myCollections" :key="index" :value="index">
{{ collection.name }}
</option>
</select>
</span>
<button
class="icon primary"
:disabled="mySelectedCollectionID == undefined"
@click="importFromMyCollections"
>
{{ $t("import") }}
</button>
</div>
<div v-if="mode == 'export_as_json'">
<textarea v-model="collectionJson" rows="8" readonly></textarea>
</div>
</div>
<div slot="footer">
<div class="row-wrapper">
<span>
<SmartToggle :on="showJsonCode" @change="showJsonCode = $event">
{{ $t("show_code") }}
</SmartToggle>
</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 class="row-wrapper">
<span>
<button class="icon primary" @click="exportJSON" v-tooltip="$t('download_file')">
{{ $t("export") }}
</button>
</span>
</div>
</div>
</div>
</SmartModal>
@@ -114,12 +166,16 @@
<script>
import { fb } from "~/helpers/fb"
import { getSettingSubject } from "~/newstore/settings"
import team_utils from "~/helpers/teams/utils"
export default {
data() {
return {
fb,
showJsonCode: false,
mode: "import_export",
mySelectedCollectionID: undefined,
collectionJson: "",
}
},
subscriptions() {
@@ -127,10 +183,13 @@ export default {
},
props: {
show: Boolean,
collectionsType: Object,
},
computed: {
collectionJson() {
return JSON.stringify(this.$store.state.postwoman.collections, null, 2)
myCollections() {
return fb.currentUser !== null
? fb.currentCollections
: this.$store.state.postwoman.collections
},
},
methods: {
@@ -141,7 +200,7 @@ export default {
{
files: {
"hoppscotch-collections.json": {
content: this.collectionJson,
content: this.getJSONCollection(),
},
},
},
@@ -186,6 +245,8 @@ export default {
})
},
hideModal() {
this.mode = "import_export"
this.mySelectedCollectionID = undefined
this.$emit("hide-modal")
},
openDialogChooseFileToReplaceWith() {
@@ -208,11 +269,27 @@ export default {
collections = [this.parsePostmanCollection(collections)]
} else {
this.failedImport()
return
}
this.$store.commit("postwoman/replaceCollections", { data: collections, flag: "rest" })
this.fileImported()
this.syncToFBCollections()
if (this.collectionsType.type == "team-collections") {
team_utils
.replaceWithJSON(this.$apollo, collections, this.collectionsType.selectedTeam.id)
.then((status) => {
if (status) {
this.$emit("update-team-collections")
this.fileImported()
} else {
this.failedImport()
}
})
.catch((error) => {
console.log(error)
this.failedImport()
})
} else {
this.$store.commit("postwoman/replaceCollections", collections)
this.fileImported()
this.syncToFBCollections()
}
}
reader.readAsText(this.$refs.inputChooseFileToReplaceWith.files[0])
this.$refs.inputChooseFileToReplaceWith.value = ""
@@ -235,13 +312,62 @@ export default {
this.failedImport()
return
}
this.$store.commit("postwoman/importCollections", { data: collections, flag: "rest" })
this.fileImported()
this.syncToFBCollections()
if (this.collectionsType.type == "team-collections") {
team_utils
.importFromJSON(this.$apollo, collections, this.collectionsType.selectedTeam.id)
.then((status) => {
if (status) {
this.$emit("update-team-collections")
this.fileImported()
} else {
this.failedImport()
}
})
.catch((error) => {
console.log(error)
this.failedImport()
})
} else {
this.$store.commit("postwoman/importCollections", collections)
this.syncToFBCollections()
this.fileImported()
}
}
reader.readAsText(this.$refs.inputChooseFileToImportFrom.files[0])
this.$refs.inputChooseFileToImportFrom.value = ""
},
importFromMyCollections() {
team_utils
.importFromMyCollections(
this.$apollo,
this.mySelectedCollectionID,
this.collectionsType.selectedTeam.id
)
.then((success) => {
if (success) {
this.fileImported()
this.$emit("update-team-collections")
} else {
this.failedImport()
}
})
.catch((error) => {
console.log(error)
this.failedImport()
})
},
async getJSONCollection() {
if (this.collectionsType.type == "my-collections") {
this.collectionJson = JSON.stringify(this.$store.state.postwoman.collections, null, 2)
} else {
this.collectionJson = await team_utils.exportAsJSON(
this.$apollo,
this.collectionsType.selectedTeam.id
)
}
console.log(this.collectionJson)
return this.collectionJson
},
exportJSON() {
let text = this.collectionJson
text = text.replace(/\n/g, "\r\n")

54
components/collections/Request.vue
View File

@@ -18,7 +18,7 @@
<span>{{ request.name }}</span>
</button>
</div>
<v-popover>
<v-popover v-if="!saveRequest">
<button class="tooltip-target icon" v-tooltip="$t('more')">
<i class="material-icons">more_vert</i>
</button>
@@ -62,6 +62,7 @@
<script>
import { fb } from "~/helpers/fb"
import { getSettingSubject } from "~/newstore/settings"
import team_utils from "~/helpers/teams/utils"
export default {
props: {
@@ -69,8 +70,10 @@ export default {
collectionIndex: Number,
folderIndex: Number,
folderName: String,
requestIndex: Number,
requestIndex: [Number, String],
doc: Boolean,
saveRequest: Boolean,
collectionsType: Object,
},
data() {
return {
@@ -100,7 +103,12 @@ export default {
}
},
selectRequest() {
this.$store.commit("postwoman/selectRequest", { request: this.request })
if (this.$props.saveRequest)
this.$emit("select-request", {
idx: this.$props.requestIndex,
name: this.$props.request.name,
})
else this.$store.commit("postwoman/selectRequest", { request: this.request })
},
dragStart({ dataTransfer }) {
this.dragging = !this.dragging
@@ -110,17 +118,35 @@ export default {
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: "rest",
})
this.$toast.error(this.$t("deleted"), {
icon: "delete",
})
this.confirmRemove = false
this.syncCollections()
if (this.$props.collectionsType.type == "my-collections") {
this.$store.commit("postwoman/removeRequest", {
collectionIndex: this.$props.collectionIndex,
folderName: this.$props.folderName,
requestIndex: this.$props.requestIndex,
flag: "rest",
})
this.$toast.error(this.$t("deleted"), {
icon: "delete",
})
this.syncCollections()
} else if (this.$props.collectionsType.type == "team-collections") {
team_utils
.deleteRequest(this.$apollo, this.$props.requestIndex)
.then((data) => {
// Result
this.$toast.success(this.$t("deleted"), {
icon: "delete",
})
})
.catch((error) => {
// Error
this.$toast.error(this.$t("error_occurred"), {
icon: "done",
})
console.error(error)
})
this.$data.confirmRemove = false
}
},
getRequestLabelColor(method) {
return this.requestMethodLabels[method.toLowerCase()] || this.requestMethodLabels.default

100
components/collections/SaveRequest.vue
View File

@@ -13,45 +13,13 @@
<div slot="body" class="flex flex-col">
<label for="selectLabel">{{ $t("token_req_name") }}</label>
<input type="text" id="selectLabel" v-model="requestData.name" @keyup.enter="saveRequestAs" />
<ul>
<li>
<label for="selectCollection">{{ $t("collection") }}</label>
<span class="select-wrapper">
<select type="text" id="selectCollection" v-model="requestData.collectionIndex">
<option :key="undefined" :value="undefined" hidden disabled selected>
{{ $t("select_collection") }}
</option>
<option
v-for="(collection, index) in $store.state.postwoman.collections"
:key="index"
:value="index"
>
{{ collection.name }}
</option>
</select>
</span>
</li>
</ul>
<label>{{ $t("folder") }}</label>
<SmartAutoComplete
:placeholder="$t('search')"
:source="folders"
:spellcheck="false"
v-model="requestData.folderName"
<label for="selectLabel">Request path</label>
<input readonly :value="path" />
<collections
@select-folder="changeRequestDetails($event)"
@update-collection="collectionsType.type = $event"
:saveRequest="true"
/>
<ul>
<li>
<label for="selectRequest">{{ $t("request") }}</label>
<span class="select-wrapper">
<select type="text" id="selectRequest" v-model="requestData.requestIndex">
<option :key="undefined" :value="undefined">/</option>
<option v-for="(folder, index) in requests" :key="index" :value="index">
{{ folder.name }}
</option>
</select>
</span>
</li>
</ul>
</div>
<div slot="footer">
<div class="row-wrapper">
@@ -72,6 +40,7 @@
<script>
import { fb } from "~/helpers/fb"
import { getSettingSubject } from "~/newstore/settings"
import team_utils from "~/helpers/teams/utils"
export default {
props: {
@@ -81,12 +50,17 @@ export default {
data() {
return {
defaultRequestName: "Untitled Request",
path: "Path will appear here",
requestData: {
name: undefined,
collectionIndex: undefined,
folderName: undefined,
requestIndex: undefined,
},
collectionsType: {
type: "my-collections",
selectedTeam: undefined,
},
}
},
subscriptions() {
@@ -149,6 +123,15 @@ export default {
},
},
methods: {
changeRequestDetails(data) {
this.$data.requestData.folderName = data.folderName.split("/").slice(-2)[0]
this.$data.path = data.folderName
this.$data.requestData.collectionIndex = data.collectionIndex
this.$data.requestData.requestIndex = data.reqIdx
if (data.collectionsType.type !== "my-collections") {
this.$data.collectionsType = data.collectionsType
}
},
syncCollections() {
if (fb.currentUser !== null && this.SYNC_COLLECTIONS) {
fb.writeCollections(
@@ -178,16 +161,35 @@ export default {
collection: this.$data.requestData.collectionIndex,
}
this.$store.commit("postwoman/saveRequestAs", {
request: requestUpdated,
collectionIndex: this.$data.requestData.collectionIndex,
folderName: this.$data.requestData.folderName,
requestIndex: this.$data.requestData.requestIndex,
flag: "rest",
})
if (this.$data.collectionsType.type === "my-collections") {
this.$store.commit("postwoman/saveRequestAs", {
request: requestUpdated,
collectionIndex: this.$data.requestData.collectionIndex,
folderName: this.$data.requestData.folderName,
requestIndex: this.$data.requestData.requestIndex,
flag: "rest",
})
this.syncCollections()
} else {
if (this.$data.requestData.requestIndex) {
team_utils.overwriteRequestTeams(
this.$apollo,
JSON.stringify(requestUpdated),
requestUpdated.name,
this.$data.requestData.requestIndex
)
} else {
team_utils.saveRequestAsTeams(
this.$apollo,
JSON.stringify(requestUpdated),
requestUpdated.name,
this.$data.collectionsType.selectedTeam.id,
this.$data.requestData.collectionIndex
)
}
}
this.hideModal()
this.syncCollections()
},
hideModal() {
this.$emit("hide-modal")
@@ -195,12 +197,12 @@ export default {
},
}
function getFolderNames(folders, namesList) {
function getFolderNames(folders, namesList, folderName = "") {
if (folders.length) {
folders.forEach((folder) => {
namesList.push(folder.name)
namesList.push(folderName + folder.name)
if (folder.folders && folder.folders.length) {
getFolderNames(folder.folders, namesList)
getFolderNames(folder.folders, namesList, folder.name + "/")
}
})
}

187
components/collections/index.vue
View File

@@ -5,16 +5,29 @@
aria-label="Search"
type="search"
:placeholder="$t('search')"
v-if="!saveRequest"
v-model="filterText"
class="rounded-t-lg"
/>
</div>
<CollectionsAdd :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
<CollectionsChooseType
:collectionsType="collectionsType"
@update-team-collections="updateTeamCollections"
:show="showTeamCollections"
/>
<CollectionsAdd
:collectionsType="collectionsType"
:show="showModalAdd"
@update-team-collections="updateTeamCollections"
@hide-modal="displayModalAdd(false)"
/>
<CollectionsEdit
:show="showModalEdit"
:editing-collection="editingCollection"
:editing-collection-index="editingCollectionIndex"
:collectionsType="collectionsType"
@hide-modal="displayModalEdit(false)"
@update-team-collections="updateTeamCollections"
/>
<CollectionsAddFolder
:show="showModalAddFolder"
@@ -28,6 +41,7 @@
:collection-index="editingCollectionIndex"
:folder="editingFolder"
:folder-index="editingFolderIndex"
:collectionsType="collectionsType"
@hide-modal="displayModalEditFolder(false)"
/>
<CollectionsEditRequest
@@ -37,18 +51,45 @@
:folder-name="editingFolderName"
:request="editingRequest"
:request-index="editingRequestIndex"
:collectionsType="collectionsType"
@hide-modal="displayModalEditRequest(false)"
@update-team-collections="updateTeamCollections"
/>
<CollectionsImportExport
:show="showModalImportExport"
:collectionsType="collectionsType"
@hide-modal="displayModalImportExport(false)"
@update-team-collections="updateTeamCollections"
/>
<div class="border-b row-wrapper border-brdColor">
<button class="icon" @click="displayModalAdd(true)">
<button
v-if="
collectionsType.type == 'team-collections' &&
(collectionsType.selectedTeam == undefined ||
collectionsType.selectedTeam.myRole == 'VIEWER') &&
!saveRequest
"
class="icon"
@click="displayModalAdd(true)"
disabled
>
<i class="material-icons">add</i>
<div v-tooltip.left="$t('disable_new_collection')">
<span>{{ $t("new") }}</span>
</div>
</button>
<button v-else-if="!saveRequest" class="icon" @click="displayModalAdd(true)">
<i class="material-icons">add</i>
<span>{{ $t("new") }}</span>
</button>
<button class="icon" @click="displayModalImportExport(true)">
<button
v-if="!saveRequest"
:disabled="
collectionsType.type == 'team-collections' && collectionsType.selectedTeam == undefined
"
class="icon"
@click="displayModalImportExport(true)"
>
{{ $t("import_export") }}
</button>
</div>
@@ -65,11 +106,26 @@
:doc="doc"
:isFiltered="filterText.length > 0"
:selected="selected.some((coll) => coll == collection)"
:saveRequest="saveRequest"
:collectionsType="collectionsType"
@edit-collection="editCollection(collection, index)"
@add-folder="addFolder($event)"
@edit-folder="editFolder($event)"
@edit-request="editRequest($event)"
@select-collection="$emit('use-collection', collection)"
@update-team-collections="updateTeamCollections"
@select-collection="$emit('use-collection', index)"
@select-folder="
$emit('select-folder', {
folderName:
(collectionsType.type == 'my-collections' ? collection.name : collection.title) +
'/' +
$event.name,
collectionIndex: collectionsType.type == 'my-collections' ? index : $event.id,
reqIdx: $event.reqIdx,
collectionsType: collectionsType,
folderId: $event.id,
})
"
@unselect-collection="$emit('remove-collection', collection)"
/>
</li>
@@ -90,11 +146,14 @@
<script>
import { fb } from "~/helpers/fb"
import { getSettingSubject } from "~/newstore/settings"
import gql from "graphql-tag"
import team_utils from "~/helpers/teams/utils"
export default {
props: {
doc: Boolean,
selected: { type: Array, default: () => [] },
saveRequest: Boolean,
},
data() {
return {
@@ -113,6 +172,11 @@ export default {
editingRequest: undefined,
editingRequestIndex: undefined,
filterText: "",
collectionsType: {
type: "my-collections",
selectedTeam: undefined,
},
teamCollections: {},
}
},
subscriptions() {
@@ -120,17 +184,59 @@ export default {
SYNC_COLLECTIONS: getSettingSubject("syncCollections"),
}
},
apollo: {
myTeams: {
query: gql`
query GetMyTeams {
myTeams {
id
name
myRole
}
}
`,
pollInterval: 10000,
},
},
watch: {
"collectionsType.type": function emitstuff() {
this.$emit("update-collection", this.$data.collectionsType.type)
},
},
computed: {
showTeamCollections() {
if (fb.currentUser == null) {
this.collectionsType.type = "my-collections"
}
return fb.currentUser !== null
},
collections() {
return fb.currentUser !== null
? fb.currentCollections
: this.$store.state.postwoman.collections
},
filteredCollections() {
const collections =
fb.currentUser !== null ? fb.currentCollections : this.$store.state.postwoman.collections
let collections = null
if (this.collectionsType.type == "my-collections") {
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.teamCollections[this.collectionsType.selectedTeam.id]
} else {
collections = []
}
}
if (!this.filterText) {
return collections
}
if (!this.filterText) return collections
if (this.collectionsType.type == "team-collections") {
return []
}
const filterText = this.filterText.toLowerCase()
const filteredCollections = []
@@ -154,7 +260,10 @@ export default {
}
}
if (filteredRequests.length + filteredFolders.length > 0) {
if (
filteredRequests.length + filteredFolders.length > 0 ||
collection.name.toLowerCase().includes(filterText)
) {
const filteredCollection = Object.assign({}, collection)
filteredCollection.requests = filteredRequests
filteredCollection.folders = filteredFolders
@@ -175,6 +284,18 @@ export default {
document.addEventListener("keydown", this._keyListener.bind(this))
},
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)
})
.catch((error) => {
console.log(error)
})
},
displayModalAdd(shouldDisplay) {
this.showModalAdd = shouldDisplay
},
@@ -207,16 +328,50 @@ export default {
this.displayModalEdit(true)
this.syncCollections()
},
onAddFolder({ name, path }) {
onAddFolder({ name, folder, path }) {
const flag = "rest"
this.$store.commit("postwoman/addFolder", {
name,
path,
flag,
})
if (this.collectionsType.type === "my-collections") {
this.$store.commit("postwoman/addFolder", {
name,
path,
flag,
})
this.syncCollections()
} else if (this.collectionsType.type === "team-collections") {
if (this.collectionsType.selectedTeam.myRole != "VIEWER") {
this.$apollo
.mutate({
mutation: gql`
mutation($childTitle: String!, $collectionID: String!) {
createChildCollection(childTitle: $childTitle, collectionID: $collectionID) {
id
}
}
`,
// Parameters
variables: {
childTitle: name,
collectionID: folder.id,
},
})
.then((data) => {
// Result
this.$toast.success(this.$t("folder_added"), {
icon: "done",
})
this.$emit("update-team-collections")
})
.catch((error) => {
// Error
this.$toast.error(this.$t("error_occurred"), {
icon: "done",
})
console.error(error)
})
}
}
this.displayModalAddFolder(false)
this.syncCollections()
},
addFolder(payload) {
const { folder, path } = payload
@@ -229,6 +384,7 @@ export default {
this.$data.editingCollectionIndex = collectionIndex
this.$data.editingFolder = folder
this.$data.editingFolderIndex = folderIndex
this.$data.collectionsType = this.collectionsType
this.displayModalEditFolder(true)
this.syncCollections()
},
@@ -239,6 +395,7 @@ export default {
this.$data.editingFolderName = folderName
this.$data.editingRequest = request
this.$data.editingRequestIndex = requestIndex
this.$emit("select-request", requestIndex)
this.displayModalEditRequest(true)
this.syncCollections()
},

1
components/smart/Tabs.vue
View File

@@ -117,6 +117,7 @@ export default {
this.tabs.forEach((tab) => {
tab.isActive = tab.id == id
})
this.$emit("tab-changed", id)
},
},
}

92
components/teams/Add.vue Normal file
View File

@@ -0,0 +1,92 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<ul>
<li>
<div class="row-wrapper">
<h3 class="title">{{ $t("new_team") }}</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_team')"
@keyup.enter="addNewTeam"
/>
</li>
</ul>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon primary" @click="addNewTeam">
{{ $t("save") }}
</button>
</span>
</div>
</div>
</SmartModal>
</template>
<script>
import team_utils from "~/helpers/teams/utils"
export default {
props: {
show: Boolean,
},
data() {
return {
name: undefined,
}
},
methods: {
addNewTeam() {
console.log("addNewTeam start")
// We save the user input in case of an error
const name = this.name
// We clear it early to give the UI a snappy feel
this.name = ""
if (name != null && name.replace(/\s/g, "").length < 6) {
this.$toast.error(this.$t("string_length_insufficient"), {
icon: "error",
})
console.log("String length less than 6")
return
}
// Call to the graphql mutation
team_utils
.createTeam(this.$apollo, name)
.then((data) => {
// Result
this.hideModal()
console.log(data)
})
.catch((error) => {
// Error
console.error(error)
// We restore the initial user input
this.name = name
})
},
hideModal() {
this.$data.name = undefined
this.$emit("hide-modal")
},
},
}
</script>

436
components/teams/Edit.vue Normal file
View File

@@ -0,0 +1,436 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<ul>
<li>
<div class="row-wrapper">
<h3 class="title">{{ $t("edit_team") }}</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="editingTeam.name"
@keyup.enter="saveTeam"
/>
</li>
</ul>
<ul>
<li>
<div class="row-wrapper">
<label for="memberList">{{ $t("team_member_list") }}</label>
<div></div>
</div>
</li>
</ul>
<ul v-for="(member, index) in teamMembers" :key="`new-${index}`">
<li>
<input
:placeholder="$t('email')"
:name="'param' + index"
:value="member.user.email"
readonly
/>
</li>
<li>
<span class="select-wrapper">
<v-popover>
<input
:placeholder="$t('permissions')"
:name="'value' + index"
:value="typeof member.role === 'string' ? member.role : JSON.stringify(member.role)"
readonly
/>
<template slot="popover">
<div>
<button class="icon" v-close-popover @click="member.role = 'OWNER'">OWNER</button>
</div>
<div>
<button class="icon" v-close-popover @click="member.role = 'EDITOR'">
EDITOR
</button>
</div>
<div>
<button class="icon" v-close-popover @click="member.role = 'VIEWER'">
VIEWER
</button>
</div>
</template>
</v-popover>
</span>
</li>
<div>
<li>
<button
class="icon"
@click="removeExistingTeamMember(member.user.uid)"
v-tooltip.bottom="$t('delete')"
id="member"
>
<i class="material-icons">delete</i>
</button>
</li>
</div>
</ul>
<ul v-for="(member, index) in members" :key="index">
<li>
<input
:placeholder="$t('email')"
:name="'param' + index"
v-model="member.key"
autofocus
/>
</li>
<li>
<span class="select-wrapper">
<v-popover>
<input
:placeholder="$t('permissions')"
:name="'value' + index"
:value="
typeof member.value === 'string' ? member.value : JSON.stringify(member.value)
"
readonly
/>
<template slot="popover">
<div>
<button class="icon" v-close-popover @click="member.value = 'OWNER'">
OWNER
</button>
</div>
<div>
<button class="icon" v-close-popover @click="member.value = 'EDITOR'">
EDITOR
</button>
</div>
<div>
<button class="icon" v-close-popover @click="member.value = 'VIEWER'">
VIEWER
</button>
</div>
</template>
</v-popover>
</span>
</li>
<div>
<li>
<button
class="icon"
@click="removeTeamMember(index)"
v-tooltip.bottom="$t('delete')"
id="member"
>
<i class="material-icons">delete</i>
</button>
</li>
</div>
</ul>
<ul>
<li>
<button class="icon" @click="addTeamMember">
<i class="material-icons">add</i>
<span>{{ $t("add_new") }}</span>
</button>
</li>
</ul>
</div>
<div slot="footer">
<div class="row-wrapper">
<span></span>
<span>
<button class="icon" @click="hideModal">
{{ $t("cancel") }}
</button>
<button class="icon primary" @click="saveTeam">
{{ $t("save") }}
</button>
</span>
</div>
</div>
</SmartModal>
</template>
<script>
import team_utils from "~/helpers/teams/utils"
import gql from "graphql-tag"
export default {
apollo: {
teamMembers: {
query: gql`
query GetMyTeams {
myTeams {
id
members {
user {
displayName
email
uid
}
role
}
}
}
`,
subscribeToMore: [
{
document: gql`
subscription teamMemberAdded($teamID: String!) {
teamMemberAdded(teamID: $teamID) {
role
user {
displayName
email
uid
}
}
}
`,
variables() {
return { teamID: this.$props.editingteamID }
},
skip() {
return this.$props.editingteamID === ""
},
updateQuery(previousResult, { subscriptionData }) {
const teamIdx = previousResult.myTeams.findIndex(
(x) => x.id === this.$props.editingteamID
)
previousResult.myTeams[teamIdx].members.push(subscriptionData.data.teamMemberAdded)
return previousResult
},
},
{
document: gql`
subscription teamMemberUpdated($teamID: String!) {
teamMemberUpdated(teamID: $teamID) {
role
user {
displayName
email
uid
}
}
}
`,
variables() {
return { teamID: this.$props.editingteamID }
},
skip() {
return this.$props.editingteamID === ""
},
updateQuery(previousResult, { subscriptionData }) {
const teamIdx = previousResult.myTeams.findIndex(
(x) => x.id === this.$props.editingteamID
)
const memberIdx = previousResult.myTeams[teamIdx].members.findIndex(
(x) => x.user.uid === subscriptionData.data.teamMemberUpdated.user.uid
)
previousResult.myTeams[teamIdx].members[memberIdx].user =
subscriptionData.data.teamMemberUpdated.user
previousResult.myTeams[teamIdx].members[memberIdx].role =
subscriptionData.data.teamMemberUpdated.role
return previousResult
},
},
{
document: gql`
subscription teamMemberRemoved($teamID: String!) {
teamMemberRemoved(teamID: $teamID)
}
`,
variables() {
return { teamID: this.$props.editingteamID }
},
skip() {
return this.$props.editingteamID === ""
},
updateQuery(previousResult, { subscriptionData }) {
const teamIdx = previousResult.myTeams.findIndex(
(x) => x.id === this.$props.editingteamID
)
const memberIdx = previousResult.myTeams[teamIdx].members.findIndex(
(x) => x.user.id === subscriptionData.data.teamMemberRemoved.id
)
if (memberIdx !== -1) previousResult.myTeams[teamIdx].members.splice(memberIdx, 1)
return previousResult
},
},
],
update(response) {
const teamIdx = response.myTeams.findIndex((x) => x.id === this.$props.editingteamID)
return response.myTeams[teamIdx].members
},
skip() {
return this.$props.editingteamID === ""
},
},
},
props: {
show: Boolean,
editingTeam: Object,
editingteamID: String,
},
data() {
return {
rename: null,
doneButton: '<i class="material-icons">done</i>',
members: [],
}
},
computed: {
editingTeamCopy() {
return this.editingTeam
},
name: {
get() {
return this.editingTeam.name
},
set(name) {
this.rename = name
},
},
},
methods: {
addTeamMember() {
let value = { key: "", value: "" }
this.members.push(value)
console.log("addTeamMember")
},
removeExistingTeamMember(userID) {
team_utils
.removeTeamMember(this.$apollo, userID, this.editingteamID)
.then((data) => {
// Result
this.$toast.success(this.$t("user_removed"), {
icon: "done",
})
this.hideModal()
})
.catch((error) => {
// Error
this.$toast.error(this.$t("error_occurred"), {
icon: "done",
})
console.error(error)
})
},
removeTeamMember(index) {
this.members.splice(index, 1)
console.log("removeTeamMember")
},
validateEmail(emailID) {
if (/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(emailID)) {
return true
}
return false
},
saveTeam() {
if (this.$data.rename !== null && this.$data.rename.replace(/\s/g, "").length < 6) {
this.$toast.error(this.$t("string_length_insufficient"), {
icon: "error",
})
console.log("String length less than 6")
return
}
console.log("saveTeam", this.members)
this.$data.members.forEach((element) => {
if (!this.validateEmail(element.key)) {
this.$toast.error(this.$t("invalid_emailID_format"), {
icon: "error",
})
console.log("Email id format invalid")
return
}
})
this.$data.members.forEach((element) => {
// Call to the graphql mutation
team_utils
.addTeamMemberByEmail(this.$apollo, element.value, element.key, this.editingteamID)
.then((data) => {
// Result
this.$toast.success(this.$t("team_saved"), {
icon: "done",
})
this.hideModal()
})
.catch((error) => {
// Error
this.$toast.error(this.$t("error_occurred"), {
icon: "done",
})
console.error(error)
})
})
let messageShown = true
this.teamMembers.forEach((element) => {
team_utils
.updateTeamMemberRole(this.$apollo, element.user.uid, element.role, this.editingteamID)
.then((data) => {
// Result
if (messageShown) {
this.$toast.success(this.$t("role_updated"), {
icon: "done",
})
messageShown = false
}
this.hideModal()
})
.catch((error) => {
// Error
if (messageShown) {
this.$toast.error(this.$t("error_occurred"), {
icon: "done",
})
messageShown = false
}
console.error(error)
})
})
if (this.$data.rename !== null) {
const newName = this.name === this.$data.rename ? this.name : this.$data.rename
if (!/\S/.test(newName))
return this.$toast.error(this.$t("team_name_empty"), {
icon: "error",
})
// Call to the graphql mutation
if (this.name !== this.rename)
team_utils
.renameTeam(this.$apollo, newName, this.editingteamID)
.then((data) => {
// Result
this.$toast.success(this.$t("team_saved"), {
icon: "done",
})
this.hideModal()
})
.catch((error) => {
// Error
this.$toast.error(this.$t("error_occurred"), {
icon: "done",
})
console.error(error)
})
}
this.hideModal()
this.members = []
},
hideModal() {
this.$emit("hide-modal")
this.$data.name = undefined
},
},
}
</script>

173
components/teams/ImportExport.vue Normal file
View File

@@ -0,0 +1,173 @@
<template>
<SmartModal v-if="show" @close="hideModal">
<div slot="header">
<ul>
<li>
<div class="row-wrapper">
<h3 class="title">{{ $t("import_export") }} {{ $t("teams") }}</h3>
<div>
<button class="icon" @click="hideModal">
<i class="material-icons">close</i>
</button>
</div>
</div>
<div class="row-wrapper">
<span
v-tooltip="{
content: !fb.currentUser ? $t('login_first') : $t('replace_current'),
}"
>
<button :disabled="!fb.currentUser" class="icon" @click="syncTeams">
<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="teamJson" rows="8" readonly></textarea>
</div>
<div slot="footer">
<div class="row-wrapper">
<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>
</SmartModal>
</template>
<script>
import { fb } from "~/helpers/fb"
export default {
data() {
return {
fb,
}
},
props: {
show: Boolean,
teams: Array,
},
computed: {
teamJson() {
return this.teams
},
},
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 teams = JSON.parse(content)
}
reader.readAsText(this.$refs.inputChooseFileToReplaceWith.files[0])
this.fileImported()
this.syncToFBTeams()
},
importFromJSON() {
let reader = new FileReader()
reader.onload = (event) => {
let content = event.target.result
let importFileObj = JSON.parse(content)
if (importFileObj["_postman_member_scope"] === "team") {
this.importFromPostman(importFileObj)
} else {
this.importFromPostwoman(importFileObj)
}
}
reader.readAsText(this.$refs.inputChooseFileToImportFrom.files[0])
this.syncToFBTeams()
},
importFromPostwoman(teams) {
let confirmation = this.$t("file_imported")
console.log("Import from PW")
},
importFromPostman(importFileObj) {
let team = { name: importFileObj.name, members: [] }
importFileObj.values.forEach((element) =>
team.members.push({ key: element.key, value: element.value })
)
let teams = [team]
this.importFromPostwoman(teams)
},
exportJSON() {
let text = this.teamJson
text = text.replace(/\n/g, "\r\n")
let blob = new Blob([text], {
type: "text/json",
})
let anchor = document.createElement("a")
anchor.download = "postwoman-team.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",
})
},
syncTeams() {
this.fileImported()
},
syncToFBTeams() {
console.log("syncToFBTeams")
},
fileImported() {
this.$toast.info(this.$t("file_imported"), {
icon: "folder_shared",
})
},
},
}
</script>

114
components/teams/Team.vue Normal file
View File

@@ -0,0 +1,114 @@
<template>
<div class="row-wrapper">
<div>
<button class="icon" v-tooltip.right="$t('use_team')">
<i class="material-icons">group</i>
<span>{{ team.name }}</span>
</button>
</div>
<v-popover>
<button class="tooltip-target icon" v-tooltip.left="$t('more')">
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<div v-if="team.myRole === 'OWNER'">
<button class="icon" @click="$emit('edit-team')" v-close-popover>
<i class="material-icons">create</i>
<span>{{ $t("edit") }}</span>
</button>
</div>
<div v-if="team.myRole === 'OWNER'">
<button class="icon" @click="deleteTeam" v-close-popover>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
</div>
<div>
<button
class="icon"
@click="exitTeam"
v-close-popover
:disabled="!(team.myRole === 'OWNER' && team.ownersCount == 1)"
>
<i class="material-icons">remove</i>
<div
v-tooltip.left="{
content:
team.myRole === 'OWNER' && team.ownersCount == 1 ? null : $t('disable_exit'),
}"
>
<span>{{ $t("exit") }}</span>
</div>
</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>
import team_utils from "~/helpers/teams/utils"
export default {
props: {
team: Object,
teamID: String,
},
methods: {
deleteTeam() {
if (!confirm("Are you sure you want to remove this team?")) return
console.log("deleteTeam", this.teamID)
// Call to the graphql mutation
team_utils
.deleteTeam(this.$apollo, this.teamID)
.then((data) => {
// Result
this.$toast.success(this.$t("new_team_created"), {
icon: "done",
})
console.log(data)
})
.catch((error) => {
// Error
this.$toast.error(this.$t("error_occurred"), {
icon: "done",
})
console.error(error)
})
},
exitTeam() {
if (!confirm("Are you sure you want to exit this team?")) return
console.log("leaveTeam", this.teamID)
team_utils
.exitTeam(this.$apollo, this.teamID)
.then((data) => {
// Result
this.$toast.success(this.$t("team_exited"), {
icon: "done",
})
console.log(data)
})
.catch((error) => {
// Error
this.$toast.error(this.$t("error_occurred"), {
icon: "error",
})
console.error(error)
})
},
},
}
</script>

145
components/teams/index.vue Normal file
View File

@@ -0,0 +1,145 @@
<template>
<AppSection class="green" icon="history" :label="$t('teams')" ref="teams" no-legend>
<!-- debug start -->
<pre>me: {{ me }}</pre>
<pre>myTeams: {{ myTeams }}</pre>
<!-- debug end -->
<TeamsAdd :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
<TeamsEdit
:team="myTeams[0]"
:show="showModalEdit"
:editingTeam="editingTeam"
:editingteamID="editingteamID"
@hide-modal="displayModalEdit(false)"
/>
<TeamsImportExport
:show="showModalImportExport"
:teams="myTeams"
@hide-modal="displayModalImportExport(false)"
/>
<div class="row-wrapper">
<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="$apollo.queries.myTeams.loading" class="info">{{ $t("loading") }}</p>
<p v-if="myTeams.length === 0" class="info">
<i class="material-icons">help_outline</i> {{ $t("create_new_team") }}
</p>
<div v-else class="virtual-list">
<ul class="flex-col">
<li v-for="(team, index) in myTeams" :key="`team-${index}`">
<TeamsTeam :teamID="team.id" :team="team" @edit-team="editTeam(team, team.id)" />
</li>
</ul>
</div>
</AppSection>
</template>
<style scoped lang="scss">
.virtual-list {
max-height: calc(100vh - 241px);
}
ul {
display: flex;
flex-direction: column;
}
</style>
<script>
import gql from "graphql-tag"
export default {
data() {
return {
showModalImportExport: false,
showModalAdd: false,
showModalEdit: false,
editingTeam: {},
editingteamID: "",
me: {},
myTeams: [],
}
},
apollo: {
me: {
query: gql`
query GetMe {
me {
uid
}
}
`,
pollInterval: 100000,
},
myTeams: {
query: gql`
query GetMyTeams {
myTeams {
id
name
myRole
ownersCount
members {
user {
displayName
email
uid
}
role
}
}
}
`,
pollInterval: 10000,
},
},
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
},
editTeam(team, teamID) {
console.log("editTeamStart", team)
this.editingTeam = team
this.editingteamID = team.id
this.displayModalEdit(true)
this.syncTeams()
},
resetSelectedData() {
console.log("resetSelectedData")
},
syncTeams() {
console.log("syncTeams")
},
},
beforeDestroy() {
document.removeEventListener("keydown", this._keyListener)
},
}
</script>

3
helpers/fb.js
View File

@@ -32,6 +32,7 @@ export class FirebaseInstance {
this.usersCollection = this.app.firestore().collection("users")
this.currentUser = null
this.idToken = null
this.currentFeeds = []
this.currentSettings = []
this.currentHistory = []
@@ -76,6 +77,8 @@ export class FirebaseInstance {
})
this.app.auth().onAuthStateChanged((user) => {
this.currentUser$.next(user)
if (user) {
this.currentUser = user

460
helpers/teams/utils.js Normal file
View File

@@ -0,0 +1,460 @@
import gql from "graphql-tag"
async function createTeam(apollo, name) {
return apollo.mutate({
mutation: gql`
mutation($name: String!) {
createTeam(name: $name) {
name
}
}
`,
variables: {
name: name,
},
})
}
async function addTeamMemberByEmail(apollo, userRole, userEmail, teamID) {
return apollo.mutate({
mutation: gql`
mutation addTeamMemberByEmail(
$userRole: TeamMemberRole!
$userEmail: String!
$teamID: String!
) {
addTeamMemberByEmail(userRole: $userRole, userEmail: $userEmail, teamID: $teamID) {
role
}
}
`,
variables: {
userRole: userRole,
userEmail: userEmail,
teamID: teamID,
},
})
}
async function updateTeamMemberRole(apollo, userID, newRole, teamID) {
return apollo.mutate({
mutation: gql`
mutation updateTeamMemberRole(
$newRole: TeamMemberRole!
$userUid: String!
$teamID: String!
) {
updateTeamMemberRole(newRole: $newRole, userUid: $userUid, teamID: $teamID) {
role
}
}
`,
variables: {
newRole: newRole,
userUid: userID,
teamID: teamID,
},
})
}
async function renameTeam(apollo, name, teamID) {
return apollo.mutate({
mutation: gql`
mutation renameTeam($newName: String!, $teamID: String!) {
renameTeam(newName: $newName, teamID: $teamID) {
id
}
}
`,
variables: {
newName: name,
teamID: teamID,
},
})
}
async function removeTeamMember(apollo, userID, teamID) {
return apollo.mutate({
mutation: gql`
mutation removeTeamMember($userUid: String!, $teamID: String!) {
removeTeamMember(userUid: $userUid, teamID: $teamID)
}
`,
variables: {
userUid: userID,
teamID: teamID,
},
})
}
async function deleteTeam(apollo, teamID) {
let response = undefined
while (true) {
response = await apollo.mutate({
mutation: gql`
mutation($teamID: String!) {
deleteTeam(teamID: $teamID)
}
`,
variables: {
teamID: teamID,
},
})
if (response != undefined) break
}
return response
}
async function exitTeam(apollo, teamID) {
apollo.mutate({
mutation: gql`
mutation($teamID: String!) {
leaveTeam(teamID: $teamID)
}
`,
variables: {
teamID: teamID,
},
})
}
async function rootCollectionsOfTeam(apollo, teamID) {
var collections = []
var cursor = ""
while (true) {
var response = await apollo.query({
query: gql`
query rootCollectionsOfTeam($teamID: String!, $cursor: String!) {
rootCollectionsOfTeam(teamID: $teamID, cursor: $cursor) {
id
title
}
}
`,
variables: {
teamID: teamID,
cursor: cursor,
},
fetchPolicy: "no-cache",
})
if (response.data.rootCollectionsOfTeam.length == 0) break
response.data.rootCollectionsOfTeam.forEach((collection) => {
collections.push(collection)
})
cursor = collections[collections.length - 1].id
}
return collections
}
async function getCollectionChildren(apollo, collectionID) {
var children = []
var response = await apollo.query({
query: gql`
query getCollectionChildren($collectionID: String!) {
collection(collectionID: $collectionID) {
children {
id
title
}
}
}
`,
variables: {
collectionID: collectionID,
},
fetchPolicy: "no-cache",
})
response.data.collection.children.forEach((child) => {
children.push(child)
})
return children
}
async function getCollectionRequests(apollo, collectionID) {
var requests = []
var cursor = ""
while (true) {
var response = await apollo.query({
query: gql`
query getCollectionRequests($collectionID: String!, $cursor: String) {
requestsInCollection(collectionID: $collectionID, cursor: $cursor) {
id
title
request
}
}
`,
variables: {
collectionID: collectionID,
cursor: cursor,
},
fetchPolicy: "no-cache",
})
response.data.requestsInCollection.forEach((request) => {
requests.push(request)
})
if (response.data.requestsInCollection.length < 10) {
break
}
cursor = requests[requests.length - 1].id
}
return requests
}
async function renameCollection(apollo, title, id) {
let response = undefined
while (true) {
response = await apollo.mutate({
mutation: gql`
mutation($newTitle: String!, $collectionID: String!) {
renameCollection(newTitle: $newTitle, collectionID: $collectionID) {
id
}
}
`,
variables: {
newTitle: title,
collectionID: id,
},
})
if (response != undefined) break
}
return response
}
async function updateRequest(apollo, request, requestName, requestID) {
let response = undefined
while (true) {
response = await apollo.mutate({
mutation: gql`
mutation($data: UpdateTeamRequestInput!, $requestID: String!) {
updateRequest(data: $data, requestID: $requestID) {
id
}
}
`,
variables: {
data: {
request: JSON.stringify(request),
title: requestName,
},
requestID: requestID,
},
})
if (response != undefined) break
}
return response
}
async function addChildCollection(apollo, title, id) {
let response = undefined
while (true) {
response = await apollo.mutate({
mutation: gql`
mutation($childTitle: String!, $collectionID: String!) {
createChildCollection(childTitle: $childTitle, collectionID: $collectionID) {
id
}
}
`,
variables: {
childTitle: title,
collectionID: id,
},
})
if (response != undefined) break
}
return response
}
async function deleteCollection(apollo, id) {
let response = undefined
while (true) {
response = await apollo.mutate({
mutation: gql`
mutation($collectionID: String!) {
deleteCollection(collectionID: $collectionID)
}
`,
variables: {
collectionID: id,
},
})
if (response != undefined) break
}
return response
}
async function deleteRequest(apollo, requestID) {
let response = undefined
while (true) {
response = await apollo.mutate({
mutation: gql`
mutation($requestID: String!) {
deleteRequest(requestID: $requestID)
}
`,
variables: {
requestID: requestID,
},
})
if (response != undefined) break
}
return response
}
async function createNewRootCollection(apollo, title, id) {
let response = undefined
while (true) {
response = await apollo.mutate({
mutation: gql`
mutation($title: String!, $teamID: String!) {
createRootCollection(title: $title, teamID: $teamID) {
id
}
}
`,
variables: {
title: title,
teamID: id,
},
})
if (response != undefined) break
}
return response
}
async function saveRequestAsTeams(apollo, request, title, teamID, collectionID) {
await apollo.mutate({
mutation: gql`
mutation($data: CreateTeamRequestInput!, $collectionID: String!) {
createRequestInCollection(data: $data, collectionID: $collectionID) {
collection {
id
team {
id
name
}
}
}
}
`,
variables: {
collectionID: collectionID,
data: {
teamID: teamID,
title: title,
request: request,
},
},
})
}
async function overwriteRequestTeams(apollo, request, title, requestID) {
await apollo.mutate({
mutation: gql`
mutation updateRequest($data: UpdateTeamRequestInput!, $requestID: String!) {
updateRequest(data: $data, requestID: $requestID) {
id
title
}
}
`,
variables: {
requestID: requestID,
data: {
request: request,
title: title,
},
},
})
}
async function importFromMyCollections(apollo, collectionID, teamID) {
let response = await apollo.mutate({
mutation: gql`
mutation importFromMyCollections($fbCollectionPath: String!, $teamID: String!) {
importCollectionFromUserFirestore(fbCollectionPath: $fbCollectionPath, teamID: $teamID) {
id
title
}
}
`,
variables: {
fbCollectionPath: collectionID,
teamID: teamID,
},
})
return response.data != null
}
async function importFromJSON(apollo, collections, teamID) {
let response = await apollo.mutate({
mutation: gql`
mutation importFromJSON($jsonString: String!, $teamID: String!) {
importCollectionsFromJSON(jsonString: $jsonString, teamID: $teamID)
}
`,
variables: {
jsonString: JSON.stringify(collections),
teamID: teamID,
},
})
return response.data != null
}
async function replaceWithJSON(apollo, collections, teamID) {
let response = await apollo.mutate({
mutation: gql`
mutation replaceWithJSON($jsonString: String!, $teamID: String!) {
replaceCollectionsWithJSON(jsonString: $jsonString, teamID: $teamID)
}
`,
variables: {
jsonString: JSON.stringify(collections),
teamID: teamID,
},
})
return response.data != null
}
async function exportAsJSON(apollo, teamID) {
let response = await apollo.query({
query: gql`
query exportAsJSON($teamID: String!) {
exportCollectionsToJSON(teamID: $teamID)
}
`,
variables: {
teamID: teamID,
},
})
return response.data.exportCollectionsToJSON
}
export default {
rootCollectionsOfTeam: rootCollectionsOfTeam,
getCollectionChildren: getCollectionChildren,
getCollectionRequests: getCollectionRequests,
saveRequestAsTeams: saveRequestAsTeams,
overwriteRequestTeams: overwriteRequestTeams,
importFromMyCollections: importFromMyCollections,
importFromJSON: importFromJSON,
replaceWithJSON: replaceWithJSON,
exportAsJSON: exportAsJSON,
renameCollection: renameCollection,
updateRequest: updateRequest,
addChildCollection: addChildCollection,
deleteCollection: deleteCollection,
deleteRequest: deleteRequest,
createNewRootCollection: createNewRootCollection,
createTeam: createTeam,
addTeamMemberByEmail: addTeamMemberByEmail,
renameTeam: renameTeam,
deleteTeam: deleteTeam,
exitTeam: exitTeam,
updateTeamMemberRole: updateTeamMemberRole,
removeTeamMember: removeTeamMember,
}

27
lang/en-US.json
View File

@@ -305,5 +305,30 @@
"account_exists": "Account exists with different credential - Login to link both accounts",
"confirm": "Confirm",
"new_version_found": "New version found. Refresh to update.",
"size": "Size"
"size": "Size",
"exit": "Exit Team",
"string_length_insufficient": "Team name should be atleast 6 characters long",
"invalid_emailID_format": "Email ID format is invalid",
"teams": "Teams",
"new_team": "New Team",
"my_new_team": "My New Team",
"edit_team": "Edit Team",
"team_member_list": "Member List",
"invalid_team_name": "Please provide a valid name for the team",
"use_team": "Use Team",
"add_one_member": "(add at least one member)",
"permissions": "Permissions",
"email": "E-mail",
"create_new_team": "Create new team",
"new_team_created": "New team created",
"team_saved": "Team saved",
"team_name_empty": "Team name empty",
"disable_new_collection": "You do not have edit access to these collections",
"collection_added": "Collection added successfully",
"folder_added": "Folder added successfully",
"team_exited": "Team exited",
"disable_exit": "Only owner cannot exit the team",
"folder_renamed": "Folder renamed successfully",
"role_updated": "User role(s) updated successfully",
"user_removed": "User removed successfully"
}

12
layouts/default.vue
View File

@@ -14,6 +14,7 @@
</template>
<script>
import { fb } from "~/helpers/fb"
import { setupLocalPersistence } from "~/newstore/localpersistence"
import { performMigrations } from "~/helpers/migrations"
@@ -37,6 +38,17 @@ export default {
"%cContribute: https://github.com/hoppscotch/hoppscotch",
"background-color:black;padding:4px 8px;border-radius:8px;font-size:16px;color:white;"
)
// Update GraphQL Token on firebase ID Token changes
fb.idToken$.subscribe((token) => {
if (token) {
console.log(token)
this.$apolloHelpers.onLogin(token)
} else {
this.$apolloHelpers.onLogout()
}
})
const workbox = await window.$workbox
if (workbox) {
workbox.addEventListener("installed", (event) => {

8
nuxt.config.js
View File

@@ -129,8 +129,16 @@ export default {
"@nuxtjs/robots",
// https://github.com/nuxt-community/sitemap-module
"@nuxtjs/sitemap",
// https://github.com/nuxt-community/apollo-module
"@nuxtjs/apollo",
],
apollo: {
clientConfigs: {
default: "~/plugins/apollo.js",
},
},
// PWA module configuration (https://pwa.nuxtjs.org/setup)
pwa: {
meta: {

5588
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@@ -20,6 +20,8 @@
"printWidth": 100
},
"dependencies": {
"@apollo/client": "^3.3.6",
"@nuxtjs/apollo": "^4.0.1-rc.5",
"@nuxtjs/axios": "^5.13.1",
"@nuxtjs/gtm": "^2.4.0",
"@nuxtjs/robots": "^2.5.0",
@@ -42,6 +44,7 @@
"socketio-wildcard": "^2.0.0",
"tern": "^0.24.3",
"v-tooltip": "^2.1.3",
"vue-cli-plugin-apollo": "^0.22.2",
"vue-rx": "^6.2.0",
"vuejs-auto-complete": "^0.9.0",
"vuex-persist": "^3.1.3",

4
pages/index.vue
View File

@@ -546,6 +546,10 @@
<SmartTab :id="'notes'" :label="$t('notes')">
<HttpNotes />
</SmartTab>
<SmartTab :id="'teams'" :label="'Teams'">
<Teams />
</SmartTab>
</SmartTabs>
</section>
</aside>

4
pages/settings.vue
View File

@@ -1,5 +1,9 @@
<template>
<div class="page">
<div v-if="fb.currentUser">
<Teams />
</div>
<AppSection :label="$t('account')" ref="account" no-legend>
<div class="flex flex-col">
<label>{{ $t("account") }}</label>

12
plugins/apollo.js Normal file
View File

@@ -0,0 +1,12 @@
export default () => {
return {
httpEndpoint:
process.env.CONTEXT === "production"
? "https://api.hoppscotch.io/graphql"
: "https://api.hoppscotch.io/graphql",
wsEndpoint:
process.env.CONTEXT === "production"
? "wss://api.hoppscotch.io/graphql"
: "wss://api.hoppscotch.io/graphql",
}
}