mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2025-12-13 07:45:56 +00:00
add groupe site id und slug
This commit is contained in:
ogerly
parent
d50ae27e49
commit
addfc39c4c
@ -1,32 +1,31 @@
|
||||
<template>
|
||||
<div>
|
||||
<ds-container>
|
||||
<ds-form v-model="formData" @submit="submit" :schema="formSchema">
|
||||
<ds-input v-model="name" label="Gruppenname" placeholder="Your name ..."></ds-input>
|
||||
<ds-form @submit="submit">
|
||||
<ds-input v-model="name" label="Gruppenname" placeholder="Your name ..."></ds-input>
|
||||
|
||||
<ds-select
|
||||
icon="user"
|
||||
v-model="status"
|
||||
label="Status"
|
||||
:options="['offen', 'geschlossen', 'geheim']"
|
||||
placeholder="Status ..."
|
||||
></ds-select>
|
||||
<ds-select
|
||||
icon="user"
|
||||
v-model="status"
|
||||
label="Status"
|
||||
:options="['offen', 'geschlossen', 'geheim']"
|
||||
placeholder="Status ..."
|
||||
></ds-select>
|
||||
|
||||
<ds-input v-model="description" label="Beschreibung" type="textarea" rows="3"></ds-input>
|
||||
<ds-input v-model="description" label="Beschreibung" type="textarea" rows="3"></ds-input>
|
||||
|
||||
<div>{{name}}</div>
|
||||
<div>{{status}}</div>
|
||||
<div>{{description}}</div>
|
||||
<div>{{ name }}</div>
|
||||
<div>{{ status }}</div>
|
||||
<div>{{ description }}</div>
|
||||
|
||||
<ds-space margin-top="large">
|
||||
<ds-button @click.prevent="reset()">Reset form</ds-button>
|
||||
<ds-button :disabled="disabled" icon="save" primary>Save group</ds-button>
|
||||
</ds-space>
|
||||
|
||||
<ds-space margin-top="large">
|
||||
<ds-button @click.prevent="reset()">Reset form</ds-button>
|
||||
<ds-button :disabled="disabled" icon="save" primary>Save group</ds-button>
|
||||
</ds-space>
|
||||
</ds-form>
|
||||
<ds-space centered>
|
||||
<nuxt-link to="/my-groups">zurück</nuxt-link>
|
||||
</ds-space>
|
||||
<nuxt-link to="/my-groups">zurück</nuxt-link>
|
||||
</ds-space>
|
||||
</ds-container>
|
||||
</div>
|
||||
</template>
|
||||
@ -44,19 +43,20 @@ export default {
|
||||
name: '',
|
||||
status: '',
|
||||
description: '',
|
||||
disable: false,
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
methods: {
|
||||
submit() {
|
||||
console.log('handleSubmit')
|
||||
submit() {
|
||||
console.log('handleSubmit')
|
||||
},
|
||||
handleSubmit() {
|
||||
console.log('handleSubmit')
|
||||
},
|
||||
reset() {
|
||||
console.log('handleSubmit')
|
||||
},
|
||||
},
|
||||
handleSubmit() {
|
||||
console.log('handleSubmit')
|
||||
},
|
||||
reset() {
|
||||
console.log('handleSubmit')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
50
webapp/components/GroupList/GroupCard.vue
Normal file
50
webapp/components/GroupList/GroupCard.vue
Normal file
@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div>
|
||||
<ds-container class="group-card">
|
||||
<ds-space><h2>Group Card</h2></ds-space>
|
||||
<ds-grid>
|
||||
<ds-grid-item v-for="item in items" :key="item.id" :row-span="8">
|
||||
<ds-placeholder>
|
||||
<base-button
|
||||
v-if="item.owner"
|
||||
icon="trash"
|
||||
@click="deleteGroup(item)"
|
||||
></base-button>
|
||||
<nuxt-link to="/group/g1/testgruppe"> {{ item.name }}</nuxt-link>
|
||||
<base-button
|
||||
v-if="!item.owner"
|
||||
icon="close"
|
||||
@click="unfollowGroup(item.row)"
|
||||
></base-button>
|
||||
<nuxt-link :to="{ name: 'group-create' }">
|
||||
<ds-icon v-show="item.owner" name="ellipsis-v"></ds-icon>
|
||||
</nuxt-link>
|
||||
</ds-placeholder>
|
||||
</ds-grid-item>
|
||||
</ds-grid>
|
||||
</ds-container>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'GroupList',
|
||||
props: {
|
||||
items: { type: Array, default: () => [] },
|
||||
},
|
||||
methods: {
|
||||
deleteGroup() {
|
||||
alert('delete group')
|
||||
},
|
||||
unfollowGroup() {
|
||||
alert('unfollow group')
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
status(state) {
|
||||
console.log(state)
|
||||
// if (scope === 'hidden') return 'danger'
|
||||
return 'inverse'
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -1,27 +1,58 @@
|
||||
<template>
|
||||
<div>
|
||||
<ds-container class="group-list">
|
||||
<ds-space><h2>Group List</h2></ds-space>
|
||||
<ds-table :data="items" :fields="fields">
|
||||
<template slot="loves" slot-scope="scope">
|
||||
{{ scope.row.name }} loves {{ scope.row.loves }}
|
||||
</template>
|
||||
<template slot="edit" slot-scope="scope">
|
||||
<ds-button
|
||||
size="small"
|
||||
@click="deleteRow(scope.row)">delete</ds-button>
|
||||
</template>
|
||||
</ds-table>
|
||||
</ds-container>
|
||||
</div>
|
||||
<div>
|
||||
<ds-container class="group-list">
|
||||
<ds-space><h2>Group List</h2></ds-space>
|
||||
<ds-table :data="items" :fields="fields">
|
||||
<template slot="delete" slot-scope="scope">
|
||||
<base-button
|
||||
v-if="scope.row.owner"
|
||||
icon="trash"
|
||||
@click="deleteGroup(scope.row)"
|
||||
></base-button>
|
||||
</template>
|
||||
<template slot="name" slot-scope="scope">
|
||||
<nuxt-link to="/group/g1/testgruppe" > {{ scope.row.name }}</nuxt-link>
|
||||
</template>
|
||||
<template slot="status" slot-scope="scope">
|
||||
<ds-tag :color="status">{{ scope.row.status }}</ds-tag>
|
||||
</template>
|
||||
<template slot="edit" slot-scope="scope">
|
||||
<base-button
|
||||
v-if="!scope.row.owner"
|
||||
icon="close"
|
||||
@click="unfollowGroup(scope.row)"
|
||||
></base-button>
|
||||
|
||||
<nuxt-link :to="{ name: 'group-create' }">
|
||||
<ds-icon v-show="scope.row.owner" name="ellipsis-v"></ds-icon>
|
||||
</nuxt-link>
|
||||
|
||||
</template>
|
||||
</ds-table>
|
||||
</ds-container>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
|
||||
export default {
|
||||
name: 'GroupList',
|
||||
props: {
|
||||
items: { type: Array, default: () => [] },
|
||||
fields: { type: Array, default: () => [] }
|
||||
}
|
||||
name: 'GroupList',
|
||||
props: {
|
||||
items: { type: Array, default: () => [] },
|
||||
fields: { type: Array, default: () => [] },
|
||||
},
|
||||
methods: {
|
||||
deleteGroup() {
|
||||
alert('delete group')
|
||||
},
|
||||
unfollowGroup() {
|
||||
alert('unfollow group')
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
status(state) {
|
||||
console.log(state)
|
||||
// if (scope === 'hidden') return 'danger'
|
||||
return 'inverse'
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
67
webapp/components/GroupMember/GroupMember.vue
Normal file
67
webapp/components/GroupMember/GroupMember.vue
Normal file
@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<div>
|
||||
<div><ds-space><h3>Link zur Gruppe</h3></ds-space>
|
||||
<ds-space>
|
||||
<ds-copy-field>Copy Link for Invite Member please!</ds-copy-field>
|
||||
</ds-space>
|
||||
</div>
|
||||
<br />
|
||||
<hr />
|
||||
<br />
|
||||
<ds-space><h3>Members</h3></ds-space>
|
||||
<ds-table :data="tableData" :fields="tableFields">
|
||||
<template slot="avatar" >
|
||||
<ds-avatar online size="small" name="Hans Peter"></ds-avatar>
|
||||
</template>
|
||||
<template slot="loves" slot-scope="scope">
|
||||
{{ scope.row.name }} loves {{ scope.row.loves }}
|
||||
</template>
|
||||
<template slot="edit" slot-scope="scope">
|
||||
<ds-button
|
||||
size="small"
|
||||
@click="deleteRow(scope.row)">delete</ds-button>
|
||||
</template>
|
||||
</ds-table>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'GroupMember',
|
||||
data() {
|
||||
return {
|
||||
tableFields: ['avatar', 'name', 'type', 'loves', 'edit'],
|
||||
tableData: [
|
||||
{
|
||||
name: 'Rengar',
|
||||
type: 'Jungler',
|
||||
loves: 'Hide and seek'
|
||||
},
|
||||
{
|
||||
name: 'Renekton',
|
||||
type: 'Toplaner',
|
||||
loves: 'Slice and dice'
|
||||
},
|
||||
{
|
||||
name: 'Twitch',
|
||||
type: 'ADC',
|
||||
loves: 'Spray and pray'
|
||||
},
|
||||
{
|
||||
name: 'Blitz',
|
||||
type: 'Support',
|
||||
loves: 'Hook you up'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
deleteRow(row) {
|
||||
const index = this.tableData.indexOf(row)
|
||||
if (index > -1) {
|
||||
this.tableData.splice(index, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
@ -21,9 +21,7 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'GroupTeaser',
|
||||
export default {
|
||||
name: 'GroupTeaser',
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
9
webapp/pages/group/_id.vue
Normal file
9
webapp/pages/group/_id.vue
Normal file
@ -0,0 +1,9 @@
|
||||
<template>
|
||||
<div>_id groupe page
|
||||
<div>{{$route.params}}</div>
|
||||
<nuxt-link :to="{ name: 'group-create' }">
|
||||
bearbeiten
|
||||
<ds-icon name="ellipsis-v"></ds-icon>
|
||||
</nuxt-link>
|
||||
</div>
|
||||
</template>
|
||||
6
webapp/pages/group/_id/_slug.vue
Normal file
6
webapp/pages/group/_id/_slug.vue
Normal file
@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<div>
|
||||
<ds-space />
|
||||
Group Page
|
||||
</div>
|
||||
</template>
|
||||
@ -1,19 +1,24 @@
|
||||
<template>
|
||||
<div>
|
||||
<ds-flex :width="{ base: '100%' }" gutter="base">
|
||||
<ds-flex-item :width="{ base: '100%', md: 5 }">
|
||||
<new-group-form />
|
||||
</ds-flex-item>
|
||||
<ds-flex-item :width="{ base: '100%', md: 1 }"> </ds-flex-item>
|
||||
</ds-flex>
|
||||
<hr />
|
||||
<group-member />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import NewGroupForm from '~/components/GroupForm/GroupForm'
|
||||
import GroupMember from '~/components/GroupMember/GroupMember.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
NewGroupForm,
|
||||
GroupMember,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -2,45 +2,65 @@
|
||||
<div>
|
||||
<div>my groups</div>
|
||||
<group-teaser />
|
||||
<group-list :items="items" :fields="fields"/>
|
||||
<group-list :items="items" :fields="fields" />
|
||||
<br />
|
||||
<br />
|
||||
<group-card :items="items" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import GroupTeaser from '~/components/GroupTeaser/GroupTeaser.vue'
|
||||
import GroupList from '~/components/GroupList/GroupList.vue'
|
||||
import GroupList from '~/components/GroupList/GroupList.vue'
|
||||
import GroupCard from '~/components/GroupList/GroupCard.vue'
|
||||
|
||||
/*
|
||||
*
|
||||
* gruppen status: { open, close, hidden }
|
||||
*
|
||||
*
|
||||
*/
|
||||
export default {
|
||||
name: 'MyGroups',
|
||||
components: {
|
||||
GroupTeaser,
|
||||
GroupList
|
||||
GroupList,
|
||||
GroupCard,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fields: ['name', 'type', 'loves', 'edit'],
|
||||
items: [
|
||||
{
|
||||
name: 'Rengar',
|
||||
type: 'Jungler',
|
||||
loves: 'Hide and seek'
|
||||
},
|
||||
{
|
||||
name: 'Renekton',
|
||||
type: 'Toplaner',
|
||||
loves: 'Slice and dice'
|
||||
},
|
||||
{
|
||||
name: 'Twitch',
|
||||
type: 'ADC',
|
||||
loves: 'Spray and pray'
|
||||
},
|
||||
{
|
||||
name: 'Blitz',
|
||||
type: 'Support',
|
||||
loves: 'Hook you up'
|
||||
}
|
||||
]
|
||||
}
|
||||
return {
|
||||
fields: ['delete', 'name', 'desc', 'status', 'edit'],
|
||||
items: [
|
||||
{
|
||||
id: 0,
|
||||
name: 'Rengar',
|
||||
desc: 'Rengar Jungler Rengar Jungler Rengar Jungler Rengar Jungler Rengar Jungler ',
|
||||
status: 'open',
|
||||
owner: true,
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: 'Renekton',
|
||||
desc:
|
||||
'Renekton Toplaner Renekton Toplaner Renekton Toplaner Renekton Toplaner Renekton Toplaner ',
|
||||
status: 'open',
|
||||
owner: false,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Twitch',
|
||||
desc: 'Twitch ADC',
|
||||
status: 'close',
|
||||
owner: true,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'Blitz',
|
||||
desc: 'Blitz Support',
|
||||
status: 'hidden',
|
||||
owner: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user