alignment with pro

Author: evandor

actionHandling/SpecialUrlAddToTabsetComponent.vue

@@ -1,21 +1,21 @@
 <template>
   <!-- SpecialUrlAddToTabsetComponent -->
-  <template v-if="handler.actions(currentTabsetId).length == 0 && handler.defaultAction()">
+  <template v-if="handler.actions(currentTabsetId).length == 0 && defaultAction">
     <q-btn
       outline
-      @click.stop="emits('buttonClicked', new ActionHandlerButtonClickedHolder(handler, handler.defaultAction()))"
+      @click.stop="emits('buttonClicked', new ActionHandlerButtonClickedHolder(handler, defaultAction))"
       class="q-ma-none q-px-sm q-py-none"
-      :class="{ shakeWithColor: animateAddtabButton, 'cursor-pointer': !alreadyInTabset() }"
-      :color="alreadyInTabset() ? 'grey-5' : tsBadges.length > 0 ? 'positive' : ''"
+      :class="{ shakeWithColor: animateAddtabButton, 'cursor-pointer': !alreadyInTabset }"
+      :color="alreadyInTabset ? 'grey-5' : containedInTsCount > 0 ? 'positive' : ''"
       :size="props.level === 'root' ? 'sm' : 'xs'"
       data-testid="saveInTabsetBtn">
-      <div>{{ handler.defaultAction()!.label }}</div>
+      <div>{{ defaultAction.label }}</div>
       <!--                  <q-icon right class="q-ma-none q-pa-none" size="2em" name="o_south" />-->
     </q-btn>
-    <q-tooltip class="tooltip-small" v-if="alreadyInTabset()">
+    <q-tooltip class="tooltip-small" v-if="alreadyInTabset">
       Tab is already contained in tabset '{{ props.tabset?.name }}'...
     </q-tooltip>
-    <q-tooltip class="tooltip-small" v-else-if="tsBadges.length > 0">
+    <q-tooltip class="tooltip-small" v-else-if="containedInTsCount > 0">
       {{ tooltipAlreadyInOtherTabsets(props.tabset!.name) }}
     </q-tooltip>
     <q-tooltip class="tooltip-small" v-else>
@@ -24,30 +24,30 @@
   </template>
 
   <!-- SpecialUrlAddToTabsetComponent handlerDefaultAction -->
-  <template v-else-if="handler.actions(currentTabsetId).length > 0 && handler.defaultAction()">
+  <template v-else-if="handler.actions(currentTabsetId).length > 0 && defaultAction">
     <!-- :disable="!handler.actions()[0]!.active(props.currentChromeTab)"-->
     <q-btn-dropdown
       style="border-radius: 5px"
