- todo: added priority, expired, pos fields.

- todo: delete item.
- sorted by fields.
This commit is contained in:
Paolo Arena
2019-01-14 22:40:30 +01:00
parent 3613560c97
commit 2984f20b58
29 changed files with 1025 additions and 26 deletions

18
package-lock.json generated
View File

@@ -13272,6 +13272,11 @@
"topo": "3.0.3"
}
},
"jquery": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
"integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg=="
},
"js-base64": {
"version": "2.4.9",
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.9.tgz",
@@ -22402,6 +22407,11 @@
"is-plain-obj": "1.1.0"
}
},
"sortablejs": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.7.0.tgz",
"integrity": "sha1-gKKyNwq9Vo4c7IwnETHvMKkE+ig="
},
"source-list-map": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz",
@@ -24382,6 +24392,14 @@
"integrity": "sha512-x3LV3wdmmERhVCYy3quqA57NJW7F3i6faas++pJQWtknWT+n7k30F4TVdHvCLn48peTJFRvCpxs3UuFPqgeELg==",
"dev": true
},
"vuedraggable": {
"version": "2.17.0",
"resolved": "https://registry.npmjs.org/vuedraggable/-/vuedraggable-2.17.0.tgz",
"integrity": "sha512-TAC5tJTSbHSINQCSB59qHnuzT0Ad+E3IgvSWuA1e9UaebD8DxKaY1tCdvL3XvuLoaM3wc1dhpP/NbjpdxYsrng==",
"requires": {
"sortablejs": "1.7.0"
}
},
"vueify": {
"version": "9.4.1",
"resolved": "https://registry.npmjs.org/vueify/-/vueify-9.4.1.tgz",

View File

@@ -29,6 +29,7 @@
"graphql": "^0.13.2",
"graphql-tag": "^2.8.0",
"gsap": "^2.0.2",
"jquery": "^3.3.1",
"js-cookie": "^2.2.0",
"localforage": "^1.7.3",
"normalize.css": "^8.0.0",
@@ -45,6 +46,7 @@
"vue-property-decorator": "^7.2.0",
"vue-router": "^3.0.1",
"vue-svgicon": "^3.1.0",
"vuedraggable": "^2.17.0",
"vuelidate": "^0.7.4",
"vuex": "^3.0.1",
"vuex-class": "^0.3.1",

View File

@@ -25,13 +25,15 @@ export default class Category extends Vue {
id: 0,
descr_it: 'Frozen Yogurt',
descr_en: '',
descr_es: ''
descr_es: '',
campo2bool: true
},
{
id: 1,
descr_it: 'Secondo',
descr_en: '',
descr_es: ''
descr_es: '',
campo2bool: false
}]
columns: any [] = [
@@ -59,6 +61,14 @@ export default class Category extends Vue {
field: 'descr_es',
sortable: true,
classes: 'my-class',
},
{
name: 'campo2bool',
label: 'campo2bool',
align: 'left',
field: 'campo2bool',
sortable: true,
classes: 'my-class',
}
]
@@ -82,7 +92,8 @@ export default class Category extends Vue {
const objcat: ICategory = {
descr_it: '',
descr_en: '',
descr_es: ''
descr_es: '',
campo2bool: true
}
return objcat

View File

@@ -53,7 +53,7 @@
</q-table>
<!-- <SingleCat :itemcat='mycat' v-for="mycat of categories_arr" :key="mycat.id"/> -->
<!-- <SingleTodo :itemcat='mycat' v-for="mycat of categories_arr" :key="mycat.id"/> -->
</div>
</q-page>

View File

@@ -57,6 +57,14 @@ export default class Tabledata extends Vue {
field: 'descr_es',
sortable: true,
classes: 'my-class',
},
{
name: 'campo2bool',
label: 'campo2bool',
align: 'left',
field: 'campo2bool',
sortable: true,
classes: 'my-class',
}
]
@@ -80,7 +88,8 @@ export default class Tabledata extends Vue {
const objcat: ICategory = {
descr_it: '',
descr_en: '',
descr_es: ''
descr_es: '',
campo2bool: false
}
return objcat
@@ -123,7 +132,7 @@ export default class Tabledata extends Vue {
console.log('deleteCount = ', deleteCount)
if (deleteCount > 0) {
// Remove into the memory
this.categories_loc.slice(this.categories_loc.indexOf(myobj), 1)
this.categories_loc.splice(this.categories_loc.indexOf(myobj), 1)
this.updatetable()

View File

@@ -1,3 +1,4 @@
export * from './categories'
export * from './todos'
export * from './logo'

View File

@@ -23,3 +23,7 @@
}
}
#smile{
opacity: 0.1 !important;
fill: red;
}

