Beautify routes #365

carlobeltrame · 2020-01-31T15:56:22Z

Fixes #345

In this PR...

Frontend routes look like /camps/eca44930/SoLa-2020/picasso and /camps/eca44930/He-La-Wolfenstein/events/1a41cdbe/LA-CDs-brennen, but /camps/eca44930 and even /camps/eca44930/picasso and /camps/eca44930/picasso/picasso also work as one would expect
the new frontend dependency slugify is added to convert camp titles to URL-safe strings, and its use is centralized in the router
The camp and/or event specified in the URL can be injected as props from the router, logic is also centralized there. This is done by traversing the HAL API instead of hardcoding any URI (because we can)
The DefaultLayout with lots of v-ifs is split into two separate layouts (DefaultLayout and CampLayout)
The API store now outputs more intelligent dummies for arrays that are still loading
It is now possible to reload embedded collections, making the gap that was noticed in Embedded Collection vs Link auf Filtered Endpoint #359 smaller
Adds convenience links to the home page to seed the database when starting the application for the first time in Docker
General clean up of the existing frontend components

gelöschte Objekte werden mit _meta.deleted markiert

…ster+login # Conflicts: # backend/module/eCampApi/config/module.config.php # frontend/src/components/camp/Collaborators.vue # frontend/src/store/index.js # frontend/src/store/storeValueProxy.js

…ster+login # Conflicts: # backend/composer.lock # backend/module/eCampApp.php # backend/module/eCampCore/src/Hydrator/CampHydrator.php # backend/module/eCampCore/src/Hydrator/PeriodHydrator.php

…spa/register+login # Conflicts: # frontend/package.json # frontend/src/views/Home.vue # frontend/src/views/auth/Login.vue # frontend/vue.config.js

ApiSingleSelect für Change Role implementiert

…ster+login # Conflicts: # frontend/package.json # frontend/src/views/auth/Login.vue # frontend/vue.config.js

…ster+login # Conflicts: # frontend/src/components/camp/Collaborators.vue

…instead

…two separate layouts, add loadingArrayProxy to represent arrays that are currently loading from the API

pmattmann

Der Store gibt ja Loading-Proxies zurück, solange der eigentliche Inhalt noch unbekannt ist.
Da scheint es noch ein Problem zu geben. Grund habe ich aber noch nicht gefunden.

Das Problem zeigt sich bei einem Browser-Refresh bei der Anzeige eines Events.
http://localhost:8080/camps/6c1216f9/Camp1Title/events/a003ecc7/Event-LA

Wenn direkt die Event-URL abgerufen wird, kann irgendwie nicht alles sauber geladen werden.
Wenn man dahin navigiert, funktioniert es jedoch tip top...

frontend/src/router.js

…ed from the API yet

The previous solution loaded all camps / all events even if just one is needed. But hardcoding is also not an optimal solution. The correct solution according to HAL would be templated relations. This will be discussed in ecamp#369.

carlobeltrame · 2020-02-06T20:50:49Z

Habe die diskutierten Punkte umgesetzt. Bitte erneut reviewen.

usu

Gefällt mir. Sieht gut & clean aus! 👍

Was ich mir noch überlegt hab: Würd es Sinn machen, die URL zu korrigieren, wenn jemand von aussen mit einer alten/falschen URL kommt.
Z.B.
User lädt http://localhost:8080/camps/2881d2da/Alter-Camp-Title

Der Titel wurde in der Zwischenzeit geändert. Router löst natürlich korrekt auf. Sollen wir dann URL umschreiben auf?
http://localhost:8080/camps/2881d2da/Neuer-Camp-Title

Nur so als Idee, keine Ahnung wie aufwändig das ist.

Der Punkt Event vs. EventInstance müssten wir noch klären.

usu · 2020-02-09T13:45:15Z

frontend/src/components/camp/Periods.vue

    }
  },
-
-  created: function () {
-    // force reloading of all events


Nicht glücklich, dass das jetzt wegfällt. Aber ok, diskutieren wir im Issue #359

Okay, wir könnens auch wieder reinmachen. Hat für mich nach Anti-Pattern und Gebastel ausgesehen, das vom Debugging mal noch übrig geblieben ist, darum hab ichs mal "aufgeräumt".
Mit diesem PR ist es aber ab sofort möglich, sogar embedded collections zu reloaden, falls sich in Zukunft mal jemand unüberlegt ein Beispiel an diesem event reloading nimmt. Wenn ihr das event reloading also explizit (begründet) wollt können wirs auch wieder reinmachen, und vielleicht den duplizierten Code irgendwo zentralisieren.

usu · 2020-02-09T13:45:46Z

frontend/src/components/camp/Picasso.vue

-  },
-
-  created: function () {
-    // force reloading of all events


Dito wie oben

usu · 2020-02-09T14:05:33Z

frontend/src/router.js

        }
      ]
    },
    {
-      path: '/camp/:campUri/event/:eventUri',
+      path: '/camps/:campId/:campTitle?/events/:eventId/:eventName?',


Ich dachte wir wollten eigentlich auf die eventInstance und nicht auf das Event verlinken:

path: '/camps/:campId/:campTitle?/events/:eventInstanceId/:eventName?',

Ansonsten fehlt der Tageskontext für die Seitenansicht.

Guter Punkt, dann ändere ich aber auch Event.vue ab und benenne die Variabeln überall eventInstance oder instance statt event.

Yep, agree 👍

carlobeltrame · 2020-02-09T17:32:08Z

@usu Zum URL korrigieren: Könnte man machen, muss aber via router.push(some_route) geschehen. Ich bin mir nicht ganz sicher was das für Auswirkungen hat wenn die neue Route wieder dieselbe ist. Könnte sein dass der Router alle Komponenten neu macht, alle neu mountet, oder gar nichts (was wir uns wünschen würden). Auf jeden Fall würde die Ladezeit der Seite verlängert, da wir das ganze erst machen können nachdem das Camp von der API geladen ist.
In der aktuellen Implementation hingegen stimmt die URL spätestens wieder nachdem der User irgendeinen Navigations-Link angeklickt hat.

…e sidebar

carlobeltrame · 2020-02-14T11:50:34Z

Habe die Event-Ansicht überarbeitet mit EventInstance-ID in der Route. Dabei habe ich auch gleich die Sidebar gefixt die noch kaputt war, und eine wiederverwendbare Picasso-Komponente erstellt. Wieder bereit zum reviewen :)

It doesn't make sense to test for events() as it's not used here.

manuelmeister

Cool!
Ich habe noch herausgefunden, dass es bei der Period-Ansicht jetzt keinen loading-State hat.
Habe das gelöst: https://github.com/manuelmeister/ecamp3/tree/carlobeltrame/beautify-routes-with-configurable-hydrators

carlobeltrame · 2020-02-14T17:03:20Z

Cool, merci!

pmattmann and others added 28 commits October 5, 2019 12:27

Store.del()

1f486dc

gelöschte Objekte werden mit _meta.deleted markiert

BugFix, missing commit

62f92fb

api post + patch; invite user

9b8a436

minor

1fb2527

Merge branch 'devel' of https://github.com/ecamp/ecamp3 into spa/regi…

b8cbb83

…ster+login # Conflicts: # backend/module/eCampApi/config/module.config.php # frontend/src/components/camp/Collaborators.vue # frontend/src/store/index.js # frontend/src/store/storeValueProxy.js

Hydrator Tree Configurable

d7141b2

Merge branch 'devel' of https://github.com/ecamp/ecamp3 into spa/regi…

41f021d

…ster+login # Conflicts: # backend/composer.lock # backend/module/eCampApp.php # backend/module/eCampCore/src/Hydrator/CampHydrator.php # backend/module/eCampCore/src/Hydrator/PeriodHydrator.php

Merge branch 'feature/vuetify' of https://github.com/usu/ecamp3 into …

cb20864

…spa/register+login # Conflicts: # frontend/package.json # frontend/src/views/Home.vue # frontend/src/views/auth/Login.vue # frontend/vue.config.js

Clean all Hydrators

8e37aa3

cs-fix

3f972a8

Fix / disable Tests

6deb2bd

cs-fix

a6d76f2

CampCollaborator change role

36a87fc

ApiSingleSelect für Change Role implementiert

Merge branch 'devel' of https://github.com/ecamp/ecamp3 into spa/regi…

39bed99

…ster+login # Conflicts: # frontend/package.json # frontend/src/views/auth/Login.vue # frontend/vue.config.js

