- q-table component,
- delete item in indexdb
This commit is contained in:
Paolo Arena
6
docs/docs.txt
Normal file
6
docs/docs.txt
Normal file
@@ -0,0 +1,6 @@
|
||||
xs 576px Extra small sized window
|
||||
sm 768px Small sized window
|
||||
md 992px Medium-sized window
|
||||
lg 1200px Large sized window
|
||||
xl Infinite Extra large sized window
|
||||
|
||||
@@ -146,6 +146,7 @@ module.exports = function (ctx) {
|
||||
'QSpinnerGears',
|
||||
'QDatetime',
|
||||
'QSlideTransition',
|
||||
'QTable',
|
||||
],
|
||||
directives: [
|
||||
'Ripple',
|
||||
|
||||
@@ -1,3 +1,17 @@
|
||||
.mycard {
|
||||
visibility: hidden;
|
||||
#appsinglecat {
|
||||
color: white;
|
||||
font-size: 1.2rem;
|
||||
display: flex;
|
||||
margin: 2px;
|
||||
padding: 3px;
|
||||
border: 2px;
|
||||
background-color: #3b5998;
|
||||
}
|
||||
|
||||
.mycols{
|
||||
padding: 1px;
|
||||
margin: 2px;
|
||||
border-color: #d50000;
|
||||
border-style: outset;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
@@ -11,8 +11,13 @@ import { ICategory } from '../../../model/index'
|
||||
export default class SingleCat extends Vue {
|
||||
@Prop({required: true}) itemcat: ICategory
|
||||
|
||||
|
||||
created() {
|
||||
|
||||
}
|
||||
|
||||
remove() {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,6 +1,17 @@
|
||||
<template>
|
||||
<div id="appsinglecat">
|
||||
Descr: {{ itemcat.descr_it }}
|
||||
<div id="appsinglecat" class="flex-row-docs">
|
||||
<!--
|
||||
<div class="doc-container">
|
||||
<div class="row gutter-sm">
|
||||
<div class="col-xs-12 col-sm-6 mycols">IT: {{ itemcat.descr_it }}</div>
|
||||
<div class="col-xs-12 col-sm-6 mycols">EN: {{ itemcat.descr_en }}</div>
|
||||
<div class="col-12 mycols">
|
||||
<q-btn round color="primary" icon="remove" @click="remove()"></q-btn>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import Vue from 'vue'
|
||||
import { Component } from 'vue-property-decorator'
|
||||
import { Component, Watch } from 'vue-property-decorator'
|
||||
|
||||
import { SingleCat } from '@components'
|
||||
import { ICategory } from '@src/model'
|
||||
@@ -11,16 +11,68 @@ require('./category.scss')
|
||||
components: { SingleCat }
|
||||
})
|
||||
export default class Category extends Vue {
|
||||
$q: any
|
||||
|
||||
filter: boolean = false
|
||||
title: string = ''
|
||||
category: string = ''
|
||||
categories_arr: any[] = null
|
||||
categories_loc: any[] = [{}]
|
||||
categories_arr: any[] = [{}]
|
||||
selected: any [] = []
|
||||
selectedSecond: any [] = []
|
||||
|
||||
data: any [] = [{
|
||||
id: 0,
|
||||
descr_it: 'Frozen Yogurt',
|
||||
descr_en: '',
|
||||
descr_es: ''
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
descr_it: 'Secondo',
|
||||
descr_en: '',
|
||||
descr_es: ''
|
||||
}]
|
||||
|
||||
columns: any [] = [
|
||||
{
|
||||
name: 'descr_it',
|
||||
required: true,
|
||||
label: 'IT',
|
||||
align: 'left',
|
||||
field: 'descr_it',
|
||||
sortable: true,
|
||||
classes: 'my-class',
|
||||
},
|
||||
{
|
||||
name: 'descr_en',
|
||||
label: 'EN',
|
||||
align: 'left',
|
||||
field: 'descr_en',
|
||||
sortable: true,
|
||||
classes: 'my-class',
|
||||
},
|
||||
{
|
||||
name: 'descr_es',
|
||||
label: 'ES',
|
||||
align: 'left',
|
||||
field: 'descr_es',
|
||||
sortable: true,
|
||||
classes: 'my-class',
|
||||
}
|
||||
]
|
||||
|
||||
@Watch('categories_loc') valueChanged() {
|
||||
this.updatetable()
|
||||
}
|
||||
|
||||
|
||||
created() {
|
||||
this.loadCat()
|
||||
}
|
||||
|
||||
async loadCat() {
|
||||
await this.$db.categories.toArray().then(ris => this.categories_arr = ris)
|
||||
await this.$db.categories.toArray().then(ris => this.categories_loc = ris)
|
||||
|
||||
this.updatetable()
|
||||
}
|
||||
@@ -28,7 +80,6 @@ export default class Category extends Vue {
|
||||
initcat() {
|
||||
|
||||
const objcat: ICategory = {
|
||||
id: 0,
|
||||
descr_it: '',
|
||||
descr_en: '',
|
||||
descr_es: ''
|
||||
@@ -50,19 +101,45 @@ export default class Category extends Vue {
|
||||
myid = ris
|
||||
})
|
||||
|
||||
// created_at: new Date(),
|
||||
|
||||
objcat.id = myid
|
||||
|
||||
// Add into the memory
|
||||
this.categories_arr.push(objcat)
|
||||
this.categories_loc.push(objcat)
|
||||
|
||||
// empty the field
|
||||
this.category = ''
|
||||
}
|
||||
|
||||
async deleteCategory(myarrobj) {
|
||||
|
||||
await myarrobj.forEach(myobj => {
|
||||
|
||||
if (myobj.id !== undefined) {
|
||||
console.log('KEY = ', myobj.id)
|
||||
|
||||
// Delete item
|
||||
let deleteCount = this.$db.categories
|
||||
.where('id').equals(myobj.id)
|
||||
.delete()
|
||||
|
||||
console.log('deleteCount = ', deleteCount)
|
||||
if (deleteCount > 0) {
|
||||
// Remove into the memory
|
||||
this.categories_loc.slice(this.categories_loc.indexOf(myobj), 1)
|
||||
|
||||
this.updatetable()
|
||||
|
||||
return deleteCount
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
updatetable() {
|
||||
|
||||
this.filterCategories()
|
||||
this.categories_arr = [...this.categories_loc]
|
||||
|
||||
}
|
||||
|
||||
@@ -76,13 +153,48 @@ export default class Category extends Vue {
|
||||
.then((response) => {
|
||||
Promise.all(response.map(key => key))
|
||||
.then((myarr) => {
|
||||
this.categories_arr = [...myarr]
|
||||
return this.categories_arr
|
||||
this.categories_loc = [...myarr]
|
||||
return this.categories_loc
|
||||
})
|
||||
})
|
||||
} else {
|
||||
return this.categories_arr
|
||||
return this.categories_loc
|
||||
}
|
||||
}
|
||||
|
||||
deleteRow() {
|
||||
console.log('SEL = ', this.selectedSecond)
|
||||
|
||||
const seldel = [...this.selectedSecond]
|
||||
if (this.deleteCategory(this.selectedSecond)) {
|
||||
this.$q.notify({
|
||||
color: 'primary',
|
||||
icon: 'delete',
|
||||
message: `Deleted ` + (seldel.length.toString()) + ' item'
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/*
|
||||
await db.transaction('rw', [db.friends], async () => {
|
||||
const friend = await db.friends.get(1);
|
||||
++friend.age;
|
||||
await db.friends.put(friend);
|
||||
});
|
||||
*/
|
||||
|
||||
async modify() {
|
||||
// esempio da sistemare
|
||||
await this.$db.transaction('rw', [this.$db.categories], async () => {
|
||||
const friend = await this.$db.get(1)
|
||||
++friend.age
|
||||
await this.$db.put(friend)
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -7,11 +7,53 @@
|
||||
:after="[{icon: 'arrow_forward', content: true, handler () {}}]"
|
||||
v-on:keyup.enter="insertCategory"/>
|
||||
|
||||
<ul>
|
||||
Lista:
|
||||
<q-table
|
||||
title="Categories"
|
||||
:data="categories_arr"
|
||||
:columns="columns"
|
||||
row-key="id"
|
||||
selection="multiple"
|
||||
color="secondary"
|
||||
:selected.sync="selectedSecond">
|
||||
|
||||
<SingleCat :itemcat='mycat' v-for="mycat of categories_arr" :key="mycat.id"/>
|
||||
</ul>
|
||||
|
||||
<!--
|
||||
|
||||
<q-tr slot="body" slot-scope="props" :props="props">
|
||||
<q-td key="desc" :props="props">
|
||||
{{ props.row.name }}
|
||||
<q-popup-edit v-model="props.row.name">
|
||||
<q-field count>
|
||||
<q-input v-model="props.row.name" />
|
||||
</q-field>
|
||||
</q-popup-edit>
|
||||
</q-td>
|
||||
<q-td key="calories" :props="props">
|
||||
{{ props.row.calories }}
|
||||
<q-popup-edit v-model="props.row.calories" title="Update calories" buttons>
|
||||
<q-input type="number" v-model="props.row.calories" />
|
||||
</q-popup-edit>
|
||||
</q-td>
|
||||
<q-td key="fat" :props="props">{{ props.row.fat }}</q-td>
|
||||
<q-td key="carbs" :props="props">{{ props.row.carbs }}</q-td>
|
||||
<q-td key="protein" :props="props">{{ props.row.protein }}</q-td>
|
||||
<q-td key="sodium" :props="props">{{ props.row.sodium }}</q-td>
|
||||
<q-td key="calcium" :props="props">{{ props.row.calcium }}</q-td>
|
||||
<q-td key="iron" :props="props">{{ props.row.iron }}</q-td>
|
||||
</q-tr>
|
||||
-->
|
||||
|
||||
<!-- gets displayed only when there's at least one row selected -->
|
||||
<template slot="top-selection" slot-scope="props">
|
||||
<!--<q-btn color="secondary" flat label="Action 1" class="q-mr-sm"/>
|
||||
<q-btn color="secondary" flat label="Action 2"/>-->
|
||||
<div class="col"/>
|
||||
<q-btn color="negative" flat round delete icon="delete" @click="deleteRow"/>
|
||||
</template>
|
||||
</q-table>
|
||||
|
||||
|
||||
<!-- <SingleCat :itemcat='mycat' v-for="mycat of categories_arr" :key="mycat.id"/> -->
|
||||
</div>
|
||||
</q-page>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user