Client: added selection for to highlight changed indexes

packages/client/src/HOCs/withFileActions.js

@@ -276,7 +276,9 @@ export default function withFileActions(WrappedFileItem) {
         isDisabledDropItem,
         isRecentTab,
         canDrag,
+        isIndexUpdated,
       } = this.props;
+
       const { access, id } = item;
 
       const isDragging =
@@ -335,6 +337,7 @@ export default function withFileActions(WrappedFileItem) {
           value={value}
           displayShareButton={displayShareButton}
           isPrivacy={isPrivacy}
+          isIndexUpdated={isIndexUpdated}
           checkedProps={checkedProps}
           dragging={dragging}
           getContextModel={this.getContextModel}
@@ -360,6 +363,7 @@ export default function withFileActions(WrappedFileItem) {
         filesStore,
         uploadDataStore,
         contextOptionsStore,
+        indexingStore,
       },
       { item, t },
     ) => {
@@ -373,6 +377,7 @@ export default function withFileActions(WrappedFileItem) {
         uploadEmptyFolders,
       } = filesActionsStore;
       const { setSharingPanelVisible } = dialogsStore;
+      const { updateSelection } = indexingStore;
       const {
         isPrivacyFolder,
         isRecycleBinFolder,
@@ -407,6 +412,8 @@ export default function withFileActions(WrappedFileItem) {
         (x) => x.id === item.id && x.fileExst === item.fileExst,
       );
 
+      const isIndexUpdated = !!updateSelection.find((x) => x === item.id);
+
       const isDisabledDropItem = item.security?.Create === false;
 
       const draggable =
@@ -504,6 +511,7 @@ export default function withFileActions(WrappedFileItem) {
         currentDeviceType: settingsStore.currentDeviceType,
         isDisabledDropItem,
         isRecentTab,
+        isIndexUpdated,
 
         canDrag: !dragIsDisabled,
       };

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

@@ -82,10 +82,12 @@ const StyledTableContainer = styled(TableContainer)`
   .table-row-selected + .table-row-selected {
     .table-row {
       .table-container_file-name-cell,
+      .table-container_index-cell,
       .table-container_row-context-menu-wrapper {
         border-image-slice: 1;
       }
-      .table-container_file-name-cell {
+      .table-container_file-name-cell,
+      .table-container_index-cell {
         ${fileNameCss}
         border-left: 0; //for Safari macOS
         border-right: 0; //for Safari macOS
@@ -104,7 +106,8 @@ const StyledTableContainer = styled(TableContainer)`
 
   .files-item:not(.table-row-selected) + .table-row-selected {
     .table-row {
-      .table-container_file-name-cell {
+      .table-container_file-name-cell,
+      .table-container_index-cell {
         ${fileNameCss}
       }
 
@@ -142,7 +145,7 @@ const Table = ({
   columnInfoPanelStorageName,
   highlightFile,
   currentDeviceType,
-  onEditIndex
+  onEditIndex,
 }) => {
   const [tagCount, setTagCount] = React.useState(null);
   const [hideColumns, setHideColumns] = React.useState(false);
@@ -274,7 +277,7 @@ export default inject(
     settingsStore,
 
     indexingStore,
-    filesActionsStore
+    filesActionsStore,
   }) => {
     const { isVisible: infoPanelVisible } = infoPanelStore;
 
@@ -297,7 +300,7 @@ export default inject(
     } = filesStore;
 
     const { isIndexEditingMode } = indexingStore;
-    const {changeIndex} = filesActionsStore;
+    const { changeIndex } = filesActionsStore;
 
     const { withPaging, theme, currentDeviceType } = settingsStore;
 

packages/client/src/store/FilesActionsStore.js

@@ -105,6 +105,7 @@ class FilesActionStore {
   publicRoomStore;
   infoPanelStore;
   peopleStore;
+  indexingStore;
   userStore = null;
   currentTariffStatusStore = null;
   currentQuotaStore = null;
@@ -132,6 +133,7 @@ class FilesActionStore {
     currentTariffStatusStore,
     peopleStore,
     currentQuotaStore,
+    indexingStore,
   ) {
     makeAutoObservable(this);
     this.settingsStore = settingsStore;
@@ -151,6 +153,7 @@ class FilesActionStore {
     this.currentTariffStatusStore = currentTariffStatusStore;
     this.peopleStore = peopleStore;
     this.currentQuotaStore = currentQuotaStore;
+    this.indexingStore = indexingStore;
   }
 
   setIsBulkDownload = (isBulkDownload) => {
@@ -2726,6 +2729,7 @@ class FilesActionStore {
   changeIndex = async (action, item) => {
     const { filesList } = this.filesStore;
     const { id } = this.selectedFolderStore;
+    const { updateSelection, setUpdateSelection } = this.indexingStore;
     const index = filesList.findIndex((elem) => elem.id === item?.id);
 
     const operationId = uniqueid("operation_");
@@ -2743,6 +2747,20 @@ class FilesActionStore {
     if (!replaceable) return;
 
     await changeIndex(item?.id, replaceable.order, item?.isFolder);
+
+    const newSelection = [...updateSelection];
+    const addedArray = [item.id, replaceable.id];
+
+    for (const id of addedArray) {
+      const exist = updateSelection.find(
+        (selectionItem) => selectionItem === id,
+      );
+
+      if (exist) continue;
+      newSelection.push(id);
+    }
+
+    setUpdateSelection(newSelection);
     this.updateCurrentFolder(null, [id], true, operationId);
   };
 

packages/client/src/store/IndexingStore.js

@@ -31,6 +31,7 @@ class IndexingStore {
 
   isIndexEditingMode = false;
   isIndexing = false;
+  updateSelection = [];
 
   constructor(selectedFolderStore) {
     this.selectedFolderStore = selectedFolderStore;
@@ -43,7 +44,14 @@ class IndexingStore {
     this.isIndexing = indexing;
   };
 
+  setUpdateSelection = (selection) => {
+    this.updateSelection = selection;
+  };
+
   setIsIndexEditingMode = (mode) => {
+    if (!mode) {
+      this.setUpdateSelection([]);
+    }
     this.isIndexEditingMode = mode;
   };
 }