fix: Screenshots of application uploaded in sequence

fix: Openpitrix api change in github issue
kubesphere · Feb 19, 2020 · ed610f5 · ed610f5
1 parent 7b24d31
commit ed610f5
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 46 deletions.
diff --git a/src/configs/openpitrix/app.js b/src/configs/openpitrix/app.js
@@ -99,3 +99,5 @@ export const UPLOAD_FILE_TYPES = {
 }
 
 export const WORKSPACE_REPO_ID = 'repo-helm'
+
+export const SCREENSHOTS_LIMIT = 6
diff --git a/src/pages/apps/components/Cards/ScreenshotsEdit/index.jsx b/src/pages/apps/components/Cards/ScreenshotsEdit/index.jsx
@@ -24,12 +24,10 @@ import { Icon } from '@pitrix/lego-ui'
 import { get } from 'lodash'
 
 import { Image, Upload } from 'components/Base'
-import { UPLOAD_FILE_TYPES, UPLOAD_CHECK_RULES } from 'configs/openpitrix/app'
+import { UPLOAD_FILE_TYPES, SCREENSHOTS_LIMIT } from 'configs/openpitrix/app'
 
 import styles from './index.scss'
 
-const MAX_LEN = 6
-
 @observer
 export default class Screenshots extends React.Component {
   static propTypes = {
@@ -50,7 +48,7 @@ export default class Screenshots extends React.Component {
     this.uploadRef.onClick()
   }
 
-  uploadScreenshot = async file => {
+  uploadScreenshot = async (file, fileList) => {
     const { checkFile, handleFileByBase64Str } = this.props.fileStore
     const { uploadScreenshot } = this.props.store
     const { detail } = this.props
@@ -59,18 +57,10 @@ export default class Screenshots extends React.Component {
     if (result) {
       this.setState({ error: result })
     } else {
+      const index = fileList.indexOf(file)
       handleFileByBase64Str(file, async base64Str => {
         this.setState({ error: '' })
-        const img = await this.createImageElement(base64Str)
-        const { screenshots } = UPLOAD_CHECK_RULES
-        if (
-          img.height > screenshots.maxHeight ||
-          img.width > screenshots.maxWidth
-        ) {
-          this.setState({ error: t('FILE_SCREENSHOTS_NOTE') })
-        } else {
-          uploadScreenshot(base64Str, detail)
-        }
+        uploadScreenshot(base64Str, detail, index)
       })
     }
 
@@ -114,7 +104,7 @@ export default class Screenshots extends React.Component {
                 </div>
               </li>
             ))}
-            {len < MAX_LEN && (
+            {len < SCREENSHOTS_LIMIT && (
               <li className={styles.upload}>
                 <Upload
                   multiple
@@ -134,7 +124,8 @@ export default class Screenshots extends React.Component {
             <div className={styles.error}>{t(this.state.error)}</div>
           ) : (
             <div className={styles.words}>
-              {len}/{MAX_LEN} {t('screenshots')} ({t('FILE_SCREENSHOTS_NOTE')})
+              {len}/{SCREENSHOTS_LIMIT} {t('screenshots')} (
+              {t('FILE_SCREENSHOTS_NOTE')})
               {len > 0 ? (
                 <label
                   className={styles.deleteAll}

diff --git a/src/pages/projects/components/Modals/RepoApp/Apps/index.jsx b/src/pages/projects/components/Modals/RepoApp/Apps/index.jsx
@@ -104,7 +104,7 @@ class Apps extends Component {
           limit: STORE_APP_LIMIT,
           status: this.isFormWorkspace ? '' : 'active',
           isv: this.isFormWorkspace ? this.props.workspace : '',
-          repo: this.selectedRepo,
+          repo_id: this.selectedRepo,
         },
         params
       )

diff --git a/src/stores/openpitrix/app.js b/src/stores/openpitrix/app.js
@@ -19,10 +19,9 @@
 import { action, observable } from 'mobx'
 import { get } from 'lodash'
 
-import { DEFAULT_QUERY_STATUS } from 'configs/openpitrix/app'
+import { DEFAULT_QUERY_STATUS, SCREENSHOTS_LIMIT } from 'configs/openpitrix/app'
 import Base from 'stores/openpitrix/base'
 
-let sequence = 0 // app screenshot for sort
 export default class App extends Base {
   defaultStatus = DEFAULT_QUERY_STATUS
 
@@ -34,22 +33,35 @@ export default class App extends Base {
   @observable
   allApps = []
 
+  uploadScreenshots = []
+
   @action
   upload = async ({ app_id, ...data } = {}) => {
     await request.patch(this.getUrl({ app_id }), data)
   }
 
-  uploadBySequence = (index, base64Str) => {
-    setTimeout(
-      () =>
-        this.upload({
-          app_id: this.detail.app_id,
-          type: 'screenshot',
-          attachment_content: base64Str,
-          sequence: index,
-        }),
-      index * 300
-    )
+  uploadBySequence = async (start, index, base64Str, detail) => {
+    await this.upload({
+      app_id: this.detail.app_id,
+      type: 'screenshot',
+      attachment_content: base64Str,
+      sequence: start + index,
+    })
+
+    const screenshotStr = get(this.detail, 'screenshots', '')
+    const newScreenshots = screenshotStr
+      ? `${screenshotStr},${base64Str}`
+      : base64Str
+    this.detail = {
+      ...detail,
+      screenshots: newScreenshots,
+    }
+
+    const nextIndex = index + 1
+    const nextBase64Str = this.uploadScreenshots[nextIndex]
+    if (nextBase64Str) {
+      await this.uploadBySequence(start, nextIndex, nextBase64Str, detail)
+    }
   }
 
   @action
@@ -87,23 +99,21 @@ export default class App extends Base {
     })
 
   @action
-  uploadScreenshot = async (base64Str, detail) => {
+  uploadScreenshot = async (base64Str, detail, index) => {
     const screenshotStr = get(this.detail, 'screenshots', '')
     const screenshots = screenshotStr ? screenshotStr.split(',') : []
-    sequence = screenshots.length - 1
-    sequence++
+    const total = index + screenshots.length
 
-    if (sequence >= 6) {
+    if (total >= SCREENSHOTS_LIMIT) {
       return false
     }
 
-    const newScreenshots =
-      sequence === 0 ? base64Str : `${screenshotStr},${base64Str}`
-    this.detail = {
-      ...detail,
-      screenshots: newScreenshots,
+    if (index === 0) {
+      this.uploadScreenshots = [base64Str]
+      await this.uploadBySequence(screenshots.length, index, base64Str, detail)
+    } else {
+      this.uploadScreenshots.push(base64Str)
     }
-    this.uploadBySequence(sequence, base64Str)
   }
 
   @action
@@ -129,7 +139,6 @@ export default class App extends Base {
     }
 
     this.detail.screenshots = ''
-    sequence = 0
     for (let i = screenshots.length - 1; i >= 0; i--) {
       await this.upload({
         app_id: this.detail.app_id,

diff --git a/src/stores/openpitrix/base.js b/src/stores/openpitrix/base.js
@@ -84,7 +84,7 @@ export default class Base {
     return promise
   }
 
-  getConditions = ({ status, app_id, version_id, repo } = {}) => {
+  getConditions = ({ status, app_id, version_id, repo_id } = {}) => {
     const conditions = {
       status: status || this.defaultStatus,
     }
@@ -94,8 +94,8 @@ export default class Base {
       conditions.version_id = version_id
     }
 
-    if (repo || this.defaultRepo) {
-      conditions.repo = repo || this.defaultRepo
+    if (repo_id || this.defaultRepo) {
+      conditions.repo_id = repo_id || this.defaultRepo
     }
 
     return conditions
@@ -109,7 +109,7 @@ export default class Base {
     status,
     app_id,
     version_id,
-    repo,
+    repo_id,
     statistics,
     order,
     reverse,
@@ -122,7 +122,7 @@ export default class Base {
       status,
       app_id,
       version_id,
-      repo,
+      repo_id,
     })
 
     const params = {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -99,3 +99,5 @@ export const UPLOAD_FILE_TYPES = {
		}

		export const WORKSPACE_REPO_ID = 'repo-helm'

		export const SCREENSHOTS_LIMIT = 6