From 1a31006b21f006bec81a8754261402385650300f Mon Sep 17 00:00:00 2001 From: Aleksandr Trushkin Date: Thu, 2 May 2024 23:24:41 +0300 Subject: [PATCH] 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 --- .task/checksum/generate | 2 +- .../kurious/ports/http/bootstrap/core.templ | 61 ++++++++++++++--- .../ports/http/bootstrap/core_templ.go | 67 +++++++++++++++---- .../kurious/ports/http/bootstrap/main.templ | 24 ++----- .../ports/http/bootstrap/main_templ.go | 19 ++---- internal/kurious/ports/http/course.go | 2 +- 6 files changed, 116 insertions(+), 59 deletions(-) diff --git a/.task/checksum/generate b/.task/checksum/generate index 543160d..ad70968 100644 --- a/.task/checksum/generate +++ b/.task/checksum/generate @@ -1 +1 @@ -c2a78909343b26a169423b19ada40fad +74bbe98d65787355f45c5d800fc71f11 diff --git a/internal/kurious/ports/http/bootstrap/core.templ b/internal/kurious/ports/http/bootstrap/core.templ index a932cbd..fc93085 100644 --- a/internal/kurious/ports/http/bootstrap/core.templ +++ b/internal/kurious/ports/http/bootstrap/core.templ @@ -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); diff --git a/internal/kurious/ports/http/bootstrap/core_templ.go b/internal/kurious/ports/http/bootstrap/core_templ.go index 9c8050c..c6dbcaf 100644 --- a/internal/kurious/ports/http/bootstrap/core_templ.go +++ b/internal/kurious/ports/http/bootstrap/core_templ.go @@ -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`), } } diff --git a/internal/kurious/ports/http/bootstrap/main.templ b/internal/kurious/ports/http/bootstrap/main.templ index 1bbc2d6..7352a19 100644 --- a/internal/kurious/ports/http/bootstrap/main.templ +++ b/internal/kurious/ports/http/bootstrap/main.templ @@ -30,10 +30,7 @@ templ courseItemCard(item IndexCourseCategoryItem) { }
- + Open @@ -66,30 +63,17 @@ templ pagination(p Pagination) { if p.Page > 0 && p.TotalPages > 0 {