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

Merge pull request #1641 from hoppscotch/teams

Browse Source
This commit is contained in:
Liyas Thomas
2021-05-15 14:08:03 +05:30
committed by GitHub
parent c6c8b7da6a 78f7a9ba06
commit ec90365427
41 changed files with 9874 additions and 1049 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
components/collections/Add.vue
View File

@@ -37,9 +37,6 @@
</template>
<script>
import { fb } from "~/helpers/fb"
import { getSettingSubject } from "~/newstore/settings"
export default {
props: {
show: Boolean,
@@ -49,31 +46,9 @@ export default {
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
}
this.$store.commit("postwoman/addNewCollection", {
name: this.$data.name,
flag: "rest",
})
this.$emit("hide-modal")
this.syncCollections()
this.$emit("submit", this.name)
},
hideModal() {
this.$emit("hide-modal")

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

@@ -0,0 +1,78 @@
<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'"
v-if="currentUser && currentUser.eaInvited && !doc"
>
<ul>
<li>
<span class="select-wrapper">
<SmartIntersection @intersecting="onTeamSelectIntersect">
<select
type="text"
id="team"
class="team"
autofocus
@change="updateSelectedTeam(myTeams[$event.target.value])"
>
<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>
</SmartIntersection>
</span>
</li>
</ul>
</SmartTab>
</SmartTabs>
</div>
</template>
<script>
import gql from "graphql-tag"
import { currentUserInfo$ } from "~/helpers/teams/BackendUserInfo"
export default {
props: {
doc: Boolean,
show: Boolean,
},
subscriptions() {
return {
currentUser: currentUserInfo$,
}
},
apollo: {
myTeams: {
query: gql`
query GetMyTeams {
myTeams {
id
name
myRole
}
}
`,
pollInterval: 10000,
},
},
methods: {
onTeamSelectIntersect() {
// Load team data as soon as intersection
this.$apollo.queries.myTeams.refetch()
},
updateCollectionsType(tabID) {
this.$emit("update-collection-type", tabID)
},
updateSelectedTeam(team) {
this.$emit("update-selected-team", team)
},
},
}
</script>

38
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,53 +37,23 @@
</template>
<script>
import { fb } from "~/helpers/fb"
import { getSettingSubject } from "~/newstore/settings"
export default {
props: {
show: Boolean,
editingCollection: Object,
editingCollectionIndex: Number,
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
}
const collectionUpdated = {
...this.$props.editingCollection,
name: this.$data.name,
}
this.$store.commit("postwoman/editCollection", {
collection: collectionUpdated,
collectionIndex: this.$props.editingCollectionIndex,
flag: "rest",
})
this.$emit("hide-modal")
this.syncCollections()
this.$emit("submit", this.name)
},
hideModal() {
this.$emit("hide-modal")
this.$data.name = undefined
},
},
}

37
components/collections/EditFolder.vue
View File

@@ -12,13 +12,7 @@
</div>
<div slot="body" class="flex flex-col">
<label for="selectLabel">{{ $t("label") }}</label>
<input
type="text"
id="selectLabel"
v-model="name"
:placeholder="folder.name"
@keyup.enter="editFolder"
/>
<input type="text" id="selectLabel" v-model="name" @keyup.enter="editFolder" />
</div>
<div slot="footer">
<div class="row-wrapper">
@@ -37,45 +31,18 @@
</template>
<script>
import { fb } from "~/helpers/fb"
import { getSettingSubject } from "~/newstore/settings"
export default {
props: {
show: Boolean,
collectionIndex: Number,
folder: Object,
folderIndex: Number,
},
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() {
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.hideModal()
this.syncCollections()
this.$emit("submit", this.name)
},
hideModal() {
this.$emit("hide-modal")

41
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,17 +37,10 @@
</template>
<script>
import { fb } from "~/helpers/fb"
import { getSettingSubject } from "~/newstore/settings"
export default {
props: {
show: Boolean,
collectionIndex: Number,
folderIndex: Number,
folderName: String,
request: Object,
requestIndex: Number,
placeholderReqName: String,
},
data() {
return {
@@ -56,37 +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,
}
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.hideModal()
this.syncCollections()
this.$emit("submit", this.requestUpdateData)
},
hideModal() {
this.$emit("hide-modal")

195
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">Export</h3>
<div>
<v-popover>
<button
class="tooltip-target icon"
v-if="mode != 'import_export'"
@click="mode = 'import_export'"
v-tooltip.left="'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 class="m-2">
<button class="icon primary" @click="exportJSON" v-tooltip="$t('download_file')">
{{ $t("export") }}
</button>
</span>
</div>
</div>
</div>
</SmartModal>
@@ -114,23 +166,32 @@
<script>
import { fb } from "~/helpers/fb"
import { getSettingSubject } from "~/newstore/settings"
import * as team_utils from "~/helpers/teams/utils"
export default {
data() {
return {
fb,
showJsonCode: false,
mode: "import_export",
mySelectedCollectionID: undefined,
collectionJson: "",
}
},
subscriptions() {
SYNC_COLLECTIONS: getSettingSubject("syncCollections")
return {
SYNC_COLLECTIONS: getSettingSubject("syncCollections"),
}
},
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 +202,7 @@ export default {
{
files: {
"hoppscotch-collections.json": {
content: this.collectionJson,
content: this.getJSONCollection(),
},
},
},
@@ -186,6 +247,8 @@ export default {
})
},
hideModal() {
this.mode = "import_export"
this.mySelectedCollectionID = undefined
this.$emit("hide-modal")
},
openDialogChooseFileToReplaceWith() {
@@ -208,11 +271,29 @@ 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.fileImported()
} else {
this.failedImport()
}
})
.catch((error) => {
console.log(error)
this.failedImport()
})
} else {
this.$store.commit("postwoman/replaceCollections", {
data: collections,
flag: "rest",
})
this.fileImported()
this.syncToFBCollections()
}
}
reader.readAsText(this.$refs.inputChooseFileToReplaceWith.files[0])
this.$refs.inputChooseFileToReplaceWith.value = ""
@@ -235,13 +316,61 @@ 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", { data: collections, flag: "rest" })
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
)
}
return this.collectionJson
},
exportJSON() {
let text = this.collectionJson
text = text.replace(/\n/g, "\r\n")

129
components/collections/SaveRequest.vue
View File

@@ -13,45 +13,15 @@
<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">Select location</label>
<!-- <input readonly :value="path" /> -->
<Collections
@select="onSelect"
@update-collection="collectionsType.type = $event"
@update-coll-type="onUpdateCollType"
:picked="picked"
: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 +42,7 @@
<script>
import { fb } from "~/helpers/fb"
import { getSettingSubject } from "~/newstore/settings"
import * as team_utils from "~/helpers/teams/utils"
export default {
props: {
@@ -81,12 +52,18 @@ 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,
},
picked: null,
}
},
subscriptions() {
@@ -149,6 +126,12 @@ export default {
},
},
methods: {
onUpdateCollType(newCollType) {
this.collectionsType = newCollType
},
onSelect({ picked }) {
this.picked = picked
},
syncCollections() {
if (fb.currentUser !== null && this.SYNC_COLLECTIONS) {
fb.writeCollections(
@@ -158,8 +141,7 @@ export default {
}
},
saveRequestAs() {
const userDidntSpecifyCollection = this.$data.requestData.collectionIndex === undefined
if (userDidntSpecifyCollection) {
if (this.picked == null) {
this.$toast.error(this.$t("select_collection"), {
icon: "error",
})
@@ -178,16 +160,61 @@ 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.picked.pickedType === "my-request") {
this.$store.commit("postwoman/saveRequestAs", {
request: requestUpdated,
collectionIndex: this.picked.collectionIndex,
folderName: this.picked.folderName,
requestIndex: this.picked.requestIndex,
flag: "rest",
})
this.syncCollections()
} else if (this.picked.pickedType === "my-folder") {
this.$store.commit("postwoman/saveRequestAs", {
request: requestUpdated,
collectionIndex: this.picked.collectionIndex,
folderName: this.picked.folderName,
flag: "rest",
})
this.syncCollections()
} else if (this.picked.pickedType === "my-collection") {
this.$store.commit("postwoman/saveRequestAs", {
request: requestUpdated,
collectionIndex: this.picked.collectionIndex,
flag: "rest",
})
this.syncCollections()
} else if (this.picked.pickedType === "teams-request") {
team_utils.overwriteRequestTeams(
this.$apollo,
JSON.stringify(requestUpdated),
requestUpdated.name,
this.picked.requestID
)
} else if (this.picked.pickedType === "teams-folder") {
team_utils.saveRequestAsTeams(
this.$apollo,
JSON.stringify(requestUpdated),
requestUpdated.name,
this.collectionsType.selectedTeam.id,
this.picked.folderID
)
} else if (this.picked.pickedType === "teams-collection") {
team_utils.saveRequestAsTeams(
this.$apollo,
JSON.stringify(requestUpdated),
requestUpdated.name,
this.collectionsType.selectedTeam.id,
this.picked.collectionID
)
}
this.$toast.success("Requested added", {
icon: "done",
})
this.hideModal()
this.syncCollections()
},
hideModal() {
this.$emit("hide-modal")
@@ -195,12 +222,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 + "/")
}
})
}

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

