add a search hook
This commit is contained in:
parent
2db36fe702
commit
920afbeef5
|
@ -13,9 +13,9 @@
|
||||||
export default {
|
export default {
|
||||||
props: ['searchTerm'],
|
props: ['searchTerm'],
|
||||||
emits: ['search'],
|
emits: ['search'],
|
||||||
setup(context) {
|
setup(_, { emit }) {
|
||||||
function search(event) {
|
function search(event) {
|
||||||
context.emit('search', event.target.value);
|
emit('search', event.target.value);
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
search
|
search
|
||||||
|
|
|
@ -8,7 +8,7 @@
|
||||||
></base-search>
|
></base-search>
|
||||||
<ul v-if="hasProjects">
|
<ul v-if="hasProjects">
|
||||||
<project-item
|
<project-item
|
||||||
v-for="prj in availableProjects"
|
v-for="prj in availableItems"
|
||||||
:key="prj.id"
|
:key="prj.id"
|
||||||
:title="prj.title"
|
:title="prj.title"
|
||||||
></project-item>
|
></project-item>
|
||||||
|
@ -21,8 +21,9 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { ref, computed, watch, toRefs } from 'vue';
|
import { computed, watch, toRefs } from 'vue';
|
||||||
import ProjectItem from './ProjectItem.vue';
|
import ProjectItem from './ProjectItem.vue';
|
||||||
|
import useSearch from '../../hooks/search';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
|
@ -30,46 +31,31 @@ export default {
|
||||||
},
|
},
|
||||||
props: ['user'],
|
props: ['user'],
|
||||||
setup(props) {
|
setup(props) {
|
||||||
const activeSearchTerm = ref('');
|
|
||||||
const enteredSearchTerm = ref('');
|
|
||||||
|
|
||||||
const availableProjects = computed(function() {
|
|
||||||
if (activeSearchTerm.value) {
|
|
||||||
return props.user.projects.filter(prj =>
|
|
||||||
prj.title.includes(activeSearchTerm.value)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return props.user.projects;
|
|
||||||
});
|
|
||||||
|
|
||||||
const hasProjects = computed(function() {
|
|
||||||
return props.user.projects && availableProjects.value.length > 0;
|
|
||||||
});
|
|
||||||
|
|
||||||
//const propsWithRefs = toRefs(props);
|
//const propsWithRefs = toRefs(props);
|
||||||
//const user = propsWithRefs.user;
|
//const user = propsWithRefs.user;
|
||||||
const { user } = toRefs(props);
|
const { user } = toRefs(props);
|
||||||
|
|
||||||
watch(enteredSearchTerm, function(newValue) {
|
const projects = computed(function() {
|
||||||
setTimeout(() => {
|
return user.value ? user.value.projects : [];
|
||||||
if (newValue === enteredSearchTerm.value) {
|
|
||||||
activeSearchTerm.value = newValue;
|
|
||||||
}
|
|
||||||
}, 300);
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const { enteredSearchTerm, availableItems, updateSearch } = useSearch(
|
||||||
|
projects,
|
||||||
|
'title'
|
||||||
|
);
|
||||||
|
|
||||||
|
const hasProjects = computed(function() {
|
||||||
|
return props.user.projects && availableItems.value.length > 0;
|
||||||
|
});
|
||||||
|
|
||||||
watch(user, function() {
|
watch(user, function() {
|
||||||
enteredSearchTerm.value = '';
|
enteredSearchTerm.value = '';
|
||||||
});
|
});
|
||||||
|
|
||||||
function updateSearch(val) {
|
|
||||||
enteredSearchTerm.value = val;
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
enteredSearchTerm,
|
enteredSearchTerm,
|
||||||
activeSearchTerm,
|
|
||||||
hasProjects,
|
hasProjects,
|
||||||
availableProjects,
|
availableItems,
|
||||||
updateSearch
|
updateSearch
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -9,9 +9,9 @@
|
||||||
export default {
|
export default {
|
||||||
props: ['id', 'userName'],
|
props: ['id', 'userName'],
|
||||||
emits: ['list-projects'],
|
emits: ['list-projects'],
|
||||||
setup(context) {
|
setup(props, { emit }) {
|
||||||
function viewProjects() {
|
function viewProjects() {
|
||||||
context.emit('list-projects', this.id);
|
emit('list-projects', props.id);
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
viewProjects
|
viewProjects
|
||||||
|
|
|
@ -26,8 +26,9 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { ref, computed, watch } from 'vue';
|
import { ref, computed, toRefs } from 'vue';
|
||||||
import UserItem from './UserItem.vue';
|
import UserItem from './UserItem.vue';
|
||||||
|
import useSearch from '../../hooks/search';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
|
@ -36,39 +37,18 @@ export default {
|
||||||
props: ['users'],
|
props: ['users'],
|
||||||
emits: ['list-projects'],
|
emits: ['list-projects'],
|
||||||
setup(props) {
|
setup(props) {
|
||||||
const enteredSearchTerm = ref('');
|
const { users } = toRefs(props);
|
||||||
const activeSearchTerm = ref('');
|
|
||||||
|
|
||||||
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;
|
|
||||||
});
|
|
||||||
|
|
||||||
function updateSearch(val) {
|
|
||||||
enteredSearchTerm.value = val;
|
|
||||||
}
|
|
||||||
|
|
||||||
watch(enteredSearchTerm, function(newValue) {
|
|
||||||
setTimeout(() => {
|
|
||||||
if (newValue === enteredSearchTerm.value) {
|
|
||||||
activeSearchTerm.value = newValue;
|
|
||||||
}
|
|
||||||
}, 300);
|
|
||||||
});
|
|
||||||
|
|
||||||
|
const { enteredSearchTerm, availableItems, updateSearch } = useSearch(
|
||||||
|
users,
|
||||||
|
'fullName'
|
||||||
|
);
|
||||||
const sorting = ref(null);
|
const sorting = ref(null);
|
||||||
const displayedUsers = computed(function() {
|
const displayedUsers = computed(function() {
|
||||||
if (!sorting.value) {
|
if (!sorting.value) {
|
||||||
return availableUsers.value;
|
return availableItems.value;
|
||||||
}
|
}
|
||||||
return availableUsers.value.slice().sort((u1, u2) => {
|
return availableItems.value.slice().sort((u1, u2) => {
|
||||||
if (sorting.value === 'asc' && u1.fullName > u2.fullName) {
|
if (sorting.value === 'asc' && u1.fullName > u2.fullName) {
|
||||||
return 1;
|
return 1;
|
||||||
} else if (sorting.value === 'asc') {
|
} else if (sorting.value === 'asc') {
|
||||||
|
|
|
@ -0,0 +1,35 @@
|
||||||
|
import { ref, computed, watch } from 'vue';
|
||||||
|
|
||||||
|
export default function useSearch(items, searchProp) {
|
||||||
|
const enteredSearchTerm = ref('');
|
||||||
|
const activeSearchTerm = ref('');
|
||||||
|
|
||||||
|
const availableItems = computed(function() {
|
||||||
|
let filteredItems = [];
|
||||||
|
if (activeSearchTerm.value) {
|
||||||
|
filteredItems = items.value.filter(item =>
|
||||||
|
item[searchProp].includes(activeSearchTerm.value)
|
||||||
|
);
|
||||||
|
} else if (items.value) {
|
||||||
|
filteredItems = items.value;
|
||||||
|
}
|
||||||
|
return filteredItems;
|
||||||
|
});
|
||||||
|
|
||||||
|
function updateSearch(val) {
|
||||||
|
enteredSearchTerm.value = val;
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(enteredSearchTerm, function(newValue) {
|
||||||
|
setTimeout(() => {
|
||||||
|
if (newValue === enteredSearchTerm.value) {
|
||||||
|
activeSearchTerm.value = newValue;
|
||||||
|
}
|
||||||
|
}, 300);
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
enteredSearchTerm,
|
||||||
|
availableItems,
|
||||||
|
updateSearch
|
||||||
|
};
|
||||||
|
}
|
Reference in New Issue