Skip to content

Commit

Permalink
refactor: the big one™ (pass all lists down the component tree)
Browse files Browse the repository at this point in the history
  • Loading branch information
Draconizations committed Oct 2, 2024
1 parent 1c7a017 commit 30b51ee
Show file tree
Hide file tree
Showing 47 changed files with 460 additions and 380 deletions.
22 changes: 13 additions & 9 deletions src/components/dash/ItemCollapse.svelte
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
<script lang="ts">
import { page } from "$app/stores"
import type { Group, Member, MemberPrivacy, System } from "$api/types"
import { dash } from "$lib/dash/dash.svelte"
import { dash, PrivacyMode, type DashList } from "$lib/dash/dash.svelte"
import { IconLock, IconShare, IconUser } from "@tabler/icons-svelte"
import MemberView from "./members/MemberView.svelte"
import MemberInfo from "./members/MemberInfo.svelte"
Expand All @@ -12,20 +11,25 @@
import SystemView from "./system/SystemView.svelte"
import SystemInfo from "./system/SystemInfo.svelte"
import { untrack } from "svelte"
import { fail } from "@sveltejs/kit"
let {
type,
item,
forceOpen = false,
asPage = false,
open = $bindable(false),
privacyMode,
memberList,
groupList,
}: {
type: "member" | "group" | "system"
item: Member | Group | System
open?: boolean
asPage?: boolean
forceOpen?: boolean
privacyMode: PrivacyMode
memberList: DashList<Member>
groupList: DashList<Group>
} = $props()
let tab: "view" | "info" | "groups" = $state("view")
Expand Down Expand Up @@ -124,10 +128,10 @@

{#snippet memberTabs(member: Member, tab: "view" | "info" | "groups")}
{#if openedOnce}
<MemberView {member} {tab} open={isOpen} {asPage} />
<MemberInfo {member} {tab} {asPage} />
<MemberView {privacyMode} {memberList} {groupList} {member} {tab} open={isOpen} {asPage} />
<MemberInfo {privacyMode} {memberList} {groupList} {member} {tab} {asPage} />
{#if tabbedOnce}
<MemberGroups {member} {tab} {asPage} />
<MemberGroups {privacyMode} {memberList} {groupList} {member} {tab} {asPage} />
{/if}
{/if}
{/snippet}
Expand All @@ -139,10 +143,10 @@

{#snippet groupTabs(group: Group, tab: "view" | "info" | "groups")}
{#if openedOnce}
<GroupView {group} {tab} open={isOpen} {asPage} />
<GroupInfo {group} {tab} {asPage} />
<GroupView {memberList} {privacyMode} list={groupList} {group} {tab} open={isOpen} {asPage} />
<GroupInfo {memberList} {privacyMode} list={groupList} {group} {tab} {asPage} />
{#if tabbedOnce}
<GroupMembers {group} {tab} {asPage} />
<GroupMembers {privacyMode} {memberList} {groupList} {group} {tab} {asPage} />
{/if}
{/if}
{/snippet}
Expand Down
18 changes: 6 additions & 12 deletions src/components/dash/edit/DeleteButton.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,19 @@
import type { Group, Member } from "$api/types"
import { browser } from "$app/environment"
import { goto } from "$app/navigation"
import { dash } from "$lib/dash/dash.svelte"
import { dash, type DashList } from "$lib/dash/dash.svelte"
import { IconTrash } from "@tabler/icons-svelte"
let {
item,
type,
asPage,
list,
}: {
item: Member | Group
type: "member" | "group"
asPage: boolean
list: DashList<Member | Group>
} = $props()
let element: HTMLDialogElement
Expand All @@ -31,18 +33,10 @@
element.close()
if (!asPage) {
if (type === "member") {
dash.members.list.raw = dash.members.list.raw.filter((m) => m.uuid !== item.uuid)
dash.groups.list.raw.forEach((g) => g.members?.filter((m) => m !== item.uuid))
list.list.raw = list.list.raw.filter((g) => g.uuid !== item.uuid)
dash.members.process(dash.groups.list.raw)
dash.members.paginate()
} else if (type === "group") {
dash.groups.list.raw = dash.groups.list.raw.filter((g) => g.uuid !== item.uuid)
dash.groups.process()
dash.groups.paginate()
}
list.process()
list.paginate()
} else {
goto(`/dash/${dash.user?.id}?tab=${type}s`)
}
Expand Down
6 changes: 4 additions & 2 deletions src/components/dash/edit/OpenEditButton.svelte
Original file line number Diff line number Diff line change
@@ -1,19 +1,21 @@
<script lang="ts">
import { dash, PrivacyMode } from "$lib/dash/dash.svelte"
import { PrivacyMode } from "$lib/dash/dash.svelte"
import { IconEdit } from "@tabler/icons-svelte"
let {
mode = $bindable(),
class: className,
color = "primary",
privacyMode,
}: {
mode: "view" | "edit"
color?: "primary" | "neutral"
class?: string
privacyMode: PrivacyMode
} = $props()
</script>

{#if dash.privacyMode === PrivacyMode.PRIVATE}
{#if privacyMode === PrivacyMode.PRIVATE}
<button onclick={() => (mode = "edit")} class={`btn btn-sm p-2 ${className} btn-${color}`}>
<IconEdit class="inline" size={18} /> Edit
</button>
Expand Down
24 changes: 14 additions & 10 deletions src/components/dash/edit/SubmitCreateButton.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,15 @@
import type { ApiError } from "$api"
import type { Group, Member } from "$api/types"
import { browser } from "$app/environment"
import { dash, type DashList } from "$lib/dash/dash.svelte"
import { type DashList } from "$lib/dash/dash.svelte"
import { IconDeviceFloppy } from "@tabler/icons-svelte"
import moment from "moment"
let {
item,
list,
groups,
memberList,
groupList,
itemPath,
groupPath,
Expand All @@ -19,7 +21,9 @@
}: {
list: DashList<Member | Group>
item: Member | Group
groupList?: string[]
groups?: string[]
groupList: DashList<Group>
memberList: DashList<Member>
loading: boolean
success: boolean
err: string[]
Expand Down Expand Up @@ -79,30 +83,30 @@
})
if (response) {
if (groupPath && groupList && groupList.length > 0) {
if (groupPath && groups && groups.length > 0) {
await window.api(`${itemPath}/${response.uuid}/${groupPath}/overwrite`, {
token,
method: "POST",
body: groupList,
body: groups,
})
}
if (groupList) {
if (groups) {
if (itemPath === "members" && groupPath === "groups") {
dash.groups.list.raw.forEach((g) => {
if (groupList.includes(g.uuid || "")) {
groupList.list.raw.forEach((g) => {
if (groups.includes(g.uuid ?? "")) {
g.members?.push(response.uuid || "")
}
})
} else if (itemPath === "groups" && groupPath === "members") {
;(response as Group).members = groupList
;(response as Group).members = groups
}
}
list.list.raw.push(response)
dash.groups.process()
dash.members.process()
groupList.process()
memberList.process()
list.paginate()
}
} catch (e) {
Expand Down
59 changes: 20 additions & 39 deletions src/components/dash/edit/SubmitEditButton.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -10,21 +10,18 @@
// base member/group edit
body: Member | Group
list: DashList<Member | Group>
asPage: boolean
item: Member | Group
}
type MemberGroupEditOptions = {
// member groups edit
member: Member
body: string[]
asPage: boolean
}
type GroupMemberEditOptions = {
// group member list edit
group: Group
body: string[]
asPage: boolean
}
type SystemEditOptions = {
system: System
Expand All @@ -38,13 +35,17 @@
path,
options,
onSuccess,
memberList,
groupList,
}: {
loading: boolean
success: boolean
err: string[]
path: string
options: ItemEditOptions | MemberGroupEditOptions | GroupMemberEditOptions | SystemEditOptions
onSuccess?: () => void
memberList: DashList<Member>
groupList: DashList<Group>
} = $props()
export async function submitEdit() {
Expand Down Expand Up @@ -115,15 +116,9 @@
if (response && (opts as ItemEditOptions).item) {
opts = opts as ItemEditOptions
// if we're on the dash we need to replace the member in the list
// if not, we just need to replace the member
if (!opts.asPage) {
Object.assign(opts.item, response)
opts.list.process(dash.groups.list.raw)
opts.list.paginate()
} else {
Object.assign(opts.item || {}, response)
}
Object.assign(opts.item || {}, response)
opts.list.process(groupList.list.raw)
opts.list.paginate()
} else if (response && (opts as SystemEditOptions).system) {
// systems don't have a page of their own (for now)
// so replace the dash's system
Expand All @@ -149,41 +144,27 @@
const opts = options as MemberGroupEditOptions
// add the member's uuid to each group added
if (!opts.asPage) {
for (const group of dash.groups.list.raw) {
const g = group as Group
if (listBody.includes(g.uuid || "")) {
if (g.members && !g.members.includes(opts.member.uuid || "")) {
g.members = [...(g.members || []), opts.member.uuid || ""]
}
} else {
g.members = [...(g.members || [])].filter((m) => m !== opts.member.uuid)
}
}
dash.groups.process(dash.groups.list.raw)
dash.members.process(dash.groups.list.raw)
dash.members.paginate()
} else {
for (const group of dash.member.groups) {
const g = group as Group
if (listBody.includes(g.uuid || "")) {
if (g.members && !g.members.includes(opts.member.uuid || "")) {
g.members = [...(g.members || []), opts.member.uuid || ""]
}
} else {
g.members = [...(g.members || [])].filter((m) => m !== opts.member.uuid)
for (const group of groupList.list.raw) {
const g = group as Group
if (listBody.includes(g.uuid || "")) {
if (g.members && !g.members.includes(opts.member.uuid || "")) {
g.members = [...(g.members || []), opts.member.uuid || ""]
}
} else {
g.members = [...(g.members || [])].filter((m) => m !== opts.member.uuid)
}
}
groupList.process(groupList.list.raw)
memberList.process(groupList.list.raw)
memberList.paginate()
} else if ((options as GroupMemberEditOptions).group) {
const opts = options as GroupMemberEditOptions
// edit the group like we would normally
opts.group.members = listBody
if (!opts.asPage) {
dash.groups.process(dash.groups.list.raw)
dash.groups.paginate()
}
groupList.process(groupList.list.raw)
groupList.paginate()
}
success = true
Expand Down
17 changes: 9 additions & 8 deletions src/components/dash/filters/AddFilterGroup.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,21 @@
groupArrayModes,
filterPrivacyText,
} from "$lib/dash/filters.svelte"
import { dash } from "$lib/dash/dash.svelte"
import { IconPlus } from "@tabler/icons-svelte"
import { proxyOptionFromString } from "$lib/dash/member/utils"
let {
list,
filterGroups = $bindable(),
type,
privacyMode,
groupList,
}: {
list: DashList<Group | Member>
type: "members" | "groups"
filterGroups: FilterGroup[]
groupList: DashList<Group>
privacyMode: PrivacyMode
} = $props()
let filterField = $state("")
Expand All @@ -33,9 +36,7 @@
let filterPrivacy: null | string = $state(null)
let filterProxy: string[] = $state([])
let proxyOptions: SvelecteOption[] = $state(
dash.members.proxytags ? [...dash.members.proxytags] : []
)
let proxyOptions: SvelecteOption[] = $state(list.proxytags ? [...list.proxytags] : [])
let proxyCreated: SvelecteOption | null = $state(null)
let inputType: string = $derived.by(() => {
Expand Down Expand Up @@ -105,7 +106,7 @@
else existingGroup.filters = [...existingGroup.filters, filter]
}
list.process(dash.groups.list.raw)
list.process(groupList.list.raw)
list.paginate()
filterField = ""
Expand Down Expand Up @@ -169,7 +170,7 @@
{:else if type === "groups"}
<option value="member">members</option>
{/if}
{#if dash.privacyMode === PrivacyMode.PRIVATE}
{#if privacyMode === PrivacyMode.PRIVATE}
<option value="privacy">privacy</option>
{/if}
<option value="created">created</option>
Expand Down Expand Up @@ -259,7 +260,7 @@
{#if filterField === "group" && groupArrayModes.includes(filterMode)}
<Svelecte
class="svelecte-control-pk w-full"
options={dash.groups.list.options}
options={groupList.list.options}
multiple
bind:value={filterValue}
valueField="value"
Expand All @@ -268,7 +269,7 @@
{:else if filterField === "member" && groupArrayModes.includes(filterMode)}
<Svelecte
class="svelecte-control-pk w-full"
options={dash.members.list.options}
options={list.list.options}
multiple
bind:value={filterValue}
valueField="value"
Expand Down
Loading

0 comments on commit 30b51ee

Please sign in to comment.