feat(web): add filtering only selected items in list

This commit is contained in:
Masahiko AMANO 2023-01-29 20:20:10 +03:00
parent 351e0be3ca
commit 733780c17c
5 changed files with 28 additions and 2 deletions

View File

@ -31,6 +31,11 @@ $(document).on("dblclick", ".item", function (e) {
resp.data.forEach(tanzaku => {
$(`#t${tanzaku.id}`).addClass("selected");
});
if ($("#selected")[0].checked) {
$(".list-item:not(.selected)").css("display", "none");
} else {
$(".list-item:not(.selected)").css("display", "block");
}
});
$(document).on("input", "#filter", function (e) {

View File

@ -30,6 +30,11 @@ $(document).on("dblclick", ".item", function (e) {
resp.data.forEach(sasa => {
$(`#s${sasa.id}`).addClass("selected");
});
if ($("#selected")[0].checked) {
$(".list-item:not(.selected)").css("display", "none");
} else {
$(".list-item:not(.selected)").css("display", "block");
}
});
$(document).on("click", "#btn-confirm", function (e) {

View File

@ -71,6 +71,14 @@ $(document).on("click", ".list-item", function (e) {
}
});
$(document).on("click", "#selected", function (e) {
if (this.checked) {
$(".list-item:not(.selected)").css("display", "none");
} else {
$(".list-item:not(.selected)").css("display", "block");
}
});
$(document).on("click", "#btn-close", function (e) {
e.preventDefault();
$(".menu-wrapper").css("display", "none");

View File

@ -50,7 +50,11 @@
<input type="text" name="filter" class="form-control" id="filter">
</div>
</div>
<div class="form-group list" style="height: calc(100vh - 290px)"></div>
<div class="form-group form-check">
<input type="checkbox" name="related" class="form-check-input" id="selected" checked>
<label class="form-check-label" for="selected">Show only selected</label>
</div>
<div class="form-group list" style="height: calc(100vh - 330px)"></div>
<div class="form-group button-flex">
<button class="btn btn-primary" id="btn-confirm">Confirm</button>
<a target="_blank" class="btn btn-outline-info" id="btn-full">View full</a>

View File

@ -44,7 +44,11 @@
<input type="text" name="name" class="form-control" id="name">
</div>
</div>
<div class="form-group list" style="height: calc(100vh - 230px)"></div>
<div class="form-group form-check">
<input type="checkbox" name="related" class="form-check-input" id="selected" checked>
<label class="form-check-label" for="selected">Show only selected</label>
</div>
<div class="form-group list" style="height: calc(100vh - 270px)"></div>
<div class="form-group button-flex">
<button class="btn btn-primary" id="btn-confirm">Confirm</button>
<button class="btn btn-outline-danger" id="btn-close">Close</button>