Skip to content

Commit

Permalink
UI update: Add item names to delete dialogs (openremote#975)
Browse files Browse the repository at this point in the history
  • Loading branch information
@DonWillems
DonWillems authored Mar 16, 2023
1 parent b217d55 commit 97dc444
Show file tree
Hide file tree
Showing 9 changed files with 52 additions and 34 deletions.
18 changes: 11 additions & 7 deletions manager/src/web/shared/locales/en/or.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,10 +76,11 @@
"save": "Save",
"close": "Close",
"active": "Active",
"deleteRulesetsConfirm": "Remove ruleset(s)?",
"deleteRulesetsFailed": "Failed to delete one or more requested rulesets(s)",
"saveRulesetFailed": "Failed to save ruleset",
"confirmContinueRulesetModified": "Ruleset has been modified, discard changes?",
"deleteRulesets": "Delete rule(s)",
"deleteRulesetsConfirm": "Are you sure you want to delete the selected rule(s)? {{ruleNames}}",
"deleteRulesetsFailed": "Failed to delete one or more requested rules",
"saveRulesetFailed": "Failed to save rule",
"confirmContinueRulesetModified": "Rule has been modified, discard changes?",
"when": "When",
"then": "Then",
"orWhen": "Or when",
Expand All @@ -103,7 +104,8 @@
"lang": "Language",
"status": "Status",
"name": "Name",
"deleteAssetsConfirm": "Remove asset(s) and all descendant assets?",
"deleteAssets": "Delete asset(s)",
"deleteAssetsConfirm": "Delete asset(s) and all descendant assets?\n- {{assetNames}}",
"deleteAssetsFailed": "Failed to delete requested asset(s)",
"ok": "OK",
"cancel": "Cancel",
Expand Down Expand Up @@ -295,8 +297,10 @@
"username":"Username",
"firstName":"First name",
"surname":"Surname",
"deleteUserConfirm":"Are you sure you want to delete this user?",
"deleteRoleConfirm":"Are you sure you want to delete this role?",
"deleteUser": "Delete user",
"deleteRole": "Delete role",
"deleteUserConfirm":"Are you sure you want to delete the user '{{userName}}'?",
"deleteRoleConfirm":"Are you sure you want to delete the role '{{roleName}}'?",
"realmRules": "Realm",
"globalRules": "Global",
"recipients": "Recipients",
Expand Down
14 changes: 9 additions & 5 deletions manager/src/web/shared/locales/nl/or.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,8 +76,9 @@
"save": "Opslaan",
"close": "Sluiten",
"active": "Actief",
"deleteRulesetsConfirm": "Regels verwijderen?",
"deleteRulesetsFailed": "Het verwijderen van een of meerdere regels is niet geukt",
"deleteRulesets": "Regels verwijderen",
"deleteRulesetsConfirm": "Weet je zeker dat je de volgende regels wil verwijderen? {{ruleNames}}",
"deleteRulesetsFailed": "Het verwijderen van een of meerdere regels is niet gelukt",
"saveRulesetFailed": "Het opslaan van de regel is niet gelukt",
"confirmContinueRulesetModified": "De regel is aangepast, wijzigingen weggooien?",
"when": "Als",
Expand All @@ -103,7 +104,8 @@
"lang": "Taal",
"status": "Status",
"name": "Naam",
"deleteAssetsConfirm": "Verwijder alle asset(s) en onderliggende assets?",
"deleteAssets": "Verwijder assets",
"deleteAssetsConfirm": "Verwijder alle asset(s) en onderliggende assets?\n- {{assetNames}}",
"deleteAssetsFailed": "Verwijderen van de asset(s) is niet gelukt",
"ok": "OK",
"cancel": "Annuleren",
Expand Down Expand Up @@ -292,8 +294,10 @@
"role_plural": "Rollen",
"description": "Omschrijving",
"username":"Gebruikersnaam",
"deleteUserConfirm":"Deze gebruiker verwijderen?",
"deleteRoleConfirm":"Deze rol verwijderen?",
"deleteUser": "Gebruiker verwijderen",
"deleteRole": "Rol verwijderen",
"deleteUserConfirm":"De gebruiker '{{userName}}' verwijderen?",
"deleteRoleConfirm":"De rol '{{roleName}}' verwijderen?",
"passwordMismatch":"Wachtwoorden komen niet overeen",
"firstName":"Voornaam",
"surname":"Achternaam",
Expand Down
12 changes: 6 additions & 6 deletions ui/app/manager/src/pages/page-roles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -271,7 +271,7 @@ export class PageRoles extends Page<AppStateKeyed> {
}

private _deleteRole(role, rowIndex) {
showOkCancelDialog(i18next.t("delete"), i18next.t("deleteRoleConfirm"), i18next.t("delete"))
showOkCancelDialog(i18next.t("deleteRole"), i18next.t("deleteRoleConfirm", { roleName: role.name }), i18next.t("delete"))
.then((ok) => {
if (ok) {
this.doDelete(role, rowIndex);
Expand Down Expand Up @@ -370,25 +370,25 @@ export class PageRoles extends Page<AppStateKeyed> {
<div class="row">
<div class="column">
<or-mwc-input .label="${i18next.t(" role ")}" .type="${InputType.TEXT}" min="1" required .value="${role.name}" @or-mwc-input-changed="${(e: OrInputChangedEvent) => role.name = e.detail.value}"></or-mwc-input>
<or-mwc-input .label="${i18next.t("role")}" .type="${InputType.TEXT}" min="1" required .value="${role.name}" @or-mwc-input-changed="${(e: OrInputChangedEvent) => role.name = e.detail.value}"></or-mwc-input>
</div>
<div class="column">
<or-mwc-input .label="${i18next.t(" description ")}" .type="${InputType.TEXT}" min="1" required .value="${role.description}" @or-mwc-input-changed="${(e: OrInputChangedEvent) => role.description = e.detail.value}"></or-mwc-input>
<or-mwc-input .label="${i18next.t("description")}" .type="${InputType.TEXT}" min="1" required .value="${role.description}" @or-mwc-input-changed="${(e: OrInputChangedEvent) => role.description = e.detail.value}"></or-mwc-input>
</div>
</div>
<div class="row">
<div class="column">
<strong class="column-title">${i18next.t("readPermissions")}</strong> ${readRoles.map(r => {
return html`
<or-mwc-input ?readonly="${readonly}" .label="${r.name.split(" : ")[1]}: ${r.description}" .type="${InputType.CHECKBOX}" .value="${role.compositeRoleIds && role.compositeRoleIds.find(id => id === r.id)}" @or-mwc-input-changed="${(e: OrInputChangedEvent) => this.addRemoveRole(e, r, index)}"></or-mwc-input>
<or-mwc-input ?readonly="${readonly}" .label="${r.description}" .type="${InputType.CHECKBOX}" .value="${role.compositeRoleIds && role.compositeRoleIds.find(id => id === r.id)}" @or-mwc-input-changed="${(e: OrInputChangedEvent) => this.addRemoveRole(e, r, index)}"></or-mwc-input>
` })}
</div>
<div class="column">
<strong class="column-title">${i18next.t("writePermissions")}</strong> ${writeRoles.map(r => {
return html`
<or-mwc-input ?readonly="${readonly}" .label="${r.name.split(" : ")[1]}: ${r.description}" .type="${InputType.CHECKBOX}" .value="${role.compositeRoleIds && role.compositeRoleIds.find(id => id === r.id)}" @or-mwc-input-changed="${(e: OrInputChangedEvent) => this.addRemoveRole(e, r, index)}"></or-mwc-input>
<or-mwc-input ?readonly="${readonly}" .label="${r.description}" .type="${InputType.CHECKBOX}" .value="${role.compositeRoleIds && role.compositeRoleIds.find(id => id === r.id)}" @or-mwc-input-changed="${(e: OrInputChangedEvent) => this.addRemoveRole(e, r, index)}"></or-mwc-input>
` })}
</div>
</div>
Expand Down Expand Up @@ -419,7 +419,7 @@ export class PageRoles extends Page<AppStateKeyed> {
` })} ${this._compositeRoles.length > 0 && !!this._compositeRoles[this._compositeRoles.length - 1].id && !readonly ? html`
<tr class="mdc-data-table__row">
<td colspan="100%">
<a class="button" @click="${() => this._compositeRoles = [...this._compositeRoles, { composite: true, name: " ", compositeRoleIds: [] }]}">
<a class="button" @click="${() => this._compositeRoles = [...this._compositeRoles, { composite: true, name: "", compositeRoleIds: [] }]}">
<or-icon icon="plus"></or-icon>${i18next.t("add")} ${i18next.t("role")}</a>
</td>
</tr>
Expand Down
2 changes: 1 addition & 1 deletion ui/app/manager/src/pages/page-users.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -411,7 +411,7 @@ export class PageUsers extends Page<AppStateKeyed> {
}

private _deleteUser(user) {
showOkCancelDialog(i18next.t("delete"), i18next.t("deleteUserConfirm"), i18next.t("delete"))
showOkCancelDialog(i18next.t("deleteUser"), i18next.t("deleteUserConfirm", { userName: user.username }), i18next.t("delete"))
.then((ok) => {
if (ok) {
this.doDelete(user);
Expand Down
21 changes: 11 additions & 10 deletions ui/component/or-asset-tree/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -451,7 +451,7 @@ export class OrAssetTree extends subscribe(manager)(LitElement) {
<div id="header-btns">
<or-mwc-input ?hidden="${!this.selectedIds || this.selectedIds.length === 0 || !this.showDeselectBtn}" type="${InputType.BUTTON}" icon="close" @or-mwc-input-changed="${() => this._onDeselectClicked()}"></or-mwc-input>
<or-mwc-input ?hidden="${this._isReadonly() || !this.selectedIds || this.selectedIds.length !== 1}" type="${InputType.BUTTON}" icon="content-copy" @or-mwc-input-changed="${() => this._onCopyClicked()}"></or-mwc-input>
<or-mwc-input ?hidden="${this._isReadonly() || !this.selectedIds || this.selectedIds.length === 0 || this.selectedNodes.some((node) => this.isAncestorSelected(node))}" type="${InputType.BUTTON}" icon="delete" @or-mwc-input-changed="${() => this._onDeleteClicked()}"></or-mwc-input>
<or-mwc-input ?hidden="${this._isReadonly() || !this.selectedIds || this.selectedIds.length === 0}" type="${InputType.BUTTON}" icon="delete" @or-mwc-input-changed="${() => this._onDeleteClicked()}"></or-mwc-input>
<or-mwc-input ?hidden="${this._isReadonly() || !this._canAdd()}" type="${InputType.BUTTON}" icon="plus" @or-mwc-input-changed="${() => this._onAddClicked()}"></or-mwc-input>
<or-mwc-input hidden type="${InputType.BUTTON}" icon="magnify" @or-mwc-input-changed="${() => this._onSearchClicked()}"></or-mwc-input>
Expand Down Expand Up @@ -1285,9 +1285,8 @@ export class OrAssetTree extends subscribe(manager)(LitElement) {
parsedValue = parsedValue.replace(/"/g,'');

let valueFromAttribute: string = attr.value as string;
let answer = valueFromAttribute.match(parsedValue);

if (answer && answer.length > 0) {
if (valueFromAttribute.toLowerCase().indexOf(parsedValue.toLowerCase()) != -1) {
atLeastOneAttributeMatchValue = true;
}
}
Expand Down Expand Up @@ -1483,15 +1482,17 @@ export class OrAssetTree extends subscribe(manager)(LitElement) {
return;
}

// Get all unique descendant IDs of selected nodes
let uniqueAssets = new Set<Asset>();
OrAssetTree._forEachNodeRecursive(this._selectedNodes, (node) => {
uniqueAssets.add(node.asset!);
});
const assetIds: string[] = Array.from(uniqueAssets).map(asset => asset.id!);
const assetNames: string[] = Array.from(uniqueAssets).map(asset => asset.name!);

const doDelete = () => {
this.disabled = true;

// Get all descendant IDs of selected nodes
const assetIds: string[] = [];
OrAssetTree._forEachNodeRecursive(this._selectedNodes, (node) => {
assetIds.push(node.asset!.id!);
});

manager.rest.api.AssetResource.delete({
assetId: assetIds
}, {
Expand All @@ -1512,7 +1513,7 @@ export class OrAssetTree extends subscribe(manager)(LitElement) {
};

// Confirm deletion request
showOkCancelDialog(i18next.t("delete"), i18next.t("deleteAssetsConfirm"), i18next.t("delete"))
showOkCancelDialog(i18next.t("deleteAssets"), i18next.t("deleteAssetsConfirm", { assetNames: assetNames.join(",\n- ") }), i18next.t("delete"))
.then((ok) => {
if (ok) {
doDelete();
Expand Down
2 changes: 1 addition & 1 deletion ui/component/or-asset-tree/src/or-add-asset-dialog.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -306,7 +306,7 @@ export class OrAddAssetDialog extends LitElement {
}

protected async onTypeChanged(isAgent: boolean, listItem: ListItem) {
await this.requestUpdate();
await this.updateComplete;

this.selectedAttributes = [];
this.selectedType = listItem.data as AssetDescriptor | AgentDescriptor;
Expand Down
2 changes: 1 addition & 1 deletion ui/component/or-asset-viewer/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1411,7 +1411,7 @@ export class OrAssetViewer extends subscribe(manager)(translate(i18next)(LitElem
<div id="right-wrapper" class="mobileHidden">
${validationErrors.length === 0 ? (asset!.createdOn ? html`<or-translate id="created-time" class="tabletHidden" value="createdOnWithDate" .options="${{ date: new Date(asset!.createdOn!) } as TOptions<InitOptions>}"></or-translate>` : ``) : html`<span id="error-wrapper" .title="${validationErrors.join("\n")}"><or-icon icon="alert"></or-icon><or-translate class="tabletHidden" value="validation.invalidAsset"></or-translate></span>`}
${editMode ? html`<or-mwc-input id="save-btn" .disabled="${!this.isModified()}" raised .type="${InputType.BUTTON}" .label="${i18next.t("save")}" @or-mwc-input-changed="${() => this._onSaveClicked()}"></or-mwc-input>` : ``}
${!this._isReadonly() ? html`<or-mwc-input id="edit-btn" outlined .type="${InputType.BUTTON}" .value="${this.editMode}" .label="${this.editMode ? i18next.t("viewAsset") : i18next.t("editAsset")}" icon="${this.editMode ? "eye" : "pencil"}" @or-mwc-input-changed="${() => this._onEditToggleClicked(!this.editMode!)}"></or-mwc-input>
${!this._isReadonly() ? html`<or-mwc-input id="edit-btn" .disabled="${!this._assetInfo.asset.id}" outlined .type="${InputType.BUTTON}" .value="${this.editMode}" .label="${this.editMode ? i18next.t("viewAsset") : i18next.t("editAsset")}" icon="${this.editMode ? "eye" : "pencil"}" @or-mwc-input-changed="${() => this._onEditToggleClicked(!this.editMode!)}"></or-mwc-input>
`: ``}
</div>
</div>
Expand Down
9 changes: 8 additions & 1 deletion ui/component/or-mwc-components/src/or-mwc-dialog.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,14 @@ export async function showOkCancelDialog(title: string, content: string | Templa
}
]
)
.setHeading(title),
.setHeading(title)
.setStyles(html`
<style>
.mdc-dialog__content {
white-space: pre-wrap
}
</style>
`),
hostElement);

return await deferred.promise;
Expand Down
6 changes: 4 additions & 2 deletions ui/component/or-rules/src/or-rule-list.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -556,9 +556,11 @@ export class OrRuleList extends translate(i18next)(LitElement) {
return;
}

const rulesetsToDelete = this._selectedNodes.map((rulesetNode) => rulesetNode.ruleset);
const rulesetNamesToDelete = rulesetsToDelete.map(ruleset => "\n- " + ruleset.name);

const doDelete = async () => {
this.disabled = true;
const rulesetsToDelete = this._selectedNodes.map((rulesetNode) => rulesetNode.ruleset);
let fail = false;

for (const ruleset of rulesetsToDelete) {
Expand Down Expand Up @@ -601,7 +603,7 @@ export class OrRuleList extends translate(i18next)(LitElement) {
};

// Confirm deletion request
showOkCancelDialog(i18next.t("delete"), i18next.t("deleteRulesetsConfirm"), i18next.t("delete"))
showOkCancelDialog(i18next.t("deleteRulesets"), i18next.t("deleteRulesetsConfirm", { ruleNames: rulesetNamesToDelete}), i18next.t("delete"))
.then((ok) => {
if (ok) {
doDelete();
Expand Down

0 comments on commit 97dc444

Please sign in to comment.