View File

@@ -5,6 +5,9 @@ require('./logo.scss')
import { TimelineLite, Back } from 'gsap'
import $ from 'jquery'
import Timeout = NodeJS.Timeout
@Component({
})
@@ -19,11 +22,33 @@ export default class Logo extends Vue {
animate () {
const timeline = new TimelineLite()
timeline.to('#sun', 5, {
/*
let mysmile = $('#smile')
mysmile.attr('class', 'smile_hide')
setTimeout(() => {
mysmile.removeClass('smilevisible')
mysmile.addClass('smile_hide')
}, 1000)
setTimeout(() => {
mysmile.addClass('smilevisible')
mysmile.removeClass('smile_hide')
}, 10000)
*/
/*
timeline.to('#smile', 5, {
cy: 20,
cx: 60,
ease: Back.easeInOut // Specify an ease
})
*/
}

View File

@@ -0,0 +1,37 @@
.flex-container {
padding: 0;
margin: 0;
list-style: none;
-ms-box-orient: horizontal;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
}
#appsingletodo {
color: white;
font-size: 1.1rem;
display: flex;
margin: 2px;
padding: 3px;
border: 2px;
background-color: #9db6ff;
}
.mycols{
padding: 2px;
margin: 1px;
border-color: #8a8484;
border-style: outset;
/* background-color: green; */
}
.mybtn{
width: 18px;
height: 18px;
}

View File

@@ -0,0 +1,36 @@
import Vue from 'vue'
import { Component, Prop, Watch } from 'vue-property-decorator'
require('./SingleTodo.scss')
import { rescodes } from '../../../store/Modules/rescodes'
import { UserStore } from '@modules'
import { ITodo } from '../../../model/index'
@Component({
name: 'SingleTodo'
})
export default class SingleTodo extends Vue {
public selectPriority: []
@Prop({required: true}) itemtodo: ITodo
@Watch('itemtodo.completed') valueChanged() {
this.$emit('eventupdate', this.itemtodo)
}
@Watch('itemtodo.expiring_at') valueChanged2() {
this.$emit('eventupdate', this.itemtodo)
}
@Watch('itemtodo.priority') valueChanged3() {
this.$emit('eventupdate', this.itemtodo)
}
created() {
this.selectPriority = rescodes.selectPriority[UserStore.state.lang]
}
remove(id) {
this.$emit('event', id)
}
}

View File

@@ -0,0 +1,30 @@
<template>
<div id="appsingletodo" class="flex-container">
<div class="doc-container">
<div class="row">
<div class="flex-item mycols">P: {{ itemtodo.pos }}</div>
<q-checkbox class="flex-item mycols" v-model="itemtodo.completed" :label="itemtodo.descr" />
<div class="flex-item mycols">
<q-select
v-model="itemtodo.priority"
float-label=""
radio
:options="selectPriority"
/>
</div>
<div class="flex-item mycols"><q-datetime
v-model="itemtodo.expiring_at"/></div>
<div class="flex-item mycols">
<q-btn class="mybtn" round color="" icon="delete" @click="remove(itemtodo.id)"></q-btn>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" src="./SingleTodo.ts">
</script>

View File

@@ -0,0 +1 @@
export {default as SingleTodo} from './SingleTodo.vue'

View File

@@ -0,0 +1,2 @@
export * from './SingleTodo'
export * from './todo'

View File

@@ -0,0 +1 @@
export {default as Todo} from './todo.vue'

View File

@@ -0,0 +1,3 @@
.mycard {
visibility: hidden;
}

View File

@@ -0,0 +1,191 @@
import Vue from 'vue'
import { Component, Watch } from 'vue-property-decorator'
import { SingleTodo } from '@components'
import { ITodo } from '@src/model'
require('./todo.scss')
import { rescodes } from '../../../store/Modules/rescodes'
import { UserStore } from '@modules'
import _ from 'lodash'
@Component({
components: { SingleTodo }
})
export default class Todo extends Vue {
$q: any
filter: boolean = false
title: string = ''
todo: string = ''
todos_arr: any[] = [{}]
created() {
this.loadCat()
}
showlistaTodos(nomelista = '') {
// console.log('todos_arr: ')
this.todos_arr.forEach((todo, key) => {
console.log('Todo n"' + key + ': ' + todo)
})
}
loadCat() {
this.updatetable()
}
initcat() {
const mydateexp = new Date().setDate((new Date()).getDate() + 1)
const objtodo: ITodo = {
userId: UserStore.state.userId,
descr: '',
pos: -1,
priority: rescodes.Todos.PRIORITY_NORMAL,
completed: false,
created_at: new Date(),
modify_at: new Date(),
expiring_at: mydateexp
}
return objtodo
}
getLastPos() {
let max = 0
this.todos_arr.forEach(myobj => {
if (myobj.pos > max)
max = myobj.pos
})
return max + 1
}
async insertTodo() {
const objtodo = this.initcat()
let myid = 0
objtodo.descr = this.todo
objtodo.pos = this.getLastPos()
// Add to Indexdb
await this.$db.todos.add(objtodo
).then(() => {
this.updatetable()
}).catch(err => {
console.log('Errore: ' + err.message)
})
// objtodo.id = myid
// Add into the memory
// this.todos_loc.push(objtodo)
// empty the field
this.todo = ''
}
deleteitem(id) {
// console.log('deleteitem: KEY = ', id)
let myobjtrov = null
this.todos_arr.forEach(myobj => {
if (myobj.id === id)
myobjtrov = myobj
})
if (myobjtrov !== null) {
// Delete item
this.$db.todos
.where('id').equals(id)
.delete()
.then(() => {
this.updatetable()
})
}
}
async updatetable() {
await this.filtertodos()
}
async filtertodos() {
if (this.filter) {
// #Todo If need to filter the output database ...
await this.$db.todos
.where('userId').equals(UserStore.state.userId)
.toArray()
.then((response) => {
Promise.all(response.map(key => key))
.then((ristodos) => {
this.todos_arr = ristodos
})
})
} else {
// this.$db.dispatch('todosSetSort', { sort: 'pos' } )
let coll = this.$db.todos
await this.$db.todos
.where('userId').equals(UserStore.state.userId)
// .sortBy('descr')
.toArray().then(ristodos => {
this.todos_arr = ristodos
})
let reverse = []
reverse['completed'] = true
reverse['priority'] = true
reverse['pos'] = true
console.log(reverse)
this.todos_arr = _.orderBy(this.todos_arr, ['completed', 'priority', 'pos'], ['asc', 'desc', 'asc'])
}
return []
}
/*
await db.transaction('rw', [db.friends], async () => {
const friend = await db.friends.get(1);
++friend.age;
await db.friends.put(friend);
});
*/
updateitem(myobj) {
console.log('updateitem')
this.modify(myobj)
}
async modify(myobj) {
await this.$db.transaction('rw', [this.$db.todos], async () => {
const miorec = await this.$db.todos.get(myobj.id)
miorec.modify_at = new Date()
miorec.completed = myobj.completed
miorec.expiring_at = myobj.expiring_at
miorec.priority = myobj.priority
await this.$db.todos.put(miorec)
this.updatetable()
})
}
}

View File

@@ -0,0 +1,20 @@
<template>
<q-page>
<div class="panel">
<p class="caption"></p>
<q-input v-model="todo" inverted float-label="Inserisci il Todo"
:after="[{icon: 'arrow_forward', content: true, handler () {}}]"
v-on:keyup.enter="insertTodo"/>
<SingleTodo @event="deleteitem" @eventupdate="updateitem" :itemtodo='mytodo' v-for="mytodo of todos_arr" :key="mytodo.id">
</SingleTodo>
</div>
</q-page>
</template>
<script lang="ts" src="./todo.ts">
</script>

View File

@@ -15,6 +15,7 @@ const messages = {
vreg: 'Verifica Reg',
Test: 'Test',
Category: 'Categorie',
Todo: 'Todo',
},
components: {
authentication:{
@@ -100,6 +101,7 @@ const messages = {
vreg: 'Verify Reg',
Test: 'Test',
Category: 'Category',
Todo: 'Todo',
},
components: {
authentication:{

View File

@@ -59,6 +59,7 @@
Dashboard: {
routes: [
{ route: '/', faIcon: 'fa fa-home', materialIcon: 'home', name: 'pages.home' },
{ route: '/todo', faIcon: 'fa fa-list-alt', materialIcon: 'todo', name: 'pages.Todo' },
{ route: '/category', faIcon: 'fa fa-list-alt', materialIcon: 'category', name: 'pages.Category' },
{ route: '/signup', faIcon: 'fa fa-registered', materialIcon: 'home', name: 'pages.SignUp' },
{ route: '/signin', faIcon: 'fa fa-anchor', materialIcon: 'home', name: 'pages.SignIn' },

View File

@@ -3,4 +3,5 @@ export interface ICategory {
descr_it?: string
descr_en?: string
descr_es?: string
campo2bool: boolean
}

15
src/model/Todos.ts Normal file
View File

@@ -0,0 +1,15 @@
export interface ITodo {
id?: number,
userId: string
pos: number,
descr?: string,
priority: number,
completed: boolean,
created_at: any,
modify_at: any,
expiring_at: any
}
export interface ITodosState {
visuOnlyUncompleted: boolean
}

View File

@@ -9,7 +9,7 @@ export const DefaultUser = <IUserState>{
}
export interface IUserState {
_id?: string
userId?: string
email?: string
username: string
idapp?: any
@@ -18,7 +18,6 @@ export interface IUserState {
repeatPassword?: string
idToken?: string
userId?: number
tokens?: IToken[]

View File

@@ -6,3 +6,4 @@ export * from './key-value'
export * from './payload'
export * from './Categories'
export * from './Todos'

View File

@@ -6,11 +6,14 @@ export default ({ Vue }) => {
// Insert here the database for IndexDB
new VueIdb({
version: 1,
database: 'test',
schemas: [
{ categories: '++id, sub_categ_id, descr_it' }
]
{ categories: '++id, sub_categ_id, descr_it, campo2bool, campo3bool' },
{ todos: '++id, userId, pos, descr, priority, completed, created_at, modify_at, expiring_at' }
],
options: {
todos: { type: 'list', primary: 'pos', label: 'label', updated_at: 'updated_at' },
}
})
}

View File

@@ -24,6 +24,11 @@ export const RouteConfig: VueRouteConfig[] = [
component: () => import('@/views/login/vreg/vreg.vue'),
meta: { name: 'Verify Reg' }
},
{
path: '/todo',
component: () => import('@/components/todos/todo/todo.vue'),
meta: { name: 'Todos' }
},
{
path: '/category',
component: () => import('@/components/categories/category/category.vue'),

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 190 KiB

View File

@@ -0,0 +1,61 @@
import { ITodosState } from 'model'
import { storeBuilder } from './Store/Store'
const state: ITodosState = {
visuOnlyUncompleted: false
}
const b = storeBuilder.module<ITodosState>('TodosModule', state)
// Getters
namespace Getters {
const visuOnlyUncompleted = b.read(state => state.visuOnlyUncompleted, 'visuOnlyUncompleted')
export const getters = {
get visuOnlyUncompleted() {
return visuOnlyUncompleted
}
}
}
namespace Mutations {
function deleteItem(state: ITodosState, num: number) {
// state.conta = num
// Cancella Item
}
export const mutations = {
deleteItem: b.commit(deleteItem),
}
}
namespace Actions {
async function deleteItem(context, num: number) {
Mutations.mutations.deleteItem(num)
}
export const actions = {
setConta: b.dispatch(deleteItem)
}
}
const stateGetter = b.state()
// Module
const TodosModule = {
get state() {
return stateGetter()
},
getters: Getters.getters,
mutations: Mutations.mutations,
actions: Actions.actions
}
export default ITodosState

View File

@@ -13,7 +13,7 @@ const bcrypt = require('bcryptjs')
// State
const state: IUserState = {
_id: '',
userId: '',
email: '',
username: '',
idapp: process.env.APP_ID,
@@ -21,7 +21,6 @@ const state: IUserState = {
lang: '',
repeatPassword: '',
idToken: '',
userId: 0,
tokens: [],
verifiedEmail: false
}
@@ -66,8 +65,8 @@ namespace Getters {
namespace Mutations {
function authUser(state, data: IUserState) {
state.username = data.username
state.userId = data.userId
state.username = data.username
state.idToken = data.idToken
state.verifiedEmail = data.verifiedEmail
// @ts-ignore
@@ -102,10 +101,10 @@ namespace Mutations {
}
function clearAuthData(state: IUserState) {
state.userId = ''
state.username = ''
state.tokens = []
state.idToken = ''
state.userId = 0
state.verifiedEmail = false
}
@@ -308,16 +307,16 @@ namespace Actions {
Mutations.mutations.setServerCode(myres.status)
if (myres.status === 200) {
let iduser = body._id
let userId = body.userId
let username = authData.username
if (process.env.DEV) {
console.log('USERNAME = ' + username)
console.log('IDUSER= ' + iduser)
console.log('IDUSER= ' + userId)
}
Mutations.mutations.authUser({
userId: userId,
username: username,
userId: iduser,
idToken: x_auth_token,
verifiedEmail: false
})
@@ -325,9 +324,9 @@ namespace Actions {
const now = new Date()
// const expirationDate = new Date(now.getTime() + myres.data.expiresIn * 1000);
const expirationDate = new Date(now.getTime() * 1000)
localStorage.setItem(rescodes.localStorage.userId, userId)
localStorage.setItem(rescodes.localStorage.username, username)
localStorage.setItem(rescodes.localStorage.token, x_auth_token)
localStorage.setItem(rescodes.localStorage.userId, iduser)
localStorage.setItem(rescodes.localStorage.expirationDate, expirationDate.toString())
localStorage.setItem(rescodes.localStorage.verifiedEmail, '0')
// dispatch('storeUser', authData);
@@ -407,15 +406,15 @@ namespace Actions {
Mutations.mutations.setServerCode(myres.status)
if (myres.status === 200) {
let iduser = body._id
let userId = body.userId
let username = authData.username
let verifiedEmail = body.verified_email === 'true' || body.verified_email === true
if (process.env.DEV) {
console.log('USERNAME = ' + username)
console.log('IDUSER= ' + iduser)
console.log('IDUSER= ' + userId)
Mutations.mutations.authUser({
userId: userId,
username: username,
userId: iduser,
idToken: x_auth_token,
verifiedEmail: verifiedEmail
})
@@ -424,9 +423,9 @@ namespace Actions {
const now = new Date()
// const expirationDate = new Date(now.getTime() + myres.data.expiresIn * 1000);
const expirationDate = new Date(now.getTime() * 1000)
localStorage.setItem(rescodes.localStorage.userId, userId)
localStorage.setItem(rescodes.localStorage.username, username)
localStorage.setItem(rescodes.localStorage.token, x_auth_token)
localStorage.setItem(rescodes.localStorage.userId, iduser)
localStorage.setItem(rescodes.localStorage.expirationDate, expirationDate.toString())
localStorage.setItem(rescodes.localStorage.isLogged, String(true))
localStorage.setItem(rescodes.localStorage.verifiedEmail, Number(verifiedEmail).toString())
@@ -513,15 +512,15 @@ namespace Actions {
if (now >= expirationDate) {
return false
}
const userId = Number(localStorage.getItem(rescodes.localStorage.userId))
const userId = String(localStorage.getItem(rescodes.localStorage.userId))
const username = String(localStorage.getItem(rescodes.localStorage.username))
const verifiedEmail = localStorage.getItem(rescodes.localStorage.verifiedEmail) === '1'
setGlobal()
Mutations.mutations.authUser({
username: username,
userId: userId,
username: username,
idToken: token,
verifiedEmail: verifiedEmail
})

View File

@@ -13,5 +13,44 @@ export const rescodes = {
userId: 'uid',
token: 'tk',
username: 'uname'
},
Todos: {
PRIORITY_NORMAL: 0,
PRIORITY_HIGH: 10,
PRIORITY_LOW: -10
},
selectPriority: {
'it': [
{
label: 'Alta',
value: 1
},
{
label: 'Normale',
value: 0
},
{
label: 'Bassa',
value: -1
}],
'enUk': [
{
label: 'High',
value: 1
},
{
label: 'Normal',
value: 0
},
{
label: 'Low',
value: -1
}]
}
}