You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
129 lines
3.6 KiB
Vue
129 lines
3.6 KiB
Vue
<template>
|
|
<q-list bordered>
|
|
<q-item class="row" style="background-color: #f8f8fc;">
|
|
<q-item-section style="display: flex; flex-basis: 50%;">
|
|
<q-item-label class="text-h6">
|
|
<!--q-btn flat round color="primary" icon="arrow_left" /-->{{title}}
|
|
</q-item-label>
|
|
</q-item-section>
|
|
<q-item-section v-if="topicsMode" style="display: flex; flex-basis: 50%;" side top>
|
|
<q-expansion-item
|
|
v-model="infoExpanded"
|
|
expand-separator
|
|
label="Информация"
|
|
header-class="primary"
|
|
>
|
|
</q-expansion-item>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-item v-if="infoExpanded" style="background-color: #f8f8fc;">
|
|
{{description}}
|
|
</q-item>
|
|
|
|
<q-separator />
|
|
<q-item @click="moveTo()" clickable v-ripple v-for="item in pages[pageN]" :key="item.name">
|
|
<q-item-section center avatar>
|
|
<q-icon :size="'xs'" :name="item.icon" color="primary"/>
|
|
</q-item-section>
|
|
|
|
<q-item-section>
|
|
<q-item-label>{{item.name}}</q-item-label>
|
|
</q-item-section>
|
|
|
|
<q-item-section class="q-mt-sm" side top>
|
|
<q-badge v-if="topicsMode" class="q-mb-sm">
|
|
{{item.nMessages}}
|
|
<q-tooltip content-class="bg-indigo" :offset="[10, 10]">
|
|
Сообщения
|
|
</q-tooltip>
|
|
</q-badge>
|
|
<q-badge v-else class="q-mb-sm">
|
|
{{item.nTopics}}
|
|
<q-tooltip content-class="bg-indigo" :offset="[10, 10]">
|
|
Темы
|
|
</q-tooltip>
|
|
</q-badge>
|
|
<!--q-badge v-if="!topicsMode" :label="'Темы: ' + item.nTopics" /-->
|
|
</q-item-section>
|
|
<q-item-section v-if="item.lastMessage" class="q-ml-md" style="max-width: 300px; min-width: 300px" top>
|
|
Последнее сообщение: <br>
|
|
от {{item.lastMessage.from}}, {{item.lastMessage.time}} <br>
|
|
<p v-if="!topicsMode"> тема: "{{item.lastMessage.topic}}" </p>
|
|
</q-item-section>
|
|
</q-item>
|
|
<q-separator />
|
|
<q-item>
|
|
<q-btn v-if="pageN != 0" @click="pageN = 0" flat color="primary" label="<<" />
|
|
<q-btn v-if="pageN != 0" @click="pageN--" flat color="primary" label="<" />
|
|
<q-btn v-if="pageN != 0" @click="pageN--" flat color="primary" :label="pageN" />
|
|
<q-btn outline color="primary" :label="pageN + 1" />
|
|
<q-btn v-if="pageN + 1 != pages.length" @click="pageN++" flat color="primary" :label="pageN + 2" />
|
|
<q-btn v-if="pageN + 1 != pages.length" @click="pageN++" flat color="primary" label=">" />
|
|
<q-btn v-if="pageN + 1 != pages.length" @click="pageN = pages.length - 1" flat color="primary" label=">>" />
|
|
</q-item>
|
|
</q-list>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: 'ForumSelection',
|
|
data () {
|
|
return ({
|
|
pages: [],
|
|
pageN: 0,
|
|
infoExpanded: false
|
|
})
|
|
},
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
|
|
description: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
|
|
subSection: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
|
|
items: {
|
|
type: Array,
|
|
default: () => []
|
|
},
|
|
topicsMode: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
maxPerPage: {
|
|
type: Number
|
|
}
|
|
},
|
|
beforeMount () {
|
|
const self = this
|
|
let page = []
|
|
this.items.forEach((el) => {
|
|
page.push(el)
|
|
if (page.length === self.maxPerPage) {
|
|
self.pages.push(page)
|
|
page = []
|
|
}
|
|
})
|
|
if (page.length !== 0) {
|
|
self.pages.push(page)
|
|
}
|
|
},
|
|
methods: {
|
|
moveTo () {
|
|
if (this.topicsMode) {
|
|
this.$router.push({ path: '/topic/1' })
|
|
} else {
|
|
this.$router.push({ path: '/topics/1' })
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|