feat: filtering members & groups based on if they are in no group

This commit is contained in:
Spectralitree 2021-12-21 00:20:25 +01:00
parent cef9392f41
commit 8a6c26696f
2 changed files with 21 additions and 9 deletions

View File

@ -114,14 +114,18 @@
let memberFilteredList = []; let memberFilteredList = [];
$: memberFilteredList = sortedList.filter((item: Group) => { $: memberFilteredList = sortedList.filter((item: Group) => {
if (memberSearchMode === "none") {
if (item.members && item.members.length > 0) return false;
}
if (selectedMembers.length < 1) return true; if (selectedMembers.length < 1) return true;
switch (memberSearchMode) { switch (memberSearchMode) {
case "include": if (selectedMembers.some(value => item.members.includes(value))) return true; case "include": if (item.members && selectedMembers.some(value => item.members.includes(value))) return true;
break; break;
case "exclude": if (selectedMembers.every(value => !item.members.includes(value))) return true; case "exclude": if (item.members && selectedMembers.every(value => !item.members.includes(value))) return true;
break; break;
case "match": if (selectedMembers.every(value => item.members.includes(value))) return true; case "match": if (item.members && selectedMembers.every(value => item.members.includes(value))) return true;
break; break;
default: return true; default: return true;
} }
@ -231,9 +235,11 @@
<span style="cursor: pointer" id="include" on:click={() => memberSearchMode = "include"}>{@html memberSearchMode === "include" ? "<b>include</b>" : "include"}</span> <span style="cursor: pointer" id="include" on:click={() => memberSearchMode = "include"}>{@html memberSearchMode === "include" ? "<b>include</b>" : "include"}</span>
| <span style="cursor: pointer" id="exclude" on:click={() => memberSearchMode = "exclude"}>{@html memberSearchMode === "exclude" ? "<b>exclude</b>" : "exclude"}</span> | <span style="cursor: pointer" id="exclude" on:click={() => memberSearchMode = "exclude"}>{@html memberSearchMode === "exclude" ? "<b>exclude</b>" : "exclude"}</span>
| <span style="cursor: pointer" id="match" on:click={() => memberSearchMode = "match"}>{@html memberSearchMode === "match" ? "<b>exact match</b>" : "exact match"}</span> | <span style="cursor: pointer" id="match" on:click={() => memberSearchMode = "match"}>{@html memberSearchMode === "match" ? "<b>exact match</b>" : "exact match"}</span>
| <span style="cursor: pointer" id="none" on:click={() => memberSearchMode = "none"}>{@html memberSearchMode === "none" ? "<b>none</b>" : "none"}</span>
<Tooltip placement="bottom" target="include">Includes every group with any of the members.</Tooltip> <Tooltip placement="bottom" target="include">Includes every group with any of the members.</Tooltip>
<Tooltip placement="bottom" target="exclude">Excludes every group with any of the members, opposite of include.</Tooltip> <Tooltip placement="bottom" target="exclude">Excludes every group with any of the members, opposite of include.</Tooltip>
<Tooltip placement="bottom" target="match">Only includes groups which have all the members selected.</Tooltip> <Tooltip placement="bottom" target="match">Only includes groups which have all the members selected.</Tooltip>
<Tooltip placement="bottom" target="none">Only includes groups that have no members.</Tooltip>
{/if} {/if}
</CardBody> </CardBody>
</Card> </Card>
@ -263,14 +269,14 @@
<CardsHeader bind:item={group} loading={itemLoading[index]} slot="header"> <CardsHeader bind:item={group} loading={itemLoading[index]} slot="header">
<FaUsers slot="icon" /> <FaUsers slot="icon" />
</CardsHeader> </CardsHeader>
<Body on:update={updateList} bind:group bind:isPublic={isPublic} bind:loading={itemLoading[index]}/> <Body on:update={updateList} bind:members bind:group bind:isPublic={isPublic} bind:loading={itemLoading[index]}/>
</AccordionItem> </AccordionItem>
{:else} {:else}
<AccordionItem> <AccordionItem>
<CardsHeader bind:item={group} loading={itemLoading[index]} slot="header"> <CardsHeader bind:item={group} loading={itemLoading[index]} slot="header">
<FaLock slot="icon" /> <FaLock slot="icon" />
</CardsHeader> </CardsHeader>
<Body on:update={updateList} bind:group bind:isPublic={isPublic} bind:loading={itemLoading[index]}/> <Body on:update={updateList} bind:members bind:group bind:isPublic={isPublic} bind:loading={itemLoading[index]}/>
</AccordionItem> </AccordionItem>
{/if} {/if}
{/each} {/each}

View File

@ -114,14 +114,18 @@
let memberFilteredList = []; let memberFilteredList = [];
$: memberFilteredList = sortedList.filter((item: Member) => { $: memberFilteredList = sortedList.filter((item: Member) => {
if (groupSearchMode === "none") {
if (groups.some(group => group.members && group.members.includes(item.uuid))) return false;
}
if (selectedGroups.length < 1) return true; if (selectedGroups.length < 1) return true;
switch (groupSearchMode) { switch (groupSearchMode) {
case "include": if (selectedGroups.some(group => group.members.includes(item.uuid))) return true; case "include": if (selectedGroups.some(group => group.members && group.members.includes(item.uuid))) return true;
break; break;
case "exclude": if (selectedGroups.every(group => !group.members.includes(item.uuid))) return true; case "exclude": if (selectedGroups.every(group => group.members && !group.members.includes(item.uuid))) return true;
break; break;
case "match": if (selectedGroups.every(group => group.members.includes(item.uuid))) return true; case "match": if (selectedGroups.every(group => group.members && group.members.includes(item.uuid))) return true;
break; break;
default: return true; default: return true;
} }
@ -223,9 +227,11 @@
<span style="cursor: pointer" id="include" on:click={() => groupSearchMode = "include"}>{@html groupSearchMode === "include" ? "<b>include</b>" : "include"}</span> <span style="cursor: pointer" id="include" on:click={() => groupSearchMode = "include"}>{@html groupSearchMode === "include" ? "<b>include</b>" : "include"}</span>
| <span style="cursor: pointer" id="exclude" on:click={() => groupSearchMode = "exclude"}>{@html groupSearchMode === "exclude" ? "<b>exclude</b>" : "exclude"}</span> | <span style="cursor: pointer" id="exclude" on:click={() => groupSearchMode = "exclude"}>{@html groupSearchMode === "exclude" ? "<b>exclude</b>" : "exclude"}</span>
| <span style="cursor: pointer" id="match" on:click={() => groupSearchMode = "match"}>{@html groupSearchMode === "match" ? "<b>exact match</b>" : "exact match"}</span> | <span style="cursor: pointer" id="match" on:click={() => groupSearchMode = "match"}>{@html groupSearchMode === "match" ? "<b>exact match</b>" : "exact match"}</span>
| <span style="cursor: pointer" id="none" on:click={() => groupSearchMode = "none"}>{@html groupSearchMode === "none" ? "<b>none</b>" : "none"}</span>
<Tooltip placement="bottom" target="include">Includes every member who's a part of any of the groups.</Tooltip> <Tooltip placement="bottom" target="include">Includes every member who's a part of any of the groups.</Tooltip>
<Tooltip placement="bottom" target="exclude">Excludes every member who's a part of any of the groups, the opposite of include.</Tooltip> <Tooltip placement="bottom" target="exclude">Excludes every member who's a part of any of the groups, the opposite of include.</Tooltip>
<Tooltip placement="bottom" target="match">Only includes members who are a part of every group.</Tooltip> <Tooltip placement="bottom" target="match">Only includes members who are a part of every group.</Tooltip>
<Tooltip placement="bottom" target="none">Only includes members that are in no groups.</Tooltip>
{/if} {/if}
</CardBody> </CardBody>
</Card> </Card>