Skip to content

Commit

Permalink
Updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@dthigpen
dthigpen committed Oct 5, 2024
1 parent f5772ba commit 407f9e0
Show file tree
Hide file tree
Showing 3 changed files with 79 additions and 86 deletions.
23 changes: 15 additions & 8 deletions css/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -242,9 +242,9 @@ article > header > * {
}
.categories-section > .filters {
display: flex;
flex-direction: column;
/* justify-content: start; */
/* flex-wrap: wrap; */
flex-direction: row;
justify-content: start;
flex-wrap: wrap;
gap: 0.5rem;
}

Expand All @@ -261,12 +261,19 @@ article > header > * {
.categories-section .-gone {
display: none;
}
/* */
/* .categories-section > .filters > [role='group'] { */
/* /* Without max-width groups take up full width */
*/
/* /* max-width: 20rem; */ */
/* margin: 0; */
/* } */

.categories-section > .filters > [role='group'] {
/* Without max-width groups take up full width */
/* max-width: 20rem; */
margin: 0;
button.small,.button.small {
padding: 0.3rem 0.4rem;
}
button.small {

select.small {
padding: 0.3rem 0.4rem;
width: auto;
}
32 changes: 17 additions & 15 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,21 +51,23 @@
<div class="categories-section">
<h4 class="center">Categories</h4>
<div class="filters">
<div role="group" class="types">
<button data-value="income" class="small outline">
Income
</button>
<button data-value="expense" class="small">Expenses</button>
</div>
<div class="scroll-x">
<button data-value="all" class="small outline">All</button>
<button data-value="overbudget" class="small outline">
Overbudget
</button>
<button data-value="ontrack" class="small outline">
On track
</button>
</div>
<select
name="category-type-select"
aria-label="Select category type"
class="small"
>
<option selected value="expense">Expenses</option>
<option value="income">Income</option>
</select>
<select
name="goal-filter-select"
aria-label="Select goal filter"
class="small"
>
<option selected value="all">All</option>
<option value="ontrack">On track</option>
<option value="overbudget">Overbudget</option>
</select>
</div>
<div class="top-categories-list">
<div class="top-categories-item">
Expand Down
110 changes: 47 additions & 63 deletions js/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -422,31 +422,13 @@ function MonthCategoriesPanel(el) {
const categoryFiltersContainer = el.querySelector(
'.categories-section .filters',
);
// const incomeExpensesButtons = categoryFiltersContainer.querySelectorAll('.types button');
const incomeFilterBtn = categoryFiltersContainer.querySelector(
'button[data-value="income"]',
const categoryTypeSelect = categoryFiltersContainer.querySelector(
'select[name="category-type-select"]',
);
const expenseFilterBtn = categoryFiltersContainer.querySelector(
'button[data-value="expense"]',
const goalFilterSelect = categoryFiltersContainer.querySelector(
'select[name="goal-filter-select"]',
);

const categoryTypeFilterBtns = [incomeFilterBtn, expenseFilterBtn];

const allFilterBtn = categoryFiltersContainer.querySelector(
'button[data-value="all"]',
);
const overbudgetFilterBtn = categoryFiltersContainer.querySelector(
'button[data-value="overbudget"]',
);
const onTrackFilterBtn = categoryFiltersContainer.querySelector(
'button[data-value="ontrack"]',
);
const categoryGoalFilterBtns = [
allFilterBtn,
overbudgetFilterBtn,
onTrackFilterBtn,
];

function updateTopCategories() {
// TODO remove add filter buttons if apply to current categories
// e.g. only add overbudget filter if there are overbudget categories
Expand All @@ -455,15 +437,8 @@ function MonthCategoriesPanel(el) {
'.categories-section .top-categories-list',
);
// category type is income or expense
const selectedCategoryType =
categoryFiltersContainer
.querySelector('.types button.selected')
?.getAttribute('data-value') ?? 'expense';

const selectedGoalFilter =
categoryGoalFilterBtns
.find((b) => isButtonSelected(b))
?.getAttribute('data-value') ?? 'all';
const selectedCategoryType = categoryTypeSelect.value;
const selectedGoalFilter = goalFilterSelect.value;
topCategoriesList.scrollTop = 0;
const rowClass = 'top-categories-item';
topCategoriesList
Expand Down Expand Up @@ -592,55 +567,64 @@ function MonthCategoriesPanel(el) {
});

topCategoriesList.innerHTML = itemsHtml;
const onTrackOption = goalFilterSelect.querySelector(
'option[value="ontrack"]',
);
const overbudgetOption = goalFilterSelect.querySelector(
'option[value="overbudget"]',
);
const allOption = goalFilterSelect.querySelector('option[value="all"]');

overbudgetFilterBtn.textContent = `(${overbudgetCount}) Overbudget`;
onTrackFilterBtn.textContent = `(${onTrackCount}) On Track`;
allFilterBtn.textContent = `(${allCount}) All`;

// hide overbudget category if type fitler is Income
if (selectedCategoryType === CategoryType.EXPENSE) {
displayElement(overbudgetFilterBtn, true);
} else {
displayElement(overbudgetFilterBtn, false);
function disableElement(el, disable = true) {
if (disable) {
el.setAttribute('disable', 'true');
} else {
el.removeAttribute('disable');
}
}
overbudgetOption.textContent = `(${overbudgetCount}) Overbudget`;
disableElement(overbudgetOption, overbudgetCount === 0);

onTrackOption.textContent = `(${onTrackCount}) On Track`;
disableElement(onTrackOption, onTrackCount === 0);

allOption.textContent = `(${allCount}) All`;
disableElement(allOption, allCount === 0);
}

appContext.addEventListener('transactionsChange', updateTopCategories);
appContext.addEventListener('budgetChange', updateTopCategories);
appContext.addEventListener('selectedMonthChange', updateTopCategories);

// setup event listeners for each btn
categoryTypeFilterBtns.forEach((typeBtn) => {
unselectButton(typeBtn);
typeBtn.addEventListener('click', () => {
categoryTypeFilterBtns.forEach((b) => unselectButton(b));
selectButton(typeBtn);
// reset goal filter to "All"
categoryGoalFilterBtns.forEach((b) => unselectButton(b));
selectButton(allFilterBtn);
updateTopCategories();
});
goalFilterSelect.addEventListener('change', (e) => {
updateTopCategories();
});
// select Expenses by default
selectButton(expenseFilterBtn);

categoryGoalFilterBtns.forEach((filterBtn) => {
unselectButton(filterBtn);
filterBtn.addEventListener('click', () => {
categoryGoalFilterBtns.forEach((b) => unselectButton(b));
selectButton(filterBtn);
updateTopCategories();
});
});
// select All by default
selectButton(allFilterBtn);

// categoryTypeSelect.value = 'expense';
// goalFilterSelect.value = 'all';
}

function SetupSelect(selectEl) {
//disable initially selected
selectEl.querySelector('option[selected]')?.setAttribute('disabled', 'true');
selectEl.addEventListener('change', (e) => {
const value = e.target.value;
selectEl
.querySelectorAll('option')
.forEach((el) => el.removeAttribute('disable'));
selectEl
.querySelector(`option[selected]`)
?.setAttribute('disabled', 'true');
console.log(`option[value="${value}"]`);
});
}
const app = () => {
console.log('Loading app');
// register custom elements
registerAppContext();
// Setup mount function components
// document.querySelectorAll('select').forEach(el => SetupSelect(el))
MonthPicker(document.querySelector('.month-picker'));
MonthTotalsPanel(document.querySelector('.totals-section'));
MonthCategoriesPanel(document.querySelector('.breakdown-sections-container'));
Expand Down

0 comments on commit 407f9e0

Please sign in to comment.