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

Tree-View in Vue.js to display a resource and to modify it #80

Open
JohannesLichtenberger opened this issue Sep 25, 2019 · 19 comments

Comments

@JohannesLichtenberger
Copy link
Member

@JohannesLichtenberger JohannesLichtenberger commented Sep 25, 2019

Adding a tree-component in order to view the first N nodes on each level in a revision of a resource. Similar to the explorer view in an operating system.

For this we need to work with the REST-API.

@JohannesLichtenberger

This comment has been minimized.

Copy link
Member Author

@JohannesLichtenberger JohannesLichtenberger commented Sep 25, 2019

For instance for JSON resources:

https://github.com/tylerkrupicka/vue-json-component

@JohannesLichtenberger JohannesLichtenberger changed the title Tree-View in Vue.js to display and interact with a resource Tree-View in Vue.js to display a resource and to modify it Sep 25, 2019
@sushant-j

This comment has been minimized.

Copy link

@sushant-j sushant-j commented Sep 26, 2019

Hey @JohannesLichtenberger ,
I'd be interested to take a stab at this issue. But should I wait till HacktoberFest actually starts or get cracking? ;)

@JohannesLichtenberger

This comment has been minimized.

Copy link
Member Author

@JohannesLichtenberger JohannesLichtenberger commented Sep 26, 2019

Haha, cool. I have no idea if it counts!? I've just created a local Vue.js project yesterday and worked on a tutorial, but nothing committed to Git.

So basically you could start completely from scratch if you like to? If you like to you can start with simple JSON and XML dummy data or you can try setting up the HTTP SirixDB server together with Keycloak for authentication (https://sirix.io/rest-api.html). Or for JSON data almost the same API: https://medium.com/hackernoon/asynchronous-temporal-rest-with-vert-x-keycloak-and-kotlin-coroutines-217b25756314

Wow, so great that you want to help :-)

@JohannesLichtenberger

This comment has been minimized.

Copy link
Member Author

@JohannesLichtenberger JohannesLichtenberger commented Sep 26, 2019

Oh, and probably if you like to I would prefer TypeScript to JavaScript, but yeah ;-)

@JohannesLichtenberger

This comment has been minimized.

Copy link
Member Author

@JohannesLichtenberger JohannesLichtenberger commented Sep 26, 2019

BTW: I could assign you the other issue with creating an initial Vue.js project, if you still like to? I feel a bit sorry that we start from a green field here, but at least we can use, the latest, greatest stuff from the front-end world then ;-)

@sushant-j

This comment has been minimized.

Copy link

@sushant-j sushant-j commented Sep 26, 2019

Sounds great. I've been aching to try Vue with Typescript on a real project for some time now, as at work I'm using Vue with JS for the last couple of years.

And sure, you can assign me those other issues too. I'm a bit swamped today (Friday), but I'll get started with initial project setup over the weekend!

@JohannesLichtenberger

This comment has been minimized.

Copy link
Member Author

@JohannesLichtenberger JohannesLichtenberger commented Sep 26, 2019

Ah, that's super amazing. At work we are stuck with ehem Velocity, JQuery and XSLT transformations, but they switched to TypeScript some time ago at least on the front-end side (I'm a backend guy, but would like to learn frontend stuff, too now). At least in a smaller project they started to use React now.

I've been following a Vue.js tutorial today and copy & pasted some code, it was really great :-) and by the way I'm not even sure how to transform JSON stuff on the client side in Vue.js to use this tree view component for instance ;-)

@JohannesLichtenberger

This comment has been minimized.

Copy link
Member Author

@JohannesLichtenberger JohannesLichtenberger commented Sep 26, 2019

This issue, somehow I can't assign you:

#79

@sushant-j

This comment has been minimized.

Copy link

@sushant-j sushant-j commented Sep 27, 2019

I'll submit a PR referring #79 when I start on the project on Saturday, let's see if that somehow allows assigning the issue to me.

As for creating the tree-view, I have used jstree in the past, but it depended on jQuery. I'll think on a better way for it.

@JohannesLichtenberger

This comment has been minimized.

Copy link
Member Author

@JohannesLichtenberger JohannesLichtenberger commented Sep 27, 2019

Maybe https://vuejs.org/v2/examples/tree-view.html?

Or the standard tree-component from Vue.js: https://vuejs.org/v2/examples/tree-view.html

However we'd somehow need to add additional nodes to the JSON-structure.

Or this can simply use the JSON-tree structure itself (which is more of what I thought):
https://vuejsexamples.com/component-for-rendering-a-tree-view-of-json/

