Merging work on new UI into master branch #1461

zklosko · 2021-12-23T14:10:38Z

Description

Hey everyone, this is the work I've been doing to extend @hairmare's starter Vue UI. This PR completes #1460.

Notes

The new UI is not stable but does not conflict with the rest of the repo.

Links

See #1122 for initial planning.

jooola

In addition to the many comments I made, here is list of things I would like to address before this is merged.

The PNG icons should be replaced with SVG from a icons package.
Allow to use typescript files.
Use Vue defineComponent function for type hinting, this should help when using an IDE and reduce dumb errors.
Use Vue3.
Use Composition API.

This PR ships a lot of visual code, but not yet functional. This is good to start shaping the future UI, but I think we should focus on building blocks after blocks in coordination with the django API.

I was actually hoping that Libretime consider React instead of Vue. And I would be in favor of Boostrap instead of Vuetify. But yeah, I don't know if this will be reconsidered.

Anyway nice work @zklosko

ui/jest.config.js

jooola · 2021-12-23T15:27:34Z

ui/package.json

+    "axios": "^0.21.1",
+    "core-js": "^3.8.1",
+    "dayjs": "^1.10.7",
+    "howler": "^2.2.3",


Do we really need howler ? Directly using the Web Audio API is probably enough ?

jooola · 2021-12-23T15:27:47Z

ui/package.json

+    "howler": "^2.2.3",
+    "v-calendar": "^2.1.4",
+    "vue": "^2.6.11",
+    "vue-blob-json-csv": "^0.1.7",


What is this used for ?

I think it might be part of the prototyping? I'm honestly not sure.

jooola · 2021-12-23T15:30:50Z

ui/package.json

+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-plugin-unit-jest": "~4.5.0",
+    "@vue/cli-service": "^4.5.0",
+    "@vue/test-utils": "^1.1.2",


I thought you wanted to use Vitejs ? I think Vite isn't a bad idea. We should check it won't be a blocker for some tools integrations, such as Jest/Cypress/..., but I don't think so.

I think it would be a good idea. The scaffolding was done by @hairmare; I guess he was more comfortable with Vue CLI (which ships Webpack) so that's what we're currently running with. If we are to start again with Vue3 it might be easier to scaffold with Vite.

I've been trying to integrate everything with Vite and it just isn't working. Even using templates from Github haven't gotten me anywhere, especially since Vuetify 3 is still in alpha and relatively unstable. Webpack isn't a deal-breaker but it's crazy slow, especially as we develop.

And what with this ? vitejs/vite#305

Honestly, all of this stuff is over my head. Again, why I'm trying to open it up for more people to work on.

jooola · 2021-12-23T15:31:53Z

ui/package.json

+    "prism-react-renderer": "^1.1.1",
+    "prismjs": "^1.17.1",


Why do we need this ?

Not a clue. It might be a dependent for Storyblocks or something.

ui/src/assets/styles/base.sass

ui/src/components/App/AppBar.vue

jooola · 2021-12-23T15:43:33Z

ui/src/components/App/StationClock.vue

+</script>
+
+<style lang="sass">
+@use '../../assets/styles/base'


I see this line in many components, what about importing the global styles in the app directly (without scope) ?

Trying, but without success

You should be able to import the global .scss file into main.js or App.vue like this:

import "./styles/globals.sass"

It should then be picked up by the building tool and added to the html entrypoint head.

jooola · 2021-12-23T15:49:06Z

ui/src/components/Settings/AddUser.vue

+        <v-form>
+          <v-row>
+            <v-col>
+              <v-text-field v-model="userInfo.first_name" label="First Name"></v-text-field>


We should enforce same casing style everywhere.

ui/src/locales/en-US.json

jooola · 2021-12-23T16:03:17Z

Ohh and if you able to keep the commit history it would be awesome. Hairmaire managed to have a nice commit history of the changes, I hope we can do this here as well.

zklosko · 2021-12-24T04:10:32Z

Ohh and if you able to keep the commit history it would be awesome. Hairmaire managed to have a nice commit history of the changes, I hope we can do this here as well.

I wasn't able to move commits over from his branch to my branch.

I was actually hoping that Libretime consider React instead of Vue. And I would be in favor of Boostrap instead of Vuetify. But yeah, I don't know if this will be reconsidered.

I kind of agree. All I know is that we talked about it and @Haremare was leading the charge. Now he's stepped back (temporarily?) and development is slow. I don't think it's too late to turn back, especially in favor of meta-frameworks like Next.js or Nuxt.js that make development faster. It's going to be rather difficult to switch design frameworks and make the new UI similar to the old UI.

@paddatrapper unless I'm mistaken, the only objectives that are firmly set are

Decoupled front-end from back-end, with Node.js and Python, respectively
Similar UI design to PHP MVC so it's easy for users to transition

so it sounds like we can still talk out everything before we have a firmer code foundation.

paddatrapper · 2021-12-24T08:46:18Z

We can't use Vue3, as Vuetify doesn't support it

jooola · 2021-12-25T21:35:48Z

If we really want to stick to to vue2 we should then use https://github.com/vuejs/composition-api

zklosko · 2021-12-26T17:44:37Z

Vuetify 3 (which does support Vue 3) is set to release in Feburary 2022 and does have first party support for Vite. It might benefit us to wait it out before we begin development, making sure the API is fully ready and getting a beta 3.0 out with PHP.

paddatrapper · 2021-12-27T10:30:00Z

I'm happy with that, though if we use the composition-api plugin, how much migration will be required between Vue 2 and 3?

jooola · 2021-12-28T04:24:45Z

