Merge pull request #151 from evandor/TAB-486-tabsets-header

Tab 486 tabsets header
evandor · Feb 14, 2024 · 665e9f4 · 665e9f4
2 parents c2746e2 + 08c6a73
commit 665e9f4
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 13 deletions.
diff --git a/src/models/Tabset.ts b/src/models/Tabset.ts
@@ -77,6 +77,8 @@ export class Tabset {
   // = description
   page: string | undefined = undefined
 
+  headerDescription: string | undefined = undefined
+
   window: string = 'current'
   color: string | undefined = undefined
 

diff --git a/src/pages/SidePanelPage.vue b/src/pages/SidePanelPage.vue
@@ -196,7 +196,7 @@
                             @mouseleave="hoveredTabset = undefined">
               <q-item-label>
                 <q-icon class="cursor-pointer" name="more_horiz" color="accent" size="16px"/>
-                <SidePanelPageContextMenu :tabset="tabset as Tabset"/>
+                <SidePanelPageContextMenu :tabset="tabset as Tabset" @edit-header-description="toggleEditHeader(tabset as Tabset, index)"/>
               </q-item-label>
             </q-item-section>
           </template>
@@ -212,6 +212,32 @@
               {{ tabset.page }}
             </template>
 
+            <template v-if="editHeaderDescription">
+              <div class="row q-ma-none q-pa-md">
+                <q-editor style="width:100%"
+                          flat
+                          v-model="headerDescription" min-height="5rem"
+                          :definitions="{
+                            save: {
+                              tip: 'Save your work',
+                              icon: 'save',
+                              label: 'Save',
+                              handler: saveTabsetDescription
+                            }
+                          }"
+                                  :toolbar="[
+                            ['bold', 'italic', 'strike', 'underline'],
+                            ['upload', 'save']
+                          ]"
+                          placeholder="Create a header description for your current tabset"/>
+              </div>
+            </template>
+            <template v-else-if="tabset.headerDescription">
+              <div class="row q-ma-none q-pa-md">
+                {{ tabset.headerDescription }}
+              </div>
+            </template>
+
             <q-list>
               <q-item v-for="folder in calcFolders(tabset as Tabset)"
                       clickable
@@ -336,6 +362,8 @@ import InfoMessageWidget from "components/widgets/InfoMessageWidget.vue";
 import {SYNC_TYPE, TITLE_IDENT} from "boot/constants";
 import AppService from "src/services/AppService";
 import SidePanelToolbarButton from "components/buttons/SidePanelToolbarButton.vue";
+import {useNotificationHandler} from "src/services/ErrorHandler";
+import {ExecutionResult} from "src/domain/ExecutionResult";
 
 const {setVerticalScrollPosition} = scroll
 
@@ -359,6 +387,7 @@ const tabsetExpanded = ref<Map<string, boolean>>(new Map())
 const hoveredPublicLink = ref(false)
 const windowLocation = ref('---')
 const user = ref<any>()
