surya/freeplanet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added CDate component !

Browse Source
This commit is contained in:
Paolo Arena
2019-04-05 16:16:29 +02:00
parent fe600f40a6
commit 7a55fa7f68
26 changed files with 421 additions and 40910 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/CDate/CDate.scss
View File

@@ -38,3 +38,11 @@ $heightBtn: 100%;
text-align: center;
//line-height: $heightitem;
}
.data_string {
font-size: 0.85rem;
@media (max-width: 600px) {
max-width: 22px;
// display: none;
}
}

67
src/components/CDate/CDate.ts
View File

@@ -1,39 +1,58 @@
import Vue from 'vue'
import { Component, Emit, Inject, Model, Prop, Provide } from 'vue-property-decorator'
import { Component, Prop, Watch } from 'vue-property-decorator'
import { tools } from '@src/store/Modules/tools'
import * as moment from 'moment'
import { date } from 'quasar'
@Component({
name: 'CDate'
})
export default class CDate extends Vue {
// ************* IS NOT WORKING WELL ! ************
// @Model('input', {
// default: ''
// })
// public mydate!: Date
@Prop() public myhint: string
@Model('input', {
default: '1999/01/01'
})
public mydate!: string
@Prop() public mydate!: Date
@Prop({ required: false }) public label: string
@Prop({ required: false, default: '' }) public data_class!: string
private valueInternal: string = '1988/01/01'
public mystyleicon: string = 'font-size: 1.5rem;'
@Emit('input')
public onValueChanged(value: string) {
@Watch('mydate')
public valchanged(value) {
this.valueInternal = value
}
// get getmydate() {
// console.log('getmydate', this.mydate)
// return tools.getstrDate(this.mydate)
// }
//
// public updatedate(mydate) {
// console.log('updatedate', mydate)
// this.mydate = mydate
// }
public $refs: {
datePicker
}
private valueInternal: Date = tools.getDateNull()
public created() {
this.valueInternal = this.mydate
if (this.data_class !== '') {
this.mystyleicon = 'font-size: 1rem;'
}
}
public changedate(value) {
const datavalida = tools.convertstrtoDate(value)
if (!!datavalida) {
this.valueInternal = datavalida
console.log('EMIT: changedate', datavalida)
this.$emit('input', this.getDate())
} else {
console.log(' DATA NON VALIDAAAAAAAAAAAAA ', value, datavalida)
}
this.$refs.datePicker.hide()
}
get getdatestring() {
return tools.getstrDate(this.valueInternal)
}
get getdateyymmddstring() {
return tools.getstrYYMMDDDate(this.valueInternal)
}
private getDate() {
return this.valueInternal
}
}

17
src/components/CDate/CDate.vue
View File

@@ -1,14 +1,13 @@
<template>
<div>
<q-input dense v-model="mydate" mask="date" :hint="myhint">
<!--<span class="data_string">{{tools.getstrDate(itemsel.begin_development)}}</span>-->
<q-icon name="event" class="cursor-pointer" style="font-size: 1.5rem;">
<!--<q-popup-proxy>-->
<!--<q-date v-model="mydate" today-btn/>-->
<!--</q-popup-proxy>-->
<q-input :class="data_class" debounce="1000" dense :value="getdatestring" stack-label :label="label" @input="changedate">
<template v-slot:append>
<q-icon name="event" class="cursor-pointer" :style="mystyleicon">
<q-popup-proxy ref="datePicker">
<q-date :value="getdateyymmddstring" today-btn @input="changedate"></q-date>
</q-popup-proxy>
</q-icon>
</q-input>
</div>
</template>
</q-input>
</template>
<script lang="ts" src="./CDate.ts">

2
src/components/projects/SingleProject/SingleProject.scss
View File

@@ -208,7 +208,7 @@ $heightdescr: 20px;
.data-item {
font-size: 0.85rem;
max-width: 78px;
max-width: 100px;
@media (max-width: 600px) {
max-width: 22px;
}

9
src/components/projects/SingleProject/SingleProject.ts
View File

@@ -7,12 +7,13 @@ import { tools } from '../../../store/Modules/tools'
import { IProject } from '../../../model/index'
import { SubMenusProj } from '../SubMenusProj'
import { CDate } from '../../CDate'
import { date } from 'quasar'
import { askConfirm } from '../../../classes/routinestd'
@Component({
components: { SubMenusProj },
components: { SubMenusProj, CDate },
name: 'SingleProject'
})
export default class SingleProject extends Vue {
@@ -20,7 +21,7 @@ export default class SingleProject extends Vue {
public menuPopupProj: any[] = []
public classDescr: string = ''
public classDescrEdit: string = ''
public classExpiring: string = 'flex-item data-item shadow-1'
public classExpiring: string = 'flex-item data-item shadow-1 hide-if-small'
public classExpiringEx: string = ''
public iconPriority: string = ''
public classRow: string = ''
@@ -107,7 +108,7 @@ export default class SingleProject extends Vue {
}
public watchupdate(field = '') {
console.log('watchupdate')
console.log('watchupdate', field)
this.$emit('eventupdateproj', {myitem: this.itemproject, field } )
this.updateicon()
}
@@ -124,7 +125,7 @@ export default class SingleProject extends Vue {
if (this.itemproject.progressCalc > 100)
this.itemproject.progressCalc = 100
this.classExpiring = 'flex-item data-item shadow-1'
this.classExpiring = 'flex-item data-item shadow-1 hide-if-small'
this.classExpiringEx = ''
this.percentageProgress = this.itemproject.progressCalc

32
src/components/projects/SingleProject/SingleProject.vue
View File

@@ -37,25 +37,9 @@
<div v-if="itemproject.enableExpiring" :class="classExpiring">
<span class="data_string">{{tools.getstrDate(itemproject.expiring_at)}}</span>
<q-icon name="event" class="cursor-pointer" style="padding: 2px;">
<q-popup-proxy>
<q-date v-model="itemproject.expiring_at" today-btn/>
</q-popup-proxy>
</q-icon>
<!--<q-icon nametranslate="event" class="cursor-pointer" />-->
<!--<q-popup-edit v-model="itemproject.expiring_at"-->
<!--title="Edit"-->
<!--buttons class="">-->
<!--<q-input-->
<!--filled-->
<!--v-model="itemproject.expiring_at"-->
<!--type="date"-->
<!--class="myexpired"-->
<!--format="DD/MM/YYYY"-->
<!--&gt;-->
<!--</q-input>-->
<!--</q-popup-edit>-->
<CDate :mydate="itemproject.expiring_at" @input="itemproject.expiring_at = new Date(arguments[0])"
data_class="data_string">
</CDate>
</div>
<div v-if="isProject()" class="flex-item pos-item " @mousedown="clickRiga">
<q-btn flat
@@ -67,16 +51,8 @@
</q-menu>
</q-btn>
</div>
<!--clButtPopover: {{ clButtPopover }}-->
<!--Sel: {{ sel }}-->
<!--<div class="flex-item btn-item">-->
<!--{{itemproject.expiring_at}}-->
<!--</div>-->
<!--<div class="flex-item btn-item">-->
<!--<q-btn class="mybtn" round color="" icon="delete" @click.native="removeitem(itemproject._id)"></q-btn>-->
<!--</div>-->
</div>
</div>
</template>
<script lang="ts" src="./SingleProject.ts">

4
src/components/todos/CTodo/CTodo.vue
View File

@@ -95,8 +95,8 @@
v-for="(mytodo, index) in todos_completati(categoryAtt)"
:key="mytodo._id" class="myitemdrag">
<SingleTodo ref="single" @deleteItemtodo="mydeleteItemtodo(mytodo._id)" @eventupdate="updateitemtodo"
@deselectAllRows="deselectAllRowstodo" @deselectAllRowsproj="deselectAllRowsproj" @onEndtodo="onEndtodo"
<SingleTodo ref="single" @deleteItemtodo="mydeleteitemtodo(mytodo._id)" @eventupdate="updateitemtodo"
@setitemsel="setitemsel" @deselectAllRowstodo="deselectAllRowstodo" @deselectAllRowsproj="deselectAllRowsproj" @onEnd="onEndtodo"
:itemtodo='mytodo'/>
<!--<div :nametranslate="`REF${index}`" class="divdrag non-draggato"></div>-->

2
src/components/todos/SingleTodo/SingleTodo.scss
View File

@@ -208,7 +208,7 @@ $heightdescr: 20px;
}
.data-item {
max-width: 78px;
max-width: 100px;
@media (max-width: 600px) {
max-width: 22px;
}

39
src/components/todos/SingleTodo/SingleTodo.ts
View File

@@ -10,9 +10,10 @@ import { SubMenus } from '../SubMenus'
import { date } from 'quasar'
import { askConfirm } from '../../../classes/routinestd'
import { CDate } from '../../CDate'
@Component({
components: { SubMenus },
components: { SubMenus, CDate },
name: 'SingleTodo'
})
export default class SingleTodo extends Vue {
@@ -22,7 +23,7 @@ export default class SingleTodo extends Vue {
public classCompleted: string = ''
public classDescr: string = ''
public classDescrEdit: string = ''
public classExpiring: string = 'flex-item data-item shadow-1'
public classExpiring: string = 'flex-item data-item shadow-1 hide-if-small'
public classExpiringEx: string = ''
public iconPriority: string = ''
public popover: boolean = false
@@ -66,6 +67,33 @@ export default class SingleTodo extends Vue {
@Watch('itemtodo.descr') public valueChanged5() {
this.precDescr = this.itemtodo.descr
this.watchupdate('descr')
}
@Watch('itemtodo.hoursplanned') public valueChangedhoursplanned() {
console.log('itemtodo.hoursplanned', this.itemtodo.hoursplanned)
this.watchupdate('hoursplanned')
}
@Watch('itemtodo.status', { immediate: true, deep: true }) public valueChangedstatus() {
console.log('itemtodo.status', this.itemtodo.status)
this.watchupdate('status')
}
@Watch('itemtodo.completed_at') public valueChangedcompleted_at() {
console.log('itemtodo.completed_at', this.itemtodo.completed_at)
this.watchupdate('completed_at')
}
@Watch('itemtodo.hoursworked') public valueChangedhoursworked() {
console.log('itemtodo.hoursworked', this.itemtodo.hoursworked)
this.watchupdate('hoursworked')
}
@Watch('itemtodo.start_date') public valueChangedstart_date() {
this.watchupdate('start_date')
}
@Watch('itemtodo.assigned_to_userId') public valueChangedend_assigned_to_userId() {
this.watchupdate('assigned_to_userId')
}
@Watch('itemtodo.phase') public valueChangedend_phase() {
this.watchupdate('phase')
}
@Watch('itemtodo.progress') public valueChanged6() {
@@ -114,7 +142,7 @@ export default class SingleTodo extends Vue {
if (this.itemtodo.progress > 100)
this.itemtodo.progress = 100
this.classExpiring = 'flex-item data-item shadow-1'
this.classExpiring = 'flex-item data-item shadow-1 hide-if-small'
this.classExpiringEx = ''
if (this.itemtodo.status === tools.Status.COMPLETED) {
this.percentageProgress = 100
@@ -236,6 +264,7 @@ export default class SingleTodo extends Vue {
}
public clickRow() {
this.$emit('setitemsel', null)
this.$emit('setitemsel', this.itemtodo)
this.clickRiga()
}
@@ -383,10 +412,6 @@ export default class SingleTodo extends Vue {
this.itemtodo.status = tools.Status.COMPLETED
}
this.updateicon()
this.updatedata('status')
this.deselectAndExitEdit()
}

30
src/components/todos/SingleTodo/SingleTodo.vue
View File

@@ -56,25 +56,9 @@
<div v-if="itemtodo.enableExpiring" :class="classExpiring">
<span class="data_string">{{tools.getstrDate(itemtodo.expiring_at)}}</span>
<q-icon name="event" class="cursor-pointer" style="padding: 2px;">
<q-popup-proxy>
<q-date v-model="itemtodo.expiring_at" today-btn/>
</q-popup-proxy>
</q-icon>
<!--<q-icon nametranslate="event" class="cursor-pointer" />-->
<!--<q-popup-edit v-model="itemtodo.expiring_at"-->
<!--title="Edit"-->
<!--buttons class="">-->
<!--<q-input-->
<!--filled-->
<!--v-model="itemtodo.expiring_at"-->
<!--type="date"-->
<!--class="myexpired"-->
<!--format="DD/MM/YYYY"-->
<!--&gt;-->
<!--</q-input>-->
<!--</q-popup-edit>-->
<CDate :mydate="itemtodo.expiring_at" @input="itemtodo.expiring_at = new Date(arguments[0])"
data_class="data_string">
</CDate>
</div>
<div v-if="isTodo()" class="flex-item pos-item " @mousedown="clickRiga">
<q-btn flat
@@ -87,14 +71,6 @@
</q-btn>
</div>
<!--clButtPopover: {{ clButtPopover }}-->
<!--Sel: {{ sel }}-->
<!--<div class="flex-item btn-item">-->
<!--{{itemtodo.expiring_at}}-->
<!--</div>-->
<!--<div class="flex-item btn-item">-->
<!--<q-btn class="mybtn" round color="" icon="delete" @click.native="removeitem(itemtodo._id)"></q-btn>-->
<!--</div>-->
</div>
</template>