Merge branch 'mosys-split-source-browser' into 'master'

Mosys: split source browser

See merge request !15

partials/CellEditor.vue

 <template lang="pug">
 
   q-list
-    q-list-header
-      q-item.q-pa-none
-        small Cell Content Editor
 
-    q-item-separator
+    template(v-for="(cell, index) in cellsData", :key="cell._uuid")
 
-    .q-mb-md(v-for="(cell, index) in cellsData", :key="cell._uuid")
-
-      q-item-separator(v-if="index > 0")
+      //q-item-separator(v-if="index > 0")
 
       <!--q-item(v-if="cell.type in itemSpecs", v-for="spec in itemSpecs[cell.type]", :key="`${spec.type}-${spec.path}`")-->
-      q-item.q-pa-none(v-for="spec in itemSpecs[cell.component]", :key="`${spec.component}-${spec.path}`",
+      q-item(v-for="spec in itemSpecs[cell.component]", :key="`${spec.component}-${spec.path}`",
       v-if="cell.data.path === spec.path")
 
         q-item-main
@@ -48,6 +43,7 @@
                   :max-height="500",
                   :value="cell.data[spec.path]",
                   @change="value => handleItemChanged(value, cell, spec.path)")
+      q-item-separator
 
       // q-item(v-else)
         q-field This cell type is not supported yet: {{ cell.component }}.{{ spec.path }}
@@ -223,6 +219,7 @@
             inputType: 'text',
             type: 'Annotation-List',
             label: 'RegExp',
+
             help: 'Filter annotations by regular expression',
             error: false,
             errorMessage: '',

partials/GridEditor.vue

@@ -30,10 +30,19 @@
             @dragend="event => {handleCellDragEnd(event, annotation)}",
             @contextmenu="handleCellContextMenu",
             :style="getAnnotationStyle(annotation)",
-            @click.prevent="event => {handleCellClick(event, annotation)}",
-            :class="{selected: annotationUIStates[annotation._uuid] ? annotationUIStates[annotation._uuid].selected : false}",
+            :class="getAnnotationClasses(annotation._uuid, 'cell-item')",
             :key="`cell-${index}`")