@@ -52,7 +52,7 @@
</v-popover>
</div>
<div v-show="showChildren || isFiltered">
<ul v-if="folder.folders && folder.folders.length" class="flex-col">
<ul class="flex-col">
<li
v-for="(subFolder, subFolderIndex) in folder.folders"
:key="subFolder.name"

428
components/collections/index.vue
View File

@@ -5,16 +5,28 @@
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"
:show="showTeamCollections"
:doc="doc"
@update-collection-type="updateCollectionType"
@update-selected-team="updateSelectedTeam"
/>
<CollectionsAdd
:show="showModalAdd"
@submit="addNewRootCollection"
@hide-modal="displayModalAdd(false)"
/>
<CollectionsEdit
:show="showModalEdit"
:editing-collection="editingCollection"
:editing-collection-index="editingCollectionIndex"
:editing-coll-name="editingCollection ? editingCollection.name : ''"
@hide-modal="displayModalEdit(false)"
@submit="updateEditingCollection"
/>
<CollectionsAddFolder
:show="showModalAddFolder"
@@ -25,30 +37,50 @@
/>
<CollectionsEditFolder
:show="showModalEditFolder"
:collection-index="editingCollectionIndex"
:folder="editingFolder"
:folder-index="editingFolderIndex"
@submit="updateEditingFolder"
@hide-modal="displayModalEditFolder(false)"
/>
<CollectionsEditRequest
:show="showModalEditRequest"
:collection-index="editingCollectionIndex"
:folder-index="editingFolderIndex"
:folder-name="editingFolderName"
:request="editingRequest"
:request-index="editingRequestIndex"
:placeholder-req-name="editingRequest ? editingRequest.name : ''"
@submit="updateEditingRequest"
@hide-modal="displayModalEditRequest(false)"
/>
<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>
@@ -58,19 +90,51 @@
<div class="virtual-list">
<ul class="flex-col">
<li v-for="(collection, index) in filteredCollections" :key="collection.name">
<CollectionsCollection
<component
:is="
collectionsType.type == 'my-collections'
? 'CollectionsMyCollection'
: 'CollectionsTeamsCollection'
"
:name="collection.name"
:collection-index="index"
:collection="collection"
:doc="doc"
:isFiltered="filterText.length > 0"
:selected="selected.some((coll) => coll == collection)"
:saveRequest="saveRequest"
:collectionsType="collectionsType"
:picked="picked"
@edit-collection="editCollection(collection, index)"
@add-folder="addFolder($event)"
@edit-folder="editFolder($event)"
@edit-request="editRequest($event)"
@update-team-collections="updateTeamCollections"
@select-collection="$emit('use-collection', collection)"
@unselect-collection="$emit('remove-collection', collection)"
@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,
})
if (collectionsType.type == 'my-collections') {
if ($event.folderPath) {
picked = $event.folderPath
} else picked = index
} else {
picked = $event.id
}
"
@select="$emit('select', $event)"
@expand-collection="expandCollection"
@remove-collection="removeCollection"
@remove-request="removeRequest"
/>
</li>
</ul>
@@ -90,11 +154,17 @@
<script>
import { fb } from "~/helpers/fb"
import { getSettingSubject } from "~/newstore/settings"
import gql from "graphql-tag"
import TeamCollectionAdapter from "~/helpers/teams/TeamCollectionAdapter"
import * as team_utils from "~/helpers/teams/utils"
import cloneDeep from "lodash/cloneDeep"
export default {
props: {
doc: Boolean,
selected: { type: Array, default: () => [] },
saveRequest: Boolean,
picked: Object,
},
data() {
return {
@@ -113,6 +183,12 @@ export default {
editingRequest: undefined,
editingRequestIndex: undefined,
filterText: "",
collectionsType: {
type: "my-collections",
selectedTeam: undefined,
},
teamCollectionAdapter: new TeamCollectionAdapter(null),
teamCollectionsNew: [],
}
},
subscriptions() {
@@ -120,17 +196,42 @@ export default {
SYNC_COLLECTIONS: getSettingSubject("syncCollections"),
}
},
watch: {
"collectionsType.type": function emitstuff() {
this.$emit("update-collection", this.$data.collectionsType.type)
},
"collectionsType.selectedTeam": function (value) {
if (value?.id) this.teamCollectionAdapter.changeTeamID(value.id)
},
},
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 {
collections = this.teamCollectionsNew
}
if (!this.filterText) return collections
if (!this.filterText) {
return collections
}
if (this.collectionsType.type == "team-collections") {
return []
}
const filterText = this.filterText.toLowerCase()
const filteredCollections = []
@@ -141,7 +242,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))
@@ -154,7 +257,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
@@ -173,8 +279,168 @@ export default {
}
}
document.addEventListener("keydown", this._keyListener.bind(this))
this.$subscribeTo(this.teamCollectionAdapter.collections$, (colls) => {
this.teamCollectionsNew = cloneDeep(colls)
})
},
methods: {
updateTeamCollections() {
// TODO: Remove this at some point
},
updateSelectedTeam(newSelectedTeam) {
this.collectionsType.selectedTeam = newSelectedTeam
this.$emit("update-coll-type", this.collectionsType)
},
updateCollectionType(newCollectionType) {
this.collectionsType.type = newCollectionType
this.$emit("update-coll-type", this.collectionsType)
},
// 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",
})
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
},
@@ -207,16 +473,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 CreateChildCollection($childTitle: String!, $collectionID: String!) {
createChildCollection(childTitle: $childTitle, collectionID: $collectionID) {
id
}
}
`,
// Parameters
variables: {
childTitle: name,
collectionID: folder.id,
},
})
.then(() => {
// 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 +529,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 +540,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()
},
@@ -258,6 +560,80 @@ export default {
)
}
},
expandCollection(collectionID) {
this.teamCollectionAdapter.expandCollection(collectionID)
},
removeCollection({ collectionsType, collectionIndex, collectionID }) {
if (collectionsType.type == "my-collections") {
this.$store.commit("postwoman/removeCollection", {
collectionIndex: collectionIndex,
flag: "rest",
})
this.$toast.error(this.$t("deleted"), {
icon: "delete",
})
this.syncCollections()
} else if (collectionsType.type == "team-collections") {
if (collectionsType.selectedTeam.myRole != "VIEWER") {
this.$apollo
.mutate({
// Query
mutation: gql`
mutation($collectionID: String!) {
deleteCollection(collectionID: $collectionID)
}
`,
// Parameters
variables: {
collectionID: collectionID,
},
})
.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)
})
}
}
},
removeRequest({ collectionIndex, folderName, requestIndex }) {
if (this.collectionsType.type == "my-collections") {
this.$store.commit("postwoman/removeRequest", {
collectionIndex: collectionIndex,
folderName: folderName,
requestIndex: requestIndex,
flag: "rest",
})
this.$toast.error(this.$t("deleted"), {
icon: "delete",
})
this.syncCollections()
} else if (this.collectionsType.type == "team-collections") {
team_utils
.deleteRequest(this.$apollo, 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)
})
}
},
},
beforeDestroy() {
document.removeEventListener("keydown", this._keyListener)

76
components/collections/Collection.vue → components/collections/my/Collection.vue
View File

@@ -12,7 +12,10 @@
<button class="icon" @click="toggleShowChildren">
<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>
<i v-if="isSelected" class="text-green-400 material-icons">check_circle</i>
<i v-else class="material-icons">folder</i>
<span>{{ collection.name }}</span>
</button>
<div>
@@ -32,7 +35,7 @@
>
<i class="material-icons">check_box</i>
</button>
<v-popover>
<v-popover v-if="!saveRequest">
<button class="tooltip-target icon" v-tooltip.left="$t('more')">
<i class="material-icons">more_vert</i>
</button>
@@ -67,19 +70,24 @@
<ul class="flex-col">
<li
v-for="(folder, index) in collection.folders"
:key="folder.name"
:key="index"
class="ml-8 border-l border-brdColor"
>
<CollectionsFolder
<CollectionsMyFolder
:folder="folder"
:folder-index="index"
:folder-path="`${collectionIndex}/${index}`"
:collection-index="collectionIndex"
:doc="doc"
:saveRequest="saveRequest"
:collectionsType="collectionsType"
:isFiltered="isFiltered"
:picked="picked"
@add-folder="$emit('add-folder', $event)"
@edit-folder="$emit('edit-folder', $event)"
@edit-request="$emit('edit-request', $event)"
@select="$emit('select', $event)"
@remove-request="removeRequest"
/>
</li>
</ul>
@@ -89,20 +97,29 @@
:key="index"
class="ml-8 border-l border-brdColor"
>
<CollectionsRequest
<CollectionsMyRequest
:request="request"
:collection-index="collectionIndex"
:folder-index="-1"
:folder-name="collection.name"
:folder-path="collectionIndex.toString()"
:request-index="index"
:doc="doc"
@edit-request="$emit('edit-request', $event)"
:saveRequest="saveRequest"
:collectionsType="collectionsType"
:picked="picked"
@edit-request="editRequest($event)"
@select="$emit('select', $event)"
@remove-request="removeRequest"
/>
</li>
</ul>
<ul>
<li
v-if="collection.folders.length === 0 && collection.requests.length === 0"
v-if="
(collection.folders == undefined || collection.folders.length === 0) &&
(collection.requests == undefined || collection.requests.length === 0)
"
class="flex ml-8 border-l border-brdColor"
>
<p class="info">
@@ -131,6 +148,9 @@ export default {
doc: Boolean,
isFiltered: Boolean,
selected: Boolean,
saveRequest: Boolean,
collectionsType: Object,
picked: Object,
},
data() {
return {
@@ -138,6 +158,9 @@ export default {
dragging: false,
selectedFolder: {},
confirmRemove: false,
prevCursor: "",
cursor: "",
pageNo: 0,
}
},
subscriptions() {
@@ -145,7 +168,19 @@ export default {
SYNC_COLLECTIONS: getSettingSubject("syncCollections"),
}
},
computed: {
isSelected() {
return (
this.picked &&
this.picked.pickedType === "my-collection" &&
this.picked.collectionIndex === this.collectionIndex
)
},
},
methods: {
editRequest(event) {
this.$emit("edit-request", event)
},
syncCollections() {
if (fb.currentUser !== null && this.SYNC_COLLECTIONS) {
fb.writeCollections(
@@ -155,17 +190,25 @@ export default {
}
},
toggleShowChildren() {
if (this.$props.saveRequest)
this.$emit("select", {
picked: {
pickedType: "my-collection",
collectionIndex: this.collectionIndex,
},
})
this.$emit("expand-collection", this.collection.id)
this.showChildren = !this.showChildren
},
removeCollection() {
this.$store.commit("postwoman/removeCollection", {
this.$emit("remove-collection", {
collectionsType: this.collectionsType,
collectionIndex: this.collectionIndex,
flag: "rest",
collectionID: this.collection.id,
})
this.$toast.error(this.$t("deleted"), {
icon: "delete",
})
this.syncCollections()
this.confirmRemove = false
},
dropEvent({ dataTransfer }) {
this.dragging = !this.dragging
@@ -186,6 +229,13 @@ export default {
})
this.syncCollections()
},
removeRequest({ collectionIndex, folderName, requestIndex }) {
this.$emit("remove-request", {
collectionIndex,
folderName,
requestIndex,
})
},
},
}
</script>

56
components/collections/Folder.vue → components/collections/my/Folder.vue
View File

@@ -13,11 +13,12 @@
<button class="icon" @click="toggleShowChildren">
<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>
<i v-if="isSelected" class="text-green-400 material-icons">check_circle</i>
<i v-else class="material-icons">folder_open</i>
<span>{{ folder.name ? folder.name : folder.title }}</span>
</button>
</div>
<v-popover>
<v-popover v-if="!saveRequest">
<button class="tooltip-target icon" v-tooltip.left="$t('more')">
<i class="material-icons">more_vert</i>
</button>
@@ -52,21 +53,27 @@
</v-popover>
</div>
<div v-show="showChildren || isFiltered">
<ul v-if="folder.folders && folder.folders.length" class="flex-col">
<ul class="flex-col">
<li
v-for="(subFolder, subFolderIndex) in folder.folders"
:key="subFolder.name"
class="ml-8 border-l border-brdColor"
>
<CollectionsFolder
<CollectionsMyFolder
:folder="subFolder"
:folder-index="subFolderIndex"
:collection-index="collectionIndex"
:doc="doc"
:saveRequest="saveRequest"
:collectionsType="collectionsType"
:folder-path="`${folderPath}/${subFolderIndex}`"
:picked="picked"
@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="$emit('select', $event)"
@remove-request="removeRequest"
/>
</li>
</ul>
@@ -76,14 +83,20 @@
:key="index"
class="flex ml-8 border-l border-brdColor"
>
<CollectionsRequest
<CollectionsMyRequest
:request="request"
:collection-index="collectionIndex"
:folder-index="folderIndex"
:folder-name="folder.name"
:request-index="index"
:folder-path="folderPath"
:doc="doc"
:picked="picked"
:saveRequest="saveRequest"
:collectionsType="collectionsType"
@edit-request="$emit('edit-request', $event)"
@select="$emit('select', $event)"
@remove-request="removeRequest"
/>
</li>
</ul>
@@ -121,13 +134,18 @@ export default {
collectionIndex: Number,
folderPath: String,
doc: Boolean,
saveRequest: Boolean,
isFiltered: Boolean,
collectionsType: Object,
picked: Object,
},
data() {
return {
showChildren: false,
dragging: false,
confirmRemove: false,
prevCursor: "",
cursor: "",
}
},
subscriptions() {
@@ -135,6 +153,15 @@ export default {
SYNC_COLLECTIONS: getSettingSubject("syncCollections"),
}
},
computed: {
isSelected() {
return (
this.picked &&
this.picked.pickedType === "my-folder" &&
this.picked.folderPath === this.folderPath
)
},
},
methods: {
syncCollections() {
if (fb.currentUser !== null && this.SYNC_COLLECTIONS) {
@@ -145,6 +172,16 @@ export default {
}
},
toggleShowChildren() {
if (this.$props.saveRequest)
this.$emit("select", {
picked: {
pickedType: "my-folder",
collectionIndex: this.collectionIndex,
folderName: this.folder.name,
folderPath: this.folderPath,
},
})
this.showChildren = !this.showChildren
},
removeFolder() {
@@ -179,6 +216,13 @@ export default {
})
this.syncCollections()
},
removeRequest({ collectionIndex, folderName, requestIndex }) {
this.$emit("remove-request", {
collectionIndex,
folderName,
requestIndex,
})
},
},
}
</script>

59
components/collections/Request.vue → components/collections/my/Request.vue
View File

@@ -14,11 +14,13 @@
@click="!doc ? selectRequest() : {}"
v-tooltip="!doc ? $t('use_request') : ''"
>
<span :class="getRequestLabelColor(request.method)">{{ request.method }}</span>
<i v-if="isSelected" class="text-green-400 material-icons">check_circle</i>
<span v-else :class="getRequestLabelColor(request.method)">{{ request.method }}</span>
<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>
@@ -60,17 +62,28 @@
</template>
<script>
import { fb } from "~/helpers/fb"
import { getSettingSubject } from "~/newstore/settings"
export default {
props: {
request: Object,
collectionIndex: Number,
folderIndex: Number,
folderName: String,
requestIndex: Number,
requestIndex: [Number, String],
doc: Boolean,
saveRequest: Boolean,
collectionsType: Object,
folderPath: String,
picked: Object,
},
computed: {
isSelected() {
return (
this.picked &&
this.picked.pickedType === "my-request" &&
this.picked.folderPath === this.folderPath &&
this.picked.requestIndex === this.requestIndex
)
},
},
data() {
return {
@@ -85,22 +98,20 @@ export default {
confirmRemove: false,
}
},
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"
)
}
},
selectRequest() {
this.$store.commit("postwoman/selectRequest", { request: this.request })
if (this.$props.saveRequest)
this.$emit("select", {
picked: {
pickedType: "my-request",
collectionIndex: this.collectionIndex,
folderPath: this.folderPath,
folderName: this.folderName,
requestIndex: this.requestIndex,
},
})
else this.$store.commit("postwoman/selectRequest", { request: this.request })
},
dragStart({ dataTransfer }) {
this.dragging = !this.dragging
@@ -110,17 +121,11 @@ export default {
dataTransfer.setData("requestIndex", this.$props.requestIndex)
},
removeRequest() {
this.$store.commit("postwoman/removeRequest", {
this.$emit("remove-request", {
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()
},
getRequestLabelColor(method) {
return this.requestMethodLabels[method.toLowerCase()] || this.requestMethodLabels.default

224
components/collections/teams/Collection.vue Normal file
View File

@@ -0,0 +1,224 @@
<template>
<div>
<div class="transition duration-150 ease-in-out row-wrapper">
<button class="icon" @click="toggleShowChildren">
<i class="material-icons" v-show="!showChildren && !isFiltered">arrow_right</i>
<i class="material-icons" v-show="showChildren || isFiltered">arrow_drop_down</i>
<i v-if="isSelected" class="text-green-400 material-icons">check_circle</i>
<i v-else class="material-icons">folder</i>
<span>{{ collection.title }}</span>
</button>
<div>
<button
v-if="doc && !selected"
class="icon"
@click="$emit('select-collection')"
v-tooltip.left="$t('import')"
>
<i class="material-icons">check_box_outline_blank</i>
</button>
<button
v-if="doc && selected"
class="icon"
@click="$emit('unselect-collection')"
v-tooltip.left="$t('delete')"
>
<i class="material-icons">check_box</i>
</button>
<v-popover v-if="!saveRequest">
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
class="tooltip-target icon"
v-tooltip.left="$t('more')"
>
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<div>
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
class="icon"
@click="$emit('add-folder', { folder: collection, path: `${collectionIndex}` })"
v-close-popover
>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("new_folder") }}</span>
</button>
</div>
<div>
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
class="icon"
@click="$emit('edit-collection')"
v-close-popover
>
<i class="material-icons">create</i>
<span>{{ $t("edit") }}</span>
</button>
</div>
<div>
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
class="icon"
@click="confirmRemove = true"
v-close-popover
>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
</div>
</template>
</v-popover>
</div>
</div>
<div v-show="showChildren || isFiltered">
<ul class="flex-col">
<li
v-for="(folder, index) in collection.children"
:key="folder.title"
class="ml-8 border-l border-brdColor"
>
<CollectionsTeamsFolder
:folder="folder"
:folder-index="index"
:folder-path="`${collectionIndex}/${index}`"
:collection-index="collectionIndex"
:doc="doc"
:saveRequest="saveRequest"
:collectionsType="collectionsType"
:isFiltered="isFiltered"
:picked="picked"
@add-folder="$emit('add-folder', $event)"
@edit-folder="$emit('edit-folder', $event)"
@edit-request="$emit('edit-request', $event)"
@select="$emit('select', $event)"
@expand-collection="expandCollection"
@remove-request="removeRequest"
/>
</li>
</ul>
<ul class="flex-col">
<li
v-for="(request, index) in collection.requests"
:key="index"
class="ml-8 border-l border-brdColor"
>
<CollectionsTeamsRequest
:request="request.request"
:collection-index="collectionIndex"
:folder-index="-1"
:folder-name="collection.name"
:request-index="request.id"
:doc="doc"
:saveRequest="saveRequest"
:collectionsType="collectionsType"
:picked="picked"
@edit-request="editRequest($event)"
@select="$emit('select', $event)"
@remove-request="removeRequest"
/>
</li>
</ul>
<ul>
<li
v-if="
(collection.children == undefined || collection.children.length === 0) &&
(collection.requests == undefined || collection.requests.length === 0)
"
class="flex ml-8 border-l border-brdColor"
>
<p class="info">
<i class="material-icons">not_interested</i> {{ $t("collection_empty") }}
</p>
</li>
</ul>
</div>
<SmartConfirmModal
:show="confirmRemove"
:title="$t('are_you_sure_remove_collection')"
@hide-modal="confirmRemove = false"
@resolve="removeCollection"
/>
</div>
</template>
<script>
export default {
props: {
collectionIndex: Number,
collection: Object,
doc: Boolean,
isFiltered: Boolean,
selected: Boolean,
saveRequest: Boolean,
collectionsType: Object,
picked: Object,
},
data() {
return {
showChildren: false,
dragging: false,
selectedFolder: {},
confirmRemove: false,
prevCursor: "",
cursor: "",
pageNo: 0,
}
},
computed: {
isSelected() {
return (
this.picked &&
this.picked.pickedType === "teams-collection" &&
this.picked.collectionID === this.collection.id
)
},
},
methods: {
editRequest(event) {
this.$emit("edit-request", event)
if (this.$props.saveRequest)
this.$emit("select", {
picked: {
pickedType: "teams-collection",
collectionID: this.collection.id,
},
})
},
toggleShowChildren() {
if (this.$props.saveRequest)
this.$emit("select", {
picked: {
pickedType: "teams-collection",
collectionID: this.collection.id,
},
})
this.$emit("expand-collection", this.collection.id)
this.showChildren = !this.showChildren
},
removeCollection() {
this.$emit("remove-collection", {
collectionsType: this.collectionsType,
collectionIndex: this.collectionIndex,
collectionID: this.collection.id,
})
this.confirmRemove = false
},
expandCollection(collectionID) {
this.$emit("expand-collection", collectionID)
},
removeRequest({ collectionIndex, folderName, requestIndex }) {
this.$emit("remove-request", {
collectionIndex,
folderName,
requestIndex,
})
},
},
}
</script>

209
components/collections/teams/Folder.vue Normal file
View File

@@ -0,0 +1,209 @@
<template>
<div>
<div class="transition duration-150 ease-in-out row-wrapper">
<div>
<button class="icon" @click="toggleShowChildren">
<i class="material-icons" v-show="!showChildren && !isFiltered">arrow_right</i>
<i class="material-icons" v-show="showChildren || isFiltered">arrow_drop_down</i>
<i v-if="isSelected" class="text-green-400 material-icons">check_circle</i>
<i v-else class="material-icons">folder_open</i>
<span>{{ folder.name ? folder.name : folder.title }}</span>
</button>
</div>
<v-popover v-if="!saveRequest">
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
class="tooltip-target icon"
v-tooltip.left="$t('more')"
>
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<div>
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
class="icon"
@click="$emit('add-folder', { folder, path: folderPath })"
v-close-popover
>
<i class="material-icons">create_new_folder</i>
<span>{{ $t("new_folder") }}</span>
</button>
</div>
<div>
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
class="icon"
@click="$emit('edit-folder', { folder, folderIndex, collectionIndex })"
v-close-popover
>
<i class="material-icons">edit</i>
<span>{{ $t("edit") }}</span>
</button>
</div>
<div>
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
class="icon"
@click="confirmRemove = true"
v-close-popover
>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
</div>
</template>
</v-popover>
</div>
<div v-show="showChildren || isFiltered">
<ul class="flex-col">
<li
v-for="(subFolder, subFolderIndex) in folder.children"
:key="subFolder.name"
class="ml-8 border-l border-brdColor"
>
<CollectionsTeamsFolder
:folder="subFolder"
:folder-index="subFolderIndex"
:collection-index="collectionIndex"
:doc="doc"
:saveRequest="saveRequest"
:collectionsType="collectionsType"
:folder-path="`${folderPath}/${subFolderIndex}`"
:picked="picked"
@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="$emit('select', $event)"
@expand-collection="expandCollection"
@remove-request="removeRequest"
/>
</li>
</ul>
<ul class="flex-col">
<li
v-for="(request, index) in folder.requests"
:key="index"
class="flex ml-8 border-l border-brdColor"
>
<CollectionsTeamsRequest
:request="request.request"
:collection-index="collectionIndex"
:folder-index="folderIndex"
:folder-name="folder.name"
:request-index="request.id"
:doc="doc"
:saveRequest="saveRequest"
:collectionsType="collectionsType"
:picked="picked"
@edit-request="$emit('edit-request', $event)"
@select="$emit('select', $event)"
@remove-request="removeRequest"
/>
</li>
</ul>
<ul
v-if="
(folder.children == undefined || folder.children.length === 0) &&
(folder.requests == undefined || folder.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>
</ul>
</div>
<SmartConfirmModal
:show="confirmRemove"
:title="$t('are_you_sure_remove_folder')"
@hide-modal="confirmRemove = false"
@resolve="removeFolder"
/>
</div>
</template>
<script>
import * as team_utils from "~/helpers/teams/utils"
export default {
name: "folder",
props: {
folder: Object,
folderIndex: Number,
collectionIndex: Number,
folderPath: String,
doc: Boolean,
saveRequest: Boolean,
isFiltered: Boolean,
collectionsType: Object,
picked: Object,
},
data() {
return {
showChildren: false,
confirmRemove: false,
prevCursor: "",
cursor: "",
}
},
computed: {
isSelected() {
return (
this.picked &&
this.picked.pickedType === "teams-folder" &&
this.picked.folderID === this.folder.id
)
},
},
methods: {
toggleShowChildren() {
if (this.$props.saveRequest)
this.$emit("select", {
picked: {
pickedType: "teams-folder",
folderID: this.folder.id,
},
})
this.$emit("expand-collection", this.$props.folder.id)
this.showChildren = !this.showChildren
},
removeFolder() {
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",
})
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")
}
},
expandCollection(collectionID) {
this.$emit("expand-collection", collectionID)
},
removeRequest({ collectionIndex, folderName, requestIndex }) {
this.$emit("remove-request", {
collectionIndex,
folderName,
requestIndex,
})
},
},
}
</script>

118
components/collections/teams/Request.vue Normal file
View File

@@ -0,0 +1,118 @@
<template>
<div>
<div class="transition duration-150 ease-in-out row-wrapper">
<div>
<button
class="icon"
@click="!doc ? selectRequest() : {}"
v-tooltip="!doc ? $t('use_request') : ''"
>
<i v-if="isSelected" class="text-green-400 material-icons">check_circle</i>
<span v-else :class="getRequestLabelColor(request.method)">{{ request.method }}</span>
<span>{{ request.name }}</span>
</button>
</div>
<v-popover v-if="!saveRequest">
<button
v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
class="tooltip-target icon"
v-tooltip="$t('more')"
>
<i class="material-icons">more_vert</i>
</button>
<template slot="popover">
<div>
<button
class="icon"
@click="
$emit('edit-request', {
collectionIndex,
folderIndex,
folderName,
request,
requestIndex,
})
"
v-close-popover
>
<i class="material-icons">edit</i>
<span>{{ $t("edit") }}</span>
</button>
</div>
<div>
<button class="icon" @click="confirmRemove = true" v-close-popover>
<i class="material-icons">delete</i>
<span>{{ $t("delete") }}</span>
</button>
</div>
</template>
</v-popover>
</div>
<SmartConfirmModal
:show="confirmRemove"
:title="$t('are_you_sure_remove_request')"
@hide-modal="confirmRemove = false"
@resolve="removeRequest"
/>
</div>
</template>
<script>
export default {
props: {
request: Object,
collectionIndex: Number,
folderIndex: Number,
folderName: String,
requestIndex: [Number, String],
doc: Boolean,
saveRequest: Boolean,
collectionsType: Object,
picked: Object,
},
data() {
return {
dragging: false,
requestMethodLabels: {
get: "text-green-400",
post: "text-yellow-400",
put: "text-blue-400",
delete: "text-red-400",
default: "text-gray-400",
},
confirmRemove: false,
}
},
computed: {
isSelected() {
return (
this.picked &&
this.picked.pickedType === "teams-request" &&
this.picked.requestID === this.requestIndex
)
},
},
methods: {
selectRequest() {
if (this.$props.saveRequest)
this.$emit("select", {
picked: {
pickedType: "teams-request",
requestID: this.requestIndex,
},
})
},
removeRequest() {
this.$emit("remove-request", {
collectionIndex: this.$props.collectionIndex,
folderName: this.$props.folderName,
requestIndex: this.$props.requestIndex,
})
},
getRequestLabelColor(method) {
return this.requestMethodLabels[method.toLowerCase()] || this.requestMethodLabels.default
},
},
}
</script>

8
components/docs/Collection.vue
View File

@@ -4,10 +4,14 @@
<i class="material-icons">folder</i>
{{ collection.name || $t("none") }}
</h2>
<span class="folder" v-for="(folder, index) in collection.folders" :key="index">
<span
class="folder"
v-for="(folder, index) in collection.folders"
:key="`sub-collection-${index}`"
>
<DocsFolder :folder="folder" />
</span>
<div v-for="(request, index) in collection.requests" :key="index">
<div v-for="(request, index) in collection.requests" :key="`request-${index}`">
<DocsRequest :request="request" />
</div>
</div>

36
components/smart/Intersection.vue Normal file
View File

@@ -0,0 +1,36 @@
<template>
<div ref="container">
<slot />
</div>
</template>
<script lang="ts">
/*
Implements a wrapper listening to viewport intersections via
IntesectionObserver API
Events
------
intersecting (entry: IntersectionObserverEntry) -> When the component is intersecting the viewport
*/
import Vue from "vue"
export default Vue.extend({
data() {
return {
observer: null as IntersectionObserver | null,
}
},
mounted() {
this.observer = new IntersectionObserver(([entry]) => {
if (entry && entry.isIntersecting) {
this.$emit("intersecting", entry)
}
})
this.observer.observe(this.$refs.container as Element)
},
beforeDestroy() {
this.observer?.disconnect()
},
})
</script>

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)
},
},
}

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

@@ -0,0 +1,89 @@
<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 * as team_utils from "~/helpers/teams/utils"
export default {
props: {
show: Boolean,
},
data() {
return {
name: undefined,
}
},
methods: {
addNewTeam() {
// 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",
})
return
}
// Call to the graphql mutation
team_utils
.createTeam(this.$apollo, name)
.then((data) => {
// Result
this.hideModal()
})
.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>

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

@@ -0,0 +1,336 @@
<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 members" :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="updateRole(index, 'OWNER')">
OWNER
</button>
</div>
<div>
<button class="icon" v-close-popover @click="updateRole(index, 'EDITOR')">
EDITOR
</button>
</div>
<div>
<button class="icon" v-close-popover @click="updateRole(index, '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 newMembers" :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 * as team_utils from "~/helpers/teams/utils"
import cloneDeep from "lodash/cloneDeep"
import TeamMemberAdapter from "~/helpers/teams/TeamMemberAdapter"
export default {
props: {
show: Boolean,
editingTeam: Object,
editingteamID: String,
},
data() {
return {
rename: null,
doneButton: '<i class="material-icons">done</i>',
members: [],
newMembers: [],
membersAdapter: new TeamMemberAdapter(null),
}
},
mounted() {
this.membersAdapter.members$.subscribe((list) => {
this.members = cloneDeep(list)
})
},
watch: {
editingteamID(teamID) {
this.membersAdapter.changeTeamID(teamID)
},
},
computed: {
editingTeamCopy() {
return this.editingTeam
},
name: {
get() {
return this.editingTeam.name
},
set(name) {
this.rename = name
},
},
},
methods: {
updateRole(id, role) {
this.members[id].role = role
},
addTeamMember() {
let value = { key: "", value: "" }
this.newMembers.push(value)
},
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.newMembers.splice(index, 1)
},
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",
})
return
}
this.$data.newMembers.forEach((element) => {
if (!this.validateEmail(element.key)) {
this.$toast.error(this.$t("invalid_emailID_format"), {
icon: "error",
})
return
}
})
this.$data.newMembers.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.members.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.newMembers = []
},
hideModal() {
this.$emit("hide-modal")
this.$data.name = undefined
},
},
}
</script>

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

@@ -0,0 +1,168 @@
<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()
},
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])
},
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()
},
fileImported() {
this.$toast.info(this.$t("file_imported"), {
icon: "folder_shared",
})
},
},
}
</script>

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

@@ -0,0 +1,113 @@
<template>
<div class="row-wrapper">
<div>
<button
class="icon"
@click="team.myRole === 'OWNER' ? $emit('edit-team') : ''"
v-tooltip.right="team.myRole === 'OWNER' ? $t('edit') : ''"
>
<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 ? $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 * as 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
// 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",
})
})
.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
team_utils
.exitTeam(this.$apollo, this.teamID)
.then((data) => {
// Result
this.$toast.success(this.$t("team_exited"), {
icon: "done",
})
})
.catch((error) => {
// Error
this.$toast.error(this.$t("error_occurred"), {
icon: "error",
})
console.error(error)
})
},
},
}
</script>

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

@@ -0,0 +1,151 @@
<template>
<AppSection class="green" icon="history" :label="$t('teams')" ref="teams" no-legend>
<div class="flex flex-col">
<label>{{ $t("teams") }}</label>
<div v-if="fb.currentUser"></div>
<div v-else>
<label>{{ $t("login_with") }}</label>
<p>
<FirebaseLogin />
</p>
</div>
</div>
<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"
import { fb } from "~/helpers/fb"
export default {
data() {
return {
showModalImportExport: false,
showModalAdd: false,
showModalEdit: false,
editingTeam: {},
editingteamID: "",
me: {},
myTeams: [],
fb,
}
},
apollo: {
me: {
query: gql`
query GetMe {
me {
uid
eaInvited
}
}
`,
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) {
this.editingTeam = team
this.editingteamID = team.id
this.displayModalEdit(true)
},
resetSelectedData() {
this.$data.editingTeam = undefined
this.$data.editingteamID = undefined
},
},
beforeDestroy() {
document.removeEventListener("keydown", this._keyListener)
},
}
</script>

78
helpers/apollo.ts Normal file
View File

@@ -0,0 +1,78 @@
import { ApolloClient, HttpLink, InMemoryCache, split } from "@apollo/client/core"
import { WebSocketLink } from "@apollo/client/link/ws"
import { setContext } from "@apollo/client/link/context"
import { fb } from "./fb"
import { getMainDefinition } from "@apollo/client/utilities"
let authToken: String | null = null
export function registerApolloAuthUpdate() {
fb.idToken$.subscribe((token: String | null) => {
authToken = token
})
}
/**
* Injects auth token if available
*/
const authLink = setContext((_, { headers }) => {
if (authToken) {
return {
headers: {
...headers,
authorization: `Bearer ${authToken}`,
},
}
} else {
return {
headers,
}
}
})
const httpLink = new HttpLink({
uri:
process.env.CONTEXT === "production"
? "https://api.hoppscotch.io/graphql"
: "https://api.hoppscotch.io/graphql",
})
const wsLink = new WebSocketLink({
uri:
process.env.CONTEXT === "production"
? "wss://api.hoppscotch.io/graphql"
: "wss://api.hoppscotch.io/graphql",
options: {
reconnect: true,
lazy: true,
connectionParams: () => {
return {
authorization: `Bearer ${authToken}`,
}
},
},
})
const splitLink = split(
({ query }) => {
const definition = getMainDefinition(query)
return definition.kind === "OperationDefinition" && definition.operation === "subscription"
},
wsLink,
httpLink
)
export const apolloClient = new ApolloClient({
link: authLink.concat(splitLink),
cache: new InMemoryCache(),
defaultOptions: {
query: {
fetchPolicy: "network-only",
errorPolicy: "ignore",
},
watchQuery: {
fetchPolicy: "network-only",
errorPolicy: "ignore",
},
},
})

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

86
helpers/teams/BackendUserInfo.ts Normal file
View File

@@ -0,0 +1,86 @@
import { fb } from "../fb"
import { BehaviorSubject } from "rxjs"
import { apolloClient } from "../apollo"
import gql from "graphql-tag"
/*
* This file deals with interfacing data provided by the
* Hoppscotch Backend server
*/
/**
* Defines the information provided about a user
*/
interface UserInfo {
/**
* UID of the user
*/
uid: string
/**
* Displayable name of the user (or null if none available)
*/
displayName: string | null
/**
* Email of the user (or null if none available)
*/
email: string | null
/**
* URL to the profile photo of the user (or null if none available)
*/
photoURL: string | null
/**
* Whether the user has access to Early Access features
*/
eaInvited: boolean
}
/**
* An observable subject onto the currently logged in user info (is null if not logged in)
*/
export const currentUserInfo$ = new BehaviorSubject<UserInfo | null>(null)
/**
* Initializes the currenUserInfo$ view and sets up its update mechanism
*/
export async function initUserInfo() {
await updateUserInfo()
fb.idToken$.subscribe((token) => {
if (token) {
updateUserInfo()
} else {
currentUserInfo$.next(null)
}
})
}
/**
* Runs the actual user info fetching
*/
async function updateUserInfo() {
try {
const { data } = await apolloClient.query({
query: gql`
query GetUserInfo {
me {
uid
displayName
email
photoURL
eaInvited
}
}
`,
})
currentUserInfo$.next({
uid: data.me.uid,
displayName: data.me.displayName,
email: data.me.email,
photoURL: data.me.photoURL,
eaInvited: data.me.eaInvited,
})
} catch (e) {
currentUserInfo$.next(null)
}
}

11
helpers/teams/TeamCollection.ts Normal file
View File

@@ -0,0 +1,11 @@
import { TeamRequest } from "./TeamRequest"
/**
* Defines how a Team Collection is represented in the TeamCollectionAdapter
*/
export interface TeamCollection {
id: string
title: string
children: TeamCollection[] | null
requests: TeamRequest[] | null
}

540
helpers/teams/TeamCollectionAdapter.ts Normal file
View File

@@ -0,0 +1,540 @@
import { BehaviorSubject } from "rxjs"
import { TeamCollection } from "./TeamCollection"
import { TeamRequest } from "./TeamRequest"
import { apolloClient } from "~/helpers/apollo"
import { rootCollectionsOfTeam, getCollectionChildren, getCollectionRequests } from "./utils"
import { gql } from "graphql-tag"
import pull from "lodash/pull"
import remove from "lodash/remove"
/*
* NOTE: These functions deal with REFERENCES to objects and mutates them, for a simpler implementation.
* Be careful when you play with these.
*
* I am not a fan of mutating references but this is so much simpler compared to mutating clones
* - Andrew
*/
/**
* Finds the parent of a collection and returns the REFERENCE (or null)
*
* @param {TeamCollection[]} tree - The tree to look in
* @param {string} collID - ID of the collection to find the parent of
* @param {TeamCollection} currentParent - (used for recursion, do not set) The parent in the current iteration (undefined if root)
*
* @returns REFERENCE to the collecton or null if not found or the collection is in root
*/
function findParentOfColl(
tree: TeamCollection[],
collID: string,
currentParent?: TeamCollection
): TeamCollection | null {
for (const coll of tree) {
// If the root is parent, return null
if (coll.id === collID) return currentParent ? currentParent : null
// Else run it in children
if (coll.children) {
const result = findParentOfColl(coll.children, collID, coll)
if (result) return result
}
}
return null
}
/**
* Finds and returns a REFERENCE collection in the given tree (or null)
*
* @param {TeamCollection[]} tree - The tree to look in
* @param {string} targetID - The ID of the collection to look for
*
* @returns REFERENCE to the collection or null if not found
*/
function findCollInTree(tree: TeamCollection[], targetID: string): TeamCollection | null {
for (const coll of tree) {
// If the direct child matched, then return that
if (coll.id === targetID) return coll
// Else run it in the children
if (coll.children) {
const result = findCollInTree(coll.children, targetID)
if (result) return result
}
}
// If nothing matched, return null
return null
}
/**
* Finds and returns a REFERENCE to the collection containing a given request ID in tree (or null)
*
* @param {TeamCollection[]} tree - The tree to look in
* @param {string} reqID - The ID of the request to look for
*
* @returns REFERENCE to the collection or null if request not found
*/
function findCollWithReqIDInTree(tree: TeamCollection[], reqID: string): TeamCollection | null {
for (const coll of tree) {
// Check in root collections (if expanded)
if (coll.requests) {
if (coll.requests.find((req) => req.id === reqID)) return coll
}
// Check in children of collections
if (coll.children) {
const result = findCollWithReqIDInTree(coll.children, reqID)
if (result) return result
}
}
// No matches
return null
}
/**
* Finds and returns a REFERENCE to the request with the given ID (or null)
*
* @param {TeamCollection[]} tree - The tree to look in
* @param {string} reqID - The ID of the request to look for
*
* @returns REFERENCE to the request or null if request not found
*/
function findReqInTree(tree: TeamCollection[], reqID: string): TeamRequest | null {
for (const coll of tree) {
// Check in root collections (if expanded)
if (coll.requests) {
const match = coll.requests.find((req) => req.id === reqID)
if (match) return match
}
// Check in children of collections
if (coll.children) {
const match = findReqInTree(coll.children, reqID)
if (match) return match
}
}
// No matches
return null
}
/**
* Updates a collection in the tree with the specified data
*
* @param {TeamCollection[]} tree - The tree to update in (THIS WILL BE MUTATED!)
* @param {Partial<TeamCollection> & Pick<TeamCollection, "id">} updateColl - An object defining all the fields that should be updated (ID is required to find the target collection)
*/
function updateCollInTree(
tree: TeamCollection[],
updateColl: Partial<TeamCollection> & Pick<TeamCollection, "id">
) {
const el = findCollInTree(tree, updateColl.id)
// If no match, stop the operation
if (!el) return
// Update all the specified keys
Object.assign(el, updateColl)
}
/**
* Deletes a collection in the tree
*
* @param {TeamCollection[]} tree - The tree to delete in (THIS WILL BE MUTATED!)
* @param {string} targetID - ID of the collection to delete
*/
function deleteCollInTree(tree: TeamCollection[], targetID: string) {
// Get the parent owning the collection
const parent = findParentOfColl(tree, targetID)
// If we found a parent, update it
if (parent && parent.children) {
parent.children = parent.children.filter((coll) => coll.id !== targetID)
}
// If there is no parent, it could mean:
// 1. The collection with that ID does not exist
// 2. The collection is in root (therefore, no parent)
// Let's look for element, if not exist, then stop
const el = findCollInTree(tree, targetID)
if (!el) return
// Collection exists, so this should be in root, hence removing element
pull(tree, el)
}
/**
* TeamCollectionAdapter provides a reactive collections list for a specific team
*/
export default class TeamCollectionAdapter {
/**
* The reactive list of collections
*
* A new value is emitted when there is a change
* (Use views instead)
*/
collections$: BehaviorSubject<TeamCollection[]>
// Fields for subscriptions, used for destroying once not needed
private teamCollectionAdded$: ZenObservable.Subscription | null
private teamCollectionUpdated$: ZenObservable.Subscription | null
private teamCollectionRemoved$: ZenObservable.Subscription | null
private teamRequestAdded$: ZenObservable.Subscription | null
private teamRequestUpdated$: ZenObservable.Subscription | null
private teamRequestDeleted$: ZenObservable.Subscription | null
/**
* @constructor
*
* @param {string | null} teamID - ID of the team to listen to, or null if none decided and the adapter should stand by
*/
constructor(private teamID: string | null) {
this.collections$ = new BehaviorSubject<TeamCollection[]>([])
this.teamCollectionAdded$ = null
this.teamCollectionUpdated$ = null
this.teamCollectionRemoved$ = null
this.teamRequestAdded$ = null
this.teamRequestDeleted$ = null
this.teamRequestUpdated$ = null
if (this.teamID) this.initialize()
}
/**
* Updates the team the adapter is looking at
*
* @param {string | null} newTeamID - ID of the team to listen to, or null if none decided and the adapter should stand by
*/
changeTeamID(newTeamID: string | null) {
this.collections$.next([])
this.teamID = newTeamID
if (this.teamID) this.initialize()
}
/**
* Unsubscribes from the subscriptions
* NOTE: Once this is called, no new updates to the tree will be detected
*/
unsubscribeSubscriptions() {
this.teamCollectionAdded$?.unsubscribe()
this.teamCollectionUpdated$?.unsubscribe()
this.teamCollectionRemoved$?.unsubscribe()
this.teamRequestAdded$?.unsubscribe()
this.teamRequestDeleted$?.unsubscribe()
this.teamRequestUpdated$?.unsubscribe()
}
/**
* Initializes the adapter
*/
private async initialize() {
await this.loadRootCollections()
this.registerSubscriptions()
}
/**
* Loads the root collections
*/
private async loadRootCollections(): Promise<void> {
const colls = await rootCollectionsOfTeam(apolloClient, this.teamID)
this.collections$.next(colls)
}
/**
* Performs addition of a collection to the tree
*
* @param {TeamCollection} collection - The collection to add to the tree
* @param {string | null} parentCollectionID - The parent of the new collection, pass null if this collection is in root
*/
private addCollection(collection: TeamCollection, parentCollectionID: string | null) {
const tree = this.collections$.value
if (!parentCollectionID) {
tree.push(collection)
} else {
const parentCollection = findCollInTree(tree, parentCollectionID)
if (!parentCollection) return
if (parentCollection.children != null) {
parentCollection.children.push(collection)
} else {
parentCollection.children = [collection]
}
}
this.collections$.next(tree)
}
/**
* Updates an existing collection in tree
*
* @param {Partial<TeamCollection> & Pick<TeamCollection, "id">} collectionUpdate - Object defining the fields that need to be updated (ID is required to find the target)
*/
private updateCollection(collectionUpdate: Partial<TeamCollection> & Pick<TeamCollection, "id">) {
const tree = this.collections$.value
updateCollInTree(tree, collectionUpdate)
this.collections$.next(tree)
}
/**
* Removes a collection from the tree
*
* @param {string} collectionID - ID of the collection to remove
*/
private removeCollection(collectionID: string) {
const tree = this.collections$.value
deleteCollInTree(tree, collectionID)
this.collections$.next(tree)
}
/**
* Adds a request to the tree
*
* @param {TeamRequest} request - The request to add to the tree
*/
private addRequest(request: TeamRequest) {
const tree = this.collections$.value
// Check if we have the collection (if not, then not loaded?)
const coll = findCollInTree(tree, request.collectionID)
if (!coll) return // Ignore add request
// Collection is not expanded
if (!coll.requests) return
// Collection is expanded hence append request
coll.requests.push(request)
this.collections$.next(tree)
}
/**
* Removes a request from the tree
*
* @param {string} requestID - ID of the request to remove
*/
private removeRequest(requestID: string) {
const tree = this.collections$.value
// Find request in tree, don't attempt if no collection or no requests (expansion?)
const coll = findCollWithReqIDInTree(tree, requestID)
if (!coll || !coll.requests) return
// Remove the collection
remove(coll.requests, (req) => req.id === requestID)
// Publish new tree
this.collections$.next(tree)
}
/**
* Updates the request in tree
*
* @param {Partial<TeamRequest> & Pick<TeamRequest, 'id'>} requestUpdate - Object defining all the fields to update in request (ID of the request is required)
*/
private updateRequest(requestUpdate: Partial<TeamRequest> & Pick<TeamRequest, "id">) {
const tree = this.collections$.value
// Find request, if not present, don't update
const req = findReqInTree(tree, requestUpdate.id)
if (!req) return
Object.assign(req, requestUpdate)
this.collections$.next(tree)
}
/**
* Registers the subscriptions to listen to team collection updates
*/
registerSubscriptions() {
this.teamCollectionAdded$ = apolloClient
.subscribe({
query: gql`
subscription TeamCollectionAdded($teamID: String!) {
teamCollectionAdded(teamID: $teamID) {
id
title
parent {
id
}
}
}
`,
variables: {
teamID: this.teamID,
},
})
.subscribe(({ data }) => {
this.addCollection(
{
id: data.teamCollectionAdded.id,
children: null,
requests: null,
title: data.teamCollectionAdded.title,
},
data.teamCollectionAdded.parent?.id
)
})
this.teamCollectionUpdated$ = apolloClient
.subscribe({
query: gql`
subscription TeamCollectionUpdated($teamID: String!) {
teamCollectionUpdated(teamID: $teamID) {
id
title
parent {
id
}
}
}
`,
variables: {
teamID: this.teamID,
},
})
.subscribe(({ data }) => {
this.updateCollection({
id: data.teamCollectionUpdated.id,
title: data.teamCollectionUpdated.title,
})
})
this.teamCollectionRemoved$ = apolloClient
.subscribe({
query: gql`
subscription TeamCollectionRemoved($teamID: String!) {
teamCollectionRemoved(teamID: $teamID)
}
`,
variables: {
teamID: this.teamID,
},
})
.subscribe(({ data }) => {
this.removeCollection(data.teamCollectionRemoved)
})
this.teamRequestAdded$ = apolloClient
.subscribe({
query: gql`
subscription TeamRequestAdded($teamID: String!) {
teamRequestAdded(teamID: $teamID) {
id
collectionID
request
title
}
}
`,
variables: {
teamID: this.teamID,
},
})
.subscribe(({ data }) => {
this.addRequest({
id: data.teamRequestAdded.id,
collectionID: data.teamRequestAdded.collectionID,
request: JSON.parse(data.teamRequestAdded.request),
title: data.teamRequestAdded.title,
})
})
this.teamRequestUpdated$ = apolloClient
.subscribe({
query: gql`
subscription TeamRequestUpdated($teamID: String!) {
teamRequestUpdated(teamID: $teamID) {
id
collectionID
request
title
}
}
`,
variables: {
teamID: this.teamID,
},
})
.subscribe(({ data }) => {
this.updateRequest({
id: data.teamRequestUpdated.id,
collectionID: data.teamRequestUpdated.collectionID,
request: JSON.parse(data.teamRequestUpdated.request),
title: data.teamRequestUpdated.title,
})
})
this.teamRequestDeleted$ = apolloClient
.subscribe({
query: gql`
subscription TeamRequestDeleted($teamID: String!) {
teamRequestDeleted(teamID: $teamID)
}
`,
variables: {
teamID: this.teamID,
},
})
.subscribe(({ data }) => {
this.removeRequest(data.teamRequestDeleted)
})
}
/**
* Expands a collection on the tree
*
* When a collection is loaded initially in the adapter, children and requests are not loaded (they will be set to null)
* Upon expansion those two fields will be populated
*
* @param {string} collectionID - The ID of the collection to expand
*/
async expandCollection(collectionID: string): Promise<void> {
// TODO: While expanding one collection, block (or queue) the expansion of the other, to avoid race conditions
const tree = this.collections$.value
const collection = findCollInTree(tree, collectionID)
if (!collection) return
if (collection.children != null) return
const collections: TeamCollection[] = (
await getCollectionChildren(apolloClient, collectionID)
).map<TeamCollection>((el) => {
return {
id: el.id,
title: el.title,
children: null,
requests: null,
}
})
const requests: TeamRequest[] = (
await getCollectionRequests(apolloClient, collectionID)
).map<TeamRequest>((el) => {
return {
id: el.id,
collectionID: collectionID,
title: el.title,
request: JSON.parse(el.request),
}
})
collection.children = collections
collection.requests = requests
this.collections$.next(tree)
}
}

138
helpers/teams/TeamMemberAdapter.ts Normal file
View File

@@ -0,0 +1,138 @@
import { BehaviorSubject } from "rxjs"
import { apolloClient } from "~/helpers/apollo"
import gql from "graphql-tag"
import cloneDeep from "lodash/cloneDeep"
interface TeamsTeamMember {
user: {
uid: string
email: string
}
role: "OWNER" | "EDITOR" | "VIEWER"
}
export default class TeamMemberAdapter {
members$: BehaviorSubject<TeamsTeamMember[]>
private teamMemberAdded$: ZenObservable.Subscription | null
private teamMemberRemoved$: ZenObservable.Subscription | null
private teamMemberUpdated$: ZenObservable.Subscription | null
constructor(private teamID: string | null) {
this.members$ = new BehaviorSubject<TeamsTeamMember[]>([])
this.teamMemberAdded$ = null
this.teamMemberUpdated$ = null
this.teamMemberRemoved$ = null
if (this.teamID) this.initialize()
}
changeTeamID(newTeamID: string | null) {
this.members$.next([])
this.teamID = newTeamID
if (this.teamID) this.initialize()
}
unsubscribeSubscriptions() {
this.teamMemberAdded$?.unsubscribe()
this.teamMemberRemoved$?.unsubscribe()
this.teamMemberUpdated$?.unsubscribe()
}
private async initialize() {
await this.loadTeamMembers()
this.registerSubscriptions()
}
private async loadTeamMembers(): Promise<void> {
const { data } = await apolloClient.query({
query: gql`
query GetTeamMembers($teamID: String!) {
team(teamID: $teamID) {
members {
user {
uid
email
}
role
}
}
}
`,
variables: {
teamID: this.teamID,
},
})
this.members$.next(data.team.members)
}
private registerSubscriptions() {
this.teamMemberAdded$ = apolloClient
.subscribe({
query: gql`
subscription TeamMemberAdded($teamID: String!) {
teamMemberAdded(teamID: $teamID) {
user {
uid
email
}
role
}
}
`,
variables: {
teamID: this.teamID,
},
})
.subscribe(({ data }) => {
this.members$.next([...this.members$.value, data.teamMemberAdded])
})
this.teamMemberRemoved$ = apolloClient
.subscribe({
query: gql`
subscription TeamMemberRemoved($teamID: String!) {
teamMemberRemoved(teamID: $teamID)
}
`,
variables: {
teamID: this.teamID,
},
})
.subscribe(({ data }) => {
this.members$.next(
this.members$.value.filter((el) => el.user.uid !== data.teamMemberRemoved)
)
})
this.teamMemberUpdated$ = apolloClient
.subscribe({
query: gql`
subscription TeamMemberUpdated($teamID: String!) {
teamMemberUpdated(teamID: $teamID) {
user {
uid
email
}
role
}
}
`,
variables: {
teamID: this.teamID,
},
})
.subscribe(({ data }) => {
const list = cloneDeep(this.members$.value)
const obj = list.find((el) => el.user.uid === data.teamMemberUpdated.user.uid)
if (!obj) return
Object.assign(obj, data.teamMemberUpdated)
})
}
}

9
helpers/teams/TeamRequest.ts Normal file
View File

@@ -0,0 +1,9 @@
/**
* Defines how a Teams request is represented in TeamCollectionAdapter
*/
export interface TeamRequest {
id: string;
collectionID: string;
title: string;
request: any;
}

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

@@ -0,0 +1,547 @@
import { ApolloClient } from "@apollo/client/core"
import gql from "graphql-tag"
import { BehaviorSubject } from "rxjs"
/**
* Returns an observable list of team members in the given Team
*
* @param {ApolloClient<any>} apollo - Instance of ApolloClient
* @param {string} teamID - ID of the team to observe
*
* @returns {{user: {uid: string, email: string}, role: 'OWNER' | 'EDITOR' | 'VIEWER'}}
*/
export async function getLiveTeamMembersList(apollo, teamID) {
const subject = new BehaviorSubject([])
const { data } = await apollo.query({
query: gql`
query GetTeamMembers($teamID: String!) {
team(teamID: $teamID) {
members {
user {
uid
email
}
role
}
}
}
`,
variables: {
teamID,
},
})
subject.next(data.team.members)
const addedSub = apollo
.subscribe({
query: gql`
subscription TeamMemberAdded($teamID: String!) {
teamMemberAdded(teamID: $teamID) {
user {
uid
email
}
role
}
}
`,
variables: {
teamID,
},
})
.subscribe(({ data }) => {
subject.next([...subject.value, data.teamMemberAdded])
})
const updateSub = apollo
.subscribe({
query: gql`
subscription TeamMemberUpdated($teamID: String!) {
teamMemberUpdated(teamID: $teamID) {
user {
uid
email
}
role
}
}
`,
variables: {
teamID,
},
})
.subscribe(({ data }) => {
const val = subject.value.find(
(member) => member.user.uid === data.teamMemberUpdated.user.uid
)
if (!val) return
Object.assign(val, data.teamMemberUpdated)
})
const removeSub = apollo
.subscribe({
query: gql`
subscription TeamMemberRemoved($teamID: String!) {
teamMemberRemoved(teamID: $teamID)
}
`,
variables: {
teamID,
},
})
.subscribe(({ data }) => {
subject.next(
subject.value.filter((member) => member.user.uid !== data.teamMemberAdded.user.uid)
)
})
const mainSub = subject.subscribe({
complete() {
addedSub.unsubscribe()
updateSub.unsubscribe()
removeSub.unsubscribe()
mainSub.unsubscribe()
},
})
return subject
}
export async function createTeam(apollo, name) {
return apollo.mutate({
mutation: gql`
mutation($name: String!) {
createTeam(name: $name) {
name
}
}
`,
variables: {
name: name,
},
})
}
export 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,
},
})
}
export 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,
},
})
}
export 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,
},
})
}
export 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,
},
})
}
export 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
}
export async function exitTeam(apollo, teamID) {
apollo.mutate({
mutation: gql`
mutation($teamID: String!) {
leaveTeam(teamID: $teamID)
}
`,
variables: {
teamID: teamID,
},
})
}
export 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
}
export 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
}
export 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
}
export 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
}
export 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
}
export 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
}
export 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
}
export 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
}
export 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
}
export 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,
},
},
})
}
export 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,
},
},
})
}
export 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
}
export 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
}
export 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
}
export 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
}

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"
}

7
layouts/default.vue
View File

@@ -16,9 +16,13 @@
<script>
import { setupLocalPersistence } from "~/newstore/localpersistence"
import { performMigrations } from "~/helpers/migrations"
import { initUserInfo } from "~/helpers/teams/BackendUserInfo"
import { registerApolloAuthUpdate } from "~/helpers/apollo"
export default {
beforeMount() {
registerApolloAuthUpdate()
let color = localStorage.getItem("THEME_COLOR") || "green"
document.documentElement.setAttribute("data-accent", color)
},
@@ -37,6 +41,7 @@ export default {
"%cContribute: https://github.com/hoppscotch/hoppscotch",
"background-color:black;padding:4px 8px;border-radius:8px;font-size:16px;color:white;"
)
const workbox = await window.$workbox
if (workbox) {
workbox.addEventListener("installed", (event) => {
@@ -60,6 +65,8 @@ export default {
}
setupLocalPersistence()
initUserInfo()
},
beforeDestroy() {
document.removeEventListener("keydown", this._keyListener)

2
nuxt.config.js
View File

@@ -93,6 +93,7 @@ export default {
"~/plugins/vuex-persist",
"~/plugins/v-tooltip",
"~/plugins/vue-rx",
"~/plugins/vue-apollo",
{ src: "~/plugins/web-worker", ssr: false },
],
@@ -130,7 +131,6 @@ export default {
// https://github.com/nuxt-community/sitemap-module
"@nuxtjs/sitemap",
],
// PWA module configuration (https://pwa.nuxtjs.org/setup)
pwa: {
meta: {

6794
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

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

2
pages/doc.vue
View File

@@ -76,7 +76,7 @@
</div>
</div>
<div>
<span v-for="(collection, index) in this.items" :key="index">
<span v-for="(collection, index) in this.items" :key="`collection-${index}`">
<DocsCollection :collection="collection" />
</span>
</div>

6
pages/graphql.vue
View File

@@ -595,9 +595,9 @@ export default {
}
this.showSaveRequestModal = true
},
useSelectedEnvironment(event) {
console.log("use selected environment")
},
// useSelectedEnvironment(event) {
// console.log("use selected environment")
// },
handleUseHistory(entry) {
this.url = entry.url
this.headers = entry.headers

10
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>
@@ -1810,12 +1814,6 @@ export default {
setTimeout(() => (target.innerHTML = '<i class="material-icons">clear_all</i>'), 1000)
},
saveRequest() {
if (!this.checkCollections()) {
this.$toast.error(this.$t("create_collection"), {
icon: "error",
})
return
}
let urlAndPath = parseUrlAndPath(this.uri)
this.editRequest = {
url: decodeURI(urlAndPath.url),

26
pages/settings.vue
View File

@@ -1,5 +1,9 @@
<template>
<div class="page">
<div v-if="currentUser && currentUser.eaInvited">
<Teams />
</div>
<AppSection :label="$t('account')" ref="account" no-legend>
<div class="flex flex-col">
<label>{{ $t("account") }}</label>
@@ -198,6 +202,7 @@ import {
defaultSettings,
} from "~/newstore/settings"
import type { KeysMatching } from "~/types/ts-utils"
import { currentUserInfo$ } from "~/helpers/teams/BackendUserInfo"
import Vue from "vue"
@@ -239,6 +244,9 @@ export default Vue.extend({
SYNC_COLLECTIONS: getSettingSubject("syncCollections"),
SYNC_ENVIRONMENTS: getSettingSubject("syncEnvironments"),
SYNC_HISTORY: getSettingSubject("syncHistory"),
// Teams feature flag
currentUser: currentUserInfo$,
}
},
watch: {
@@ -289,14 +297,16 @@ export default Vue.extend({
},
syncCollections(): void {
if (fb.currentUser !== null && this.SYNC_COLLECTIONS) {
fb.writeCollections(
JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)),
"collections"
)
fb.writeCollections(
JSON.parse(JSON.stringify(this.$store.state.postwoman.collectionsGraphql)),
"collectionsGraphql"
)
if (this.$store.state.postwoman.collections)
fb.writeCollections(
JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)),
"collections"
)
if (this.$store.state.postwoman.collectionsGraphql)
fb.writeCollections(
JSON.parse(JSON.stringify(this.$store.state.postwoman.collectionsGraphql)),
"collectionsGraphql"
)
}
},
syncEnvironments(): void {

15
plugins/vue-apollo.ts Normal file
View File

@@ -0,0 +1,15 @@
import Vue from "vue"
import VueApollo from "vue-apollo"
import { apolloClient } from "~/helpers/apollo";
const vueApolloProvider = new VueApollo({
defaultClient: apolloClient as any
});
Vue.use(VueApollo);
export default (ctx: any) => {
const { app } = ctx
app.apolloProvider = vueApolloProvider
}