Converted breadcrumb-listing to new component system

This commit is contained in:
Dan Brown 2020-12-31 15:27:25 +00:00
parent e408067b10
commit 33e35c9a8a
No known key found for this signature in database
GPG Key ID: 46D9F943C24A2EF9
3 changed files with 31 additions and 19 deletions

View File

@ -1,17 +1,14 @@
class BreadcrumbListing {
constructor(elem) {
this.elem = elem;
this.searchInput = elem.querySelector('input');
this.loadingElem = elem.querySelector('.loading-container');
this.entityListElem = elem.querySelector('.breadcrumb-listing-entity-list');
setup() {
this.elem = this.$el;
this.searchInput = this.$refs.searchInput;
this.loadingElem = this.$refs.loading;
this.entityListElem = this.$refs.entityList;
// this.loadingElem.style.display = 'none';
const entityDescriptor = elem.getAttribute('breadcrumb-listing').split(':');
this.entityType = entityDescriptor[0];
this.entityId = Number(entityDescriptor[1]);
this.entityType = this.$opts.entityType;
this.entityId = Number(this.$opts.entityId);
this.elem.addEventListener('show', this.onShow.bind(this));
this.searchInput.addEventListener('input', this.onSearch.bind(this));

View File

@ -4,11 +4,16 @@
<p class="mb-none">{{ trans('entities.permissions_intro') }}</p>
<div class="form-group">
@include('form.checkbox', [
'name' => 'restricted',
'label' => trans('entities.permissions_enable'),
])
<div class="grid half">
<div class="form-group">
@include('form.checkbox', [
'name' => 'restricted',
'label' => trans('entities.permissions_enable'),
])
</div>
<div class="form-group">
<label for="owner">Owner</label>
</div>
</div>
<table permissions-table class="table permissions-table toggle-switch-list" style="{{ !$model->restricted ? 'display: none' : '' }}">

View File

@ -1,4 +1,7 @@
<div class="breadcrumb-listing" component="dropdown" breadcrumb-listing="{{ $entity->getType() }}:{{ $entity->id }}">
<div class="breadcrumb-listing" components="dropdown breadcrumb-listing"
option:breadcrumb-listing:entity-type="{{ $entity->getType() }}"
option:breadcrumb-listing:entity-id="{{ $entity->id }}"
breadcrumb-listing="{{ $entity->getType() }}:{{ $entity->id }}">
<div class="breadcrumb-listing-toggle" refs="dropdown@toggle"
aria-haspopup="true" aria-expanded="false" tabindex="0">
<div class="separator">@icon('chevron-right')</div>
@ -6,9 +9,16 @@
<div refs="dropdown@menu" class="breadcrumb-listing-dropdown card" role="menu">
<div class="breadcrumb-listing-search">
@icon('search')
<input autocomplete="off" type="text" name="entity-search" placeholder="{{ trans('common.search') }}" aria-label="{{ trans('common.search') }}">
<input refs="breadcrumb-listing@searchInput"
aria-label="{{ trans('common.search') }}"
autocomplete="off"
name="entity-search"
placeholder="{{ trans('common.search') }}"
type="text">
</div>
@include('partials.loading-icon')
<div class="breadcrumb-listing-entity-list px-m"></div>
<div refs="breadcrumb-listing@loading">
@include('partials.loading-icon')
</div>
<div refs="breadcrumb-listing@entityList" class="breadcrumb-listing-entity-list px-m"></div>
</div>
</div>