Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Port existing pages to frontend Vue project #110

Closed
antonow opened this issue Sep 12, 2017 · 7 comments

Comments

@antonow
Copy link
Contributor

commented Sep 12, 2017

Before the base Vue app was merged (PR 97), several frontend pages were developed and merged. These pages were being served from Django. It was later decided that all pages should be served from the single instance of the Vue app (see here). As a result, these existing pages need to be ported over to the Vue app.

Expected Behavior

The base Vue app in interface/frontend/src/main.js should serve all existing page templates using VueRouter. Clicking on a link should load the expected page template.

Current Behavior

At the moment, only the navigation is displayed when loading the home route from Django and clicking on links in the navigation does not render any of the existing page templates.

Possible Solution

The code from PR's 73, 84, 85, 88, 92, and 93 will need to be modified to use ES6 syntax and served from the Vue app using VueRouter.

Steps to Reproduce

  1. Fix the issue with the broken asset link as described in issue 106
  2. cd interface/frontend && npm install && npm run build
  3. cd ../..
  4. docker-compose -f local.yml up
  5. Visit localhost:8000 -- only the navigation appears

Context (Environment)

Until the existing work is integrated into the base Vue app, it will be difficult to develop the remaining features which need to be built on top of these existing templates.

Detailed Description

I am proposing to set up VueRouter and add all the necessary frontend routes to serve the page templates that have already been developed. These existing Vue components will also need to be updated to ES6 syntax in order for the frontend build process to succeed.

Checklist before submitting

  • I have confirmed this using the officially supported Docker Compose setup using the local.py configuration and ensured that I built the containers again and they reflect the most recent version of the project at the HEAD commit on the master branch
  • I have searched through the other currently open issues and am confident this is not a duplicate of an existing bug
  • I provided a minimal code snippet or list of steps that reproduces the bug.
  • I provided screenshots where appropriate
  • I filled out all the relevant sections of this template
@isms

This comment has been minimized.

Copy link
Contributor

commented Sep 12, 2017

Right on - marked as official. Thanks @antonow!

@isms

This comment has been minimized.

Copy link
Contributor

commented Sep 12, 2017

Just FYI, @antonow @WGierke (cc @pjbull @lamby @reubano) as of the most recent changes this should be much easier. Still lots to be worked out, but now we have a Vue.js+webpack config that runs a devserver at localhost:8080 which does hot reloading and proxies requests to /api/[whatever] to the interface container avoiding any need to share templates or mess with CORS.

Please check it out and file issues if there are any rough edges (protip: there will be lots of rough edges )

@louisgv

This comment has been minimized.

Copy link
Contributor

commented Oct 4, 2017

I've read the issue and would like to participate in the refactor.

Which piece of this issue has yet to be worked on?

@isms

This comment has been minimized.

Copy link
Contributor

commented Oct 5, 2017

@louisgv Most of this frontend work still remains to be done! Recommend pulling the latest, building the Docker containers, and running the docker-compose up -f local.yml vue command to see what's there.

@louisgv

This comment has been minimized.

Copy link
Contributor

commented Oct 6, 2017

I have finished forking the repo and having the docker setup! The environment is now running. Would you mind giving me a pointer as to which particular part of the interface should I be looking at?

@louisgv

This comment has been minimized.

Copy link
Contributor

commented Oct 6, 2017

Nvm, I just saw the new issue to implement the Vue components.

@isms isms modified the milestone: 1-mvp Oct 10, 2017

@isms isms modified the milestones: 1-mvp, 2-feature-building Oct 29, 2017

@isms

This comment has been minimized.

Copy link
Contributor

commented Dec 12, 2017

Closing this omnibus issue in favor of more targeted issues.

@isms isms closed this Dec 12, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.