This commit is contained in:
ogerly 2022-09-13 20:46:18 +02:00
parent 41955c5f56
commit f1957c5fe7
9 changed files with 193 additions and 191 deletions

View File

@ -1,6 +1,5 @@
<template> <template>
<div> <div>
<nuxt-link to="/my-groups"><base-button icon="users" circle ghost /></nuxt-link> <nuxt-link to="/my-groups"><base-button icon="users" circle ghost /></nuxt-link>
</div>
</div> </template>
</template>

View File

@ -32,21 +32,21 @@
></ds-input> ></ds-input>
<ds-space margin-top="large"> <ds-space margin-top="large">
<ds-select <ds-select
icon="card" icon="card"
v-model="formData.actionRadius" v-model="formData.actionRadius"
label="Radius" label="Radius"
:options="['regional', 'national', 'continental', 'global']" :options="['regional', 'national', 'continental', 'global']"
placeholder="Radius ..." placeholder="Radius ..."
></ds-select> ></ds-select>
</ds-space> </ds-space>
<ds-space margin-top="large"> <ds-space margin-top="large">
<categories-select <categories-select
v-if="categoriesActive" v-if="categoriesActive"
model="categoryIds" model="categoryIds"
:existingCategoryIds="formData.categoryIds" :existingCategoryIds="formData.categoryIds"
/> />
</ds-space> </ds-space>
<ds-space margin-top="large"> <ds-space margin-top="large">
<ds-button @click.prevent="reset()">Reset form</ds-button> <ds-button @click.prevent="reset()">Reset form</ds-button>
<ds-button <ds-button
@ -150,49 +150,48 @@ export default {
computed: { computed: {
submitDisable() { submitDisable() {
if ( if (
this.formData.name !== '' this.formData.name !== '' &&
&& this.formData.groupType !== '' this.formData.groupType !== '' &&
&& this.formData.about !== '' this.formData.about !== '' &&
&& this.formData.description !== '' this.formData.description !== '' &&
&& this.formData.actionRadius !== '' this.formData.actionRadius !== '' &&
&& this.formData.categoryIds.length > 0 this.formData.categoryIds.length > 0
) { ) {
return false return false
} }
return true return true
}, },
submitDisableEdit() { submitDisableEdit() {
if ( if (
this.formData.name !== this.group.name this.formData.name !== this.group.name ||
|| this.formData.groupType !== this.group.groupType this.formData.groupType !== this.group.groupType ||
|| this.formData.about !== this.group.about this.formData.about !== this.group.about ||
|| this.formData.description !== this.group.description this.formData.description !== this.group.description ||
|| this.formData.actionRadius !== this.group.actionRadius this.formData.actionRadius !== this.group.actionRadius ||
|| this.formData.categoryIds.length === 0 this.formData.categoryIds.length === 0 ||
|| !this.sameCategories !this.sameCategories
) { ) {
return false return false
} }
return true return true
}, },
sameCategories(){ sameCategories() {
let formDataCategories = this.formData.categoryIds.map((categoryIds) => categoryIds) const formDataCategories = this.formData.categoryIds.map((categoryIds) => categoryIds)
let groupDataCategories = this.group.categories.map((category) => category.id) const groupDataCategories = this.group.categories.map((category) => category.id)
let result let result
let each = true let each = true
if (formDataCategories.length !== groupDataCategories.length) return false if (formDataCategories.length !== groupDataCategories.length) return false
if (JSON.stringify(formDataCategories) !== JSON.stringify(groupDataCategories)) { if (JSON.stringify(formDataCategories) !== JSON.stringify(groupDataCategories)) {
formDataCategories.forEach(element => { formDataCategories.forEach((element) => {
result = groupDataCategories.filter(groupCategorieId => groupCategorieId === element) result = groupDataCategories.filter((groupCategorieId) => groupCategorieId === element)
if (result.length === 0) each = false if (result.length === 0) each = false
}) })
return each return each
} }
return true return true
} },
} },
} }
</script> </script>

View File

