mirror of
https://github.com/Ocelot-Social-Community/Ocelot-Social.git
synced 2025-12-12 23:35:58 +00:00
add datepicker
This commit is contained in:
ogerly
parent
d2fec8ea2f
commit
8d27846602
@ -30,15 +30,33 @@
|
||||
<base-icon name="question-circle" />
|
||||
</page-params-link>
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-h1" v-if="creatEvent">Start, End Datum</h1>
|
||||
<h1 class="text-h1" v-if="creatEvent">Location</h1>
|
||||
<h1 class="text-h1" v-if="creatEvent">Strasse</h1>
|
||||
<h1 class="text-h1" v-if="creatEvent">Nr.</h1>
|
||||
<h1 class="text-h1" v-if="creatEvent">PLZ</h1>
|
||||
<h1 class="text-h1" v-if="creatEvent">Ort</h1>
|
||||
</div>
|
||||
<div v-if="creatEvent">
|
||||
<div>
|
||||
<!-- <date-picker v-model="eventStart" valueType="format" shortcuts></date-picker> -->
|
||||
<date-picker v-model="formData.eventStart" type="datetime"></date-picker>
|
||||
<date-picker v-model="formData.eventEnd" type="datetime" ></date-picker>
|
||||
<!-- <date-picker v-model="eventStart" range ></date-picker>
|
||||
<date-picker v-model="eventStart" range disabled = "true"></date-picker> -->
|
||||
</div>
|
||||
|
||||
<ds-grid>
|
||||
<ds-grid-item>
|
||||
<ds-input model="eventStart" name="eventStart" placeholder="Start" size="large" />
|
||||
</ds-grid-item>
|
||||
<ds-grid-item>
|
||||
<ds-input model="eventEnd" name="eventEnd" placeholder="End" size="large" />
|
||||
</ds-grid-item>
|
||||
</ds-grid>
|
||||
|
||||
|
||||
<ds-input model="eventLocation" name="eventStart" placeholder="Location" size="large" />
|
||||
|
||||
<ds-input model="eventVenue" name="eventVenue" placeholder="Ort" size="large" />
|
||||
|
||||
<input type="checkbox" model="eventOnline" value="Online" />
|
||||
Online
|
||||
</div>
|
||||
<ds-space margin-top="base"></ds-space>
|
||||
<ds-input
|
||||
model="title"
|
||||
:placeholder="$t('contribution.title')"
|
||||
@ -111,6 +129,8 @@ import CategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
|
||||
import ImageUploader from '~/components/Uploader/ImageUploader'
|
||||
import links from '~/constants/links.js'
|
||||
import PageParamsLink from '~/components/_new/features/PageParamsLink/PageParamsLink.vue'
|
||||
import DatePicker from 'vue2-datepicker';
|
||||
import 'vue2-datepicker/scss/index.scss';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@ -118,6 +138,7 @@ export default {
|
||||
ImageUploader,
|
||||
PageParamsLink,
|
||||
CategoriesSelect,
|
||||
DatePicker,
|
||||
},
|
||||
props: {
|
||||
contribution: {
|
||||
@ -131,10 +152,28 @@ export default {
|
||||
creatEvent: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
// input _EventInput {
|
||||
// eventStart: String!
|
||||
// eventEnd: String!
|
||||
// eventLocation: String
|
||||
// eventVenue: String ort
|
||||
// }
|
||||
|
||||
data() {
|
||||
const { title, content, image, categories } = this.contribution
|
||||
const {
|
||||
title,
|
||||
content,
|
||||
image,
|
||||
categories,
|
||||
eventStart,
|
||||
eventEnd,
|
||||
eventLocation,
|
||||
eventVenue,
|
||||
eventOnline,
|
||||
} = this.contribution
|
||||
const {
|
||||
sensitive: imageBlurred = false,
|
||||
aspectRatio: imageAspectRatio = null,
|
||||
@ -152,6 +191,14 @@ export default {
|
||||
imageType,
|
||||
imageBlurred,
|
||||
categoryIds: categories ? categories.map((category) => category.id) : [],
|
||||
eventStart: null,
|
||||
eventEnd: new Date(),
|
||||
eventLocation: '',
|
||||
eventVenue: '',
|
||||
eventOnline: true,
|
||||
time1: null,
|
||||
time2: null,
|
||||
time3: null,
|
||||
},
|
||||
formSchema: {
|
||||
title: { required: true, min: 3, max: 100 },
|
||||
@ -159,7 +206,7 @@ export default {
|
||||
imageBlurred: { required: false },
|
||||
categoryIds: {
|
||||
type: 'array',
|
||||
required: this.categoriesActive,
|
||||
required: this.categoriesActive,
|
||||
validator: (_, value = []) => {
|
||||
if (this.categoriesActive && (value.length === 0 || value.length > 3)) {
|
||||
return [new Error(this.$t('common.validations.categories'))]
|
||||
@ -193,11 +240,12 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
if (creatEvent) {
|
||||
if (creatEvent) {
|
||||
alert('EVENT speichern')
|
||||
return
|
||||
}
|
||||
let image = null
|
||||
|
||||
const { title, content, categoryIds } = this.formData
|
||||
if (this.formData.image) {
|
||||
image = {
|
||||
@ -220,6 +268,8 @@ export default {
|
||||
id: this.contribution.id || null,
|
||||
image,
|
||||
groupId: this.groupId,
|
||||
postType: 'Article',
|
||||
eventInput: '$eventInput',
|
||||
},
|
||||
})
|
||||
.then(({ data }) => {
|
||||
|
||||
@ -60,6 +60,7 @@
|
||||
"vue-observe-visibility": "^1.0.0",
|
||||
"vue-scrollto": "^2.20.0",
|
||||
"vue-sweetalert-icons": "~4.3.1",
|
||||
"vue2-datepicker": "^3.11.1",
|
||||
"vuex-i18n": "~1.13.1",
|
||||
"xregexp": "^4.3.0",
|
||||
"zxcvbn": "^4.4.2"
|
||||
|
||||
@ -1,19 +1,21 @@
|
||||
<template>
|
||||
<div>
|
||||
<ds-space margin="small">
|
||||
|
||||
<ds-grid :min-column-width="200">
|
||||
<ds-grid-item>
|
||||
<ds-heading tag="h1">{{ creatEvent ? $t('post.createNewEvent.title') : $t('post.createNewPost.title') }}</ds-heading>
|
||||
<ds-heading v-if="group" tag="h2">
|
||||
{{ $t('post.createNewPost.forGroup.title', { name: group.name }) }}
|
||||
</ds-heading>
|
||||
</ds-grid-item>
|
||||
<ds-grid-item>
|
||||
<ds-button size="x-large" @click="creatEvent = !creatEvent">{{ creatEvent ? $t('post.name') : $t('post.event') }}</ds-button>
|
||||
</ds-grid-item>
|
||||
</ds-grid>
|
||||
|
||||
<ds-grid>
|
||||
<ds-grid-item>
|
||||
<ds-heading tag="h1">
|
||||
{{ creatEvent ? $t('post.createNewEvent.title') : $t('post.createNewPost.title') }}
|
||||
</ds-heading>
|
||||
<ds-heading v-if="group" tag="h2">
|
||||
{{ $t('post.createNewPost.forGroup.title', { name: group.name }) }}
|
||||
</ds-heading>
|
||||
</ds-grid-item>
|
||||
<ds-grid-item>
|
||||
<ds-button size="x-large" @click="creatEvent = !creatEvent">
|
||||
{{ creatEvent ? $t('post.name') : $t('post.event') }}
|
||||
</ds-button>
|
||||
</ds-grid-item>
|
||||
</ds-grid>
|
||||
</ds-space>
|
||||
<ds-space margin="large" />
|
||||
<ds-flex :width="{ base: '100%' }" gutter="base">
|
||||
|
||||
@ -10019,6 +10019,11 @@ date-fns@^1.27.2:
|
||||
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
|
||||
integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==
|
||||
|
||||
date-format-parse@^0.2.7:
|
||||
version "0.2.7"
|
||||
resolved "https://registry.yarnpkg.com/date-format-parse/-/date-format-parse-0.2.7.tgz#a2f78bca857a821785b48abedd4426c65aa7b918"
|
||||
integrity sha512-/+lyMUKoRogMuTeOVii6lUwjbVlesN9YRYLzZT/g3TEZ3uD9QnpjResujeEqUW+OSNbT7T1+SYdyEkTcRv+KDQ==
|
||||
|
||||
date-now@^0.1.4:
|
||||
version "0.1.4"
|
||||
resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
|
||||
@ -22391,6 +22396,13 @@ vue-template-es2015-compiler@^1.6.0, vue-template-es2015-compiler@^1.9.0:
|
||||
resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
|
||||
integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
|
||||
|
||||
vue2-datepicker@^3.11.1:
|
||||
version "3.11.1"
|
||||
resolved "https://registry.yarnpkg.com/vue2-datepicker/-/vue2-datepicker-3.11.1.tgz#b2124e15f694d0fd43a92558f6929ec29338d241"
|
||||
integrity sha512-6PU/+pnp2mgZAfnSXmbdwj9516XsEvTiw61Q5SNrvvdy8W/FCxk1GAe9UZn/m9YfS5A47yK6XkcjMHbp7aFApA==
|
||||
dependencies:
|
||||
date-format-parse "^0.2.7"
|
||||
|
||||
vue2-dropzone@3.6.0:
|
||||
version "3.6.0"
|
||||
resolved "https://registry.yarnpkg.com/vue2-dropzone/-/vue2-dropzone-3.6.0.tgz#b4bb4b64de1cbbb3b88f04b24878e06780a51546"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user