Angular: Sortowane kolumny tabeli

Angular 6, 7, 8+

0:01W poprzedniej lekcji udało nam się dać tej

0:02Pani nację czyli stronicowania do naszej tabeli z opcją wyboru ilości elementów.

0:09I to wszystko oczywiście działa przez nasz dataset oraz który zbiera te parametry

0:13wysyła na serwer przy połączeniu z naszą tabelą i wyniki są publikowane na dzisiaj.

0:20Teraz taki mechanizm pozwala nam rozszerzyć to o inne dodatkowe rzeczy.

0:24Dodatkowe informacje dla

0:26danych, na podstawie których robić zapytań do serwera możemy dodać tutaj filtrowanie

0:31sortowanie do sortowania Mamy tutaj dyrektywę mat sort, czyli po pierwsze

0:36trzeba dodać tutaj moduł ma co to czytaliśmy w poprzednich lekcjach,

0:41więc ja po prostu tylko na tym naszym tutaj mat table sztabu czy naszej tabeli

0:47dodamy dodatkowy parametr będzie to ma co to jest ma co pozwoliłoby mi tutaj

0:54wyciągnąć jeszcze jakieś zdarzenia przed ma Court change test event emiter.

0:59Mógłbym tu przypiąć po prostu zdarzenie wykonanie funkcji.

1:03Ja jednak zrobię to tak samo jak przy nacji, mianowicie taki ma sort.

1:08Spróbuję tutaj do tego typu się dostać przy użyciu View.

1:13Czyli nasz komponent Task component.

1:16Dodam kolejny filtr w ten sposób

1:20i tym razem nie będzie to pielęgnacja tylko będzie to sort.

1:25OK.

1:29I też subskrybuję analogicznie jak w przypadku Terminatora tutaj sort.

1:37Ma różne opcje czy jest aktywny, aktywny,

1:41może dodać, zmienić kolejność, włączyć, wyłączyć różne opcje.

1:47Mnie interesuje tutaj

1:49nie sort czy ustawienie tylko event limiter sort change.

1:54Za subskrybuje się i tu będziemy mieli zmianę sort.

2:00I tę metodę sort, która powinna otrzymać tutaj.

2:04No właśnie, co to jest za typ?

2:08Zobaczmy, co dostaniemy tutaj, jeśli dostaniemy event.

2:19Nagłówek.

2:22Gdzie jest nasz atut.

2:25Tu dostajemy obiekt typu sort i obiekt typu sort.

2:30W dokumentacji mamy Mad sort, czyli parametry, które możemy przekazać

2:37i sort, czyli która nasza kolumna jest aktywne, sortowanie na której

2:43kolumnie oraz kierunek rosnąco malejąco czyli obiekt typu sort.

2:53Czyli tu powinniśmy dostać.

2:57Sort jeszcze importuje i teraz karze na naszym

3:01źródle danych karzą wygenerować metodę set sort, ponieważ powinna mieć właściwe typy.

3:06Zobaczmy które się tam dodał.

3:09Sort nie zaimportować.

3:11Trzeba importować ręcznie żarówkę

3:13za importuj tutaj sort ok i zrobić to analogicznie nie warto.

3:19Sortowanie, filtrowanie czy jakiekolwiek inne parametry, które chcemy przekazać.

3:24Ja to w SQL mogę zrobić też w analogiczny

3:26sposób, czyli kolejny obiekt on będzie pamiętał to sortowanie aktywne.

3:35OK.

3:37Terminarz sport.

3:40Domyślne sortowanie.

3:41Na początku ustawiłem, żeby nie było żadnego, ale żeby kierunek był rosnący.

3:47Czyli to myślę, że żadna komórka nie będzie sortowania.

3:51I to oczywiście aktywuje nasz nowy sort czyli sort Next.

3:56Przekazujemy sort.

3:58Czyli analogicznie robimy to jak w przypadku inercji.

4:03Proces się pojawi tutaj z naszym Connected.

4:06Jak to połączyć razem ze sobą?

4:08Ale nim przejdziemy tu już jeszcze bardzo ważna rzecz potrzebna.

4:11Dodanie sort u góry samej tabeli nam jeszcze niewiele pomaga.

