889 lines
27 KiB
TypeScript
889 lines
27 KiB
TypeScript
import {
|
|
DeesElement,
|
|
customElement,
|
|
html,
|
|
css,
|
|
cssManager,
|
|
property,
|
|
state,
|
|
type TemplateResult,
|
|
} from '@design.estate/dees-element';
|
|
import type {
|
|
ISgOrganizationDetail,
|
|
ISgRepository,
|
|
ISgOrganizationMember,
|
|
ISgOrgRedirect,
|
|
TSgOrgRole,
|
|
} from '../interfaces.js';
|
|
import './sg-protocol-badge.js';
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'sg-organization-detail-view': SgOrganizationDetailView;
|
|
}
|
|
}
|
|
|
|
@customElement('sg-organization-detail-view')
|
|
export class SgOrganizationDetailView extends DeesElement {
|
|
public static demo = () => html`
|
|
<div style="padding: 24px; max-width: 1200px; background: #09090b;">
|
|
<sg-organization-detail-view
|
|
.organization=${{
|
|
id: 'org1',
|
|
name: 'myorg',
|
|
displayName: 'My Organization',
|
|
description: 'Primary development organization for internal and open-source packages.',
|
|
isPublic: true,
|
|
memberCount: 8,
|
|
createdAt: '2025-06-01',
|
|
website: 'https://myorg.dev',
|
|
usedStorageBytes: 2147483648,
|
|
storageQuotaBytes: 10737418240,
|
|
}}
|
|
.repositories=${[
|
|
{ id: 'r1', organizationId: 'org1', name: 'npm-packages', description: 'NPM package repository', protocol: 'npm', visibility: 'public', isPublic: true, packageCount: 24, createdAt: '2025-06-15' },
|
|
{ id: 'r2', organizationId: 'org1', name: 'docker-images', description: 'OCI container images', protocol: 'oci', visibility: 'private', isPublic: false, packageCount: 12, createdAt: '2025-07-01' },
|
|
{ id: 'r3', organizationId: 'org1', name: 'python-libs', protocol: 'pypi', visibility: 'internal', isPublic: false, packageCount: 6, createdAt: '2025-08-10' },
|
|
]}
|
|
.members=${[
|
|
{ userId: 'u1', role: 'owner', addedAt: '2025-06-01', user: { username: 'admin', displayName: 'Admin User', avatarUrl: '' } },
|
|
{ userId: 'u2', role: 'admin', addedAt: '2025-06-10', user: { username: 'jane', displayName: 'Jane Doe', avatarUrl: '' } },
|
|
{ userId: 'u3', role: 'member', addedAt: '2025-07-05', user: { username: 'bob', displayName: 'Bob Smith', avatarUrl: '' } },
|
|
]}
|
|
></sg-organization-detail-view>
|
|
</div>
|
|
`;
|
|
|
|
public static demoGroups = ['Organizations'];
|
|
|
|
@property({ type: Object })
|
|
public accessor organization: ISgOrganizationDetail = {
|
|
id: '',
|
|
name: '',
|
|
displayName: '',
|
|
isPublic: true,
|
|
memberCount: 0,
|
|
createdAt: '',
|
|
usedStorageBytes: 0,
|
|
storageQuotaBytes: 0,
|
|
};
|
|
|
|
@property({ type: Array })
|
|
public accessor repositories: ISgRepository[] = [];
|
|
|
|
@property({ type: Array })
|
|
public accessor members: ISgOrganizationMember[] = [];
|
|
|
|
@property({ type: Array })
|
|
public accessor redirects: ISgOrgRedirect[] = [];
|
|
|
|
@state()
|
|
accessor editing: boolean = false;
|
|
|
|
@state()
|
|
accessor editName: string = '';
|
|
|
|
@state()
|
|
accessor editDisplayName: string = '';
|
|
|
|
@state()
|
|
accessor editDescription: string = '';
|
|
|
|
@state()
|
|
accessor editWebsite: string = '';
|
|
|
|
@state()
|
|
accessor editIsPublic: boolean = false;
|
|
|
|
@state()
|
|
accessor showDeleteConfirm: boolean = false;
|
|
|
|
@state()
|
|
accessor deleteConfirmName: string = '';
|
|
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
css`
|
|
:host {
|
|
display: block;
|
|
color: ${cssManager.bdTheme('#111', '#fff')};
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 32px;
|
|
}
|
|
|
|
/* Back button */
|
|
.back-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 0;
|
|
background: transparent;
|
|
border: none;
|
|
font-size: 13px;
|
|
color: ${cssManager.bdTheme('#666', '#999')};
|
|
cursor: pointer;
|
|
transition: color 150ms ease;
|
|
}
|
|
|
|
.back-btn:hover {
|
|
color: ${cssManager.bdTheme('#111', '#fff')};
|
|
}
|
|
|
|
/* Org header */
|
|
.org-header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.org-top {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
.org-avatar {
|
|
width: 56px;
|
|
height: 56px;
|
|
background: ${cssManager.bdTheme('#e5e5e5', '#333')};
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: ${cssManager.bdTheme('#666', '#999')};
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.org-titles h1 {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
margin: 0;
|
|
letter-spacing: -0.02em;
|
|
}
|
|
|
|
.org-handle {
|
|
font-size: 14px;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
color: ${cssManager.bdTheme('#888', '#777')};
|
|
}
|
|
|
|
.org-description {
|
|
font-size: 14px;
|
|
color: ${cssManager.bdTheme('#666', '#aaa')};
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.org-meta-bar {
|
|
display: flex;
|
|
gap: 16px;
|
|
font-size: 13px;
|
|
color: ${cssManager.bdTheme('#888', '#777')};
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.org-meta-bar span {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.storage-bar {
|
|
width: 120px;
|
|
height: 4px;
|
|
background: ${cssManager.bdTheme('#e5e5e5', '#333')};
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.storage-fill {
|
|
height: 100%;
|
|
background: ${cssManager.bdTheme('#111', '#fff')};
|
|
}
|
|
|
|
/* Section */
|
|
.section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.add-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 14px;
|
|
background: transparent;
|
|
border: 1px solid ${cssManager.bdTheme('#ddd', '#333')};
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: ${cssManager.bdTheme('#333', '#ddd')};
|
|
cursor: pointer;
|
|
transition: all 150ms ease;
|
|
}
|
|
|
|
.add-btn:hover {
|
|
background: ${cssManager.bdTheme('#111', '#fff')};
|
|
color: ${cssManager.bdTheme('#fff', '#111')};
|
|
border-color: ${cssManager.bdTheme('#111', '#fff')};
|
|
}
|
|
|
|
/* Repo grid */
|
|
.repo-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
gap: 1px;
|
|
background: ${cssManager.bdTheme('#e5e5e5', '#333')};
|
|
border: 1px solid ${cssManager.bdTheme('#e5e5e5', '#333')};
|
|
}
|
|
|
|
.repo-card {
|
|
background: ${cssManager.bdTheme('#fff', '#111')};
|
|
padding: 16px;
|
|
cursor: pointer;
|
|
transition: background 100ms ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.repo-card:hover {
|
|
background: ${cssManager.bdTheme('#fafafa', '#1a1a1a')};
|
|
}
|
|
|
|
.repo-name {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.repo-description {
|
|
font-size: 13px;
|
|
color: ${cssManager.bdTheme('#666', '#aaa')};
|
|
}
|
|
|
|
.repo-meta {
|
|
display: flex;
|
|
gap: 12px;
|
|
font-size: 12px;
|
|
color: ${cssManager.bdTheme('#888', '#777')};
|
|
}
|
|
|
|
.visibility-tag {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
padding: 1px 6px;
|
|
}
|
|
|
|
.visibility-tag.public {
|
|
background: rgba(34, 197, 94, 0.15);
|
|
color: #22c55e;
|
|
}
|
|
|
|
.visibility-tag.private {
|
|
background: rgba(239, 68, 68, 0.15);
|
|
color: #ef4444;
|
|
}
|
|
|
|
.visibility-tag.internal {
|
|
background: rgba(59, 130, 246, 0.15);
|
|
color: #3b82f6;
|
|
}
|
|
|
|
/* Members list */
|
|
.members-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border: 1px solid ${cssManager.bdTheme('#e5e5e5', '#333')};
|
|
}
|
|
|
|
.member-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 12px 16px;
|
|
background: ${cssManager.bdTheme('#fff', '#111')};
|
|
border-bottom: 1px solid ${cssManager.bdTheme('#e5e5e5', '#333')};
|
|
}
|
|
|
|
.member-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.member-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.member-avatar {
|
|
width: 32px;
|
|
height: 32px;
|
|
background: ${cssManager.bdTheme('#e5e5e5', '#333')};
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: ${cssManager.bdTheme('#666', '#999')};
|
|
}
|
|
|
|
.member-name {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: ${cssManager.bdTheme('#111', '#fff')};
|
|
}
|
|
|
|
.member-username {
|
|
font-size: 12px;
|
|
font-family: 'JetBrains Mono', monospace;
|
|
color: ${cssManager.bdTheme('#888', '#777')};
|
|
}
|
|
|
|
.member-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.role-badge {
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
padding: 2px 8px;
|
|
background: ${cssManager.bdTheme('#f5f5f5', '#1a1a1a')};
|
|
color: ${cssManager.bdTheme('#666', '#aaa')};
|
|
border: 1px solid ${cssManager.bdTheme('#e5e5e5', '#333')};
|
|
}
|
|
|
|
.remove-btn {
|
|
padding: 4px 10px;
|
|
background: transparent;
|
|
border: 1px solid rgba(239, 68, 68, 0.3);
|
|
font-size: 12px;
|
|
color: #ef4444;
|
|
cursor: pointer;
|
|
transition: all 150ms ease;
|
|
}
|
|
|
|
.remove-btn:hover {
|
|
background: rgba(239, 68, 68, 0.15);
|
|
}
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 32px;
|
|
font-size: 14px;
|
|
color: ${cssManager.bdTheme('#888', '#777')};
|
|
border: 1px solid ${cssManager.bdTheme('#e5e5e5', '#333')};
|
|
background: ${cssManager.bdTheme('#fff', '#111')};
|
|
}
|
|
|
|
/* Header actions */
|
|
.header-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.edit-btn {
|
|
padding: 6px 14px;
|
|
background: transparent;
|
|
border: 1px solid ${cssManager.bdTheme('#ddd', '#333')};
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: ${cssManager.bdTheme('#333', '#ddd')};
|
|
cursor: pointer;
|
|
transition: all 150ms ease;
|
|
}
|
|
|
|
.edit-btn:hover {
|
|
background: ${cssManager.bdTheme('#111', '#fff')};
|
|
color: ${cssManager.bdTheme('#fff', '#111')};
|
|
border-color: ${cssManager.bdTheme('#111', '#fff')};
|
|
}
|
|
|
|
.delete-btn {
|
|
padding: 6px 14px;
|
|
background: transparent;
|
|
border: 1px solid rgba(239, 68, 68, 0.3);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: #ef4444;
|
|
cursor: pointer;
|
|
transition: all 150ms ease;
|
|
}
|
|
|
|
.delete-btn:hover {
|
|
background: rgba(239, 68, 68, 0.15);
|
|
}
|
|
|
|
/* Edit form */
|
|
.edit-form {
|
|
background: ${cssManager.bdTheme('#fff', '#111')};
|
|
border: 1px solid ${cssManager.bdTheme('#e5e5e5', '#333')};
|
|
padding: 24px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.edit-form-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.form-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.form-label {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: ${cssManager.bdTheme('#111', '#ddd')};
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.form-input,
|
|
.form-textarea {
|
|
padding: 10px 12px;
|
|
background: ${cssManager.bdTheme('#fff', '#0a0a0a')};
|
|
border: 1px solid ${cssManager.bdTheme('#ddd', '#333')};
|
|
font-size: 14px;
|
|
color: ${cssManager.bdTheme('#111', '#fff')};
|
|
outline: none;
|
|
font-family: inherit;
|
|
max-width: 400px;
|
|
}
|
|
|
|
.form-input:focus,
|
|
.form-textarea:focus {
|
|
border-color: ${cssManager.bdTheme('#111', '#fff')};
|
|
}
|
|
|
|
.form-textarea {
|
|
resize: vertical;
|
|
min-height: 60px;
|
|
}
|
|
|
|
.form-toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 14px;
|
|
color: ${cssManager.bdTheme('#111', '#fff')};
|
|
cursor: pointer;
|
|
}
|
|
|
|
.form-toggle input[type="checkbox"] {
|
|
width: 16px;
|
|
height: 16px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.form-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.save-btn {
|
|
padding: 8px 20px;
|
|
background: ${cssManager.bdTheme('#111', '#fff')};
|
|
border: none;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: ${cssManager.bdTheme('#fff', '#111')};
|
|
cursor: pointer;
|
|
transition: opacity 150ms ease;
|
|
}
|
|
|
|
.save-btn:hover {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.cancel-btn {
|
|
padding: 8px 20px;
|
|
background: transparent;
|
|
border: 1px solid ${cssManager.bdTheme('#ddd', '#333')};
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: ${cssManager.bdTheme('#333', '#ddd')};
|
|
cursor: pointer;
|
|
transition: all 150ms ease;
|
|
}
|
|
|
|
.cancel-btn:hover {
|
|
border-color: ${cssManager.bdTheme('#111', '#fff')};
|
|
color: ${cssManager.bdTheme('#111', '#fff')};
|
|
}
|
|
|
|
/* Danger zone */
|
|
.danger-zone {
|
|
background: ${cssManager.bdTheme('#fff', '#111')};
|
|
border: 1px solid rgba(239, 68, 68, 0.3);
|
|
padding: 24px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.danger-zone-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #ef4444;
|
|
}
|
|
|
|
.danger-zone-text {
|
|
font-size: 13px;
|
|
color: ${cssManager.bdTheme('#666', '#aaa')};
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.danger-zone-warning {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #ef4444;
|
|
}
|
|
|
|
.danger-confirm-btn {
|
|
align-self: flex-start;
|
|
padding: 8px 16px;
|
|
background: #ef4444;
|
|
border: none;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
transition: opacity 150ms ease;
|
|
}
|
|
|
|
.danger-confirm-btn:hover {
|
|
opacity: 0.85;
|
|
}
|
|
|
|
.danger-confirm-btn:disabled {
|
|
opacity: 0.4;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.danger-cancel-btn {
|
|
align-self: flex-start;
|
|
padding: 8px 16px;
|
|
background: transparent;
|
|
border: 1px solid ${cssManager.bdTheme('#ddd', '#333')};
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: ${cssManager.bdTheme('#333', '#ddd')};
|
|
cursor: pointer;
|
|
transition: all 150ms ease;
|
|
}
|
|
|
|
.danger-cancel-btn:hover {
|
|
border-color: ${cssManager.bdTheme('#111', '#fff')};
|
|
color: ${cssManager.bdTheme('#111', '#fff')};
|
|
}
|
|
`,
|
|
];
|
|
|
|
public render(): TemplateResult {
|
|
const storagePercent =
|
|
this.organization.storageQuotaBytes > 0
|
|
? Math.round((this.organization.usedStorageBytes / this.organization.storageQuotaBytes) * 100)
|
|
: 0;
|
|
|
|
return html`
|
|
<div class="container">
|
|
<button class="back-btn" @click=${() => this.emitEvent('back', {})}>
|
|
\u2190 Back to organizations
|
|
</button>
|
|
|
|
<div class="org-header">
|
|
<div class="org-top">
|
|
<div class="org-avatar">
|
|
${(this.organization.displayName || this.organization.name).charAt(0).toUpperCase()}
|
|
</div>
|
|
<div class="org-titles">
|
|
<h1>${this.organization.displayName || this.organization.name}</h1>
|
|
<div class="org-handle">@${this.organization.name}</div>
|
|
</div>
|
|
<div class="header-actions">
|
|
<button class="edit-btn" @click=${() => this.startEdit()}>Edit</button>
|
|
<button class="delete-btn" @click=${() => { this.showDeleteConfirm = true; }}>Delete</button>
|
|
</div>
|
|
</div>
|
|
${this.editing
|
|
? html`
|
|
<div class="edit-form">
|
|
<div class="edit-form-title">Edit Organization</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Handle</label>
|
|
<input
|
|
type="text"
|
|
class="form-input"
|
|
.value=${this.editName}
|
|
@input=${(e: InputEvent) => { this.editName = (e.target as HTMLInputElement).value; }}
|
|
placeholder="my-org"
|
|
>
|
|
${this.editName !== this.organization.name
|
|
? html`<span class="form-hint" style="color: #f59e0b;">Renaming will create a redirect from "@${this.organization.name}"</span>`
|
|
: html`<span class="form-hint">Lowercase letters, numbers, and dashes</span>`}
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Display Name</label>
|
|
<input
|
|
type="text"
|
|
class="form-input"
|
|
.value=${this.editDisplayName}
|
|
@input=${(e: InputEvent) => { this.editDisplayName = (e.target as HTMLInputElement).value; }}
|
|
placeholder="Organization display name"
|
|
>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Description</label>
|
|
<textarea
|
|
class="form-textarea"
|
|
.value=${this.editDescription}
|
|
@input=${(e: InputEvent) => { this.editDescription = (e.target as HTMLTextAreaElement).value; }}
|
|
placeholder="A short description"
|
|
></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">Website</label>
|
|
<input
|
|
type="url"
|
|
class="form-input"
|
|
.value=${this.editWebsite}
|
|
@input=${(e: InputEvent) => { this.editWebsite = (e.target as HTMLInputElement).value; }}
|
|
placeholder="https://..."
|
|
>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-toggle">
|
|
<input
|
|
type="checkbox"
|
|
.checked=${this.editIsPublic}
|
|
@change=${(e: Event) => { this.editIsPublic = (e.target as HTMLInputElement).checked; }}
|
|
>
|
|
Public organization
|
|
</label>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button class="save-btn" @click=${() => this.handleEditSave()}>Save</button>
|
|
<button class="cancel-btn" @click=${() => this.handleEditCancel()}>Cancel</button>
|
|
</div>
|
|
</div>
|
|
`
|
|
: html`
|
|
${this.organization.description
|
|
? html`<div class="org-description">${this.organization.description}</div>`
|
|
: ''}
|
|
<div class="org-meta-bar">
|
|
<span>${this.organization.memberCount} members</span>
|
|
<span>${this.organization.isPublic ? 'Public' : 'Private'}</span>
|
|
${this.organization.website ? html`<span>${this.organization.website}</span>` : ''}
|
|
<span>
|
|
Storage: ${this.formatBytes(this.organization.usedStorageBytes)} / ${this.formatBytes(this.organization.storageQuotaBytes)}
|
|
<span class="storage-bar"><span class="storage-fill" style="width: ${storagePercent}%"></span></span>
|
|
</span>
|
|
</div>
|
|
`}
|
|
</div>
|
|
|
|
<div class="section">
|
|
<div class="section-header">
|
|
<div class="section-title">Repositories (${this.repositories.length})</div>
|
|
<button class="add-btn" @click=${() => this.emitEvent('create-repo', {})}>+ New Repository</button>
|
|
</div>
|
|
${this.repositories.length > 0
|
|
? html`
|
|
<div class="repo-grid">
|
|
${this.repositories.map(
|
|
(repo) => html`
|
|
<div class="repo-card" @click=${() => this.emitEvent('select-repo', { repositoryId: repo.id })}>
|
|
<div class="repo-name">
|
|
<sg-protocol-badge .protocol=${repo.protocol}></sg-protocol-badge>
|
|
${repo.name}
|
|
</div>
|
|
${repo.description ? html`<div class="repo-description">${repo.description}</div>` : ''}
|
|
<div class="repo-meta">
|
|
<span>${repo.packageCount} packages</span>
|
|
<span class="visibility-tag ${repo.visibility}">${repo.visibility}</span>
|
|
</div>
|
|
</div>
|
|
`
|
|
)}
|
|
</div>
|
|
`
|
|
: html`<div class="empty-state">No repositories yet. Create one to start publishing packages.</div>`}
|
|
</div>
|
|
|
|
<div class="section">
|
|
<div class="section-header">
|
|
<div class="section-title">Members (${this.members.length})</div>
|
|
<button class="add-btn" @click=${() => this.emitEvent('add-member', {})}>+ Add Member</button>
|
|
</div>
|
|
${this.members.length > 0
|
|
? html`
|
|
<div class="members-list">
|
|
${this.members.map(
|
|
(member) => html`
|
|
<div class="member-row">
|
|
<div class="member-info">
|
|
<div class="member-avatar">
|
|
${(member.user?.displayName || member.user?.username || '?').charAt(0).toUpperCase()}
|
|
</div>
|
|
<div>
|
|
<div class="member-name">${member.user?.displayName || 'Unknown'}</div>
|
|
<div class="member-username">@${member.user?.username || member.userId}</div>
|
|
</div>
|
|
</div>
|
|
<div class="member-actions">
|
|
<span class="role-badge">${member.role}</span>
|
|
${member.role !== 'owner'
|
|
? html`<button class="remove-btn" @click=${() => this.emitEvent('remove-member', { userId: member.userId })}>Remove</button>`
|
|
: ''}
|
|
</div>
|
|
</div>
|
|
`
|
|
)}
|
|
</div>
|
|
`
|
|
: html`<div class="empty-state">No members</div>`}
|
|
</div>
|
|
|
|
${this.redirects.length > 0
|
|
? html`
|
|
<div class="section">
|
|
<div class="section-header">
|
|
<div class="section-title">Handle Redirects (${this.redirects.length})</div>
|
|
</div>
|
|
<div class="members-list">
|
|
${this.redirects.map(
|
|
(redirect) => html`
|
|
<div class="member-row">
|
|
<div class="member-info">
|
|
<div>
|
|
<div class="member-name" style="font-family: 'JetBrains Mono', monospace;">@${redirect.oldName}</div>
|
|
<div class="member-username">redirects to @${this.organization.name}</div>
|
|
</div>
|
|
</div>
|
|
<div class="member-actions">
|
|
<button class="remove-btn" @click=${() => this.emitEvent('delete-redirect', { redirectId: redirect.id })}>Delete</button>
|
|
</div>
|
|
</div>
|
|
`
|
|
)}
|
|
</div>
|
|
</div>
|
|
`
|
|
: ''}
|
|
|
|
${this.showDeleteConfirm
|
|
? html`
|
|
<div class="danger-zone">
|
|
<div class="danger-zone-title">Delete Organization</div>
|
|
<div class="danger-zone-text">
|
|
This action is <strong>irreversible</strong>. All repositories, packages, and data belonging to
|
|
<strong>@${this.organization.name}</strong> will be permanently deleted.
|
|
</div>
|
|
<div class="danger-zone-warning">
|
|
Type <strong>${this.organization.name}</strong> to confirm deletion.
|
|
</div>
|
|
<div class="form-group">
|
|
<input
|
|
type="text"
|
|
class="form-input"
|
|
.value=${this.deleteConfirmName}
|
|
@input=${(e: InputEvent) => { this.deleteConfirmName = (e.target as HTMLInputElement).value; }}
|
|
placeholder=${this.organization.name}
|
|
>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button
|
|
class="danger-confirm-btn"
|
|
?disabled=${this.deleteConfirmName !== this.organization.name}
|
|
@click=${() => this.handleDelete()}
|
|
>Delete Organization</button>
|
|
<button class="danger-cancel-btn" @click=${() => { this.showDeleteConfirm = false; this.deleteConfirmName = ''; }}>Cancel</button>
|
|
</div>
|
|
</div>
|
|
`
|
|
: ''}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private formatBytes(bytes: number): string {
|
|
if (bytes === 0) return '0 B';
|
|
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
|
|
const i = Math.floor(Math.log(bytes) / Math.log(1024));
|
|
return `${(bytes / Math.pow(1024, i)).toFixed(1)} ${units[i]}`;
|
|
}
|
|
|
|
private startEdit() {
|
|
this.editName = this.organization.name || '';
|
|
this.editDisplayName = this.organization.displayName || '';
|
|
this.editDescription = this.organization.description || '';
|
|
this.editWebsite = this.organization.website || '';
|
|
this.editIsPublic = this.organization.isPublic;
|
|
this.editing = true;
|
|
}
|
|
|
|
private handleEditSave() {
|
|
const detail: Record<string, unknown> = {
|
|
organizationId: this.organization.id,
|
|
displayName: this.editDisplayName.trim(),
|
|
description: this.editDescription.trim(),
|
|
website: this.editWebsite.trim(),
|
|
isPublic: this.editIsPublic,
|
|
};
|
|
// Only include name if it changed
|
|
if (this.editName.trim() && this.editName.trim() !== this.organization.name) {
|
|
detail.name = this.editName.trim();
|
|
}
|
|
this.emitEvent('edit', detail);
|
|
this.editing = false;
|
|
}
|
|
|
|
private handleEditCancel() {
|
|
this.editing = false;
|
|
}
|
|
|
|
private handleDelete() {
|
|
this.emitEvent('delete', {
|
|
organizationId: this.organization.id,
|
|
});
|
|
this.showDeleteConfirm = false;
|
|
this.deleteConfirmName = '';
|
|
}
|
|
|
|
private emitEvent(name: string, detail: Record<string, unknown>) {
|
|
this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
|
|
}
|
|
}
|