pozylon commented 4 years ago

Extend Control Panel to easily search products & assortments, set tags for found items

[x] New Search Popup to easily search for Products instead of simple Dropdowns that could grow huge
[ ] Improve UX for displaying and Linking Assortments, Products & Filters
[x] Show Breadcrumb data on Products
[x] Show Tag data on Links, allow editing those
[x] Visualize Taxonomies (Directed Graphs)

New Search Popup & Improved Linking UX

Since the newest version we have a simple semantic-ui style search dropdown in Masterdata -> Products. That's cool because for some customers, it's just impossible to browse through the products without any filtering/search possibilities and only "load more".

[x] Further improve the dropdown to show more details about a product, especially if it's a published product or not.

Linking Products to Assortments

To link a product as child to an assortment, somebody has to go to the details of an assortment, select the vertical tab "Products" and then select the product to link. The current implementation has two big problems:

It's a simple select without the possibilitiy to filter/search
A query products(limit: 0) is sent to the server which takes forever to return when there are 20'000 products

[x] Replace the select with a new dropdown equivalent to the new search dropdown to also improve finding the correct product to link and help with performance.

Linking Products to a Configurable Product Variant

When using ConfigurableProduct, once can add variations and options in the vertical tab "Variations" where we also show some kind of select to choose a product from a list.

[x] Same as with assortment / product linking, reuse the search dropdown or go an equivalent way to enhance the UX and make it easier to link products to configurable products.

Linking Assortments to Assortments

Introduce a new UX to easily link assortments to assortments, also improve the way children and parents are displayed and improve the sorting feature:

Problems with the current situation that need to be solved:

[x] On the link list, it's not really clear what are parent and what are children relationships
[x] Assortment to assortment links can be ordered freely and there is also a mutation for it but it is not leveraged in the control panel (a basic drag/drop sorting functionality is implemented in the assortment to product links tab as a reference)
[x] AssortmentLinks not only link two assortments to each other, the have tags and meta, but the data is not displayed at the moment. at least tags should be visible.
```
query {
assortment(slug: "schweiz") {
linkedAssortments {
  _id
  sortKey
  child {_id}
  parent {_id}
  meta
  tags
}
}
}
```
[x] The addAssortmentLink mutation accepts a tags input but it's not possible to set the tags when adding a link currently.

Linking Assortments to Filters

[ ] The addAssortmentFilter mutation accepts a tags input but it's not possible to set the tags when adding a filter currently.
[ ] Filters to assortments can be ordered freely and there is also a mutation for it but it is not leveraged in control panel
[x] Filters have tags and meta, but the data is not displayed at the moment. at least tags should be visible.

query {
  assortment(assortmentId: "taxonomies") {
    filterAssignments {
      _id
      meta
      tags
      filter {
        _id
      }
      assortment {
        _id
      }
    }
  }
}

Breadcrumbs

Every product and every assortment in unchained can have various breadcrumb paths depending on how the assortments and products are linked together, to show transparently how a user can get to a certain assortment / product, lay out that information in a cool way:

query {
  assortment(assortmentId: "taxonomies.business") {
    assortmentPaths {
      links {
        link {
          tags
        }
        assortmentId
        assortmentTexts {
          title
        }
      }
    }
    productAssignments {
      product {
        assortmentPaths {
          assortmentProduct {
            meta
          }
          links {
            link {
              tags
            }
            assortmentId
            assortmentTexts {
              title
            }
          }
        }
      }
    }
  }
}

Directed Graph

Sometimes it's cool to have a diggable directed graph as an alternative way to drill down the assortment / products, the "Masterdata -> assortments" plain list of assortments is just not enough.

Research material on the topic: https://en.wikipedia.org/wiki/Directed_acyclic_graph

https://www.graphdracula.net/showcase/ https://dagrejs.github.io/project/dagre-d3/latest/demo/interactive-demo.html

[x] Find a way to show the assortment to assortment link graph

pozylon commented 4 years ago

@toinhao1 Or you pick the "directed graph" or "breadcrumb" thing out of the list above, @Mikearaya is not working on those things at the moment

harryadel commented 4 years ago

@pozylon Regarding the breadcrumbs where would you like them to be placed?