-              cell(:annotation="annotation", preview)
+              q-btn.edit-button.absolute-top-right(
+                @click.prevent="event => {handleCellEditClick(event, annotation)}",
+                :class="getAnnotationClasses(annotation._uuid, 'editing')",
+                style="top: 8px; right: 8px;",
+                :icon="annotationUIStates[annotation._uuid].editing ? 'close' : 'edit'", flat, round, size="md"
+                )
+              cell(
+                @click.native.prevent="event => {handleCellClick(event, annotation)}",
+                :annotation="annotation",
+                :preview="true"
+                )
               div.cell-item-resize-handle(
                 draggable="true",
                 @dragstart="event => {handleCellResizerDragStart(event, annotation)}",
@@ -127,7 +136,9 @@
     computed: {
       ...mapGetters({
         user: 'auth/getUserState',
-        isMobile: 'globalSettings/getIsMobile'
+        isMobile: 'globalSettings/getIsMobile',
+        // editingCells: 'mosys/getEditingCells'
+        showEditingCells: 'mosys/getShowEditingCells'
       }),
       cellContextMenuActions () {
         const actions = {
@@ -171,7 +182,8 @@
     },
     async mounted () {
       await this.fetchData()
-      this.$root.$emit('setBackButton', '/mosys/grids')
+      // this.$root.$emit('setBackButton', '/mosys/grids')
+      console.log('show editing', this.showEditingCells)
     },
     watch: {
       annotations () {
@@ -182,6 +194,12 @@
       },
       async gridUuid () {
         await this.fetchData()
+      },
+      showEditingCells (val) {
+        console.log('show editing cells', val)
+        if (val === false) {
+          this.updateAnnotationUIStates()
+        }
       }
     },
     methods: {
@@ -223,17 +241,30 @@
         })
         this.$store.commit('mosys/setSelectedCells', selectedCells)
       },
+      updateEditingCells () {
+        const _this = this
+        let editingCells = Object.keys(this.annotationUIStates).filter(k => {
+          return _this.annotationUIStates[k].editing
+        }).map(k => {
+          // return _this.cells.find(c => c._uuid === k)
+          return _this.annotations.find(c => c._uuid === k)
+        })
+        this.$store.commit('mosys/setEditingCells', editingCells)
+      },
       updateAnnotationUIStates () {
         let newAnnotationUIStates = {}
         this.annotations.forEach(a => {
           newAnnotationUIStates[a._uuid] = {
             selected: false,
+            editing: false,
             beingResized: false,
+            beginDragged: false,
             annotation: a
           }
         })
         this.annotationUIStates = newAnnotationUIStates
         this.updateSelectedCells()
+        this.updateEditingCells()
       },
 
       //
@@ -250,7 +281,7 @@
         else {
           let annotation = this.annotations.filter(annotation => {
             if (!_this.annotationUIStates[annotation._uuid]) return false
-            return _this.annotationUIStates[annotation._uuid].beginDragged ||
+            return _this.annotationUIStates[annotation._uuid].beingDragged ||
               _this.annotationUIStates[annotation._uuid].beingResized
           }).shift()
           let offset, position
@@ -327,6 +358,11 @@
       //
       // CELL DRAG & DROP HANDLERS
       //
+      handleCellEditClick (event, cell) {
+        this.annotationUIStates[cell._uuid].editing = !this.annotationUIStates[cell._uuid].editing
+        this.updateEditingCells()
+        // this.$store.commit('mosys/showEditingCells')
+      },
 
       handleCellClick (event, cell) {
         this.annotationUIStates[cell._uuid].selected = !this.annotationUIStates[cell._uuid].selected
@@ -343,7 +379,7 @@
             y: (event.clientY - elContainerBoundingBox.y) - (elBoundingBox.y - elContainerBoundingBox.y)
           }
           this.annotationUIStates[annotation._uuid].draggingOffset = offset
-          this.annotationUIStates[annotation._uuid].beginDragged = true
+          this.annotationUIStates[annotation._uuid].beingDragged = true
         }
         this.tmpObjects.push(annotation)
       },
@@ -353,6 +389,7 @@
       async handleCellContextMenuDelete (event, annotation) {
         this.annotationUIStates[annotation._uuid].selected = false
         this.updateSelectedCells()
+        this.updateEditingCells()
         await this.$store.dispatch('cells/delete', annotation.body.source.id)
         await this.$store.dispatch('annotations/delete', annotation.id)
         this.annotations = this.annotations.filter(a => a.id !== annotation.id)
@@ -550,6 +587,23 @@
           'grid-row-start': parsed.xywh[1],
           'grid-row-end': `span ${parsed.xywh[3]}`
         }
+      },
+      getAnnotationClasses (uuid, which) {
+        if (which === 'editing') {
+          if (this.annotationUIStates[uuid].editing) {
+            return 'bg-primary text-white'
+          }
+          else {
+            return 'bg-grey'
+          }
+        }
+        if (which === 'cell-item') {
+          return {
+            selected: this.annotationUIStates[uuid] ? this.annotationUIStates[uuid].selected : false,
+            editing: this.annotationUIStates[uuid] ? this.annotationUIStates[uuid].editing : false
+          }
+        }
+        else return {}
       }
     }
   }
@@ -577,9 +631,20 @@
     &:hover
       background-color lightblue
 
+      .edit-button
+        display: block
+
+    &.editing
+
+      .edit-button
+        display: block
+
     &.selected
       background-color lightpink
 
+    .edit-button
+      display: none
+
     .cell-item-inner
       width 100%
       height 100%

partials/GridEditorAddCells.vue

