Converted breadcrumb-listing to new component system

diff --git a/resources/js/components/breadcrumb-listing.js b/resources/js/components/breadcrumb-listing.js
index 7f4344b17d7f1b4452f920d30eda7a3d4d72049e..3ce4bc77e05e476eebf3eb9eb7b950d6906919e7 100644 (file)
--- a/resources/js/components/breadcrumb-listing.js
+++ b/resources/js/components/breadcrumb-listing.js
@@ -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));

diff --git a/resources/views/form/entity-permissions.blade.php b/resources/views/form/entity-permissions.blade.php
index 3581a545b1c96f6b082b11c3a379747251f13ad1..16e105e10b06eb4b0bc8c239b81afa50584360bc 100644 (file)
--- a/resources/views/form/entity-permissions.blade.php
+++ b/resources/views/form/entity-permissions.blade.php
@@ -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' : '' }}">

diff --git a/resources/views/partials/breadcrumb-listing.blade.php b/resources/views/partials/breadcrumb-listing.blade.php
index a1a33ae1c7764e932c10912ccfb70af3d6c276d4..160fa3c23a7f2924951a90c4e81efc04cd4e1fab 100644 (file)
--- a/resources/views/partials/breadcrumb-listing.blade.php
+++ b/resources/views/partials/breadcrumb-listing.blade.php
@@ -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>
\ No newline at end of file