edit resource card from display page

Author: dodoinblue

src/EventBus.js

@@ -18,6 +18,9 @@ export const Events = {
   DISPLAY_CATEGORY_DELETED: 'DISPLAY_CATEGORY_DELETED',
   DISPLAY_CURRENT_CATEGORY_DELETED: 'DISPLAY_CURRENT_CATEGORY_DELETED',
 
+  // For editing resource card directly from display screen
+  DISPLAY_SAME_SCREEN_EDIT_RESOURCE: 'DISPLAY_SAME_SCREEN_EDIT_RESOURCE',
+
   // Resource page
   RESOURCE_NEW_CARD_CLOSE: 'RESOURCE_NEW_CARD_CLOSE',
   RESOURCE_CATEGORY: 'RESOURCE_CATEGORY',

src/components/YdDisplayCardSettings.vue

@@ -8,7 +8,7 @@
     <div class="settings-dialog-title">{{ $t('message.edit_card') }}</div>
     <div class="classware-title">
       <!--<input type="text" :placeholder="cardContent.name"></input>-->
-      {{cardContent.name}}
+      {{cardContent.name}} <span @click="editFromLibrary">({{ $t('message.edit_from_library') }})</span>
     </div>
     <div class="classware-layout">
       <div class="row">{{ $t('message.choose_animation') }}</div>
@@ -79,6 +79,19 @@ export default {
     select: function(value) {
       this.selected = value
     },
+    editFromLibrary: function() {
+      console.log('edit from library')
+      let categoryList = db.getNonOfficialResourceCategories()
+      let isOfficialCategory = _.find(categoryList, (o) => {
+        return o.uuid === this.cardContent.category
+      })
+      if (isOfficialCategory) {
+        EventBus.$emit(Events.DISPLAY_SAME_SCREEN_EDIT_RESOURCE, this.cardContent)
+      } else {
+        var f7 = Utils.getF7()
+        f7.alert(this.$t('message.cannot_edit_preload'), this.$t('message.forbidden'))
+      }
+    },
     deleteClasswareItem: function() {
       var f7 = Utils.getF7()
       f7.confirm(this.$t('message.are_you_sure'), this.$t('message.alert_delete_card'), () => {
@@ -164,6 +177,12 @@ export default {
   border: none;
   background-color: transparent;
 }
+
+.classware-title span {
+  margin-left: 0.25em;
+  color: red;
+}
+
 .settings-dialog .classware-layout {
   position: absolute;
   top: 27%;

src/pages/YdDisplay.vue

@@ -66,6 +66,8 @@
     <yd-display-card-settings v-if="showCardSettings" :card="cardInEdit"></yd-display-card-settings>
     <yd-display-classware-settings v-if="showClasswareSettings" :classwareId="rootUuid"></yd-display-classware-settings>
     <yd-edit-category-dialog v-if="showCategorySettings" :card="cardInEdit" :newCategory="showNewClasswareCategorySettings"></yd-edit-category-dialog>
+    <yd-edit-card-dialog v-if="showEditResCardDialog" :cardInEdit="cardInEdit"></yd-edit-card-dialog>
+
   </transition>
   <div class="dark-overlay" v-if="isOverlay"></div>
   <!--Multi-touch areas-->
@@ -248,6 +250,7 @@ import Utils from '../utils'
 import YdDisplayClasswareSettings from '../components/YdDisplayClasswareSettings'
 import YdDisplayCardSettings from '../components/YdDisplayCardSettings'
 import YdEditCategoryDialog from '../components/YdEditCategoryDialog'
+import YdEditCardDialog from '../components/YdEditCardDialog'
 import _ from 'lodash'
 
 export default {
@@ -261,6 +264,7 @@ export default {
       cardInEdit: {},
       showClasswareSettings: false,
       showNewClasswareCategorySettings: false,
+      showEditResCardDialog: false,
       firstStartup: false,
       touchAreas: [
         { name: 'touch-top-left', pressed: false },
@@ -269,7 +273,7 @@ export default {
       ]
     }
   },
-  components: { YdDrawer, YdDisplayClasswareSettings, YdDisplayCardSettings, YdEditCategoryDialog },
+  components: { YdDrawer, YdDisplayClasswareSettings, YdDisplayCardSettings, YdEditCategoryDialog, YdEditCardDialog },
   watch: {
     editMode: function(val, oldVal) {
       window.ga.trackEvent('USER_EVENT', 'EDITMODE', 'CHANGE', val, false)
@@ -285,6 +289,9 @@ export default {
       return classwareObj.name
     },
     showCardSettings: function() {
+      if (this.showEditResCardDialog) {
+        return false
+      }
       if (this.cardInEdit && this.cardInEdit.type === 'card') {
         return true
       }
@@ -364,6 +371,18 @@ export default {
       // TODO: Close drawers or warn if root is not the same with top classware
       this.showClasswareSettings = false
     })
+    EventBus.$on(Events.DISPLAY_SAME_SCREEN_EDIT_RESOURCE, (doc) => {
+      console.log('from display: ')
+      console.log(doc)
+      // this.showCardSettings = false
+      this.cardInEdit = doc
+      this.showEditResCardDialog = true
+    })
+    // for eidt resource dialog to be closed
+    EventBus.$on(Events.RESOURCE_NEW_CARD_CLOSE, () => {
+      this.showEditResCardDialog = false
+      this.cardInEdit = {}
+    })
     EventBus.$on(Events.DISPLAY_NEW_ROOT_CLASSWARE, (doc) => {
       window.ga.trackEvent('USER_EVENT', 'DISPLAY', 'ROOT_COURSEWARE_CHANGED')
       window.setTimeout(() => {
@@ -404,6 +423,8 @@ export default {
             this.showClasswareSettings = false
           } else if (this.showNewClasswareCategorySettings) {
             this.showNewClasswareCategorySettings = false
+          } else if (this.showEditResCardDialog) {
+            this.showEditResCardDialog = false
           } else if (!_.isEmpty(this.cardInEdit)) {
             this.cardInEdit = {}
           } else if (this.drawers.length > 1) {

src/strings.js

@@ -45,6 +45,8 @@ export default {
       // Edit card
       missing_info_body: 'Please choose name, category and image before save',
       missing_info_title: 'Missing infomation',
+      edit_from_library: 'Edit from library',
+      cannot_edit_preload: 'Cannot edit preloaded cards',
       // Edit category
       require_category_title: 'Category title is required',
       cannot_edit_in_all: 'Cannot edit in "All" category',
@@ -121,6 +123,8 @@ export default {
       // Edit card
       missing_info_body: '请选择名称、分类和图片，然后保存',
       missing_info_title: '缺少信息',
+      edit_from_library: '去素材库编辑',
+      cannot_edit_preload: '不能编辑自带卡片',
       // Edit category
       require_category_title: '必须输入一个名称',
       cannot_edit_in_all: '不能在”全部“中编辑',