Make filters by all options at once

Before script has been separated on two groups: for learning type and
course category and for school and sorting. It means when school is
choosen, learning type and course category resets on update.

TODO: need to add pagination
This commit is contained in:
Aleksandr Trushkin
2024-05-02 23:24:41 +03:00
parent e8ac96a065
commit 1a31006b21
6 changed files with 116 additions and 59 deletions

View File

@ -1 +1 @@
c2a78909343b26a169423b19ada40fad
74bbe98d65787355f45c5d800fc71f11

View File

@ -122,20 +122,13 @@ templ footer() {
}
script elementScriptsLoad() {
const formFilterOnSubmit = event => {
event.preventDefault();
const loadInputValues = () => {
const lt = document.getElementById('learning-type-filter');
const ct = document.getElementById('course-thematic-filter');
const prefix = (lt !== null && lt.value !== '') ? `/courses/${lt.value}` : `/courses`;
const out = (ct !== null && ct.value !== '') ? `${prefix}/${ct.value}` : prefix;
const base_url = (ct !== null && ct.value !== '') ? `${prefix}/${ct.value}` : prefix;
document.location.assign(out);
return false;
};
const filterBySchool = () => {
const school_selector = document.getElementById('schoolSelect');
const school_id = (school_selector !== null && school_selector.value !== '') ? school_selector.value : '';
@ -144,6 +137,50 @@ script elementScriptsLoad() {
const ascending = document.getElementById('sortByOrder');
params = [];
if (school_id) {
params.push(`school_id=${school_id}`);
};
if (order_by_value) {
params.push(`order_by=${order_by_value}`);
};
if (ascending && ascending.checked) {
params.push(`asc=true`);
};
const final_url = base_url + "?" + params.join("&");
return {
base_url: base_url,
final_url: final_url,
school_id: school_id,
order_by: order_by_value,
ascending: ascending,
}
};
const formFilterOnSubmit = event => {
event.preventDefault();
// const lt = document.getElementById('learning-type-filter');
// const ct = document.getElementById('course-thematic-filter');
// const prefix = (lt !== null && lt.value !== '') ? `/courses/${lt.value}` : `/courses`;
// const out = (ct !== null && ct.value !== '') ? `${prefix}/${ct.value}` : prefix;
values = loadInputValues();
const out = values.final_url;
document.location.assign(out);
return false;
};
const filterBySchool = () => {
/*
const school_selector = document.getElementById('schoolSelect');
const school_id = (school_selector !== null && school_selector.value !== '') ? school_selector.value : '';
const order_by = document.getElementById('sortBySelect');
const order_by_value = (order_by !== null && order_by.value !== '') ? order_by.value : '';
const ascending = document.getElementById('sortByOrder');
const baseUrl = `${window.location.pathname}?`;
params = [];
@ -158,9 +195,13 @@ script elementScriptsLoad() {
};
const finalUrl = baseUrl + params.join("&");
*/
values = loadInputValues();
const finalUrl = values.final_url;
if (history.pushState) {
// history.pushState(null, null, finalUrl);
// TODO: remove once htmx implemented
// TODO: remove once htmx implemented
window.location.assign(finalUrl);
} else {
window.location.assign(finalUrl);

View File

@ -338,21 +338,14 @@ func footer() templ.Component {
func elementScriptsLoad() templ.ComponentScript {
return templ.ComponentScript{
Name: `__templ_elementScriptsLoad_873d`,
Function: `function __templ_elementScriptsLoad_873d(){const formFilterOnSubmit = event => {
event.preventDefault();
Name: `__templ_elementScriptsLoad_bfb1`,
Function: `function __templ_elementScriptsLoad_bfb1(){const loadInputValues = () => {
const lt = document.getElementById('learning-type-filter');
const ct = document.getElementById('course-thematic-filter');
const prefix = (lt !== null && lt.value !== '') ? ` + "`" + `/courses/${lt.value}` + "`" + ` : ` + "`" + `/courses` + "`" + `;
const out = (ct !== null && ct.value !== '') ? ` + "`" + `${prefix}/${ct.value}` + "`" + ` : prefix;
const base_url = (ct !== null && ct.value !== '') ? ` + "`" + `${prefix}/${ct.value}` + "`" + ` : prefix;
document.location.assign(out);
return false;
};
const filterBySchool = () => {
const school_selector = document.getElementById('schoolSelect');
const school_id = (school_selector !== null && school_selector.value !== '') ? school_selector.value : '';
@ -361,6 +354,50 @@ func elementScriptsLoad() templ.ComponentScript {
const ascending = document.getElementById('sortByOrder');
params = [];
if (school_id) {
params.push(` + "`" + `school_id=${school_id}` + "`" + `);
};
if (order_by_value) {
params.push(` + "`" + `order_by=${order_by_value}` + "`" + `);
};
if (ascending && ascending.checked) {
params.push(` + "`" + `asc=true` + "`" + `);
};
const final_url = base_url + "?" + params.join("&");
return {
base_url: base_url,
final_url: final_url,
school_id: school_id,
order_by: order_by_value,
ascending: ascending,
}
};
const formFilterOnSubmit = event => {
event.preventDefault();
// const lt = document.getElementById('learning-type-filter');
// const ct = document.getElementById('course-thematic-filter');
// const prefix = (lt !== null && lt.value !== '') ? ` + "`" + `/courses/${lt.value}` + "`" + ` : ` + "`" + `/courses` + "`" + `;
// const out = (ct !== null && ct.value !== '') ? ` + "`" + `${prefix}/${ct.value}` + "`" + ` : prefix;
values = loadInputValues();
const out = values.final_url;
document.location.assign(out);
return false;
};
const filterBySchool = () => {
/*
const school_selector = document.getElementById('schoolSelect');
const school_id = (school_selector !== null && school_selector.value !== '') ? school_selector.value : '';
const order_by = document.getElementById('sortBySelect');
const order_by_value = (order_by !== null && order_by.value !== '') ? order_by.value : '';
const ascending = document.getElementById('sortByOrder');
const baseUrl = ` + "`" + `${window.location.pathname}?` + "`" + `;
params = [];
@ -375,9 +412,13 @@ func elementScriptsLoad() templ.ComponentScript {
};
const finalUrl = baseUrl + params.join("&");
*/
values = loadInputValues();
const finalUrl = values.final_url;
if (history.pushState) {
// history.pushState(null, null, finalUrl);
// TODO: remove once htmx implemented
// TODO: remove once htmx implemented
window.location.assign(finalUrl);
} else {
window.location.assign(finalUrl);
@ -394,8 +435,8 @@ func elementScriptsLoad() templ.ComponentScript {
const ob = document.getElementById('sortBySelect');
if (ob) ob.onchange = filterBySchool;
});}`,
Call: templ.SafeScript(`__templ_elementScriptsLoad_873d`),
CallInline: templ.SafeScriptInline(`__templ_elementScriptsLoad_873d`),
Call: templ.SafeScript(`__templ_elementScriptsLoad_bfb1`),
CallInline: templ.SafeScriptInline(`__templ_elementScriptsLoad_bfb1`),
}
}

View File

@ -30,10 +30,7 @@ templ courseItemCard(item IndexCourseCategoryItem) {
</ul>
}
<div class="d-flex justify-content-between align-items-center">
<a
href={ templ.URL("/courses/" + item.ID) }
class="btn btn-sm btn-outline-primary col-6"
>
<a href={ templ.URL("/courses/" + item.ID) } class="btn btn-sm btn-outline-primary col-6">
Open
</a>
<small class="text-body-secondary">
@ -66,30 +63,17 @@ templ pagination(p Pagination) {
if p.Page > 0 && p.TotalPages > 0 {
<nav aria-label="Page navigation">
<ul class="pagination justify-content-center">
<li
class={
"page-item",
templ.KV("disabled", p.Page == 1),
}
>
<li class={ "page-item" , templ.KV("disabled", p.Page==1), }>
<a href={ templ.URL(p.BaseURL + "?page=" + strconv.Itoa(p.Page-1)) } class="page-link">Previous</a>
</li>
for i := max(p.Page-2, 1); i < min(p.TotalPages, 10); i++ {
<li
class={
"page-item",
templ.KV("active", p.Page == i),
}
class={ "page-item" , templ.KV("active", p.Page==i), }
>
<a href={ templ.URL(p.BaseURL + "?page=" + strconv.Itoa(i)) } class="page-link">{ strconv.Itoa(i) }</a>
</li>
}
<li
class={
"page-item",
templ.KV("disabled", p.Page == p.TotalPages),
}
>
<li class={ "page-item" , templ.KV("disabled", p.Page==p.TotalPages), }>
<a href={ templ.URL(p.BaseURL + "?page=" + strconv.Itoa(p.Page+1)) } class="page-link">Next</a>
</li>
</ul>

View File

@ -129,7 +129,7 @@ func courseItemCard(item IndexCourseCategoryItem) templ.Component {
var templ_7745c5c3_Var8 string
templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(item.Count))
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/kurious/ports/http/bootstrap/main.templ`, Line: 39, Col: 31}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/kurious/ports/http/bootstrap/main.templ`, Line: 36, Col: 31}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
if templ_7745c5c3_Err != nil {
@ -221,10 +221,7 @@ func pagination(p Pagination) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var12 = []any{
"page-item",
templ.KV("disabled", p.Page == 1),
}
var templ_7745c5c3_Var12 = []any{"page-item", templ.KV("disabled", p.Page == 1)}
templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var12...)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
@ -260,10 +257,7 @@ func pagination(p Pagination) templ.Component {
return templ_7745c5c3_Err
}
for i := max(p.Page-2, 1); i < min(p.TotalPages, 10); i++ {
var templ_7745c5c3_Var15 = []any{
"page-item",
templ.KV("active", p.Page == i),
}
var templ_7745c5c3_Var15 = []any{"page-item", templ.KV("active", p.Page == i)}
templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var15...)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
@ -292,7 +286,7 @@ func pagination(p Pagination) templ.Component {
var templ_7745c5c3_Var17 string
templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(strconv.Itoa(i))
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/kurious/ports/http/bootstrap/main.templ`, Line: 83, Col: 103}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `internal/kurious/ports/http/bootstrap/main.templ`, Line: 72, Col: 103}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
if templ_7745c5c3_Err != nil {
@ -303,10 +297,7 @@ func pagination(p Pagination) templ.Component {
return templ_7745c5c3_Err
}
}
var templ_7745c5c3_Var18 = []any{
"page-item",
templ.KV("disabled", p.Page == p.TotalPages),
}
var templ_7745c5c3_Var18 = []any{"page-item", templ.KV("disabled", p.Page == p.TotalPages)}
templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var18...)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err

View File

@ -171,7 +171,7 @@ func (c courseTemplServer) List(w http.ResponseWriter, r *http.Request) {
Name: in.Name,
}
if pathParams.CourseThematic == in.ID {
params.FilterForm.BreadcrumbsParams.ActiveCourseThematic = outcategory
params.FilterForm.ActiveCourseThematic = outcategory
}
return outcategory