mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2025-12-13 07:45:56 +00:00
add gruopMenu
This commit is contained in:
ogerly
parent
70b32b9363
commit
41955c5f56
@ -268,6 +268,7 @@ $size-avatar-large: 114px;
|
||||
* @presenter Spacing
|
||||
*/
|
||||
|
||||
$size-button-large: 50px;
|
||||
$size-button-base: 36px;
|
||||
$size-button-small: 26px;
|
||||
|
||||
|
||||
@ -1,21 +1,32 @@
|
||||
<template>
|
||||
<div>
|
||||
|
||||
<ds-container class="group-card">
|
||||
<ds-flex v-for="item in items" :key="item.id" class="border-bottom">
|
||||
<ds-flex-item width="80%" centered>
|
||||
<ds-space>
|
||||
<div @click="onlyOwnerGroups(true)" ref="myGruops" >show only my groups</div>
|
||||
<div @click="onlyOwnerGroups(false)" ref="allGruops" hidden>show all groups</div>
|
||||
</ds-space>
|
||||
<ds-flex v-for="item in items" :key="item.id" class="border-bottom"
|
||||
:ref="item.myRole === null ? 'null' : item.myRole">
|
||||
<ds-flex-item width="90%" centered>
|
||||
{{item.myRole}}
|
||||
<ds-space margin="large">
|
||||
<nuxt-link :to="`/group/${item.id}`">
|
||||
<ds-text size="x-large">{{ item.name }}</ds-text>
|
||||
</nuxt-link>
|
||||
|
||||
<ds-chip v-if="item.groupType === 'public'" color="primary">{{item.groupType}}</ds-chip>
|
||||
<ds-chip v-if="item.groupType === 'hidden'" color="warning">{{item.groupType}}</ds-chip>
|
||||
<ds-chip v-if="item.groupType === 'closed'" color="danger">{{item.groupType}}</ds-chip>
|
||||
<ds-chip v-if="item.myRole === 'owner'" color="inverse">{{item.myRole}}</ds-chip>
|
||||
<ds-chip v-if="item.myRole === 'usual' || item.myRole === 'pending'">{{item.myRole}}</ds-chip>
|
||||
|
||||
<div>
|
||||
<ds-space margin-top="small">
|
||||
{{ item.about }}
|
||||
</ds-space>
|
||||
</div>
|
||||
<ds-space margin-top="small">
|
||||
<ds-chip v-if="item.groupType === 'public'" color="primary">{{item.groupType}}</ds-chip>
|
||||
<ds-chip v-if="item.groupType === 'hidden'" color="warning">{{item.groupType}}</ds-chip>
|
||||
<ds-chip v-if="item.groupType === 'closed'" color="danger">{{item.groupType}}</ds-chip>
|
||||
<ds-chip v-for="category in item.categories" :key="category.name">
|
||||
<ds-icon :name="category.icon"></ds-icon>
|
||||
{{category.name}}
|
||||
@ -23,42 +34,25 @@
|
||||
</ds-space>
|
||||
</ds-space>
|
||||
</ds-flex-item>
|
||||
<ds-flex-item width="20%" centered>
|
||||
|
||||
<base-button
|
||||
v-if="item.myRole === 'owner'"
|
||||
icon="trash"
|
||||
@click="deleteGroup(item)"
|
||||
></base-button>
|
||||
<base-button
|
||||
v-if="item.myRole === 'pending'"
|
||||
icon="question-circle"
|
||||
@click="removePending(item)"
|
||||
></base-button>
|
||||
<base-button
|
||||
v-if="item.myRole === 'owner'"
|
||||
icon="edit"
|
||||
@click="editGroup(item)"
|
||||
></base-button>
|
||||
<base-button
|
||||
v-if="item.myRole === 'usual'"
|
||||
icon="close"
|
||||
@click="unfollowGroup(item)"
|
||||
></base-button>
|
||||
<base-button
|
||||
v-if="item.myRole === null"
|
||||
icon="plus"
|
||||
@click="addMemeberToGroup(item)"
|
||||
></base-button>
|
||||
|
||||
<ds-flex-item width="10%" centered>
|
||||
<group-menu
|
||||
resource-type="group"
|
||||
:resource="item"
|
||||
:isOwner="item.myRole"
|
||||
/>
|
||||
</ds-flex-item>
|
||||
</ds-flex>
|
||||
</ds-container>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
<script>
|
||||
import GroupMenu from '~/components/Group/GroupMenu'
|
||||
|
||||
export default {
|
||||
name: 'GroupList',
|
||||
components: {
|
||||
GroupMenu,
|
||||
},
|
||||
props: {
|
||||
items: { type: Array, default: () => [] },
|
||||
},
|
||||
@ -78,6 +72,33 @@ export default {
|
||||
addMemeberToGroup() {
|
||||
alert('addMemeberToGroup group')
|
||||
},
|
||||
onlyOwnerGroups(bool){
|
||||
console.log('bool', bool)
|
||||
console.log('this.$refs.usual', this.$refs.usual)
|
||||
console.log('this.$refs.pending', this.$refs.pending)
|
||||
console.log('this.$refs.null', this.$refs.null)
|
||||
|
||||
this.$refs.myGruops.hidden = bool
|
||||
this.$refs.allGruops.hidden = !bool
|
||||
|
||||
|
||||
if (this.$refs.usual) {
|
||||
this.$refs.usual.forEach(element => {
|
||||
element.$el.hidden = bool})
|
||||
}
|
||||
|
||||
|
||||
if (this.$refs.null) {
|
||||
this.$refs.null.forEach(element => {
|
||||
element.$el.hidden = bool})
|
||||
}
|
||||
|
||||
if (this.$refs.pending) {
|
||||
this.$refs.pending.forEach(element => {
|
||||
element.$el.hidden = bool})
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
121
webapp/components/Group/GroupMenu.vue
Normal file
121
webapp/components/Group/GroupMenu.vue
Normal file
@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<dropdown class="group-menu" :placement="placement" offset="5">
|
||||
<template #default="{ toggleMenu }">
|
||||
<slot name="button" :toggleMenu="toggleMenu">
|
||||
<base-button
|
||||
data-test="group-menu-button"
|
||||
icon="ellipsis-v"
|
||||
size="large"
|
||||
circle
|
||||
ghost
|
||||
@click.prevent="toggleMenu()"
|
||||
/>
|
||||
</slot>
|
||||
</template>
|
||||
<template #popover="{ toggleMenu }">
|
||||
<div class="group-menu-popover">
|
||||
<ds-menu :routes="routes">
|
||||
<template #menuitem="item">
|
||||
<ds-menu-item
|
||||
:route="item.route"
|
||||
:parents="item.parents"
|
||||
@click.stop.prevent="openItem(item.route, toggleMenu)"
|
||||
>
|
||||
<base-icon :name="item.route.icon" />
|
||||
{{ item.route.label }}
|
||||
</ds-menu-item>
|
||||
</template>
|
||||
</ds-menu>
|
||||
</div>
|
||||
</template>
|
||||
</dropdown>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Dropdown from '~/components/Dropdown'
|
||||
|
||||
export default {
|
||||
name: 'ContentMenu',
|
||||
components: {
|
||||
Dropdown,
|
||||
},
|
||||
props: {
|
||||
placement: { type: String, default: 'top-end' },
|
||||
resource: { type: Object, required: true },
|
||||
isOwner: { type: String, default: false },
|
||||
resourceType: {
|
||||
type: String,
|
||||
required: true,
|
||||
validator: (value) => {
|
||||
return value.match(/(group)/)
|
||||
},
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
routes() {
|
||||
const routes = []
|
||||
|
||||
|
||||
if (this.resourceType === 'group') {
|
||||
if (this.isOwner === 'owner') {
|
||||
routes.push({
|
||||
label: 'Settings',
|
||||
path: `/group/edit/${this.resource.id}`,
|
||||
icon: 'edit',
|
||||
})
|
||||
}
|
||||
if (this.isOwner === 'usual') {
|
||||
routes.push({
|
||||
label: 'Unfollowing',
|
||||
callback: () => {
|
||||
this.unfollowGroup(this.resource)
|
||||
},
|
||||
icon: 'minus',
|
||||
})
|
||||
}
|
||||
if (this.isOwner === 'pending') {
|
||||
routes.push({
|
||||
label: 'Unfollowing',
|
||||
callback: () => {
|
||||
this.removePending(this.resource)
|
||||
},
|
||||
icon: 'minus',
|
||||
})
|
||||
}
|
||||
if (this.isOwner === null) {
|
||||
routes.push({
|
||||
label: 'Following',
|
||||
callback: () => {
|
||||
this.addMemeberToGroup(this.resource)
|
||||
},
|
||||
icon: 'plus',
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return routes
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
openItem(route, toggleMenu) {
|
||||
if (route.callback) {
|
||||
route.callback()
|
||||
} else {
|
||||
this.$router.push(route)
|
||||
}
|
||||
toggleMenu()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.group-menu-popover {
|
||||
nav {
|
||||
margin-top: -$space-xx-small;
|
||||
margin-bottom: -$space-xx-small;
|
||||
margin-left: -$space-x-small;
|
||||
margin-right: -$space-x-small;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -46,7 +46,7 @@ export default {
|
||||
type: String,
|
||||
default: 'regular',
|
||||
validator(value) {
|
||||
return value.match(/(small|regular)/)
|
||||
return value.match(/(small|regular|large)/)
|
||||
},
|
||||
},
|
||||
type: {
|
||||
@ -66,6 +66,7 @@ export default {
|
||||
if (this.danger) buttonClass += ' --danger'
|
||||
if (this.loading) buttonClass += ' --loading'
|
||||
if (this.size === 'small') buttonClass += ' --small'
|
||||
if (this.size === 'large') buttonClass += ' --large'
|
||||
|
||||
if (this.filled) buttonClass += ' --filled'
|
||||
else if (this.ghost) buttonClass += ' --ghost'
|
||||
@ -123,6 +124,15 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
&.--large {
|
||||
height: $size-button-large;
|
||||
font-size: $font-size-large;
|
||||
|
||||
&.--circle {
|
||||
width: $size-button-large;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.--icon-only) > .base-icon {
|
||||
margin-right: $space-xx-small;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user