🐛 close #161

anucvml · Jun 1, 2022 · f30eaec · f30eaec
1 parent 0136b35
commit f30eaec
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 27 deletions.
diff --git a/src/components/ActionThumbnailPreview.vue b/src/components/ActionThumbnailPreview.vue
@@ -1,7 +1,7 @@
 <template>
   <q-page-sticky
       class="z-top"
-      v-if="annotationStore.currentThumbnailActionId !== null"
+      v-if="annotationStore.currentThumbnailAction !== null"
       :offset="offset"
   >
     <div class="relative-position">
@@ -58,7 +58,7 @@
             class="text-black"
             flat
             icon="cancel"
-            @click="annotationStore.currentThumbnailActionId = null"
+            @click="annotationStore.currentThumbnailAction = null"
         >
           <q-tooltip>Close thumbnail preview</q-tooltip>
         </q-btn>
@@ -80,9 +80,8 @@ const configurationStore = useConfigurationStore()
 
 // thumbnail src
 const thumbnailSrc = computed(() => {
-  return configurationStore.actionLabelData.find(label => label.id ===
-      annotationStore.actionAnnotationList[annotationStore.currentThumbnailActionId].action
-  ).thumbnail
+  return configurationStore.actionLabelData.find(
+      label => label.id === annotationStore.currentThumbnailAction.action).thumbnail
 })
 
 // draggable
