add a generic sort hook
This commit is contained in:
parent
920afbeef5
commit
3065481a78
|
@ -49,7 +49,7 @@ export default {
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(user, function() {
|
watch(user, function() {
|
||||||
enteredSearchTerm.value = '';
|
updateSearch('');
|
||||||
});
|
});
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
|
|
@ -26,9 +26,10 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { ref, computed, toRefs } from 'vue';
|
import { toRefs } from 'vue';
|
||||||
import UserItem from './UserItem.vue';
|
import UserItem from './UserItem.vue';
|
||||||
import useSearch from '../../hooks/search';
|
import useSearch from '../../hooks/search';
|
||||||
|
import useSort from '../../hooks/sort';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
|
@ -43,27 +44,11 @@ export default {
|
||||||
users,
|
users,
|
||||||
'fullName'
|
'fullName'
|
||||||
);
|
);
|
||||||
const sorting = ref(null);
|
|
||||||
const displayedUsers = computed(function() {
|
|
||||||
if (!sorting.value) {
|
|
||||||
return availableItems.value;
|
|
||||||
}
|
|
||||||
return availableItems.value.slice().sort((u1, u2) => {
|
|
||||||
if (sorting.value === 'asc' && u1.fullName > u2.fullName) {
|
|
||||||
return 1;
|
|
||||||
} else if (sorting.value === 'asc') {
|
|
||||||
return -1;
|
|
||||||
} else if (sorting.value === 'desc' && u1.fullName > u2.fullName) {
|
|
||||||
return -1;
|
|
||||||
} else {
|
|
||||||
return 1;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
function sort(mode) {
|
const { displayedUsers, sort, sorting } = useSort(
|
||||||
sorting.value = mode;
|
availableItems,
|
||||||
}
|
'fullName'
|
||||||
|
);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
enteredSearchTerm,
|
enteredSearchTerm,
|
||||||
|
|
|
@ -0,0 +1,33 @@
|
||||||
|
import { ref, computed } from 'vue';
|
||||||
|
|
||||||
|
export default function useSort(availableItems, sortProp) {
|
||||||
|
const sorting = ref(null);
|
||||||
|
const displayedUsers = computed(function() {
|
||||||
|
if (!sorting.value) {
|
||||||
|
return availableItems.value;
|
||||||
|
}
|
||||||
|
return availableItems.value.slice().sort((item1, item2) => {
|
||||||
|
if (sorting.value === 'asc' && item1[sortProp] > item2[sortProp]) {
|
||||||
|
return 1;
|
||||||
|
} else if (sorting.value === 'asc') {
|
||||||
|
return -1;
|
||||||
|
} else if (
|
||||||
|
sorting.value === 'desc' &&
|
||||||
|
item1[sortProp] > item2[sortProp]
|
||||||
|
) {
|
||||||
|
return -1;
|
||||||
|
} else {
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
function sort(mode) {
|
||||||
|
sorting.value = mode;
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
displayedUsers,
|
||||||
|
sort,
|
||||||
|
sorting
|
||||||
|
};
|
||||||
|
}
|
Reference in New Issue