Photo by Timothy Dykes on Unsplash

React ile Admin Tool Geliştirelim — Listede Seçim

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.

Not: Bu yazı daha önce yazılan bir serinin parçası olduğu için, önceki yazılara bu adresteki Admin Tool Mekanikleri başlığı altından ulaşabilirsiniz.

Bu yazıda bir listeden istenilen bazı elemanları hızlı şekilde seçmek için farklı yöntemler kullanacağız;

  • Tümünü listeyi aktar.
  • Tüm seçilenleri temizle.
  • Seçili olanları aktar.
  • Seçili olanlar haricindeki aktar.
  • Listeden Drag-Drop yöntemi ile aktar.
  • Listede aramaya göre filtreleme yap,
Liste Seçimi

Bunun için önce bir liste elemanına ihtiyacımız var. Material UI List Bileşinini kullanıyor olacağız.

Adım 1. İlk adım buna SideMenu’de yeni bir sayfa oluşturalım.

List Selection Page

Adım 2. Layout oluşturalım. Ekranımızı 3 parçaya bölelim

  • Source Listesi
  • Aksiyon Düğmeleri
  • Target Listesi
List Selection Page için Layout

Adım 3. Bu Layout içerisinde hazır bileşenleri bulup ekleyelim.

Liste ve Button Group Ekleyelim

Adım 4. Bu bileşen bütünleşik bir yapıda olduğu için bunu Redux değil direk kendi içerisinde Lift State Up yöntemi uygulayalım. Bu bütünleşik bileşenin state bilgisini tutacak olan bileşen ListSelectionComp olacak. Bu Mediator/Manager gibi bu 3 alt bileşeni yönetecek.

List Selection Component

Adım 5. Bu bileşen içerisinde neler tutacağız ve hangi aksiyonları yakalayıp bunlar ile ilgili işlemleri yapacak.

  • Mevcut Source Listesini
  • Mevcut Target Listesini
  • Source Listesindeki Seçimi
  • Düğmelere basıldığındaki Aksiyonları
Bileşen yapımızı oluşturalım.

Action handling mekanizmamızı yazalım ve ve Actions.js bileşenimize bu handler prop olarak geçelim…

Şimdi geldi state yapısının içerisine bir takım değerler oluşturarak bunları bileşenlere geçmeye.

  • sourceList ve sourceSelects değerlerini sourceList bileşenine geçiyoruz
  • handleToggleSelection fonksiyonu sourceList geçip Checkbox click handle edecek kodu geliştireceğiz.
  • targetList değerinide targetList bileşenine geçiyoruz

Not: Bileşen ve state isimleri aynı olduğu için karışıklık olmasın. state bu bileşenin modelini tutan değişken isimleri. Bileşenlerdeki ise Class isimleri

States in ListSelectionComp

Adım 5. Şimdi geldi mekanikleri kodlamaya kullanıcı düğmelere bastığında

Düğme İşlemlerini Bind Edelim

Artık ekrandaki fonksiyonlarımız çalışıyor.. Listeden seçim yapabiliyor, bu seçimleri veya seçilmeyenleri karşıdaki listeye atabiliyoruz.

Bileşene Filtreleme Ekleyelim

Diyelim ki Ülke, Şehir, Nace Kodu gibi çok uzun listelerde seçim yapacaksınız, aradığınız elemanlara hızlı şekilde erişim yöntemlerinden birisi de filtrelemek. Bunun için SourceList üzerine bir filtre ekleyelim.

Bu yapı bizim state model yapımızda bir değişiklik yapmayacağı için Filtreleme bileşenini direk SourceList.js bileşenin içerisinde ekleyeceğim.

Aşağıdaki şekilde search/filtreleme mekanizmasını sistemimize ekleyelim.

Search Mekanizmasi

Not: Drag-Drop mekanizması yazıyı çok fazla uzatacağı için onu bir sonraki yazıda ele almaya karar verdim.

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