Commit 4c997625 authored by Jean Böhm's avatar Jean Böhm Committed by Anton Koch
Browse files

Resolve "MbTableList"

parent 0303a0f2
......@@ -20,7 +20,7 @@ import MbSelect from 'src/components/MbComponents/MbSelect'
import MbToggle from 'src/components/MbComponents/MbToggle'
import MbTooltip from 'src/components/MbComponents/MbTooltip'
import MbFile from 'src/components/MbComponents/MbFile'
import MbConsole from 'src/components/MbComponents/MbConsole'
// import multi file components
import MbCard from 'src/components/MbComponents/MbCard/MbCard'
......@@ -34,7 +34,7 @@ import MbDialogOverlay from 'src/components/MbComponents/MbDialogOverlay/MbDialo
import MbSwiper from 'src/components/MbComponents/MbSwiper/MbSwiper'
import MbSwiperSlide from 'src/components/MbComponents/MbSwiper/MbSwiperSlide'
import MbTableList from 'src/components/MbComponents/MbTableList/MbTableList'
import MbTableList from 'components/MbComponents/MbTableList'
import MbTable from 'src/components/MbComponents/MbTable/MbTable'
......@@ -58,6 +58,7 @@ Vue.component('mb-select', MbSelect)
Vue.component('mb-toggle', MbToggle)
Vue.component('mb-tooltip', MbTooltip)
Vue.component('mb-file', MbFile)
Vue.component('mb-console', MbConsole)
// use multi file components
Vue.component('mb-card', MbCard)
......
<template lang="pug">
.hidden
</template>
<script>
export default {
name: 'MbConsole',
props: ['log'],
mounted () {
console.log(this.log)
}
}
</script>
<template lang="pug">
.dialog
mb-input-text(label="Title" v-model="itemTitle")
.q-mt-md
mb-btn(:label="$t('general.save_changes')")
</template>
<script>
export default {
name: 'DialogAssetsCollectionsMore',
props: ['item'],
data () {
return {
itemTitle: this.item.title
}
}
}
</script>
<style scoped>
</style>
......@@ -51,7 +51,7 @@
)
// annotation list
mb-table-list.q-my-md(
:data="dummyData.annotations"
:items="dummyData.annotations"
)
// load more button
......@@ -69,7 +69,7 @@
)
// annotation list
mb-table-list.q-my-md(
:data="dummyData.annotations"
:items="dummyData.annotations"
)
// load more button
......
......@@ -8,41 +8,41 @@
@input="onRowsPerPage"
)
mb-icon-btn.q-mx-xs(
mb-icon-btn.q-mr-xs(
v-if="scope.pagesNumber > 2"
:icon-name="'first_page'"
:disable="scope.isFirstPage"
:outline="!scope.isFirstPage"
@click.native="scope.firstPage"
size="sm"
size="xs"
)
mb-icon-btn.q-mx-xs(
mb-icon-btn.q-mr-xs(
:icon-name="'chevron_left'"
:disable="scope.isFirstPage"
:outline="!scope.isFirstPage"
@click.native="scope.prevPage"
size="sm"
size="xs"
)
.q-mx-md
.q-mx-xs
| {{ scope.pagination.page }} / {{ scope.pagesNumber }}
mb-icon-btn.q-mx-xs(
mb-icon-btn.q-mr-xs(
:icon-name="'chevron_right'"
:disable="scope.isLastPage"
:outline="!scope.isLastPage"
@click.native="scope.nextPage"
size="sm"
size="xs"
)
mb-icon-btn.q-mx-xs(
mb-icon-btn(
v-if="scope.pagesNumber > 2"
:icon-name="'last_page'"
:disable="scope.isLastPage"
:outline="!scope.isLastPage"
@click.native="scope.lastPage"
size="sm"
size="xs"
)
</template>
......
<template lang="pug">
.mb-table-list
mb-input-text.q-mb-md(
debounce="300"
v-model="filter"
:placeholder="$t('general.search')"
icon-name="search"
)
q-table.bg-transparent(
:data="items"
:pagination.sync="pagination"
:rows-per-page-options="[5]"
unless
separator="none"
row-key="title"
flat
hide-header
square
:filter="filter"
)
// Pagination ----------------------------------------------------------------------------------------------------
template(v-slot:pagination="scope")
table-pagination-module(
:scope="scope"
@input="onRowsPerPage"
)
// table items ---------------------------------------------------------------------------------------------------
template(v-slot:body="props")
q-tr(:props="props" :key="props.row.id")
// Only display the title not the id
q-td.mb-td.cursor-pointer.q-pa-none(
v-for="col in props.cols"
v-if="col.name === 'title'"
:key="col.name"
:props="props"
)
q-item.rounded-borders(
:class="{'bg-mb-blue-100 text-white': selectedItem && props.row.id === selectedItem.id}"
)
// Title
q-item-section.text-body2(@click="selectItem(props.row)") {{ col.value }}
// More Button
q-item-section(side)
mb-icon-btn(
icon-name="more_vert"
:background="selectedItem && props.row.id === selectedItem.id"
@click.native="handleMore(props.row)"
size="sm"
)
</template>
<script>
import TablePaginationModule from 'components/MbComponents/MbTable/Modules/TablePaginationModule'
export default {
name: 'MbTableList',
components: { TablePaginationModule },
// Items need an { title and id }
props: ['items'],
data () {
return {
selectedItem: undefined,
columns: [
{ name: 'title', field: 'title' }
],
pagination: {
sortBy: 'desc',
descending: false,
page: 1,
rowsPerPage: 10
// rowsNumber: xx if getting data from a server
},
filter: undefined
}
},
computed: {
pagesNumber () {
return Math.ceil(this.items.length / this.pagination.rowsPerPage)
}
},
methods: {
selectItem (item) {
// Toggle selected item if clicked the same item twice
this.selectedItem = this.selectedItem && item.id === this.selectedItem.id
? undefined
: item
// Emit the selected Item or undefined
this.$emit('itemSelected', this.selectedItem)
},
handleMore (item) {
// Emit the more event and item
this.$emit('moreClicked', item)
},
onRowsPerPage (val) {
// set amount of rows per page
this.pagination.rowsPerPage = val
}
}
}
</script>
<style scoped lang="stylus">
.mb-table-list
.mb-td
height auto
padding 0
&::before
border-radius $border-radius
</style>
<template lang="pug">
.mb-table-list
mb-input-text.q-mb-md(
debounce="300"
v-model="filter"
:placeholder="$t('general.search')"
icon-name="search"
)
q-table.bg-transparent(
:data="data"
:pagination="initialPagination"
:hide-pagination="true"
:grid="forceGridMode || false"
:separator="'none'"
row-key="title"
flat
hide-header
square
)
// top row -------------------------------------------------------------------------------------------------------
//
template(v-slot:top-row)
q-tr.mb-tr.expanded
q-td.mb-td.cursor-pointer(colspan="100%")
div.q-my-md(
@click="selectCollection(undefined)"
// :class="{'text-mb-blue-100': selected.collection === undefined}"
) All assets
// table data (expandable) ---------------------------------------------------------------------------------------
template(v-slot:body="props")
q-tr.mb-tr(
:props="props"
:class="{'expanded': props.expand}"
)
q-td.mb-td.cursor-pointer.q-pa-none(
v-for="(col, i) in props.cols"
v-if="col.name !== 'id'"
@click="selectCollection(props.row.id)"
:key="col.name"
:props="props"
)
q-item.rounded-borders(
:class="{'bg-mb-blue-100 text-white': props.row.id === selected.collection}"
)
q-item-section.q-pa-xs.text-body2(
) {{ col.value }}
//
q-item-section(
v-if="props.row.id === selected.collection"
avatar
)
mb-icon-btn(
icon-name="clear"
// :size="'sm'"
// :outline="true"
)
q-td.mb-td(
v-if="expandable"
auto-width
)
mb-icon-btn(
@click.native="props.expand = !props.expand"
icon-name="expand_more"
:outline="false"
:size="'sm'"
:class="{'flip-vertical': props.expand}"
)
q-tr.mb-tr(v-show="props.expand" :props="props")
q-td.mb-td-expanded(colspan="100%")
div(class="text-left") This is expand slot for row above: {{ props.row.name }}.
// customized grid cards -----------------------------------------------------------------------------------------
template(v-slot:item="props")
div.col-xs-12.col-sm-6.col-md-4.col-lg-3(
:style="{width: forceGridMode ? '100%!important' : ''}"
)
mb-card
q-card.q-mb-sm.mb-border-a.q-px-md.q-py-sm.cursor-pointer(
square
flat
)
| {{ props.row.title }}
</template>
<script>
export default {
name: 'MbTableList',
props: ['data', 'forceGridMode', 'expandable'],
data () {
return {
selected: {
collection: undefined
},
columns: [
{ name: 'content', field: 'content' },
{ name: 'icons', field: 'icons' }
],
initialPagination: {
sortBy: 'desc',
descending: false,
page: 2,
rowsPerPage: 0
// rowsNumber: xx if getting data from a server
},
filter: undefined
}
},
methods: {
selectCollection (id) {
if (id !== this.selected.collection) {
this.selected.collection = id
this.$emit('selectedCollection', id)
}
else {
this.selected.collection = undefined
this.$emit('selectedCollection', undefined)
}
}
}
}
</script>
<style scoped lang="stylus">
.mb-table-list
.mb-border-a
border-color $mb-light
.mb-tr
.mb-td
height auto
padding 0
&::before
border-radius $border-radius
&.expanded
.mb-td
border-bottom-color transparent
&:before
display none!important
.mb-td-expanded
&:before
display none!important
</style>
......@@ -27,13 +27,5 @@ export default {
add: 'Add',
add_user: 'Add user',
assets: 'Assets',
search: 'Search',
upload: 'Upload',
apply: 'Apply',
preview: 'Preview image',
optionalColumns: 'Optional columns',
upload_media: 'Upload media',
media_title: 'Media title',
start_time: 'Start time',
duration: 'Duration'
search: 'Search'
}
import site from 'src/i18n/en-us/site'
import timelines from 'src/i18n/en-us/timelines'
import general from 'src/i18n/en-us/general'
import errors from 'src/i18n/en-us/errors'
import messages from 'src/i18n/en-us/messages'
import grids from 'src/i18n/en-us/grids'
// This is just an example,
// so you can safely delete all default props below
import site from './site'
import general from './general'
import errors from './errors'
import messages from './messages'
import timelines from './timelines'
import grids from './grids'
export default {
site,
......
......@@ -10,5 +10,6 @@ export default {
select_frame: 'Select frame',
define_media: 'Define Media',
supported_files: 'Supported files: {files}',
drop_upload_media: 'Drop or upload media'
drop_upload_media: 'Drop or upload media',
edit_collection: 'Edit Collection'
}
......@@ -19,7 +19,8 @@
slot(name="props")
.text-subtitle1.q-my-md.text-bold(v-if="$slots.slots") Slots
slot(name="slots")
.text-subtitle1.q-my-md.text-bold(v-if="$slots.events") Events
slot(name="events")
// examples ----------------------------------------------------------------------------------------------------
div(
:class="[fullExamplesWidth ? 'col-12 q-mt-xl' : 'col-xs-12 col-sm-8 col-md-6 q-mt-md']"
......
......@@ -770,14 +770,15 @@
link="https://quasar.dev/vue-components/table"
)
template(v-slot:props)
div data :
span.text-mb-green-100 object
div expandable :
span.text-mb-green-100 boolean
div force-grid-mode :
span.text-mb-green-100 boolean
div items :
span.text-mb-green-100 object (Items require title and id (but can include more))
template(v-slot:events)
span.text-mb-green-100 @itemSelected (returns an item)
span.text-mb-green-100 @moreClicked (returns an item)
template(v-slot:examples)
mb-table-list(:data="collections")
mb-table-list(
:items="collections"
)
component-block(
ref="Typography-Classes"
......
<template lang="pug">
div
.mb-subheadline.q-mb-lg {{$t('general.collections')}}
mb-table-list(:data="collections")
mb-table-list(
:items="collections"
@moreClicked="handleMore"
@itemSelected="handleSelect"
)
// More Clicked
mb-dialog(
width="50vw"
:label="$t('messages.edit_collection')"
v-model="moreClick.showMore"
)
dialog-assets-collections-more(
:item="moreClick.clickedItem"
)
</template>
<script>
import DialogAssetsCollectionsMore from 'components/MbComponents/MbDialog/DialogContents/Assets/DialogAssetsCollectionsMore'
export default {
name: 'AssetsCollections',
components: { DialogAssetsCollectionsMore },
data () {
return {
moreClick: {
showMore: false,
clickedItem: undefined
},
collections: [
{
id: '1',
title: 'Title 1 abc'
}, {
},
{
id: '2',
title: 'blabla'
}, {
},
{
id: '3',
title: 'collection 1'
}, {
},
{
id: '4',
title: 'collection 2'
}, {
},
{
id: '5',
title: 'Lorem ipsum'
},
{
id: '6',
title: 'Lorem ipsum'
},
{
id: '7',
title: 'Lorem ipsum'
},
{
id: '8',
title: 'Lorem ipsum'
},
{
id: '9',
title: 'Lorem ipsum'
},
{
id: '10',
title: 'Lorem ipsum'
},
{
id: '11',
title: 'Lorem ipsum'
},
{
id: '12',
title: 'Lorem ipsum'
},
{
id: '13',
title: 'Lorem ipsum'
}
]
}
},
methods: {
handleMore (item) {
this.moreClick.clickedItem = item
this.moreClick.showMore = true
},
handleSelect (item) {
this.$emit('itemClicked', item)
}
}
}
</script>
......
......@@ -5,6 +5,7 @@ export default {
{
path: '',
name: 'assets',
meta: { private: true },
component: () => import('pages/assets/assets')
}
]
......
......@@ -5,6 +5,7 @@ export default {
{
path: 'callback',
name: 'users.callback',
meta: { private: true },
component: () => import('pages/users/callback')
}
]
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment