Client: added change index action with quick button in table view

packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js

@@ -142,6 +142,7 @@ const Table = ({
   columnInfoPanelStorageName,
   highlightFile,
   currentDeviceType,
+  onEditIndex
 }) => {
   const [tagCount, setTagCount] = React.useState(null);
   const [hideColumns, setHideColumns] = React.useState(false);
@@ -204,6 +205,7 @@ const Table = ({
         item={item}
         itemIndex={index}
         index={index}
+        onEditIndex={onEditIndex}
         isIndexEditingMode={isIndexEditingMode}
         setFirsElemChecked={setFirsElemChecked}
         setHeaderBorder={setHeaderBorder}
@@ -272,6 +274,7 @@ export default inject(
     settingsStore,
 
     indexingStore,
+    filesActionsStore
   }) => {
     const { isVisible: infoPanelVisible } = infoPanelStore;
 
@@ -294,6 +297,7 @@ export default inject(
     } = filesStore;
 
     const { isIndexEditingMode } = indexingStore;
+    const {changeIndex} = filesActionsStore;
 
     const { withPaging, theme, currentDeviceType } = settingsStore;
 
@@ -317,6 +321,7 @@ export default inject(
       columnInfoPanelStorageName,
       highlightFile,
       currentDeviceType,
+      onEditIndex: changeIndex,
     };
   },
 )(observer(Table));

packages/client/src/pages/Home/Section/Body/TableView/TableRow.js

@@ -73,6 +73,7 @@ const FilesTableRow = (props) => {
     badgeUrl,
     isRecentTab,
     canDrag,
+    onEditIndex,
   } = props;
   const { acceptBackground, background } = theme.dragAndDrop;
 
@@ -108,6 +109,10 @@ const FilesTableRow = (props) => {
     },
   };
 
+  const onChangeIndex = (action) => {
+    return onEditIndex(action, item);
+  };
+
   const onDragOverEvent = (dragActive, e) => {
     onDragOver && onDragOver(e);
 
@@ -172,13 +177,14 @@ const FilesTableRow = (props) => {
         key={item.id}
         fileContextClick={fileContextClick}
         onClick={isIndexEditingMode ? () => {} : onMouseClick}
+        onChangeIndex={onChangeIndex}
         isActive={isActive}
         isIndexEditingMode={isIndexEditingMode}
         inProgress={inProgress}
         isFolder={item.isFolder}
         onHideContextMenu={onHideContextMenu}
         isThirdPartyFolder={item.isThirdPartyFolder}
-        onDoubleClick={onDoubleClick}
+        onDoubleClick={isIndexEditingMode ? () => {} : onDoubleClick}
         checked={checkedProps}
         showHotkeyBorder={showHotkeyBorder}
         title={

packages/client/src/store/FilesActionsStore.js

@@ -54,6 +54,8 @@ import {
   moveToFolder,
   getFolder,
   deleteFilesFromRecent,
+  changeIndex,
+  reorder,
 } from "@docspace/shared/api/files";
 import {
   ConflictResolveType,
@@ -63,6 +65,7 @@ import {
   FolderType,
   RoomsType,
   ShareAccessRights,
+  VDRIndexingAction,
 } from "@docspace/shared/enums";
 import { makeAutoObservable } from "mobx";
 
@@ -2720,6 +2723,32 @@ class FilesActionStore {
     await deleteFilesFromRecent(fileIds);
     await refreshFiles();
   };
+  changeIndex = async (action, item) => {
+    const { filesList } = this.filesStore;
+    const { id } = this.selectedFolderStore;
+    const index = filesList.findIndex((elem) => elem.id === item?.id);
+
+    const operationId = uniqueid("operation_");
+    const isUpperIndex = action === VDRIndexingAction.HigherIndex;
+    const isLowerIndex = action === VDRIndexingAction.LowerIndex;
+    let replaceable;
+    if (isUpperIndex && index !== 0) {
+      replaceable = filesList[index - 1];
+    }
+
+    if (isLowerIndex && index !== filesList.length - 1) {
+      replaceable = filesList[index + 1];
+    }
+    if (!replaceable) return;
+
+    await changeIndex(item?.id, replaceable.order, item?.isFolder);
+    this.updateCurrentFolder(null, [id], true, operationId);
+  };
+
+  reorder = async () => {
+    // console.log("reorder");
+    await reorder(item?.id);
+  };
 }
 
 export default FilesActionStore;

packages/shared/components/color-theme/ColorTheme.tsx

@@ -77,7 +77,10 @@ const ColorTheme = forwardRef<
       }
       case ThemeId.IndexIconButton: {
         return (
-          <StyledIndexWrapper $currentColorScheme={currentColorScheme}>
+          <StyledIndexWrapper
+            $currentColorScheme={currentColorScheme}
+            onClick={props.onClick}
+          >
             <IconButtonTheme
               {...props}
               themeId={themeId}

packages/shared/components/table/TableRow.tsx

@@ -26,6 +26,7 @@
 
 import React, { useRef } from "react";
 import ArrowReactSvgUrl from "PUBLIC_DIR/images/arrow2.react.svg?url";
+import { VDRIndexingAction } from "../../enums";
 
 import { ContextMenu } from "../context-menu";
 import {
@@ -52,6 +53,7 @@ const TableRow = (props: TableRowProps) => {
     getContextModel,
     badgeUrl,
     isIndexEditingMode,
+    onChangeIndex,
     ...rest
   } = props;
 
@@ -106,14 +108,14 @@ const TableRow = (props: TableRowProps) => {
                 iconName={ArrowReactSvgUrl}
                 className="index-up-icon"
                 size="small"
-                // onClick={onClickShare}
+                onClick={() => onChangeIndex(VDRIndexingAction.HigherIndex)}
               />
               <ColorTheme
                 themeId={ThemeId.IndexIconButton}
                 iconName={ArrowReactSvgUrl}
                 className="index-down-icon"
                 size="small"
-                // onClick={onClickShare}
+                onClick={() => onChangeIndex(VDRIndexingAction.LowerIndex)}
               />
             </>
           ) : (