Implement filters

master
KaKi87 7 months ago
parent ceb457de44
commit f0fd441146

@ -11,6 +11,10 @@
align-items: center;
}
.App__Footer__Area--Filters {
justify-content: flex-start;
}
.App__Footer__Area--Pagination {
justify-content: center;
}

@ -1,9 +1,11 @@
import cCheckbox from './c-checkbox.js';
import cButton from './c-button.js';
import style from './AppFooter.css' assert { type: 'css' };
export default {
'components': {
cCheckbox,
cButton
},
'inject': [
@ -13,7 +15,9 @@ export default {
page: undefined
},
'data': () => ({
style
style,
isAnsweredQuestions: undefined,
isCommentedQuestions: undefined
}),
'methods': {
prevPage: function(){
@ -24,11 +28,42 @@ export default {
},
fetchComments: function(){
this.emitter.emit('fetch-comments');
},
toggleAnsweredQuestions: function(value){
this.emitter.emit('toggle-answered-questions', value);
},
toggleCommentedQuestions: function(value){
this.emitter.emit('toggle-commented-questions', value);
},
onToggledAnsweredQuestions: function(value){
this.isAnsweredQuestions = value;
},
onToggledCommentedQuestions: function(value){
this.isCommentedQuestions = value;
}
},
'mounted': function(){
this.emitter.on('toggled-answered-questions', this.onToggledAnsweredQuestions);
this.emitter.on('toggled-commented-questions', this.onToggledCommentedQuestions);
},
'beforeUnmount': function(){
this.emitter.off('toggled-answered-questions', this.onToggledAnsweredQuestions);
this.emitter.off('toggled-commented-questions', this.onToggledCommentedQuestions);
},
'template': `
<footer class="App__Footer">
<p class="App__Footer__Area"><!-- TODO --></p>
<ul class="App__Footer__Area App__Footer__Area--Filters">
<li><c-checkbox
label="Answered questions"
:is-checked="isAnsweredQuestions"
@toggle="toggleAnsweredQuestions"
></c-checkbox></li>
<li><c-checkbox
label="Commented questions"
:is-checked="isCommentedQuestions"
@toggle="toggleCommentedQuestions"
></c-checkbox></li>
</ul>
<p class="App__Footer__Area App__Footer__Area--Pagination">
<button
@click="prevPage"

@ -43,7 +43,7 @@ export default {
},
refresh: async function(){
this.isLoading = true;
this.questions = (await getQuestions({ page: this.page })).filter(({ answerCount }) => !answerCount);
this.questions = await getQuestions({ page: this.page });
this.blacklistedTagNames = JSON.parse(window.localStorage.getItem('blacklistedTagNames') || '[]');
this.whitelistedTagNames = JSON.parse(window.localStorage.getItem('whitelistedTagNames') || '[]');
this.waitlistedTagNames = this.getWaitlistedTagNames();

@ -29,7 +29,8 @@ export default {
style,
isLoading: false,
sortedQuestions: undefined,
sortedQuestionsRefreshTimeout: undefined,
isAnsweredQuestions: undefined,
isCommentedQuestions: undefined,
commentCount: {}
}),
'methods': {
@ -51,6 +52,11 @@ export default {
bountyExpiration: now.to(dayjs(question.bountyExpirationTimestamp))
};
})
.filter(question =>
(this.isAnsweredQuestions ? true : !question.answerCount)
&&
(this.isCommentedQuestions ? true : !this.commentCount[question.id])
)
.sort((a, b) =>
b.matchRate - a.matchRate
||
@ -60,9 +66,20 @@ export default {
);
}
},
toggleAnsweredQuestions: function(value){
this.isAnsweredQuestions = value;
this.refreshSortedQuestions();
this.emitter.emit('toggled-answered-questions', value);
},
toggleCommentedQuestions: function(value){
this.isCommentedQuestions = value;
this.refreshSortedQuestions();
this.emitter.emit('toggled-commented-questions', value);
},
fetchComments: async function(){
this.isLoading = true;
await Promise.all(this.sortedQuestions.map(({ id }) => (async () => this.commentCount[id] = await getQuestionCommentCount({ id }))()));
this.refreshSortedQuestions();
this.isLoading = false;
}
},
@ -71,9 +88,13 @@ export default {
this.$watch(() => this.blacklistedTagNames, this.refreshSortedQuestions, { deep: true });
this.$watch(() => this.whitelistedTagNames, this.refreshSortedQuestions, { deep: true });
this.emitter.on('fetch-comments', this.fetchComments);
this.emitter.on('toggle-answered-questions', this.toggleAnsweredQuestions);
this.emitter.on('toggle-commented-questions', this.toggleCommentedQuestions);
},
'beforeUnmount': function(){
this.emitter.off('fetch-comments', this.fetchComments);
this.emitter.off('toggle-answered-questions', this.toggleAnsweredQuestions);
this.emitter.off('toggle-commented-questions', this.toggleCommentedQuestions);
},
'template': `
<div class="App__Main__Questions">

@ -0,0 +1,5 @@
.c-checkbox {
display: flex;
column-gap: 0.5rem;
align-items: center;
}

@ -0,0 +1,26 @@
import style from './c-checkbox.css' assert { type: 'css' };
export default {
'props': {
label: undefined,
isChecked: undefined
},
'data': () => ({
style
}),
'methods': {
toggle: function(event){
this.$emit('toggle', event.target.checked);
}
},
'template': `
<label
class="c-checkbox"
><input
type="checkbox"
:checked="isChecked"
:key="isChecked"
@click.prevent="toggle"
>{{ label }}</label>
`
};
Loading…
Cancel
Save