mirror of
https://github.com/IT4Change/Ocelot-Social.git
synced 2025-12-13 07:45:56 +00:00
preparation for creating a new group
This commit is contained in:
ogerly
parent
7e7bbe769e
commit
cf31f3c1d6
272
webapp/components/GroupForm/GroupForm.vue
Normal file
272
webapp/components/GroupForm/GroupForm.vue
Normal file
@ -0,0 +1,272 @@
|
||||
<template>
|
||||
<div>
|
||||
<ds-container>
|
||||
<ds-form
|
||||
v-model="formData"
|
||||
@submit="handleSubmit"
|
||||
@input="handleInput"
|
||||
@input-valid="handleInputValid"
|
||||
@reset="handleReset"
|
||||
:schema="formSchema">
|
||||
<template slot-scope="{ errors, reset }">
|
||||
<ds-input
|
||||
model="name"
|
||||
label="Gruppenname"
|
||||
placeholder="Your name ..."></ds-input>
|
||||
|
||||
|
||||
<ds-select
|
||||
icon="user"
|
||||
model="status"
|
||||
label="Status"
|
||||
:options="['offen', 'geschlossen', 'geheim']"
|
||||
placeholder="Status ..."></ds-select>
|
||||
|
||||
<ds-input
|
||||
model="description"
|
||||
label="Beschreibung"
|
||||
type="textarea"
|
||||
rows="3"></ds-input>
|
||||
<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>
|
||||
</template>
|
||||
</ds-form>
|
||||
</ds-container>
|
||||
<div align="center" style="padding-top: 30px">
|
||||
<nuxt-link :to="{ name: 'my-groups' }">
|
||||
<base-button :path="{ name: 'my-groups' }">zurück</base-button>
|
||||
</nuxt-link></div>
|
||||
|
||||
</div>
|
||||
<!--<ds-form
|
||||
class="contribution-form"
|
||||
ref="contributionForm"
|
||||
v-model="formData"
|
||||
:schema="formSchema"
|
||||
@submit="submit"
|
||||
>
|
||||
<template #default="{ errors }">
|
||||
<base-card>
|
||||
<template #heroImage>
|
||||
<img
|
||||
v-if="formData.image"
|
||||
:src="formData.image | proxyApiUrl"
|
||||
:class="['image', formData.imageBlurred && '--blur-image']"
|
||||
/>
|
||||
<image-uploader
|
||||
:hasImage="!!formData.image"
|
||||
:class="[formData.imageBlurred && '--blur-image']"
|
||||
@addHeroImage="addHeroImage"
|
||||
@addImageAspectRatio="addImageAspectRatio"
|
||||
@addImageType="addImageType"
|
||||
/>
|
||||
</template>
|
||||
<div v-if="formData.image" class="blur-toggle">
|
||||
<label for="blur-img">{{ $t('contribution.inappropriatePicture') }}</label>
|
||||
<input type="checkbox" id="blur-img" v-model="formData.imageBlurred" />
|
||||
<page-params-link class="link" :pageParams="links.FAQ">
|
||||
{{ $t('contribution.inappropriatePicture') }}
|
||||
<base-icon name="question-circle" />
|
||||
</page-params-link>
|
||||
</div>
|
||||
<ds-input
|
||||
model="title"
|
||||
:placeholder="$t('contribution.title')"
|
||||
name="title"
|
||||
autofocus
|
||||
size="large"
|
||||
/>
|
||||
<ds-chip size="base" :color="errors && errors.title && 'danger'">
|
||||
{{ formData.title.length }}/{{ formSchema.title.max }}
|
||||
<base-icon v-if="errors && errors.title" name="warning" />
|
||||
</ds-chip>
|
||||
<hc-editor
|
||||
:users="users"
|
||||
:value="formData.content"
|
||||
:hashtags="hashtags"
|
||||
@input="updateEditorContent"
|
||||
/>
|
||||
<ds-chip size="base" :color="errors && errors.content && 'danger'">
|
||||
{{ contentLength }}
|
||||
<base-icon v-if="errors && errors.content" name="warning" />
|
||||
</ds-chip>
|
||||
<div class="buttons">
|
||||
<base-button data-test="cancel-button" :disabled="loading" @click="$router.back()" danger>
|
||||
{{ $t('actions.cancel') }}
|
||||
</base-button>
|
||||
<base-button type="submit" icon="check" :loading="loading" :disabled="errors" filled>
|
||||
{{ $t('actions.save') }}
|
||||
</base-button>
|
||||
</div>
|
||||
</base-card>
|
||||
</template>
|
||||
</ds-form>
|
||||
-->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import gql from 'graphql-tag'
|
||||
// import { mapGetters } from 'vuex'
|
||||
// import HcEditor from '~/components/Editor/Editor'
|
||||
// import PostMutations from '~/graphql/PostMutations.js'
|
||||
// import ImageUploader from '~/components/ImageUploader/ImageUploader'
|
||||
// import links from '~/constants/links.js'
|
||||
// import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParamsLink.vue'
|
||||
|
||||
export default {
|
||||
// components: {
|
||||
// HcEditor,
|
||||
// ImageUploader,
|
||||
// PageParamsLink,
|
||||
// },
|
||||
// props: {
|
||||
// contribution: {
|
||||
// type: Object,
|
||||
// default: () => ({}),
|
||||
// },
|
||||
// },
|
||||
// data() {
|
||||
// const { title, content, image } = this.contribution
|
||||
// const {
|
||||
// sensitive: imageBlurred = false,
|
||||
// aspectRatio: imageAspectRatio = null,
|
||||
// type: imageType = null,
|
||||
// } = image || {}
|
||||
//
|
||||
// // return {
|
||||
// // links,
|
||||
// // formData: {
|
||||
// // title: title || '',
|
||||
// // content: content || '',
|
||||
// // image: image || null,
|
||||
// // imageAspectRatio,
|
||||
// // imageType,
|
||||
// // imageBlurred,
|
||||
// // },
|
||||
// // formSchema: {
|
||||
// // title: { required: true, min: 3, max: 100 },
|
||||
// // content: { required: true },
|
||||
// // imageBlurred: { required: false },
|
||||
// // },
|
||||
// // loading: false,
|
||||
// // users: [],
|
||||
// // hashtags: [],
|
||||
// // imageUpload: null,
|
||||
// // }
|
||||
// // },
|
||||
// // computed: {
|
||||
// // ...mapGetters({
|
||||
// // currentUser: 'auth/user',
|
||||
// // }),
|
||||
// // contentLength() {
|
||||
// // return this.$filters.removeHtml(this.formData.content).length
|
||||
// // },
|
||||
// // },
|
||||
// // methods: {
|
||||
// // submit() {
|
||||
// // let image = null
|
||||
// // const { title, content } = this.formData
|
||||
// // if (this.formData.image) {
|
||||
// // image = {
|
||||
// // sensitive: this.formData.imageBlurred,
|
||||
// // }
|
||||
// // if (this.imageUpload) {
|
||||
// // image.upload = this.imageUpload
|
||||
// // image.aspectRatio = this.formData.imageAspectRatio
|
||||
// // image.type = this.formData.imageType
|
||||
// // }
|
||||
// // }
|
||||
// // this.loading = true
|
||||
// // this.$apollo
|
||||
// // .mutate({
|
||||
// // mutation: this.contribution.id ? PostMutations().UpdatePost : PostMutations().CreatePost,
|
||||
// // variables: {
|
||||
// // title,
|
||||
// // content,
|
||||
// // id: this.contribution.id || null,
|
||||
// // image,
|
||||
// // },
|
||||
// // })
|
||||
// // .then(({ data }) => {
|
||||
// // this.loading = false
|
||||
// // this.$toast.success(this.$t('contribution.success'))
|
||||
// // const result = data[this.contribution.id ? 'UpdatePost' : 'CreatePost']
|
||||
//
|
||||
// // this.$router.push({
|
||||
// // name: 'post-id-slug',
|
||||
// // params: { id: result.id, slug: result.slug },
|
||||
// // })
|
||||
// // })
|
||||
// // .catch((err) => {
|
||||
// // this.$toast.error(err.message)
|
||||
// // this.loading = false
|
||||
// // })
|
||||
// // },
|
||||
// // updateEditorContent(value) {
|
||||
// // this.$refs.contributionForm.update('content', value)
|
||||
// // },
|
||||
// // addHeroImage(file) {
|
||||
// // this.formData.image = null
|
||||
// // if (file) {
|
||||
// // const reader = new FileReader()
|
||||
// // reader.onload = ({ target }) => {
|
||||
// // this.formData.image = {
|
||||
// // ...this.formData.image,
|
||||
// // url: target.result,
|
||||
// // }
|
||||
// // }
|
||||
// // reader.readAsDataURL(file)
|
||||
// // this.imageUpload = file
|
||||
// // }
|
||||
// // },
|
||||
// // addImageAspectRatio(aspectRatio) {
|
||||
// // this.formData.imageAspectRatio = aspectRatio
|
||||
// // },
|
||||
// // addImageType(imageType) {
|
||||
// // this.formData.imageType = imageType
|
||||
// // },
|
||||
// // },
|
||||
// // apollo: {
|
||||
// // User: {
|
||||
// // query() {
|
||||
// return gql`
|
||||
// query {
|
||||
// User(orderBy: slug_asc) {
|
||||
// id
|
||||
// slug
|
||||
// }
|
||||
// }
|
||||
// `
|
||||
// },
|
||||
// result({ data: { User } }) {
|
||||
// this.users = User
|
||||
// },
|
||||
// },
|
||||
// Tag: {
|
||||
// query() {
|
||||
// return gql`
|
||||
// query {
|
||||
// Tag(orderBy: id_asc) {
|
||||
// id
|
||||
// }
|
||||
// }
|
||||
// `
|
||||
// },
|
||||
// result({ data: { Tag } }) {
|
||||
// this.hashtags = Tag
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
24
webapp/components/GroupTeaser/GroupTeaser.vue
Normal file
24
webapp/components/GroupTeaser/GroupTeaser.vue
Normal file
@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<div class="group-teaser">Group Teaser
|
||||
|
||||
<ds-grid-item :row-span="2" column-span="fullWidth">
|
||||
<ds-space centered>
|
||||
<nuxt-link :to="{ name: 'group-create' }">
|
||||
<base-button
|
||||
v-tooltip="{
|
||||
content: $t('group.newGroup'),
|
||||
placement: 'left',
|
||||
delay: { show: 500 },
|
||||
}"
|
||||
:path="{ name: 'group-create' }"
|
||||
class="profile-post-add-button"
|
||||
icon="plus"
|
||||
circle
|
||||
filled
|
||||
/>
|
||||
</nuxt-link>
|
||||
</ds-space>
|
||||
</ds-grid-item>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
@ -366,6 +366,9 @@
|
||||
"follow": "Folgen",
|
||||
"following": "Folge Ich"
|
||||
},
|
||||
"group": {
|
||||
"newGroup":"Erstelle eine neue Gruppe"
|
||||
},
|
||||
"hashtags-filter": {
|
||||
"clearSearch": "Suche löschen",
|
||||
"hashtag-search": "Suche nach #{hashtag}",
|
||||
|
||||
@ -366,6 +366,9 @@
|
||||
"follow": "Follow",
|
||||
"following": "Following"
|
||||
},
|
||||
"group": {
|
||||
"newGroup":"Create a new Group"
|
||||
},
|
||||
"hashtags-filter": {
|
||||
"clearSearch": "Clear search",
|
||||
"hashtag-search": "Searching for #{hashtag}",
|
||||
|
||||
18
webapp/pages/group/create.vue
Normal file
18
webapp/pages/group/create.vue
Normal file
@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2>Neue Gruppe</h2>
|
||||
|
||||
|
||||
<new-group-form style="padding-top: 30px"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import NewGroupForm from '~/components/GroupForm/GroupForm'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
NewGroupForm,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
16
webapp/pages/my-groups.vue
Normal file
16
webapp/pages/my-groups.vue
Normal file
@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<div>
|
||||
<div>my groups</div>
|
||||
<group-teaser />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import GroupTeaser from '~/components/GroupTeaser/GroupTeaser.vue'
|
||||
|
||||
export default {
|
||||
name: 'MyGroups',
|
||||
components: {
|
||||
GroupTeaser,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
Loading…
x
Reference in New Issue
Block a user