colin
/
bookstack
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
resources/js/components/breadcrumb-listing.js
View File

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

15
resources/views/form/entity-permissions.blade.php
View File

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

18
resources/views/partials/breadcrumb-listing.blade.php
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" <div class="breadcrumb-listing-toggle" refs="dropdown@toggle"
aria-haspopup="true" aria-expanded="false" tabindex="0"> aria-haspopup="true" aria-expanded="false" tabindex="0">
<div class="separator">@icon('chevron-right')</div> <div class="separator">@icon('chevron-right')</div>
@ -6,9 +9,16 @@
<div refs="dropdown@menu" class="breadcrumb-listing-dropdown card" role="menu"> <div refs="dropdown@menu" class="breadcrumb-listing-dropdown card" role="menu">
<div class="breadcrumb-listing-search"> <div class="breadcrumb-listing-search">
@icon('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> </div>
@include('partials.loading-icon') <div refs="breadcrumb-listing@loading">
<div class="breadcrumb-listing-entity-list px-m"></div> @include('partials.loading-icon')
</div>
<div refs="breadcrumb-listing@entityList" class="breadcrumb-listing-entity-list px-m"></div>
</div> </div>
</div> </div>