Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/senaite/senaite.app.listing
ReactJS listing component for SENAITE CORE
https://github.com/senaite/senaite.app.listing
coffeescript lims plone reactjs senaite webpack
Last synced: about 2 months ago
JSON representation
ReactJS listing component for SENAITE CORE
- Host: GitHub
- URL: https://github.com/senaite/senaite.app.listing
- Owner: senaite
- License: gpl-2.0
- Created: 2019-02-04T15:39:58.000Z (almost 6 years ago)
- Default Branch: 2.x
- Last Pushed: 2024-04-28T10:32:17.000Z (8 months ago)
- Last Synced: 2024-09-22T21:18:50.307Z (3 months ago)
- Topics: coffeescript, lims, plone, reactjs, senaite, webpack
- Language: CoffeeScript
- Size: 6.72 MB
- Stars: 7
- Watchers: 4
- Forks: 17
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
ReactJS powered listing tables for SENAITE LIMS
## About
This package provides a [ReactJS](https://reactjs.org) based
listing tables for [SENAITE LIMS](https://www.senaite.com).
[ReactJS](https://reactjs.org/) is a declarative, efficient, and flexible
JavaScript library for building user interfaces built by
[Facebook](https://github.com/facebook/react) and is licensed under the [MIT
License](https://github.com/facebook/react/blob/master/LICENSE)
## Screenshots
This section shows some screenshots how `senaite.app.listing` looks like.
### Samples Listing
### Worksheet Classic Listing
### Worksheet Transposed Listing
### Clients Listing
## Adapting Listings
In most cases, adding a subscriber adapter for `IListingView` is enough to
extend a given listing with additional columns, status or even behavior. With
the subscriber approach, a given listing can be modified multiple times by same
or different add-ons, without the need of inheritance and dependency bindings
amongst them. More information here: https://docs.zope.org/zope.interface/adapter.html#subscriptions
For instance, imagine you have two independent add-ons (A and B),
with the following use-case:
- A adds a column "DateStored" in Samples listing, along with filter "Stored"
- B adds a column "Participant" in Samples listing, along with filter "Ordered"
- Both changes are displayed in the result listing when A and B are installed
Making B dependent on A or the other way round is not a solution. With
subscriber adapters, we can address this problem easily as follows:
### 1. Create a subscriber adapter for each add-on
The skeleton of the subscriber adapter may look like follows:
```python
from bika.lims import api
from senaite.app.listing.interfaces import IListingView
from senaite.app.listing.interfaces import IListingViewAdapter
from senaite.app.listing.utils import add_column
from senaite.app.listing.utils import add_review_state
from zope.component import adapts
from zope.component import implements
class SamplesListingViewAdapter(object):
adapts(IListingView)
implements(IListingViewAdapter)
def __init__(self, listing, context):
self.listing = listing
self.context = context
def before_render(self):
# Add new column for all available states
states = map(lambda r: r["id"], self.listing.review_states)
add_column(
listing=self.listing,
column_id="MyColumn",
column_values={
"title": "My new column",
"sortable": False,
},
review_states=states)
def folder_item(self, obj, item, index):
item["MyColumn"] = api.get_object(obj).getMyColumnValue()
return item
```
### 2. Register the subscriber adapter in configure.zcml
The next thing is to tell the system to use this adapter when the context is an
`AnalysisRequestFolder` object and the listing view is `AnalysisRequestsView`.
We assume here you created the subscriber adapter inside a `samples.py` file and
the configure.zcml is in that same directory:
```
```
Note that `AnalysisRequestsView` (from `senaite.core`) inherits from
`senaite.app.listing`'s `ListingView`, that in turn implements `IListingView`.
## Development
This package uses [webpack](https://webpack.js.org) to bundle all assets for the
final JavaScript file.
Used libraries:
- ReactJS https://reactjs.org/
### Prerequisites
You need `node` and `npm` and `yarn` installed:
» node --version
v18.10.0
» node --version
8.19.2
» yarn --version
1.21.1
### Installation of JS Dependencies
Use `yarn` (or `npm`) to install the develoment dependencies:
» cd webpack
» yarn install
This creates a local node_modules directory where all the dependencies are stored.
You can now run `webpack` locally:
» node_modules/.bin/webpack
Print usage (output below is cutted):
» node_modules/.bin/webpack --help
webpack: 5.69.1
webpack-cli 4.9.2
Usage: https://webpack.js.org/api/cli/
Usage without config file: webpack [] --output [-o]
Initialization:
--init Initializes a new webpack configuration or loads a
addon if specified [boolean]
Basic options:
--watch, -w Watch the filesystem for changes [boolean]
-d shortcut for --debug --devtool eval-cheap-module-source-map
--output-pathinfo [boolean]
-p shortcut for --optimize-minimize --define
### Building the Project for Production/Development
The following script commands which can be executed by the `npm run` command are
located in `package.json`.
The configuration for the used `webpack` command is located in `webpack.config.js`.
Run this command to watch/rebuild the JavaScript for Development:
» yarn watch
Run this command to build the final JavaScript for Production:
» yarn build
## License
**SENAITE.APP.LISTING** Copyright (C) RIDING BYTES & NARALABS
This program is free software; you can redistribute it and/or modify it under
the terms of the [GNU General Public License version
2](https://github.com/senaite/senaite.app.listing/blob/master/LICENSE)
as published by the Free Software Foundation.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.