2021-02-26 14:50:46 +13:00
|
|
|
<template>
|
|
|
|
<q-dialog
|
|
|
|
v-model="dialogModel"
|
|
|
|
@hide="triggerDialogClose"
|
|
|
|
>
|
|
|
|
<q-card
|
|
|
|
dark
|
|
|
|
class="existingDocumentPopup"
|
|
|
|
>
|
|
|
|
|
|
|
|
<q-card-section class="row items-center">
|
|
|
|
<h6 class="text-center q-my-sm">Open existing document</h6>
|
|
|
|
</q-card-section>
|
|
|
|
|
2021-02-28 06:00:57 +13:00
|
|
|
<q-card-section class="column items-center">
|
|
|
|
<div class="q-mb-lg">
|
|
|
|
<q-checkbox dark v-model="includeCategories" label="Include categories in the list?" />
|
|
|
|
</div>
|
2021-02-26 14:50:46 +13:00
|
|
|
<q-select
|
2021-02-28 06:00:57 +13:00
|
|
|
style="width: 400px;"
|
2021-02-26 14:50:46 +13:00
|
|
|
ref="ref_existingDocument"
|
|
|
|
dense
|
2021-03-03 08:59:56 +13:00
|
|
|
class="existingDocumentSelect"
|
2021-02-26 14:50:46 +13:00
|
|
|
dark
|
2021-02-28 06:00:57 +13:00
|
|
|
menu-anchor="bottom middle"
|
|
|
|
menu-self="top middle"
|
2021-02-26 14:50:46 +13:00
|
|
|
:options="filteredExistingInput"
|
|
|
|
use-input
|
|
|
|
outlined
|
|
|
|
input-debounce="0"
|
|
|
|
v-model="existingDocumentModel"
|
|
|
|
@filter="filterExistingSelect"
|
|
|
|
@input="openExistingInput"
|
|
|
|
>
|
|
|
|
<template v-slot:option="{ itemProps, itemEvents, opt }">
|
|
|
|
<q-item
|
|
|
|
v-bind="itemProps"
|
|
|
|
v-on="itemEvents"
|
|
|
|
:style="`color: ${opt.color}`"
|
|
|
|
>
|
2021-03-04 13:27:07 +13:00
|
|
|
<q-item-section avatar>
|
|
|
|
<q-icon
|
|
|
|
:style="`color: ${retrieveIconColor(opt)}`"
|
|
|
|
:name="(opt.isCategory) ? 'fas fa-folder-open' : opt.icon"
|
|
|
|
/>
|
|
|
|
</q-item-section>
|
2021-02-26 14:50:46 +13:00
|
|
|
<q-item-section>
|
|
|
|
<q-item-label v-html="opt.label" ></q-item-label>
|
2021-03-03 08:59:56 +13:00
|
|
|
<q-item-label caption class="text-cultured" v-html="opt.hierarchicalPath"></q-item-label>
|
2021-03-03 14:10:05 +13:00
|
|
|
<q-item-label caption class="text-cultured" v-if="opt.tags">
|
|
|
|
<q-chip
|
|
|
|
v-for="(input,index) in opt.tags" :key="index"
|
|
|
|
outline
|
|
|
|
style="opacity: 0.8;"
|
|
|
|
size="12px"
|
2021-03-04 13:27:07 +13:00
|
|
|
class="text-cultured"
|
2021-03-03 14:10:05 +13:00
|
|
|
v-html="`${input}`"
|
|
|
|
>
|
|
|
|
</q-chip>
|
|
|
|
</q-item-label>
|
2021-02-26 14:50:46 +13:00
|
|
|
</q-item-section>
|
|
|
|
<q-btn
|
|
|
|
tabindex="-1"
|
|
|
|
round
|
|
|
|
flat
|
|
|
|
dense
|
|
|
|
dark
|
|
|
|
color="primary"
|
|
|
|
class="z-1 q-ml-md"
|
|
|
|
icon="mdi-plus"
|
|
|
|
size="md"
|
|
|
|
@click.stop.prevent="addNewItemUnderSelected(opt)"
|
|
|
|
>
|
|
|
|
<q-tooltip
|
|
|
|
:delay="300"
|
|
|
|
>
|
|
|
|
Add a new document belonging under {{ opt.label }}
|
|
|
|
</q-tooltip>
|
|
|
|
</q-btn>
|
|
|
|
</q-item>
|
|
|
|
</template>
|
|
|
|
</q-select>
|
|
|
|
</q-card-section>
|
|
|
|
|
|
|
|
<q-card-section>
|
2021-03-04 13:27:07 +13:00
|
|
|
<q-card-actions align="around" class="q-mb-sm">
|
|
|
|
<q-btn flat label="Close" color="accent" v-close-popup />
|
2021-02-26 14:50:46 +13:00
|
|
|
</q-card-actions>
|
|
|
|
</q-card-section>
|
|
|
|
|
|
|
|
</q-card>
|
|
|
|
</q-dialog>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
|
|
|
|
|
|
|
import { Component, Watch } from "vue-property-decorator"
|
|
|
|
import { I_ShortenedDocument } from "src/interfaces/I_OpenedDocument"
|
|
|
|
import PouchDB from "pouchdb"
|
2021-03-03 08:59:56 +13:00
|
|
|
import { advancedDocumentFilter } from "src/scripts/utilities/advancedDocumentFilter"
|
|
|
|
import { extend } from "quasar"
|
2021-02-26 14:50:46 +13:00
|
|
|
|
|
|
|
import DialogBase from "src/components/dialogs/_DialogBase"
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
components: { }
|
|
|
|
})
|
|
|
|
export default class ExistingDocumentDialog extends DialogBase {
|
|
|
|
@Watch("dialogTrigger")
|
|
|
|
openDialog (val: string|false) {
|
|
|
|
if (val) {
|
|
|
|
if (this.SGET_getDialogsState) {
|
|
|
|
return
|
|
|
|
}
|
|
|
|
this.SSET_setDialogState(true)
|
|
|
|
this.dialogModel = true
|
|
|
|
|
|
|
|
this.populateExistingObjectDialog().catch(e => console.log(e))
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-02-28 06:00:57 +13:00
|
|
|
existingObjectsBackupList = [] as I_ShortenedDocument[]
|
2021-02-26 14:50:46 +13:00
|
|
|
existingObjectList = [] as I_ShortenedDocument[]
|
|
|
|
|
|
|
|
async populateExistingObjectDialog () {
|
|
|
|
let allDocs = [] as I_ShortenedDocument[]
|
|
|
|
for (const blueprint of this.SGET_allBlueprints) {
|
|
|
|
const CurrentObjectDB = new PouchDB(blueprint._id)
|
|
|
|
|
|
|
|
const dbDocuments = await CurrentObjectDB.allDocs({ include_docs: true })
|
|
|
|
const formattedDocuments = dbDocuments.rows.map(singleDocument => {
|
|
|
|
const doc = singleDocument.doc as unknown as I_ShortenedDocument
|
|
|
|
return {
|
|
|
|
label: doc.extraFields.find(e => e.id === "name")?.value,
|
|
|
|
icon: doc.icon,
|
|
|
|
id: doc._id,
|
|
|
|
url: doc.url,
|
|
|
|
type: doc.type,
|
2021-02-28 06:00:57 +13:00
|
|
|
// @ts-ignore
|
|
|
|
hierarchicalPath: this.getDocumentHieararchicalPath(doc, dbDocuments.rows),
|
2021-03-03 14:10:05 +13:00
|
|
|
tags: doc.extraFields.find(e => e.id === "tags")?.value,
|
2021-02-26 14:50:46 +13:00
|
|
|
color: doc.extraFields.find(e => e.id === "documentColor")?.value,
|
|
|
|
isCategory: doc.extraFields.find(e => e.id === "categorySwitch")?.value
|
|
|
|
} as unknown as I_ShortenedDocument
|
2021-02-28 06:00:57 +13:00
|
|
|
})
|
|
|
|
.sort((a, b) => a.label.localeCompare(b.label))
|
2021-02-26 14:50:46 +13:00
|
|
|
// @ts-ignore
|
|
|
|
allDocs = [...allDocs, ...formattedDocuments]
|
|
|
|
}
|
|
|
|
|
2021-02-28 06:00:57 +13:00
|
|
|
this.existingObjectsBackupList = allDocs
|
|
|
|
this.filterDocuments()
|
2021-02-26 14:50:46 +13:00
|
|
|
|
2021-03-04 13:27:07 +13:00
|
|
|
await this.$nextTick()
|
|
|
|
await this.sleep(200)
|
|
|
|
|
|
|
|
if (this.$refs.ref_existingDocument) {
|
|
|
|
/*eslint-disable */
|
|
|
|
// @ts-ignore
|
|
|
|
this.$refs.ref_existingDocument.focus()
|
|
|
|
/* eslint-enable */
|
|
|
|
}
|
2021-02-26 14:50:46 +13:00
|
|
|
}
|
|
|
|
|
|
|
|
existingDocumentModel = null
|
|
|
|
|
|
|
|
filteredExistingInput = null as unknown as I_ShortenedDocument[]
|
|
|
|
|
2021-03-04 13:27:07 +13:00
|
|
|
async refocusSelect () {
|
|
|
|
await this.$nextTick()
|
|
|
|
/*eslint-disable */
|
|
|
|
// @ts-ignore
|
|
|
|
this.$refs.ref_existingDocument.setOptionIndex(-1)
|
|
|
|
// @ts-ignore
|
|
|
|
this.$refs.ref_existingDocument.moveOptionSelection(1, true)
|
|
|
|
/* eslint-enable */
|
|
|
|
}
|
|
|
|
|
2021-02-26 14:50:46 +13:00
|
|
|
filterExistingSelect (val: string, update: (e: () => void) => void) {
|
|
|
|
if (val === "") {
|
|
|
|
update(() => {
|
|
|
|
this.filteredExistingInput = this.existingObjectList
|
2021-03-04 13:27:07 +13:00
|
|
|
if (this.$refs.ref_existingDocument && this.filteredExistingInput.length > 0) {
|
|
|
|
this.refocusSelect().catch(e => console.log(e))
|
2021-02-26 14:50:46 +13:00
|
|
|
}
|
|
|
|
})
|
|
|
|
return
|
|
|
|
}
|
|
|
|
|
|
|
|
update(() => {
|
|
|
|
const needle = val.toLowerCase()
|
2021-03-03 08:59:56 +13:00
|
|
|
const listCopy : I_ShortenedDocument[] = extend(true, [], this.existingObjectList)
|
2021-03-04 13:27:07 +13:00
|
|
|
this.filteredExistingInput = advancedDocumentFilter(needle, listCopy)
|
2021-03-03 08:59:56 +13:00
|
|
|
|
2021-03-04 13:27:07 +13:00
|
|
|
if (this.$refs.ref_existingDocument && this.filteredExistingInput.length > 0) {
|
|
|
|
this.refocusSelect().catch(e => console.log(e))
|
2021-02-26 14:50:46 +13:00
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
openExistingInput (e: I_ShortenedDocument) {
|
|
|
|
this.dialogModel = false
|
|
|
|
// @ts-ignore
|
|
|
|
this.openExistingDocumentRoute(e)
|
|
|
|
this.existingDocumentModel = null
|
|
|
|
}
|
|
|
|
|
|
|
|
addNewItemUnderSelected (parent: any) {
|
|
|
|
const routeObject = {
|
|
|
|
_id: parent.type,
|
|
|
|
parent: parent.id
|
|
|
|
}
|
|
|
|
// @ts-ignore
|
|
|
|
this.addNewObjectRoute(routeObject)
|
|
|
|
}
|
2021-02-28 06:00:57 +13:00
|
|
|
|
|
|
|
includeCategories = true
|
|
|
|
|
|
|
|
@Watch("includeCategories")
|
|
|
|
reactToCheckboxChange () {
|
|
|
|
this.filterDocuments()
|
|
|
|
}
|
|
|
|
|
|
|
|
filterDocuments () {
|
|
|
|
this.existingObjectList = this.existingObjectsBackupList.filter(e => !((!this.includeCategories && e.isCategory)))
|
|
|
|
}
|
2021-02-26 14:50:46 +13:00
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
|
|
.existingDocumentPopup {
|
|
|
|
min-width: 600px;
|
|
|
|
margin-top: 100px;
|
|
|
|
align-self: flex-start;
|
|
|
|
|
|
|
|
h6 {
|
|
|
|
display: block;
|
|
|
|
text-align: center;
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|