@ -1,47 +1,54 @@
<template> <template>
<div> <div>
<ds-container class="group-card"> <ds-container class="group-card">
<ds-space> <ds-space>
<div @click="onlyOwnerGroups(true)" ref="myGruops" >show only my groups</div> <div @click="onlyOwnerGroups(true)" ref="myGruops">show only my groups</div>
<div @click="onlyOwnerGroups(false)" ref="allGruops" hidden>show all groups</div> <div @click="onlyOwnerGroups(false)" ref="allGruops" hidden>show all groups</div>
</ds-space> </ds-space>
<ds-flex v-for="item in items" :key="item.id" class="border-bottom" <ds-flex
:ref="item.myRole === null ? 'null' : item.myRole"> v-for="item in items"
<ds-flex-item width="90%" centered> :key="item.id"
{{item.myRole}} class="border-bottom"
<ds-space margin="large"> :ref="item.myRole === null ? 'null' : item.myRole"
<nuxt-link :to="`/group/${item.id}`"> >
<ds-text size="x-large">{{ item.name }}</ds-text> <ds-flex-item width="90%" centered>
</nuxt-link> {{ item.myRole }}
<ds-space margin="large">
<ds-chip v-if="item.groupType === 'public'" color="primary">{{item.groupType}}</ds-chip> <nuxt-link :to="`/group/${item.id}`">
<ds-chip v-if="item.groupType === 'hidden'" color="warning">{{item.groupType}}</ds-chip> <ds-text size="x-large">{{ item.name }}</ds-text>
<ds-chip v-if="item.groupType === 'closed'" color="danger">{{item.groupType}}</ds-chip> </nuxt-link>
<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> <ds-chip v-if="item.groupType === 'public'" color="primary">
{{ item.groupType }}
<div>
<ds-space margin-top="small">
{{ item.about }}
</ds-space>
</div>
<ds-space margin-top="small">
<ds-chip v-for="category in item.categories" :key="category.name">
<ds-icon :name="category.icon"></ds-icon>
{{category.name}}
</ds-chip> </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-for="category in item.categories" :key="category.name">
<ds-icon :name="category.icon"></ds-icon>
{{ category.name }}
</ds-chip>
</ds-space>
</ds-space> </ds-space>
</ds-space> </ds-flex-item>
</ds-flex-item> <ds-flex-item width="10%" centered>
<ds-flex-item width="10%" centered> <group-menu resource-type="group" :resource="item" :isOwner="item.myRole" />
<group-menu </ds-flex-item>
resource-type="group" </ds-flex>
:resource="item"
:isOwner="item.myRole"
/>
</ds-flex-item>
</ds-flex>
</ds-container> </ds-container>
</div> </div>
</template> </template>
@ -72,33 +79,28 @@ export default {
addMemeberToGroup() { addMemeberToGroup() {
alert('addMemeberToGroup group') alert('addMemeberToGroup group')
}, },
onlyOwnerGroups(bool){ onlyOwnerGroups(bool) {
console.log('bool', bool) this.$refs.myGruops.hidden = bool
console.log('this.$refs.usual', this.$refs.usual) this.$refs.allGruops.hidden = !bool
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) { if (this.$refs.usual) {
this.$refs.usual.forEach(element => { this.$refs.usual.forEach((element) => {
element.$el.hidden = bool}) element.$el.hidden = bool
} })
}
if (this.$refs.null) {
if (this.$refs.null) { this.$refs.null.forEach((element) => {
this.$refs.null.forEach(element => { element.$el.hidden = bool
element.$el.hidden = bool}) })
} }
if (this.$refs.pending) { if (this.$refs.pending) {
this.$refs.pending.forEach(element => { this.$refs.pending.forEach((element) => {
element.$el.hidden = bool}) element.$el.hidden = bool
} })
}
} },
}, },
} }
</script> </script>

View File

