Commit bb01c27a authored by Anton Koch's avatar Anton Koch
Browse files

Merge branch '574-create-projects-page' into 'master'

Resolve "create projects page"

See merge request !150
parents b4c8d8fa f02fc0f1
<template lang="pug">
.projects-overlay-content
// recent activities -----------------------------------------------------------------------------------------------
mb-expansion-item(
:label="'Recent activities'"
:group="model.expansionItem.main"
)
.q-mt-md(v-for="n in 7") abc
// acl -------------------------------------------------------------------------------------------------------------
mb-expansion-item(
:label="'ACL'"
:group="model.expansionItem.main"
:no-border="true"
)
mb-expansion-item(
:label="'Group 1'"
:group="model.expansionItem.sub"
:slim-header="true"
)
| Members
mb-expansion-item(
:label="'Group 2'"
:group="model.expansionItem.sub"
:slim-header="true"
:no-border="true"
)
| Members
//
| {{ data }}
</template>
<script>
import MbExpansionItem from 'components/MbComponents/MbExpansionItem'
import MbHeadline from 'components/MbComponents/MbHeadline'
export default {
name: 'ProjectsOverlayContent',
components: { MbHeadline, MbExpansionItem },
props: ['data'],
data () {
return {
model: {
expansionItem: {
main: 'main',
sub: 'sub'
}
}
}
}
}
</script>
<style scoped lang="stylus">
</style>
......@@ -22,7 +22,7 @@
@click="expand = !expand"
)
// Tooltop for all devices with mouse input
mb-tooltip {{ title }}
mb-tooltip(v-if="clamped") {{ title }}
// Icon and Position
q-icon(v-if="iconName" :class="[iconPosition === 'left' ? 'order-first' : 'order-last']" :name="iconName" size="sm")
......
......@@ -8,6 +8,7 @@ q-btn(
:flat="!active && !background && !outline"
:ripple="false"
:icon="iconName"
:disable="disable"
unelevated
)
mb-tooltip(v-if="tooltip") {{tooltip}}
......@@ -23,7 +24,8 @@ export default {
background: { type: Boolean, default: false },
outline: { type: Boolean, default: false },
size: { type: String, default: 'md' },
tooltip: { type: String }
tooltip: { type: String },
disable: { type: Boolean }
},
computed: {
color () {
......
<template lang="pug">
div
// table top ---------------------------------------------------------------------------------------------------------
.row.full-width.q-mb-sm
.col-xs-12.col-sm-6(:style="{width: forceGridMode ? '100%!important' : ''}")
// filter
mb-input-text(
debounce="300"
v-model="filter"
placeholder="Search"
icon-name="search"
)
// table title, add button -------------------------------------------------------------------------------------------
table-top-module(
:title="title"
:no-add="noAdd"
)
.col-xs-12.col-sm-6(
:style="{width: forceGridMode ? '100%!important' : ''}"
:class="{'q-mt-md': forceGridMode || $q.screen.lt.sm}"
)
.flex(:class="[$q.screen.lt.sm ? 'justify-between q-mb-sm': 'justify-end']")
// mode toggle
.q-mr-md(v-if="!forceGridMode")
mb-icon-radio-btn(
:icons="['view_headline', 'grid_view']",
@input="toggleMode"
)
// column select
mb-select(
:options="table.columns.all"
:multiple="true",
:model="table.columns.visible"
:option-value="'name'",
:display-value="$q.lang.table.columns"
:class="{'full-width': forceGridMode}"
@input="onColumnSelectInput"
)
slot(name="icon-slot")
// search bar, table settings ----------------------------------------------------------------------------------------
table-below-top-module(
:visible-columns="visibleColumns"
:force-grid-mode="forceGridMode"
:columns-select="columnsSelect"
@filter="onFilter"
@columnSelect="onColumnSelectInput"
@toggleMode="onToggleMode"
)
// table -------------------------------------------------------------------------------------------------------------
q-table.bg-transparent(
:columns="table.columns.all"
:data="selected.collection ? filteredData : table.data"
q-table(
:data="data"
:columns="columnsData"
row-key="_id"
:pagination.sync="tablePagination"
:rows-per-page-options="[15]"
unless
:filter="filter"
@request="onRequest"
:grid="forceGridMode || gridMode"
grid-header
:visible-columns="visibleColumns"
binary-state-sort
flat
row-key="name"
:visible-columns="table.columns.visible"
:filter="filter"
:pagination="initialPagination"
:hide-pagination="true"
)
// pagination ------------------------------------------------------------------------------------------------------
template(v-slot:pagination="scope")
table-pagination-module(
:scope="scope"
@input="onRowsPerPage"
)
// customized table header -----------------------------------------------------------------------------------------
template(v-slot:header="props")
q-tr(
table-header-module(
:props="props"
:class="{'mb-tr-condensed': gridMode}"
:gridMode="gridMode"
)
q-th(
v-for="col in props.cols"
:key="col.name"
:props="props"
:class="{'mb-th-condensed q-mr-md': gridMode}"
)
span.inline-block(:class="[gridMode ? '' : 'q-pb-sm']")
span.inline-block.mb-bg-bg-light.q-px-md.q-py-sm.q-mt-md.q-mb-lg
| {{ col.label }}
// customized table cells ------------------------------------------------------------------------------------------
template(v-slot:body-cell="props")
mb-td(
@click.native="onTableData(props)"
mb-td(:props="props")
// actions ---------------------------------------------------------------------------------------------------------
template(v-slot:body-cell-actions="props")
table-body-cell-actions-module(
:props="props"
:selected-collection="selected.collection"
:no-delete="noDelete"
:resource-alias="resourceAlias"
:resource="resource"
@deleteItem="onDeleteItem"
@itemInfo="onItemInfo"
)
confirm-delete(:delete-item="deleteItem" @remove="remove")
// customized grid cards -------------------------------------------------------------------------------------------
template(v-slot:item="props")
div.q-pa-sm.col-xs-12.col-sm-6.col-md-4.col-lg-3(
:style="{width: forceGridMode ? '100%!important' : ''}"
table-card-module(
:props="props"
:force-grid-mode="forceGridMode"
:card-style="cardStyle"
:visible-columns="columns"
)
mb-card.q-mb-md(
:data="props"
:card-style="cardStyle || 'grid'"
:visible-columns="table.columns.visible"
)
// dialog overlay ------------------------------------------------------------------------------------------
// dialog overlay ----------------------------------------------------------------------------------------------------
mb-dialog-overlay(
v-if="selected.group"
v-model="model.overlay.show"
v-if="selected.row"
v-model="model.overlay"
:value="selected.row"
)
template(slot="overlay-header")
| {{ selected.group.row.title }}
template(slot="overlay-body")
group-overlay-content(:data="selected.group")
template(v-slot:overlay-header)
| {{ selected.row.row.title }}
template(v-slot:overlay-body)
component(
:is="overlayContent"
:data="selected.row"
)
</template>
<script>
import MbTd from 'components/MbComponents/MbTable/MbTableData/MbTd'
import MbTableProvider from 'components/MbComponents/MbTable/mb-table-data-provider'
import GroupOverlayContent from 'components/MbComponents/MbDialogOverlay/OverlayContents/Groups/GroupOverlayContent'
export default {
name: 'MbTable',
extends: MbTableProvider,
components: {
GroupOverlayContent,
MbTd
},
data () {
return {
model: { overlay: { show: false } },
selected: {
collection: undefined,
group: undefined
import ConfirmDelete from './../../AntonPresets/ConfirmDelete'
import MbTd from 'components/MbComponents/MbTable/MbTableData/MbTd'
import MbCard from 'components/MbComponents/MbCard/MbCard'
import MbDialogOverlay from 'components/MbComponents/MbDialogOverlay/MbDialogOverlay'
import ProjectsOverlayContent
from 'components/MbComponents/MbDialogOverlay/OverlayContents/Projects/ProjectsOverlayContent'
import TablePaginationModule from 'components/MbComponents/MbTable/Modules/TablePaginationModule'
import TableHeaderModule from 'components/MbComponents/MbTable/Modules/TableHeaderModule'
import TableBodyCellActionsModule from 'components/MbComponents/MbTable/Modules/TableBodyCellActionsModule'
import TableTopModule from 'components/MbComponents/MbTable/Modules/TableTopModule'
import TableBelowTopModule from 'components/MbComponents/MbTable/Modules/TableBelowTopModule'
import TableCardModule from 'components/MbComponents/MbTable/Modules/TableCardModule'
export default {
name: 'MbTable',
components: {
TableCardModule,
TableBelowTopModule,
TableTopModule,
TableBodyCellActionsModule,
TableHeaderModule,
TablePaginationModule,
ProjectsOverlayContent,
MbDialogOverlay,
MbCard,
MbTd,
ConfirmDelete
},
props: {
data: Array,
title: String,
resource: String,
resourceAlias: String,
columns: Array,
noAdd: Boolean,
noDelete: Boolean,
page: String,
cardStyle: Boolean,
forceGridMode: Boolean,
pagination: Object
},
data () {
return {
tablePagination: undefined,
deleteItem: null,
filter: '',
loading: false,
visibleColumns: [],
model: {
overlay: false,
rowsPerPage: 10
},
selected: {
row: undefined,
group: undefined,
columns: Array
},
gridMode: false,
filteredData: [],
show: {
search: true,
settings: false
}
}
},
mounted () {
return this.update()
},
watch: {
pagination: {
deep: true,
handler (obj) {
this.tablePagination = obj
}
}
},
computed: {
overlayContent () {
// get related mb-dialog-overlay content
return `${this.$route.name.split('.')[1]}-overlay-content`
},
initialPagination: {
sortBy: 'desc',
descending: false,
page: 2,
rowsPerPage: 0
// rowsNumber: xx if getting data from a server
columnsSelect () {
// define columns for select field
return this.columnsData.filter(column => {
return column.name !== 'actions' && column.name !== 'title'
})
},
filter: '',
gridMode: false,
filteredData: []
}
},
mounted () {
},
watch: {
params: {
deep: true,
handler (obj) {
this.selected.collection = obj.selectedCollection
if (obj.selectedCollection) {
this.filteredData = this.data.filter(d => {
return d.collections.includes(obj.selectedCollection)
})
columnsData () {
// set table columns
let columns
if (Array.isArray(this.columns)) {
columns = [].concat(this.columns)
}
else {
columns = [{
name: 'title',
field: 'title',
label: this.$t('fields.title'),
align: 'left',
sortable: true,
filter: true
}]
}
return columns
},
filterFields () {
// show optional columns from select field
return this.columnsData.reduce((fields, column) => {
if (column.filter && typeof column.field === 'string' && fields.indexOf(column.field) === -1) {
fields.push(column.field)
}
return fields
}, [])
}
}
},
methods: {
onTableData (obj) {
this.selected.group = obj
this.model.overlay.show = true
},
onColumnSelectInput (obj) {
this.dummy[this.page].columns.visible = obj
},
toggleMode (val) {
if (val === 'grid_view') this.gridMode = true
else this.gridMode = false
methods: {
onFilter (val) {
// set filter
this.filter = val
},
onDeleteItem (val) {
// set item to delete
this.deleteItem = val
},
onRowsPerPage (val) {
// set rows per page
this.pagination.rowsPerPage = val
return this.update()
},
onItemInfo (obj) {
// show dialog overlay on row click
this.selected.row = obj
this.model.overlay = true
},
onColumnSelectInput (obj) {
// set visible columns
this.visibleColumns = obj
},
onToggleMode (val) {
// toggle between grid and list view
if (val === 'grid_view') this.gridMode = true
else this.gridMode = false
},
update () {
// update pagination and filter
this.tablePagination = this.pagination
return this.onRequest({
pagination: this.tablePagination,
filter: this.filter
})
},
onRequest (props) {
this.$emit('request', {
props: props,
filterFields: this.filterFields
})
},
async remove (_id) {
await this.$store.dispatch(`${this.resource}/remove`, _id)
this.deleteItem = null
return this.update()
}
}
}
}
</script>
<style scoped lang="stylus">
//----------------------------------------------------------------------------------------------------------------- tr
tr
&.mb-tr-condensed
white-space nowrap
overflow scroll
width 60vw
max-width 60vw
//----------------------------------------------------------------------------------------------------------------- th
th
border 0!important
padding 0
&:before
background transparent
&.mb-th-condensed
display inline-block
max-width 100px!important
span
border-radius 100vw
&:hover
td
cursor pointer
border-top 1px solid $mb-black-20
border-bottom 1px solid $mb-black-20
&:first-of-type
border-left 1px solid $mb-black-20
border-top-left-radius $border-radius
border-bottom-left-radius $border-radius
&:last-of-type
border-right 1px solid $mb-black-20
border-top-right-radius $border-radius
border-bottom-right-radius $border-radius
</style>
<template lang="pug">
.preview-content.q-pb-md
.preview-content.q-pa-md.q-pr-sm
mb-img(
:src="props.row.preview"
:src="'https://picsum.photos/203/305'"
:clickable="true"
:hover="true"
:rounded="true"
......@@ -12,7 +12,7 @@
)
mb-popup-proxy
mb-img(:src="props.row.preview")
mb-img(:src="'https://picsum.photos/203/305'")
.q-pa-md
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum dicta dolorem dolorum error, exercitationem perspiciatis quasi quia sint soluta vitae? Culpa cumque, doloribus inventore laborum modi possimus quibusdam reiciendis voluptatem.
......
......@@ -5,7 +5,7 @@
<script>
export default {
name: 'CellContent',
name: 'RegularContent',
props: ['props']
}
</script>
......
......@@ -2,33 +2,40 @@
q-td(
:props="props"
auto-width
:class="classObj"
)
// preview image
template(v-if="props.col.name === 'preview'")
preview-content(:props="props")
// [...]-content ---------------------------------------------------------------------------------------------------
template(v-if="props.col.name !== 'actions'")
// name
template(v-else-if="props.col.name === 'title'")
title-content(:props="props")
// preview image
template(v-if="props.col.name === 'preview'")
preview-content(:props="props")
// acl
template(v-else-if="props.col.name === 'acl'")
acl-content(:props="props")
// name
template(v-else-if="props.col.name === 'title'")
title-content(:props="props")
// acl
template(v-else-if="props.col.name === 'author'")
author-content(:props="props")
// acl
template(v-else-if="props.col.name === 'acl'")
acl-content(:props="props")
// collections
template(v-else-if="props.col.name === 'collections'")
collections-content(:props="props", :selected-collection="selectedCollection")
// acl
template(v-else-if="props.col.name === 'author'")
author-content(:props="props")
// default
// collections
template(v-else-if="props.col.name === 'collections'")
collections-content(:props="props", :selected-collection="selectedCollection")
// regular
template(v-else)
regular-content(:props="props")
// slot ------------------------------------------------------------------------------------------------------------
template(v-else)
cell-content(:props="props")
slot