#71 Set Demo

src/components/CloneNoteBook/CloneNoteBook.vue

@@ -46,8 +46,6 @@ vuex.registerModule(['modals', 'CloneNoteBookModal'], store)
       isShow: state => state.isShow,
       form: state => state.form,
       callback: state => state.callback
-    }),
-    ...mapState({
     })
   },
   methods: {
@@ -115,7 +113,8 @@ export default class CloneNoteBookModal extends Vue {
           const params = {
             name: this.form.name.trim(),
             id: this.form.id,
-            type: this.form.type
+            type: this.form.type,
+            commit_id: this.form.commit_id
           }
           let result = null
           if (this.form.type === 'folder') {

src/components/CloneNoteBook/store.js

@@ -8,7 +8,9 @@ export function getInitState () {
     form: {
       id: '',
       name: '',
-      type: ''
+      type: '',
+      uniq: '',
+      commit_id: ''
     },
     callback: () => {}
   }

src/components/MoveNotebook/index.vue

@@ -123,9 +123,9 @@ export default class MoveNotebookModal extends Vue {
   }
 
   getFolderList (list) {
-    const temp = list.filter(v => v.children)
+    const temp = list.filter(v => v.children && !v.is_demo)
     temp.forEach(v => {
-      if (v.children) {
+      if (v.children && !v.is_demo) {
         const list = this.getFolderList(v.children)
         if (list.length === 0) {
           delete v.children
@@ -167,7 +167,7 @@ export default class MoveNotebookModal extends Vue {
           const tartget_folder_id = this.form.folder[this.form.folder.length - 1]
           // 目标文件夹中是否含有与被移入文件夹同名的文件
           // 在列表中找到目标文件夹的子级
-          // 被移动的是文件夹 ？ 子集中是否含有被移动的文件夹同名的文件夹 ： 子集中是否含有被移动的 notebook 同名的 notebook 
+          // 被移动的是文件夹 ？ 子集中是否含有被移动的文件夹同名的文件夹 ： 子集中是否含有被移动的 notebook 同名的 notebook
           const originList = [{ name: 'root', label: '', folder_id: '', children: this.notebookList }]
           const targetFolderInfo = this.getChildrenById(tartget_folder_id, originList)
           const targetChildren = targetFolderInfo?.children
@@ -193,7 +193,7 @@ export default class MoveNotebookModal extends Vue {
             }
             await this.moveFolder(params)
           } else if (this.isMoveFolder && index !== -1) {
-            // 移动的是文件夹 并且有重名的 do nothing 
+            // 移动的是文件夹 并且有重名的 do nothing
             return
           } else {
             params = {
@@ -232,7 +232,7 @@ export default class MoveNotebookModal extends Vue {
       customClass: 'centerButton'
     })
   }
-  
+
 }
 </script>
 <style lang="scss">

src/components/SetDemo/index.vue

@@ -0,0 +1,120 @@
+<template>
+  <div v-if="userInfo && userInfo.is_admin" class="set-demo">
+    <div
+      v-if="!demoList.includes(activeNotebook.id) && !activeNotebook.commit_id"
+      class="btn"
+    >
+      <span class="hasEvent" @click="handleOperateDemo('publish')">
+        {{ $t('notebook.setDemo') }}
+      </span>
+    </div>
+    <el-dropdown
+      v-if="demoList.includes(activeNotebook.id) && !activeNotebook.commit_id"
+      class="btn"
+      trigger="hover"
+      @command="handleOperateDemo"
+    >
+      <span class="drop-text hasEvent">
+        {{ $t('notebook.demoOn') }}
+        <i class="el-ksd-icon-arrow_down_22 font-22"></i>
+      </span>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item command="update">
+          {{ $t('notebook.updateDemo') }}
+        </el-dropdown-item>
+        <el-dropdown-item command="offline">
+          {{ $t('notebook.offlineDemo') }}
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+import { mapActions, mapState } from 'vuex'
+import { Component } from 'vue-property-decorator'
+import { FileSuffixMap } from '@/config'
+
+@Component({
+  props: {
+    userInfo: {
+      default: () => ({}),
+      type: Object
+    },
+    activeNotebook: {
+      default: () => ({}),
+      type: Object
+    }
+  },
+  computed: {
+    ...mapState({
+      demoList: state => state.notebook.demoList
+    })
+  },
+  methods: {
+    ...mapActions({
+      setDemo: 'SET_DEMO',
+      offlineDemo: 'OFFLINE_DEMO'
+    })
+  }
+})
+export default class SetDemo extends Vue {
+  /**
+   * @param {*} command publish/update/offline
+   * @Date: 2022-01-12 16:31:55
+   */
+  async handleOperateDemo (command) {
+    const isOffline = command === 'offline'
+    const text = this.$t('notebook.demoText', {
+      type: this.$t('notebook.' + command + 'Demo').toLowerCase(),
+      fileName:
+        this.activeNotebook?.name + FileSuffixMap[this.activeNotebook?.type]
+    })
+    const title = this.$t('notebook.' + command + 'Demo')
+
+    this.$confirm(text, title, {
+      confirmButtonText: title,
+      confirmButtonClass: isOffline ? 'el-button--danger' : '',
+      cancelButtonText: this.$t('cancel'),
+      type: isOffline ? 'error' : 'warning',
+      customClass: 'centerButton'
+    }).then(async () => {
+      const params = {
+        entity_id: this.activeNotebook?.id,
+        entity_type: this.activeNotebook?.type
+      }
+
+      let res = {}
+      if (isOffline) {
+        res = await this.offlineDemo(params)
+        this.$emit('offlineTab', this.activeNotebook?.id)
+      } else {
+        params.entity_type === 'notebook' ? this.$emit('runAll', { params, setDemo: this.setDemo, command }) : res = await this.setDemo(params)
+      }
+
+      if (res?.data === 'success') {
+        this.$message.success(this.$t('notebook.' + command + 'Success'))
+        this.$emit('operateDemoSuccess')
+      }
+    })
+  }
+}
+</script>
+<style lang="scss">
+@import '@/assets/css/variable.scss';
+.set-demo {
+  display: inline-flex;
+  .btn {
+    height: 22px;
+    margin-right: 15px;
+    line-height: 22px;
+    .drop-text {
+      color: $--color-black;
+      i {
+        vertical-align: middle;
+      }
+    }
+  }
+}
+</style>

src/components/UploadSystemFile/index.vue

@@ -89,7 +89,7 @@ export default class FileUploadModal extends Vue {
     }
   }
   checkFileSize () {
-    return this.fileList.some(v => v.raw.size > 200 * 1024 * 1024) 
+    return this.fileList.some(v => v.raw.size > 200 * 1024 * 1024)
   }
   checkTotalSize () {
     const sizeList = this.fileList.map(v => v.raw.size)
@@ -128,7 +128,6 @@ export default class FileUploadModal extends Vue {
   }
 
   changeFile (file, fileList) {
-    console.log(file, 'file')
     this.fileList = fileList
     this.handleInput('file', this.fileList.map(v => v.raw))
     this.$refs.$form.validateField('file')

src/config/index.js

@@ -19,4 +19,13 @@ export const notebookNameReg = /^[\u4e00-\u9fa9A-Za-z0-9_]+$/
 
 export const MarkdownTag = '-- Markdown'
 export const PythonTag = '#%python'
-export const SpecialCodeSuggestKey = ['.', '/', '`', '\'', '"']
+export const SpecialCodeSuggestKey = ['.', '/', '`', '\'', '"']
+
+/**
+ * key: file type
+ * value: suffix
+ */
+export const FileSuffixMap = {
+  'notebook': '.bznb',
+  'workflow': '.bzwf'
+}

src/locale/en.json

@@ -71,7 +71,7 @@
     "deleteSuccess": "Successfully Deleted",
     "saveSuccess": "Successfully Saved",
     "createSuccess": "Successfully Created",
-    "importSuccess": "Successfully imported",
+    "importSuccess": "Successfully Imported",
     "notebookClone": "Clone Notebook",
     "folderClone": "Clone Folder",
     "workflowClone": "Clone Workflow",
@@ -145,6 +145,15 @@
     "cancelAll": "Cancel All",
     "clearAllResult": "Clear All Results",
     "showShortcutHelp": "Show Shortcut Help",
+    "setDemo": "Set Demo",
+    "publishDemo": "Publish",
+    "updateDemo": "Update",
+    "offlineDemo": "Offline",
+    "demoText": "Do you want to {type} the {fileName} ?",
+    "demoOn": "Demo On",
+    "publishSuccess": "Successfully Published",
+    "updateSuccess": "Successfully Updated",
+    "offlineSuccess": "Successfully Offline",
     "jobId": "Job Id",
     "viewCompleted": "View Completed Spark Jobs",
     "totalDuration": "Total Duration",

src/locale/zh.json

@@ -142,6 +142,15 @@
     "cancelAll": "停止所有",
     "clearAllResult": "清除所有结果",
     "showShortcutHelp": "显示快捷方式帮助",
+    "setDemo": "发布样例",
+    "publishDemo": "发布",
+    "updateDemo": "更新",
+    "offlineDemo": "下线",
+    "demoText": "是否要{type} {fileName} ？",
+    "demoOn": "已发布",
+    "publishSuccess": "发布成功",
+    "updateSuccess": "更新成功",
+    "offlineSuccess": "下线成功",
     "jobId": "任务 Id",
     "viewCompleted": "查看已完成的 Spark 任务",
     "totalDuration": "总时长",

src/main.js

@@ -43,7 +43,7 @@ keymaster.filter = event => {
   // 是否没有打开的
   const workStatus = result && result.every(i => !i.showMsg)
 
-  return !['INPUT', 'SELECT'].includes(tagName) && workStatus
+  return !['INPUT', 'SELECT'].includes(tagName) && workStatus && !store.getters.isDemo
 }
 export const shortcut = {
   bind: (seed, func) => keymaster(seed, bindKeyHandler(func)),

src/page/Home/index.vue

@@ -22,10 +22,14 @@
 <script>
 import Vue from 'vue'
 import { Component } from 'vue-property-decorator'
-import { mapActions } from 'vuex'
+import { mapActions, mapState } from 'vuex'
 import { cloneDeep } from 'lodash'
+import { getAllList } from '../../util'
 
 @Component({
+  computed: {
+    ...mapState({ notebookList: state => state.notebookList })
+  },
   methods: {
     ...mapActions('CreateNoteBookModal', {
       callCreateNoteBookModal: 'CALL_MODAL'
@@ -34,7 +38,6 @@ import { cloneDeep } from 'lodash'
       callFileUploadModal: 'CALL_MODAL'
     }),
     ...mapActions({
-      getNotebookList: 'GET_NOTEBOOK_LIST',
       saveOpenedNotebook: 'SAVE_OPEND_NOTEBOOK',
       getOpenedNotebook: 'GET_OPENED_NOTEBOOK',
       getDefaultNotebook: 'GET_DEFAULT_NOTEBOOK'
@@ -66,7 +69,15 @@ export default class HomePage extends Vue {
   async fetchNotebookList () {
     try {
       const res = await this.getOpenedNotebook()
-      this.openedList = res.data?.list ?? []
+
+      const list = getAllList(this.notebookList || [])
+      this.openedList = (res.data?.list || []).map(v => {
+        if (v.commit_id) {
+          return { ...list.find(l => l.id === v.id && l.type === v.type && l.commit_id), active: v.active }
+        } else {
+          return { ...list.find(l => l.id === v.id && l.type === v.type && !l.commit_id), active: v.active }
+        }
+      }).filter(i => i.id)
     } catch (e) {
       console.log(e)
     }
@@ -95,16 +106,22 @@ export default class HomePage extends Vue {
       const defaultNotebook = await this.getDefaultNotebook()
       this.defaultNotebook = defaultNotebook.data
       if (this.defaultNotebook) {
+        const { type, id, commit_id } = this.defaultNotebook
+        const uniq = type + '_' + id
+        this.defaultNotebook = {
+          ...this.defaultNotebook,
+          uniq: commit_id ? uniq + '_' + commit_id : uniq
+        }
         const newList = this.getToSavedList(this.defaultNotebook)
         await this.saveOpenedNotebook({list: newList})
       }
       this.$router.push({name: 'notebook'})
     } catch (e) {
       console.log(e)
     }
-    
+
   }
-  
+
   async handleCreateNotebook () {
     const { isSubmit, newNotobookInfo } = await this.callCreateNoteBookModal({ folderId: '', type: 'notebook'})
     if (isSubmit) {
@@ -152,4 +169,4 @@ export default class HomePage extends Vue {
     }
   }
 }
-</style>
+</style>