4:16Musimy oznaczyć, które kolumny są

4:17sortowane, czy musimy je dodać do naszych u góry nagłówków Mad sort Header.

4:27I teraz tak możemy sortować po ID, czyli nasz header

4:34będzie miał co prawda, ale podmenu nie będziemy sortować, więc to

4:38pominę tytuł i tu jeszcze mamy status completed,

4:44tylko żeby na pewno było to na nagłówku, czyli Matched Cell.

4:49Tutaj jest szablon match sort header status OK, czyli tutaj gdzie mamy

4:55tytuł naszej kolumny, tam dodajemy po prostu dyrektywę do sortowania

4:59i teraz to nam powinno elegancko dodać nie tylko informację o tym, którą kolumnę ID

5:05czy tam nazwę definicji kolumny, ale też zobaczymy nasz projekt teraz.

5:11Tu nam się pojawiają takie strzałki.

5:13I teraz tak na dole pierwszy dostajemy

5:15tutaj nasz domyślny wiersz Subject publikuje nam Active Direction.

5:19Tutaj to co ustawiam na początku.

5:21Jeśli spróbuję zmienić to sortowanie czy gdzieś kliknę powiedzmy w tą kolumnę mamy

5:25Active ID rosnąco malejąco Tytuł rosnąco malejąco Status rosnąco malejąco menu.

5:34Oczywiście nie ma czegoś takiego.

5:36Klikając trzeci raz tutaj robię direction pusty, czyli jeśli direction jest pusty.

5:43Tu wyłączyłem sortowanie.

5:44Na to też trzeba zwrócić uwagę.

5:47OK, teraz możemy te informacje wykorzystać do naszego zapytania.

5:50Problem pojawia się tutaj taki, że

5:52się zasób kupiliśmy na page, a chcemy jeszcze zasubskrybować na sort.

5:56I co z tym zrobić? Musimy połączyć jedno to tutaj z tym

6:00drugim, zamiast się subskrybować troszkę inaczej.

6:03Podobnie jak z Page zrobię tutaj mapowanie, czyli tu będzie sort.

6:12I zobaczmy na nasze parametry co tam mamy.

6:17Potrzebuję sort i order.

6:21To ja to sobie dodam tutaj do naszego query parametry

6:25naszego typu na samej górze, że potrzebujemy jeszcze sort String order.

6:32Tu będzie standing.

6:34Mogę też tak zapisać tę standing lub pusty string.

6:39Tak? Tylko te trzy opcje są dostępne.

6:41Sortem może być dowolna nasza kolumna.

6:44Dobra, czyli teraz tak tutaj jeśli ja ustawię może ten typ?

6:51Mamy już mamy Active i Direction Active Direction.

6:58OK.

7:01Czyli tutaj muszę ustawić sort.

7:06Activ.

7:09I order to jest Direction.

7:11Czy musimy przemalować nazwy tutaj dostępne?

7:17U nas w tym właśnie sortowaniu na nazwy,

7:19których potrzebuje nasz serwer do działania.

7:22OK, teraz musimy takie coś połączyć z tym.

7:25Mamy tutaj dwa źródła parametrów i musimy to wszystko wsadzić w jeden tutaj nasz.

7:32Co z tym zrobić?

7:33Jeśli mamy dwa różne źródła informacji to możemy użyć np.

7:37czegoś takiego jak Combine latest test nie z operatorów

7:42tylko tutaj po prostu bezpośrednio z RG i tu przekażę sort changes.

7:54Czyngis.

7:57I przypisywać je do zmiennych.

7:59To wszystko było dla nas czytelne.

8:01Czyli będziemy mieli.

8:06Zmiany sortowania jednym strumieniem danych, jednym obserwatorem.

8:16Czy to jest wszystko jeszcze jeden nawias ok.

8:21I drugi ten cały type nazwę page changes.

8:33OK. Teraz możemy je połączyć.

8:35Strumień, który będzie zawierał teraz jedno i drugie.

8:39Teraz ten strumień ma pojemnik na to, co potrzebujemy.

8:46Po prostu jest tablica.

8:48Tu jest tablica, która będzie zawierała wszystkie informacje na temat sortowania.

8:54I musimy te informacje połączyć w jeden obiekt,

