2021-01-31 02:43:13 +13:00
|
|
|
<template>
|
|
|
|
<q-page class="column items-center justify-center">
|
|
|
|
|
2021-03-20 09:59:07 +13:00
|
|
|
<!-- New document dialog -->
|
|
|
|
<newDocumentDialog
|
|
|
|
:dialog-trigger="newObjectDialogTrigger"
|
|
|
|
@trigger-dialog-close="newObjectDialogClose"
|
|
|
|
/>
|
|
|
|
|
|
|
|
<div class="col-12">
|
|
|
|
<h5 class="mainProjectSubTitle">Project screen for </h5>
|
|
|
|
</div>
|
2021-01-31 02:43:13 +13:00
|
|
|
<div class="col-12">
|
2021-03-20 09:59:07 +13:00
|
|
|
<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>
|
2021-01-31 02:43:13 +13:00
|
|
|
</div>
|
|
|
|
|
|
|
|
</q-page>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
|
|
|
import { Component } from "vue-property-decorator"
|
|
|
|
|
|
|
|
import BaseClass from "src/BaseClass"
|
2021-03-20 09:59:07 +13:00
|
|
|
import { Loading, colors } from "quasar"
|
|
|
|
import PouchDB from "pouchdb"
|
|
|
|
import newDocumentDialog from "src/components/dialogs/NewDocument.vue"
|
2021-03-04 13:27:07 +13:00
|
|
|
import { retrieveCurrentProjectName } from "src/scripts/projectManagement/projectManagent"
|
2021-02-26 14:50:46 +13:00
|
|
|
|
2021-01-31 02:43:13 +13:00
|
|
|
@Component({
|
2021-03-20 09:59:07 +13:00
|
|
|
components: {
|
|
|
|
newDocumentDialog
|
|
|
|
}
|
2021-01-31 02:43:13 +13:00
|
|
|
})
|
|
|
|
export default class ProjectScreen extends BaseClass {
|
|
|
|
projectName = ""
|
|
|
|
|
2021-03-20 09:59:07 +13:00
|
|
|
graphDataLoaded = false
|
|
|
|
graphDataShowing = false
|
|
|
|
|
|
|
|
allDocuments = 0
|
|
|
|
|
2021-01-31 02:43:13 +13:00
|
|
|
async created () {
|
2021-02-26 14:50:46 +13:00
|
|
|
this.projectName = await retrieveCurrentProjectName()
|
2021-03-20 09:59:07 +13:00
|
|
|
this.loadGraphData().catch(e => console.log(e))
|
2021-03-08 11:07:40 +13:00
|
|
|
Loading.hide()
|
2021-01-31 02:43:13 +13:00
|
|
|
}
|
2021-03-20 09:59:07 +13:00
|
|
|
|
|
|
|
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()
|
|
|
|
}
|
2021-01-31 02:43:13 +13:00
|
|
|
}
|
|
|
|
</script>
|
2021-03-20 09:59:07 +13:00
|
|
|
|
|
|
|
<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>
|