Right now I don't see the real requirement on Vuetify, we could simply start without it. Our main goal is the write small pieces that can be embed directly in the legacy ui. So I would push for starting with vue3 directly, and introduce a UI framework only later (so we leave time for both boostrap-vue and vuetify to support vue3).

Using the composition api plugin is to use the power of this feature without vue3, and allow a easy migration to vue3, as it would simply mean, replacing the vue composition plugin import by vue (from there README: When you migrate to Vue 3, just replacing @vue/composition-api to vue and your code should just work.).

From what I see in this PR, I am starting to think that we might want to consider merging this in a separate branch, and pick code to implement working views in separate PR's. I was hoping to build one view after the other, and not push everything at once while nothing is fully working. Having this in a separate branch might be a good idea.

One of the first features I would like to see implemented is the Settings view or Storage / Upload view. Once this is build and embed into the legacy app we will have a better idea of what is working and what needs improvements.

paddatrapper · 2021-12-28T13:30:41Z

I'm going to need some time in the new year to review this. Hopefully just the first week. In the mean time - this cannot go into a feature branch, as the C4 explicitly forbids feature branches in the project repo:

2.5.1 The project SHALL have one branch (“master”) that always holds the latest in-progress version and SHOULD always build.

2.5.2 The project SHALL NOT use topic branches for any reason. Personal forks MAY use topic branches.

zklosko · 2021-12-28T13:44:02Z

We need a UI framework just to get started. Vuetify gives us interactive elements we can use out of the box with minimal configuration - like upload dialogues, calendars, and datatables - that other frameworks like Bootstrap don't provide.

For the PHP UI, we had three separate dependencies for the three features I mentioned above. It's easier to have a single import.

jooola · 2022-01-03T16:06:19Z

According to the Vuetify roadmap, vue3 support is expected to be beta in December 2021 and "stable" on February 2022 https://vuetifyjs.com/en/introduction/roadmap/#v3-0-titan

They already have some alpha release, beta release might not be that far away.

So we might still want to consider vue3. Haha sorry for pushing hard on this one, I'll try to provide some working code with vue3 instead of just complaining.

jooola · 2022-01-06T07:55:04Z

Some poc work with vue3 https://github.com/jooola/libretime/tree/feat/web_ui/ui

zklosko · 2022-02-06T00:06:34Z

Update from the Vuetify team: they're now expecting Vuetify 3 to be released around May 2022.

zklosko · 2022-03-26T02:50:23Z

Vuetify 3 beta has officially been released! On top of that, the new Vue CLI installs and configures Vite, which makes our goals so much easier. I'm starting over with Vue 3, Vuetify 3 beta, Vite, Typescript, and the composition API; I'll create the PR soon.

Closing this PR for clarity.

Adding work on new UI

1ae4fb2

jooola requested changes Dec 23, 2021

View reviewed changes

Trying to config global sass imports

5a407a6

zklosko added 2 commits December 27, 2021 17:54

Organized styles, imported json mock API, restructured routes

eabb939

Adding Track Types and Status settings pages

e472b28

Restructure router for Settings, adding Caddy, starting Composition API

00189b5

zklosko added 2 commits January 3, 2022 22:27

Trying to fix nested route issue

aea1b51

More routing troubleshooting

066efe7

Global style imports achieved

a5c73eb

zklosko marked this pull request as draft January 28, 2022 15:33

zklosko added a commit to zklosko/libretime that referenced this pull request Mar 26, 2022

Adding Vue code from libretime#1461

8edf831

zklosko closed this Mar 26, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Merging work on new UI into master branch #1461

Merging work on new UI into master branch #1461

zklosko commented Dec 23, 2021

jooola left a comment

jooola Dec 23, 2021

jooola Dec 23, 2021

zklosko Dec 24, 2021

jooola Dec 23, 2021 •

edited

Loading

zklosko Dec 24, 2021

zklosko Dec 25, 2021

jooola Dec 25, 2021

zklosko Dec 25, 2021

jooola Dec 23, 2021

zklosko Dec 24, 2021

jooola Dec 23, 2021

zklosko Dec 25, 2021

jooola Dec 28, 2021 •

edited

Loading

jooola Dec 23, 2021

jooola commented Dec 23, 2021

zklosko commented Dec 24, 2021

paddatrapper commented Dec 24, 2021

jooola commented Dec 25, 2021

zklosko commented Dec 26, 2021

paddatrapper commented Dec 27, 2021

jooola commented Dec 28, 2021

paddatrapper commented Dec 28, 2021

zklosko commented Dec 28, 2021

jooola commented Jan 3, 2022

jooola commented Jan 6, 2022

zklosko commented Feb 6, 2022

zklosko commented Mar 26, 2022

Merging work on new UI into master branch #1461

Merging work on new UI into master branch #1461

Conversation

zklosko commented Dec 23, 2021

Description

Notes

Links

jooola left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jooola Dec 23, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jooola Dec 28, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jooola commented Dec 23, 2021

zklosko commented Dec 24, 2021

paddatrapper commented Dec 24, 2021

jooola commented Dec 25, 2021

zklosko commented Dec 26, 2021

paddatrapper commented Dec 27, 2021

jooola commented Dec 28, 2021

paddatrapper commented Dec 28, 2021

zklosko commented Dec 28, 2021

jooola commented Jan 3, 2022

jooola commented Jan 6, 2022

zklosko commented Feb 6, 2022

zklosko commented Mar 26, 2022

jooola Dec 23, 2021 •

edited

Loading

jooola Dec 28, 2021 •

edited

Loading