Merge pull request #881 from itsmdasifraza/feat/implement-list-scroll

fix: implement list scroll on item addition
sparrowapp-dev · May 26, 2024 · b11d856 · b11d856
2 parents a329688 + 1bff540
commit b11d856
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 22 deletions.
diff --git a/src/packages/@app/pages/Collections/CollectionPage.ViewModel.ts b/src/packages/@app/pages/Collections/CollectionPage.ViewModel.ts
@@ -600,7 +600,7 @@ export default class CollectionsViewModel {
 
     if (response.isSuccessful && response.data.data) {
       const res = response.data.data;
-      this.addCollection({
+      await this.addCollection({
         ...res,
         id: res._id,
         workspaceId: workspaceId,
@@ -632,7 +632,7 @@ export default class CollectionsViewModel {
       this.handleOpenCollection(workspaceId, Samplecollection);
       moveNavigation("right");
 
-      this.workspaceRepository.updateCollectionInWorkspace(workspaceId, {
+      await this.workspaceRepository.updateCollectionInWorkspace(workspaceId, {
         id: Samplecollection.id,
         name: newCollection.name,
       });
@@ -642,12 +642,10 @@ export default class CollectionsViewModel {
         collectionName: response.data.data.name,
         collectionId: response.data.data._id,
       });
-      return;
     } else {
-      this.collectionRepository.deleteCollection(newCollection.id);
       notifications.error(response.message ?? "Failed to create collection!");
     }
-    return;
+    return response;
   };
 
   /**
@@ -2346,27 +2344,38 @@ export default class CollectionsViewModel {
    * @param args :object - arguments depending on entity type
    */
   public handleCreateItem = async (entityType: string, args: any) => {
+    let response;
     switch (entityType) {
       case "collection":
-        this.handleCreateCollection(args.workspaceId, args.collection);
+        response = await this.handleCreateCollection(
+          args.workspaceId,
+          args.collection,
+        );
         break;
       case "folder":
-        this.handleCreateFolderInCollection(args.workspaceId, args.collection);
+        await this.handleCreateFolderInCollection(
+          args.workspaceId,
+          args.collection,
+        );
         break;
       case "request":
-        this.createNewTab();
+        await this.createNewTab();
         break;
       case "requestCollection":
-        this.handleCreateRequestInCollection(args.workspaceId, args.collection);
+        await this.handleCreateRequestInCollection(
+          args.workspaceId,
+          args.collection,
+        );
         break;
       case "requestFolder":
-        this.handleCreateRequestInFolder(
+        await this.handleCreateRequestInFolder(
           args.workspaceId,
           args.collection,
           args.folder,
         );
         break;
     }
+    return response;
   };
 
   /**

diff --git a/src/packages/@app/pages/Collections/CollectionsPage.svelte b/src/packages/@app/pages/Collections/CollectionsPage.svelte
@@ -141,6 +141,7 @@
       prevTabId = value.tabId;
     } else tabPath = {};
   });
+  let scrollList;
 
   let githubRepoData: GithubRepoDocType;
   onMount(async () => {
@@ -195,6 +196,7 @@
     class="bg-secondary-900-important"
   >
     <CollectionList
+      bind:scrollList
       {collectionList}
       {currentWorkspace}
       leftPanelController={{
@@ -283,8 +285,18 @@
     {collectionList}
     workspaceId={$currentWorkspace._id}
     closeImportCollectionPopup={() => (isImportCollectionPopup = false)}
-    onItemCreated={_viewModel.handleCreateItem}
-    onItemImported={_viewModel.handleImportItem}
+    onItemCreated={async (entityType, args) => {
+      const response = await _viewModel.handleCreateItem(entityType, args);
+      if (response.isSuccessful) {
+        setTimeout(() => {
+          scrollList("bottom");
+        }, 1000);
+      }
+    }}
+    onItemImported={async (entityType, args) => {
+      await _viewModel.handleImportItem(entityType, args);
+      scrollList("bottom");
+    }}
     onImportDataChange={_viewModel.handleImportDataChange}
     onUploadFile={_viewModel.uploadFormFile}
     onExtractGitBranch={_viewModel.extractGitBranch}

diff --git a/src/packages/@environments/features/environment-list/layout/EnvironmentList.svelte b/src/packages/@environments/features/environment-list/layout/EnvironmentList.svelte
@@ -54,6 +54,7 @@
    */
   export let onSelectEnvironment;
 
+  let scrollList;
   let localEnvironment;
   let globalEnvironment;
   let addEnvDisabled = false;
@@ -104,8 +105,9 @@
         loggedUserRoleInWorkspace,
         workspaceLevelPermissions.ADD_ENVIRONMENT,
       )}
-      onClick={() => {
-        onCreateEnvironment(localEnvironment);
+      onClick={async () => {
+        await onCreateEnvironment(localEnvironment);
+        scrollList("bottom");
       }}
       loader={false}
     />
@@ -165,7 +167,11 @@
     {/if}
     {#if localEnvironment && localEnvironment.length > 0}
       <ul class={`env-side-tab-list p-0`}>
-        <List height={"calc(100vh - 180px)"} classProps={"pb-2 pe-2"}>
+        <List
+          bind:scrollList
+          height={"calc(100vh - 195px)"}
+          classProps={"pb-2 pe-2"}
+        >
           {#each localEnvironment as env}
             <ListItem
               {env}

diff --git a/src/packages/@library/ui/list/List.svelte b/src/packages/@library/ui/list/List.svelte
@@ -15,10 +15,39 @@
    * additional classes
    */
   export let classProps = "";
+
+  /**
+   * binds scroll function to the parent component
+   */
+  export let scrollList;
+
+  /**
+   *  list container wrapper
+   */
+  let listContainer: HTMLElement;
+
+  /**
+   * @description - scrolls the list container to top or bottom
+   * @param position - decides the direction to scroll
+   */
+  const scroll = (position: "bottom") => {
+    if (position === "bottom") {
+      listContainer.scrollTo({
+        top: listContainer.scrollHeight,
+        behavior: "smooth",
+      });
+    }
+  };
+
+  /**
+   * @description - triggers child function from parent component
+   */
+  $: scrollList = (param: "bottom") => scroll(param);
 </script>
 
 <div
-  class={`list-container gap-2 sparrow-thin-scrollbar ${classProps}`}
+  bind:this={listContainer}
+  class={`list-container gap-2 ${classProps}`}
   style={`height: ${height}; overflow-y: ${overflowY}; overflow-x: ${overflowX};`}
 >
   <div class="list-body">

diff --git a/src/packages/@workspaces/features/collection-list/layout/CollectionList.svelte b/src/packages/@workspaces/features/collection-list/layout/CollectionList.svelte
@@ -82,10 +82,9 @@
   let showfilterDropdown: boolean = false;
   let collectionListDocument: CollectionDocument[];
   let searchData: string = "";
-  let filteredCollection: CollectionDocument[] = [];
-  let filteredFolder: Folder[] = [];
-  let filteredFile: RequestType[] = [];
   let addButtonMenu: boolean = false;
+
+  export let scrollList;
   const externalSparrowGithub = constants.SPARROW_GITHUB;
 
   let collectionFilter: any = [];
@@ -288,7 +287,11 @@
         {#if collectionListDocument?.length > 0}
           {#if searchData.length > 0}
             {#if collectionFilter.length > 0}
-              <List height={"calc(100vh - 160px)"} classProps={"pb-2 pe-1"}>
+              <List
+                bind:scrollList
+                height={"calc(100vh - 160px)"}
+                classProps={"pb-2 pe-1"}
+              >
                 {#each collectionFilter as col}
                   <Collection
                     {onItemCreated}
@@ -306,7 +309,11 @@
                 {/each}
               </List>
             {:else}
-              <List height={"calc(100vh - 160px)"} classProps={"pb-2 pe-1"}>
+              <List
+                bind:scrollList
+                height={"calc(100vh - 160px)"}
+                classProps={"pb-2 pe-1"}
+              >
                 <p
                   class="not-found-text text-fs-12 text-center mx-auto ellipsis"
                 >
@@ -315,7 +322,11 @@
               </List>
             {/if}
           {:else}
-            <List height={"calc(100vh - 160px)"} classProps={"pb-2 pe-1"}>
+            <List
+              bind:scrollList
+              height={"calc(100vh - 160px)"}
+              classProps={"pb-2 pe-1"}
+            >
               {#each collectionListDocument as col}
                 <Collection
                   {onItemCreated}