@@ -104,25 +103,19 @@ const handleResize = event => {
 }
 // buttons
 const handlePrevThumbnail = () => {
-  for (let i = annotationStore.currentThumbnailActionId - 1; i >= 0; i--) {
-    if (configurationStore.actionLabelData.find(
-        label => label.id === annotationStore.actionAnnotationList[i].action).thumbnail) {
-      annotationStore.currentThumbnailActionId = i
-      return
-    }
+  const currentIndex = annotationStore.currentSortedActionList.indexOf(annotationStore.currentThumbnailAction)
+  if (currentIndex > 0) {
+    annotationStore.currentThumbnailAction = annotationStore.currentSortedActionList[currentIndex - 1]
   }
 }
 const handleNextThumbnail = () => {
-  for (let i = annotationStore.currentThumbnailActionId + 1; i < annotationStore.actionAnnotationList.length; i++) {
-    if (configurationStore.actionLabelData.find(
-        label => label.id === annotationStore.actionAnnotationList[i].action).thumbnail) {
-      annotationStore.currentThumbnailActionId = i
-      return
-    }
+  const currentIndex = annotationStore.currentSortedActionList.indexOf(annotationStore.currentThumbnailAction)
+  if (currentIndex < annotationStore.currentSortedActionList.length - 1) {
+    annotationStore.currentThumbnailAction = annotationStore.currentSortedActionList[currentIndex + 1]
   }
 }
 const handleLocate = () => {
-  const currentAction = annotationStore.actionAnnotationList[annotationStore.currentThumbnailActionId]
+  const currentAction = annotationStore.currentThumbnailAction
   if (typeof (currentAction.start) === 'number') {
     annotationStore.leftCurrentFrame = utils.time2index(currentAction.start)
   }
@@ -131,7 +124,7 @@ const handleLocate = () => {
   }
 }
 const handleSet = () => {
-  const currentAction = annotationStore.actionAnnotationList[annotationStore.currentThumbnailActionId]
+  const currentAction = annotationStore.currentThumbnailAction
   currentAction.start = utils.index2time(annotationStore.leftCurrentFrame)
   currentAction.end = utils.index2time(annotationStore.rightCurrentFrame)
 }

diff --git a/src/pages/annotation/ActionTable.vue b/src/pages/annotation/ActionTable.vue
@@ -8,6 +8,8 @@
       :pagination="{ rowsPerPage: 0 }"
       :filter="actionFilterList"
       :filter-method="actionFilter"
+      :sort-method="actionSort"
+      binary-state-sort
   >
     <template v-slot:top="props">
       <div class="col-6 q-table__title">Actions / Video Segments</div>
@@ -93,7 +95,7 @@
       </div>
     </template>
     <template v-slot:body="props">
-      <q-tr :class="{ 'bg-warning': props.row.end - props.row.start <= 0, 'bg-green-2': props.rowIndex === annotationStore.currentThumbnailActionId}">
+      <q-tr :class="{ 'bg-warning': props.row.end - props.row.start <= 0, 'bg-green-2': props.row === annotationStore.currentThumbnailAction}">
         <q-tooltip
             anchor="top middle"
             v-if="props.row.end - props.row.start <= 0"
@@ -321,7 +323,7 @@ const handleAddAdvance = () => {
 const handleClearAll = () => {
   if (annotationStore.actionAnnotationList.length !== 0) {
     utils.confirm('Are you sure to delete ALL actions?').onOk(() => {
-      annotationStore.currentThumbnailActionId = null
+      annotationStore.currentThumbnailAction = null
       annotationStore.actionAnnotationList = []
     })
   } else {
@@ -350,6 +352,17 @@ const actionFilter = (rows, filter) => {
   return rows.filter(row => filter[row.action])
 }
 
+// sort
+annotationStore.currentSortedActionList = annotationStore.actionAnnotationList
+const actionSort = (rows, sortBy, descending) => {
+  const sortedRows = rows.slice().sort((a, b) => {
+    const sortVal = a[sortBy] < b[sortBy] ? -1 : 1
+    return descending ? sortVal : -sortVal
+  })
+  annotationStore.currentSortedActionList = sortedRows
+  return sortedRows
+}
+
 // body
 const actionOptionList = computed(() => configurationStore.actionLabelData.map(label => {
   return {
@@ -371,9 +384,10 @@ for (let action of configurationStore.actionLabelData) {
   objectOptionMap.value[action.id] = objectOptionList
 }
 const handleThumbnailPreview = props => {
-  const { row: { action }, rowIndex } = props
-  if (configurationStore.actionLabelData.find(label => label.id === action).thumbnail)
-    annotationStore.currentThumbnailActionId = annotationStore.currentThumbnailActionId === rowIndex ? null : rowIndex
+  const { row } = props
+  if (configurationStore.actionLabelData.find(label => label.id === row.action).thumbnail) {
+    annotationStore.currentThumbnailAction = annotationStore.currentThumbnailAction === row ? null : row
+  }
 }
 const handleActionInput = (row) => {
   row.color = configurationStore.actionLabelData.find(label => label.id === row.action).color
@@ -395,7 +409,7 @@ const handleSet = (row) => {
 }
 const handleDelete = (row) => {
   utils.confirm('Are you sure to delete this action?').onOk(() => {
-    annotationStore.currentThumbnailActionId = null
+    annotationStore.currentThumbnailAction = null
     for (let i in annotationStore.actionAnnotationList) {
       if (annotationStore.actionAnnotationList[i] === row) {
         annotationStore.actionAnnotationList.splice(i, 1)

diff --git a/src/router/index.js b/src/router/index.js
@@ -39,7 +39,8 @@ const router = createRouter({
 })
 
 router.beforeEach((to, from) => {
-  useAnnotationStore().currentThumbnailActionId = null
+  useAnnotationStore().currentSortedActionList = []
+  useAnnotationStore().currentThumbnailAction = null
   useConfigurationStore().currentThumbnailActionLabelId = null
   if (to.path === from.path || Object.keys(to.query).length || !Object.keys(from.query).length) return true
   return { ...to, query: from.query }

diff --git a/src/store/annotation.js b/src/store/annotation.js
@@ -38,7 +38,8 @@ const DEFAULT_ANNOTATION = {
   delPointMode: false,
   indicatingMode: false,
 
-  currentThumbnailActionId: null,
+  currentSortedActionList: [],
+  currentThumbnailAction: null,
 }
 
 export const useAnnotationStore = defineStore('annotation', () => {