+const headerDescription = ref<string>('')
 
 // https://stackoverflow.com/questions/12710905/how-do-i-dynamically-assign-properties-to-an-object-in-typescript
 interface SelectionObject {
@@ -372,11 +401,10 @@ window.addEventListener("drop", (event) => {
 const selected_model = ref<SelectionObject>({})
 const hoveredTabset = ref<string | undefined>(undefined)
 const tabsets = ref<Tabset[]>([])
-const progress = ref<number | undefined>(undefined)
-const progressLabel = ref<string | undefined>(undefined)
 const selectedTab = ref<Tab | undefined>(undefined)
 const windowName = ref<string | undefined>(undefined)
 const tsBadges = ref<object[]>([])
+const editHeaderDescription = ref<boolean>(false)
 
 const steps = [
   {
@@ -388,6 +416,8 @@ const steps = [
 const wrapper = ref(null)
 const {start, goToStep, finish} = useVOnboarding(wrapper)
 
+const {handleSuccess, handleError} = useNotificationHandler()
+
 function updateOnlineStatus(e: any) {
   const {type} = e
   useUiStore().networkOnline = type === 'online'
@@ -480,7 +510,7 @@ const scrollToElement = (el: any, delay: number) => {
 }
 
 const updateSelectedTabset = (tabsetId: string, open: boolean, index: number | undefined = undefined) => {
-  //console.log("updated...", tabsetId, open, Object.keys(tabsetExpanded.value))
+  console.log("updated...", tabsetId, open, index, Object.keys(tabsetExpanded.value))
   tabsetExpanded.value.set(tabsetId, open)
   if (open) {
     if (index) {
@@ -547,10 +577,10 @@ watchEffect(() => {
   }
 })
 
-watchEffect(() => {
-  progress.value = (uiStore.progress || 0.0) / 100.0
-  progressLabel.value = uiStore.progressLabel + " " + Math.round(100 * progress.value) + "%"
-})
+// watchEffect(() => {
+//   progress.value = (uiStore.progress || 0.0) / 100.0
+//   progressLabel.value = uiStore.progressLabel + " " + Math.round(100 * progress.value) + "%"
+// })
 
 const getTabsetOrder =
   [
@@ -1003,6 +1033,27 @@ const tabsetSectionName = (tabset: Tabset) => {
   return tabset.name + (activeFolder ? " - " + activeFolder.name : "")
 }
 
+const toggleEditHeader = (tabset: Tabset, index: number) => {
+  editHeaderDescription.value = !editHeaderDescription.value
+  if (editHeaderDescription.value) {
+    updateSelectedTabset(tabset.id, true, index)
+    headerDescription.value = tabset.headerDescription || ''
+  }
+}
+
+const saveTabsetDescription = () => {
+  console.log("saving tabste", headerDescription.value, useTabsStore().currentTabsetId)
+  const currentTs = useTabsStore().getCurrentTabset
+  if (currentTs) {
+    currentTs.headerDescription = headerDescription.value
+    useTabsetService().saveCurrentTabset()
+    editHeaderDescription.value = false
+    headerDescription.value = ''
+    handleSuccess(new ExecutionResult<string>('saved','saved'))
+  } else {
+    handleError("could not save description")
+  }
+}
 </script>
 
 <style lang="scss">

diff --git a/src/pages/sidepanel/SidePanelPageContextMenu.vue b/src/pages/sidepanel/SidePanelPageContextMenu.vue
@@ -8,7 +8,7 @@
                        label="Edit Tabset"/>
 
       <ContextMenuItem v-close-popup
-                       @was-clicked="openTabsetDescription(tabset)"
+                       @was-clicked="emits('editHeaderDescription')"
                        icon="o_description"
                        label="Tabset Description..."/>
 
@@ -184,6 +184,8 @@ const props = defineProps({
   tabset: {type: Object as PropType<Tabset>, required: true}
 })
 
+const emits = defineEmits(['editHeaderDescription'])
+
 const publictabsetsPath = "https://public.tabsets.net/tabsets/"
 
 const startTabsetNote = (tabset: Tabset) => {
@@ -195,9 +197,7 @@ const startTabsetNote = (tabset: Tabset) => {
 
 // TODO remember for another use case
 //const openTabsetDescription = (tabset: Tabset) => openURL(chrome.runtime.getURL("/www/index.html#/tabsets/" + tabset.id + "?tab=page"))
-const openTabsetDescription = (tabset: Tabset) => {
 
-}
 
 const openEditTabsetDialog = (tabset: Tabset) => {
   $q.dialog({

diff --git a/src/services/IndexedDbPersistenceService.ts b/src/services/IndexedDbPersistenceService.ts
@@ -610,7 +610,7 @@ class IndexedDbPersistenceService implements PersistenceService {
   }
 
   async updateWindow(window: Window): Promise<void> {
-    console.debug(`updating window id=${window.id}, title=${window.title}, index=${window.index}, #hostList=${window.hostList.length}`)
+    console.debug(`updating window id=${window.id}, title=${window.title}, index=${window.index}, #hostList=${window.hostList?.length}`)
     if (!window.id) {
       return Promise.reject("window.id not set")
     }
@@ -622,7 +622,7 @@ class IndexedDbPersistenceService implements PersistenceService {
 
     asJson['title'] = window.title
     asJson['index'] = window.index
-    asJson['hostList'] = Array.from(window.hostList)
+    asJson['hostList'] = window.hostList ? Array.from(window.hostList) : []
 
     delete asJson['tabs']
     console.debug("saving window json as ", asJson)