Commit 9ad395e1 authored by Anton Koch's avatar Anton Koch
Browse files

Merge branch '577-create-groups-page' into 'master'

Resolve "create groups page"

See merge request !155
parents 96928797 79d632bf
<template lang="pug">
.dialog
// title -----------------------------------------------------------------------------------------------------------
mb-expansion-item(
:label="$t('general.title')"
:group="group"
:slim-header="true"
:no-border="true"
)
.q-pt-md
mb-input-text(
v-model="model.title"
:label="$t('general.groupTitle')"
:rules="[val => !!val || $t('errors.field_is_required')]"
)
//
.text-center
mb-btn(
// :label="$t('general.next')"
// :disabled="!model.title"
)
// members ---------------------------------------------------------------------------------------------------------
mb-expansion-item.q-mb-lg(
:label="$t('general.members')"
:group="group"
:slim-header="true"
:no-border="true"
)
.q-pt-md.q-pb-lg
mb-input-text(
label="add member"
)
// buttons ---------------------------------------------------------------------------------------------------------
.text-center
mb-btn.q-mx-sm(
:label="$t('general.done')"
:disable="!model.title"
:disabled="!model.title"
)
mb-btn.q-mx-sm(
:label="$t('general.abort')"
)
</template>
<script>
export default {
name: 'DialogCreateGroup',
props: ['type'],
data () {
return {
group: '',
model: {
title: undefined,
member: ''
}
}
}
}
</script>
<style scoped lang="stylus">
</style>
<template lang="pug">
.group-overlay-content.q-pa-md
// general information ---------------------------------------------------------------------------------------------
mb-expansion-item(
:label="'Group details'"
:slim-header="true"
)
template(v-for="(information, i) in generalInformation")
.row(:class="[i > 0 ? 'q-pt-xl' : 'q-pt-md']")
.col-xs-12.col-sm-4.text-subtitle1.q-mb-sm {{ information }}
.col-xs-12.col-sm-8
component(
:is="`group-${information}`"
:data="data"
)
// acl -------------------------------------------------------------------------------------------------------------
mb-expansion-item(
:label="$('general.members')"
:slim-header="true"
)
.q-pt-md
group-acl(:data="data")
// media -----------------------------------------------------------------------------------------------------------
mb-expansion-item(
:label="$('general.media')"
:slim-header="true"
:no-border="true"
)
q-item
.row.q-col-gutter-md.q-pt-md
// add button
.col-xs-12.col-sm-6.col-md-3
.test-button.full-height.full-width.text-center.inline-block.relative-position.mb-border-a-light(style="border-radius: .5rem;")
.absolute-center
mb-btn(
:label="$('general.add')"
:secondary="true"
)
// media items
template(v-for="n in 9")
.col-xs-12.col-sm-6.col-md-3
mb-card(:data="{title: 'this is a card title', previewSrc: `https://picsum.photos/${200 + n}/300`}")
</template>
<script>
import GroupTitle from 'components/MbComponents/MbDialogOverlay/OverlayContents/Groups/Sub/GroupTitle'
import GroupAuthor from 'components/MbComponents/MbDialogOverlay/OverlayContents/Groups/Sub/GroupAuthor'
import GroupAcl from 'components/MbComponents/MbDialogOverlay/OverlayContents/Groups/Sub/GroupAcl'
export default {
name: 'GroupOverlayContent',
components: {
GroupAcl,
GroupAuthor,
GroupTitle
},
props: ['data'],
data () {
return {
generalInformation: ['title', 'author']
}
}
}
</script>
<style scoped lang="stylus">
</style>
<template lang="pug">
.groups-overlay-content(:class="{'q-pa-md': $q.screen.gt.xs}")
// general information ---------------------------------------------------------------------------------------------
mb-expansion-item.expansion-item.q-mb-md(
:label="$t('general.groupDetails')"
:slim-header="true"
:no-border="true"
group="group"
)
.q-py-lg
template(v-for="(information, i) in generalInformation")
.row(:class="[i > 0 ? 'q-pt-xl' : 'q-pt-md']")
.col-xs-12.col-sm-4.text-subtitle1.q-mb-sm {{ information.label }}
.col-xs-12.col-sm-8
component(
:is="`group-${information.name}`"
:data="data"
)
// recent activities -----------------------------------------------------------------------------------------------
mb-expansion-item.expansion-item.q-mb-md(
:label="$t('general.recentActivities')"
:slim-header="true"
:no-border="true"
group="group"
)
.q-py-lg
group-recent-activities(:data="data")
// acl -------------------------------------------------------------------------------------------------------------
mb-expansion-item.expansion-item.q-mb-md(
:label="$t('general.members')"
:slim-header="true"
:no-border="true"
group="group"
)
.q-py-lg
group-acl(:data="data")
// media -----------------------------------------------------------------------------------------------------------
mb-expansion-item.expansion-item(
:label="$t('general.media')"
:slim-header="true"
:no-border="true"
group="group"
)
.q-py-lg
q-item
.row.q-col-gutter-md.q-pt-md
// add button
.col-xs-12.col-sm-6.col-md-3
.test-button.full-height.full-width.text-center.inline-block.relative-position
.absolute-center
mb-icon-btn(
icon-name="add"
:outline="true"
:size="'md'"
@click.native="model.addMediaDialog = true"
)
// media items
template(v-for="n in 9")
.col-xs-12.col-sm-6.col-md-3
mb-card(:data="{title: 'this is a card title', previewSrc: `https://picsum.photos/${200 + n}/300`}")
mb-dialog(
v-model="model.addMediaDialog"
:width="'50vw'"
:label="$t('general.addMediaToGroup')"
)
template(v-for="n in 9")
.col-xs-12.col-sm-6.col-md-3
mb-card(:data="{title: 'this is a card title', previewSrc: `https://picsum.photos/${200 + n}/300`}")
</template>
<script>
import GroupTitle from 'components/MbComponents/MbDialogOverlay/OverlayContents/Groups/Sub/GroupTitle'
import GroupAuthor from 'components/MbComponents/MbDialogOverlay/OverlayContents/Groups/Sub/GroupAuthor'
import GroupAcl from 'components/MbComponents/MbDialogOverlay/OverlayContents/Groups/Sub/GroupAcl'
import GroupRecentActivities
from 'components/MbComponents/MbDialogOverlay/OverlayContents/Groups/Sub/GroupRecentActivities'
export default {
name: 'GroupsOverlayContent',
components: {
GroupRecentActivities,
GroupAcl,
GroupAuthor,
GroupTitle
},
props: ['data'],
data () {
return {
model: {
addMediaDialog: false
},
generalInformation: [{
label: this.$t('general.title'),
name: 'title'
}, {
label: this.$t('general.author'),
name: 'author'
}]
}
}
}
</script>
<style scoped lang="stylus">
.expansion-item
&.q-expansion-item--expanded
border-color $mb-dark-20
</style>
......@@ -33,10 +33,11 @@
// name tag
q-item-section(side)
q-item-label
mb-name-tag(
:data="acl"
:tooltip="true"
)
//
mb-name-tag(
// :data="acl"
// :tooltip="true"
)
// ...
q-item-section
......
<template lang="pug">
.group-author
mb-name-tag(
:data="data.row.author"
:tooltip="true"
)
//
mb-name-tag(
// :data="data.row.author"
// :tooltip="true"
)
</template>
<script>
......
<template lang="pug">
.group-recent-activities
| recent activities
</template>
<script>
export default {
name: 'GroupRecentActivities',
props: ['data']
}
</script>
<style scoped lang="stylus">
</style>
......@@ -9,8 +9,9 @@
:class="[{'mb-border-b-light': !noBorder}, 'mb-border-a-transparent']"
:default-opened="defaultOpened"
:header-class="['mb-subheadline', slimHeaderObj, headerClass]"
:disable="disable"
)
.q-pb-xl.q-px-md
.q-px-md
slot
</template>
......@@ -18,10 +19,10 @@
<script>
export default {
name: 'MbExpansionItem',
props: ['label', 'icon', 'group', 'defaultOpened', 'noBorder', 'slimHeader', 'headerClass'],
props: ['label', 'icon', 'group', 'defaultOpened', 'noBorder', 'slimHeader', 'headerClass', 'disable'],
computed: {
slimHeaderObj () {
return this.slimHeader ? 'q-py-lg' : 'q-py-xl'
return this.slimHeader ? 'q-py-sm' : 'q-py-lg'
}
}
}
......
......@@ -5,6 +5,7 @@ div
table-top-module(
:title="title"
:no-add="noAdd"
:current-page="currentPage"
)
// search bar, table settings ----------------------------------------------------------------------------------------
......@@ -49,7 +50,11 @@ div
// customized table cells ------------------------------------------------------------------------------------------
template(v-slot:body-cell="props")
mb-td(:props="props")
mb-td(
:props="props"
:current-page="currentPage"
@itemInfo="onItemInfo"
)
// actions ---------------------------------------------------------------------------------------------------------
template(v-slot:body-cell-actions="props")
......@@ -58,10 +63,10 @@ div
:no-delete="noDelete"
:resource-alias="resourceAlias"
:resource="resource"
@deleteItem="onDeleteItem"
:current-page="currentPage"
@itemInfo="onItemInfo"
@update="update"
)
confirm-delete(:delete-item="deleteItem" @remove="remove")
// customized grid cards -------------------------------------------------------------------------------------------
template(v-slot:item="props")
......@@ -90,11 +95,12 @@ div
</template>
<script>
import ConfirmDelete from './../../AntonPresets/ConfirmDelete'
import MbTd from 'components/MbComponents/MbTable/MbTableData/MbTd'
import ProjectsOverlayContent
from 'components/MbComponents/MbDialogOverlay/OverlayContents/Projects/ProjectsOverlayContent'
import GroupsOverlayContent
from 'components/MbComponents/MbDialogOverlay/OverlayContents/Groups/GroupsOverlayContent'
import TablePaginationModule from 'components/MbComponents/MbTable/Modules/TablePaginationModule'
import TableHeaderModule from 'components/MbComponents/MbTable/Modules/TableHeaderModule'
......@@ -106,6 +112,7 @@ div
export default {
name: 'MbTable',
components: {
GroupsOverlayContent,
TableCardModule,
TableBelowTopModule,
TableTopModule,
......@@ -113,8 +120,7 @@ div
TableHeaderModule,
TablePaginationModule,
ProjectsOverlayContent,
MbTd,
ConfirmDelete
MbTd
},
props: {
data: Array,
......@@ -132,7 +138,7 @@ div
data () {
return {
tablePagination: undefined,
deleteItem: null,
// deleteItem: null,
filter: '',
loading: false,
visibleColumns: [],
......@@ -165,6 +171,9 @@ div
}
},
computed: {
currentPage () {
return this.$route.name.split('.')[1]
},
overlayContent () {
// get related mb-dialog-overlay content
return `${this.$route.name.split('.')[1]}-overlay-content`
......@@ -208,10 +217,6 @@ div
// set filter
this.filter = val
},
onDeleteItem (val) {
// set item to delete
this.deleteItem = val
},
onRowsPerPage (val) {
// set rows per page
this.pagination.rowsPerPage = val
......@@ -244,11 +249,6 @@ div
props: props,
filterFields: this.filterFields
})
},
async remove (_id) {
await this.$store.dispatch(`${this.resource}/remove`, _id)
this.deleteItem = null
return this.update()
}
}
}
......@@ -259,7 +259,6 @@ div
tr
&:hover
td
cursor pointer
border-top 1px solid $mb-black-20
border-bottom 1px solid $mb-black-20
......
<template lang="pug">
.groups-actions-contents
.q-pa-md.cursor-pointer.text-red(
v-if="!noDelete"
@click="deleteItem(props.row)"
icon-name="delete"
) {{ $t('general.delete') }}
</template>
<script>
export default {
name: 'GroupsActionsContent',
props: ['props', 'noDelete'],
methods: {
deleteItem (obj) {
this.$emit('deleteItem', obj)
}
}
}
</script>
<style scoped lang="stylus">
</style>
<template lang="pug">
.projects-actions-content
.q-pa-md.cursor-pointer(
@click="itemInfo(props)"
) {{ $t('general.preview') }}
q-separator.bg-transparent.mb-border-b-light
.q-pa-md.cursor-pointer(
) {{ $t('general.timelineViewer') }}
.q-pa-md.cursor-pointer(
) {{ $t('general.liveAnnotate') }}
.q-pa-md.cursor-pointer(
@click="$router.push({ name: `${resourceAlias || resource}.edit`, params: { id: props.row._id } })"
icon-name="edit"
) {{ $t('general.edit') }}
q-separator.bg-transparent.mb-border-b-light
.q-pa-md.cursor-pointer.text-red(
v-if="!noDelete"
@click="deleteItem(props.row)"
icon-name="delete"
) {{ $t('general.delete') }}
</template>
<script>
export default {
name: 'ProjectsActionsContent',
props: ['props', 'noDelete'],
methods: {
deleteItem (obj) {
this.$emit('deleteItem', obj)
}
}
}
</script>
<style scoped lang="stylus">
</style>
......@@ -2,14 +2,27 @@
.full-height
mb-headline(:title="props.value")
mb-headline.cursor-pointer(
:title="props.value"
@click.native="onHeadline(props)"
)
</template>
<script>
export default {
name: 'TitleContent',
props: ['props']
props: ['props', 'currentPage'],
methods: {
onHeadline (props) {
if (this.currentPage === 'groups') {
this.$emit('itemInfo', props)
}
else if (this.currentPage === 'projects') {
// TODO: add route push
}
}
}
}
</script>
......
......@@ -14,7 +14,11 @@
// name
template(v-else-if="props.col.name === 'title'")
title-content(:props="props")
title-content(
:props="props"
:current-page="currentPage"
@itemInfo="onItemInfo"
)
// acl
template(v-else-if="props.col.name === 'acl'")
......@@ -56,7 +60,7 @@ export default {
TitleContent,
PreviewContent
},
props: ['props', 'selectedCollection'],
props: ['props', 'selectedCollection', 'currentPage'],
computed: {
classObj () {
if (!this.props) return
......@@ -66,6 +70,12 @@ export default {
'mb-inline-editable-cell': ['acl'].includes(colName)
}
}
},
methods: {
onItemInfo (obj) {
console.log('test')
this.$emit('itemInfo', obj)
}
}
}
</script>
......
......@@ -9,42 +9,54 @@
)
mb-popup-proxy
.q-pa-md.cursor-pointer(
) Timeline Viewer
.q-pa-md.cursor-pointer(
) Live Annotate
.q-pa-md.cursor-pointer(
@click="$router.push({ name: `${resourceAlias || resource}.edit`, params: { id: props.row._id } })"
icon-name="edit"
) Edit
q-separator.bg-transparent.mb-border-b-light