web: use single delete button with checkbox and icon-based action buttons
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
		@ -45,10 +45,12 @@ export class OutpostListPage extends TablePage<Outpost> {
 | 
			
		||||
            new TableColumn(t`Providers`),
 | 
			
		||||
            new TableColumn(t`Integration`, "service_connection__name"),
 | 
			
		||||
            new TableColumn(t`Health and Version`),
 | 
			
		||||
            new TableColumn("Actions"),
 | 
			
		||||
            new TableColumn(t`Actions`),
 | 
			
		||||
        ];
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    checkbox = true;
 | 
			
		||||
 | 
			
		||||
    @property()
 | 
			
		||||
    order = "name";
 | 
			
		||||
 | 
			
		||||
@ -71,24 +73,10 @@ export class OutpostListPage extends TablePage<Outpost> {
 | 
			
		||||
                    <span slot="submit"> ${t`Update`} </span>
 | 
			
		||||
                    <span slot="header"> ${t`Update Outpost`} </span>
 | 
			
		||||
                    <ak-outpost-form slot="form" .instancePk=${item.pk}> </ak-outpost-form>
 | 
			
		||||
                    <button slot="trigger" class="pf-c-button pf-m-secondary">${t`Edit`}</button>
 | 
			
		||||
                    <button slot="trigger" class="pf-c-button pf-m-plain">
 | 
			
		||||
                        <i class="fas fa-edit"></i>
 | 
			
		||||
                    </button>
 | 
			
		||||
                </ak-forms-modal>
 | 
			
		||||
                <ak-forms-delete
 | 
			
		||||
                    .obj=${item}
 | 
			
		||||
                    objectLabel=${t`Outpost`}
 | 
			
		||||
                    .usedBy=${() => {
 | 
			
		||||
                        return new OutpostsApi(DEFAULT_CONFIG).outpostsInstancesUsedByList({
 | 
			
		||||
                            uuid: item.pk,
 | 
			
		||||
                        });
 | 
			
		||||
                    }}
 | 
			
		||||
                    .delete=${() => {
 | 
			
		||||
                        return new OutpostsApi(DEFAULT_CONFIG).outpostsInstancesDestroy({
 | 
			
		||||
                            uuid: item.pk,
 | 
			
		||||
                        });
 | 
			
		||||
                    }}
 | 
			
		||||
                >
 | 
			
		||||
                    <button slot="trigger" class="pf-c-button pf-m-danger">${t`Delete`}</button>
 | 
			
		||||
                </ak-forms-delete>
 | 
			
		||||
                <ak-outpost-deployment-modal .outpost=${item} size=${PFSize.Medium}>
 | 
			
		||||
                    <button slot="trigger" class="pf-c-button pf-m-tertiary">
 | 
			
		||||
                        ${t`View Deployment Info`}
 | 
			
		||||
@ -97,6 +85,29 @@ export class OutpostListPage extends TablePage<Outpost> {
 | 
			
		||||
        ];
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    renderToolbarSelected(): TemplateResult {
 | 
			
		||||
        const disabled = this.selectedElements.length !== 1;
 | 
			
		||||
        const item = this.selectedElements[0];
 | 
			
		||||
        return html`<ak-forms-delete
 | 
			
		||||
            .obj=${item}
 | 
			
		||||
            objectLabel=${t`Outpost`}
 | 
			
		||||
            .usedBy=${() => {
 | 
			
		||||
                return new OutpostsApi(DEFAULT_CONFIG).outpostsInstancesUsedByList({
 | 
			
		||||
                    uuid: item.pk,
 | 
			
		||||
                });
 | 
			
		||||
            }}
 | 
			
		||||
            .delete=${() => {
 | 
			
		||||
                return new OutpostsApi(DEFAULT_CONFIG).outpostsInstancesDestroy({
 | 
			
		||||
                    uuid: item.pk,
 | 
			
		||||
                });
 | 
			
		||||
            }}
 | 
			
		||||
        >
 | 
			
		||||
            <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
 | 
			
		||||
                ${t`Delete`}
 | 
			
		||||
            </button>
 | 
			
		||||
        </ak-forms-delete>`;
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
    rowInbuilt(item: Outpost): TemplateResult[] {
 | 
			
		||||
        return [
 | 
			
		||||
            html`${item.name}`,
 | 
			
		||||
@ -116,7 +127,9 @@ export class OutpostListPage extends TablePage<Outpost> {
 | 
			
		||||
                <span slot="submit"> ${t`Update`} </span>
 | 
			
		||||
                <span slot="header"> ${t`Update Outpost`} </span>
 | 
			
		||||
                <ak-outpost-form slot="form" .instancePk=${item.pk}> </ak-outpost-form>
 | 
			
		||||
                <button slot="trigger" class="pf-c-button pf-m-secondary">${t`Edit`}</button>
 | 
			
		||||
                <button slot="trigger" class="pf-c-button pf-m-plain">
 | 
			
		||||
                    <i class="fas fa-edit"></i>
 | 
			
		||||
                </button>
 | 
			
		||||
            </ak-forms-modal>`,
 | 
			
		||||
        ];
 | 
			
		||||
    }
 | 
			
		||||
 | 
			
		||||
		Reference in New Issue
	
	Block a user