gawati / gawati-editor-ui

Gawati Client
GNU Affero General Public License v3.0
0 stars 0 forks source link

Breadcrumbs, Workflow status and Pager #2

Open kohsah opened 6 years ago

kohsah commented 6 years ago

Yellow marks from top to bottom 1) breadcrumbs need to be functional (when a document is opened the breadcrumb is still the same) 2) Workflow progress needs to show current status at one end and the next possible states(s) at the other end. 3) Pager needs to be fixed

image

kohsah commented 6 years ago

(Comment slightly updated from original ) @ashwinibm changed the url structure so breadcrumbs are broken. However, i think the implementation needs to be changed. Currently the breadcrumb component also makes a request to the database which i think is a request we should not be doing. I have proposed a more simplified approach which is also configurable . See https://github.com/gawati/gawati-client/blob/a949b9ba87848bf669f09bbef1a91aea70d1847e/src/configs/routes.json --

    {
        "route": "/_lang/:lang/document/open/comp/_iri/:iri",
        "name": "document-comp-open",
        "label": "Document Components",
        "breadcrumb": [
            "logged-in-root",
            "document-ident-open"
        ]
    }

I have added a breadrumb configuration to the route, which just refers to a stack of other routes. If we consider the base as home "/" ... then logged-in-root will be the dashboard route url ... and the document-ident-open will be the one to open the document.

The other approach is to move the breadcrumb rendering within the respective component render, so the breadcrumb gets access to full component state.

Maybe having the configuration above, plus moving the breadcrumb into the component render() will give us full flexibility.

kohsah commented 6 years ago

@ashwinibm Have committed various updates. Removed breadcrumb from the LoggedInPage component and moved it into the component itself. e.g. checkout out Dashboard: https://github.com/gawati/gawati-client/blob/a99670d578ebe0c9e8498908507260e7ad75b4ee/src/views/Dashboard.js#L154

You pass the breadcrumb as a prop to StdCompContainer (which should be used to wrap all page content..) and that renders the breadcrumb.

getBreadcrumb() generates the breadcrumb from the the info routes.json

render() {
    const {docs} = this.state;
    const addLink = this.linkDocumentAdd();
    const breadcrumb = this.getBreadcrumb();
    return (
      <StdCompContainer breadcrumb={breadcrumb}>
                 ..... 
      </StdCompContainer>
    );
kohsah commented 6 years ago

@ashwinibm for paginator, also take a look at the portal-ui implementation: https://github.com/gawati/gawati-portal-ui/blob/dev/src/components/SearchListPaginator.js