77 <thead >
88 <tr >
99 <th
10- v-on:click.exact =" sortBy('pool_id')"
11- v-on:click.ctrl.exact =" addSort('pool_id')"
1210:class =" {
1311 active:
1412 sortKeys.includes('pool_id') || sortKeys.includes('-pool_id'),
1513 }"
1614width =" 25px"
15+ @click.exact =" sortBy('pool_id')"
16+ @click.ctrl.exact =" addSort('pool_id')"
1717 >
1818 ID
1919 </th >
2020 <th
21- v-on:click.exact =" sortBy('pool_name_isort')"
22- v-on:click.ctrl.exact =" addSort('pool_name_isort')"
2321:class =" {
2422 active:
2523 sortKeys.includes('pool_name_isort') ||
2624 sortKeys.includes('-pool_name_isort'),
2725 }"
2826width =" 100px"
27+ @click.exact =" sortBy('pool_name_isort')"
28+ @click.ctrl.exact =" addSort('pool_name_isort')"
2929 >
3030 Name
3131 </th >
3232 <th
33- v-on:click.exact =" sortBy('running')"
34- v-on:click.ctrl.exact =" addSort('running')"
3533:class =" {
3634 active:
3735 sortKeys.includes('running') || sortKeys.includes('-running'),
3836 }"
3937width =" 75px"
38+ @click.exact =" sortBy('running')"
39+ @click.ctrl.exact =" addSort('running')"
4040 >
4141 # of Tasks (Running/Requested)
4242 </th >
4343 <th
44- v-on:click.exact =" sortBy('status')"
45- v-on:click.ctrl.exact =" addSort('status')"
4644:class =" {
4745 active:
4846 sortKeys.includes('status') || sortKeys.includes('-status'),
4947 }"
5048width =" 150px"
49+ @click.exact =" sortBy('status')"
50+ @click.ctrl.exact =" addSort('status')"
5151 >
5252 Status
5353 </th >
8181<script >
8282import _throttle from " lodash/throttle"
8383import swal from " sweetalert"
84- import {E_SERVER_ERROR , multiSort from " ../../helpers "
84+ import {computed , defineComponent , ref from " vue "
8585import * as api from " ../../api"
86+ import {E_SERVER_ERROR ,multiSort }from " ../../helpers"
8687
87- export default {
88+ export default defineComponent ({
89+ name: " PoolsList"
8890 mixins: [multiSort],
89- data : function
91+ setup () {
9092const defaultSortKeys = [" pool_name_isort"
9193const validSortKeys = [" pool_id" " pool_name_isort" " running" " status"
92- return {
93- defaultSortKeys: defaultSortKeys,
94- loading: true ,
95- pools: null ,
96- sortKeys: [... defaultSortKeys],
97- validSortKeys: validSortKeys,
98- };
99- },
100- created : function () {
101- this .fetch ();
102- },
103- computed: {
104- orderedPools : function () {
105- return this .sortData (this .pools );
106- },
107- },
108- methods: {
109- buildParams () {
94+ const loading = ref (true );
95+ const pools = ref (null );
96+ const sortKeys = ref ([... defaultSortKeys]);
97+
98+ const buildParams = ()=> {
11099return {
111100 vue: " 1"
112101 };
113- },
114- fetch: _throttle (
115- async function () {
116- this .loading = true ;
102+ };
103+
104+ const fetch = _throttle (
105+ async ()=> {
106+ loading .value = true ;
117107try {
118- const data = await api .listPools (this . buildParams ());
119- this . pools = data .map ((pool )=> {
108+ const data = await api .listPools (buildParams ());
109+ pools . value = data .map ((pool )=> {
120110pool .pool_name_isort = pool .pool_name .toLowerCase ();
121111return pool;
122112 });
@@ -126,17 +116,61 @@ export default {
126116err .response .status === 400 &&
127117err .response .data
128118 ) {
129- // eslint-disable-next-line no-console
130119console .debug (err .response .data );
131120swal (" Oops" E_SERVER_ERROR ," error"
132- this . loading = false ;
121+ loading . value = false ;
133122 }
134123 }
135- this . loading = false ;
124+ loading . value = false ;
136125 },
137126500 ,
138127 { trailing: true },
139- ),
128+ );
129+
130+ const sortBy = (key )=> {
131+ sortKeys .value = [key .startsWith (" -" ? key .slice (1 ): ` -${ key} `
132+ };
133+
134+ const addSort = (key )=> {
135+ const i = sortKeys .value .indexOf (key);
136+ const ni = sortKeys .value .indexOf (` -${ key} `
137+ if (i< 0 && ni< 0 ) {
138+ sortKeys .value .push (key);
139+ }else if (i>= 0 ) {
140+ sortKeys .value [i]= ` -${ key} `
141+ }else if (ni>= 0 ) {
142+ sortKeys .value .splice (ni,1 );
143+ }
144+ };
145+
146+ const sortData = (data )=> {
147+ if (! data)return [];
148+ const keys = sortKeys .value ;
149+ return [... data].sort ((a ,b )=> {
150+ for (const key of keys) {
151+ const desc = key .startsWith (" -"
152+ const k = desc? key .slice (1 ): key;
153+ if (a[k]> b[k])return desc? - 1 : 1 ;
154+ if (a[k]< b[k])return desc? 1 : - 1 ;
155+ }
156+ return 0 ;
157+ });
158+ };
159+
160+ const orderedPools = computed (()=> sortData (pools .value ));
161+
162+ fetch ();
163+
164+ return {
165+ loading,
166+ pools,
167+ sortKeys,
168+ orderedPools,
169+ sortBy,
170+ addSort,
171+ validSortKeys,
172+ defaultSortKeys,
173+ };
140174 },
141- };
175+ }) ;
142176script >
