Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings
This repository was archived by the owner on Jun 27, 2024. It is now read-only.

Commit efaf926

Browse files
Merge pull request #26 from protonemedia/table-header-cell-component
2 parents de0d4f9 + dc5b53c commit efaf926

File tree

5 files changed

+142
-0
lines changed

5 files changed

+142
-0
lines changed

‎__tests__/InteractsWithQueryBuilder.test.js‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,52 @@ describe('InteractsWithQueryBuilder.vue', () => {
8989
);
9090
});
9191

92+
it('it provides helper method for table header cells', () => {
93+
const queryBuilderProps = {
94+
sort: "name",
95+
columns: {
96+
name: { key: "name", enabled: true },
97+
email: { key: "email", enabled: false },
98+
country: { key: "country", enabled: false },
99+
},
100+
};
101+
102+
const component = mount(InteractsWithQueryBuilder, {
103+
propsData: {
104+
queryBuilderProps,
105+
},
106+
107+
render() { }
108+
});
109+
110+
expect(component.vm.sortableHeader('name').sortable).toBeTruthy();
111+
expect(component.vm.staticHeader('name').sortable).toBeFalsy();
112+
113+
expect(component.vm.sortableHeader('name').sort).toEqual('asc');
114+
expect(component.vm.sortableHeader('email').sort).toBeFalsy();
115+
expect(component.vm.sortableHeader('country').sort).toBeFalsy();
116+
});
117+
118+
it('it provides helper method for table header cells to switch to sort order', () => {
119+
const queryBuilderProps = {
120+
sort: "name",
121+
columns: {
122+
name: { key: "name", enabled: true },
123+
},
124+
};
125+
126+
const component = mount(InteractsWithQueryBuilder, {
127+
propsData: {
128+
queryBuilderProps,
129+
},
130+
131+
render() { }
132+
});
133+
134+
component.vm.sortableHeader('name').onSort('name');
135+
expect(component.vm.sortableHeader('name').sort).toEqual('desc');
136+
});
137+
92138
it('it toggles a column without changing the page', () => {
93139
const queryBuilderProps = {
94140
columns: {

‎js/Components/HeaderCell.vue‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<script>
2+
export default {
3+
props: {
4+
cell: {
5+
type: Object,
6+
required: true,
7+
},
8+
},
9+
10+
methods: {
11+
onClick() {
12+
this.cell.onSort(this.cell.key);
13+
},
14+
},
15+
};
16+
</script>

‎js/InteractsWithQueryBuilder.vue‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,40 @@ export default {
5757
});
5858
},
5959
60+
staticHeader(columnKey) {
61+
return this._headerCellData(columnKey, false);
62+
},
63+
64+
sortableHeader(columnKey) {
65+
return this._headerCellData(columnKey, true);
66+
},
67+
68+
_headerCellData(columnKey, sortable) {
69+
let sort = false;
70+
71+
if (this.queryBuilderData.sort === columnKey) {
72+
sort = "asc";
73+
} else if (this.queryBuilderData.sort === `-${columnKey}`) {
74+
sort = "desc";
75+
}
76+
77+
let show = true;
78+
79+
if (this.queryBuilderProps.columns) {
80+
const columnData = this.queryBuilderProps.columns[columnKey];
81+
82+
show = columnData ? columnData.enabled : true;
83+
}
84+
85+
return {
86+
key: columnKey,
87+
sort,
88+
show,
89+
sortable,
90+
onSort: this.sortBy,
91+
};
92+
},
93+
6094
sortBy(column) {
6195
this.queryBuilderData.page = 1;
6296
this.queryBuilderData.sort =

‎js/Tailwind2/HeaderCell.vue‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<template>
2+
<th v-show="cell.show" :class="{'cursor-pointer': cell.sortable }" @click.prevent="onClick">
3+
<span class="flex flex-row items-center">
4+
<slot />
5+
6+
<svg
7+
aria-hidden="true"
8+
class="w-3 h-3 ml-2"
9+
:class="{ 'text-gray-400': !cell.sort, 'text-green-500': cell.sort }"
10+
v-if="cell.sortable"
11+
xmlns="http://www.w3.org/2000/svg"
12+
viewBox="0 0 320 512"
13+
>
14+
<path
15+
v-if="!cell.sort"
16+
fill="currentColor"
17+
d="M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41zm255-105L177 64c-9.4-9.4-24.6-9.4-33.9 0L24 183c-15.1 15.1-4.4 41 17 41h238c21.4 0 32.1-25.9 17-41z"
18+
/>
19+
20+
<path
21+
v-if="cell.sort === 'asc'"
22+
fill="currentColor"
23+
d="M279 224H41c-21.4 0-32.1-25.9-17-41L143 64c9.4-9.4 24.6-9.4 33.9 0l119 119c15.2 15.1 4.5 41-16.9 41z"
24+
/>
25+
26+
<path
27+
v-if="cell.sort === 'desc'"
28+
fill="currentColor"
29+
d="M41 288h238c21.4 0 32.1 25.9 17 41L177 448c-9.4 9.4-24.6 9.4-33.9 0L24 329c-15.1-15.1-4.4-41 17-41z"
30+
/>
31+
</svg>
32+
</span>
33+
</th>
34+
</template>
35+
36+
<script>
37+
import HeaderCell from "./../Components/HeaderCell.vue";
38+
39+
export default {
40+
mixins: [HeaderCell],
41+
};
42+
</script>

‎js/index.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import iwqb from './InteractsWithQueryBuilder.vue';
22
export const InteractsWithQueryBuilder = iwqb;
33

44
import ButtonWithDropdownComponent from './Components/ButtonWithDropdown.vue';
5+
import HeaderCellComponent from './Components/HeaderCell.vue';
56
import OnClickOutsideComponent from './Components/OnClickOutside.vue';
67
import PaginationComponent from './Components/Pagination.vue';
78
import TableAddSearchRowComponent from './Components/TableAddSearchRow.vue';
@@ -13,6 +14,7 @@ import TableSearchRowsComponent from './Components/TableSearchRows.vue';
1314

1415
export const Components = {
1516
ButtonWithDropdown: ButtonWithDropdownComponent,
17+
HeaderCell: HeaderCellComponent,
1618
OnClickOutside: OnClickOutsideComponent,
1719
Pagination: PaginationComponent,
1820
Table: TableComponent,
@@ -24,6 +26,7 @@ export const Components = {
2426
};
2527

2628
import Tailwind2ButtonWithDropdown from './Tailwind2/ButtonWithDropdown.vue';
29+
import Tailwind2HeaderCell from './Tailwind2/HeaderCell.vue';
2730
import Tailwind2Pagination from './Tailwind2/Pagination.vue';
2831
import Tailwind2Table from './Tailwind2/Table.vue';
2932
import Tailwind2TableAddSearchRow from './Tailwind2/TableAddSearchRow.vue';
@@ -35,6 +38,7 @@ import Tailwind2TableWrapper from './Tailwind2/TableWrapper.vue';
3538

3639
export const Tailwind2 = {
3740
ButtonWithDropdown: Tailwind2ButtonWithDropdown,
41+
HeaderCell: Tailwind2HeaderCell,
3842
Pagination: Tailwind2Pagination,
3943
Table: Tailwind2Table,
4044
TableAddSearchRow: Tailwind2TableAddSearchRow,

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /