Enable Event / Group Sorting & Filtering

[Sean12697]

This task should only be complete after #98 and currently needs designing.

[Sean12697]

Using similar logic to the current search capabilities in the website, which use the .filter() function on the name property, this issue pertains to using properties such as categories (#98) and extracting their potential values to both rendered HTML objects to click on and the executing of the relevant code.

Search Listeners:

compiled-mcr-events/_static/scripts/main.js

Lines 24 to 31 in 77e8a95

	eventsSearchElement = document.getElementById("eventsSearchBox");
	groupsSearchElement = document.getElementById("groupsSearchBox");
	groupsSearchElement.addEventListener("keyup", searchGroups);
	document.getElementById("groupsClearSearch").addEventListener("click", clearGroupsSearch);
	eventsSearchElement.addEventListener("keyup", searchEvent);
	document.getElementById("eventsClearSearch").addEventListener("click", clearEventSearch);

Search Functions:

compiled-mcr-events/_static/scripts/main.js

Lines 43 to 54 in 77e8a95

	function searchGroups() {
	if (groupsSearchElement.value.length == 0) { clearGroupsSearch(); return; }
	let results = groups.filter(group => nn(group.name).includes(nn(groupsSearchElement.value))).map(dataToHTML.groupHTML).join("");
	document.getElementById("groupsItems").innerHTML = results;
	}
	function searchEvent() {
	if (eventsSearchElement.value.length == 0) { clearEventSearch(); return; }
	let value = eventsSearchElement.value;
	let results = events.filter(event => !nn(event.name).includes(nn(value)) || !nn(event.desc).includes(nn(value)) || !nn(event.location).includes(nn(value))).map(dataToHTML.eventHTML).join("");
	document.getElementById("eventsItems").innerHTML = results;
	}

[Sean12697]

My suggest would be, with an example of a category value being only ever tech or business, to generate the following HTML and add the following function.

HTML:

<input type="button" class="category-button on" value="All" onclick="setGroupCategory('groupsItems', '')">
<input type="button" class="category-button" value="Tech" onclick="setGroupCategory('groupsItems', 'tech')">
<input type="button" class="category-button" value="Business" onclick="setGroupCategory('groupsItems', 'business')">

main.js:

function setGroupCategory(elementId, type) {
    document.getElementById(elementId).innerHTML = groups.filter(group => type == "" || group.category == type).map(dataToHTML.groupHTML).join("\n");
}

[Sean12697]

The above setGroupCategory() function could be generalised to not only accept a string type parameter (generalised to value), but also accept a string key parameter (generalising category in this example), which could use dot notation for child properties using the function below (Source).

function getDescendantProp(obj, desc) {
    var arr = desc.split(".");
    while(arr.length && (obj = obj[arr.shift()]));
    return obj;
}