You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
2.3 KiB
88 lines
2.3 KiB
<template>
|
|
<div>
|
|
<h1 style="font-size: 3rem; margin: 1rem;">Active Schema</h1>
|
|
<h2 style="margin-left: 1rem;">(coordinated format)</h2>
|
|
<va-radio class="radio-switcher" v-for="(option, index) in viewOptions" :key="index" v-model="selectedOption"
|
|
:option="option"></va-radio>
|
|
<va-data-table :items="items" v-if="selectedOption === 'table-view'" />
|
|
<va-list v-else-if="selectedOption === 'list-view'">
|
|
<va-list-item v-for="(_, header, index) in items[0]" :key="index" class="header-list">
|
|
<va-list-item-section icon>
|
|
<va-icon name="circle" color="gray" size="small"></va-icon>
|
|
</va-list-item-section>
|
|
<va-list-item-section>
|
|
<va-list-item-label class="header-item" :lines="2">{{ header }}</va-list-item-label>
|
|
</va-list-item-section>
|
|
</va-list-item>
|
|
</va-list>
|
|
|
|
<div v-else class="card-row">
|
|
<div class="card-item flex lg4" v-for="(_, header, index) in items[0]" :key="index">
|
|
<va-card :bordered="false">
|
|
<va-card-content>{{ header }}</va-card-content>
|
|
</va-card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
import { defineComponent } from "vue";
|
|
export default defineComponent({
|
|
name: "active-schema-screen",
|
|
data() {
|
|
return {
|
|
columns: [],
|
|
viewOptions: [
|
|
"table-view",
|
|
"list-view",
|
|
"mosaic-view",
|
|
],
|
|
selectedOption: "list-view"
|
|
}
|
|
},
|
|
methods: {
|
|
async fetchColumns() {
|
|
fetch(`/api/v1/headers/`)
|
|
.then(res => res.json())
|
|
.then(data => this.columns = data)
|
|
.catch((e) => console.log(e))
|
|
|
|
},
|
|
},
|
|
mounted() {
|
|
this.fetchColumns();
|
|
},
|
|
computed: {
|
|
|
|
items() {
|
|
const dummytable = {};
|
|
for (let column of this.columns) {
|
|
dummytable[column.spreadsheet] = ""
|
|
}
|
|
return [dummytable,]
|
|
}
|
|
},
|
|
})
|
|
</script>
|
|
|
|
|
|
<style lang="css" scoped>
|
|
.radio-switcher {
|
|
margin: 1rem;
|
|
}
|
|
|
|
.header-item {
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
.card-row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.card-item {
|
|
margin: 1rem;
|
|
}
|
|
</style> |