From 106e432016f1dbede1f5ccd46e8578ec41ec046f Mon Sep 17 00:00:00 2001
From: Elvanos <xfenix@seznam.cz>
Date: Fri, 19 Mar 2021 21:59:07 +0100
Subject: [PATCH] 0.1.4 Final RC (ui edits)

---
 package-lock.json           |  84 ++++++++-
 package.json                |   4 +-
 quasar.conf.js              |   3 +-
 src/boot/apex.js            |   4 +
 src/pages/ProjectScreen.vue | 331 +++++++++++++++++++++++++++++++++++-
 5 files changed, 419 insertions(+), 7 deletions(-)
 create mode 100644 src/boot/apex.js

diff --git a/package-lock.json b/package-lock.json
index 7f1cbf6..df25414 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "fantasiaarchive",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -2497,6 +2497,19 @@
         "picomatch": "^2.0.4"
       }
     },
+    "apexcharts": {
+      "version": "3.26.0",
+      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.26.0.tgz",
+      "integrity": "sha512-zdYHs3k3tgmCn1BpYLj7rhGEndBYF33Pq1+g0ora37xAr+3act5CJrpdXM2jx2boVUyXgavoSp6sa8WpK7RkSA==",
+      "requires": {
+        "svg.draggable.js": "^2.2.2",
+        "svg.easing.js": "^2.0.0",
+        "svg.filter.js": "^2.0.2",
+        "svg.pathmorphing.js": "^0.1.3",
+        "svg.resize.js": "^1.4.3",
+        "svg.select.js": "^3.0.1"
+      }
+    },
     "app-builder-bin": {
       "version": "3.5.10",
       "resolved": "https://registry.npmjs.org/app-builder-bin/-/app-builder-bin-3.5.10.tgz",
@@ -15453,6 +15466,70 @@
         "has-flag": "^3.0.0"
       }
     },
+    "svg.draggable.js": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
+      "integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
+      "requires": {
+        "svg.js": "^2.0.1"
+      }
+    },
+    "svg.easing.js": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
+      "integrity": "sha1-iqmUawqOJ4V6XEChDrpAkeVpHxI=",
+      "requires": {
+        "svg.js": ">=2.3.x"
+      }
+    },
+    "svg.filter.js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
+      "integrity": "sha1-kQCOFROJ3ZIwd5/L5uLJo2LRwgM=",
+      "requires": {
+        "svg.js": "^2.2.5"
+      }
+    },
+    "svg.js": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
+      "integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA=="
+    },
+    "svg.pathmorphing.js": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
+      "integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
+      "requires": {
+        "svg.js": "^2.4.0"
+      }
+    },
+    "svg.resize.js": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
+      "integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
+      "requires": {
+        "svg.js": "^2.6.5",
+        "svg.select.js": "^2.1.2"
+      },
+      "dependencies": {
+        "svg.select.js": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
+          "integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
+          "requires": {
+            "svg.js": "^2.2.5"
+          }
+        }
+      }
+    },
+    "svg.select.js": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
+      "integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
+      "requires": {
+        "svg.js": "^2.6.5"
+      }
+    },
     "svgo": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz",
@@ -16640,6 +16717,11 @@
       "integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg==",
       "dev": true
     },
