- Added CDateTime component (to save in the db)... in the component CGridTableRec and for CEventsCalendar

This commit is contained in:
Paolo Arena
2019-10-28 16:00:37 +01:00
parent c95cded522
commit 340c813a7c
19 changed files with 383 additions and 153 deletions

View File

@@ -247,13 +247,6 @@ $graytext: #555;
color: white;
}
.calendar_comp{
max-width: 170px;
@media (max-width: 400px) {
max-width: 400px;
}
}
.myflex{
display: flex;
flex: 1;

View File

@@ -31,11 +31,12 @@ import { lists } from '../../store/Modules/lists'
import { GlobalStore, MessageStore } from '../../store/Modules'
import { IMessagePage, IMessage, IIdentity, MsgDefault } from '../../model'
import MixinUsers from '../../mixins/mixin-users'
import { CDateTime } from '../CDateTime'
@Component({
mixins: [MixinUsers],
name: 'CEventsCalendar',
components: { Logo, Footer, CTitle, CImgText, QDateTimeScroller, QDateScroller, CMySelect, CMyEditor }
components: { Logo, Footer, CTitle, CImgText, QDateTimeScroller, QDateScroller, CMySelect, CMyEditor, CDateTime }
})
export default class CEventsCalendar extends Vue {
public $q
@@ -110,9 +111,6 @@ export default class CEventsCalendar extends Vue {
public dragging = false
public draggedEvent = null
public ignoreNextSwipe = false
public showDateScrollerAllDay = false
public showDateTimeScrollerStart = false
public showDateTimeScrollerEnd = false
public resources = [
{
@@ -319,21 +317,6 @@ export default class CEventsCalendar extends Vue {
}
}
get scrollerPopupStyle280() {
if (this.$q.screen.lt.sm) {
return {
width: '100vw',
height: '100vh'
}
} else {
return {
maxHeight: '400px',
height: '400px',
width: '280px'
}
}
}
get tools() {
return tools
}

View File

@@ -121,58 +121,16 @@
<!--<q-checkbox v-model="eventForm.allday" :label="$t('cal.alldayevent')"></q-checkbox>-->
<div class="q-gutter-sm row myflex">
<q-input color="blue-6" outlined v-model="eventForm.dateTimeStart"
:label="$t('cal.eventstartdatetime')" mask="####-##-## ##:##"
class="calendar_comp">
<template #append>
<q-icon name="event" class="cursor-pointer">
<q-popup-proxy v-model="showDateTimeScrollerStart">
<q-date-time-scroller
v-model="eventForm.dateTimeStart"
:locale="locale"
:hour24-format="true"
:rounded-borders="true"
border-color="#2196f3"
bar-color="#2196f3"
color="white"
background-color="primary"
inner-color="primary"
inner-background-color="white"
:style="scrollerPopupStyle280"
@close="() => { showDateTimeScrollerStart = false }"
/>
</q-popup-proxy>
</q-icon>
</template>
</q-input>
<q-input color="blue-6" outlined v-model="eventForm.dateTimeEnd"
:label="$t('cal.enterEndDateTime')" mask="####-##-## ##:##"
class="calendar_comp">
<template #append>
<q-icon name="event" class="cursor-pointer">
<q-popup-proxy v-model="showDateTimeScrollerEnd">
<q-date-time-scroller
v-model="eventForm.dateTimeEnd"
:locale="locale"
:hour24-format="true"
:rounded-borders="true"
border-color="#2196f3"
bar-color="#2196f3"
color="white"
background-color="primary"
inner-color="primary"
inner-background-color="white"
:style="scrollerPopupStyle280"
@close="() => { showDateTimeScrollerEnd = false }"
/>
</q-popup-proxy>
</q-icon>
</template>
</q-input>
<CDateTime
:value.sync="eventForm.dateTimeStart"
:label="$t('cal.eventstartdatetime')"
:readonly="false">
</CDateTime>
<CDateTime
:value.sync="eventForm.dateTimeEnd"
:label="$t('cal.enterEndDateTime')"
:readonly="false">
</CDateTime>
<q-input dense v-model="eventForm.infoextra" :label="$t('cal.infoextra')"></q-input>
</div>