0.1.8 - added simple project settings (renaming)

src/BaseClass.ts

@@ -74,7 +74,7 @@ export default class BaseClass extends Vue {
   @FloatingWindows.Getter("getAdvSearchWindowVisible") SGET_getAdvSearchWindowVisible!: string
   @FloatingWindows.Mutation("setAdvSearchWindowVisible") SSET_setAdvSearchWindowVisible!: () => void
 
-  @FloatingWindows.Getter("getNoteCorkboardhWindowVisible") SGET_getNoteCorkboardhWindowVisible!: string
+  @FloatingWindows.Getter("getNoteCorkboardWindowVisible") SGET_getNoteCorkboardWindowVisible!: string
   @FloatingWindows.Mutation("setNoteCorkboardWindowVisible") SSET_setNoteCorkboardWindowVisible!: () => void
 
   @FloatingWindows.Getter("getDocumentPreviewVisible") SGET_getDocumentPreviewVisible!: string

src/components/appHeader/AppControl.vue

@@ -98,8 +98,14 @@
 
     <!-- Delete tag dialog -->
     <massDeleteDocumentsCheckDialog
-      :dialog-trigger="massDocumentDelteDialogTrigger"
-      @trigger-dialog-close="massDocumentDelteDialogClose"
+      :dialog-trigger="massDocumentDeleteDialogTrigger"
+      @trigger-dialog-close="massDocumentDeleteDialogClose"
+    />
+
+    <!-- Project settings dialog -->
+    <projectSettingsdDialog
+      :dialog-trigger="projectSettingsDialogTrigger"
+      @trigger-dialog-close="projectSettingsDialogClose"
     />
 
     <q-btn-group
@@ -239,7 +245,22 @@
               </q-item-section>
             </q-item>
 
-              <q-separator dark />
+            <q-separator dark />
+
+            <q-item
+              v-close-popup
+              clickable
+              active
+              active-class="bg-gunmetal-light text-cultured"
+              class="noHigh"
+              @click="projectSettingsDialogAssignUID"
+              :disable="!projectExists || isFrontpage"
+            >
+              <q-item-section>Project settings</q-item-section>
+              <q-item-section avatar>
+                <q-icon name="mdi-book-cog-outline" />
+              </q-item-section>
+            </q-item>
 
             <q-item clickable>
               <q-item-section>Advanced project tools</q-item-section>
@@ -342,7 +363,7 @@
             <q-item
               clickable
               v-close-popup
-              @click="massDocumentDelteDialogAssignUID"
+              @click="massDocumentDeleteDialogAssignUID"
               :disable="!projectExists || isFrontpage"
               >
               <q-item-section class="text-secondary"><b>Mass delete documents</b></q-item-section>
@@ -553,6 +574,7 @@ import tipsTricksTriviaDialog from "src/components/dialogs/TipsTricksTrivia.vue"
 import licenseDialog from "src/components/dialogs/License.vue"
 import exportProjectDialog from "src/components/dialogs/ExportProject.vue"
 import massDeleteDocumentsCheckDialog from "src/components/dialogs/MassDeleteDocumentsCheck.vue"
+import projectSettingsdDialog from "src/components/dialogs/ProjectSettings.vue"
 
 import { Loading, QSpinnerGears } from "quasar"
 import { saveProject } from "src/scripts/projectManagement/projectManagent"
@@ -577,7 +599,8 @@ import appLogo from "src/assets/appLogo.png"
     licenseDialog,
     repairProjectDialog,
     exportProjectDialog,
-    massDeleteDocumentsCheckDialog
+    massDeleteDocumentsCheckDialog,
+    projectSettingsdDialog
   }
 })
 export default class AppControl extends BaseClass {
@@ -893,13 +916,26 @@ export default class AppControl extends BaseClass {
   // Mass delete documents dialog
   /****************************************************************/
 
-  massDocumentDelteDialogTrigger: string | false = false
-  massDocumentDelteDialogClose () {
-    this.massDocumentDelteDialogTrigger = false
+  massDocumentDeleteDialogTrigger: string | false = false
+  massDocumentDeleteDialogClose () {
+    this.massDocumentDeleteDialogTrigger = false
   }
 
-  massDocumentDelteDialogAssignUID () {
-    this.massDocumentDelteDialogTrigger = this.generateUID()
+  massDocumentDeleteDialogAssignUID () {
+    this.massDocumentDeleteDialogTrigger = this.generateUID()
+  }
+
+  /****************************************************************/
+  // Project settings dialog
+  /****************************************************************/
+
+  projectSettingsDialogTrigger: string | false = false
+  projectSettingsDialogClose () {
+    this.projectSettingsDialogTrigger = false
+  }
+
+  projectSettingsDialogAssignUID () {
+    this.projectSettingsDialogTrigger = this.generateUID()
   }
 }
 </script>

src/components/dialogs/ProjectSettings.vue

@@ -0,0 +1,97 @@
+<template>
+    <q-dialog
+      v-model="dialogModel"
+      @before-hide="triggerDialogClose"
+      no-route-dismiss
+      >
+      <q-card dark class="projectSettingsDialog">
+         <q-card-section class="column justify-center items-center">
+          <h6 class="text-center q-my-sm">Project settings for {{projectName}}</h6>
+        </q-card-section>
+
+        <q-card-section>
+          <div class="row justify-center">
+            <q-input
+              filled
+              dark
+              style="width: 400px;"
+              label="Project name"
+              v-model="projectName"
+            />
+          </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
+            flat
+            label="Save project settings"
+            color="primary"
+            @click="saveProjectSettings" />
+        </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 { changeCurrentProjectSettings } from "src/scripts/projectManagement/projectManagent"
+
+@Component({
+  components: { }
+})
+export default class ProjectSettingsDialog extends DialogBase {
+  /**
+   * React to dialog opening request
+   */
+  @Watch("dialogTrigger")
+  openDialog (val: string|false) {
+    if (val) {
+      if (this.SGET_getDialogsState) {
+        return
+      }
+      this.SSET_setDialogState(true)
+      this.dialogModel = true
+
+      this.reloadProjectSettings()
+    }
+  }
+
+  projectName = ""
+
+  reloadProjectSettings () {
+    this.projectName = this.SGET_getProjectName
+  }
+
+  async saveProjectSettings () {
+    const newSettings = {
+      projectName: this.projectName
+    }
+
+    await changeCurrentProjectSettings(newSettings)
+    this.SSET_setProjectName(this.projectName)
+
+    this.triggerDialogClose()
+  }
+}
+</script>
+
+<style lang="scss">
+
+.renameTagDialog {
+  min-width: 700px;
+
+  .q-field__messages {
+    font-weight: 600;
+    font-size: 14px;
+  }
+}
+</style>

src/pages/ProjectScreen.vue

@@ -51,10 +51,14 @@
       </div>
 
     <div class="projectContentWrapper">
-      <div class="documentGraphParent">
+      <div
+        class="documentGraphParent"
+        :class="{'-fullsize': !graphDataShowing}"
+        >
         <q-card
           dark
           class="documentGraphWrapper"
+          :class="{'-fullsize': !graphDataShowing}"
         >
           <transition
             enter-active-class="animated fadeIn"
@@ -128,7 +132,7 @@
         </q-card>
       </div>
 
-      <div class="lastOpenedList" v-if="allDocuments > 0">
+      <div class="lastOpenedList" v-if="allDocuments > 0 && graphDataShowing">
         <q-card
           dark
         >
@@ -785,6 +789,11 @@ body.body--dark {
   overflow-y: hidden;
   max-width: calc(100% - 110px);
   width: 990px;
+
+  &.-fullsize {
+    width: 100%;
+    max-width: 100%;
+  }
 }
 
 .documentGraphWrapper {
@@ -792,6 +801,10 @@ body.body--dark {
   max-height: 525px;
   overflow: hidden;
   width: 990px;
+
+  &.-fullsize {
+    width: 100%;
+  }
 }
 
 .lastOpenedList {

src/scripts/projectManagement/projectManagent.ts

@@ -22,7 +22,10 @@ export const createNewProject = async (projectName: string, vueRouter: any, quas
   }
 
   window.FA_dbs["project-data"] = new PouchDB("project-data")
-  const newProject = { _id: projectName }
+  const newProject = {
+    _id: "projectSetup",
+    projectName: projectName
+  }
 
   // eslint-disable-next-line @typescript-eslint/no-unsafe-call
   window.FA_dbs["project-data"].put(newProject)
@@ -314,7 +317,28 @@ export const retrieveCurrentProjectName = async () => {
   const projectData = await window.FA_dbs["project-data"].allDocs({ include_docs: true })
 
   // eslint-disable-next-line @typescript-eslint/no-unsafe-return
-  return (projectData?.rows[0]?.id) || ""
+
+  const projectName: string = (projectData?.rows[0]?.doc?.projectName) || projectData?.rows[0]?.doc?._id
+
+  return (projectName) || ""
+}
+
+/**
+ * Change current project name
+ */
+export const changeCurrentProjectSettings = async (input: {projectName: string}) => {
+  if (!window.FA_dbs) {
+    // @ts-ignore
+    window.FA_dbs = {}
+  }
+  window.FA_dbs["project-data"] = new PouchDB("project-data")
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+  const projectData = await window.FA_dbs["project-data"].allDocs({ include_docs: true })
+
+  projectData.rows[0].doc.projectName = input.projectName
+
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+  await window.FA_dbs["project-data"].put(projectData.rows[0].doc)
 }
 
 /**