2021-01-31 02:43:13 +13:00
|
|
|
<template>
|
|
|
|
|
2021-02-26 14:50:46 +13:00
|
|
|
<span>
|
|
|
|
|
2021-03-03 08:59:56 +13:00
|
|
|
<closeDocumentCheckDialog
|
|
|
|
:dialog-trigger="closeDocumentCheckDialogTrigger"
|
|
|
|
:dialog-document="dialogDoc"
|
|
|
|
@trigger-dialog-close="closeDocumentCheckDialogClose"
|
|
|
|
/>
|
2021-02-26 14:50:46 +13:00
|
|
|
|
|
|
|
<q-tabs
|
|
|
|
v-if="localDocuments.length > 0"
|
|
|
|
align="left"
|
|
|
|
inline-label
|
|
|
|
outside-arrows
|
|
|
|
mobile-arrows
|
|
|
|
class="tabsWrapper"
|
|
|
|
dense
|
|
|
|
no-caps>
|
|
|
|
<transition-group
|
|
|
|
name="list"
|
|
|
|
tag="div"
|
|
|
|
class="headerTransitionWrapper"
|
|
|
|
enter-active-class="animated fadeIn"
|
|
|
|
leave-active-class="animated fadeOut"
|
|
|
|
appear
|
|
|
|
:duration="150">
|
|
|
|
|
|
|
|
<q-route-tab
|
|
|
|
:ripple="false"
|
|
|
|
v-for="document in localDocuments"
|
|
|
|
:to="`/project/display-content/${document.type}/${document._id}`"
|
|
|
|
:key="document.type+document._id"
|
|
|
|
:icon="(retrieveFieldValue(document,'categorySwitch') ? 'fas fa-folder-open' : document.icon)"
|
|
|
|
:label="retrieveFieldValue(document,'name')"
|
|
|
|
:style="`color: ${retrieveFieldValue(document,'documentColor')};`"
|
|
|
|
:class="[{'isBold': (retrieveFieldValue(document,'documentColor') !== '#ffffff' && retrieveFieldValue(document,'documentColor') !== '#fff') && retrieveFieldValue(document,'documentColor') !== ''}]"
|
|
|
|
:alert="document.hasEdits"
|
|
|
|
alert-icon="mdi-feather"
|
2021-03-03 08:59:56 +13:00
|
|
|
@click.prevent.middle="tryCloseTab(document)"
|
2021-02-26 14:50:46 +13:00
|
|
|
>
|
|
|
|
<q-tooltip
|
|
|
|
:delay="700"
|
|
|
|
>
|
|
|
|
{{retrieveFieldValue(document,'name')}}
|
|
|
|
</q-tooltip>
|
|
|
|
<q-btn
|
|
|
|
round
|
|
|
|
dense
|
|
|
|
class="z-max q-ml-auto"
|
|
|
|
:class="{'q-mr-sm': document.hasEdits}"
|
|
|
|
size="xs"
|
|
|
|
icon="close"
|
|
|
|
style="color: #fff;"
|
2021-03-03 08:59:56 +13:00
|
|
|
@click.stop.prevent="tryCloseTab(document)"
|
2021-02-26 14:50:46 +13:00
|
|
|
/>
|
|
|
|
</q-route-tab>
|
|
|
|
|
|
|
|
</transition-group>
|
|
|
|
</q-tabs>
|
|
|
|
|
|
|
|
</span>
|
2021-01-31 02:43:13 +13:00
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
2021-02-21 01:06:21 +13:00
|
|
|
|
|
|
|
import { I_KeyPressObject } from "src/interfaces/I_KeypressObject"
|
|
|
|
|
|
|
|
import { Component, Watch, Prop } from "vue-property-decorator"
|
2021-01-31 02:43:13 +13:00
|
|
|
|
|
|
|
import BaseClass from "src/BaseClass"
|
|
|
|
import { I_OpenedDocument } from "src/interfaces/I_OpenedDocument"
|
2021-03-03 08:59:56 +13:00
|
|
|
import closeDocumentCheckDialog from "src/components/dialogs/CloseDocumentCheck.vue"
|
2021-01-31 02:43:13 +13:00
|
|
|
|
|
|
|
@Component({
|
2021-03-03 08:59:56 +13:00
|
|
|
components: { closeDocumentCheckDialog }
|
2021-01-31 02:43:13 +13:00
|
|
|
})
|
2021-02-26 14:50:46 +13:00
|
|
|
export default class TopTabs extends BaseClass {
|
2021-01-31 02:43:13 +13:00
|
|
|
@Watch("SGET_allOpenedDocuments", { deep: true })
|
|
|
|
reactToDocumentListChange (val: {docs: I_OpenedDocument[]}) {
|
|
|
|
this.localDocuments = []
|
|
|
|
this.localDocuments = val.docs
|
|
|
|
|
|
|
|
this.refreshRoute()
|
|
|
|
}
|
|
|
|
|
|
|
|
localDocuments: I_OpenedDocument[] = []
|
2021-02-21 01:06:21 +13:00
|
|
|
|
|
|
|
@Prop() readonly pushedKey!: I_KeyPressObject
|
|
|
|
|
2021-03-03 08:59:56 +13:00
|
|
|
closeDocumentCheckDialogTrigger: string | false = false
|
|
|
|
closeDocumentCheckDialogClose () {
|
|
|
|
this.closeDocumentCheckDialogTrigger = false
|
|
|
|
}
|
|
|
|
|
|
|
|
closeDocumentCheckDialogAssignUID () {
|
|
|
|
this.closeDocumentCheckDialogTrigger = this.generateUID()
|
|
|
|
}
|
|
|
|
|
2021-02-23 11:30:18 +13:00
|
|
|
/****************************************************************/
|
|
|
|
// Keybind handling
|
|
|
|
/****************************************************************/
|
|
|
|
|
|
|
|
/**
|
|
|
|
* React to keypresses passed from the parent document
|
|
|
|
*/
|
|
|
|
@Watch("SGET_getCurrentKeyBindData", { deep: true })
|
|
|
|
processKeyPush () {
|
|
|
|
// Delete dialog
|
|
|
|
if (this.determineKeyBind("closeTab") && this.localDocuments.length > 0) {
|
2021-03-03 08:59:56 +13:00
|
|
|
this.tryCloseTab()
|
2021-02-23 11:30:18 +13:00
|
|
|
}
|
2021-02-21 01:06:21 +13:00
|
|
|
|
2021-02-23 11:30:18 +13:00
|
|
|
// Next tab
|
|
|
|
if (this.determineKeyBind("nextTab") && this.localDocuments.length > 0) {
|
|
|
|
this.goToNextTab()
|
2021-02-21 01:06:21 +13:00
|
|
|
}
|
|
|
|
|
2021-02-23 11:30:18 +13:00
|
|
|
// Previous tab
|
|
|
|
if (this.determineKeyBind("previousTab") && this.localDocuments.length > 0) {
|
|
|
|
this.goToPreviousTab()
|
|
|
|
}
|
|
|
|
}
|
2021-02-21 01:06:21 +13:00
|
|
|
|
2021-03-03 08:59:56 +13:00
|
|
|
dialogDoc = null as unknown as I_OpenedDocument
|
|
|
|
|
|
|
|
tryCloseTab (doc?: I_OpenedDocument) {
|
|
|
|
const matchingDocument = (doc) || this.localDocuments.find(e => e.url === this.$route.path)
|
2021-02-23 11:30:18 +13:00
|
|
|
|
|
|
|
if (matchingDocument) {
|
2021-03-03 08:59:56 +13:00
|
|
|
this.dialogDoc = matchingDocument
|
|
|
|
this.closeDocumentCheckDialogAssignUID()
|
2021-02-21 01:06:21 +13:00
|
|
|
}
|
2021-02-23 11:30:18 +13:00
|
|
|
}
|
2021-02-21 01:06:21 +13:00
|
|
|
|
2021-02-23 11:30:18 +13:00
|
|
|
goToNextTab () {
|
|
|
|
let index = -1
|
|
|
|
const matchingDocument = this.localDocuments.find((e, i) => {
|
|
|
|
index = i
|
|
|
|
return e.url === this.$route.path
|
|
|
|
})
|
|
|
|
|
|
|
|
if (matchingDocument && index !== this.localDocuments.length - 1) {
|
|
|
|
this.$router.push({ path: this.localDocuments[index + 1].url }).catch((e: {name: string}) => {
|
|
|
|
if (e && e.name !== "NavigationDuplicated") {
|
|
|
|
console.log(e)
|
|
|
|
}
|
2021-02-21 01:06:21 +13:00
|
|
|
})
|
2021-02-23 11:30:18 +13:00
|
|
|
}
|
|
|
|
if (matchingDocument && index === this.localDocuments.length - 1) {
|
|
|
|
this.$router.push({ path: this.localDocuments[0].url }).catch((e: {name: string}) => {
|
|
|
|
if (e && e.name !== "NavigationDuplicated") {
|
|
|
|
console.log(e)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
2021-02-21 01:06:21 +13:00
|
|
|
|
2021-02-23 11:30:18 +13:00
|
|
|
goToPreviousTab () {
|
|
|
|
let index = -1
|
|
|
|
const matchingDocument = this.localDocuments.find((e, i) => {
|
|
|
|
index = i
|
|
|
|
return e.url === this.$route.path
|
|
|
|
})
|
|
|
|
|
|
|
|
if (matchingDocument && index !== 0) {
|
|
|
|
this.$router.push({ path: this.localDocuments[index - 1].url }).catch((e: {name: string}) => {
|
|
|
|
if (e && e.name !== "NavigationDuplicated") {
|
|
|
|
console.log(e)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
if (matchingDocument && index === 0) {
|
|
|
|
this.$router.push({ path: this.localDocuments[this.localDocuments.length - 1].url }).catch((e: {name: string}) => {
|
|
|
|
if (e && e.name !== "NavigationDuplicated") {
|
|
|
|
console.log(e)
|
|
|
|
}
|
|
|
|
})
|
2021-02-21 01:06:21 +13:00
|
|
|
}
|
|
|
|
}
|
2021-01-31 02:43:13 +13:00
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.headerTransitionWrapper {
|
|
|
|
display: flex;
|
|
|
|
}
|
|
|
|
|
2021-02-09 15:21:48 +13:00
|
|
|
.tabsWrapper .fas {
|
2021-02-26 14:50:46 +13:00
|
|
|
font-size: 16px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.tabsWrapper .mdi {
|
2021-02-09 15:21:48 +13:00
|
|
|
font-size: 18px;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
|
|
|
|
<style lang="scss">
|
2021-02-26 14:50:46 +13:00
|
|
|
.tabsWrapper {
|
2021-02-28 06:00:57 +13:00
|
|
|
-webkit-app-region: no-drag;
|
|
|
|
|
2021-02-26 14:50:46 +13:00
|
|
|
.q-tabs__arrow {
|
|
|
|
text-shadow: none !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
.isBold .q-tab__label {
|
|
|
|
font-weight: 500 !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
.q-tab {
|
|
|
|
padding: 0 10px;
|
|
|
|
|
|
|
|
&__content {
|
|
|
|
min-width: 170px;
|
|
|
|
width: 170px;
|
|
|
|
justify-content: flex-start;
|
|
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
|
|
|
|
&__label {
|
|
|
|
overflow: hidden;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
padding-top: 2px;
|
|
|
|
font-weight: 400;
|
|
|
|
font-size: 13px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.fas {
|
|
|
|
font-size: 16px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.mdi {
|
|
|
|
font-size: 18px;
|
|
|
|
}
|
|
|
|
|
|
|
|
&.q-tabs--dense .q-tab {
|
|
|
|
min-height: 40px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.q-tab__alert-icon {
|
|
|
|
font-size: 16px;
|
|
|
|
top: 4px;
|
|
|
|
right: -10px;
|
|
|
|
color: $primary;
|
|
|
|
}
|
2021-02-09 15:21:48 +13:00
|
|
|
}
|
2021-01-31 02:43:13 +13:00
|
|
|
</style>
|