Skip to content

Commit

Permalink
feat: show contexts
Browse files Browse the repository at this point in the history
Signed-off-by: Cleopatra Enjeck M <[email protected]>
  • Loading branch information
enjeck committed Feb 22, 2024
1 parent ae17ef0 commit 741b424
Show file tree
Hide file tree
Showing 5 changed files with 261 additions and 48 deletions.
3 changes: 3 additions & 0 deletions src/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ export default {
},
async created() {
await this.$store.dispatch('loadTablesFromBE')
await this.$store.dispatch('getAllContexts')
await this.$store.dispatch('loadViewsSharedWithMeFromBE')
this.routing(this.$router.currentRoute)
},
Expand All @@ -65,6 +66,8 @@ export default {
} else if (currentRoute.path.startsWith('/view/')) {
this.$store.commit('setActiveViewId', parseInt(currentRoute.params.viewId))
this.setPageTitle(this.$store.getters.activeView.title)
} else if (currentRoute.path.startsWith('/context/')) {
this.$store.commit('setActiveContextId', currentRoute.params.contextId)
}
},
setPageTitle(title) {
Expand Down
108 changes: 61 additions & 47 deletions src/pages/Context.vue
Original file line number Diff line number Diff line change
@@ -1,24 +1,25 @@
<template>
<div>
<div v-if="dataReady">
<div v-for="table in tables">
<div class="container">
<div v-if="dataReady && context">
<h1> Context info</h1>
<h2> {{ context.name }}</h2>
<p> {{ context.description }}</p>

<h1> Context Tables</h1>
<div v-for="table in contextTables">
<TableWrapper :table="table" :columns="tableData['columns' + table.id]"
:rows="tableData['rows' + table.id]" :view-setting="viewSetting"
@create-column="createColumn(false, table)"
@import="openImportModal(table, false)" @download-csv="downloadCSV(table, false)" />
</div>
<div v-for="view in views">
<CustomView :view="view"
:columns="tableData['view-columns' + view.id]" :rows="tableData['view-rows' + view.id]" :view-setting="viewSetting"
@create-column="createColumn(true, view)"
@import="openImportModal(view, true)" @download-csv="downloadCSV(view, true)" />
</div>

<MainModals />
</div>
</div>
</template>

<script>
import { NcActionRouter } from '@nextcloud/vue'
import MainModals from '../modules/modals/Modals.vue'
import Vuex, { mapState } from 'vuex'
import Vue from 'vue'
Expand All @@ -31,64 +32,66 @@ Vue.use(Vuex)
export default {
components: {
MainModals,
CustomView,
TableWrapper,
NcActionRouter,
},
data() {
return {
dataReady: false,
viewSetting: {},
context: null,
contextTables: [],
}
},
computed: {
...mapState(['tables', 'views']),
...mapState(['tables', 'contexts', 'activeContextId']),
tableData() {
const data = {}
this.tables.forEach((table, index) => {
const rowId = 'rows' + table.id
const colId = 'columns' + table.id
data[colId] = this.$store.state.data.columns[(table.id).toString()]
data[rowId] = this.$store.state.data.rows[(table.id).toString()]
})
this.views.forEach((view, index) => {
const rowId = 'view-rows' + view.id
const colId = 'view-columns' + view.id
data[colId] = this.$store.state.data.columns['view-' + view.id]
data[rowId] = this.$store.state.data.rows['view-' + view.id]
})
for (const [key, node] of Object.entries(this.context.nodes)) {
if (node.node_type) {
const rowId = 'rows' + node.node_id
const colId = 'columns' + node.node_id
data[colId] = this.$store.state.data.columns[(node.node_id).toString()]
data[rowId] = this.$store.state.data.rows[(node.node_id).toString()]
}
}
return data
},
},
async beforeMount() {
for (const table of this.tables) {
await this.$store.dispatch('loadColumnsFromBE', {
view: null,
tableId: table.id,
})
await this.$store.dispatch('loadRowsFromBE', {
viewId: null,
tableId: table.id,
})
}
for (const view of this.views) {
await this.$store.dispatch('loadColumnsFromBE', {
view,
tableId: null,
})
await this.$store.dispatch('loadRowsFromBE', {
viewId: view.id,
tableId: null,
})
}
watch: {
async activeContextId() {
await this.reload()
},
},
this.dataReady = true
async mounted() {
await this.reload()
},
methods: {
async loadContext() {
await this.$store.dispatch('getContext', this.activeContextId)
const index = this.contexts.findIndex(c => parseInt(c.id) === parseInt(this.activeContextId))
this.context = this.contexts[index]
for (const [key, node] of Object.entries(this.context.nodes)) {
if (node.node_type === 'table') {
const table = this.tables.find(table => table.id === node.node_id)
this.contextTables.push(table)
await this.$store.dispatch('loadColumnsFromBE', {
view: null,
tableId: node.node_id,
})
await this.$store.dispatch('loadRowsFromBE', {
viewId: null,
tableId: node.node_id,
})
}
}
},
createColumn(isView, element) {
emit('tables:column:create', { isView, element })
},
Expand All @@ -100,9 +103,20 @@ export default {
openImportModal(element, isView) {
emit('tables:modal:import', { element, isView })
},
async reload() {
if (this.activeContextId) {
await this.loadContext()
this.dataReady = true
}
},
},
}
</script>

<style scoped lang="scss"></style>
<style scoped lang="scss">
.container {
padding: 80px;
}
</style>
148 changes: 148 additions & 0 deletions src/pages/Contextpage.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
<template>
<div class="container">
<h1> Contexts </h1>
<div v-for="context in contexts" class="context">
<div>
<NcActionRouter :to="'/context/' + parseInt(context.id)"
:name="context.name" />
<p>Description: {{ context.description }}</p>
</div>
</div>
<h1> All Tables and Views</h1>
<div v-if="dataReady">
<div v-for="table in tables">
<TableWrapper :table="table" :columns="tableData['columns' + table.id]"
:rows="tableData['rows' + table.id]" :view-setting="viewSetting"
@create-column="createColumn(false, table)"
@import="openImportModal(table, false)" @download-csv="downloadCSV(table, false)" />
</div>
<div v-for="view in views">
<CustomView :view="view"
:columns="tableData['view-columns' + view.id]" :rows="tableData['view-rows' + view.id]" :view-setting="viewSetting"
@create-column="createColumn(true, view)"
@import="openImportModal(view, true)" @download-csv="downloadCSV(view, true)" />
</div>
<MainModals />
</div>
</div>
</template>

<script>
import { NcActionRouter } from '@nextcloud/vue'
import MainModals from '../modules/modals/Modals.vue'
import Vuex, { mapState } from 'vuex'
import Vue from 'vue'
import CustomView from '../modules/main/sections/View.vue'
import TableWrapper from '../modules/main/sections/TableWrapper.vue'
import { emit } from '@nextcloud/event-bus'
Vue.use(Vuex)
export default {
components: {
MainModals,
CustomView,
TableWrapper,
NcActionRouter,
},
data() {
return {
dataReady: false,
viewSetting: {},
}
},
computed: {
...mapState(['tables', 'views', 'contexts']),
tableData() {
const data = {}
this.tables.forEach((table, index) => {
const rowId = 'rows' + table.id
const colId = 'columns' + table.id
data[colId] = this.$store.state.data.columns[(table.id).toString()]
data[rowId] = this.$store.state.data.rows[(table.id).toString()]
})
this.views.forEach((view, index) => {
const rowId = 'view-rows' + view.id
const colId = 'view-columns' + view.id
data[colId] = this.$store.state.data.columns['view-' + view.id]
data[rowId] = this.$store.state.data.rows['view-' + view.id]
})
return data
},
},
async beforeMount() {
for (const table of this.tables) {
await this.$store.dispatch('loadColumnsFromBE', {
view: null,
tableId: table.id,
})
await this.$store.dispatch('loadRowsFromBE', {
viewId: null,
tableId: table.id,
})
}
for (const view of this.views) {
await this.$store.dispatch('loadColumnsFromBE', {
view,
tableId: null,
})
await this.$store.dispatch('loadRowsFromBE', {
viewId: view.id,
tableId: null,
})
}
this.dataReady = true
},
methods: {
createColumn(isView, element) {
emit('tables:column:create', { isView, element })
},
downloadCSV(element, isView) {
const rowId = !isView ? 'rows' + element.id : 'view-rows' + element.id
const colId = !isView ? 'columns' + element.id : 'view-columns' + element.id
this.downloadCsv(this.tableData[rowId], this.tableData[colId], element.title)
},
openImportModal(element, isView) {
emit('tables:modal:import', { element, isView })
},
},
}
</script>

<style scoped lang="scss">
li{
margin: 0;
padding: 0;
list-style: none;
}
.context {
padding: 20px;
border: 1px;
}
.container {
padding: 80px;
}
h1 {
color: red;
}
:deep(a strong) {
text-decoration: underline;
}
:deep(li span) {
padding: 0 !important;
color: blue;
font-size: 25px;
}
p {
margin-left: 40px;
}
</style>
13 changes: 12 additions & 1 deletion src/router.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { generateUrl } from '@nextcloud/router'
import MainViewWrapper from './pages/View.vue'
import MainDashboardWrapper from './pages/Table.vue'
import Startpage from './pages/Startpage.vue'
import Contextpage from './pages/Contextpage.vue'
import Context from './pages/Context.vue'

Vue.use(Router)
Expand All @@ -18,11 +19,21 @@ export default new Router({
},
{
path: '/context/',
component: Context,
component: Contextpage,
name: 'context',
},
{
path: '/context/row/:rowId',
component: Contextpage,
name: 'contextRow',
},
{
path: '/context/:contextId',
component: Context,
name: 'context',
},
{
path: '/context/:contextId/row/:rowId',
component: Context,
name: 'contextRow',
},
Expand Down
Loading

0 comments on commit 741b424

Please sign in to comment.