2021-01-31 02:43:13 +13:00
|
|
|
<template>
|
|
|
|
|
|
|
|
<transition
|
|
|
|
enter-active-class="animated slideInDown"
|
|
|
|
leave-active-class="animated slideOutUp"
|
|
|
|
appear
|
|
|
|
:duration="600"
|
|
|
|
>
|
|
|
|
<q-header
|
|
|
|
v-if="localDocuments.length > 0"
|
|
|
|
elevated
|
|
|
|
class="bg-dark text-cultured"
|
|
|
|
>
|
2021-02-21 01:06:21 +13:00
|
|
|
<q-dialog
|
2021-01-31 02:43:13 +13:00
|
|
|
v-if="currentlyCheckedDocument"
|
|
|
|
v-model="documentCloseDialogConfirm"
|
|
|
|
persistent>
|
|
|
|
<q-card>
|
|
|
|
<q-card-section class="row items-center">
|
|
|
|
<span class="q-ml-sm">Discard changes to {{retrieveFieldValue(currentlyCheckedDocument,'name')}}?</span>
|
|
|
|
</q-card-section>
|
|
|
|
|
|
|
|
<q-card-actions align="right">
|
|
|
|
<q-btn flat label="Cancel" color="primary" v-close-popup />
|
|
|
|
<q-btn
|
|
|
|
flat
|
|
|
|
label="Discard changes"
|
|
|
|
color="primary"
|
|
|
|
v-close-popup
|
|
|
|
@click="closeDocument(currentlyCheckedDocument)" />
|
|
|
|
</q-card-actions>
|
|
|
|
</q-card>
|
|
|
|
</q-dialog>
|
|
|
|
|
|
|
|
<q-tabs
|
|
|
|
align="left"
|
|
|
|
inline-label
|
2021-02-09 15:21:48 +13:00
|
|
|
class="tabsWrapper"
|
2021-01-31 02:43:13 +13:00
|
|
|
no-caps>
|
|
|
|
<transition-group
|
|
|
|
name="list"
|
|
|
|
tag="div"
|
|
|
|
class="headerTransitionWrapper"
|
|
|
|
enter-active-class="animated fadeIn"
|
|
|
|
leave-active-class="animated fadeOut"
|
|
|
|
appear
|
|
|
|
:duration="300">
|
|
|
|
<q-route-tab
|
|
|
|
:ripple="false"
|
|
|
|
v-for="document in localDocuments"
|
|
|
|
:to="`/project/display-content/${document.type}/${document._id}`"
|
|
|
|
:key="document.type+document._id"
|
2021-02-21 01:06:21 +13:00
|
|
|
:icon="(retrieveFieldValue(document,'categorySwitch') ? 'fas fa-folder-open' : document.icon)"
|
2021-01-31 02:43:13 +13:00
|
|
|
:label="retrieveFieldValue(document,'name')"
|
2021-02-21 01:06:21 +13:00
|
|
|
:style="`color: ${retrieveFieldValue(document,'documentColor')}`"
|
2021-01-31 02:43:13 +13:00
|
|
|
:alert="document.hasEdits"
|
|
|
|
alert-icon="mdi-feather"
|
|
|
|
>
|
|
|
|
<q-btn
|
2021-02-21 01:06:21 +13:00
|
|
|
round
|
|
|
|
dense
|
|
|
|
class="z-max q-ml-sm"
|
|
|
|
:class="{'q-mr-sm': document.hasEdits}"
|
|
|
|
size="xs"
|
|
|
|
icon="close"
|
|
|
|
style="color: #fff;"
|
|
|
|
@click.stop.prevent="checkForCloseOpenedDocument(document)"
|
|
|
|
/>
|
2021-01-31 02:43:13 +13:00
|
|
|
</q-route-tab>
|
|
|
|
</transition-group>
|
|
|
|
</q-tabs>
|
|
|
|
|
|
|
|
</q-header>
|
|
|
|
</transition>
|
|
|
|
|
|
|
|
</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"
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
components: { }
|
|
|
|
})
|
|
|
|
export default class TppTabs extends BaseClass {
|
|
|
|
documentCloseDialogConfirm = false
|
|
|
|
currentlyCheckedDocument = null as unknown as I_OpenedDocument
|
|
|
|
|
|
|
|
checkForCloseOpenedDocument (input: I_OpenedDocument) {
|
|
|
|
this.currentlyCheckedDocument = input
|
|
|
|
if (input.hasEdits) {
|
|
|
|
this.documentCloseDialogConfirm = true
|
|
|
|
} else {
|
|
|
|
this.closeDocument(input)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
closeDocument (input: I_OpenedDocument) {
|
|
|
|
this.SSET_removeOpenedDocument(input)
|
2021-02-09 15:21:48 +13:00
|
|
|
this.documentCloseDialogConfirm = false
|
2021-01-31 02:43:13 +13:00
|
|
|
setTimeout(() => {
|
|
|
|
this.refreshRoute()
|
|
|
|
}, 100)
|
|
|
|
}
|
|
|
|
|
|
|
|
@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
|
|
|
|
|
|
|
|
@Watch("pushedKey", { deep: true })
|
|
|
|
processKeyPress (keypress: I_KeyPressObject) {
|
|
|
|
// Delete dialog - CTRL + W
|
|
|
|
if (!keypress.shiftKey && keypress.ctrlKey && !keypress.altKey && keypress.keyCode === 87 && this.localDocuments.length > 0) {
|
|
|
|
const matchingDocument = this.localDocuments.find(e => e.url === this.$route.path)
|
|
|
|
|
|
|
|
if (matchingDocument) {
|
|
|
|
this.checkForCloseOpenedDocument(matchingDocument)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Next tab - ALT + RIGHT ARROW
|
|
|
|
if (!keypress.shiftKey && !keypress.ctrlKey && keypress.altKey && keypress.keyCode === 39 && this.localDocuments.length > 0) {
|
|
|
|
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) }
|
|
|
|
})
|
|
|
|
}
|
|
|
|
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) }
|
|
|
|
})
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Previous tab - ALT + LEFT ARROW
|
|
|
|
if (!keypress.shiftKey && !keypress.ctrlKey && keypress.altKey && keypress.keyCode === 37 && this.localDocuments.length > 0) {
|
|
|
|
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-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 {
|
|
|
|
font-size: 18px;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
.tabsWrapper .fas {
|
|
|
|
font-size: 18px;
|
|
|
|
}
|
2021-01-31 02:43:13 +13:00
|
|
|
</style>
|