From 33e35c9a8af18e96abc54b2d5b553195c495d4df Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Thu, 31 Dec 2020 15:27:25 +0000
Subject: [PATCH] Converted breadcrumb-listing to new component system

---
 resources/js/components/breadcrumb-listing.js  | 17 +++++++----------
 .../views/form/entity-permissions.blade.php    | 15 ++++++++++-----
 .../partials/breadcrumb-listing.blade.php      | 18 ++++++++++++++----
 3 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/resources/js/components/breadcrumb-listing.js b/resources/js/components/breadcrumb-listing.js
index 7f4344b17..3ce4bc77e 100644
--- 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 3581a545b..16e105e10 100644
--- 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 a1a33ae1c..160fa3c23 100644
--- 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