[HomeWallet] Okna i CRUD

Cześć! Zapraszam do podsumowania kolejnego, ósmego już tygodnia prac nad Home Wallet. Zaczynajmy!

 


jQuery Modal

 

Tak jak zapowiadałem, w tym tygodniu skupiłem się nad wyglądem okien modalnych które pojawiają się np. podczas dodawania produktu do rachunku.

Celem były okna pełnoekranowe oraz przeźroczyste. Udało się to zrobić całkiem prosto i przyjemnie. O całym procesie możecie przeczytać w ostatnim wpisie z serii NaSzybko.

 

 

Zastanawiałem się jak rozłożyć wnętrza okien: opis obok czy nad inputem/selectem. Spędziłem sporo czasu aby zrobić wersję pierwszą aby ostatecznie zdecydować się na drugie rozwiązanie. Uważam, że wygląda po prostu ładniej.

 


CRUD

 

Użytkownik przy tworzeniu rachunku może korzystać z wcześniej dodanych produktów, sklepów oraz kategorii produktów. Aby to wszystko miało sens wypadałoby dodać panel pozwalający na zarządzanie nimi w dowolnym czasie.

 

W zamiarach mam stworzyć panele pozwalające na tworzenie, edycję oraz przeglądanie każdego elementu. Podczas tego ostatniego wyświetlałyby się również statystyki.

Przykładowo, podczas wyświetlania produktu widzimy listę kategorii do której należy oraz statystyki np. jak często jest kupowany oraz w których sklepach.

 

Zacząłem od stworzenia prostego CRUD’a. Wygenerowałem podstawowe akcje dla każdego elementu oraz powoli zmieniam panel dla produktów.

Każdy produkt ma swoją nazwę oraz kategorie. Do wyboru tych drugich z pomocą przychodzi ponownie Chosen. Zmienia on domyślny multiselect w taki, który jest przyjazny użytkownikowi.

 

 

Możliwe jest wyszukiwanie czy proste usuwanie. W opcjach można również ustalić np. maksymalną ilość.

 

Przy edycji produktu należy zwrócić uwagę na zmianę kategorii. Możliwych jest kilka opcji:

  • użytkownik jedynie dodał nowe kategorie
  • użytkownik jedynie usunął kategorie
  • użytkownik usunął oraz dodał kategorie

Z tego powodu w naszym kodzie musimy porównać nową listę kategorii ze starą listą.

 

var oldcategories = product.ProductCategories.Select(pc => pc.CategoryID);
if (model.Categories != null)
{
    foreach (var oldcategory in oldcategories)
    {
       if (!model.Categories.Contains(oldcategory))
       {
           var pc =_context.ProductCategories.FirstOrDefault(
                        p => p.ProductID == model.ID && p.CategoryID == oldcategory);
           _context.ProductCategories.Remove(pc);
       }
    }
}
else
{
   foreach (var oldcategory in oldcategories)
   {
      var pc = _context.ProductCategories.FirstOrDefault(
                    p => p.ProductID == model.ID && p.CategoryID == oldcategory);
      _context.ProductCategories.Remove(pc);
   }
}
if (model.Categories != null)
{
    foreach (var category in model.Categories)
    {
       if (!oldcategories.Contains(category))
       {
           var productcategory = new ProductCategory
           {
                CategoryID = category,
                ProductID = model.ID
           };
           _context.ProductCategories.Add(productcategory);
       }
    }
}

 

Gdy użytkownik usunie wszystkie kategorie, to nasza lista staje się nullem. O ile mnie pamięć nie myli, w ASP.NET MVC była to po prostu czysta lista. Powoduje to nieco inny kod, gdyż nie możemy iterować po liście która nie istnieje.

 


Podsumowanie

 

Dzięki jQuery Modal okna w projekcie wyglądają już zdecydowanie lepiej. W planach na następny tydzień jest dalej dłubać przy panelu dla użytkownika. Należy m.in. zabezpieczyć się przed edytowaniem cudzych danych czy też dodanie dynamicznego tworzenia kategorii podczas edycji/tworzenia produktu.

Wiem też już, że przyczyną niedziałającego Chosen’a jest partial view, nadal jednak nie mogę znaleźć dobrego źródła wiedzy o tym jak zachowuje się JS podczas przywoływania partial view.

Dziękuję za poświęcony czas, zapraszam do dyskusji w komentarzach.

Do zobaczenia, cześć!

1 komentarz

  1. Dobrze Ci idzie! Pozdrawiam

Dodaj komentarz