Review fixes

5c2691d

Merge branch 'devel' of https://github.com/ecamp/ecamp3 into spa/regi…

de8d4bb

…ster+login # Conflicts: # frontend/src/components/camp/Collaborators.vue

Add link to list all camps (that the user can see) to the API root

10cdaf9

Add slugify to generate nice URLs out of arbitrary names

299dbd8

Add links to easily seed the database to Home

e0c9ac9

Don't hardcode the camp list URI, but use the API root endpoint link …

792917c

…instead

Beautify routes, fixes ecamp#345

417598e

Clean up

85a927c

Fix edge cases of store proxy functions

138a803

Update hal-json-normalizer to the latest version

82486bc

Inject camp and event from router as props, split DefaultLayout into …

7e5908b

…two separate layouts, add loadingArrayProxy to represent arrays that are currently loading from the API

Implement reloading of embedded collections

3d4a67e

Clean up

e2a8b9a

Fix small issues with navigation

1746531

carlobeltrame requested review from usu and pmattmann January 31, 2020 15:56

carlobeltrame requested a review from manuelmeister January 31, 2020 15:56

pmattmann requested changes Feb 2, 2020

View reviewed changes

frontend/src/router.js Outdated Show resolved Hide resolved

frontend/src/router.js Outdated Show resolved Hide resolved

This was referenced Feb 4, 2020

Templated relations statt hardcoded routes #369

Closed

Vue Filter for LoadingProxy #366

Closed

carlobeltrame added 4 commits February 6, 2020 21:27

Implement loadingArrayProxy for partially loaded lists

3ace215

Use .toString() for colors to fix warnings when the color hasn't load…

4c66341

…ed from the API yet

Fix Symbol comparison

c5d495c

Hardcode the camp and event route for now.

170bab6

The previous solution loaded all camps / all events even if just one is needed. But hardcoding is also not an optimal solution. The correct solution according to HAL would be templated relations. This will be discussed in ecamp#369.

carlobeltrame requested a review from pmattmann February 6, 2020 20:50

pmattmann approved these changes Feb 6, 2020

View reviewed changes

usu reviewed Feb 9, 2020

View reviewed changes

Use the event instance id in the route, and fix the day display in th…

9deebef

…e sidebar

Show loading state of the eventInstances

a70ea9b

It doesn't make sense to test for events() as it's not used here.

manuelmeister approved these changes Feb 14, 2020

View reviewed changes

Fixed lint problems

34b4088

Stop passing the Vue instance around everywhere and use imports instead

843c066

manuelmeister merged commit ae26f47 into ecamp:devel Feb 17, 2020

carlobeltrame deleted the beautify-routes-with-configurable-hydrators branch February 17, 2020 18:05

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Beautify routes #365

Beautify routes #365

carlobeltrame commented Jan 31, 2020 •

edited

Loading

pmattmann left a comment

carlobeltrame commented Feb 6, 2020

usu left a comment

usu Feb 9, 2020

carlobeltrame Feb 9, 2020

usu Feb 9, 2020

usu Feb 9, 2020

carlobeltrame Feb 9, 2020

usu Feb 9, 2020

carlobeltrame commented Feb 9, 2020

carlobeltrame commented Feb 14, 2020

manuelmeister left a comment

carlobeltrame commented Feb 14, 2020

Beautify routes #365

Beautify routes #365

Conversation

carlobeltrame commented Jan 31, 2020 • edited Loading

pmattmann left a comment

Choose a reason for hiding this comment

carlobeltrame commented Feb 6, 2020

usu left a comment

Choose a reason for hiding this comment

usu Feb 9, 2020

Choose a reason for hiding this comment

carlobeltrame Feb 9, 2020

Choose a reason for hiding this comment

usu Feb 9, 2020

Choose a reason for hiding this comment

usu Feb 9, 2020

Choose a reason for hiding this comment

carlobeltrame Feb 9, 2020

Choose a reason for hiding this comment

usu Feb 9, 2020

Choose a reason for hiding this comment

carlobeltrame commented Feb 9, 2020

carlobeltrame commented Feb 14, 2020

manuelmeister left a comment

Choose a reason for hiding this comment

carlobeltrame commented Feb 14, 2020

carlobeltrame commented Jan 31, 2020 •

edited

Loading