88 <IconList class =" settings-line__icon" />
99 <NcSelect
1010 id =" sort-by"
11- :value = " orderKeyOption "
11+ v-model = " selected "
1212 :searchable =" false"
1313 :allow-empty =" false"
1414 :options =" options"
15- :custom-label =" formatSortByLabel"
16- :get-option-key =" (option) => option.key"
15+ :input-label =" t('contacts', 'Sort by')"
1716 label =" label"
18- @input =" sortContacts" />
17+ @update:model-value =" sortContacts" />
1918 </div >
2019</template >
2120
@@ -31,57 +30,54 @@ export default {
3130 IconList,
3231 },
3332
33+ data () {
34+ return {
35+ selected: null
36+ }
37+ },
38+
39+ beforeMount () {
40+ this .selected = this .$store .getters .getOrderKey
41+ },
42+
3443 computed: {
3544 /* Order Keys */
3645 options () {
3746 return [
3847 {
3948 label: t (' contacts' , ' First name' ),
40- key : ' firstName' ,
49+ value : ' firstName' ,
4150 },
4251 {
4352 label: t (' contacts' , ' Last name' ),
44- key : ' lastName' ,
53+ value : ' lastName' ,
4554 },
4655 {
4756 label: t (' contacts' , ' Phonetic first name' ),
48- key : ' phoneticFirstName' ,
57+ value : ' phoneticFirstName' ,
4958 },
5059 {
5160 label: t (' contacts' , ' Phonetic last name' ),
52- key : ' phoneticLastName' ,
61+ value : ' phoneticLastName' ,
5362 },
5463 {
5564 label: t (' contacts' , ' Display name' ),
56- key : ' displayName' ,
65+ value : ' displayName' ,
5766 },
5867 {
5968 label: t (' contacts' , ' Last modified' ),
60- key : ' rev' ,
69+ value : ' rev' ,
6170 },
6271 ]
6372 },
64-
65- /* Current order Key */
66- orderKey () {
67- return this .$store .getters .getOrderKey
68- },
69-
70- orderKeyOption () {
71- return this .options .filter ((option ) => option .key === this .orderKey )[0 ]
72- },
7373 },
7474
7575 methods: {
76- sortContacts (orderKey ) {
77- const key = orderKey && orderKey . key ? orderKey . key : ' displayName'
78- this .$store .commit (' setOrder' , key )
76+ sortContacts (selected ) {
77+ const value = selected && selected . value ? selected . value : ' displayName'
78+ this .$store .commit (' setOrder' , value )
7979 this .$store .commit (' sortContacts' )
80- localStorage .setItem (' orderKey' , key)
81- },
82-
83- formatSortByLabel (option ) {
84- return t (' contacts' , ' Sort by {sorting}' , { sorting: option .label })
80+ localStorage .setItem (' orderKey' , value)
8581 },
8682 },
8783}
0 commit comments