+<template lang="pug">
+
+  q-tabs.grid-editor-sources-tabs.shadow-11(v-model="selectedTab")
+    q-tab(slot="title", name="tab-default-cells", default, icon="add")
+    q-btn(slot="title", icon="close",
+      small, flat, round, class="fixed", style="right: 2px; margin-top: 3px",
+      @click="event => {$store.commit('mosys/hideAddCells')}")
+
+    q-tab-pane(name="tab-default-cells")
+        grid-editor-default-source
+
+</template>
+
+<script>
+  import GridEditorDefaultSource from './GridEditorDefaultSource'
+  import { mapGetters } from 'vuex'
+
+  export default {
+    components: {
+      GridEditorDefaultSource
+    },
+    data () {
+      return {
+        selectedTab: ''
+      }
+    },
+    computed: {
+      ...mapGetters({
+      })
+    },
+    watch: {
+    },
+    beforeDestroy () {
+      this.$store.commit('mosys/hideAddCells')
+    }
+  }
+</script>
+
+<style lang="stylus">
+
+  .grid-editor-sources-tabs
+    background-color white
+
+    .q-tabs-panes
+      display flex
+      flex-direction column
+      overflow auto
+
+</style>

partials/GridEditorDefaultSource.vue

@@ -2,12 +2,6 @@
 
   q-list.default-source-container
 
-    q-list-header
-      q-item
-        small Standard Cell Types
-
-    q-item-separator
-
     template(v-for="(item, i) in items")
 
       template(v-if="i > 0")
@@ -31,6 +25,7 @@
             :model="item.value",
             @input="value => {handleItemChanged(value, item)}",
             @change="value => {handleItemChanged(value, item)}")
+    q-item-separator
 
 </template>
 

partials/GridEditorEditingCells.vue

+<template lang="pug">
+
+  q-tabs.grid-editor-sources-tabs.shadow-11(v-model="selectedTab", color="dark")
+    q-tab(slot="title", name="tab-editing-cells", default) Edit Cell
+    q-btn(slot="title", icon="close",
+      small, flat, round, class="fixed", style="right: 2px; margin-top: 3px",
+      @click="() => {$store.commit('mosys/hideEditingCells')}")
+
+    q-tab-pane(name="tab-editing-cells")
+      template(v-if="showEditingCells")
+        cell-editor(:cells="editingCells")
+
+</template>
+
+<script>
+  import CellEditor from './CellEditor'
+
+  import { mapGetters } from 'vuex'
+  import { userHasFeature } from 'mbjs-quasar/src/lib'
+
+  export default {
+    components: {
+      CellEditor
+    },
+    data () {
+      return {
+        selectedTab: 'tab-editing-cells'
+      }
+    },
+    computed: {
+      ...mapGetters({
+        user: 'auth/getUserState',
+        editingCells: 'mosys/getEditingCells',
+        showEditingCells: 'mosys/getShowEditingCells'
+        // selectedCells: 'mosys/getSelectedCells'
+      }),
+      userHasDocuments () {
+        return userHasFeature(this.user, 'documents')
+      }
+    },
+    watch: {
+    },
+    mounted () {
+    },
+    beforeDestroy () {
+      this.$store.commit('mosys/hideEditingCells')
+    }
+  }
+</script>
+
+<style lang="stylus">
+
+  .grid-editor-sources-tabs
+    background-color white
+
+    .q-tabs-panes
+      display flex
+      flex-direction column
+      overflow auto
+
+</style>

partials/GridEditorSourceDocuments.vue

 <template lang="pug">
 
   q-list.default-source-container
-
-    q-list-header
-      q-item
-        small Documents
-
-    q-item-separator
-
     template(v-for="(file, i) in images")