@ -2,33 +2,33 @@
<div> <div>
<ds-space><h3>Members</h3></ds-space> <ds-space><h3>Members</h3></ds-space>
<base-card> <base-card>
<ds-table :data="responseGroupMembersQuery" :fields="tableFields" condensed> <ds-table :data="responseGroupMembersQuery" :fields="tableFields" condensed>
<template slot="avatar"> <template slot="avatar">
<ds-avatar online size="small" :name="responseGroupMembersQuery.name"></ds-avatar> <ds-avatar online size="small" :name="responseGroupMembersQuery.name"></ds-avatar>
</template> </template>
<template slot="myRoleInGroup" slot-scope="scope"> <template slot="myRoleInGroup" slot-scope="scope">
<select <select
v-if="scope.row.myRoleInGroup !== 'owner'" v-if="scope.row.myRoleInGroup !== 'owner'"
:options="['usual', 'admin']" :options="['usual', 'admin']"
:value="`${scope.row.myRoleInGroup}`" :value="`${scope.row.myRoleInGroup}`"
v-on:change="changeMemberRole(scope.row.id, $event)" v-on:change="changeMemberRole(scope.row.id, $event)"
> >
<option v-for="value in ['usual', 'admin']" :key="value"> <option v-for="value in ['usual', 'admin']" :key="value">
{{ value }} {{ value }}
</option> </option>
</select> </select>
</template> </template>
<template slot="edit" slot-scope="scope"> <template slot="edit" slot-scope="scope">
<ds-button <ds-button
v-if="scope.row.myRoleInGroup !== 'owner'" v-if="scope.row.myRoleInGroup !== 'owner'"
size="small" size="small"
@click="openModal(scope.row)" @click="openModal(scope.row)"
> >
delete delete
</ds-button> </ds-button>
</template> </template>
</ds-table> </ds-table>
</base-card> </base-card>
<ds-modal <ds-modal
v-if="isOpen" v-if="isOpen"
v-model="isOpen" v-model="isOpen"
@ -72,7 +72,7 @@ export default {
mutation: changeGroupMemberRoleMutation, mutation: changeGroupMemberRoleMutation,
variables: { groupId: this.groupId, userId: id, roleInGroup: newRole }, variables: { groupId: this.groupId, userId: id, roleInGroup: newRole },
}) })
this.$toast.success('Die Rolle wurde auf ('+newRole+') geändert!') this.$toast.success('Die Rolle wurde auf (' + newRole + ') geändert!')
} catch (error) { } catch (error) {
this.$toast.error(error.message) this.$toast.error(error.message)
} }

View File

