1
0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-08-07 23:03:00 +03:00

Attachments: Hid edit/delete controls where lacking permission

Added test to cover.
Also migrated related ajax-delete-row component to ts.

For #5323
This commit is contained in:
Dan Brown
2024-12-11 20:38:30 +00:00
parent 0ece664475
commit fcf0bf79a9
4 changed files with 74 additions and 22 deletions

View File

@@ -1,12 +1,16 @@
import {onSelect} from '../services/dom.ts';
import {onSelect} from '../services/dom';
import {Component} from './component';
export class AjaxDeleteRow extends Component {
protected row!: HTMLElement;
protected url!: string;
protected deleteButtons: HTMLElement[] = [];
setup() {
this.row = this.$el;
this.url = this.$opts.url;
this.deleteButtons = this.$manyRefs.delete;
this.deleteButtons = this.$manyRefs.delete || [];
onSelect(this.deleteButtons, this.runDelete.bind(this));
}
@@ -21,8 +25,8 @@ export class AjaxDeleteRow extends Component {
}
this.row.remove();
}).catch(() => {
this.row.style.opacity = null;
this.row.style.pointerEvents = null;
this.row.style.removeProperty('opacity');
this.row.style.removeProperty('pointer-events');
});
}

View File

@@ -8,20 +8,20 @@ export class Component {
/**
* The element that the component is registered upon.
* @type {Element}
* @type {HTMLElement}
*/
$el = null;
/**
* Mapping of referenced elements within the component.
* @type {Object<string, Element>}
* @type {Object<string, HTMLElement>}
*/
$refs = {};
/**
* Mapping of arrays of referenced elements within the component so multiple
* references, sharing the same name, can be fetched.
* @type {Object<string, Element[]>}
* @type {Object<string, HTMLElement[]>}
*/
$manyRefs = {};

View File

@@ -15,23 +15,27 @@
option:event-emit-select:name="insert"
type="button"
title="{{ trans('entities.attachments_insert_link') }}"
class="drag-card-action text-center text-link">@icon('link') </button>
<button component="event-emit-select"
option:event-emit-select:name="edit"
option:event-emit-select:id="{{ $attachment->id }}"
type="button"
title="{{ trans('common.edit') }}"
class="drag-card-action text-center text-link">@icon('edit')</button>
<div component="dropdown" class="flex-fill relative">
<button refs="dropdown@toggle"
class="drag-card-action text-center text-link">@icon('link')</button>
@if(userCan('attachment-update', $attachment))
<button component="event-emit-select"
option:event-emit-select:name="edit"
option:event-emit-select:id="{{ $attachment->id }}"
type="button"
title="{{ trans('common.delete') }}"
class="drag-card-action text-center text-neg">@icon('close')</button>
<div refs="dropdown@menu" class="dropdown-menu">
<p class="text-neg small px-m mb-xs">{{ trans('entities.attachments_delete') }}</p>
<button refs="ajax-delete-row@delete" type="button" class="text-link small delete text-item">{{ trans('common.confirm') }}</button>
title="{{ trans('common.edit') }}"
class="drag-card-action text-center text-link">@icon('edit')</button>
@endif
@if(userCan('attachment-delete', $attachment))
<div component="dropdown" class="flex-fill relative">
<button refs="dropdown@toggle"
type="button"
title="{{ trans('common.delete') }}"
class="drag-card-action text-center text-neg">@icon('close')</button>
<div refs="dropdown@menu" class="dropdown-menu">
<p class="text-neg small px-m mb-xs">{{ trans('entities.attachments_delete') }}</p>
<button refs="ajax-delete-row@delete" type="button" class="text-link small delete text-item">{{ trans('common.confirm') }}</button>
</div>
</div>
</div>
@endif
</div>
</div>
@endforeach