807 lines
23 KiB
TypeScript
807 lines
23 KiB
TypeScript
/**
|
|
* @file sdig-contract-attachments.ts
|
|
* @description Contract attachments and prior contracts manager
|
|
*/
|
|
|
|
import {
|
|
DeesElement,
|
|
property,
|
|
html,
|
|
customElement,
|
|
type TemplateResult,
|
|
css,
|
|
cssManager,
|
|
state,
|
|
} from '@design.estate/dees-element';
|
|
|
|
import * as plugins from '../../plugins.js';
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'sdig-contract-attachments': SdigContractAttachments;
|
|
}
|
|
}
|
|
|
|
// Attachment interface
|
|
interface IAttachment {
|
|
id: string;
|
|
name: string;
|
|
type: 'document' | 'image' | 'spreadsheet' | 'pdf' | 'other';
|
|
mimeType: string;
|
|
size: number;
|
|
uploadedAt: number;
|
|
uploadedBy: string;
|
|
description?: string;
|
|
url?: string;
|
|
}
|
|
|
|
// File type configuration
|
|
const FILE_TYPES = {
|
|
document: { icon: 'lucide:file-text', color: '#3b82f6', label: 'Document' },
|
|
image: { icon: 'lucide:image', color: '#10b981', label: 'Image' },
|
|
spreadsheet: { icon: 'lucide:sheet', color: '#22c55e', label: 'Spreadsheet' },
|
|
pdf: { icon: 'lucide:file-type', color: '#ef4444', label: 'PDF' },
|
|
other: { icon: 'lucide:file', color: '#6b7280', label: 'File' },
|
|
};
|
|
|
|
@customElement('sdig-contract-attachments')
|
|
export class SdigContractAttachments extends DeesElement {
|
|
// ============================================================================
|
|
// STATIC
|
|
// ============================================================================
|
|
|
|
public static demo = () => html`
|
|
<sdig-contract-attachments
|
|
.contract=${plugins.sdDemodata.demoContract}
|
|
></sdig-contract-attachments>
|
|
`;
|
|
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
css`
|
|
:host {
|
|
display: block;
|
|
}
|
|
|
|
.attachments-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
}
|
|
|
|
/* Section card */
|
|
.section-card {
|
|
background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
|
|
border: 1px solid ${cssManager.bdTheme('#e5e5e5', '#27272a')};
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 16px 20px;
|
|
background: ${cssManager.bdTheme('#f9fafb', '#111111')};
|
|
border-bottom: 1px solid ${cssManager.bdTheme('#e5e5e5', '#27272a')};
|
|
}
|
|
|
|
.section-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: ${cssManager.bdTheme('#111111', '#fafafa')};
|
|
}
|
|
|
|
.section-title dees-icon {
|
|
font-size: 18px;
|
|
color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
|
|
}
|
|
|
|
.section-count {
|
|
font-size: 13px;
|
|
color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
|
|
}
|
|
|
|
.section-content {
|
|
padding: 20px;
|
|
}
|
|
|
|
/* Upload zone */
|
|
.upload-zone {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 40px 20px;
|
|
border: 2px dashed ${cssManager.bdTheme('#d1d5db', '#3f3f46')};
|
|
border-radius: 12px;
|
|
background: ${cssManager.bdTheme('#f9fafb', '#111111')};
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.upload-zone:hover {
|
|
border-color: ${cssManager.bdTheme('#9ca3af', '#52525b')};
|
|
background: ${cssManager.bdTheme('#f3f4f6', '#18181b')};
|
|
}
|
|
|
|
.upload-zone.dragging {
|
|
border-color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
|
|
background: ${cssManager.bdTheme('#eff6ff', '#172554')};
|
|
}
|
|
|
|
.upload-zone-icon {
|
|
width: 64px;
|
|
height: 64px;
|
|
border-radius: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 28px;
|
|
background: ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
|
color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.upload-zone-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: ${cssManager.bdTheme('#111111', '#fafafa')};
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.upload-zone-subtitle {
|
|
font-size: 14px;
|
|
color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.upload-zone-hint {
|
|
font-size: 12px;
|
|
color: ${cssManager.bdTheme('#9ca3af', '#6b7280')};
|
|
}
|
|
|
|
/* Attachments list */
|
|
.attachments-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.attachment-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
padding: 14px 16px;
|
|
background: ${cssManager.bdTheme('#f9fafb', '#111111')};
|
|
border: 1px solid ${cssManager.bdTheme('#e5e5e5', '#27272a')};
|
|
border-radius: 10px;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.attachment-item:hover {
|
|
border-color: ${cssManager.bdTheme('#d1d5db', '#3f3f46')};
|
|
}
|
|
|
|
.attachment-icon {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 20px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.attachment-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.attachment-name {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: ${cssManager.bdTheme('#111111', '#fafafa')};
|
|
margin-bottom: 4px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.attachment-meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
font-size: 12px;
|
|
color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
|
|
}
|
|
|
|
.attachment-meta-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.attachment-actions {
|
|
display: flex;
|
|
gap: 4px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Prior contracts */
|
|
.prior-contracts-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.prior-contract-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
padding: 16px;
|
|
background: ${cssManager.bdTheme('#f9fafb', '#111111')};
|
|
border: 1px solid ${cssManager.bdTheme('#e5e5e5', '#27272a')};
|
|
border-radius: 10px;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.prior-contract-item:hover {
|
|
border-color: ${cssManager.bdTheme('#d1d5db', '#3f3f46')};
|
|
background: ${cssManager.bdTheme('#f3f4f6', '#18181b')};
|
|
}
|
|
|
|
.prior-contract-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 22px;
|
|
background: ${cssManager.bdTheme('#dbeafe', '#1e3a5f')};
|
|
color: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.prior-contract-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.prior-contract-title {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: ${cssManager.bdTheme('#111111', '#fafafa')};
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.prior-contract-context {
|
|
font-size: 13px;
|
|
color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.prior-contract-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Empty state */
|
|
.empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 40px 20px;
|
|
text-align: center;
|
|
color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
|
|
}
|
|
|
|
.empty-state dees-icon {
|
|
font-size: 48px;
|
|
margin-bottom: 16px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.empty-state h4 {
|
|
margin: 0 0 8px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: ${cssManager.bdTheme('#374151', '#d1d5db')};
|
|
}
|
|
|
|
.empty-state p {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* Storage summary */
|
|
.storage-summary {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
padding: 16px;
|
|
background: ${cssManager.bdTheme('#f9fafb', '#111111')};
|
|
border: 1px solid ${cssManager.bdTheme('#e5e5e5', '#27272a')};
|
|
border-radius: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.storage-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.storage-label {
|
|
font-size: 13px;
|
|
color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.storage-bar {
|
|
height: 6px;
|
|
background: ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.storage-fill {
|
|
height: 100%;
|
|
background: ${cssManager.bdTheme('#3b82f6', '#60a5fa')};
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.storage-text {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: ${cssManager.bdTheme('#111111', '#fafafa')};
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Buttons */
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 8px 14px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
border-radius: 6px;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.btn-sm {
|
|
padding: 6px 10px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: ${cssManager.bdTheme('#111111', '#fafafa')};
|
|
color: ${cssManager.bdTheme('#ffffff', '#09090b')};
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: ${cssManager.bdTheme('#333333', '#e5e5e5')};
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: ${cssManager.bdTheme('#f3f4f6', '#27272a')};
|
|
color: ${cssManager.bdTheme('#374151', '#d1d5db')};
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: ${cssManager.bdTheme('#e5e7eb', '#3f3f46')};
|
|
}
|
|
|
|
.btn-ghost {
|
|
background: transparent;
|
|
color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
|
|
padding: 6px;
|
|
}
|
|
|
|
.btn-ghost:hover {
|
|
background: ${cssManager.bdTheme('#f3f4f6', '#27272a')};
|
|
color: ${cssManager.bdTheme('#111111', '#fafafa')};
|
|
}
|
|
|
|
.btn-danger {
|
|
color: ${cssManager.bdTheme('#dc2626', '#f87171')};
|
|
}
|
|
|
|
.btn-danger:hover {
|
|
background: ${cssManager.bdTheme('#fef2f2', '#450a0a')};
|
|
}
|
|
|
|
/* Type badge */
|
|
.type-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
background: ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
|
color: ${cssManager.bdTheme('#374151', '#d1d5db')};
|
|
}
|
|
`,
|
|
];
|
|
|
|
// ============================================================================
|
|
// PROPERTIES
|
|
// ============================================================================
|
|
|
|
@property({ type: Object })
|
|
public accessor contract: plugins.sdInterfaces.IPortableContract | null = null;
|
|
|
|
@property({ type: Boolean })
|
|
public accessor readonly: boolean = false;
|
|
|
|
// ============================================================================
|
|
// STATE
|
|
// ============================================================================
|
|
|
|
@state()
|
|
private accessor isDragging: boolean = false;
|
|
|
|
// Demo attachments data
|
|
@state()
|
|
private accessor attachments: IAttachment[] = [
|
|
{
|
|
id: '1',
|
|
name: 'Employment_Terms_v2.pdf',
|
|
type: 'pdf',
|
|
mimeType: 'application/pdf',
|
|
size: 245760,
|
|
uploadedAt: Date.now() - 86400000 * 3,
|
|
uploadedBy: 'employer',
|
|
description: 'Original employment terms document',
|
|
},
|
|
{
|
|
id: '2',
|
|
name: 'ID_Verification.png',
|
|
type: 'image',
|
|
mimeType: 'image/png',
|
|
size: 1024000,
|
|
uploadedAt: Date.now() - 86400000,
|
|
uploadedBy: 'employee',
|
|
},
|
|
{
|
|
id: '3',
|
|
name: 'Tax_Information.xlsx',
|
|
type: 'spreadsheet',
|
|
mimeType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
|
size: 52480,
|
|
uploadedAt: Date.now() - 86400000 * 2,
|
|
uploadedBy: 'employer',
|
|
},
|
|
];
|
|
|
|
// ============================================================================
|
|
// EVENT HANDLERS
|
|
// ============================================================================
|
|
|
|
private handleFieldChange(path: string, value: unknown) {
|
|
this.dispatchEvent(
|
|
new CustomEvent('field-change', {
|
|
detail: { path, value },
|
|
bubbles: true,
|
|
composed: true,
|
|
})
|
|
);
|
|
}
|
|
|
|
private handleDragEnter(e: DragEvent) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
this.isDragging = true;
|
|
}
|
|
|
|
private handleDragLeave(e: DragEvent) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
this.isDragging = false;
|
|
}
|
|
|
|
private handleDragOver(e: DragEvent) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}
|
|
|
|
private handleDrop(e: DragEvent) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
this.isDragging = false;
|
|
|
|
const files = e.dataTransfer?.files;
|
|
if (files && files.length > 0) {
|
|
this.handleFiles(files);
|
|
}
|
|
}
|
|
|
|
private handleFileSelect() {
|
|
const input = document.createElement('input');
|
|
input.type = 'file';
|
|
input.multiple = true;
|
|
input.onchange = () => {
|
|
if (input.files && input.files.length > 0) {
|
|
this.handleFiles(input.files);
|
|
}
|
|
};
|
|
input.click();
|
|
}
|
|
|
|
private handleFiles(files: FileList) {
|
|
// Demo: just add to list
|
|
Array.from(files).forEach((file) => {
|
|
const newAttachment: IAttachment = {
|
|
id: `att-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
|
|
name: file.name,
|
|
type: this.getFileType(file.type),
|
|
mimeType: file.type,
|
|
size: file.size,
|
|
uploadedAt: Date.now(),
|
|
uploadedBy: 'user',
|
|
};
|
|
this.attachments = [...this.attachments, newAttachment];
|
|
});
|
|
}
|
|
|
|
private handleDeleteAttachment(attachmentId: string) {
|
|
this.attachments = this.attachments.filter((a) => a.id !== attachmentId);
|
|
}
|
|
|
|
private handleAddPriorContract() {
|
|
// TODO: Open prior contract picker modal
|
|
}
|
|
|
|
private handleRemovePriorContract(index: number) {
|
|
if (!this.contract) return;
|
|
const updatedPriorContracts = [...this.contract.priorContracts];
|
|
updatedPriorContracts.splice(index, 1);
|
|
this.handleFieldChange('priorContracts', updatedPriorContracts);
|
|
}
|
|
|
|
// ============================================================================
|
|
// HELPERS
|
|
// ============================================================================
|
|
|
|
private getFileType(mimeType: string): IAttachment['type'] {
|
|
if (mimeType.includes('pdf')) return 'pdf';
|
|
if (mimeType.includes('image')) return 'image';
|
|
if (mimeType.includes('spreadsheet') || mimeType.includes('excel')) return 'spreadsheet';
|
|
if (mimeType.includes('document') || mimeType.includes('word')) return 'document';
|
|
return 'other';
|
|
}
|
|
|
|
private getFileTypeConfig(type: IAttachment['type']) {
|
|
return FILE_TYPES[type] || FILE_TYPES.other;
|
|
}
|
|
|
|
private formatFileSize(bytes: number): string {
|
|
if (bytes === 0) return '0 B';
|
|
const k = 1024;
|
|
const sizes = ['B', 'KB', 'MB', 'GB'];
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
|
|
}
|
|
|
|
private formatDate(timestamp: number): string {
|
|
return new Date(timestamp).toLocaleDateString('en-US', {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
year: 'numeric',
|
|
});
|
|
}
|
|
|
|
private getTotalSize(): number {
|
|
return this.attachments.reduce((sum, a) => sum + a.size, 0);
|
|
}
|
|
|
|
private getPartyName(roleId: string): string {
|
|
const role = this.contract?.availableRoles.find((r) => r.id === roleId);
|
|
return role?.name || roleId;
|
|
}
|
|
|
|
// ============================================================================
|
|
// RENDER
|
|
// ============================================================================
|
|
|
|
public render(): TemplateResult {
|
|
if (!this.contract) {
|
|
return html`<div>No contract loaded</div>`;
|
|
}
|
|
|
|
const totalSize = this.getTotalSize();
|
|
const maxSize = 50 * 1024 * 1024; // 50MB demo limit
|
|
const usagePercent = Math.min((totalSize / maxSize) * 100, 100);
|
|
|
|
return html`
|
|
<div class="attachments-container">
|
|
<!-- Attachments Section -->
|
|
<div class="section-card">
|
|
<div class="section-header">
|
|
<div class="section-title">
|
|
<dees-icon .iconFA=${'lucide:paperclip'}></dees-icon>
|
|
Attachments
|
|
</div>
|
|
<span class="section-count">${this.attachments.length} files</span>
|
|
</div>
|
|
<div class="section-content">
|
|
<!-- Storage summary -->
|
|
<div class="storage-summary">
|
|
<div class="storage-info">
|
|
<div class="storage-label">Storage used</div>
|
|
<div class="storage-bar">
|
|
<div class="storage-fill" style="width: ${usagePercent}%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="storage-text">
|
|
${this.formatFileSize(totalSize)} / ${this.formatFileSize(maxSize)}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Upload zone -->
|
|
${!this.readonly
|
|
? html`
|
|
<div
|
|
class="upload-zone ${this.isDragging ? 'dragging' : ''}"
|
|
@dragenter=${this.handleDragEnter}
|
|
@dragleave=${this.handleDragLeave}
|
|
@dragover=${this.handleDragOver}
|
|
@drop=${this.handleDrop}
|
|
@click=${this.handleFileSelect}
|
|
>
|
|
<div class="upload-zone-icon">
|
|
<dees-icon .iconFA=${'lucide:upload-cloud'}></dees-icon>
|
|
</div>
|
|
<div class="upload-zone-title">Drop files here or click to upload</div>
|
|
<div class="upload-zone-subtitle">Add supporting documents, images, or spreadsheets</div>
|
|
<div class="upload-zone-hint">PDF, DOCX, XLSX, PNG, JPG up to 10MB each</div>
|
|
</div>
|
|
`
|
|
: ''}
|
|
|
|
<!-- Attachments list -->
|
|
${this.attachments.length > 0
|
|
? html`
|
|
<div class="attachments-list" style="margin-top: 20px;">
|
|
${this.attachments.map((attachment) => this.renderAttachmentItem(attachment))}
|
|
</div>
|
|
`
|
|
: html`
|
|
<div class="empty-state" style="margin-top: 20px;">
|
|
<dees-icon .iconFA=${'lucide:file-x'}></dees-icon>
|
|
<h4>No Attachments</h4>
|
|
<p>Upload files to attach them to this contract</p>
|
|
</div>
|
|
`}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Prior Contracts Section -->
|
|
<div class="section-card">
|
|
<div class="section-header">
|
|
<div class="section-title">
|
|
<dees-icon .iconFA=${'lucide:files'}></dees-icon>
|
|
Prior Contracts
|
|
</div>
|
|
${!this.readonly
|
|
? html`
|
|
<button class="btn btn-secondary" @click=${this.handleAddPriorContract}>
|
|
<dees-icon .iconFA=${'lucide:plus'}></dees-icon>
|
|
Link Contract
|
|
</button>
|
|
`
|
|
: ''}
|
|
</div>
|
|
<div class="section-content">
|
|
${this.contract.priorContracts.length > 0
|
|
? html`
|
|
<div class="prior-contracts-list">
|
|
${this.contract.priorContracts.map((priorContract, index) =>
|
|
this.renderPriorContractItem(priorContract, index)
|
|
)}
|
|
</div>
|
|
`
|
|
: html`
|
|
<div class="empty-state">
|
|
<dees-icon .iconFA=${'lucide:link'}></dees-icon>
|
|
<h4>No Prior Contracts</h4>
|
|
<p>Link related or predecessor contracts here</p>
|
|
</div>
|
|
`}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private renderAttachmentItem(attachment: IAttachment): TemplateResult {
|
|
const typeConfig = this.getFileTypeConfig(attachment.type);
|
|
|
|
return html`
|
|
<div class="attachment-item">
|
|
<div class="attachment-icon" style="background: ${typeConfig.color}20; color: ${typeConfig.color}">
|
|
<dees-icon .iconFA=${typeConfig.icon}></dees-icon>
|
|
</div>
|
|
<div class="attachment-info">
|
|
<div class="attachment-name">${attachment.name}</div>
|
|
<div class="attachment-meta">
|
|
<span class="type-badge">${typeConfig.label}</span>
|
|
<span class="attachment-meta-item">
|
|
${this.formatFileSize(attachment.size)}
|
|
</span>
|
|
<span class="attachment-meta-item">
|
|
<dees-icon .iconFA=${'lucide:calendar'}></dees-icon>
|
|
${this.formatDate(attachment.uploadedAt)}
|
|
</span>
|
|
<span class="attachment-meta-item">
|
|
<dees-icon .iconFA=${'lucide:user'}></dees-icon>
|
|
${this.getPartyName(attachment.uploadedBy)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div class="attachment-actions">
|
|
<button class="btn btn-ghost" title="Download">
|
|
<dees-icon .iconFA=${'lucide:download'}></dees-icon>
|
|
</button>
|
|
<button class="btn btn-ghost" title="Preview">
|
|
<dees-icon .iconFA=${'lucide:eye'}></dees-icon>
|
|
</button>
|
|
${!this.readonly
|
|
? html`
|
|
<button
|
|
class="btn btn-ghost btn-danger"
|
|
title="Delete"
|
|
@click=${() => this.handleDeleteAttachment(attachment.id)}
|
|
>
|
|
<dees-icon .iconFA=${'lucide:trash-2'}></dees-icon>
|
|
</button>
|
|
`
|
|
: ''}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private renderPriorContractItem(priorContract: plugins.sdInterfaces.IPortableContract, index: number): TemplateResult {
|
|
return html`
|
|
<div class="prior-contract-item">
|
|
<div class="prior-contract-icon">
|
|
<dees-icon .iconFA=${'lucide:file-text'}></dees-icon>
|
|
</div>
|
|
<div class="prior-contract-info">
|
|
<div class="prior-contract-title">${priorContract.title}</div>
|
|
<div class="prior-contract-context">${priorContract.context || 'No description'}</div>
|
|
</div>
|
|
<div class="prior-contract-actions">
|
|
<button class="btn btn-secondary btn-sm">
|
|
<dees-icon .iconFA=${'lucide:external-link'}></dees-icon>
|
|
View
|
|
</button>
|
|
${!this.readonly
|
|
? html`
|
|
<button
|
|
class="btn btn-ghost btn-danger"
|
|
@click=${() => this.handleRemovePriorContract(index)}
|
|
>
|
|
<dees-icon .iconFA=${'lucide:unlink'}></dees-icon>
|
|
</button>
|
|
`
|
|
: ''}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|