@ -42,7 +42,7 @@ export default {
props: { props: {
placement: { type: String, default: 'top-end' }, placement: { type: String, default: 'top-end' },
resource: { type: Object, required: true }, resource: { type: Object, required: true },
isOwner: { type: String, default: false }, isOwner: { type: String, default: null },
resourceType: { resourceType: {
type: String, type: String,
required: true, required: true,
@ -54,42 +54,41 @@ export default {
computed: { computed: {
routes() { routes() {
const routes = [] const routes = []
if (this.resourceType === 'group') { if (this.resourceType === 'group') {
if (this.isOwner === 'owner') { if (this.isOwner === 'owner') {
routes.push({ routes.push({
label: 'Settings', label: 'Settings',
path: `/group/edit/${this.resource.id}`, path: `/group/edit/${this.resource.id}`,
icon: 'edit', icon: 'edit',
}) })
} }
if (this.isOwner === 'usual') { if (this.isOwner === 'usual') {
routes.push({ routes.push({
label: 'Unfollowing', label: 'Unfollowing',
callback: () => { callback: () => {
this.unfollowGroup(this.resource) this.unfollowGroup(this.resource)
}, },
icon: 'minus', icon: 'minus',
}) })
} }
if (this.isOwner === 'pending') { if (this.isOwner === 'pending') {
routes.push({ routes.push({
label: 'Unfollowing', label: 'Unfollowing',
callback: () => { callback: () => {
this.removePending(this.resource) this.removePending(this.resource)
}, },
icon: 'minus', icon: 'minus',
}) })
} }
if (this.isOwner === null) { if (this.isOwner === null) {
routes.push({ routes.push({
label: 'Following', label: 'Following',
callback: () => { callback: () => {
this.addMemeberToGroup(this.resource) this.addMemeberToGroup(this.resource)
}, },
icon: 'plus', icon: 'plus',
}) })
} }
} }

View File

@ -105,7 +105,6 @@ import InviteButton from '~/components/InviteButton/InviteButton'
import CategoriesMenu from '~/components/FilterMenu/CategoriesMenu.vue' import CategoriesMenu from '~/components/FilterMenu/CategoriesMenu.vue'
import GroupButton from '~/components/Group/GroupButton.vue' import GroupButton from '~/components/Group/GroupButton.vue'
export default { export default {
components: { components: {
Logo, Logo,

View File

@ -1,15 +1,16 @@
<template> <template>
<div><ds-section> <div>
<h1 class="ds-heading ds-heading-h1">Create New Groupe</h1></ds-section> <ds-section>
<ds-space margin="large" > <h1 class="ds-heading ds-heading-h1">Create New Groupe</h1>
<ds-flex :width="{ base: '100%' }" gutter="base"> </ds-section>
<ds-flex-item :width="{ base: '100%', md: 5 }"> <ds-space margin="large">
<group-form @createGroup="createGroup" /> <ds-flex :width="{ base: '100%' }" gutter="base">
</ds-flex-item> <ds-flex-item :width="{ base: '100%', md: 5 }">
<ds-flex-item :width="{ base: '100%', md: 1 }">&nbsp;</ds-flex-item> <group-form @createGroup="createGroup" />
</ds-flex> </ds-flex-item>
</ds-space> <ds-flex-item :width="{ base: '100%', md: 1 }">&nbsp;</ds-flex-item>
</ds-flex>
</ds-space>
</div> </div>
</template> </template>

View File

@ -1,20 +1,21 @@
<template> <template>
<div> <div>
<ds-section> <ds-section>
<h1 class="ds-heading ds-heading-h1">{{group.name}}</h1> <h1 class="ds-heading ds-heading-h1">{{ group.name }}</h1>
<div class="">Group Setting</div></ds-section> <div class="">Group Setting</div>
<ds-space margin="large" > </ds-section>
<ds-flex gutter="small"> <ds-space margin="large">
<ds-flex-item :width="{ base: '100%', md: '200px' }"> <ds-flex gutter="small">
<ds-menu :routes="routes" :is-exact="() => true" /> <ds-flex-item :width="{ base: '100%', md: '200px' }">
</ds-flex-item> <ds-menu :routes="routes" :is-exact="() => true" />
<ds-flex-item :width="{ base: '100%', md: 1 }"> </ds-flex-item>
<transition name="slide-up" appear> <ds-flex-item :width="{ base: '100%', md: 1 }">
<nuxt-child :group="group" /> <transition name="slide-up" appear>
</transition> <nuxt-child :group="group" />
</ds-flex-item> </transition>
</ds-flex> </ds-flex-item>
</ds-space> </ds-flex>
</ds-space>
<ds-space centered> <ds-space centered>
<nuxt-link to="/my-groups">zurück</nuxt-link> <nuxt-link to="/my-groups">zurück</nuxt-link>
</ds-space> </ds-space>

View File

@ -1,20 +1,22 @@
<template> <template>
<div><ds-section> <div>
<h1 class="ds-heading ds-heading-h1">My Groups</h1> <ds-section>
<nuxt-link :to="{ name: 'group-create' }"> <h1 class="ds-heading ds-heading-h1">My Groups</h1>
<base-button <nuxt-link :to="{ name: 'group-create' }">
v-tooltip="{ <base-button
content: $t('group.newGroup'), v-tooltip="{
placement: 'left', content: $t('group.newGroup'),
delay: { show: 500 }, placement: 'left',
}" delay: { show: 500 },
:path="{ name: 'group-create' }" }"
class="profile-post-add-button" :path="{ name: 'group-create' }"
icon="plus" class="profile-post-add-button"
circle icon="plus"
filled circle
/> filled
</nuxt-link></ds-section> />
</nuxt-link>
</ds-section>
<br /> <br />
<br /> <br />
<group-list :items="responseGroupListQuery" /> <group-list :items="responseGroupListQuery" />