From 73a96b3bad8d807ad199bcb3d7210a1f57df8d49 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Do=C4=9Fukan=20=C3=96ks=C3=BCz?= <me@dogukan.dev>
Date: Mon, 9 Nov 2020 06:44:20 +0300
Subject: [PATCH] Added breadcrumb component

---
 server/app/Http/Livewire/Breadcrumb.php       | 46 +++++++++++++++++++
 server/app/Http/Livewire/Document/Edit.php    |  3 ++
 .../app/Http/Livewire/Folder/ListContents.php |  8 ++++
 .../views/livewire/breadcrumb.blade.php       | 41 +++++++++++++++++
 .../views/livewire/document/edit.blade.php    |  1 +
 .../views/livewire/folder/create.blade.php    |  2 +-
 .../livewire/folder/list-contents.blade.php   | 27 ++---------
 7 files changed, 103 insertions(+), 25 deletions(-)
 create mode 100644 server/app/Http/Livewire/Breadcrumb.php
 create mode 100644 server/resources/views/livewire/breadcrumb.blade.php

diff --git a/server/app/Http/Livewire/Breadcrumb.php b/server/app/Http/Livewire/Breadcrumb.php
new file mode 100644
index 0000000..5f3af1e
--- /dev/null
+++ 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
index 4dd8bda..3660f55 100644
--- 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
index f422932..bc3c293 100644
--- 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
new file mode 100644
index 0000000..33e23af
--- /dev/null
+++ 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
index ce6bc78..905044a 100644
--- 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
index 4a18d68..5376fe1 100644
--- 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
index 16e3541..0b788b4 100644
--- 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" />