I am currently working on a Vue.js component page that receives data from my backend. The page consists of three different filters/states that users can choose from: Unlabeled, Completed, and Skipped.
- Unlablled
- Completed
- Skipped
My approach involves using collect.js to simplify manipulation of the object containing the records:
let getRecords = () => {
return collect(props.records)
}
const getUnlabeledRecords = () => {
return getRecords()
.where('skipped', false)
.where('processed', false);
}
const getCompletedRecords = () => {
return getRecords()
.where('processed', true);
}
const getSkippedRecords = () => {
return getRecords()
.where('processed', false)
.where('skipped', true);
}
//Load all records on page load.
const allRecords = ref(getUnlabeledRecords());
//Show current record to the user.
const current = ref(allRecords.value.first());
Users can interact with the page by clicking on the filter they prefer:
<a :class="{'bg-gray-100' : currentFilter === 'Unlabeled' }"
@click="allRecords = getUnlabeledRecords(), currentFilter = 'Unlabeled'">
Unlabeled ({{ getUnlabeledRecords().count() }})
</a>
<a :class="{'bg-gray-100' : currentFilter === 'Skipped' }"
@click="allRecords = getSkippedRecords(), currentFilter = 'Skipped'">
Skipped ({{ getSkippedRecords().count() }})
</a>
<a :class="{'bg-gray-100' : currentFilter === 'Completed' }"
@click="allRecords = getCompletedRecords(), currentFilter = 'Completed'">
Completed ({{ getCompletedRecords().count() }})
</a>
Although the code functions as expected, I feel that it is rather cumbersome and lacks scalability. I'm open to suggestions on how to improve this process for future enhancements or additional filtering options.