Skip to content

Commit

Permalink
TAB-439 Revisit Placeholder Idea: list sublinks inside tab
Browse files Browse the repository at this point in the history
  • Loading branch information
@evandor
evandor committed Nov 8, 2023
1 parent e490a68 commit 12b9223
Show file tree
Hide file tree
Showing 11 changed files with 157 additions and 75 deletions.
2 changes: 0 additions & 2 deletions src/components/dialogues/EditUrlDialog.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,4 @@ const updatePlaceholder = (placeholder: string, val: any) => {
const modelFor = (ident: string) => placeholderValues.value.get(ident)
const tabTitle = () => props.tab.name || props.tab.title
</script>
3 changes: 2 additions & 1 deletion src/components/utils/ShortUrl.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<span class="text-blue-10">{{ shortenUrl() }}
<span class="text-blue-10">{{ props.label ? props.label : shortenUrl() }}
<q-tooltip v-if="props.hostnameOnly" class="tooltip">{{ url }}</q-tooltip>
</span>
</template>
Expand All @@ -8,6 +8,7 @@
const props = defineProps({
url: {type: String, required: true},
label: {type: String, required: false},
hostnameOnly: {type: Boolean, default: false}
})
Expand Down
72 changes: 56 additions & 16 deletions src/components/widgets/PanelTabListElementWidget.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<template>

<!-- left part: icon plus various -->
<q-item-section v-if="useUiStore().listDetailLevelGreaterEqual(ListDetailLevel.SOME)"
@mouseover="hoveredTab = tab.id"
@mouseleave="hoveredTab = undefined"
Expand Down Expand Up @@ -37,7 +38,7 @@

</q-item-section>

<!-- name, title, description, url && note -->
<!-- right part: name, title, description, url && note -->
<q-item-section class="q-mb-sm"
@mouseover="hoveredTab = tab.id"
@mouseleave="hoveredTab = undefined">
Expand Down Expand Up @@ -72,40 +73,47 @@
</div>
</q-item-label>

<!-- description -->
<!-- === description === -->
<q-item-label class="ellipsis-2-lines text-grey-8"
v-if="useUiStore().listDetailLevelGreaterEqual(ListDetailLevel.MAXIMAL)"
@click.stop="NavigationService.openOrCreateTab(props.tab?.url || '', props.tab?.matcher || '', props.tab?.groupName )">
@click.stop="gotoTab()">
{{ props.tab.description }}
</q-item-label>

<!-- url -->
<!-- === url(s) === -->
<q-item-label
style="width:100%"
v-if="props.tab?.url"
caption class="ellipsis-2-lines text-blue-10"
caption class="ellipsis-2-lines text-blue-10 bg-yellow-3"
@mouseover="showButtonsProp = true"
@mouseleave="showButtonsProp = false">
<div class="row q-ma-none">
<div class="col-11 q-pr-lg cursor-pointer"
@click.stop="NavigationService.openOrCreateTab(props.tab.url,props.tab.matcher,props.tab.groupName )">
<div class="col-11 q-pr-lg cursor-pointer">
<span v-if="props.sorting === TabSorting.URL">
<q-icon name="arrow_right" size="16px"/>
</span>

<!-- url or note -->
<!-- <template v-if="props.tab.extension === UrlExtension.NOTE">-->
<!-- <span>open Note</span>-->
<!-- </template>-->
<template v-if="props.tab.extension !== UrlExtension.NOTE">
<short-url :url="props.tab.url" :hostname-only="!useUiStore().showFullUrls"/>
<short-url @click.stop="gotoTab()"
:url="props.tab.url" :hostname-only="!useUiStore().showFullUrls"/>
<q-icon v-if="props.tab.matcher && usePermissionsStore().hasFeature(FeatureIdent.ADVANCED_TAB_MANAGEMENT)"
@click.stop="openTabAssignmentPage(props.tab)"
name="o_settings">
<q-tooltip class="tooltip">{{ matcherTooltip() }}</q-tooltip>
</q-icon>
<!-- <q-icon class="q-ml-xs" name="open_in_new"/>-->
<ul>
<div v-for="placeholder in placeholders">
<li>
<short-url
@click.stop="NavigationService.openOrCreateTab(placeholder['url' as keyof object], props.tab.matcher, props.tab.groupName )"
:label="placeholder['name' as keyof object]"
:url="placeholder['url' as keyof object]"/>
</li>
</div>
</ul>
</template>
<!-- <q-icon class="q-ml-xs" name="open_in_new"/>-->

</div>
<div v-if="!props.hideMenu"
class="col text-right q-mx-sm cursor-pointer"
Expand All @@ -127,13 +135,14 @@

</q-item-label>

<!-- === group and last active === -->
<q-item-label
style="width:100%;margin-top:0"
v-if="props.tab?.url"
caption class="ellipsis-2-lines text-blue-10"
caption class="ellipsis-2-lines text-blue-10 bg-yellow-1"
@mouseover="showButtonsProp = true"
@mouseleave="showButtonsProp = false">
<div class="row q-ma-none">
<div class="row q-ma-none" @click="gotoTab()">
<div class="col-12 q-pr-lg q-mt-none q-pt-none cursor-pointer">
<div class="text-caption text-grey-5 ellipsis"
v-if="useUiStore().listDetailLevelGreaterEqual(ListDetailLevel.SOME)">
Expand Down Expand Up @@ -171,7 +180,7 @@
</div>
</q-item-label>

<!-- note -->
<!-- === note === -->
<q-item-label v-if="useUiStore().listDetailLevelGreaterEqual(ListDetailLevel.MAXIMAL) &&
props['tab' as keyof object]['note']"
class="text-grey-10" text-subtitle1>
Expand Down Expand Up @@ -217,6 +226,8 @@ import {useUtils} from "src/services/Utils";
import {useRouter} from "vue-router";
import {useGroupsStore} from "stores/groupsStore";
import {DeleteChromeGroupCommand} from "src/domain/groups/DeleteChromeGroupCommand";
import {PlaceholdersType} from "src/models/Placeholders";
import {uid} from "quasar";
const {inBexMode} = useUtils()
Expand All @@ -242,6 +253,7 @@ const tsBadges = ref<object[]>([])
const newState = ref(false)
const groupName = ref<string | undefined>(undefined)
const groups = ref<Map<string, chrome.tabGroups.TabGroup>>(new Map())
const placeholders = ref<Object[]>([])
onMounted(() => {
if ((new Date().getTime() - props.tab.created) < 500) {
Expand Down Expand Up @@ -292,6 +304,31 @@ watchEffect(() => {
}
})
watchEffect(() => {
if (props.tab) {
const t = props.tab
if (t.placeholders && t.placeholders.type === PlaceholdersType.URL_SUBSTITUTION) {
const subs = t.placeholders.config
Object.entries(subs).forEach(e => {
const name = e[0]
const val = e[1]
val.split(",").forEach((v: string) => {
const substitution = v.trim()
if (substitution.length > 0) {
let useUrl = t.url || ''
let useName = t.name || t.title || ''
Object.entries(subs).forEach(e1 => {
useUrl = useUrl.replaceAll("${" + name + "}", substitution)
useName = useName.replaceAll("${" + name + "}", substitution)
})
placeholders.value.push({url: useUrl, name: substitution})
}
})
})
}
}
})
const nameOrTitle = (tab: Tab) => {
let nameOrTitle = tab.name ? tab.name : tab.title
if (usePermissionsStore().hasFeature(FeatureIdent.ANNOTATIONS) && tab.annotations?.length > 0) {
Expand Down Expand Up @@ -397,6 +434,9 @@ const switchGroup = (group: chrome.tabGroups.TabGroup): void => {
}
}
const gotoTab = () => NavigationService.openOrCreateTab(props.tab.url || '', props.tab.matcher, props.tab.groupName)
</script>

<!--https://stackoverflow.com/questions/41078478/css-animated-checkmark -->
Expand Down
25 changes: 4 additions & 21 deletions src/domain/tabs/AddTabToTabset.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {useUtils} from "src/services/Utils";
import {useSearchStore} from "stores/searchStore";
import {uid, useQuasar} from "quasar";
import {useGroupsStore} from "stores/groupsStore";
import PlaceholderUtils from "src/utils/PlaceholderUtils";

const {saveTabset} = useTabsetService()
const {sendMsg} = useUtils()
Expand Down Expand Up @@ -41,21 +42,20 @@ export class AddTabToTabsetCommand implements Command<any> {
}

const tabset: Tabset = await useTabsetService().addToTabsetId(this.tabset.id, this.tab, 0)
// .then((tabset) => {
console.log("sharing...")
// Sharing
if (tabset.sharedId && tabset.sharing === TabsetSharing.PUBLIC) {
tabset.sharing = TabsetSharing.PUBLIC_OUTDATED
}

// Placeholder Defaults Application
this.tab = PlaceholderUtils.applyForDefaultDomains(this.tab)

// the tab has been added to the tabset, but not saved yet
const content = await TabsetService.getContentFor(this.tab)
// .then((content) => {
//console.log("got content", content)
let res: any = null
if (content) {
const res2 = await useTabsetService().saveText(this.tab, content['content' as keyof object], content['metas' as keyof object])
// .then((res) => {
// add to search index
useSearchStore().addToIndex(
uid(), this.tab.name || '',
Expand All @@ -64,35 +64,18 @@ export class AddTabToTabsetCommand implements Command<any> {
this.tab.description, content['content' as keyof object],
[this.tabset.id],
this.tab.favIconUrl || '')
// return res
// })
// .then((res) => {
res = new ExecutionResult("result", "Tab was added",)
// })
} else {
//console.log("this tabset tabs",this.tabset.tabs)
const res2 = saveTabset(this.tabset)
// .then((res) => {
// add to search index
useSearchStore().addToIndex(
uid(), this.tab.name || '',
this.tab.title || '',
this.tab.url || '',
this.tab.description, '',
[this.tabset.id],
this.tab.favIconUrl || '')
// return res
// })
// .then(result => {
res = new ExecutionResult(res2, "Tab was added")
// })
// .catch((err: any) => {
// console.error("we are here", err)
// return Promise.reject("problem")
// })
}
// })
// .then((res) => {
sendMsg('tab-added', {tabsetId: tabset.id})
return res
// })
Expand Down
1 change: 0 additions & 1 deletion src/services/ChromeApi.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,6 @@ const persistenceService = IndexedDbPersistenceService
class ChromeApi {

onHeadersReceivedListener = function (details: any) {
console.log("headerDetails", details)
if (details.url) {
persistenceService.saveRequest(details.url, new RequestInfo(details.statusCode as number, details.responseHeaders || []))
.then(() => console.debug("added request"))
Expand Down
3 changes: 1 addition & 2 deletions src/services/ChromeListeners.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -500,7 +500,6 @@ class ChromeListeners {
if (inIgnoredMessages(request)) {
return true
}
console.log("handling request", request)
if (request.msg === 'captureThumbnail') {
const screenShotWindow = useWindowsStore().screenshotWindow
this.handleCapture(sender, screenShotWindow, sendResponse)
Expand Down Expand Up @@ -599,7 +598,7 @@ class ChromeListeners {

private handleHtml2Links(request: any, sender: chrome.runtime.MessageSender, sendResponse: any) {
if (sender.tab) {
console.log("handleHtml2Links")
console.debug("handleHtml2Links")
saveMetaLinksFor(sender.tab, request.links)
saveLinksFor(sender.tab, request.anchors)

Expand Down
3 changes: 3 additions & 0 deletions src/services/NavigationService.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,14 @@ import {FeatureIdent} from "src/models/AppFeature";

class NavigationService {

placeholderPattern = /\${[^}]*}/gm

async openOrCreateTab(
withUrl: string,
matcher: string | undefined = undefined,
group: string | undefined = undefined
) {
withUrl = withUrl.replace(this.placeholderPattern, "")
const useWindowIdent = useTabsStore().getCurrentTabset?.window || 'current'
console.log(`opening url ${withUrl} in window ${useWindowIdent}, group: ${group}, mode: ${process.env.MODE}`)

Expand Down
1 change: 1 addition & 0 deletions src/services/TabsetService.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {useDB} from "src/services/usePersistenceService";
import {useSpacesStore} from "stores/spacesStore";
import {FirebaseCall} from "src/services/firebase/FirebaseCall";
import {Placeholders, PlaceholdersType} from "src/models/Placeholders";
import PlaceholderUtils from "src/utils/PlaceholderUtils";

const {getTabset, getCurrentTabset, saveTabset, saveCurrentTabset, tabsetsFor, addToTabset} = useTabsetService()

Expand Down
62 changes: 31 additions & 31 deletions src/services/TabsetService2.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -623,37 +623,37 @@ export function useTabsetService() {
let tabs: Tab[] = tabset.tabs

// Tabs with placeholder
let placeholderTabs: Tab[] = []
let removeTabIds: string[] = []
tabs.forEach((t: Tab) => {
if (t.placeholders && t.placeholders.type === PlaceholdersType.URL_SUBSTITUTION) {
const subs = t.placeholders.config
Object.entries(subs).forEach(e => {
const name = e[0]
const val = e[1]
val.split(",").forEach((v: string) => {
const substitution = v.trim()
if (substitution.length > 0) {
const clonedTab = JSON.parse(JSON.stringify(t));
clonedTab.id = uid()
clonedTab.description = undefined
let useUrl = t.url || ''
let useName = t.name || t.title || ''
Object.entries(subs).forEach(e1 => {
useUrl = useUrl.replaceAll("${" + e1[0] + "}", substitution)
useName = useName.replaceAll("${" + e1[0] + "}", substitution)
})
clonedTab.url = useUrl
clonedTab.name = useName
placeholderTabs.push(clonedTab)
removeTabIds.push(t.id)
}
})
})
}
})
tabs = _.filter(tabs, (t: Tab) => removeTabIds.indexOf(t.id) < 0)
tabs = tabs.concat(placeholderTabs)
// let placeholderTabs: Tab[] = []
// let removeTabIds: string[] = []
// tabs.forEach((t: Tab) => {
// if (t.placeholders && t.placeholders.type === PlaceholdersType.URL_SUBSTITUTION) {
// const subs = t.placeholders.config
// Object.entries(subs).forEach(e => {
// const name = e[0]
// const val = e[1]
// val.split(",").forEach((v: string) => {
// const substitution = v.trim()
// if (substitution.length > 0) {
// const clonedTab = JSON.parse(JSON.stringify(t));
// clonedTab.id = uid()
// clonedTab.description = undefined
// let useUrl = t.url || ''
// let useName = t.name || t.title || ''
// Object.entries(subs).forEach(e1 => {
// useUrl = useUrl.replaceAll("${" + e1[0] + "}", substitution)
// useName = useName.replaceAll("${" + e1[0] + "}", substitution)
// })
// clonedTab.url = useUrl
// clonedTab.name = useName
// placeholderTabs.push(clonedTab)
// removeTabIds.push(t.id)
// }
// })
// })
// }
// })
// tabs = _.filter(tabs, (t: Tab) => removeTabIds.indexOf(t.id) < 0)
// tabs = tabs.concat(placeholderTabs)


// TODO order??
Expand Down
1 change: 0 additions & 1 deletion src/stores/tabsStore.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import {useTabsetService} from "src/services/TabsetService2";
import {useWindowsStore} from "src/stores/windowsStore";

async function queryTabs(): Promise<chrome.tabs.Tab[]> {
console.log("hier")
// @ts-ignore
return await chrome.tabs.query({currentWindow: true});
}
Expand Down
Loading

0 comments on commit 12b9223

Please sign in to comment.