File Manager cz. IV - przechodzenie między folderami AngularJS

Kategoria: AngularJS

Autor: admin@ignaszewski.pl | Opublikowany: 31 maja 2014

Zmiany

Jak zwykle na początku każdej nowej części, przed przystąpieniem do pisania, przychodzi refleksja czy nie należałoby czegoś zmienić, usprawnić itp. Tak jest i tym razem. Człowiek stale się uczy poznaje nowe rzeczy, technologie, stwierdza, że jedno jest lepsze od drugiego i chciałby mieć to u siebie.

Przed paroma dniami miałem przyjemność zapoznać się z szablonami Jade. Gdzieś już kiedyś na nie trafiłem, ale jakoś do mnie nie przemówiły. Pewien dobry znajomy przedstawił mi ich zalety i wady (także w kontekście AngularJS) - nie będę się tu za dużo rozpisywał o czym mi opowiadał, ale na jedną rzecz warto zwrócić uwagę. Tworząc zwykłe szablony HTML dbamy o tzw. wcięcia, aby kod był bardziej czytelny. Niestety jeśli projekt jet pisany przez kilka osób to prędzej czy później to piękne formatowanie się rozjedzie. Natomiast jeśli korzystamy z szablonów Jade, to musimy prawidłowo używać wcięć, gdyż są one odpowiedzialne za zbudowanie odpowiedniego widoku HTML. Ta jedna cecha, mimo kilku wad (w sumie każde narzędzie jakiego używamy, oprócz tego że nam pomaga, zawsze w jakimś stopniu nas ogranicza, albo narzuca w niektórych przypadkach nienajładniejsze rozwiązanie) sprawiła, że postanowiłem użyć Jade w tym projekcie (myślę, że w następnych też będę używał tych szablonów).

Powyższa zmiana spowodowała także lekką reorganizację kodu, i tak:

  • folder components z client/src został przeniesiony do client/dist
  • folder client/dist/templates, który był symlinkiem jest teraz folderem zawierającym przekompilowane szablony jade
  • folder client/dist/data jest symlinkiem do client/data
  • plik client/dist/index.html jest przekompilowaną wersją pliku client/src/index.jade

Dodatkowo doszło jeszcze kilka zmian w Gruntfile.js. Oprócz modułu odpowiedzialnego za kompilację jade (grunt-jade) doszły inne modułu:

  • karma-coverage - tworzy raport pokrycia kodu testami
  • karma-growl - wyświetla komunikat po wykonaniu wszystkich testów
  • grunt-complexity - sprawdza złożoność naszego kodu

Zarówno complexity jak i jshint pozwalają nam utrzymać jakoś kodu na podstawowym poziomie. Po drobnych zmianach w pliku .jshintrc byłem zmuszony poprawić nieco kod, tak aby był zgodny z postawionymi wymaganiami.

Myślę, że opisałem już pokrótce wszystkie zmiany jakie nastąpiły od ostatniej części. Teraz nadszedł czas na zrealizowanie teamtu.

Zmiana folderu w dół

W poprzedniej części w bardzo prosty sposób zrealizowaliśmy możliwość przechodzenia w dół po folderach. Każde kliknięcie na folder powoduje zmianę stanu aplikacji i przejście do widoku nowego folderu.

// main.jade
…
       .thumb.thumb-folder.img-thumbnail(ng-repeat="dir in dirs | filter:{'name': search } | orderBy:'name'", ng-click="goToFolder(dir)")
                i.thumb-image.fa.fa-folder-o
                .thumb-name(data-ng-bind="dir.name")
// MainCtrl.js

        $scope.goToFolder = function(folderObj){
            if(folderObj === false)
            {
                $state.go('main', {dirId: 0});
            }
            else
            {
                $state.go('main', {dirId: folderObj.id});
            }
        }

Przejście do folderu nadrzędnego

Każdy z nas jest przyzwyczajony do tego, że ikonka “..” oznacza możliwość przejścia do folderu nadrzędnego, tak i też zrobimy u nas. Powinna się ona pojawiać zawsze jako pierwsza, w przypadku gdy nie jest wyświetlany folder główny (czyli id bieżącego folderu musi być większe od 0).

// main.jade
…
       .thumb.thumb-folder.img-thumbnail(ng-show="currentDir.id", ng-click="goFolderUp()")
               i.thumb-image.fa.fa-folder-o
               .thumb-name.
                    ..

Sama funkcja kontrolera jest dość prosta i nie wymaga chyba większego komentarza.

// MainCtrl.js
…
$scope.goFolderUp = function(){
    if($scope.currentDir.id !== 0)
    {
        $state.go('main', {dirId: $scope.currentDir.parentId });
    }
}

Breadcrumb

Tak jak w każdym menadżerze plików, tak i u nas, przydałaby się informacja w jakim miejscu obecnie się znajdujemy oraz możliwość przejścia do dowolnego katalogu nadrzędnego w stosunku do bieżącego folderu. By móc taką funkcjonalność zrealizować będą nam potrzebne stosowne dane ze strony serwera.

Nasza funkcja pobierająca dane przeglądanego folderu musi zwrócić tablicę wszystkich rodziców naszego folderu. Zatem wywołanie POST /api/directory musi przekazać zmienną parentsList w nastepującym

formacie.

"parentsList":[{"id":7,"parent_id":0,"name":"Nowy"},{"id":8,"parent_id":7,"name":"Tu jeszcze nie byłem"}]

Mając taką listę w prosty sposób możemy zrealizować nasz breadcrumb:

// main.jade
...
.panel.panel-default.main-panel
    .panel-body
        ul.breadcrumb
            li.link(ng-if="currentDir.id > 0", ng-click="goToFolder(false)").
                Home
            li.link(ng-repeat="parent in currentDir.parentsList", ng-click="goToFolder(parent)").
                {{ parent.name }}
            li.current.
                {{ currentDir.name }}

Zawsze jako pierwszy element na liście stoi Home, a jako ostatni bieżący folder. Każdy z elemntów poza bieżącym folderem jest klikalny i pozwala na przejście do danego folderu.

Oczywiście wszystko dla lepszego wyglądu wymaga odrobiny zmian w samym CSS.

// main.less
.breadcrumb {
	.link {
		cursor: pointer;
		color: #2A6496;
	}
	
	.current {
		color: #bbb;
	}
}

Myślę, że temat dzisiejszej części jest dość łatwy, dzięki temu będziecie mieli więcej czasu na zapoznanie się z tematem Jade i zmianami wprowadzonymi w Gruntfile.js

Pamietajcie, że obecny stan aplikacji jest dostępny pod tym adresem