Skip to content

K
kiaisoft_tuananh_nuxt
Commit 08b143ed authored by TTS Kieu Tuan Anh's avatar TTS Kieu Tuan Anh
Browse files
Options

add search to table

parent 7ae0989e
Hide whitespace changes
Inline Side-by-side
Showing with 119 additions and 45 deletions
pages/categories/index.vue
View file @ 08b143ed
...@@ -45,7 +45,13 @@ ...@@ -45,7 +45,13 @@
item-text="name" item-text="name"
item-value="id" item-value="id"
label="Parent" label="Parent"
/> >
<template #item="{item}">
<div :class="`category-${item.depth}`">
{{ item.name }}
</div>
</template>
</v-autocomplete>
<!-- <v-card class="mx-auto" max-width="500" dark> <!-- <v-card class="mx-auto" max-width="500" dark>
<v-sheet> <v-sheet>
<v-text-field <v-text-field
...@@ -75,32 +81,31 @@ ...@@ -75,32 +81,31 @@
@input="selectCategory" @input="selectCategory"
/> />
</v-card-text> </v-card-text>
</v-card> </v-card> -->
</v-col> --> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-file-input <v-file-input
v-model="eImage" v-model="eImage"
accept="image/*" accept="image/*"
label="Image" label="Image"
prepend-icon="mdi-camera" prepend-icon="mdi-camera"
@change="fileSelected" @change="fileSelected"
/> />
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<img <img
v-if="file" v-if="file"
:src="file" :src="file"
> >
</v-col> </v-col>
<v-col cols="12" text-align=" left"> <v-col cols="12" text-align=" left">
<v-img <v-img
v-if="typeof eImage === 'string'" v-if="typeof eImage === 'string'"
contain contain
height="100px" height="100px"
width="150px" width="150px"
:src="eImage" :src="eImage"
/> />
</v-col>
</v-col> </v-col>
</v-row> </v-row>
</v-form> </v-form>
...@@ -138,11 +143,19 @@ ...@@ -138,11 +143,19 @@
:headers="headers" :headers="headers"
:items="categories" :items="categories"
:item-class="indentation" :item-class="indentation"
:search="searchTable"
sort-by="calories" sort-by="calories"
class="elevation-1" class="elevation-1"
> >
<template #top> <template #top>
<v-toolbar flat> <v-toolbar flat>
<v-text-field
v-model="searchTable"
append-icon="mdi-magnify"
label="Search"
single-line
hide-details
/>
<v-spacer /> <v-spacer />
<v-toolbar-title style="float: right"> <v-toolbar-title style="float: right">
<v-dialog <v-dialog
...@@ -191,7 +204,13 @@ ...@@ -191,7 +204,13 @@
item-value="id" item-value="id"
label="Parent*" label="Parent*"
:rules="requiredRules" :rules="requiredRules"
/> >
<template #item="{item}">
<div :class="`category-${item.depth}`">
{{ item.name }}
</div>
</template>
</v-autocomplete>
</v-col> </v-col>
<!-- <v-col cols="12"> <!-- <v-col cols="12">
<v-card class="mx-auto" max-width="500" dark> <v-card class="mx-auto" max-width="500" dark>
...@@ -384,8 +403,8 @@ export default { ...@@ -384,8 +403,8 @@ export default {
middleware: ['web'], middleware: ['web'],
data: () => { data: () => {
return { return {
open: [1, 2], search: '',
search: null, searchTable: '',
file: null, file: null,
parent_id: '', parent_id: '',
name: '', name: '',
...@@ -401,18 +420,16 @@ export default { ...@@ -401,18 +420,16 @@ export default {
{ {
text: '#', text: '#',
align: 'start', align: 'start',
value: 'index', value: 'index'
groupable: false
}, },
{ text: 'Name', value: 'name', groupable: false }, { text: 'Name', value: 'name', groupable: false },
{ text: 'Ordering', value: 'ordering', groupable: false }, { text: 'Ordering', value: 'ordering', filterable: true },
{ text: 'Created', value: 'created_at', groupable: false }, { text: 'Created', value: 'created_at' },
{ text: 'Updated', value: 'updated_at', groupable: false }, { text: 'Updated', value: 'updated_at' },
{ {
text: 'Actions', text: 'Actions',
value: 'actions', value: 'actions',
sortable: false, sortable: false
groupable: false
} }
], ],
categories: [], categories: [],
...@@ -734,6 +751,15 @@ export default { ...@@ -734,6 +751,15 @@ export default {
.depth-5 > td:nth-child(2) { .depth-5 > td:nth-child(2) {
padding-left: 150px !important; padding-left: 150px !important;
} }
.category-1 {
padding-left: 30px !important;
}
.category-2 {
padding-left: 60px !important;
}
.category-3 {
padding-left: 90px !important;
}
img { img {
width: 100px; width: 100px;
height: 150px; height: 150px;
......
pages/posts/index.vue
View file @ 08b143ed
...@@ -213,9 +213,16 @@ ...@@ -213,9 +213,16 @@
</v-dialog> </v-dialog>
<!-- table --> <!-- table -->
<div> <div>
<v-data-table :headers="headers" :items="posts" sort-by="calories" class="elevation-1"> <v-data-table :headers="headers" :items="posts" :search="searchTable" sort-by="calories" class="elevation-1" >
<template #top> <template #top>
<v-toolbar flat> <v-toolbar flat>
<v-text-field
v-model="searchTable"
append-icon="mdi-magnify"
label="Search"
single-line
hide-details
/>
<v-spacer /> <v-spacer />
<v-toolbar-title> <v-toolbar-title>
<!-- modal-create --> <!-- modal-create -->
...@@ -376,6 +383,7 @@ export default { ...@@ -376,6 +383,7 @@ export default {
middleware: ['web'], middleware: ['web'],
data: () => { data: () => {
return { return {
searchTable: '',
file: null, file: null,
dialog1: false, dialog1: false,
dialog2: false, dialog2: false,
......
pages/products/index.vue
View file @ 08b143ed
...@@ -139,14 +139,21 @@ ...@@ -139,14 +139,21 @@
<v-col <v-col
cols="12" cols="12"
> >
<v-select <v-autocomplete
v-model="eCategoryId" v-model="eCategoryId"
class="select--menu my-select"
:items="categories" :items="categories"
item-text="name" item-text="name"
item-value="id" item-value="id"
label="Category" label="Category"
:rules="requiredRules" :rules="requiredRules"
/> >
<template #item="{item}">
<div :class="`category-${item.depth}`">
{{ item.name }}
</div>
</template>
</v-autocomplete>
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-text-field <v-text-field
...@@ -325,11 +332,19 @@ ...@@ -325,11 +332,19 @@
<v-data-table <v-data-table
:headers="headers" :headers="headers"
:items="products" :items="products"
:search="searchTable"
sort-by="calories" sort-by="calories"
class="elevation-1" class="elevation-1"
> >
<template #top> <template #top>
<v-toolbar flat> <v-toolbar flat>
<v-text-field
v-model="searchTable"
append-icon="mdi-magnify"
label="Search"
single-line
hide-details
/>
<v-spacer /> <v-spacer />
<v-toolbar-title> <v-toolbar-title>
<v-dialog <v-dialog
...@@ -369,14 +384,20 @@ ...@@ -369,14 +384,20 @@
<v-col <v-col
cols="12" cols="12"
> >
<v-select <v-autocomplete
v-model="category_id" v-model="category_id"
:items="categories" :items="categories"
item-text="name" item-text="name"
item-value="id" item-value="id"
label="Category" label="Category"
:rules="requiredRules" :rules="requiredRules"
/> >
<template #item="{item}">
<div :class="`category-${item.depth}`">
{{ item.name }}
</div>
</template>
</v-autocomplete>
</v-col> </v-col>
<v-col cols="12"> <v-col cols="12">
<v-text-field <v-text-field
...@@ -550,6 +571,7 @@ export default { ...@@ -550,6 +571,7 @@ export default {
middleware: ['web'], middleware: ['web'],
data: () => { data: () => {
return { return {
searchTable: '',
files: [], files: [],
name: '', name: '',
id: '', id: '',
...@@ -1030,8 +1052,17 @@ export default { ...@@ -1030,8 +1052,17 @@ export default {
} }
</script> </script>
<style> <style>
img { .category-1 {
width: 100px; padding-left: 30px !important;
height: 150px; }
.category-2 {
padding-left: 60px !important;
}
.category-3 {
padding-left: 90px !important;
}
img {
width: 100px;
height: 150px;
} }
</style> </style>
pages/users/index.vue
View file @ 08b143ed
...@@ -88,11 +88,19 @@ ...@@ -88,11 +88,19 @@
<v-data-table <v-data-table
:headers="headers" :headers="headers"
:items="users" :items="users"
:search="searchTable"
sort-by="calories" sort-by="calories"
class="elevation-1" class="elevation-1"
> >
<template #top> <template #top>
<v-toolbar flat> <v-toolbar flat>
<v-text-field
v-model="searchTable"
append-icon="mdi-magnify"
label="Search"
single-line
hide-details
/>
<v-spacer /> <v-spacer />
<v-toolbar-title style="float: right"> <v-toolbar-title style="float: right">
<v-dialog <v-dialog
...@@ -214,6 +222,7 @@ export default { ...@@ -214,6 +222,7 @@ export default {
middleware: ['web'], middleware: ['web'],
data: () => { data: () => {
return { return {
searchTable: '',
valid: true, valid: true,
email: '', email: '',
name: '', name: '',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment