diff --git a/frontend/src/components/orgs-list.ts b/frontend/src/components/orgs-list.ts index 2f291ba8..1edfd29f 100644 --- a/frontend/src/components/orgs-list.ts +++ b/frontend/src/components/orgs-list.ts @@ -17,7 +17,7 @@ import type { OrgData } from "@/utils/orgs"; export class OrgsList extends TailwindElement { static styles = css` btrix-table { - grid-template-columns: [clickable-start] auto auto [clickable-end] min-content; + grid-template-columns: [clickable-start] auto auto auto [clickable-end] min-content; } `; @property({ type: Object }) @@ -52,8 +52,15 @@ export class OrgsList extends TailwindElement { return html` - ${msg("Name")} - ${msg("Members")} + ${msg("Name")} + ${msg("Members")} + + ${msg("Bytes Stored")} + ${msg("Actions")} @@ -62,6 +69,7 @@ export class OrgsList extends TailwindElement { ${this.orgList?.map(this.renderOrg)} + ${this.renderOrgDelete()} ${this.renderOrgQuotas()} `; } @@ -244,18 +252,32 @@ export class OrgsList extends TailwindElement { private readonly renderOrg = (org: OrgData) => { if (!this.userInfo) return; - // // There shouldn't really be a case where an org is in the org list but - // // not in user info, but disable clicking into the org just in case - // const isUserOrg = this.userInfo.orgs.some(({ id }) => id === org.id); + // There shouldn't really be a case where an org is in the org list but + // not in user info, but disable clicking into the org just in case + const isUserOrg = this.userInfo.orgs.some(({ id }) => id === org.id); const memberCount = Object.keys(org.users || {}).length; + const none = html` + + `; + return html` - + ${org.default ? html`${msg("Default")}` : nothing} @@ -263,7 +285,15 @@ export class OrgsList extends TailwindElement { - ${formatNumber(memberCount)} + ${memberCount ? formatNumber(memberCount) : none} + + + ${org.bytesStored + ? html`` + : none} (NAVIGATE_EVENT_NAME, { detail: { url: (event.currentTarget as HTMLAnchorElement).href,