star repo (#2980)

* star repo

* file_icon_url -> item_icon_url

* add UserStarredFiles.objects.get_starred_repos_by_user()

frontend/src/pages/my-libs/mylib-repo-list-item.js

@@ -34,6 +34,7 @@ class MylibRepoListItem extends React.Component {
     super(props);
     this.state = {
       isOpIconShow: false,
+      isStarred: this.props.repo.starred,
       isRenaming: false,
       isShareDialogShow: false,
       isDeleteDialogShow: false,
@@ -103,6 +104,18 @@ class MylibRepoListItem extends React.Component {
     this.props.onRepoClick(this.props.repo);
   }
 
+  onStarRepo = () => {
+    if (this.state.isStarred) {
+      seafileAPI.unStarItem(this.props.repo.repo_id, '/').then(() => {
+        this.setState({isStarred: !this.state.isStarred});
+      });
+    } else {
+      seafileAPI.starItem(this.props.repo.repo_id, '/').then(() => {
+        this.setState({isStarred: !this.state.isStarred});
+      })
+    }
+  }
+
   onShareToggle = () => {
     this.setState({isShareDialogShow: !this.state.isShareDialogShow});
   }
@@ -180,24 +193,28 @@ class MylibRepoListItem extends React.Component {
 
   renderPCUI = () => {
     let repo = this.props.repo;
-    let iconUrl = Utils.getLibIconUrl(repo); 
+    let iconUrl = Utils.getLibIconUrl(repo);
     let iconTitle = Utils.getLibIconTitle(repo);
     let repoURL = `${siteRoot}library/${repo.repo_id}/${Utils.encodePath(repo.repo_name)}/`;
     return (
       <tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onClick={this.onRepoClick}>
+        <td className="text-center">
+          {!this.state.isStarred && <i className="far fa-star star-empty cursor-pointer" onClick={this.onStarRepo}></i>}
+          {this.state.isStarred && <i className="fas fa-star cursor-pointer" onClick={this.onStarRepo}></i>}
+        </td>
         <td><img src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td>
         <td>
           {this.state.isRenaming && (
-            <Rename 
-              name={repo.repo_name} 
-              onRenameConfirm={this.onRenameConfirm} 
+            <Rename
+              name={repo.repo_name}
+              onRenameConfirm={this.onRenameConfirm}
               onRenameCancel={this.onRenameCancel}
             />
           )}
           {!this.state.isRenaming && repo.repo_name && (
             <Link to={repoURL}>{repo.repo_name}</Link>
           )}
-          {!this.state.isRenaming && !repo.repo_name && 
+          {!this.state.isRenaming && !repo.repo_name &&
             (gettext('Broken (please contact your administrator to fix this library)'))
           }
         </td>
@@ -206,9 +223,9 @@ class MylibRepoListItem extends React.Component {
             <div>
               <a href="#" className="op-icon sf2-icon-share" title={gettext('Share')} onClick={this.onShareToggle}></a>
               <a href="#" className="op-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.onDeleteToggle}></a>
-              <MylibRepoMenu 
-                isPC={true} 
-                repo={this.props.repo} 
+              <MylibRepoMenu
+                isPC={true}
+                repo={this.props.repo}
                 onMenuItemClick={this.onMenuItemClick}
                 onFreezedItem={this.props.onFreezedItem}
                 onUnfreezedItem={this.onUnfreezedItem}
@@ -225,7 +242,7 @@ class MylibRepoListItem extends React.Component {
 
   renderMobileUI = () => {
     let repo = this.props.repo;
-    let iconUrl = Utils.getLibIconUrl(repo); 
+    let iconUrl = Utils.getLibIconUrl(repo);
     let iconTitle = Utils.getLibIconTitle(repo);
     let repoURL = `${siteRoot}library/${repo.repo_id}/${Utils.encodePath(repo.repo_name)}/`;
 
@@ -234,16 +251,16 @@ class MylibRepoListItem extends React.Component {
         <td><img src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td>
         <td>
         {this.state.isRenaming && (
-            <Rename 
-              name={repo.repo_name} 
-              onRenameConfirm={this.onRenameConfirm} 
+            <Rename
+              name={repo.repo_name}
+              onRenameConfirm={this.onRenameConfirm}
               onRenameCancel={this.onRenameCancel}
             />
           )}
           {!this.state.isRenaming && repo.repo_name && (
             <div><Link to={repoURL}>{repo.repo_name}</Link></div>
           )}
-          {!this.state.isRenaming && !repo.repo_name && 
+          {!this.state.isRenaming && !repo.repo_name &&
             <div>(gettext('Broken (please contact your administrator to fix this library)'))</div>
           }
           <span className="item-meta-info">{repo.size}</span>
@@ -251,8 +268,8 @@ class MylibRepoListItem extends React.Component {
         </td>
         <td>
           {repo.repo_name && (
-            <MylibRepoMenu 
-              repo={this.props.repo} 
+            <MylibRepoMenu
+              repo={this.props.repo}
               onMenuItemClick={this.onMenuItemClick}
               onFreezedItem={this.props.onFreezedItem}
               onUnfreezedItem={this.onUnfreezedItem}
@@ -275,7 +292,7 @@ class MylibRepoListItem extends React.Component {
         </MediaQuery>
         {this.state.isShareDialogShow && (
           <ModalPortal>
-            <ShareDialog 
+            <ShareDialog
               itemType={'library'}
               itemName={repo.repo_name}
               itemPath={'/'}
@@ -289,26 +306,26 @@ class MylibRepoListItem extends React.Component {
         )}
         {this.state.isDeleteDialogShow && (
           <ModalPortal>
-            <DeleteRepoDialog 
+            <DeleteRepoDialog
               repo={repo}
               onDeleteRepo={this.onDeleteRepo}
-              toggle={this.onDeleteToggle} 
+              toggle={this.onDeleteToggle}
             />
           </ModalPortal>
         )}
         {this.state.isTransferDialogShow && (
           <ModalPortal>
-            <TransferDialog 
+            <TransferDialog
               repoID={repo.repo_id}
               itemName={repo.repo_name}
               submit={this.onTransferRepo}
-              toggleDialog={this.onTransferToggle} 
+              toggleDialog={this.onTransferToggle}
             />
           </ModalPortal>
         )}
         {this.state.isHistorySettingDialogShow && (
           <ModalPortal>
-            <LibHistorySettingDialog 
+            <LibHistorySettingDialog
               repoID={repo.repo_id}
               itemName={repo.repo_name}
               toggleDialog={this.onHistorySettingToggle}
@@ -317,7 +334,7 @@ class MylibRepoListItem extends React.Component {
         )}
         {this.state.isChangePasswordDialogShow && (
           <ModalPortal>
-            <ChangeRepoPasswordDialog 
+            <ChangeRepoPasswordDialog
               repoID={repo.repo_id}
               repoName={repo.repo_name}
               toggleDialog={this.onChangePasswordToggle}
@@ -326,7 +343,7 @@ class MylibRepoListItem extends React.Component {
         )}
         {this.state.isResetPasswordDialogShow && (
           <ModalPortal>
-            <ResetEncryptedRepoPasswordDialog 
+            <ResetEncryptedRepoPasswordDialog
               repoID={repo.repo_id}
               toggleDialog={this.onResetPasswordToggle}
             />