[dir view] added 'star/unstar' to the context menu of items in grid mode, and to the dropdown menu in the top toolbar for the single selected item; and other improments (#7776)

frontend/src/components/dirent-grid-view/dirent-grid-view.js

@@ -352,6 +352,12 @@ class DirentGridView extends React.Component {
       case 'Copy':
         this.onItemCopyToggle();
         break;
+      case 'Star':
+        this.onToggleStarItem();
+        break;
+      case 'Unstar':
+        this.onToggleStarItem();
+        break;
       case 'Unfreeze Document':
         this.onUnlockItem(currentObject);
         break;
@@ -507,6 +513,35 @@ class DirentGridView extends React.Component {
     this.setState({ isCopyDialogShow: !this.state.isCopyDialogShow });
   };
 
+  onToggleStarItem = () => {
+    const { activeDirent: dirent } = this.state;
+    const { repoID } = this.props;
+    const filePath = this.getDirentPath(dirent);
+    const itemName = dirent.name;
+
+    if (dirent.starred) {
+      seafileAPI.unstarItem(repoID, filePath).then(() => {
+        this.props.updateDirent(dirent, 'starred', false);
+        const msg = gettext('Successfully unstarred {name_placeholder}.')
+          .replace('{name_placeholder}', itemName);
+        toaster.success(msg);
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
+      });
+    } else {
+      seafileAPI.starItem(repoID, filePath).then(() => {
+        this.props.updateDirent(dirent, 'starred', true);
+        const msg = gettext('Successfully starred {name_placeholder}.')
+          .replace('{name_placeholder}', itemName);
+        toaster.success(msg);
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
+      });
+    }
+  };
+
   onPermissionItem = () => {
     this.setState({ isPermissionDialogOpen: !this.state.isPermissionDialogOpen });
   };

frontend/src/components/dirent-list-view/dirent-list-item.js

@@ -234,21 +234,28 @@ class DirentListItem extends React.Component {
     this.props.onItemSelected(this.state.dirent, event);
   };
 
-  onItemStarred = (e) => {
+  onItemStarred = () => {
-    let dirent = this.state.dirent;
+    const { dirent } = this.state;
-    let repoID = this.props.repoID;
+    const { repoID } = this.props;
-    let filePath = this.getDirentPath(dirent);
+    const filePath = this.getDirentPath(dirent);
+    const itemName = dirent.name;
 
     if (dirent.starred) {
       seafileAPI.unstarItem(repoID, filePath).then(() => {
-        this.props.updateDirent(this.state.dirent, 'starred', false);
+        this.props.updateDirent(dirent, 'starred', false);
+        const msg = gettext('Successfully unstarred {name_placeholder}.')
+          .replace('{name_placeholder}', itemName);
+        toaster.success(msg);
       }).catch(error => {
         let errMessage = Utils.getErrorMsg(error);
         toaster.danger(errMessage);
       });
     } else {
       seafileAPI.starItem(repoID, filePath).then(() => {
-        this.props.updateDirent(this.state.dirent, 'starred', true);
+        this.props.updateDirent(dirent, 'starred', true);
+        const msg = gettext('Successfully starred {name_placeholder}.')
+          .replace('{name_placeholder}', itemName);
+        toaster.success(msg);
       }).catch(error => {
         let errMessage = Utils.getErrorMsg(error);
         toaster.danger(errMessage);

frontend/src/components/toolbar/selected-dirents-toolbar.js

@@ -114,6 +114,35 @@ class SelectedDirentsToolbar extends React.Component {
     this.props.onItemRename(dirent, newName);
   };
 
+  onToggleStarItem = () => {
+    const { repoID, selectedDirentList } = this.props;
+    const dirent = selectedDirentList[0];
+    const filePath = this.getDirentPath(dirent);
+    const itemName = dirent.name;
+
+    if (dirent.starred) {
+      seafileAPI.unstarItem(repoID, filePath).then(() => {
+        this.props.updateDirent(dirent, 'starred', false);
+        const msg = gettext('Successfully unstarred {name_placeholder}.')
+          .replace('{name_placeholder}', itemName);
+        toaster.success(msg);
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
+      });
+    } else {
+      seafileAPI.starItem(repoID, filePath).then(() => {
+        this.props.updateDirent(dirent, 'starred', true);
+        const msg = gettext('Successfully starred {name_placeholder}.')
+          .replace('{name_placeholder}', itemName);
+        toaster.success(msg);
+      }).catch(error => {
+        let errMessage = Utils.getErrorMsg(error);
+        toaster.danger(errMessage);
+      });
+    }
+  };
+
   onPermissionItem = () => {
     this.setState({
       showLibContentViewDialogs: !this.state.showLibContentViewDialogs,
@@ -174,6 +203,12 @@ class SelectedDirentsToolbar extends React.Component {
           isRenameDialogOpen: true
         });
         break;
+      case 'Star':
+        this.onToggleStarItem();
+        break;
+      case 'Unstar':
+        this.onToggleStarItem();
+        break;
       case 'Permission':
         this.onPermissionItem();
         break;

frontend/src/utils/text-translation.js

@@ -147,6 +147,14 @@ const TextTranslation = {
     key: 'Export sdoc',
     value: gettext('Export as zip')
   },
+  STAR: {
+    key: 'Star',
+    value: gettext('Star')
+  },
+  UNSTAR: {
+    key: 'Unstar',
+    value: gettext('Unstar')
+  },
 
   // repo operations
   TRANSFER: {

frontend/src/utils/utils.js

@@ -491,7 +491,7 @@ export const Utils = {
   getFolderOperationList: function (isRepoOwner, currentRepoInfo, dirent, isContextmenu) {
 
     let list = [];
-    const { SHARE, DOWNLOAD, DELETE, RENAME, MOVE, COPY, PERMISSION, OPEN_VIA_CLIENT } = TextTranslation;
+    const { SHARE, DOWNLOAD, DELETE, RENAME, MOVE, COPY, PERMISSION, OPEN_VIA_CLIENT, STAR, UNSTAR } = TextTranslation;
     const permission = dirent.permission;
     const { isCustomPermission, customPermission } = Utils.getUserPermission(permission);
 
@@ -533,6 +533,12 @@ export const Utils = {
       list.push(COPY);
     }
 
+    if (dirent.starred) {
+      list.push(UNSTAR);
+    } else {
+      list.push(STAR);
+    }
+
     if (permission == 'rw') {
       if (folderPermEnabled && ((isRepoOwner && currentRepoInfo.has_been_shared_out) || currentRepoInfo.is_admin)) {
         list.push('Divider', PERMISSION);
@@ -557,7 +563,8 @@ export const Utils = {
     const {
       SHARE, DOWNLOAD, DELETE, RENAME, MOVE, COPY, UNLOCK, LOCK, UNFREEZE_DOCUMENT, FREEZE_DOCUMENT,
       HISTORY, ACCESS_LOG, PROPERTIES, OPEN_VIA_CLIENT, ONLYOFFICE_CONVERT,
-      CONVERT_AND_EXPORT, CONVERT_TO_MARKDOWN, CONVERT_TO_DOCX, EXPORT_DOCX, CONVERT_TO_SDOC, EXPORT_SDOC
+      CONVERT_AND_EXPORT, CONVERT_TO_MARKDOWN, CONVERT_TO_DOCX, EXPORT_DOCX, CONVERT_TO_SDOC, EXPORT_SDOC,
+      STAR, UNSTAR
     } = TextTranslation;
     const permission = dirent.permission;
     const { isCustomPermission, customPermission } = Utils.getUserPermission(permission);
@@ -612,6 +619,12 @@ export const Utils = {
       }
     }
 
+    if (dirent.starred) {
+      list.push(UNSTAR);
+    } else {
+      list.push(STAR);
+    }
+
     if (permission == 'rw') {
       if (isPro) {
         if (dirent.is_locked) {