However even though maybe JSON is much more common nowadays, I'd love to provide an almost identical view for the XML-resources.

BTW: When you've created an initial Vue.js with TypeScript support and maybe added D3.js support (but I think we or I can add this later) you could make a PR already, thus you've finished the first issue already :-D and then I can probably work in parallel on a table-view component which displays the revision metadata in a table (revision-number, revision-timestamp, author name, optional commit message). Thus, once a user clicks on a row it'll open the specific revision of a resource and for instance displays it in your tree-view :-)

@JohannesLichtenberger

This comment has been minimized.

Copy link
Member Author

@JohannesLichtenberger JohannesLichtenberger commented Sep 27, 2019

"you could make a PR already" ... I mean on saturday or sunday or whenever you feel like :-) I won't have much time until saturday evening I guess

@JohannesLichtenberger

This comment has been minimized.

Copy link
Member Author

@JohannesLichtenberger JohannesLichtenberger commented Sep 27, 2019

Oh and what do you think about using Nuxt.js for starting the whole project? :-)

@JohannesLichtenberger

This comment has been minimized.

Copy link
Member Author

@JohannesLichtenberger JohannesLichtenberger commented Sep 28, 2019

Okay, just created our repository with a project created by vue-cli :-)

https://github.com/sirixdb/sirix-web-frontend

@sushant-j

This comment has been minimized.

Copy link

@sushant-j sushant-j commented Sep 30, 2019

Hey Johannes,

I'd started playing around with the project over the weekend, and am ready to get started with the actual coding part now! Just a few questions before I do:

  1. What way would you recommend for setting up a sample DB with some data? And will the front-end be interacting with the DB using the REST APIs?
  2. For the front-end itself, I see you've added some basic stuff, including vue-router, Vuex, sass-loaders, etc. But how should we proceed with the styles?
    I'd recommend going with a light-weight grid f/w (basscss is my go-to), and let rest of styles be written in SCSS.

Also, since we're just starting out, we will need to create some common UI components first (for navigation, etc.) Let me know what you think about above points.

@JohannesLichtenberger

This comment has been minimized.

Copy link
Member Author

@JohannesLichtenberger JohannesLichtenberger commented Sep 30, 2019

Hi, wow, very cool :-)

  1. I could give you a two sample DBs, one for XML and one for JSON. Hmmm, however or do you know of a collection of JSON files (maybe not too big to begin with and/or XML files), which I could use? I think via the GUI we should provide an upload mechanism. I maybe have to change something of the RESTful HTTP-Server though. I'm not sure if uploading huge files via HTTP is the best!? But maybe with HTTP2 and streaming!? And yes, basically via the REST-APIs and queries :-)

  2. Yes, someone made a PR and used https://element.eleme.io/#/en-US for displaying the revision metadata in a table. We just used dummy data for now, but what I'd like to achieve here would be if someone really stored like Integer.MAX-1 revisions (at least many) loading the first maybe 10 revisions, in descending order (the metadata that is revision-ID, revision-timestamp, author and optional commit message), then the next 10 and so on. I've added this possibility in the REST-API. Someone wanted to finish the docker-compose file setting up Keycloak and the Vert.x HTTP Server together. That would be great. But up until then maybe for you it's in the first place easier to work with dummy data!? Or I could help setting up the server :-) Regarding the layout I suppose do whatever you like, but maybe we could use the element-ui components? I like a layout similar to https://youtu.be/DwTPbtWkRHQ maybe (in the end he creates a basic layout with two navigations). But you're free to do whatever you like ;-) I'm really happy that you want to help :-)

Maybe we could display the databases and the resources also in a tree-view, but do you think? So we'd only have a root level (the databases) and a child level (the resources in the respective databases).

@JohannesLichtenberger

This comment has been minimized.

Copy link
Member Author

@JohannesLichtenberger JohannesLichtenberger commented Sep 30, 2019

BTW: Someone recommended this: https://github.com/PanJiaChen/vue-element-admin

@JohannesLichtenberger

This comment has been minimized.

Copy link
Member Author

@JohannesLichtenberger JohannesLichtenberger commented Sep 30, 2019

Oh and on a side note, I just saw this, so inspiring: https://twitter.com/i/moments/994601867987619840

@JohannesLichtenberger

This comment has been minimized.

Copy link
Member Author

@JohannesLichtenberger JohannesLichtenberger commented Oct 2, 2019

Let me know if you need more information :-)

@JohannesLichtenberger

This comment has been minimized.

Copy link
Member Author

@JohannesLichtenberger JohannesLichtenberger commented Oct 18, 2019

@sushant-j still like to work on this?

Have a great weekend 👍

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