dspace-labs/angular2-ui-prototype

(OBSOLETE: Use https://github.com/DSpace/dspace-angular) Ongoing work on Angular UI has moved to DSpace/dspace-angular

angular2-ui-prototype's Issues

Server side rendering of full item view not functional

[1] Starting App!
[1] Item 1727
[1] finished fetching item 1727
[1] EXCEPTION: TypeError: l_metadatum0.getKey is not a function in [null]
[1] ORIGINAL EXCEPTION: TypeError: l_metadatum0.getKey is not a function
[1] ORIGINAL STACKTRACE:
[1] TypeError: l_metadatum0.getKey is not a function
[1]     at AbstractChangeDetector.ChangeDetector_FullMetadataComponent_1.detectChangesInRecordsInternal (viewFactory_FullMetadataComponent:269:32)
[1]     at AbstractChangeDetector.detectChangesInRecords (C:\Users\William\Development\angular2-ui-prototype\node_modules\angular2\src\core\change_detection\abstract_change_detector.js:104:18)
[1]     at AbstractChangeDetector.runDetectChanges (C:\Users\William\Development\angular2-ui-prototype\node_modules\angular2\src\core\change_detection\abstract_change_detector.js:81:14)
[1]     at AbstractChangeDetector._detectChangesContentChildren (C:\Users\William\Development\angular2-ui-prototype\node_modules\angular2\src\core\change_detection\abstract_change_detector.js:174:18)
[1]     at AbstractChangeDetector.runDetectChanges (C:\Users\William\Development\angular2-ui-prototype\node_modules\angular2\src\core\change_detection\abstract_change_detector.js:82:14)
[1]     at AbstractChangeDetector._detectChangesInViewChildren (C:\Users\William\Development\angular2-ui-prototype\node_modules\angular2\src\core\change_detection\abstract_change_detector.js:181:18)
[1]     at AbstractChangeDetector.runDetectChanges (C:\Users\William\Development\angular2-ui-prototype\node_modules\angular2\src\core\change_detection\abstract_change_detector.js:85:14)
[1]     at AbstractChangeDetector._detectChangesContentChildren (C:\Users\William\Development\angular2-ui-prototype\node_modules\angular2\src\core\change_detection\abstract_change_detector.js:174:18)
[1]     at AbstractChangeDetector.runDetectChanges (C:\Users\William\Development\angular2-ui-prototype\node_modules\angular2\src\core\change_detection\abstract_change_detector.js:82:14)
[1]     at AbstractChangeDetector._detectChangesInViewChildren (C:\Users\William\Development\angular2-ui-prototype\node_modules\angular2\src\core\change_detection\abstract_change_detector.js:181:18)
[1] ERROR CONTEXT:
[1] finished fetching collection 4
[1] finished fetching community 1
[1] finished fetching items page undefined of Digital Books
[1] Rendering Document Error: [TypeError: Cannot read property 'constructor' of undefined]
[1] TypeError: Cannot read property 'constructor' of undefined
[1]     at Object.implementsOnDestroy (C:\Users\William\Development\angular2-ui-prototype\node_modules\angular2\src\core\change_detection\pipe_lifecycle_reflector.js:2:16)
[1]     at Function.ChangeDetectionUtil.callPipeOnDestroy (C:\Users\William\Development\angular2-ui-prototype\node_modules\angular2\src\core\change_detection\change_detection_util.js:156:40)
[1]     at AbstractChangeDetector.ChangeDetector_FullBitstreamsComponent_0.dehydrateDirectives (viewFactory_FullBitstreamsComponent:108:31)
[1]     at AbstractChangeDetector.dehydrate (C:\Users\William\Development\angular2-ui-prototype\node_modules\angular2\src\core\change_detection\abstract_change_detector.js:137:14)
[1]     at AbstractChangeDetector.destroyRecursive (C:\Users\William\Development\angular2-ui-prototype\node_modules\angular2\src\core\change_detection\abstract_change_detector.js:150:14)
[1]     at AbstractChangeDetector.destroyRecursive (C:\Users\William\Development\angular2-ui-prototype\node_modules\angular2\src\core\change_detection\abstract_change_detector.js:157:25)
[1]     at AbstractChangeDetector.destroyRecursive (C:\Users\William\Development\angular2-ui-prototype\node_modules\angular2\src\core\change_detection\abstract_change_detector.js:153:25)
[1]     at AbstractChangeDetector.destroyRecursive (C:\Users\William\Development\angular2-ui-prototype\node_modules\angular2\src\core\change_detection\abstract_change_detector.js:157:25)
[1]     at AbstractChangeDetector.destroyRecursive (C:\Users\William\Development\angular2-ui-prototype\node_modules\angular2\src\core\change_detection\abstract_change_detector.js:153:25)
[1]     at AbstractChangeDetector.destroyRecursive (C:\Users\William\Development\angular2-ui-prototype\node_modules\angular2\src\core\change_detection\abstract_change_detector.js:157:25)
[1] ngOnRendered Error: [TypeError: Cannot read property 'constructor' of undefined]

Format dates

Currently, we can not format ISO dates using the angular 'date' pipe. Instead of writing our own DCDate class, we could in the future use the date pipe to deal with this for us, however, this has not yet been merged into the angular master.

A pr was created on angular's github to address this issue: angular/angular#8041

Pagination of top communities in the Dashboard

Not all the DSpace top communities are shown in the dashboard as our service make the REST call with default parameters (100 communities)

Replace current webpack included Bootstrap w/jQuery with ng2-bootstrap

Found this. Native Angular2 directives for Bootstrap.

http://valor-software.com/ng2-bootstrap/index-bs4.html

This will allow us to use Bootstrap 4, which will compete with Material Design.

Redesign routes and navigation compatible with server side rendering

Google Scholar meta tags

In order to fully test SEO compatibility with Google Scholar, all Item View pages must generate basic GS meta tags.

https://scholar.google.com/intl/us/scholar/inclusion.html#indexing

Also see an existing DSpace site for examples of such meta tags on item pages, e.g.
http://demo.dspace.org/xmlui/handle/10673/5

Breadcrumb Trail

As a User, I want to see a breadcrumb trail to track my location and help navigating the site.

Create Items

Extra (empty) metadata in full-item-view

In the full-item-view, there are some records of empty metadata. It is caused by a change that I have made in the Item lists. This was merged into master already.

I have a fix for this and will create a PR shortly.

Swap out bootstrap for angular material

https://material.angularjs.org

CORS Proxy shuts down if remote doesn't respond in time

It should instead reopen the connection

Default theme like Mirage 2 (or better)

The default theme for our Angular2 UI should have a look and feel similar to Mirage 2 (or improved upon Mirage 2).

This will provide some similarities with existing DSpace, and ensure we are adopting a desirable default theme / look and feel (as Mirage 2 seems to get good reviews overall).

Pagination component should retain the current view

If I use the pagination component on the items list shown inside the directory tree in the dashboard I go to the collection home page instead of stay in the dashboard

Edit (inline)

Brand-able Header / Footer

As a User, I want to see a brand-able header and footer on the pages.

Extract environment variables to a config file

To ensure things like the REST Url or context-path only need to be specified in a single location, we should move these to a configuration file.

Ideally something that can be used by the build scripts as well as the angular app.

Style 05-04: Extract Template and Styles to Their Own Files

Switch to always use the templateUrl directive https://docs.angularjs.org/guide/directive

The template file should be named as the component file with the .html extension

Adopt a Test Framework

Good code requires tests.

In today's (March 31) meeting, we decided a test framework is not necessarily required for Phase 1 of this prototype. But, we'd want this for later phases, so it's best to start the discussion now.

In the meeting, @wwelling mentioned a few known options for Angular 1:

• Karma: https://karma-runner.github.io/0.13/index.html
• Protractor: https://angular.github.io/protractor/

The Angular 2 testing overview docs also mention:

• Jasmine: http://jasmine.github.io/

Pagination: add page limit as a query param

See #48 discussion.

Occasionally, in pagination, the page limit (i.e. number of items per page) gets "lost". This results in odd scenarios where the limit doesn't correspond to the number of items shown, etc.

We should consider making "limit" another query parameter (alongside "page"), which is carried in the URL querystring.

Cleanup unused configs / folders

To me, it looks like the following directories / configs are currently unused and could be cleaned up:

• /ssl/ directory (looks to only be referenced by commented out options in server.ts: https://github.com/DSpace-Labs/angular2-ui-prototype/blob/master/src/server.ts#L53
  • Are there plans to reenable this, or should we just remove it for now?
• chrome.sh : also no longer necessary? Looks to have been removed from usage by PR #7?

(UPDATE: Just realized I was wrong and nodemon is still used by our package.json. Remove it from this list)

Collection View

As a User, I want to see collection pages so I know their metadata and contents.

Separate config params for client and server

Now we have the GlobalConfig object in place, it might still be a good idea to inject some variables in it via webpack's DefinePlugin.

e.g. if the REST API is running on the same server, it is more efficient to use localhost in the REST API baseURL. But on the client it will only work if you use the server's hostname. Extracting that as a variable and injecting it at build time would allow us to end up with a different GlobalConfiguration object on client and server

MetaTagService unable to Inject DOCUMENT with Angular2 Release Candidate 1

https://github.com/DSpace-Labs/angular2-ui-prototype/tree/angular2-rc

[1] Error: Cannot resolve all parameters for 'MetaTagService'(@Inject(Token DocumentToken)). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'MetaTagService' is decorated with Injectable.
[1]     at NoAnnotationError.BaseException [as constructor] (/Users/wwelling/Develop/angular2-ui-prototype/node_modules/@angular/core/src/facade/exceptions.js:17:23)
[1]     at new NoAnnotationError (/Users/wwelling/Develop/angular2-ui-prototype/node_modules/@angular/core/src/di/reflective_exceptions.js:217:16)
[1]     at _extractToken (/Users/wwelling/Develop/angular2-ui-prototype/node_modules/@angular/core/src/di/reflective_provider.js:232:15)
[1]     at /Users/wwelling/Develop/angular2-ui-prototype/node_modules/@angular/core/src/di/reflective_provider.js:184:45
[1]     at Array.map (native)
[1]     at Object.Call (/Users/wwelling/Develop/angular2-ui-prototype/node_modules/es6-shim/es6-shim.js:279:14)
[1]     at Array.map (/Users/wwelling/Develop/angular2-ui-prototype/node_modules/es6-shim/es6-shim.js:1275:17)
[1]     at _dependenciesFor (/Users/wwelling/Develop/angular2-ui-prototype/node_modules/@angular/core/src/di/reflective_provider.js:184:19)
[1]     at resolveReflectiveFactory (/Users/wwelling/Develop/angular2-ui-prototype/node_modules/@angular/core/src/di/reflective_provider.js:72:24)
[1]     at resolveReflectiveProvider (/Users/wwelling/Develop/angular2-ui-prototype/node_modules/@angular/core/src/di/reflective_provider.js:96:97)

Setup basic Angular2 UI project

Grab initial proof-of-concept code from https://github.com/wellingWilliam/AngularUniversalDSpaceUIPrototype

Simple public deployment for Google Scholar testing

In order to test SEO compatibility with Google Scholar, we will need to create a "stable" public deployment of the application. This does not need to be production quality, but should be stable enough to handle crawler activity / server side rendering of all pages.

This need not be completed until the end of phase 1 of the prototype. However, initial thoughts or planning in this issue is welcome.

Sidebar/Context Menu

As a User, I want to see context-dependent menu options so I know what I can do where I am on the site.

Pagination of items

Should be integrated into the list component. Probably as a directive. Dspace service should be able to set limit and use offset when making API calls to get a collection's items. Requires noJS navigation.

Fail to install and run

I receive failure during the build due to incompatible dependencies and missing indirect dependency from angular2-hapi-engine.

Optimize npm scripts for development

• Remove the hardcoded references to chrome in package.json
  • preferably switch to a CORS proxy server instead, that way it can be used with any browser
• Add some form of live-reload

Authentication

As a Repository Admin, I want users to authenticate with simple password to enable authorization control

Comment existing TypeScript using TypeDoc format

Initial code is without comments.

Adopt a Style Guide

We should structure our project, and adopt naming practices based on an Angular 2 style guide.

As noted in today's meeting, there seem to be two primary style guides:

• http://mgechev.github.io/angular2-style-guide/ (More detailed, linked from Angular.io)
• https://github.com/johnpapa/angular-styleguide/blob/master/a2/README.md (From author of most popular Angular 1 style guide, but less detailed at this time)

Look into page transitions

Animations when navigating to a different page on the client, could be an easy to do, and have a significant wow factor.

Add an i18n module

e.g. https://github.com/ocombe/ng2-translate

because it's easier to start using i18n right away, than to search for all hardcoded strings afterwards

Item View

As a User, I want to see a simple item view so I can get the basic metadata and files.

Map API responses to typed models

The mapping probably should be done in dspace.service. All other classes currently using the JSON should be converted to using the models.

Art has a good start to the inheritance model: #23

Community View

As a User, I want to see Community pages so I know their metadata and contents.

Style 02-07: add component, directive selector prefixes

Could use tslint to check and set a standard prefix:

"directive-selector-prefix": [true, "space"],
"component-selector-prefix": [true, "space"],
"pipe-naming": [true, "camelCase", "space"],

Alternatively, add descriptive prefix to component and directive selectors.

Item lists

Create a component to render item lists wherever they are shown.

The fields shown should be based off a Mirage 2 discovery search result.

Also add a list with 5 recently submitted to the homepage. This items selected can be mocked if it's impossible to get that information from a DSpace 5 REST API.

Style 04-11: lazy loading folders

This will reduce initial load time. Especially as the app grows.

Create a notification service

To show alerts in a consistent way.

Retroactively apply style guide recommendations

• Style 02-05: rename boot.ts to main.ts
• Style 02-07: add component prefixes
• Style 03-05: import destructing spaces
• Style 05-17: move logic out of templates into component
• Style 01-01: decompose some components to abide single responsibility principle

Spring Boot + Node

In order to turn this prototype into a full DSpace application, we'll need to find a way to deploy our Angular2 UI alongside Spring Boot.

Initially, this may mean creating a Spring Boot module which simply acts as a "pass-through" to the deployed REST API module.

Longer term (likely post-prototype), we'd like to see the REST API actually served up via Spring Boot (though this will require major refactoring of the existing Jersey-based REST API).

Here's a basic description of what we likely need:

• The Angular2 UI should sit alongside existing DSpace (6.x) codebase in the same DSpace-Labs GItHub project
• The Angular2 UI should be buildable via Maven (see for example Mirage 2 build scripts which already built Mirage 2 via NPM, etc)
• The Angular2 UI should be deployable/installable alongside other DSpace webapps (namely REST API), DSpace database, etc through an install process somewhat similar to DSpace 5 or 6.
• By default, the Angular2 UI should be configured to use the REST API installed alongside it. (Though obviously it could also be possible to run the Angular2 UI from a separate server)

"Flashy" demo features for OR16

For the OR16 demonstration (week of June 13), we want at least a few flashy UI-level features which are possible in the Angular2 UI, but NOT currently possible in DSpace 5 or 6.

Some examples may include:

• On-the-fly theme changes (e.g. header, footer, logo, site title, etc)
• On-the-fly, easier metadata changes (e.g. inline editing of metadata fields from item page or similar)
• Live updates of statistics? (Not sure if this is possible in current REST API?)
• Drag and drop item/collection moving?

Other ideas are welcome!

(NOTE: This ticket also may need to be split into several sub-tickets, since it lists several unrelated features. It's primary goal is just to brainstorm the list of flashy features we want to add. We should then create a separate ticket per feature.)

Stopgap http-proxy is crashing frequently

@jeremythuff and I have both noticed this. The node proxy server crashes frequently and requires a restart. After the proxy crashes all REST calls return error responses. Not sure of the cause. It slows development slightly. I understand this is merely a stopgap until the REST API provides CORS headers and has a valid SSL certificate.

Browse Hierarchy

As a User, I want a top-level Comm/Coll hierarchy and hierarchies on the Comm/Coll individual pages.

Minor SEO bugs from Google Scholar

From the feedback that Anurag sent:

1. HTML <title> tag should contain name of object (Community, Collection, Item), instead of just giving the site name
2. Abstracts should be displayed on item view page.
3. citation_pdf_url should be set. For now, it could link to first file, but ideally it'd follow this logic:
   • If an Item has only one file (i.e. bitstream), link to it
   • Else If an Item has multiple files, and one is specified as the "primary bitstream", link to it
   • Otherwise, just link to the first publicly available file (in the ORIGINAL bundle). Also, if possible, make sure this is one of these recommended formats: PDF, PS, DOC/DOCX, RTF, EPUB (See DS-3127).
4. Cleanup citation_keywords to no longer use dc.type. Just use dc.subject

Page layout loads slowly

Bootstrap's css loads slowly, causing the page to show without any bootstrap css applied to it for a few seconds. (Resolved ones bootstrap is loaded).

Possible fix: place bootstrap's style import before the preboot scripts.

Style 04-10: create and import barrels

This will clean up import.

i18n-ize all hardcoded strings

Now ng2-translate is included we'll need to use it for all strings that are currently hardcoded.