Skip to content

Commit

Permalink
add delete , filter
Browse files Browse the repository at this point in the history
  • Loading branch information
@625781186
625781186 committed Jan 28, 2020
1 parent b6650c2 commit 27670aa
Show file tree
Hide file tree
Showing 8 changed files with 347 additions and 510 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
/node_modules

/谷歌
281 changes: 109 additions & 172 deletions components/table.vue
View file
Original file line number Diff line number Diff line change
@@ -1,206 +1,143 @@
<!--temp-->
<template>
<v-app>
<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
<v-card>
<v-card-title style="background-color: dodgerblue;">
Table
<v-spacer></v-spacer>
<v-btn
:loading="loading"
:disabled="loading"
color="secondary"
@click="getItems"
>
Get Data
</v-btn>
<v-spacer></v-spacer>
<v-text-field
v-model="search"
append-icon="search"
label="Search"
single-line
hide-details
></v-text-field>
</v-card-title>
<v-data-table
:headers="headers"
:items="desserts"
:search="search"
>
<template v-slot:items="props">
<td>
<a :href='props.item.query_field.replace(/[\\]/g, "/")' target="_bank">
<span>{{ props.item.query_field }}</span>
</a>
</td>
<td class=“text-xs-right>{{ props.item.comment }}</td>
<td class="justify-center layout">
<v-icon
small
@click="deleteItem(props.item)"
>
delete
</v-icon>
</td>
<td class="text-xs-right">{{ props.item.position }}</td>
</template>
<template v-slot:no-results>
<v-alert :value="true" color="error" icon="warning">
Your search for "{{ search }}" found no results.
</v-alert>
</template>

<v-data-table
:headers="headers"
:items="desserts"
class="elevation-1"
>
<template v-slot:items="props">
<td>{{ props.item.name }}</td>
<td class="text-xs-right">{{ props.item.calories }}</td>
<td class="text-xs-right">{{ props.item.fat }}</td>
<td class="text-xs-right">{{ props.item.carbs }}</td>
<td class="text-xs-right">{{ props.item.protein }}</td>
<td class="justify-center layout px-0">
<v-icon
small
class="mr-2"
@click="editItem(props.item)"
>
edit
</v-icon>
<v-icon
small
@click="deleteItem(props.item)"
>
delete
</v-icon>
</td>
</template>
<template v-slot:no-data>
<v-btn color="primary" @click="initialize">Reset</v-btn>
</template>
</v-data-table>
</v-app>
</v-data-table>
</v-card>
</template>
<!--JS-->
<script>

export default {
props : {
db_factory: Object,
},
data() {
return {
loader : null,
loading: false,
search : '',


dialog : false,
headers : [
{
text : 'Dessert (100g serving)',
align : 'left',
sortable: false,
value : 'name',
},
{text: 'Calories', value: 'calories'},
{text: 'Fat (g)', value: 'fat'},
{text: 'Carbs (g)', value: 'carbs'},
{text: 'Protein (g)', value: 'protein'},
headers : [
{text: 'Query Field', value: 'query_field', sortable: false,},
{text: 'Comment', value: 'comment', sortable: false},
{text: 'Actions', value: 'name', sortable: false},
{text: 'Position', value: 'position', sortable: false},
],
desserts : [],
editedIndex: -1,
editedItem : {
name : '',
calories: 0,
fat : 0,
carbs : 0,
protein : 0,
},
defaultItem: {
name : '',
calories: 0,
fat : 0,
carbs : 0,
protein : 0,
},

desserts: [],
}
},
created() {

this.initialize()
// this.desserts = [
// {
// query_field: '\\YMFE\\yapi',
// comment : "测试",
// position : "https://github.com/625781186?tab=followers",
// },
// ]
},
methods: {
initialize() {
this.desserts = [
{
name : 'Frozen Yogurt',
calories: 159,
fat : 6.0,
carbs : 24,
protein : 4.0,
},
{
name : 'Ice cream sandwich',
calories: 237,
fat : 9.0,
carbs : 37,
protein : 4.3,
},
{
name : 'Eclair',
calories: 262,
fat : 16.0,
carbs : 23,
protein : 6.0,
},
{
name : 'Cupcake',
calories: 305,
fat : 3.7,
carbs : 67,
protein : 4.3,
},
{
name : 'Gingerbread',
calories: 356,
fat : 16.0,
carbs : 49,
protein : 3.9,
},
{
name : 'Jelly bean',
calories: 375,
fat : 0.0,
carbs : 94,
protein : 0.0,
},
{
name : 'Lollipop',
calories: 392,
fat : 0.2,
carbs : 98,
protein : 0,
},
{
name : 'Honeycomb',
calories: 408,
fat : 3.2,
carbs : 87,
protein : 6.5,
},
{
name : 'Donut',
calories: 452,
fat : 25.0,
carbs : 51,
protein : 4.9,
},
{
name : 'KitKat',
calories: 518,
fat : 26.0,
carbs : 65,
protein : 7,
},
]
},

editItem(item) {
this.editedIndex = this.desserts.indexOf(item)
this.editedItem = Object.assign({}, item)
this.dialog = true
},
getItems() {
this.loader = 'loading';

deleteItem(item) {
const index = this.desserts.indexOf(item)
confirm('Are you sure you want to delete this item?') && this.desserts.splice(index, 1)
this.get_all_doc();
},

close() {
this.dialog = false
setTimeout(() => {
this.editedItem = Object.assign({}, this.defaultItem)
this.editedIndex = -1
}, 300)
},
get_all_doc() {
let docRef = this.db_factory.db.collection("users")
let that = this;
that.desserts.splice(0);
docRef.get()
.then(function (doc) {
for (let i of doc.docs) {
that.desserts.push(i.data());
}

save() {
if (this.editedIndex > -1) {
Object.assign(this.desserts[this.editedIndex], this.editedItem)
}
else {
this.desserts.push(this.editedItem)
}
this.close()
})
.catch(function (error) {
console.log("Error getting document:", error);
// let comment = "error db.";
// addDom_TextArea(index,comment,query_field)
});
},
deleteItem(item) {
const index = this.desserts.indexOf(item);
confirm('Are you sure you want to delete this doc?') && this.delete_doc(index, item);
},
delete_doc(index, item) {
this.desserts.splice(index, 1);
this.db_factory.db_delete_doc(item.query_field);
},

},

computed: {
formTitle() {
return this.editedIndex === -1 ? 'New Item' : 'Edit Item'
},
},
computed: {},

watch: {
dialog(val) {
val || this.close()
loader() {
const l = this.loader;
this[l] = !this[l];
setTimeout(() => (this[l] = false), 3000);
this.loader = null;
},
},
}
</script>
<!--CSS-->
<style scoped src = "../lib/vuetify.min.css">
/*@import */
<style scoped>
[v-cloak] {
display: none
}

.layout {
display: table-cell;
}
</style>
Loading

0 comments on commit 27670aa

Please sign in to comment.