1
0
Fork 0
mirror of https://github.com/YunoHost/apps.git synced 2024-09-03 20:06:07 +02:00

store/dash: new option to hide deprecated apps in dashboard (#2372)

This commit is contained in:
Alexandre Aubin 2024-05-29 21:02:52 +02:00 committed by GitHub
parent 1d4bba6cf7
commit 8aac1d89f4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -13,13 +13,13 @@
</div>
<div class="mx-auto text-center space-y-3 md:space-y-0 md:space-x-3 px-2 md:px-10 lg:px-20 flex flex-col md:flex-row items-center">
<div class="inline-block basis-1/2">
<div class="text-center justify-center space-y-3 md:space-y-0 md:space-x-3 px-2 md:px-10 lg:px-20 flex flex-col flex-wrap md:flex-row pb-5">
<div>
{{ _("Filter") }}
<select
name="selectfilter"
id="selectfilter"
class="rounded-md border-gray-200 text-sm h-8 py-0"
class="rounded-md border-gray-200 text-sm h-8 py-0 max-w-72 sm:max-none"
>
<option {% if request.args.get("filter") in [None, "none"] %}selected{% endif %} value="none">{{ _("(None)") }}</option>
<option {% if request.args.get("filter") == "regressions_main_ci" %}selected{% endif %} value="regressions_main_ci">{{ _("Regressions on main CI") }}</option>
@ -31,12 +31,12 @@
<option {% if request.args.get("filter") == "packagingv1" %}selected{% endif %} value="packagingv1">{{ _("Packaging v1 apps") }}</option>
</select>
</div>
<div class="inline-block basis-1/2">
<div>
{{ _("Sort by") }}
<select
name="selectsort"
id="selectsort"
class="rounded-md border-gray-200 text-sm h-8 py-0"
class="rounded-md border-gray-200 text-sm h-8 py-0 max-w-72 sm:max-none"
>
<option {% if request.args.get("sort") == "alpha" %}selected{% endif %} value="alpha">{{ _("Alphabetical") }}</option>
<option {% if request.args.get("sort") == "level" %}selected{% endif %} value="level">{{ _("Quality level") }}</option>
@ -45,21 +45,35 @@
<option {% if request.args.get("sort") == "testing_branch_update" %}selected{% endif %} value="testing_branch_update">{{ _("Last update on testing branch") }}</option>
</select>
</div>
</div>
<div class="block w-fit mx-auto flex items-center px-2 pt-2 {% if not user %}text-gray-500{% endif %}" {% if not user %}title="{{ _('Requires to be logged-in') }}" aria-label="{{ _('Requires to be logged-in') }}"{% endif %}>
<label for="starsonly" class="inline-block relative mr-2 h-4 w-7 cursor-pointer">
<span class="sr-only">{{ _("Show only apps you starred") }}</span>
<input type="checkbox" id="starsonly" class="peer sr-only" {% if user and request.args.get("starsonly") %}checked{% endif %} {% if not user%}disabled{% endif %} >
<div class="w-fit mx-auto flex items-center px-2 pt-2">
<label for="hidedeprecated" class="inline-block relative mr-2 h-4 w-7 cursor-pointer">
<span class="sr-only">{{ _("Hide deprecated/unmaintained apps") }}</span>
<input type="checkbox" id="hidedeprecated" class="peer sr-only" {% if request.args.get("hidedeprecated") %}checked{% endif %} >
<span class="absolute inset-0 rounded-full bg-gray-300 transition peer-checked:bg-green-500">
</span>
<span class="absolute inset-0 rounded-full bg-gray-300 transition peer-checked:bg-green-500">
</span>
<span class="absolute inset-y-0 start-0 m-1 h-2 w-2 rounded-full bg-white transition-all peer-checked:start-3">
</span>
</label>
{{ _("Show only apps you starred") }}
<span class="absolute inset-y-0 start-0 m-1 h-2 w-2 rounded-full bg-white transition-all peer-checked:start-3">
</span>
</label>
{{ _("Hide deprecated/unmaintained apps") }}
</div>
<div class="w-fit mx-auto flex items-center px-2 pt-2 {% if not user %}text-gray-500{% endif %}" {% if not user %}title="{{ _('Requires to be logged-in') }}" aria-label="{{ _('Requires to be logged-in') }}"{% endif %}>
<label for="starsonly" class="inline-block relative mr-2 h-4 w-7 cursor-pointer">
<span class="sr-only">{{ _("Show only apps you starred") }}</span>
<input type="checkbox" id="starsonly" class="peer sr-only" {% if user and request.args.get("starsonly") %}checked{% endif %} {% if not user%}disabled{% endif %} >
<span class="absolute inset-0 rounded-full bg-gray-300 transition peer-checked:bg-green-500">
</span>
<span class="absolute inset-y-0 start-0 m-1 h-2 w-2 rounded-full bg-white transition-all peer-checked:start-3">
</span>
</label>
{{ _("Show only apps you starred") }}
</div>
</div>
<table id="appTable" class="mx-auto text-sm sm:text-base">
<tr class="h-40 md:h-20">
<th class="max-w-24 md:max-w-32">{{ _("App") }}</th>
@ -80,7 +94,10 @@
{% endif %}
<tr
class="app h-8 hover:bg-gray-100"
class="app h-8 hover:bg-gray-100
{% if "deprecated-software" in infos["antifeatures"] or "replaced-by-another-app" in infos["antifeatures"] or "package-not-maintained" in infos["antifeatures"] %}
opacity-50
{% endif %}"
data-app="{{ app }}"
data-popularity-stars="{{ this_app_stars }}"
data-starred="{{ user_starred_this_app }}"
@ -92,6 +109,7 @@
data-last-update-testing="{% if infos["testing"] %}{{ infos["testing"]["timestamp_updated"] }}{% else %}-1{% endif %}"
data-last-update-autoupdate="{% if infos["ci-auto-update"] %}{{ infos["ci-auto-update"]["timestamp_updated"] }}{% else %}-1{% endif %}"
data-packaging-format="{{ infos["packaging_format"] }}"
data-deprecated="{% if "deprecated-software" in infos["antifeatures"] or "replaced-by-another-app" in infos["antifeatures"] or "package-not-maintained" in infos["antifeatures"] %}True{% else %}False{% endif %}"
>
<td class="truncate max-w-24 md:max-w-64 text-center text-blue-600 font-medium">
<a href="{{ infos["url"] }}">{{ app }}</a>
@ -214,6 +232,7 @@
let filterName = selectFilter.value.trim();
let nb_found = 0;
let starsOnly = toggleStarsonly.checked;
let hideDeprecated = toggleHidedeprecated.checked;
// Loop through the entries
for (var i = 0; i < entries.length; i++) {
@ -223,6 +242,11 @@
entries[i].classList.add("hidden");
continue;
}
if ((hideDeprecated) && (entries[i].dataset.deprecated != "False"))
{
entries[i].classList.add("hidden");
continue;
}
if (filterName == "none")
{
@ -366,12 +390,14 @@
let sortBy = selectSort.value.trim();
let filterName = selectFilter.value.trim();
let starsOnly = toggleStarsonly.checked;
let hideDeprecated = toggleHidedeprecated.checked;
if ('URLSearchParams' in window) {
var queryArgs = new URLSearchParams(window.location.search)
if (filterName != "none") { queryArgs.set("filter", filterName) } else { queryArgs.delete("filter"); };
if (sortBy != "stars") { queryArgs.set("sort", sortBy) } else { queryArgs.delete("sort"); };
if (starsOnly) { queryArgs.set("starsonly", true) } else { queryArgs.delete("starsonly"); };
if (hideDeprecated) { queryArgs.set("hidedeprecated", true) } else { queryArgs.delete("hidedeprecated"); };
let newUrl;
if (queryArgs.toString())
@ -393,6 +419,7 @@
let selectFilter = document.getElementById('selectfilter');
let selectSort = document.getElementById('selectsort');
let toggleStarsonly = document.getElementById('starsonly');
let toggleHidedeprecated = document.getElementById('hidedeprecated');
selectFilter.addEventListener('change', () => {
updateFilter();
@ -406,6 +433,10 @@
updateFilter();
});
toggleHidedeprecated.addEventListener('change', () => {
updateFilter();
});
updateFilter();
updateSort();