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