Handle selected, favourite classes and rerendering of the favcat accordingly

This commit is contained in:
Robin Scholtes 2023-07-21 11:48:43 +12:00
parent 5f32df891b
commit 840b6155f1
2 changed files with 28 additions and 17 deletions

View file

@ -417,27 +417,27 @@ class App {
favourites.push(name);
this.updateFavourites(favourites);
this.manager.ops.updateListItemsClasses('#rec-list', 'selected');
}
/**
* Update favourites in localstorage, load the updated
* favourites and re-render c-category-li [favourites]
* favourites and rebuild cat fav-list to reflect the updates
*
* @param {string[]} favourites
*/
updateFavourites(favourites) {
// @todo: probably need this elsewhere
// // Destroy the current list items we no longer need in the edit Favourites modal
// const operations = document.querySelectorAll("#editable-favourites ....");
// listItems.forEach((li => {
// li.remove();
// }))
updateFavourites(favourites) {
this.saveFavourites(favourites);
this.loadFavourites();
this.buildFavouritesCategory();
}
/* Rebuild only the favourites category */
/**
* (Re)render only the favourites category after adding
* an operation to favourites
*/
buildFavouritesCategory() {
// double-check if the first category is indeed "catFavourites",
if (document.querySelector("c-category-list > ul > c-category-li > li > a[data-target='#catFavourites']")) {
// then destroy
@ -900,6 +900,12 @@ class App {
* @fires Manager#oplistcreate from nested c-category-li > c-operation-list build() function
*/
buildCategoryList() {
// double-check if the c-category-list already exists,
if (document.querySelector("#categories > c-category-list")){
// then destroy it
document.querySelector("#categories > c-category-list").remove();
}
const categoryList = new CCategoryList(
this,
this.categories,

View file

@ -242,13 +242,17 @@ class OperationsWaiter {
/**
* Handler for edit favourites click events.
* Sets up the 'Edit favourites' pane and displays it.
*
// * @param {Event} e
*/
editFavouritesClick() {
const div = document.getElementById("editable-favourites");
// Remove c-operation-list if there already was one
if ( div.querySelector("c-operation-list") ){
div.removeChild(div.querySelector("c-operation-list"));
}
// Get list of Favourite operation names
const favCatConfig = this.app.categories.find(catConfig => catConfig.name === "Favourites");
const div = document.getElementById("editable-favourites");
if(favCatConfig !== undefined) {
const opList = new COperationList(
@ -263,6 +267,7 @@ class OperationsWaiter {
opList.build();
// Append the new opList<COperationList>
div.appendChild(opList);
}
@ -366,7 +371,7 @@ class OperationsWaiter {
*/
updateListItemsClasses(srcListSelector, className) {
const listItems = document.querySelectorAll(`${srcListSelector} > li`);
const ops = document.querySelectorAll("c-operation-li > li.operation");
const ops = document.querySelectorAll("#categories c-operation-li > li.operation");
this.removeClassFromOps(className);
@ -389,7 +394,7 @@ class OperationsWaiter {
* @param {string} className - the class to remove
*/
removeClassFromOps(className) {
const ops = document.querySelectorAll("c-operation-li > li.operation");
const ops = document.querySelectorAll("#categories c-operation-li > li.operation");
ops.forEach((op => {
this.removeClassFromOp(op.getAttribute("data-name"), className);
@ -404,7 +409,7 @@ class OperationsWaiter {
* @param {string} className - the class to remove
*/
removeClassFromOp(opName, className) {
const ops = document.querySelectorAll(`c-operation-li > li.operation[data-name="${opName}"].${className}`);
const ops = document.querySelectorAll(`#categories c-operation-li > li.operation[data-name="${opName}"].${className}`);
// the same operation may occur twice if it is also in #catFavourites
ops.forEach((op) => {
@ -420,7 +425,7 @@ class OperationsWaiter {
* @param {string} className - the class to add to the operation list item
*/
addClassToOp(opName, className) {
const ops = document.querySelectorAll(`c-operation-li > li.operation[data-name="${opName}"]`);
const ops = document.querySelectorAll(`#categories c-operation-li > li.operation[data-name="${opName}"]`);
// the same operation may occur twice if it is also in #catFavourites
ops.forEach((op => {