fixed a hierarchy path generatio bug

changelog.md

@@ -29,6 +29,7 @@ add delete document dialog to dialog system
 - Lightly modified the app color-scheme to offer better readability of contrast
 - Changed icon for the button triggering quick-adding of new documents
 - Changed the looks of tooltips to go well with the current app looks
+- Adjusted tab-list width to allow for more content to show
 - Modified selected and active indicators for already selected/active items in dropdown lists in order to not clash with the highlighting from the filter results
 - Slightly modified the scrollbar visuals to be less intrusive
 - Added a light golden tint to the background of the app to go easy on user's eyes before dark mode is added

src/BaseClass.ts

@@ -184,6 +184,15 @@ export default class BaseClass extends Vue {
   @OpenedDocuments.Action("triggerTreeAction") SSET_triggerTreeAction!: () => void
   @OpenedDocuments.Action("resetDocuments") SSET_resetDocuments!: () => void
 
+  findRequestedOrActiveDocument (doc?: I_OpenedDocument) {
+    if (doc) {
+      return (this.SGET_allOpenedDocuments.docs.find(e => e.url === doc.url)) || false
+    }
+    else {
+      return (this.SGET_allOpenedDocuments.docs.find(e => e.url === this.$route.path)) || false
+    }
+  }
+
   /**
    * Retrieves value of requested field. If the field doesn't exist, returns false instead
    * @param document - Document object that is expected to contain the field
@@ -260,31 +269,34 @@ export default class BaseClass extends Vue {
   /****************************************************************/
   // Document list management
   /****************************************************************/
-  getDocumentHieararchicalPath (document: I_OpenedDocument, list: I_OpenedDocument[]): string {
+  getDocumentHieararchicalPath (document: I_OpenedDocument, list: I_OpenedDocument[]) {
-    let hierarchiString = ""
+    let hierarchicalString = ""
 
     // @ts-ignore
     const parentDoc = (this.retrieveFieldValue(document, "parentDoc"))?.value
-    if (!parentDoc) {
+
+    const parentDocInDB = (list.find(p => p._id === parentDoc?._id))
+
+    if (!parentDoc || (parentDoc && !parentDocInDB)) {
       const singleBlueprintName = this.SGET_allBlueprints.find(e => e._id === document.type)?.nameSingular
-      hierarchiString += singleBlueprintName
+      hierarchicalString += singleBlueprintName
-      return hierarchiString
+      return hierarchicalString
     }
+
     const matchingDoc = list.find((doc:I_OpenedDocument) => {
-      // @ts-ignore
+      return doc._id === parentDoc._id
-      return doc.id === parentDoc._id
     }) as I_OpenedDocument
 
     // @ts-ignore
-    hierarchiString += this.retrieveFieldValue(matchingDoc.doc, "name")
+    hierarchicalString += this.retrieveFieldValue(matchingDoc, "name")
 
     // @ts-ignore
-    const connectedReturn = this.getDocumentHieararchicalPath(matchingDoc.doc, list)
+    const connectedReturn = this.getDocumentHieararchicalPath(matchingDoc, list)
     if (connectedReturn) {
-      hierarchiString = `${connectedReturn} > ${hierarchiString}`
+      hierarchicalString = `${connectedReturn} > ${hierarchicalString}`
     }
 
-    return hierarchiString
+    return hierarchicalString
   }
 
   retrieveIconColor (document: I_ShortenedDocument): string {

src/components/AppHeader.vue

@@ -57,7 +57,7 @@ export default class AppHeader extends BaseClass {
   }
 
   .topTabs {
-    max-width: calc(100% - 535px);
+    max-width: calc(100% - 415px);
   }
 
   .appWindowButtons {

src/components/DocumentControl.vue

@@ -14,6 +14,12 @@
       @trigger-dialog-close="existingObjectDialogClose"
     />
 
+    <!-- Delele document dialog -->
+    <deleteDocumentCheckDialog
+      :dialog-trigger="deleteObjectDialogTrigger"
+      @trigger-dialog-close="deleteObjectDialogClose"
+    />
+
     <q-page-sticky position="top-right" class="documentControl">
 
       <div class="documentControl__blocker"></div>
@@ -61,6 +67,17 @@
         </div>
 
         <div class="documentControl__right">
+          <q-btn
+            icon="mdi-text-box-remove-outline"
+            color="secondary"
+            outline
+            @click="deleteObjectAssignUID"
+            :disable="SGET_allOpenedDocuments.docs.length < 1"
+          >
+            <q-tooltip>
+              Delete current document
+            </q-tooltip>
+          </q-btn>
 
         </div>
 
@@ -77,13 +94,15 @@ import { Component, Watch } from "vue-property-decorator"
 import BaseClass from "src/BaseClass"
 import newDocumentDialog from "src/components/dialogs/NewDocument.vue"
 import existingDocumentDialog from "src/components/dialogs/ExistingDocument.vue"
+import deleteDocumentCheckDialog from "src/components/dialogs/DeleteDocumentCheck.vue"
 
 import { retrieveCurrentProjectName, exportProject } from "src/scripts/projectManagement/projectManagent"
 
 @Component({
   components: {
     newDocumentDialog,
-    existingDocumentDialog
+    existingDocumentDialog,
+    deleteDocumentCheckDialog
   }
 })
 export default class DocumentControl extends BaseClass {
@@ -113,6 +132,24 @@ export default class DocumentControl extends BaseClass {
     if (this.determineKeyBind("quickExistingDocument")) {
       this.existingObjectAssignUID()
     }
+
+    // Delete dialog - CTRL + D
+    if (this.determineKeyBind("deleteDocument")) {
+      this.deleteObjectAssignUID()
+    }
+  }
+
+  /****************************************************************/
+  // Delete dialog
+  /****************************************************************/
+
+  deleteObjectDialogTrigger: string | false = false
+  deleteObjectDialogClose () {
+    this.deleteObjectDialogTrigger = false
+  }
+
+  deleteObjectAssignUID () {
+    this.deleteObjectDialogTrigger = this.generateUID()
   }
 
   /****************************************************************/

src/components/appHeader/TopTabs.vue

@@ -126,7 +126,7 @@ export default class TopTabs extends BaseClass {
   dialogDoc = null as unknown as I_OpenedDocument
 
   tryCloseTab (doc?: I_OpenedDocument) {
-    const matchingDocument = (doc) || this.localDocuments.find(e => e.url === this.$route.path)
+    const matchingDocument = this.findRequestedOrActiveDocument(doc)
 
     if (matchingDocument) {
       this.dialogDoc = matchingDocument

src/components/dialogs/DeleteDocumentCheck.vue

@@ -0,0 +1,84 @@
+<template>
+    <q-dialog
+      v-model="dialogModel"
+      @hide="triggerDialogClose"
+      >
+      <q-card dark class="documentCloseDialog">
+         <q-card-section class="row justify-center">
+          <h6 class="text-center q-my-sm">Delete <span class="text-primary">{{retrieveFieldValue(currentDocument, 'name')}}</span>?</h6>
+        </q-card-section>
+
+         <q-card-section class="row justify-center q-mx-xl">
+          <div>
+            The document will be delete <span class="text-bold text-secondary">FOREVER</span> with no way to retrieve it.
+            <br>
+            <span class="text-caption">(unless a previous export of the project exists from earlier time that cointains it)</span>
+            <br>
+            <br>
+
+            Proceed?
+          </div>
+        </q-card-section>
+
+        <q-card-actions align="around" class="q-mx-xl q-mt-lg q-mb-md">
+          <q-btn
+          flat
+          label="Cancel"
+          color="accent"
+          v-close-popup />
+          <q-btn
+            outline
+            label="Delete document"
+            color="secondary"
+            v-close-popup
+            @click="deleteDocument()" />
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
+</template>
+
+<script lang="ts">
+
+import { Component, Watch } from "vue-property-decorator"
+
+import DialogBase from "src/components/dialogs/_DialogBase"
+import { I_OpenedDocument } from "src/interfaces/I_OpenedDocument"
+import PouchDB from "pouchdb"
+
+@Component({
+  components: { }
+})
+export default class DeleteDocumentCheckDialog extends DialogBase {
+  @Watch("dialogTrigger")
+  async openDialog (val: string|false) {
+    if (val && this.SGET_allOpenedDocuments.docs.length > 0) {
+      if (this.SGET_getDialogsState) {
+        return
+      }
+      this.SSET_setDialogState(true)
+      this.dialogModel = true
+      const CurrentObjectDB = new PouchDB(this.$route.params.type)
+      this.currentDocument = await CurrentObjectDB.get(this.$route.params.id)
+    }
+  }
+
+  currentDocument = false as unknown as I_OpenedDocument
+
+  async deleteDocument () {
+    const CurrentObjectDB = new PouchDB(this.$route.params.type)
+
+    // @ts-ignore
+    await CurrentObjectDB.remove(this.currentDocument)
+
+    const dataPass = { doc: this.currentDocument, treeAction: true }
+    this.SSET_removeOpenedDocument(dataPass)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+.documentCloseDialog {
+  min-width: 600px;
+}
+</style>

src/components/dialogs/ExistingDocument.vue

@@ -95,7 +95,7 @@
 <script lang="ts">
 
 import { Component, Watch } from "vue-property-decorator"
-import { I_ShortenedDocument } from "src/interfaces/I_OpenedDocument"
+import { I_OpenedDocument, I_ShortenedDocument } from "src/interfaces/I_OpenedDocument"
 import PouchDB from "pouchdb"
 import { advancedDocumentFilter } from "src/scripts/utilities/advancedDocumentFilter"
 import { extend } from "quasar"
@@ -127,25 +127,30 @@ export default class ExistingDocumentDialog extends DialogBase {
     for (const blueprint of this.SGET_allBlueprints) {
       const CurrentObjectDB = new PouchDB(blueprint._id)
 
-      const dbDocuments = await CurrentObjectDB.allDocs({ include_docs: true })
+      const dbRows = await CurrentObjectDB.allDocs({ include_docs: true })
-      const formattedDocuments = dbDocuments.rows.map(singleDocument => {
+      const dbDocuments = dbRows.rows.map(d => d.doc)
-        const doc = singleDocument.doc as unknown as I_ShortenedDocument
+      const formattedDocuments: I_ShortenedDocument[] = []
-        return {
+
+      for (const singleDocument of dbDocuments) {
+        const doc = singleDocument as unknown as I_ShortenedDocument
+        const pushValue = {
           label: doc.extraFields.find(e => e.id === "name")?.value,
           icon: doc.icon,
           id: doc._id,
           url: doc.url,
           type: doc.type,
           // @ts-ignore
-          hierarchicalPath: this.getDocumentHieararchicalPath(doc, dbDocuments.rows),
+          hierarchicalPath: this.getDocumentHieararchicalPath(doc, dbDocuments),
           tags: doc.extraFields.find(e => e.id === "tags")?.value,
           color: doc.extraFields.find(e => e.id === "documentColor")?.value,
           isCategory: doc.extraFields.find(e => e.id === "categorySwitch")?.value
         } as unknown as I_ShortenedDocument
-      })
+        formattedDocuments.push(pushValue)
-        .sort((a, b) => a.label.localeCompare(b.label))
+      }
+      const sortedDocuments = formattedDocuments.sort((a, b) => a.label.localeCompare(b.label))
+
       // @ts-ignore
-      allDocs = [...allDocs, ...formattedDocuments]
+      allDocs = [...allDocs, ...sortedDocuments]
     }
 
     this.existingObjectsBackupList = allDocs

src/components/fields/Field_MultiRelationship.vue

@@ -242,9 +242,10 @@ export default class Field_SingleRelationship extends BaseClass {
       const CurrentObjectDB = new PouchDB(this.inputDataBluePrint.relationshipSettings.connectedObjectType)
 
       const allDbObjects = (await CurrentObjectDB.allDocs({ include_docs: true })).rows
+      const allDbDocs = allDbObjects.map(doc => doc.doc)
 
-      const allObjects = allDbObjects.map((doc) => {
+      const allObjects = allDbDocs.map((doc) => {
-        const objectDoc = doc.doc as unknown as I_ShortenedDocument
+        const objectDoc = doc as unknown as I_ShortenedDocument
 
         const pairedField = (this.inputDataBluePrint?.relationshipSettings?.connectedField) || ""
         let isDisabled = false
@@ -271,7 +272,7 @@ export default class Field_SingleRelationship extends BaseClass {
           pairedField: pairedField,
           tags: objectDoc.extraFields.find(e => e.id === "tags")?.value,
           // @ts-ignore
-          hierarchicalPath: this.getDocumentHieararchicalPath(objectDoc, allDbObjects)
+          hierarchicalPath: this.getDocumentHieararchicalPath(objectDoc, allDbDocs)
 
         }
       }) as unknown as I_FieldRelationship[]

src/components/fields/Field_SingleRelationship.vue

@@ -235,9 +235,10 @@ export default class Field_SingleRelationship extends BaseClass {
       const CurrentObjectDB = new PouchDB(this.inputDataBluePrint.relationshipSettings.connectedObjectType)
 
       const allDbObjects = (await CurrentObjectDB.allDocs({ include_docs: true })).rows
+      const allDbDocs = allDbObjects.map(doc => doc.doc)
 
-      const allObjects = allDbObjects.map((doc) => {
+      const allObjects = allDbDocs.map((doc) => {
-        const objectDoc = doc.doc as unknown as I_ShortenedDocument
+        const objectDoc = doc as unknown as I_ShortenedDocument
 
         const pairedField = (this.inputDataBluePrint?.relationshipSettings?.connectedField) || ""
         let isDisabled = false
@@ -265,7 +266,7 @@ export default class Field_SingleRelationship extends BaseClass {
           pairedField: pairedField,
           tags: objectDoc.extraFields.find(e => e.id === "tags")?.value,
           // @ts-ignore
-          hierarchicalPath: this.getDocumentHieararchicalPath(objectDoc, allDbObjects)
+          hierarchicalPath: this.getDocumentHieararchicalPath(objectDoc, allDbDocs)
         }
       }) as unknown as I_FieldRelationship[]
 

src/pages/DocumentDisplay.vue

@@ -4,28 +4,6 @@
   >
     <div class="row justify-start q-col-gutter-x-xl">
 
-      <q-dialog
-        v-model="deleteConfirmationDialog"
-        >
-        <q-card
-          dark
-        >
-          <q-card-section class="row items-center">
-            <span class="q-ml-sm">Are you sure want to delete <b>{{retrieveFieldValue(currentData,'name')}}</b>? <br> This action can not be reverted and the data will be lost <b>forever</b>.</span>
-          </q-card-section>
-
-          <q-card-actions align="right">
-            <q-btn flat label="Cancel" color="accent" v-close-popup />
-            <q-btn
-              outline
-              label="Delete"
-              color="secondary"
-              v-close-popup
-              @click="deleteDocument()" />
-          </q-card-actions>
-        </q-card>
-      </q-dialog>
-
       <div class="col-12 flex justify-end q-mb-lg q-mt-md">
         <q-btn
           color="primary"
@@ -48,12 +26,6 @@
           class="q-mr-xl"
           v-if="!editMode"
         />
-        <q-btn
-          v-if="!currentData.isNew"
-          color="secondary"
-          :label="`Delete ${bluePrintData.nameSingular}`"
-          @click="openDeleteDialog"
-        />
       </div>
 
       <div
@@ -527,8 +499,6 @@ export default class PageDocumentDisplay extends BaseClass {
     this.SSET_updateOpenedDocument(dataPass)
   }
 
-  deleteConfirmationDialog = false
-
   editMode = false
 
   /**
@@ -547,38 +517,6 @@ export default class PageDocumentDisplay extends BaseClass {
     if (this.determineKeyBind("editDocument") && !this.editMode) {
       this.toggleEditMode()
     }
-
-    // Delete dialog - CTRL + D
-    if (this.determineKeyBind("deleteDocument")) {
-      this.openDeleteDialog()
-    }
-  }
-
-  openDeleteDialog () {
-    this.deleteConfirmationDialog = true
-  }
-
-  async deleteDocument () {
-    this.deleteConfirmationDialog = false
-
-    const CurrentObjectDB = new PouchDB(this.$route.params.type)
-
-    let currentDocument = false as unknown as I_OpenedDocument
-    try {
-      currentDocument = await CurrentObjectDB.get(this.$route.params.id)
-    }
-    catch (error) {}
-
-    const documentCopy: I_OpenedDocument = extend(true, {}, this.currentData)
-    documentCopy._rev = currentDocument?._rev
-    // @ts-ignore
-    await CurrentObjectDB.remove(documentCopy)
-    // await cleanDatabases()
-
-    const dataCopy: I_OpenedDocument = extend(true, {}, this.currentData)
-
-    const dataPass = { doc: dataCopy, treeAction: true }
-    this.SSET_removeOpenedDocument(dataPass)
   }
 
   currentData = false as unknown as I_OpenedDocument

src/scripts/projectManagement/projectManagent.ts

@@ -19,6 +19,19 @@ export const createNewProject = async (projectName: string, vueRouter: any) => {
   const newProject = { _id: projectName }
   await ProjectDB.put(newProject)
 
+  /*eslint-disable */
+  // @ts-ignore
+  vueRouter.push({ path: "/" }).catch((e: {name: string}) => {
+    const errorName : string = e.name
+    if (errorName === "NavigationDuplicated") {
+      return
+    }
+    console.log(e)
+  })
+  /* eslint-enable */
+
+  await new Promise(resolve => setTimeout(resolve, 1000))
+
   /*eslint-disable */
   // @ts-ignore
   vueRouter.push({ path: "/project" }).catch((e: {name: string}) => {