REACT UI MECHANICS

React ile Admin Tool Geliştirelim — Organizasyon Yapısının Gösterimi

React UI Mekanikleri konusunda önceki yazı serisini içerikleri kapsayacak bir senaryo geliştirmeye karar verdim. Bu konuda bir eTicaret sitesinin yönetiminde kullanılacak bir araç tasarlamaya çalışacağız.

Onur Dayıbaşı

Published in

Frontend Development With JS

5 min readMay 4, 2021

Öncesinde Anlattıklarımız;

Admin Tool ilgili aşağıdaki önceki yazılarda Login, CRUD ve Pagination mekanizmalarına bakmıştık.

Table işlevlerini biraz daha geliştirerek bu Tabloda arama, sıralama ve çoklu satır seçerek aksiyon gerçekleştirme işlemlerine bakmıştık.

SideMenu yapısını oluşturarak birden fazla iç sayfa yapısı arasında geçiş yapabileceğimiz altyapı oluşturmuştuk.

React ile Admin Tool Geliştirelim — Navigasyon Menüsü

Product sayfasında kullanıcının yapmış olduğu güncelleme, silme ve yeni kayıt oluşturma işlemlerini, product/ürünün altında history listesi olarak gösterilmesini gerçekleştirdik.

React ile Admin Tool Geliştirelim — Collapsible Table Geliştirimi

Dashboard ve Chart sayfası oluşturmanın karmaşıklığından biraz bahsettikten sonra Chart kütüphanelerinden birisini Grid Layout nasıl göstereceğimizi anlattık.

React ile Admin Tool Geliştirelim — Dashboard Sayfası

Kullanıcı işlemleri veya Sunucu’da beklenmedik durumlar için geribildirim mekanizmasının oluşturduk

React ile Admin Tool Geliştirelim — Uyarı ve Hatalar için Geri Bildirimler

Bu Yazıda Anlatacaklarımız;

Bu yazıda geliştirdiğimiz Admin Tool’u kullanacak şirketin organizasyon yapısını tanımlayabileceğimiz Ekranlar geliştirmeyi amaçlıyorum. Bu ekranda kullanıcı Organizasyon altındaki grupları ve gruplar altındakı alt grup ve kullanıcıları , yetkilerini tanımlayabilecektir.

Conway Yasasından hatırlayacağınız gibi tasarlanan sistemler organizasyon yapıları arasındaki iletişimin bir kopyası şeklinde tasarlanır.

“organizations which design systems … are constrained to produce designs which are copies of the communication structures of these organizations”

Adım 1 Organizasyon Sayfasını boş bir sayfa olarak oluşturalım. SideMenu iconu ve URL adresinide oluşturduktan sonra aşağıdaki ekran üzerinde geliştirmelerimize başlayabiliriz.

Adım 2 Sayfa yapımız oluşturalım. Önce sayfamızı 2 parçaya bölelim. Head ve Content olacak şekilde…

Daha sonra main-container yapısınıda 2 parçaya bölelim.

Adım 3 Şu anda ekranımızda 3 parça bulunuyor Mavi, Sarı, Turkuaz Mavisi. Şimdi bunlar içerisine bileşenleri yerleştirelim.

En üste BreadCrumbs tarzı ilerde ağaçta gezdiğimde ilgili adresi görebileceğim bir yapı oluşturabilirim (Material UI Breadcrumbs) hazır bir yapıyı kullanıyorum
Sağ kısımda bir Account Tree yapısı oluşturmayı düşünüyorum. Bunun için bir TreeView bileşenine ihtiyacım var. (Material UI TreeView) hazır bir yapıyı kullanıyorum.
Son olarak Account Tree yapısındaki her elemanın bir veri taşımasını düşünüyorum. Bu yapı içinde Form yapılarına ihtiyacım olacak. (Metarial UI Form) hazır yapılardan kullanıyorum.

Adım 4 Organizasyon veri yapısının nasıl olacağı ve bunu veritabanından nasıl kullanacağız.

Aşağıdaki şekilde bir organizasyon yapısı oluşturdum. Bunu db.json fake veritabanına kaydediyorum.

Adım 5. Bu organizasyon için Store yapısını oluşturmaya geldi sıra. Şu aşamada sadece Read (Okuma) yapsak yeterli.. Aşağıdaki şekilde organization store yapısını oluşturuyoruz.

Adım 6. Bu sayfa içerisinde tüm bileşenler HeadComponent, AccountTree ve ContentComponent bu organization yapısına ihtiyaç duyacağız için OrganizationPage sisteme mount edildiğinde organizasyon bilgisini yükleme işlemini başlatacağız.

componentDidMount() {
 this.props.getOrganization();
}

Ama tüm bileşenler yüklenen bu organizasyon bilgisine erişebilir olacak. Bundan dolayı her bileşene Container yapılarınıda ekliyorum. Aşağıdaki resimdeki her bir turuncu noktada yer alan bileşen ve sayfayı store ile bağlamak için container yapılarını oluşturup, organizasyon yapısı ile bağlıyoruz. (Önceki örneklerde bu kısmı nasıl bağladığımızı anlatmıştım. Ayrıca konu detayı için React Redux ile Rest API Çağırımı Nasıl Yapılır ?) yazımı okuyabilirsiniz.

Bileşenlerin Container Yazıp Organization Store ile Bağlıyoruz

Adım 7. Bu sayfa içerisinde AccountTree sunucudan çektiğimiz organizasyon bilgisine göre oluşturmaya çalışalım. Ufak bir algoritma ile generateTreeItem4 fonksiyonu ile recursive TreeItem oluşturup ekranda gösterelim.

Adım 8. Kullanıcının seçtiği düğüm için Head ve Content Bileşenlerinin buna göre içeriklerin güncellenmesini sağlatalım. Öncelikle kullanıcının seçimini Store tutacak mekanizmayı oluşturalım.

Adım 9. Select etme mekanizmasını oluşturmamız ve store bağlamamız gerekiyor. Bu işlemi kullanıcının Ağaç üzerinden düğümü tıklaması ile aktif edeceğiz.

Bu kısımda generateTreeItem4 TreeItem nesnelerini üretirken yapmamız gereken handleNodeSelection ile ilgili seçilen node store iletmek

Adım 10. Seçilen Node(Düğüm) içeriğini Content alanı içerisinde gösterelim. Bunun için yapmamız gereken store selection kısmı değişince bu değişimi ekrandaki Content içerisindeki Input alanlarına atamak.

Adım 11. Seçilen Node(Düğüm) içeriğini HeadComponent içerisinde göstermek BreadCrumb yapisinda göstermek için düğümleri içerisinde parent olacak şekilde selectedNode oluşturmak, BreadCrumb için Node Array oluşturmaktır.

generateArrFromNodePath = (node, arrOfNodes) => {
 if (node.parent) {
  this.generateArrFromNodePath(node.parent, arrOfNodes);
 }
 arrOfNodes.push(node);
}