-      :class="{ shakeWithColor: animateAddtabButton, 'cursor-pointer': !alreadyInTabset() }"
-      :color="alreadyInTabset() ? 'primary' : tsBadges.length > 0 ? 'positive' : ''"
+      :class="{ shakeWithColor: animateAddtabButton, 'cursor-pointer': !alreadyInTabset }"
+      :color="defaultAction!.colorFkt()"
       data-testid="saveInTabsetBtn"
       v-close-popup
       @click.stop="
         emits(
           'buttonClicked',
-          new ActionHandlerButtonClickedHolder(handler, handler.defaultAction(), {
-            filename: handler.defaultAction()!.label,
+          new ActionHandlerButtonClickedHolder(handler, defaultAction, {
+            filename: defaultAction.label,
           }),
         )
       "
       class="q-ma-none q-px-none q-py-none"
       :size="props.level === 'root' ? 'sm' : 'xs'"
-      :dense="handler.defaultAction()!.label.length > 15"
+      :dense="defaultAction!.label.length > 15"
       split
       outline>
       <template v-slot:label>
-        <span v-if="alreadyInTabset()" style="color: #bfbfbf">{{ handler.defaultAction()!.label }}</span>
-        <span v-else>{{ handler.defaultAction()!.label }}</span>
+        <span v-if="alreadyInTabset" style="color: #bfbfbf">{{ defaultAction!.label }}</span>
+        <span v-else>{{ defaultAction!.label }}</span>
       </template>
       <q-list dense style="min-width: 200px">
         <template v-for="l in handler.actions(currentTabsetId)">
@@ -69,7 +69,7 @@
     <q-tooltip
       class="tooltip-small"
       :delay="1000"
-      v-if="!alreadyInTabset() && tsBadges.length > 0"
+      v-if="!alreadyInTabset && containedInTsCount > 0"
       anchor="center left"
       self="center right"
       :offset="[10, 10]">
@@ -80,11 +80,11 @@
 </template>
 
 <script lang="ts" setup>
-import _ from 'lodash'
 import { useQuasar } from 'quasar'
 import { useActionHandlers } from 'src/tabsets/actionHandling/ActionHandlers'
 import { AddUrlToTabsetHandler } from 'src/tabsets/actionHandling/AddUrlToTabsetHandler'
 import { NoopAddUrlToTabsetHandler } from 'src/tabsets/actionHandling/handler/NoopAddUrlToTabsetHandler'
+import { ActionContext } from 'src/tabsets/actionHandling/model/ActionContext'
 import { ActionHandlerButtonClickedHolder } from 'src/tabsets/actionHandling/model/ActionHandlerButtonClickedHolder'
 import { useTabsetService } from 'src/tabsets/services/TabsetService2'
 import { useTabsetsStore } from 'src/tabsets/stores/tabsetsStore'
@@ -106,39 +106,33 @@ const $q = useQuasar()
 const { getHandler } = useActionHandlers($q)
 
 const handler = ref<AddUrlToTabsetHandler>(new NoopAddUrlToTabsetHandler())
-const tsBadges = ref<object[]>([])
+const defaultAction = ref<ActionContext | undefined>(undefined)
+const containedInTsCount = ref(0)
 const animateAddtabButton = ref(false)
 const currentTabsetId = ref<string | undefined>(undefined)
+const alreadyInTabset = ref(false)
 
 watchEffect(async () => {
   currentTabsetId.value = await useTabsetsStore().getCurrentTabsetId()
 })
 
 watchEffect(async () => {
   handler.value = getHandler(props.currentChromeTab.url, props.folder)
+  defaultAction.value = handler.value.defaultAction()
   // const currentTabsetId = await useTabsetsStore().getCurrentTabsetId()
-  // console.log('===>', JSON.stringify(handler.value.actions(currentTabsetId)), props.folder)
 })
 
 watchEffect(() => {
-  const tabsetIds = useTabsetService().tabsetsFor(props.currentChromeTab.url!)
-  tsBadges.value = []
-  _.forEach(tabsetIds, (tsId: string) => {
-    tsBadges.value.push({
-      label: useTabsetService().nameForTabsetId(tsId),
-      tabsetId: tsId,
-      encodedUrl: btoa(props.currentChromeTab.url || ''),
-    })
-  })
+  containedInTsCount.value = useTabsetService().tabsetsFor(props.currentChromeTab.url!).length
 })
 
 watchEffect(() => {
   animateAddtabButton.value = useUiStore().animateAddtabButton
 })
 
-const alreadyInTabset = () => {
-  return useTabsetService().urlExistsInCurrentTabset(props.currentChromeTab.url)
-}
+watchEffect(() => {
+  alreadyInTabset.value = useTabsetService().urlExistsInCurrentTabset(props.currentChromeTab.url)
+})
 
 const activeFolderNameFor = (ts: Tabset, activeFolder: string) => {
   const folder = useTabsetsStore().getActiveFolder(ts, activeFolder)
@@ -149,34 +143,6 @@ const tabsetNameOrChain = (tabset: Tabset) => {
   return tabset.folderActive ? activeFolderNameFor(tabset, tabset.folderActive) : tabset.name
 }
 
-const tooltipAlreadyInOtherTabsets = (tabsetName: string) => {
-  const tabsetList = _.join(
-    _.map(tsBadges.value, (b: any) => b['label'] as keyof object),
-    ', ',
-  )
-  return (
-    'The current Tab is already contained in ' +
-    tsBadges.value.length +
-    ' other Tabsets: ' +
-    tabsetList +
-    '. Click to add ' +
-    "it to '" +
-    tabsetName +
-    "' as well."
-  )
-}
-
-// const isActive = (ac: ActionContext) => {
-//   return ac.active ? ac.active(props.currentChromeTab) : true
-// }
-//
-// const color = (ac: ActionContext | MenuContext) => {
-//   if ((ac as ActionContext | MenuContext).active) {
-//     // return (ac as (ActionContext | MenuContext))!.active(props.currentChromeTab) ? 'primary' : 'grey-5'
-//     return 'primary'
-//   }
-//   return alreadyInTabset() ? 'grey-5' : tsBadges.value.length > 0 ? 'positive' : 'primary'
-// }
-
-//const getFolder = () => useTabsetsStore().getActiveFolder(props.tabset)
+const tooltipAlreadyInOtherTabsets = (tabsetName: string) =>
+  `The current Tab is already contained in ${containedInTsCount.value} other tabsets. Click to add to ${tabsetName} as well.`
 </script>

actionHandling/handler/DefaultAddUrlToTabsetHandler.ts

@@ -13,6 +13,7 @@ import { Tab } from 'src/tabsets/models/Tab'
 import { Tabset } from 'src/tabsets/models/Tabset'
 import { useTabsetService } from 'src/tabsets/services/TabsetService2'
 import { useTabsetsStore } from 'src/tabsets/stores/tabsetsStore'
+import { useAuthStore } from 'stores/authStore'
 import { Component } from 'vue'
 
 export class DefaultAddUrlToTabsetHandler implements AddUrlToTabsetHandler {
@@ -27,7 +28,23 @@ export class DefaultAddUrlToTabsetHandler implements AddUrlToTabsetHandler {
   }
 
   defaultAction(): ActionContext {
-    return new ActionContext('Add Tab').onClicked(this.clicked)
+    const limitReached = useAuthStore().limitExceeded('TABS', useTabsetsStore().allTabsCount).exceeded
+    return new ActionContext('Add Tab')
+      .setColor(() => {
+        const tabUrl = useContentStore().getCurrentTabUrl
+        if (tabUrl) {
+          if (limitReached) {
+            return 'negative'
+          }
+          const tabsetsCount = useTabsetService().tabsetsFor(tabUrl).length
+          if (useTabsetService().urlExistsInCurrentTabset(tabUrl)) {
+            return 'primary'
+          }
+          return tabsetsCount > 0 ? 'positive' : ''
+        }
+        return 'black'
+      })
+      .onClicked(this.clicked)
   }
 
   actions(currentTabsetId: string | undefined): Component[] {

actionHandling/model/ActionContext.ts

@@ -10,7 +10,7 @@ export class ActionContext {
 
   public ok?: (payload: any) => ClickedHandler
 
-  public colorFkt?: () => string
+  public colorFkt: () => string = () => ''
 
   $q?: QVueGlobals