277 lines
9.3 KiB
HTML
277 lines
9.3 KiB
HTML
<div class="page-content">
|
|
@if (loading()) {
|
|
<div class="loading-container">
|
|
<nz-spin nzSimple nzSize="large"></nz-spin>
|
|
</div>
|
|
} @else if (key()) {
|
|
<div class="detail-header">
|
|
<button nz-button (click)="goBack()">
|
|
<span nz-icon nzType="arrow-left" nzTheme="outline"></span>
|
|
Back to Keys
|
|
</button>
|
|
<div class="header-actions">
|
|
<button nz-button (click)="openEditModal()">
|
|
<span nz-icon nzType="edit"></span>
|
|
Edit
|
|
</button>
|
|
@if (!isCurrentKey()) {
|
|
<button
|
|
nz-button
|
|
nzDanger
|
|
nz-popconfirm
|
|
nzPopconfirmTitle="Are you sure you want to delete this key?"
|
|
(nzOnConfirm)="deleteKey()"
|
|
>
|
|
<span nz-icon nzType="delete"></span>
|
|
Delete
|
|
</button>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<nz-card>
|
|
<div class="key-header">
|
|
<h2 class="key-title">{{ key()!.name }}</h2>
|
|
@if (isCurrentKey()) {
|
|
<nz-tag nzColor="cyan">Current</nz-tag>
|
|
}
|
|
</div>
|
|
|
|
<scn-metadata-grid>
|
|
<scn-metadata-value label="Key ID">
|
|
<span class="mono">{{ key()!.keytoken_id }}</span>
|
|
</scn-metadata-value>
|
|
<scn-metadata-value label="Permissions">
|
|
<div class="permissions">
|
|
@for (perm of getPermissions(); track perm) {
|
|
<nz-tag
|
|
[nzColor]="getPermissionColor(perm)"
|
|
nz-tooltip
|
|
[nzTooltipTitle]="getPermissionLabel(perm)"
|
|
>
|
|
{{ perm }}
|
|
</nz-tag>
|
|
}
|
|
</div>
|
|
</scn-metadata-value>
|
|
<scn-metadata-value label="Channel Access">
|
|
@if (key()!.all_channels) {
|
|
<nz-tag nzColor="default">All Channels</nz-tag>
|
|
} @else if (key()!.channels && key()!.channels.length > 0) {
|
|
<div class="channel-list">
|
|
@for (channelId of key()!.channels; track channelId) {
|
|
<nz-tag nzColor="orange" nz-tooltip [nzTooltipTitle]="channelId">
|
|
{{ getChannelDisplayName(channelId) }}
|
|
</nz-tag>
|
|
}
|
|
</div>
|
|
} @else {
|
|
<span class="text-muted">No channels</span>
|
|
}
|
|
</scn-metadata-value>
|
|
<scn-metadata-value label="Messages Sent">
|
|
{{ key()!.messages_sent }}
|
|
</scn-metadata-value>
|
|
<scn-metadata-value label="Created">
|
|
<div class="timestamp-absolute">{{ key()!.timestamp_created | date:'yyyy-MM-dd HH:mm:ss' }}</div>
|
|
<div class="timestamp-relative">{{ key()!.timestamp_created | relativeTime }}</div>
|
|
</scn-metadata-value>
|
|
<scn-metadata-value label="Last Used">
|
|
@if (key()!.timestamp_lastused) {
|
|
<div class="timestamp-absolute">{{ key()!.timestamp_lastused | date:'yyyy-MM-dd HH:mm:ss' }}</div>
|
|
<div class="timestamp-relative">{{ key()!.timestamp_lastused | relativeTime }}</div>
|
|
} @else {
|
|
<span class="text-muted">Never</span>
|
|
}
|
|
</scn-metadata-value>
|
|
<scn-metadata-value label="Owner">
|
|
@if (resolvedOwner()) {
|
|
<div class="owner-name">{{ resolvedOwner()!.displayName }}</div>
|
|
<div class="owner-id mono">{{ key()!.owner_user_id }}</div>
|
|
} @else {
|
|
<span class="mono">{{ key()!.owner_user_id }}</span>
|
|
}
|
|
</scn-metadata-value>
|
|
</scn-metadata-grid>
|
|
</nz-card>
|
|
|
|
<nz-card nzTitle="Messages" class="mt-16">
|
|
<nz-table
|
|
#messageTable
|
|
[nzData]="messages()"
|
|
[nzLoading]="loadingMessages()"
|
|
[nzShowPagination]="false"
|
|
[nzNoResult]="noMessagesResultTpl"
|
|
nzSize="small"
|
|
>
|
|
<ng-template #noMessagesResultTpl></ng-template>
|
|
<thead>
|
|
<tr>
|
|
<th>Title</th>
|
|
<th>Content</th>
|
|
<th nzWidth="0">Channel</th>
|
|
<th nzWidth="0">Sender</th>
|
|
<th nzWidth="0">Priority</th>
|
|
<th nzWidth="0">Time</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@for (message of messages(); track message.message_id) {
|
|
<tr class="clickable-row">
|
|
<td>
|
|
<a class="cell-link" [routerLink]="['/messages', message.message_id]">
|
|
<div class="message-title">{{ message.title }}</div>
|
|
<div class="message-id mono">{{ message.message_id }}</div>
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<a class="cell-link" [routerLink]="['/messages', message.message_id]">
|
|
@if (message.content) {
|
|
<div class="message-content">{{ message.content | slice:0:128 }}{{ message.content.length > 128 ? '...' : '' }}</div>
|
|
} @else {
|
|
<span class="text-muted"></span>
|
|
}
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<a class="cell-link" [routerLink]="['/messages', message.message_id]">
|
|
<div class="cell-name">{{ message.channel_internal_name }}</div>
|
|
<div class="cell-id mono">{{ message.channel_id }}</div>
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<a class="cell-link" [routerLink]="['/messages', message.message_id]">
|
|
<span style="white-space: pre">{{ message.sender_name || '-' }}</span>
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<a class="cell-link" [routerLink]="['/messages', message.message_id]">
|
|
<nz-tag [nzColor]="getPriorityColor(message.priority)">
|
|
{{ getPriorityLabel(message.priority) }}
|
|
</nz-tag>
|
|
</a>
|
|
</td>
|
|
<td>
|
|
<a class="cell-link" [routerLink]="['/messages', message.message_id]">
|
|
<div class="timestamp-absolute">{{ message.timestamp | date:'yyyy-MM-dd HH:mm:ss' }}</div>
|
|
<div class="timestamp-relative">{{ message.timestamp | relativeTime }}</div>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
} @empty {
|
|
<tr>
|
|
<td colspan="6">
|
|
<nz-empty nzNotFoundContent="No messages sent with this key"></nz-empty>
|
|
</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
</nz-table>
|
|
@if (messagesTotalCount() > messagesPageSize) {
|
|
<div class="pagination-controls">
|
|
<nz-pagination
|
|
[nzPageIndex]="messagesCurrentPage()"
|
|
[nzPageSize]="messagesPageSize"
|
|
[nzTotal]="messagesTotalCount()"
|
|
[nzDisabled]="loadingMessages()"
|
|
(nzPageIndexChange)="messagesGoToPage($event)"
|
|
></nz-pagination>
|
|
</div>
|
|
}
|
|
</nz-card>
|
|
} @else {
|
|
<nz-card>
|
|
<div class="not-found">
|
|
<p>Key not found</p>
|
|
<button nz-button nzType="primary" (click)="goBack()">
|
|
Back to Keys
|
|
</button>
|
|
</div>
|
|
</nz-card>
|
|
}
|
|
</div>
|
|
|
|
<!-- Edit Modal -->
|
|
<nz-modal
|
|
[(nzVisible)]="showEditModal"
|
|
nzTitle="Edit Key"
|
|
(nzOnCancel)="closeEditModal()"
|
|
[nzFooter]="editModalFooter"
|
|
nzWidth="500px"
|
|
>
|
|
<ng-container *nzModalContent>
|
|
<nz-form-item>
|
|
<nz-form-label>Name</nz-form-label>
|
|
<nz-form-control>
|
|
<input
|
|
type="text"
|
|
nz-input
|
|
placeholder="Enter a name for this key"
|
|
[(ngModel)]="editKeyName"
|
|
/>
|
|
</nz-form-control>
|
|
</nz-form-item>
|
|
|
|
<nz-form-item>
|
|
<nz-form-label>Permissions</nz-form-label>
|
|
<nz-form-control>
|
|
<div class="permission-checkboxes">
|
|
@for (opt of permissionOptions; track opt.value) {
|
|
<label
|
|
nz-checkbox
|
|
[nzChecked]="isEditPermissionChecked(opt.value)"
|
|
[nzDisabled]="opt.value !== 'A' && isEditPermissionChecked('A')"
|
|
(nzCheckedChange)="onEditPermissionChange(opt.value, $event)"
|
|
>
|
|
<nz-tag [nzColor]="getPermissionColor(opt.value)">{{ opt.value }}</nz-tag>
|
|
<span class="perm-label">{{ opt.label }}</span>
|
|
<span class="perm-desc">- {{ opt.description }}</span>
|
|
</label>
|
|
}
|
|
</div>
|
|
</nz-form-control>
|
|
</nz-form-item>
|
|
|
|
<nz-form-item>
|
|
<label nz-checkbox [(ngModel)]="editKeyAllChannels">
|
|
Access to all channels
|
|
</label>
|
|
</nz-form-item>
|
|
|
|
@if (!editKeyAllChannels) {
|
|
<nz-form-item class="mb-0">
|
|
<nz-form-label>Channels</nz-form-label>
|
|
<nz-form-control>
|
|
<nz-select
|
|
[(ngModel)]="editKeyChannels"
|
|
nzMode="multiple"
|
|
nzPlaceHolder="Select channels"
|
|
nzShowSearch
|
|
style="width: 100%"
|
|
>
|
|
@for (channel of availableChannels(); track channel.channel_id) {
|
|
<nz-option
|
|
[nzValue]="channel.channel_id"
|
|
[nzLabel]="getChannelLabel(channel)"
|
|
></nz-option>
|
|
}
|
|
</nz-select>
|
|
</nz-form-control>
|
|
</nz-form-item>
|
|
}
|
|
</ng-container>
|
|
</nz-modal>
|
|
|
|
<ng-template #editModalFooter>
|
|
<button nz-button (click)="closeEditModal()">Cancel</button>
|
|
<button
|
|
nz-button
|
|
nzType="primary"
|
|
[nzLoading]="updating()"
|
|
[disabled]="!editKeyName.trim() || editKeyPermissions.length === 0"
|
|
(click)="updateKey()"
|
|
>
|
|
Save
|
|
</button>
|
|
</ng-template>
|