Genesys Website issueshttps://gitlab.croptrust.org/genesys-pgr/genesys-ui/-/issues2022-02-18T12:05:04+01:00https://gitlab.croptrust.org/genesys-pgr/genesys-ui/-/issues/3Upgrade to Webpack 42022-02-18T12:05:04+01:00Matija ObrezaUpgrade to Webpack 4Migrate from webpack 3 to webpack 4.Migrate from webpack 3 to webpack 4.0.1Viacheslav PavlovViacheslav Pavlovhttps://gitlab.croptrust.org/genesys-pgr/genesys-ui/-/issues/2Upgrade to @material-ui2022-02-18T12:05:04+01:00Matija ObrezaUpgrade to @material-uiUpgrade to **@material-ui/core**:
- https://www.npmjs.com/package/@material-ui/core
- https://www.npmjs.com/package/@material-ui/icons
See for implementation https://gitlab.croptrust.org/genesys-pgr/catalog/genesys-catalog-ui/merge_re...Upgrade to **@material-ui/core**:
- https://www.npmjs.com/package/@material-ui/core
- https://www.npmjs.com/package/@material-ui/icons
See for implementation https://gitlab.croptrust.org/genesys-pgr/catalog/genesys-catalog-ui/merge_requests/2610.1Matija ObrezaMatija Obrezahttps://gitlab.croptrust.org/genesys-pgr/genesys-ui/-/issues/1Initial version2018-07-16T23:26:47+02:00Matija ObrezaInitial versionCopy code from the `genesys-catalog-ui` project and remove all catalog-related services, actions, reducers, components and dependencies. The resulting code should be completely clean of Catalog code -- but keep the `/accessions` route an...Copy code from the `genesys-catalog-ui` project and remove all catalog-related services, actions, reducers, components and dependencies. The resulting code should be completely clean of Catalog code -- but keep the `/accessions` route and components.
* Keep common code (`ui/common`)
* Keep `/accessions` route
* Keep `/dashboard` route, but don't render Catalog stuff
* Keep `/` route: entry page (only with Accessions)
* Keep SSR
* Keep i18n
* Keep look & feel (layout and styles)
When executing `npm run serve`, the code should connect to Genesys same as the current Catalog does and allow for browsing the accessions data.0.1Maxym BorodenkoMaxym Borodenkohttps://gitlab.croptrust.org/genesys-pgr/genesys-ui/-/issues/4Build docker image2018-07-16T20:39:49+02:00Matija ObrezaBuild docker imageConfigure Gitlab CI to build the website docker image.
See sob [#16895](/genesys-pgr/genesys-ui/-/jobs/16895) failed for 253bcaad5ab71703312bb06556e80d0a181b5754:Configure Gitlab CI to build the website docker image.
See sob [#16895](/genesys-pgr/genesys-ui/-/jobs/16895) failed for 253bcaad5ab71703312bb06556e80d0a181b5754:0.1Matija ObrezaMatija Obrezahttps://gitlab.croptrust.org/genesys-pgr/genesys-ui/-/issues/5Default proxy2018-07-20T12:43:21+02:00Matija ObrezaDefault proxyIn #1 the default `/proxy` for `API_URL` was removed. This project talks to `API_URL` by default and most code is updated for this.
In 253bcaad the `checkAuthToken` was disabled in `server/middleware/prerenderer.tsx`.
Make the website ...In #1 the default `/proxy` for `API_URL` was removed. This project talks to `API_URL` by default and most code is updated for this.
In 253bcaad the `checkAuthToken` was disabled in `server/middleware/prerenderer.tsx`.
Make the website connect to the `API_URL` using `CLIENT_ID` and `CLIENT_SECRET` -- restore the `httpProxy.ts`?
`GenesysService` should be called `AccessionService` and it should not have its own `login()` method.
See deployment at https://genesys.demo.genesys-pgr.org/0.1Maxym BorodenkoMaxym Borodenkohttps://gitlab.croptrust.org/genesys-pgr/genesys-ui/-/issues/6Application layout2018-07-24T11:55:43+02:00Matija ObrezaApplication layoutMove `<Footer />` into `renderRoutes` as the last element and remove it from `<App`.
Implement a new app layout:
<table style="width: 100%">
<tr>
<td>Header <b>sticky just like this gitlab page</b></td>
</tr>
<tr>
<td>
<code>re...Move `<Footer />` into `renderRoutes` as the last element and remove it from `<App`.
Implement a new app layout:
<table style="width: 100%">
<tr>
<td>Header <b>sticky just like this gitlab page</b></td>
</tr>
<tr>
<td>
<code>renderRoute(...)</code> that includes the footer
</td>
</tr>
</table>
Implement a new layout `<SidebarLayout` that can be used by pages:
```
<SidebarLayout sidebar={ <MenuComponent /> }>
...
</SidebarLayout>
```
<table style="width: 100%">
<cols><col width="25%" /><col /></col>
<tr>
<td>
Sidebar <em>collapsible and limited<br />to window height just<br />like this gitlab page</em>
<p><b><< Collapse</b></p>
</td>
<td>
<code>{ children }</code>
<p>This is where all the contents of the page will go and it's going to be as wide as possible.</p>
</td>
</tr>
</table>0.1Viacheslav PavlovViacheslav Pavlovhttps://gitlab.croptrust.org/genesys-pgr/genesys-ui/-/issues/7Subsets: Public pages2018-07-24T17:14:02+02:00Matija ObrezaSubsets: Public pagesAdd the publicly accessible routes for browsing Subsets and displaying Subset details.
## Main menu
Add link to `/subsets` to application header menu.
## Routes
- `/subsets` shows `ui/pages/subsets/BrowsePage`
- `/subsets/{uuid}` sho...Add the publicly accessible routes for browsing Subsets and displaying Subset details.
## Main menu
Add link to `/subsets` to application header menu.
## Routes
- `/subsets` shows `ui/pages/subsets/BrowsePage`
- `/subsets/{uuid}` shows `ui/pages/subsets/DisplayPage`
## Pages
Pages use the `<SidebarLayout` from #6.
- `ui/pages/subsets/BrowsePage` displays list of Subset cards with `<PagedLoader` and the filters
- `ui/pages/subsets/DisplayPage` displays dataset details
## Components
- `ui/genesys/subset/Card`
- `ui/pages/subsets/c/Filters`
## Reducer and actions
This is a top-level component and requires its **own reducer** named `subsets`. The state should contain data necessary to reliably render the browse and display page: `filterCode`, `filter`, `subsets` (results of filtering) and `currentSubset` (for display).
Initial list of actions in `actions/subsets`: `applyFilters`, `resetFilters`, `displaySubset` call the API and update the state.0.1Matija ObrezaMatija Obrezahttps://gitlab.croptrust.org/genesys-pgr/genesys-ui/-/issues/8Google+ login2018-07-27T14:36:54+02:00Matija ObrezaGoogle+ loginAdd a Google+ login button to the login page. Some of this was implemented in the **genesys-catalog-ui** and **genesys-catalog** backend, please migrate that code.Add a Google+ login button to the login page. Some of this was implemented in the **genesys-catalog-ui** and **genesys-catalog** backend, please migrate that code.0.1Viacheslav PavlovViacheslav Pavlovhttps://gitlab.croptrust.org/genesys-pgr/genesys-ui/-/issues/9UI development concepts2019-08-14T08:36:20+02:00Matija ObrezaUI development conceptsThe **genesys-catalog-ui** shows how a SSR-enabled React app can be implemented and we introduced many workarounds to handle synchronization of SSR, state, navigation with the component. Here I document some concepts that should make it ...The **genesys-catalog-ui** shows how a SSR-enabled React app can be implemented and we introduced many workarounds to handle synchronization of SSR, state, navigation with the component. Here I document some concepts that should make it easier for consistent development of the Genesys Website.
Please comment on these ideas!
## GUI components
Implementing Genesys using JSPs showed that it would be best to implement all JSPs using a fixed set of custom UI components. That way the styles and structure of UI components could easily be modified in one place without having to check each page individually.
For consistent UI across the entire application we will build a library of GUI components in `src/gui/`. This includes everything down to a `<Button`. The components in this library will be pure and can rely only on `ownProps` (no Redux state or actions).
This library will be built as we go (when missing) and we should aim to use these components whenever possible.
Composite components like `<ButtonBar` or `<Menu` are part of this library.
## Functional GUI components
Functional components (like `<Autocompleter`) follow these concepts:
1. They rely on `ownProps`
1. Never use Redux `state`
1. Re-use custom layout components available in `src/gui/layout` (or add them)
1. Avoid importing from **@material-ui** and other libraries, reuse `src/gui/` components (or add them)
1. Avoid customized styles (they should come from `src/gui/` components)
1. They may use Redux **actions** that call API services, but must do so using `bindActionCreators` (for authentication)
A good example is `ui/common/permission/Permissions.tsx` which makes API calls, but does not have its state managed by a reducer.
## Pages
Pages are the components that are linked to a **route**.
The route definitions document how the pages link into **top-level groups**. For example, looking at routes in the genesys-catalog-ui shows that PartnerBrowsePage, PartnerDisplayPage and PartnerEditPage belong together and can form one **group**. A group then has `actions/partners.ts` and `reducers/partners.ts` that maintains the state for these components.
Navigation to any Details page should be done with an action so that necessary API calls are made, data refreshed and then the route changed to render the associated route component.
All URL changes (including query string) should be managed by actions and never by a component directly.
### SSR and blank state
Without SSR the page has no data in Redux store. If we use `undefined` in reducer initial state we can detect it and trigger the `initXxxxPage` action defined in `actions/partners.ts`. The same method would be declared in `static needs` for SSR and it will use parameters from the query string.0.1Matija ObrezaMatija Obrezahttps://gitlab.croptrust.org/genesys-pgr/genesys-ui/-/issues/10Accession browser2018-07-24T23:48:07+02:00Matija ObrezaAccession browserImplement initial version of accession browser with filtering.Implement initial version of accession browser with filtering.0.1Matija ObrezaMatija Obrezahttps://gitlab.croptrust.org/genesys-pgr/genesys-ui/-/issues/11PagedLoader trigger2018-09-11T16:02:49+02:00Matija ObrezaPagedLoader triggerSeems that with the new `<PageLayout`, the PagedLoader triggers the next request a bit too late. Debug.Seems that with the new `<PageLayout`, the PagedLoader triggers the next request a bit too late. Debug.0.1Matija ObrezaMatija Obrezahttps://gitlab.croptrust.org/genesys-pgr/genesys-ui/-/issues/12Accession DetailsPage2018-07-25T15:40:18+02:00Matija ObrezaAccession DetailsPageMake the Accession `DisplayPage` similar to what it is on https://www.genesys-pgr.org:
1. Sections
1. Map
1. PDCI
...Make the Accession `DisplayPage` similar to what it is on https://www.genesys-pgr.org:
1. Sections
1. Map
1. PDCI
...0.1Matija ObrezaMatija Obrezahttps://gitlab.croptrust.org/genesys-pgr/genesys-ui/-/issues/13Update filters2018-07-26T18:45:15+02:00Matija ObrezaUpdate filtersIn the current implementation https://genesys.demo.genesys-pgr.org/a/v1a6c4e2dee19c4765988bdc0cdfc3bad8, the "Apply" and "Reset" buttons scroll beyond the "Collapse" sidebar area.
Make the buttons stick just above "Collapse" area for al...In the current implementation https://genesys.demo.genesys-pgr.org/a/v1a6c4e2dee19c4765988bdc0cdfc3bad8, the "Apply" and "Reset" buttons scroll beyond the "Collapse" sidebar area.
Make the buttons stick just above "Collapse" area for all filter components.0.1Viacheslav PavlovViacheslav Pavlovhttps://gitlab.croptrust.org/genesys-pgr/genesys-ui/-/issues/14User actions: My List2018-07-30T19:24:05+02:00Matija ObrezaUser actions: My ListAdd actions and a reducer called `user`.
The first user actions are about managing the list of accessions the user has selected. Instead of synchronizing the list with the server, use `localStorage` to keep the list of `UUID`-s of selec...Add actions and a reducer called `user`.
The first user actions are about managing the list of accessions the user has selected. Instead of synchronizing the list with the server, use `localStorage` to keep the list of `UUID`-s of selected accessions.
In the accession DisplayPage, add a checkbox that indicates if the accession is in "My list". On tick it should add it to the list, on untick it will remove the accession from the list.
The state should also keep track of the current `count` (size of the list).
```javascript
state.user = {
...,
mylist: {
count: 0,
accessions: [ ], // contains UUIDs
},
}
```
0.1Viacheslav PavlovViacheslav Pavlovhttps://gitlab.croptrust.org/genesys-pgr/genesys-ui/-/issues/15Crops - public2018-08-01T12:24:16+02:00Matija ObrezaCrops - publicAdd a reducer and methods to load and maintain the list of **Crops** in the state.
```javascript
state.crops = {
crops = [ ] // array of crops
}
```
Add a method to `loadCrops` from Genesys and put them into the state.
Several compo...Add a reducer and methods to load and maintain the list of **Crops** in the state.
```javascript
state.crops = {
crops = [ ] // array of crops
}
```
Add a method to `loadCrops` from Genesys and put them into the state.
Several components rely on this data (e.g. `CropChips`).
Add `loadCrops` to `static needs` of the App (so they get loaded on the server).0.1Viacheslav PavlovViacheslav Pavlovhttps://gitlab.croptrust.org/genesys-pgr/genesys-ui/-/issues/16Institutes: Public pages2018-08-04T12:31:54+02:00Matija ObrezaInstitutes: Public pagesAdd the publicly accessible routes for browsing Institutes and displaying Institute details.
Use the code for Accession browsing as template.
## Main menu
Add link to `/wiews/` to application header menu.
## Routes
- `/wiews/` show...Add the publicly accessible routes for browsing Institutes and displaying Institute details.
Use the code for Accession browsing as template.
## Main menu
Add link to `/wiews/` to application header menu.
## Routes
- `/wiews/` shows `ui/pages/institutes/BrowsePage`
- `/wiews/{wiewsCode}` shows `ui/pages/institutes/DisplayPage`
## Pages
Pages use the `<PageLayout`.
- `ui/pages/institutes/BrowsePage` displays list of FaoInstitute cards with `<PagedLoader` and the filters
- `ui/pages/institutes/DisplayPage` displays institute details page, but just the very basic data (see https://www.genesys-pgr.org/wiews/BRA001)
## Components
- `ui/genesys/institute/Card`
- `ui/pages/institutes/c/Filters` <-- base it on `accessions/c/Filters`
## Reducer and actions
This is a top-level component and requires its **own reducer** named `institutes`. The state should contain data necessary to reliably render the browse and display page: `filterCode`, `filter`, `paged` (results of filtering) and current `institute` (for display).
Initial list of actions in `actions/subsets`: `applyFilters`, `resetFilters`, `displayInstitute` call the API and update the state.0.1Viacheslav PavlovViacheslav Pavlovhttps://gitlab.croptrust.org/genesys-pgr/genesys-ui/-/issues/17Accession details: Map2018-08-04T11:52:48+02:00Matija ObrezaAccession details: MapAdd a map to accession DetailsPage. We used maps in the genesys-catalog-ui project, pick up the code from there.
The map should be displayed as the last element of the "Collecting information" section.
The map should only be displayed ...Add a map to accession DetailsPage. We used maps in the genesys-catalog-ui project, pick up the code from there.
The map should be displayed as the last element of the "Collecting information" section.
The map should only be displayed if both `latitude` and `longitude` are available.0.1Viacheslav PavlovViacheslav Pavlovhttps://gitlab.croptrust.org/genesys-pgr/genesys-ui/-/issues/18DOI support2018-07-26T14:54:33+02:00Matija ObrezaDOI supportAccession details should be accessible at /10.xxxx/xxxx path where 10.xxx/xxxx is the DOI of the accession.
Current website: https://www.genesys-pgr.org/10.18730/5N2STAccession details should be accessible at /10.xxxx/xxxx path where 10.xxx/xxxx is the DOI of the accession.
Current website: https://www.genesys-pgr.org/10.18730/5N2ST0.1Matija ObrezaMatija Obrezahttps://gitlab.croptrust.org/genesys-pgr/genesys-ui/-/issues/19Dashboard: Subsets2018-09-07T12:49:44+02:00Matija ObrezaDashboard: SubsetsThe subsets identify a _selection of accessions_ which share a _specific set of characteristics_ of interest.
Example subset: [Genesys-subset-template-ILRI-highlands.xlsx](/uploads/a09ecf07a8dea6beb7fd3830759308b2/Genesys-subset-templat...The subsets identify a _selection of accessions_ which share a _specific set of characteristics_ of interest.
Example subset: [Genesys-subset-template-ILRI-highlands.xlsx](/uploads/a09ecf07a8dea6beb7fd3830759308b2/Genesys-subset-template-ILRI-highlands.xlsx)
Add "Subsets" section to the '/dashboard': add main menu item "Subsets" with sub-menus "List subsets" and "Create subset".
## List subsets
Displays the list of Subsets accessible to current user. Filtering subsets should initially **not** be possible in the Dashboard.
- Implement a Subset card
Clicking the subset opens it in the edit form.
## Subset form
Implement a form to edit the subset. The form has the following steps:
- Basic information
- List of accessions: paste from Excel (as we do in the Catalog)
**Note:** The actions, models and service to access the API are already in the source code.1.0Viacheslav PavlovViacheslav Pavlovhttps://gitlab.croptrust.org/genesys-pgr/genesys-ui/-/issues/20Right-to-Left2018-08-04T11:47:40+02:00Matija ObrezaRight-to-LeftSee https://genesys.demo.genesys-pgr.org/ar/a/v124775e26fe9d4e6999ad608c87376d0d
![foo](/uploads/9d3d761581abbfdfbef31b612ca4fc23/foo.png)
## Todo
Please update styles for `html[dir=rtl]` so that the components render properly:
- ch...See https://genesys.demo.genesys-pgr.org/ar/a/v124775e26fe9d4e6999ad608c87376d0d
![foo](/uploads/9d3d761581abbfdfbef31b612ca4fc23/foo.png)
## Todo
Please update styles for `html[dir=rtl]` so that the components render properly:
- check marginLeft/marginRight
- check float left/right
- check paddingLeft/paddingRight0.1Viacheslav PavlovViacheslav Pavlov