TIDO merge requestshttps://gitlab.gwdg.de/subugoe/emo/tido/-/merge_requests2021-01-27T14:32:50Zhttps://gitlab.gwdg.de/subugoe/emo/tido/-/merge_requests/109Feature/#113 easy configurability2021-01-27T14:32:50Zschneider210Feature/#113 easy configurability# Feature
## Summary
This MR provides provides the possibility to configure TIDO in one place (index.template.html), and a default view without annotations.
### config
**Before** (apart from the actual config in index.template.html):...# Feature
## Summary
This MR provides provides the possibility to configure TIDO in one place (index.template.html), and a default view without annotations.
### config
**Before** (apart from the actual config in index.template.html):
It has been necessary to configure the panels (show/hide, order, labels, unique id, connector) separately in `src/config/panels.js` aside the rest of the config.
This file held an array which had to be touched / changed to alter the panel behaviour and generated a random uniuqe id at runtime. (The latter is necessary to distinguish the panels from one another in regards to have dynamic components) and has (sort of) being exposed.
**Now**:
*panels.js* has been refactored and became a mixin (src/mixins/panels.js) without the panels array.
Instead the array moved into index.template.html and the unique id generation is treated separately apart from user's eyes, since it's just not a config option.
As a result, we don't have to point out to *not touch the id-key* (README.md) and have all of the viewer config gathered in one single place.
### default view
It also provides a default view with the annotations panel hidden, since it doesn't provide any content yet.
### tiny fix
Additionally it holds a small fix in the software info (src/components/softwareinfo.vue), which automatically fetches the actual year for the copyright info. (pls just tick the info button in the footer to see the actual year: => 2021)
## Does the result of the MR comply to our "definition of done"?
* [ ] Unit tests passed
* [ ] Code reviewed
* [ ] Acceptance criteria met
* [ ] Functional tests passed
* [ ] Non-Functional requirements met
* [x] Product Owner accepts the User Story
## Documentation
* [x] I updated the README (if applicable)
* [ ] I provided my functions with appropriate documentation
* [ ] I adjusted other parts of the documentation (if applicable)
## Tests
Are we able to test this new feature?
* [ ] Yes, everything can be done via unit tests.
* [x] Yes, you can test by following these steps:
- check out the branch: `git checkout feature/#113-easy-configurability`
- update your local packages once: `npm i` (in the root dir of the project)
- start your local dev server: `npm run dev`
- edit the config file (**src/index.template.html**) as usual and watch the viewer change it's behaviour inside your browser (you might have to refresh your page)
**Pls Note**: it's not about new functionality but about the different implementation and therefore the possibility to configure our product in a single place.
Pls also make sure, to read the corresponding, updated part of our [README](https://gitlab.gwdg.de/subugoe/emo/Qviewer/-/blob/feature/%23113-easy-configurability/README.md#configure-the-panels)
* [ ] No, it is not possible.
## Changelog
* [ ] I added a statement to the CHANGELOG.
No. It will be done automatically.
## Related Tickets
Add all related issues and especially those to be closed.
### Related
[easy configurability](https://gitlab.gwdg.de/subugoe/emo/Qviewer/-/issues/113)
### Closes
[easy configurability](https://gitlab.gwdg.de/subugoe/emo/Qviewer/-/issues/113)
## Logs and Screenshots
/cc [Mathias Göbel](https://gitlab.gwdg.de/mgoebel), [Frank Schneider](https://gitlab.gwdg.de/schneider210), [Michelle Weidling](https://gitlab.gwdg.de/mrodzis)Ahikar Version 0.15.0schneider210dindigalaschneider210https://gitlab.gwdg.de/subugoe/emo/tido/-/merge_requests/108Feature/#105 release via npm2021-01-20T14:25:31Zschneider210Feature/#105 release via npm# Feature
## Summary
The old MR has been closed due to the exposure of the AUTH_TOKEN.
Steps taken:
- [x] revoke old token in gitlab
- [x] create a new token with api access only
- [x] remove *.npmrc* from git index
- [x] add *.npmrc...# Feature
## Summary
The old MR has been closed due to the exposure of the AUTH_TOKEN.
Steps taken:
- [x] revoke old token in gitlab
- [x] create a new token with api access only
- [x] remove *.npmrc* from git index
- [x] add *.npmrc* to *.gitignore*
- [x] delete complete remote branch via web interface
- [x] clean up local references (`git remote prune origin`)
- [x] create a new topic branch
- [x] copy all changes from the old branch into the new topic one
This MR provides
- a tweaked build process to ease the integration of our product due to it's simplified build output.
The Viewer can be easily installed via npm and can be integrated with a single import statement.
- the means to easily release new versions of the Viewer by calling a run script.
- a configured webpack-object that refers to the build
- a shell script to tweak the quasar-build output (tweak_build.sh)
- an updated README file according to the recent changes
## Does the result of the MR comply to our "definition of done"?
* [ ] Unit tests passed
* [ ] Code reviewed
* [ ] Acceptance criteria met
* [ ] Functional tests passed
* [ ] Non-Functional requirements met
* [x] Product Owner accepts the User Story
## Documentation
* [x] I updated the README (if applicable)
* [ ] I provided my functions with appropriate documentation
* [ ] I adjusted other parts of the documentation (if applicable)
## A short note on Licensing (everything is fine ;-) )
I got back to Hans-Werner Hilse and as a result, we can leave everything **as-is**. Since we didn't patch the Quasar or rather OSD code, we don't have to change anything and can stick to the AGPL.
## Tests
Are we able to test this new feature?
* [ ] Yes, everything can be done via unit tests.
* [x] Yes, you can test by following these steps:
## Prerequisites for testing purposes
**Note**: If you don't already have a working Vue environment, simply set it up once; otherwise you can skip this step:
```bash
npm i -g @vue/cli @vue/cli-service-global
```
**scaffold** a test project (not refering to any branch at all; just *somewhere* on your machine)
```bash
vue create sample # just hit *enter* once to accept the defaults
```
The process might take some time ... it automatically creates a folder named according to the name you chose (**sample** in my case)
```bash
cd sample
```
Now you already have a basic, working Vue App.
## Installation
### 1A) setup npm config
since npm communicates with the package api, we have to setup a valid level entrypoint
**Registry setup**
The following command sets up an instance level entrypoint; sufficient for an installation only.
```bash
echo @subugoe:registry=https://gitlab.gwdg.de/api/v4/packages/npm/ >>.npmrc
```
**Note**: fire this command inside your recently created test folder (**sample**; see above => **prerequisites**)
### 1B) install the Viewer
```bash
npm i @subugoe/tido
```
## Integration
**edit** your **main.js** file located under **src/main.js**
and (for the sake of simplicity) **empty the file completely!**, and **replace** it's contents with that single line:
```bash
import '@subugoe/tido/dist/tido'
```
As a second step, **edit** your **index.html** file located inside the project's public folder (**public/index.html**)
**change** the following line
```html
<div id="app"></div>
```
to
```html
<div id="q-app"></div>
```
and finally **copy** our config object directly before the above mentioned div:
```html
<script id="tido-config" type="application/json">
{
"entrypoint": "https://subugoe.pages.gwdg.de/emo/backend/sampledata/collection.json",
"colors": {
"primary": "",
"secondary": "",
"accent": ""
},
"headers": {
"all": true,
"info": true,
"navigation": true,
"toggle": true
},
"labels": {
"item": "Sheet",
"manifest": "Manuscript"
},
"meta": {
"collection": {
"all": true,
"collector": true,
"description": true,
"title": true
},
"manifest": {
"all": true,
"creation": true,
"editor": true,
"label": true,
"location": true,
"origin": true
},
"item": {
"all": true,
"label": true,
"language": true
}
},
"standalone": true
}
</script>
```
### Run the Viewer
To test the integration, run:
```bash
npm run serve
```
and point your browser to: **http://localhost:8080** (or whatever port is addressed on your machine)
### Publishing
- 1) change the version of the viewer in the *package.json* file
(that's due to the fact, that a pkg with the same version can't be published twice; even if you unpublished it before)
- 2) setup npm config (project level entry and auth)
```bash
rm ~/.npmrc # just make sure to start the config from scratch
echo @subugoe:registry=https://gitlab.gwdg.de/api/v4/projects/10921/packages/npm/ >>.npmrc
npm config set '//gitlab.gwdg.de/api/v4/projects/10921/packages/npm/:_authToken' "$AUTH_TOKEN"
```
**replace** $AUTH_TOKEN with your Token ID
It's up to you, if you want to follow the process in single steps.
**if so**:
- a)
- `npm run build`
- `./tweak_build.sh` # assuming the script has eXecutable rights (`chmod u=rwx ./tweak_build.sh` otherwise)
- `npm publish --dry-run` (does exactly the same **publish** does, but without uploading the package)
**NOTE**:
if you leave the **dry option**, the package is published. so pls make sure to delete it again, after having proved it's successful upload, since it's about testing. you can find the result of your upload [here](https://gitlab.gwdg.de/subugoe/emo/Qviewer/-/packages)
**OR alternatively**
- b)
- run the (run-)script: `npm run release` which combines the three steps described above under **a)** (upload included)
* [ ] No, it is not possible.
## Changelog
* [x] I added a statement to the CHANGELOG.
No, because it will be done automatically.
## Related Tickets
[Issue #105](https://gitlab.gwdg.de/subugoe/emo/Qviewer/-/issues/105)
Add all related issues and especially those to be closed.
### Related
### Closes
[Issue #105](https://gitlab.gwdg.de/subugoe/emo/Qviewer/-/issues/105)
## Logs and Screenshots
/cc [Mathias Göbel](https://gitlab.gwdg.de/mgoebel), [Frank Schneider](https://gitlab.gwdg.de/schneider210), [Michelle Weidling](https://gitlab.gwdg.de/mrodzis)Ahikar Version 0.14.0Mathias Goebelschneider210Mathias Goebel