Would it be okay if I were to use linkedAssortments instead of assortmentPaths? As ultimately we'd want to drill down the each links' data.

linkedAssortments {
          _id
          parent {
            _id
            texts {
              _id
              title
            }
          }
          child {
            _id
            texts {
              _id
              title
            }
          }
        }

pozylon commented 4 years ago

Breadcrumbs: @harryadel I think it makes sense to see the breadcrumbs above the title of the product/assortment I think you should use assortmentPaths because it's better performance-wise and products don't have a "linkedAssortments" field:

    assortmentPaths {
      links {
        assortmentTexts {
          _id
          title
        }
      }
    }

Directed Graph: ...but you should use Assortment.linkedAssortments for showing the Graph because then it's like you said and you ultimatively want to see every child

harryadel commented 4 years ago

I'm about to tackle Directed Graph task and your input matters. What would be the best library for displaying said graphs? Would this be ok? I'm also thinking maybe a tree view sort of graph since using a directed graph like the aforementioned library would feel out of place within our semantic UI.

We need to agree on the implementation since it'd be unwise to invest effort/time in a design that doesn't match your requirements visually or aesthetically.

pozylon commented 4 years ago

@harryadel Good point, let's have a short call about that, I think Vedran @fliptation also has some ideas and we will definitely want to reuse that component for a semantic-free "Admin Dashboard" we're having on our roadmap

pozylon commented 4 years ago

I've just spoken to @fliptation about this and we think you should propably go with this: "https://dagrejs.github.io/project/dagre-d3/latest/demo/interactive-demo.html"

Tree will not work as the data is only presentable in a DAG and not a Tree. In Unchained, an Assortment can have multiple child and multiple parent nodes. So for example you could define something like this for a fashion store where the covid masks are all unisex:

Cloths / For Men / Long Sleeves Cloths / For Men / T-Shirts Cloths / For Men / Hats (ID MAN_HATS) Cloths / For Men / Covid Masks (ID MASK)

Cloths / For Women / Hats (ID WOMAN_HATS) Cloths / For Women / Covid Masks (ID MASK)

So you see that the MASK assortment is reused in 2 assortments and the MASK assortment therefore has 2 parents.

pozylon commented 4 years ago

@harryadel

Bugs:

React Error when loading data:

I sometimes encounter the following error when trying to link a product to an assortment or trying to add a product variant to a product while using the dropdown search:

Breadcrumb links When you are on an edit page of a sub assortment and you try to use the breadcrumb link to get to the parent, it will end in 404. http://localhost:4010/assortments/edit/?_id=gx5A7wWXcfM8aidf2&tab=AssortmentLinks

Same happens when I try to jump to a parent from a product

Open:

Consistent Usage of the new Dropdowns

It's not clear from the ticket description but as we now have a search dropdown for assortments, we should also reuse that dropdown for the Assortment to Assortment linking. So for consistency, Linking Assortments to Assortments should also show the Search Dropdown.

For the assortment to filter linking, a simple dropdown is enough.

Filter Linking

See description of issue with what's missing, it should basically be consistent with assortment to product and assortment to assortment linking behaviour.

harryadel commented 4 years ago

Noted @pozylon but if it's ok with you, can I be allowed to complete #212 first then switch over to the bugs in this issue?

harryadel commented 4 years ago

React Error when loading data:

From the looks of it, it seems that the problem is caused by inability to access the texts, but it has no problems accessing the image url. I could add some guarding or fallback values yet it'd be a stab in the dark since I've no real data. So, I'd appreciate if you can give a sample data to test with. :sweat_smile:

harryadel commented 4 years ago

Consistent Usage of the new Dropdowns

Sorry for the redundant question but we're ought to remove the current dropdown in assortments linking (see attached picture) and replace it with the search dropdown component, correct? Pascal

Edit: shoot first and ask questions later

https://github.com/unchainedshop/unchained/pull/220 implemented the select replacement and also should include a fix for "React Error when loading data" error.

pozylon commented 4 years ago

I guess that's done now 🤟

unchainedshop / unchained

Enhance Control Panel #162

New Search Popup & Improved Linking UX

Linking Products to Assortments

Linking Products to a Configurable Product Variant

Linking Assortments to Assortments

Linking Assortments to Filters

Breadcrumbs

Directed Graph