Added breadcrumb component

dogukanoksuz · Nov 9, 2020 · 73a96b3 · 73a96b3
1 parent 003ed30
commit 73a96b3
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 25 deletions.
diff --git a/server/app/Http/Livewire/Breadcrumb.php b/server/app/Http/Livewire/Breadcrumb.php
@@ -0,0 +1,46 @@
+<?php
+
+namespace App\Http\Livewire;
+
+use App\Models\Folder;
+use Livewire\Component;
+
+class Breadcrumb extends Component
+{
+    public $documentId;
+    public $folderId;
+    public $elements;
+
+    public function findIterativeFolders()
+    {
+        $this->elements = [];
+        if ($this->folderId != null) {
+            $folder = Folder::find($this->folderId);
+            array_push($this->elements, $folder);
+
+            if (isset($folder->parent_folder_id))
+            {
+                while($folder->parent_folder_id != null)
+                {
+                    $folder = Folder::find($folder->parent_folder_id);
+                    array_unshift($this->elements, $folder);
+                }
+            }
+        }
+
+        return $this->elements;
+    }
+
+    public function mount($documentId, $folderId)
+    {
+        $this->findIterativeFolders();
+
+        $this->documentId = $documentId;
+        $this->folderId = $folderId;
+    }
+
+    public function render()
+    {
+        return view('livewire.breadcrumb');
+    }
+}
diff --git a/server/app/Http/Livewire/Document/Edit.php b/server/app/Http/Livewire/Document/Edit.php
@@ -8,10 +8,13 @@
 class Edit extends Component
 {
     public $document;
+    public $folderId;
 
     public function mount($documentId)
     {
         $this->document = Document::findOrFail($documentId);
+
+        $this->folderId = $this->document->folder_id;
     }
 
     public function render()

diff --git a/server/app/Http/Livewire/Folder/ListContents.php b/server/app/Http/Livewire/Folder/ListContents.php
@@ -12,8 +12,16 @@ class ListContents extends Component
     public $folderId;
     public $message;
 
+    protected $listeners = ['flashMessage'];
+
+    public function flashMessage($message)
+    {
+        $this->message = $message;
+    }
+
     public function mount($folderId)
     {
+        $this->message = "";
         $this->folderId = $folderId;
         $this->documents = Folder::findOrFail($folderId)->document()->orderBy('updated_at', 'DESC')->get();
         $this->subfolders = Folder::where('parent_folder_id', $folderId)->orderBy('updated_at', 'DESC')->get();

diff --git a/server/resources/views/livewire/breadcrumb.blade.php b/server/resources/views/livewire/breadcrumb.blade.php
@@ -0,0 +1,41 @@
+<div class="float-left">
+    <nav class="text-black font-bold my-3" aria-label="Breadcrumb">
+        <ol class="list-none p-0 inline-flex">
+            <li class="flex items-center">
+                <a href="{{ route('dashboard') }}">Pano</a>
+            </li>
+            @foreach ($elements as $key => $element)
+            @if ($key == array_key_last($elements) && $documentId == null)
+                @php
+                    break;
+                @endphp
+            @endif
+            <li class="flex items-center">
+                <svg class="fill-current w-3 h-3 mx-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+                    <path
+                        d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z" />
+                </svg>
+                <a href="{{ route('listFolderContents', $element["id"]) }}">{{ $element["name"] }}</a>
+
+            </li>
+            @endforeach
+            @if ($documentId == null)
+            <li class="flex items-center">
+                <svg class="fill-current w-3 h-3 mx-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+                    <path
+                        d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z" />
+                </svg>
+                <a href="javascript:void;" class="text-gray-500" aria-current="page">{{ end($elements)["name"] }}</a>
+            </li>
+            @else 
+            <li class="flex items-center">
+                <svg class="fill-current w-3 h-3 mx-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+                    <path
+                        d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z" />
+                </svg>
+                <a href="javascript:void;" class="text-gray-500" aria-current="page">{{ \App\Models\Document::find($documentId)->name }}</a>
+            </li>
+            @endif
+        </ol>
+    </nav>
+</div>
diff --git a/server/resources/views/livewire/document/edit.blade.php b/server/resources/views/livewire/document/edit.blade.php
@@ -1,5 +1,6 @@
 <div class="py-12">
     <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
+        <livewire:breadcrumb :folderId="$folderId" :documentId="$document->id" />
         {{ $document->name }}
         {{ $document->content }}
     </div>

diff --git a/server/resources/views/livewire/folder/create.blade.php b/server/resources/views/livewire/folder/create.blade.php
@@ -20,7 +20,7 @@
         </x-slot>
 
         <x-slot name="footer">
-            <x-jet-secondary-button wire:click="$toggle('isCreating')" wire:loading.attr="disabled">
+            <x-jet-secondary-button wire:click="$toggle('isCreatingFolder')" wire:loading.attr="disabled">
                 {{ __('Close') }}
             </x-jet-secondary-button>
 

diff --git a/server/resources/views/livewire/folder/list-contents.blade.php b/server/resources/views/livewire/folder/list-contents.blade.php
@@ -18,30 +18,9 @@
                 </div>
                 @endif
             </div>
-            <div class="float-left">
-                <nav class="text-black font-bold my-3" aria-label="Breadcrumb">
-                    <ol class="list-none p-0 inline-flex">
-                        <li class="flex items-center">
-                            <a href="{{ route('dashboard') }}">Pano</a>
-                            <!--<svg class="fill-current w-3 h-3 mx-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
-                            <path
-                                d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z" />
-                            </svg>-->
-                        </li>
-                        <!--
-                    <li class="flex items-center">
-                        <a href="#">Second Level</a>
-                        <svg class="fill-current w-3 h-3 mx-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
-                            <path
-                                d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z" />
-                            </svg>
-                    </li>
-                    <li>
-                        <a href="#" class="text-gray-500" aria-current="page">Third Level</a>
-                    </li> -->
-                    </ol>
-                </nav>
-            </div>
+
+            <livewire:breadcrumb :folderId="$folderId" :documentId="null" />
+
             <livewire:document.create :emitTo="'folder.list-contents'" :folderId="$folderId" />
             <livewire:folder.create :emitTo="'folder.list-contents'" :folderId="$folderId" />