Initial refactor of the collections list and friends

components/collections/Add.vue

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

components/collections/ChooseType.vue

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

components/collections/Collection.vue

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

components/collections/Edit.vue

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

components/collections/EditFolder.vue

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

components/collections/EditRequest.vue

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

components/collections/ImportExport.vue

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

components/collections/index.vue

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

helpers/teams/TeamCollectionAdapter.ts

@@ -166,12 +166,7 @@ export default class TeamCollectionAdapter {
   }
   
   private async loadRootCollections(): Promise<void> {
-    const colls = (await rootCollectionsOfTeam(apolloClient, this.teamID))
+    const colls = await rootCollectionsOfTeam(apolloClient, this.teamID)
-      .map(coll => { // TODO: Remove
-        coll.title = `debug-${coll.title}`
-        
-        return coll
-      });
     this.collections$.next(colls);
   }
 
@@ -386,7 +381,7 @@ export default class TeamCollectionAdapter {
       .map<TeamCollection>(el => {
         return {
           id: el.id,
-          title: el.title,
+          title: `debug-${el.title}`,
           children: null,
           requests: null
         }