8:59który tutaj chcemy do serwera przekazać, czyli query parametr to musimy uzyskać.

9:04I teraz tutaj tak, wszystko co się pojawi

9:06stąd, czyli sortowania inaczej łączymy razem w jeden obiekt np.

9:12sort.

9:15Także.

9:18I teraz powinienem być w stanie tego typu.

9:21Reszta naszych elementów, czyli switch zobaczyć który koszyk się zmieni.

9:26Jeśli zmieni się sort

9:29to jest tak jak nazwa wskazuje połączy z ostatnim zapamiętanym page changes.

9:33Jeśli zmieni się page changes połączy, to zostanie zapamiętanym sort changes.

9:38Dzięki temu zawsze ludzie mieli pełne parametry potrzebne.

9:41Ci, których nie ma użyję domyślnych, jeśli któryś nie ma.

9:43Z drugiej strony użyj poprzednich + najnowszy tutaj wyemitowane Czy łączymy

9:47dwa strumienie i kasujemy ostatni parametr?

9:51Powinien dostać wszystkie parametry, czyli tu powinniśmy mieć także parametr.

9:58Sort.

10:01I powinniśmy mieć parametr direction.

10:04Tutaj nic nam się nie popsuje.

10:09Czy ten order ok.

10:14Tutaj w konsoli możemy zobaczyć jakie parametry wysyłamy na serwer.

10:21Czyli na starcie wysyłamy sort pusty order rosnący Page 0 PR 10.

10:27Pamiętamy, że Page się powiększa na końcu 1, więc z tym nie będzie problemu.

10:33Może jeszcze powiększenia 1 wcześniej zrobić np.

10:35gdzieś już np.

10:36tutaj powiększyli, to wtedy w logu też będziemy mieli od razu

10:41faktycznie te parametry, które idą do serwera.

10:47OK, teraz tak.

10:48Jeśli według panikował.

10:52Same wszystkie parametry.

10:55OK, jeśli będę filtrować.

11:00Też wysyłamy wszystkie parametry, czy

11:02możemy połączyć różne elementy i filtrowanie?

11:05Chciałem jeszcze dodać wyszukiwarkę, dołączyć tam np.

11:09tekst, który chcemy wyszukać itd.

11:11No to polecam Tobie też jako ćwiczenie zrobić coś takiego.

11:14Czyli dołączę przez jakiś input,

11:16zasubskrybować te zmiany, przekazać je jako kolejny

11:20rodzaj parametru do naszej wyszukiwarki, połączyć czy combine latest.

11:24Jak widzisz możemy też dodać po przecinku kolejne tutaj parametry tutaj

11:32w tablicy jako kolejne parametry i możemy też je przekazać do naszej wyszukiwarki.

11:38Jak widzisz bardzo fajnie.

11:39Każdy element tutaj zajmuje się tylko swoją rolą.

11:42Każdych obserwujemy, obserwujemy te zmiany, łączymy je razem.

11:47Wynik przekazujemy tutaj do serwera,

11:50a nasze Tableau cały czas czeka na takim obiekcie data.

11:53Więc jeśli serwer odpowie danymi, odpowie

11:55wynikami to wsadzając w to data znowu obserwująca tabela powiadomiona.

12:01W ten sposób każdy z elementów jest niezależny.

12:04To źródło danych tutaj steruje tymi wszystkimi elementami z jednego miejsca,

12:07więc jest to bardzo fajny mechanizm elastyczny rozszerzane mechanizmu do

12:11zarządzania danych danymi, szczególnie danymi, które muszą być filtrowane,

12:15sortowane tagi chowane i wyświetlane w różny sposób.

12:18Wcale nie musisz używać tylko z tabelą.

12:20To jest tego przykład.

12:21Możesz własne komponenty, listy, tabele,

12:24drzewka, inne elementy także konstruować z takim data source i mieć bardzo fajny,

12:28elastyczny system zarządzania, który jak widzisz elegancko pracuje z różnymi

12:32komponentami Material Design, ale nie tylko.

12:36Tak więc polecam taki data, żeby oddzielić właśnie wygląd naszych komponentów od

12:42struktury danych jako bardzo fajny, ciekawy mechanizm zarządzania danymi.