This repository has been archived on 2021-09-06. You can view files and clone it, but cannot push or open issues or pull requests.
vuejs_course/2021-09-04_composition-13-d.../src/components/users/UserList.vue

105 lines
2.3 KiB
Vue

<template>
<base-container>
<h2>Active Users</h2>
<base-search
@search="updateSearch"
:search-term="enteredSearchTerm"
></base-search>
<div>
<button @click="sort('asc')" :class="{ selected: sorting === 'asc' }">
Sort Ascending
</button>
<button @click="sort('desc')" :class="{ selected: sorting === 'desc' }">
Sort Descending
</button>
</div>
<ul>
<user-item
v-for="user in displayedUsers"
:key="user.id"
:user-name="user.fullName"
:id="user.id"
@list-projects="$emit('list-projects', $event)"
></user-item>
</ul>
</base-container>
</template>
<script>
import { ref, computed, watch } from 'vue';
import UserItem from './UserItem.vue';
export default {
components: {
UserItem
},
props: ['users'],
setup(props) {
const enteredSearchTerm = ref('');
const activeSearchTerm = ref('');
const sorting = ref(null);
const availableUsers = computed(function() {
let users = [];
if (activeSearchTerm.value) {
users = props.users.filter(usr =>
usr.fullName.includes(activeSearchTerm.value)
);
} else if (props.users) {
users = props.users;
}
return users;
});
const displayedUsers = computed(function() {
if (!sorting.value) {
return availableUsers;
}
return availableUsers.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;
}
});
});
watch(enteredSearchTerm, function(val) {
setTimeout(() => {
if (val === enteredSearchTerm.value) {
activeSearchTerm.value = val;
}
}, 300);
});
function updateSearch(val) {
enteredSearchTerm.value = val;
}
function sort(mode) {
sorting.value = mode;
}
return {
enteredSearchTerm,
activeSearchTerm,
sorting,
availableUsers,
displayedUsers,
updateSearch,
sort
};
}
};
</script>
<style scoped>
ul {
list-style: none;
margin: 0;
padding: 0;
}
</style>