-      template(v-if="i > 0")
-        q-item-separator
       q-item
         q-item-side
           q-icon(
@@ -18,6 +9,7 @@
           @dragstart.native="event => {handleItemDragStart(event, file)}",
           :name="typeToIconName(getSimpleType(file.metaData['content-type']))", style="font-size: 1.8rem")
         q-item-main {{ file.name }}
+      q-item-separator
 
 </template>
 

partials/GridEditorSourcePieceMaker.vue

 <template lang="pug">
   q-list.piecemaker-source-container
 
-    q-list-header
-      template(v-if="currentTimeline")
-        q-btn(flat, round, small, style="margin-right: 0.5em",
-          @click="handleClickUnsetCurrentTimeline", icon="keyboard backspace")
-        span Videos in Timeline #[strong {{currentTimeline.title}}]
-      template(v-else)
-        router-link(:to="{name: 'piecemaker.timelines.list'}") Piecemaker Timelines
+    template(v-if="currentTimeline")
+      q-list-header
+        q-btn(outline, size="sm", style="margin-right: 0.5em",
+          @click="handleClickUnsetCurrentTimeline", icon="keyboard backspace" label="Timelines")
+        div {{currentTimeline.title}} (Videos)
+
+    template(v-else)
+      q-list-header Timelines
+        router-link(class="ui-tab-pane-inner-button", :to="{name: 'piecemaker.timelines.list'}")
+          q-btn(outline, size="sm", icon-right="call_made", label="Show in Piecemaker")
 
     q-item-separator
 
@@ -46,11 +49,10 @@
       template(v-for="(timeline, i) in timelines")
         template(v-if="i > 0")
           q-item-separator
-        q-item
-          q-item-side
-            q-icon(name="list", style="font-size: 1.8rem")
-          q-item-main
-            a(@click.prevent="event => {handleTimelineItemClick(event, timeline)}") {{timeline.title}}
+        q-item(class="button-item")
+          a(class="ui-directory-link", @click.prevent="event => {handleTimelineItemClick(event, timeline)}")
+            q-btn(align="left", icon-right="keyboard_arrow_right", flat) {{timeline.title}}
+    q-item-separator
 </template>
 
 <script>

partials/GridEditorSources.vue

 <template lang="pug">
 
-  q-tabs.grid-editor-sources-tabs.shadow-11(v-model="selectedTab")
-    q-tab(slot="title", name="tab-default-cells", default, icon="add")
+  q-tabs.grid-editor-sources-tabs.shadow-11(v-model="selectedTab", color="dark")
+    q-tab(slot="title", name="tab-default-cells", default) Cells
     q-tab(slot="title", name="tab-piecemaker") Piecemaker
     q-tab(slot="title", name="tab-documents", v-if="userHasDocuments") Documents
     q-btn(slot="title", icon="close",
@@ -9,12 +9,12 @@
       @click="event => {$store.commit('mosys/hideSources')}")
 
     q-tab-pane(name="tab-default-cells")
-      template(v-if="this.selectedCells.length > 0")
+      // template(v-if="this.selectedCells.length > 0")
         cell-editor(:cells="selectedCells")
-      template(v-else)
-        grid-editor-default-source
+      // template(v-else)
+      grid-editor-default-source
 
-    q-tab-pane(name="tab-piecemaker")
+    q-tab-pane(name="tab-piecemaker", class="relative-position")
       grid-editor-source-piece-maker
 
     q-tab-pane(name="tab-documents", v-if="userHasDocuments")
@@ -45,16 +45,15 @@
     },
     computed: {
       ...mapGetters({
-        user: 'auth/getUserState'
+        user: 'auth/getUserState',
+        editingCells: 'mosys/getEditingCells',
+        selectedCells: 'mosys/getSelectedCells'
       }),
       userHasDocuments () {
         return userHasFeature(this.user, 'documents')
       },
       currentStoreTab () {
         return this.$store.state.mosys.sourcesTabName
-      },
-      selectedCells () {
-        return this.$store.state.mosys.selectedCells
       }
     },
     watch: {