Photo by Ganapathy Kumar on Unsplash

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.

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.

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.

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.

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

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”

Şirket Organizasyon Yaklaşımları

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.

Boş bir Organizasyon Sayfası

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

Ana Layout Bölümlemesi

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

Tree ve Content Bölümlemesi

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.
Basit Bileşenler İle Ekran Yapısı

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.

Organizasyon Veri Yapısı

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.

Organization Store Yapısı

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.

Tree Structure Generator

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.

Node Selection

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.

TreeItem Click Yeteneği Ekleyelim..

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.

Selected Node Display In Content

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);
}
Seçili Node Gösterildiği BreadCrumb

Node Array oluşturduktan sonra yapmamız gereken BreadCrumb içerisindeki Link elementlerini oluşturup BreadCrump içerisinde kullanmamız yeterli.

GitHub Kod Örneği

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store