+    "vue-apexcharts": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/vue-apexcharts/-/vue-apexcharts-1.6.0.tgz",
+      "integrity": "sha512-sT6tuVTLBwfH3TA7azecDNS/W70bmz14ZJI7aE7QIqcG9I6OywyH7x3hcOeY1v1DxttI8Svc5RuYj4Dd+A5F4g=="
+    },
     "vue-class-component": {
       "version": "7.2.6",
       "resolved": "https://registry.npmjs.org/vue-class-component/-/vue-class-component-7.2.6.tgz",
diff --git a/package.json b/package.json
index b735070..9043a8b 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
   "dependencies": {
     "@quasar/extras": "^1.0.0",
     "@types/fs-extra": "^8.1.0",
+    "apexcharts": "^3.26.0",
     "axios": "^0.18.1",
     "core-js": "^3.6.5",
     "katex": "^0.12.0",
@@ -29,6 +30,7 @@
     "quasar-tiptap": "^1.9.1",
     "tiptap": "^1.31.0",
     "tiptap-extensions": "^1.34.0",
+    "vue-apexcharts": "^1.6.0",
     "vue-class-component": "^7.2.2",
     "vue-codemirror": "^4.0.6",
     "vue-i18n": "^8.0.0",
@@ -77,4 +79,4 @@
     "npm": ">= 6.13.4",
     "yarn": ">= 1.21.1"
   }
-}
\ No newline at end of file
+}
diff --git a/quasar.conf.js b/quasar.conf.js
index ee160ad..c695488 100644
--- a/quasar.conf.js
+++ b/quasar.conf.js
@@ -27,7 +27,8 @@ module.exports = configure(function (ctx) {
     boot: [
       "i18n",
       "axios",
-      'notify-defaults'
+      'notify-defaults',
+      'apex'
     ],
 
     // https://quasar.dev/quasar-cli/quasar-conf-js#Property%3A-css
diff --git a/src/boot/apex.js b/src/boot/apex.js
new file mode 100644
index 0000000..d9ef574
--- /dev/null
+++ b/src/boot/apex.js
@@ -0,0 +1,4 @@
+import Vue from "vue"
+import VueApexCharts from "vue-apexcharts"
+
+Vue.component("apexchart", VueApexCharts)
diff --git a/src/pages/ProjectScreen.vue b/src/pages/ProjectScreen.vue
index c04d6af..0d9500c 100644
--- a/src/pages/ProjectScreen.vue
+++ b/src/pages/ProjectScreen.vue
@@ -1,8 +1,94 @@
 <template>
   <q-page class="column items-center justify-center">
 
+      <!-- New document dialog -->
+      <newDocumentDialog
+        :dialog-trigger="newObjectDialogTrigger"
+        @trigger-dialog-close="newObjectDialogClose"
+      />
+
       <div class="col-12">
-        <h3>Project screen for {{projectName}}</h3>
+        <h5 class="mainProjectSubTitle">Project screen for </h5>
+      </div>
+      <div class="col-12">
+        <h2 class="mainProjectTitle"> {{projectName}}</h2>
+      </div>
+
+      <div>
+        <q-card
+          dark
+          class="documentGraphWrapper"
+        >
+          <transition
+            enter-active-class="animated fadeIn"
+            leave-active-class="animated fadeOut"
+            :duration="600"
+          >
+            <q-card-section
+              v-show="!graphDataLoaded"
+              transition-show="scale"
+              transition-hide="scale"
+              style="height: 500px;"
+              class="flex justify-center flex-center"
+            >
+              <q-spinner-gears
+                color="primary"
+                size="160px"
+              />
+            </q-card-section>
+          </transition>
+
+          <transition
+            enter-active-class="animated fadeIn"
+            leave-active-class="animated fadeOut"
+            :duration="600"
+          >
+            <q-card-section
+              v-show="graphDataShowing && allDocuments === 0"
+              transition-show="scale"
+              transition-hide="scale"
+              style="height: 500px;"
+              class="flex justify-center flex-center column"
+            >
+            <div class="row justify-center flex-center">
+              <div class="col-12 q-mb-xl">
+                <h6 class="q-my-xs text-center">Welcome to your new project! Feel free to look around or...</h6>
+              </div>
+              <div class="col-12 q-mt-md q-mb-xl text-center">
+                <q-btn
+                  color="primary"
+                  size="lg"
+                  outline
+                  class="q-px-xl q-py-xs"
+                  @click="newObjectAssignUID"
+                >
+                Create your first document!
+                </q-btn>
+              </div>
+            </div>
+
+            </q-card-section>
+          </transition>
+
+          <transition
+            enter-active-class="animated fadeIn"
+            leave-active-class="animated fadeOut"
+            appear
+            :duration="600"
+          >
+            <q-card-section
+              v-show="graphDataShowing && allDocuments > 0"
+              transition-show="scale"
+              transition-hide="scale"
+            >
+              <h5 class="q-px-lg q-my-lg">
+                Document distribution - <span class="text-bold text-primary">{{allDocuments}}</span> total
+              </h5>
+              <apexchart v-if="graphDataShowing" type="bar" height="350" width="900" :options="chartOptions" :series="series" />
+            </q-card-section>
+          </transition>
+
+        </q-card>
       </div>
 
   </q-page>
@@ -12,19 +98,256 @@
 import { Component } from "vue-property-decorator"
 
 import BaseClass from "src/BaseClass"
-import { Loading } from "quasar"
-
+import { Loading, colors } from "quasar"
+import PouchDB from "pouchdb"
+import newDocumentDialog from "src/components/dialogs/NewDocument.vue"
 import { retrieveCurrentProjectName } from "src/scripts/projectManagement/projectManagent"
 
 @Component({
-  components: { }
+  components: {
+    newDocumentDialog
+  }
 })
 export default class ProjectScreen extends BaseClass {
   projectName = ""
 
+  graphDataLoaded = false
+  graphDataShowing = false
+
+  allDocuments = 0
+
   async created () {
     this.projectName = await retrieveCurrentProjectName()
+    this.loadGraphData().catch(e => console.log(e))
     Loading.hide()
   }
+
+  async loadGraphData () {
+    if (this.SGET_allBlueprints.length === 0) {
+      await this.sleep(1000)
+      this.loadGraphData().catch(e => console.log(e))
+      return
+    }
+
+    this.populateChartOptions()
+
+    const allBlueprings = this.SGET_allBlueprints
+
+    // Process all documents, build hieararchy out of the and sort them via name and custom order
+    for (const blueprint of allBlueprings) {
+      const CurrentObjectDB = new PouchDB(blueprint._id)
+      const allDocuments = await CurrentObjectDB.allDocs({ include_docs: true })
+      const docCount = allDocuments.rows.length
+
+      this.allDocuments = this.allDocuments + docCount
+
+      this.series[0].data.push(docCount)
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+      this.chartOptions.xaxis.categories.push(blueprint.namePlural)
+    }
+    this.graphDataLoaded = true
+
+    await this.sleep(600)
+    this.graphDataShowing = true
+  }
+
+  series = [{
+    name: "Documents",
+    data: [] as number[]
+  }]
+
+  chartOptions = {} as any
+
+  populateChartOptions () {
+    this.chartOptions = {
+      colors: [colors.getBrand("primary")],
+      animations: {
+        enabled: true,
+        easing: "easeinout",
+        speed: 1000
+      },
+      grid: {
+        show: false
+      },
+      states: {
+        hover: {
+          filter: {
+            type: "none"
+          }
+        },
+        active: {
+          filter: {
+            type: "none"
+          }
+        }
+      },
+      chart: {
+        height: 350,
+        type: "bar",
+        toolbar: {
+          show: false
+        }
+      },
+      plotOptions: {
+        bar: {
+          borderRadius: 4,
+          dataLabels: {
+            position: "center" // top, center, bottom
+          }
+        }
+      },
+      dataLabels: {
+        dropShadow: {
+          enabled: true,
+          top: 1,
+          left: 1,
+          blur: 1,
+          color: "#000",
+          opacity: 0.65
+        },
+        enabled: true,
+        formatter: function (val: string) {
+          return val
+        },
+        offsetY: 20,
+        style: {
+          fontSize: "14px",
+          fontFamily: "Roboto, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif;",
+          colors: ["#fff"]
+        }
+      },
+      xaxis: {
+        categories: [] as string[],
+        position: "bottom",
+        labels: {
+          style: {
+            fontFamily: "Roboto, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif;",
+            colors: colors.getBrand("accent"),
+            cssClass: "docCountLabel"
+          }
+        },
+        axisBorder: {
+          show: true
+        },
+        axisTicks: {
+          show: false
+        },
+        tooltip: {
+          enabled: false
+        },
+        crosshairs: {
+
+          fill: {
+            type: "gradient",
+            gradient: {
+              colorFrom: "transparent",
+              colorTo: "transparent",
+              stops: [0, 100],
+              opacityFrom: 0,
+              opacityTo: 0
+            }
+          }
+        }
+      },
+      yaxis: {
+        axisBorder: {
+          show: false
+        },
+        tooltip: {
+          enabled: false
+        },
+        axisTicks: {
+          show: false
+        },
+        labels: {
+          show: false,
+          formatter: function (val: string) {
+            return val
+          },
+          style: {
+            fontSize: "14px",
+            fontFamily: "Roboto, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif;",
+            colors: "#dcdcdc"
+          }
+        }
+      }
+    }
+  }
+
+  /****************************************************************/
+  // New document dialog
+  /****************************************************************/
+
+  newObjectDialogTrigger: string | false = false
+  newObjectDialogClose () {
+    this.newObjectDialogTrigger = false
+  }
+
+  newObjectAssignUID () {
+    this.newObjectDialogTrigger = this.generateUID()
+  }
 }
 </script>
+
+<style  lang="scss">
+
+.mainProjectTitle {
+  color: var(--q-color-dark);
+}
+
+body.body--dark {
+  .mainProjectTitle {
+    color: var(--q-color-primary);
+  }
+}
+
+.apexcharts-tooltip {
+  display: none !important;
+}
+
+.apexcharts-canvas {
+  padding-bottom: 50px;
+  box-sizing: content-box !important;
+
+  path {
+    stroke: none !important;
+  }
+
+  svg {
+    height: 400px;
+  }
+
+  .apexcharts-series path {
+    fill: var(--q-color-primary);
+  }
+}
+
+.documentGraphWrapper {
+  min-width: 950px;
+  min-height: 500px;
+  max-height: 500px;
+  max-width: 950px;
+  overflow: hidden;
+}
+
+.docCountLabel {
+  font-size: 15px;
+  font-weight: 500;
+  letter-spacing: 0.3px;
+}
+</style>
+
+<style scoped lang="scss">
+
+.mainProjectSubTitle {
+  margin-top: 0;
+  margin-bottom: 0;
+  opacity: 0.8;
+}
+
+.mainProjectTitle {
+  position: relative;
+  margin-top: 10px;
+  font-weight: 500;
+}
+</style>