Skip to content

Commit

Permalink
TAB-484 savepoint
Browse files Browse the repository at this point in the history
  • Loading branch information
evandor committed Feb 7, 2024
1 parent 9d62e9b commit 0515567
Show file tree
Hide file tree
Showing 12 changed files with 249 additions and 84 deletions.
File renamed without changes.
18 changes: 12 additions & 6 deletions src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@ onAuthStateChanged(auth, async (user) => {
// https://firebase.google.com/docs/reference/js/auth.user
console.log("%conAuthStateChanged: about to log in", "border:1px solid green")
// --- if we do this in useAuthStore.setUser(), we cannot properly run vitest any more
const userDoc = await getDoc(doc(firestore, "users", user.uid))
const userData = userDoc.data()
Expand All @@ -49,16 +48,16 @@ onAuthStateChanged(auth, async (user) => {
console.log("hier", account, products)
})
// --- end of statement
AppService.init($q, router, true, user, account)
await AppService.init($q, router, true, user, account)
} else {
// User is signed out
console.log("%conAuthStateChanged: logged out", "border:1px solid green")
AppService.init($q, router, true, undefined)
await AppService.init($q, router, true, undefined)
if (!router.currentRoute.value.path.startsWith("/mainpanel")) {
router.push("/")
await router.push("/")
}
}
});
Expand Down Expand Up @@ -96,7 +95,14 @@ if (currentUser) {
console.log("current user id found, waiting for auto-login")
// we should be logged in any second
} else {
AppService.init($q, router)
setTimeout(() => {
// triggers, but app should already have been started, no restart enforced
console.debug("app start fallback after 2000ms")
AppService.init($q, router, false)
}, 2000)
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/SavedPdfs.vue
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
*
</div>
<div class="col-9 text-body2 ellipsis">
{{ pdf.title }}
{{ pdf['title' as keyof object] }}
</div>
<div class="col-1">
<!-- <q-icon name="close" @click.stop="deleteMHtml(pdf)"/>-->
Expand Down
87 changes: 87 additions & 0 deletions src/components/dialogues/RenameWindowDialog.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
<template>
<q-dialog ref="dialogRef" @hide="onDialogHide">
<q-card class="q-dialog-plugin">
<q-card-section>
<div class="text-h6">Window</div>
</q-card-section>
<q-card-section>
<div class="text-body">You can provide a new name for this window</div>
</q-card-section>

<q-card-section class="q-pt-none">
<q-input dense v-model="newWindowName" autofocus @keydown.enter="updateWindow()"
error-message="Please do not use special Characters, maximum length is 32"
:error="!newWindowNameIsValid" />
<!-- <div class="text-body2 text-warning">{{ newTabsetDialogWarning() }}</div>-->
</q-card-section>

<q-card-actions align="right" class="text-primary">
<q-btn label="Cancel" size="sm" color="accent" @click="onDialogCancel"/>
<q-btn label="Update" size="sm" color="warning"
:disable="disableSubmit()"
v-close-popup
@click="updateWindow()"/>
</q-card-actions>


</q-card>
</q-dialog>

</template>

<script lang="ts" setup>
import {computed, ref, watchEffect} from "vue";
import {useDialogPluginComponent} from "quasar";
import {useTabsStore} from "src/stores/tabsStore";
import {STRIP_CHARS_IN_USER_INPUT} from "boot/constants";
import {useCommandExecutor} from "src/services/CommandExecutor";
import {RenameWindowCommand} from "src/domain/tabsets/RenameWindow";
import {ExecutionResult} from "src/domain/ExecutionResult";
defineEmits([
...useDialogPluginComponent.emits
])
const props = defineProps({
windowId: {type: Number, required: true},
currentName: {type: String, required: true},
index: {type: Number, required: true}
})
const {dialogRef, onDialogOK, onDialogHide, onDialogCancel} = useDialogPluginComponent()
const tabsStore = useTabsStore()
const newWindowName = ref(props.currentName)
const newWindowNameExists = ref(false)
const hideWarning = ref(false)
watchEffect(() => {
newWindowNameExists.value = !!tabsStore.nameExistsInContextTabset(newWindowName.value);
})
const updateWindow = () => useCommandExecutor()
.executeFromUi(new RenameWindowCommand(props.windowId, newWindowName.value, props.index))
.then((result: ExecutionResult<string>) => {
onDialogOK({ name: newWindowName.value })
})
// const newTabsetDialogWarning = () => {
// return (!hideWarning.value && newWindowName.value !== props.tabsetName && tabsStore.nameExistsInContextTabset(newWindowName.value)) ?
// "Tabset already exists" : ""
// }
const newWindowNameIsValid = computed(() =>
newWindowName.value?.length <= 32 && !STRIP_CHARS_IN_USER_INPUT.test(newWindowName.value))
const disableSubmit = (): boolean => {
return newWindowName.value.trim().length === 0
}
</script>

<style lang="sass" scoped>
.my-input
max-width: 250px
</style>
131 changes: 78 additions & 53 deletions src/components/helper/SidePanelWindowMarkupTable.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

<Transition name="bounceInLeft" appear>

<q-markup-table class="q-ma-none" dense flat>
<q-markup-table class="q-ma-none bg-grey-2" dense flat>
<thead>
<tr>
<!-- <th></th>-->
Expand Down Expand Up @@ -36,15 +36,20 @@
style="max-height:15px">
<!-- <td>{{ row['index' as keyof object] }}</td>-->
<!-- <td>{{ row['state' as keyof object] }}</td>-->
<td class="text-left" :class="windowNameRowClass(row)" style="cursor:move" :data-testid="'windowDataColumn_name_' + row['id' as keyof object]">
{{ row['name' as keyof object] }}
<q-popup-edit v-model="row['name' as keyof object]"
@save="(val:string, initial:string) => setWindowName(row, val)"
v-slot="scope">
<q-input v-model="scope.value"
dense autofocus counter
@keyup.enter="scope.set"/>
</q-popup-edit>
<td class="text-left" :class="windowNameRowClass(row)"
@dblclick.stop="openRenameWindowDialog(row['id' as keyof object], row['name' as keyof object], row['index' as keyof object])"
@click.prevent.stop="openWindow(row['id' as keyof object])">
<q-icon v-if="rows.length > 1" name="drag_indicator" class="q-mr-sm" style="cursor:move">
<q-tooltip>{{ row['index' as keyof object]}}</q-tooltip>
</q-icon>
<span class="cursor-pointer" :data-testid="'windowDataColumn_name_' + row['id' as keyof object]">{{ row['name' as keyof object] }}</span>
<!-- <q-popup-edit v-model="row['name' as keyof object]"-->
<!-- @save="(val:string, initial:string) => setWindowName(row, val)"-->
<!-- v-slot="scope">-->
<!-- <q-input v-model="scope.value"-->
<!-- dense autofocus counter-->
<!-- @keyup.enter="scope.set"/>-->
<!-- </q-popup-edit>-->

</td>
<td :data-testid="'windowDataColumn_tabsCount_' + row['id' as keyof object]">
Expand All @@ -58,11 +63,16 @@
@click="minimizeWindow(row['id' as keyof object])">
<q-tooltip :delay=500 class="tooltip-small">Hide Window</q-tooltip>
</q-icon>
<q-icon name="open_in_new"
class="q-ml-sm cursor-pointer"
:class="useWindowsStore().currentChromeWindow?.id === row['id' as keyof object] ? 'text-grey' : 'text-blue-8 cursor-pointer'"
@click="openWindow(row['id' as keyof object])">
<q-tooltip :delay=500 class="tooltip-small">Open this window</q-tooltip>
<!-- <q-icon name="open_in_new"-->
<!-- class="q-ml-sm cursor-pointer"-->
<!-- :class="useWindowsStore().currentChromeWindow?.id === row['id' as keyof object] ? 'text-grey' : 'text-blue-8 cursor-pointer'"-->
<!-- @click="openWindow(row['id' as keyof object])">-->
<!-- <q-tooltip :delay=500 class="tooltip-small">Open this window</q-tooltip>-->
<!-- </q-icon>-->
<q-icon name="edit"
class="q-ml-sm text-blue-8 cursor-pointer"
@click="openRenameWindowDialog(row['id' as keyof object], row['name' as keyof object], row['index' as keyof object])">
<q-tooltip :delay=500 class="tooltip-small">Edit Window Name</q-tooltip>
</q-icon>
<q-icon name="o_bookmark_add"
size="xs"
Expand All @@ -77,7 +87,7 @@
</q-icon>
</template>
<template v-else>
<div style="width:130px;">&nbsp;</div>
<div>&nbsp;</div>
</template>
</td>
</tr>
Expand Down Expand Up @@ -116,8 +126,11 @@ import {useSuggestionsStore} from "stores/suggestionsStore";
import MqttService from "src/services/mqtt/MqttService";
import AppService from "src/services/AppService";
import {useNotificationHandler} from "src/services/ErrorHandler";
import ExportDialog from "components/dialogues/ExportDialog.vue";
import RenameWindowDialog from "components/dialogues/RenameWindowDialog.vue";
const {handleSuccess, handleError} = useNotificationHandler()
const {handleError} = useNotificationHandler()
const {sendMsg} = useUtils()
const $q = useQuasar()
Expand All @@ -128,12 +141,13 @@ const windowsToOpen = ref<string>('')
const windowsToOpenOptions = ref<object[]>([])
const hoveredWindow = ref<number | undefined>(undefined)
const windowsUpdatedListener = (message:any, sender:chrome.runtime.MessageSender, sendResponse:any) => {
const windowsUpdatedListener = (message: any, sender: chrome.runtime.MessageSender, sendResponse: any) => {
if (message.name === 'window-updated') {
console.log("got message 'window-updated'", message.data.initiated, message)
useWindowsStore().setup('got window-updated message')
.then(() => rows.value = calcWindowRows())
// useWindowsStore().setup('got window-updated message')
// .then(() => rows.value = calcWindowRows())
//useUiStore().windowsChanged = message
rows.value = calcWindowRows()
}
return true
}
Expand All @@ -143,22 +157,29 @@ onMounted(() => {
})
watch(() => useWindowsStore().currentChromeWindows, (newWindows, oldWindows) => {
console.log("windows changed", newWindows, oldWindows)
//console.log("windows changed", newWindows, oldWindows)
rows.value = calcWindowRows()
})
//console.log("====>: chrome.runtime.onMessage.hasListeners(windowsUpdatedListener)", chrome.runtime.onMessage.hasListener(windowsUpdatedListener))
chrome.runtime.onMessage.addListener(windowsUpdatedListener)
chrome.tabs.onRemoved.addListener((tabId: number, removeInfo: chrome.tabs.TabRemoveInfo) => {
console.log ("***here we are", tabId, removeInfo)
//console.log("***here we are", tabId, removeInfo)
useWindowsStore().setup('got window-updated message')
.then(() => rows.value = calcWindowRows())
.catch((err) => handleError(err))
})
chrome.tabs.onCreated.addListener((tab: chrome.tabs.Tab) => {
console.log ("***here we are2", tab)
//console.log("***here we are2", tab)
// useWindowsStore().setup('got window-updated message')
// .then(() => rows.value = calcWindowRows())
// .catch((err) => handleError(err))
})
chrome.tabs.onUpdated.addListener((tabId: number, changeInfo: chrome.tabs.TabChangeInfo, tab: chrome.tabs.Tab) => {
//console.log("***here we are3", tab)
useWindowsStore().setup('got window-updated message')
.then(() => rows.value = calcWindowRows())
.catch((err) => handleError(err))
Expand Down Expand Up @@ -235,13 +256,13 @@ const calcWindowRows = () => {
const result = _.map(useWindowsStore().currentChromeWindows as chrome.windows.Window[], (cw: chrome.windows.Window) => {
const windowFromStore: Window | undefined = useWindowsStore().windowForId(cw.id || -2)
// console.debug(`setting window ${cw.id} ['${windowFromStore?.title}'] (#${cw.tabs?.length} tabs, #${windowFromStore?.hostList.size} hosts) -> #${windowFromStore?.index}`)
// console.debug(`setting window ${cw.id} ['${windowFromStore?.title}'] (#${cw.tabs?.length} tabs, #${windowFromStore?.hostList.size} hosts) -> #${windowFromStore?.index}`)
return {
id: cw.id,
index: windowFromStore?.index || 0,
tabsCount: cw.tabs?.length || 0,
name: useWindowsStore().windowNameFor(cw.id || 0) || cw.id,
name: useWindowsStore().windowNameFor(cw.id || 0) || cw.id!.toString(),
windowHeight: cw['height' as keyof object],
windowWidth: cw['width' as keyof object],
focused: cw.focused,
Expand All @@ -258,41 +279,23 @@ const calcWindowRows = () => {
return _.sortBy(result, "index")
}
const setWindowName = (windowRow: object, newName: string) => {
console.log("setWindowName", windowRow, newName)
if (newName && newName.toString().trim().length > 0) {
const id = windowRow['id' as keyof object]
chrome.windows.get(id, {populate: true}, (cw) => {
console.log("cw", cw)
useWindowsStore().upsertWindow(cw, newName.toString().trim(), windowRow['index' as keyof object])
if (useWindowsStore().currentChromeWindow?.id === id) {
currentWindowName.value = newName
//console.log("setting window name to ", currentWindowName.value)
useWindowsStore().currentWindowName = newName
}
})
}
}
const handleDragAndDrop = async (event: any) => {
const {moved, added} = event
console.log("event!", event)
if (moved) {
console.log(`moved event: '${moved.element.id}' ${moved.oldIndex} -> ${moved.newIndex}`, rows.value)
console.log(`moved event: '${moved.element.id}' ${moved.oldIndex} -> ${moved.newIndex}`, rows.value, event)
//useWindowsStore().moveWindow(rows.value, moved.element.id, moved.oldIndex, moved.newIndex)
const windowIndex = moved.element.id
console.log("moving window", windowIndex)
//console.log("moving window", windowIndex)
//const theWindows = getSortedWindows(windowForId);
//console.log("*** theWindows", theWindows)
const oldIndex = moved.oldIndex
const newIndex = moved.newIndex
console.log("moving", windowIndex, oldIndex, newIndex)
//console.log("moving", windowIndex, oldIndex, newIndex)
if (oldIndex >= 0 && rows.value.length > 0) {
console.log("old rows", _.map(rows.value, r => r['id' as keyof object] + ":" + r['index' as keyof object]))
console.log("old rows", _.map(rows.value, r => r['id' as keyof object] + "("+r['name' as keyof object]+"):" + r['index' as keyof object]))
const newOrder = _.map(rows.value, r => r['id' as keyof object] as number)
const startIndex = rows.value[0]['index' as keyof object]
let index = startIndex
Expand All @@ -302,16 +305,38 @@ const handleDragAndDrop = async (event: any) => {
}
}
rows.value = calcWindowRows()
sendMsg('window-updated', {initiated: "SidePanelWindowMarkupTable#handleDragAndDrop"})
//useWindowsStore().refreshCurrentWindows()
} else {
console.log("unhandled event!", event)
}
}
const windowNameRowClass = (row: any) => row['focused' as keyof object] ?
'text-bold' :
row['state'] === 'minimized' ?
'text-grey-5' :
''
const openRenameWindowDialog = (windowId: number, currentName: string, index: number) => {
$q.dialog({component: RenameWindowDialog, componentProps: {windowId, currentName, index}})
.onOk((name: string) => {
console.log("hier", name)
rows.value = calcWindowRows()
// if (useWindowsStore().currentChromeWindow?.id === windowId) {
// useWindowsStore().currentWindowName = name
// //sendMsg('window-updated', {initiated: "RenameWindowDialog#updateWindow"})
// }
})
}
const windowNameRowClass = (row: any) => {
if (useWindowsStore().currentChromeWindow?.id === row['id' as keyof object]) {
return row['focused' as keyof object] ? 'text-bold text-primary' : 'text-bold'
}
if (row['focused' as keyof object]) {
return 'text-primary'
}
if (row['state'] === 'minimized') {
return 'text-grey-5'
}
return ''
}
</script>

Expand Down
Loading

0 comments on commit 0515567

Please sign in to comment.