Calendar 2.0 - Vue #926

georgehrke · 2018-10-18T06:56:12Z

Components

Sidebar

calendar grid

fullcalendar

editor

Routes

/{view}/{first-day-of-view}
/{view}/{first-day-of-view}/edit/{popover|sidebar}/{calendar-uri}/{object-uri}/{recurrence-id-to-edit}
/{view}/{first-day-of-view}/new/{popover|sidebar}/{recurrence-id-to-edit}

ToDo:

show email in attendee selector in new line
if entering email, show email as first option

@tcitworld Do these routes make sense?

Related tickets

fixes #787
fixes #540
fixes #22
fixes #313
fixes #336
fixes #280
fixes #377
fixes #486
fixes #536
fixes #555
fixes #569
fixes #575
fixes #585
fixes #678
fixes #860
fixes #33
fixes #37
fixes #342
fixes #420
fixes #445
fixes #879
fixes #809
fixes #914
fixes #901
fixes #532
fixes #703
fixes #277
fixes #976
fixes #554
fixes #861
fixes #985
fixes #7
fixes #875
fixes #1263
fixes #1316
fixes #318
fixes #1297
fixes #848
fixes #570
fixes #1374
fixes #899
fixes #790
fixes #168
fixes #497
fixes #576
fixes #619
fixes #881

tcitworld · 2018-10-18T07:09:25Z

What is first-day-of-view and why do we need it in our route ?
What would the values for view be ?

georgehrke · 2018-10-18T07:22:57Z

View would be agendaDay, agendaWeek, month.
First day of view would be 2018-10(-01).

So /month/2018-10 would open October in month view

tcitworld · 2018-10-18T14:47:01Z

.eslintrc.js

+		'plugin:node/recommended',
+		'plugin:vue/essential',
+		'plugin:vue/recommended',
+		'standard'


I'm not so fond of standard (but no worries). Maybe it it should be - or not - inside Nextcloud coding style ? Do you want me to open an issue on server ?

I just copy pasted the basic stuff from the contacts app, happy to change it

@tcitworld The overall edits I made on the standard really feels like what we usually encounter on the nextcloud apps :)
Could you take a look at the contacts app?

@tcitworld btw, if you decide for a better settings that fit the way we usually use on our apps (we globally have a similar coding style between our apps 😉) could you ping me so I can take a look and also update the contacts app to the same settings?

tcitworld · 2018-10-18T17:28:14Z

How can we use webpack in dev mode since eval is now disabled (nextcloud/server#11028) ?
Maybe evalScriptAllowed could be set to the debug system config.
cc @rullzer @skjnldsv

skjnldsv · 2018-10-19T11:45:47Z

How can we use webpack in dev mode since eval is now disabled (nextcloud/server#11028) ?
Maybe evalScriptAllowed could be set to the debug system config.
cc @rullzer @skjnldsv

Good question :)
Is there a dedicated webpack config for that?

rullzer · 2018-10-19T12:26:51Z

Let me leave this right here: https://blog.wuc.me/2018/10/18/nextcloud-vue-csp.html

tcitworld · 2018-10-19T14:47:30Z

I should actually read articles instead of archiving them for later. Thanks ! 😀

tcitworld · 2018-11-03T22:19:17Z

src/components/AppNavigation/ViewButtons.vue

+	name: 'TodayButton',
+	computed: {
+		labelAgendaDay() {
+			return t('calendar', 'Day')


What do you think of a basic translation component ?

cc @skjnldsv ^

Well, we have the translate function used all over nextcloud and linked to the transifex component. I think it's working really well, so I don't think changing it is a good idea. It's easier to have the same solution all over nextcloud :)

georgehrke · 2018-11-05T20:12:18Z

First implementation of Settings area:

@skjnldsv Some CSS love is always appreciated 😉

tcitworld · 2018-11-11T16:01:35Z

The renaming of appinfo/application.php to appinfo/Application.php gives me this :

{"Exception":"Error","Message":"Class 'OCA\\Calendar\\AppInfo\\Application' not found","Code":0,"Trace":[{"file":"server\/lib\/private\/legacy\/app.php","line":261,"function":"require_once"},{"file":"server\/lib\/private\/legacy\/app.php","line":154,"function":"requireAppFile","class":"OC_App","type":"::","args":["calendar"]},{"file":"server\/lib\/private\/legacy\/app.php","line":127,"function":"loadApp","class":"OC_App","type":"::","args":["calendar"]},{"file":"server\/lib\/base.php","line":972,"function":"loadApps","class":"OC_App","type":"::","args":[]},{"file":"server\/index.php","line":42,"function":"handleRequest","class":"OC","type":"::","args":[]}],"File":"server\/apps\/calendar\/appinfo\/app.php","Line":24,"CustomMessage":"--"}

EDIT: all the file renaming give me this. Investigating…
EDIT2: Moving files back into their traditional folders fixes it.
EDIT3: Yup, namespaced classes need to be in lib because of https://github.com/nextcloud/server/blob/master/lib/private/legacy/app.php#L242

skjnldsv · 2018-11-11T17:41:13Z

@skjnldsv Some CSS love is always appreciated

Ahah! Well, we still have no standard for the settings area, so I cannot really help.
I would say it looks ok now. Not too crowded, not too many options. Keep it like that 👍

On a side note, why is there two different caldav url for mac and others? Shall I do the same on contacts?

georgehrke · 2018-11-12T18:17:42Z

@tcitworld @skjnldsv How should we store events in vuex?

Right now (in this PR) we have this events property on calendars, similarly to how the new Contacts app does it, but it doesn't really make sense imho. We can't possibly store all events a user has in there. It's not uncommon to have tens of thousands or even hundreds of thousands of events. Permanently storing everything in memory could cause real memory issues.

Even after importing 10000 events, it doesn't make sense to keep them all in memory if only 5 of them have to be displayed by the current view.

Use-cases where we need to access events:

display events from the current time-range. Required time-range is provided by full calendar.

we just need to query them and hand over well-formed objects to full calendar
theoretically there is no need to store them in vuex at all
it would still be good to store them (but where?), so we can access them faster for opening the editor

a user clicks an event to edit / view it

we need to get the full event data and display it in the editor

a user is forwarded to the calendar by a different app with a route to an event. In that case, if no recurrenceId is given, we need to figure out the next in future / closest occurrence in the past

we need to get the full event data and display it in the editor

I was thinking about having an editEvent store, that's usually empty and only stores the data of one VEVENT when it's being edited.

Does that make sense?
What's your opinion on this?

georgehrke · 2018-11-12T18:54:18Z

On a side note, why is there two different caldav url for mac and others?

If the server is not configured correctly (.well-known/caldav etc.), then you need to point macOS straight to the user principal address.

Shall I do the same on contacts?

Yes :)

georgehrke · 2018-11-12T20:13:10Z

I was thinking about having an editEvent store, that's usually empty and only stores the data of one VEVENT when it's being edited.

Does that make sense?
What's your opinion on this?

Also cc @raimund-schluessler
How do you manage tasks? Do you load all at once?

skjnldsv · 2018-11-12T20:31:40Z

Yes, contacts and events behave very differently. I don't think you should indeed keep all the events in the storage. Though it could be interesting to think about the most common use case. How often a user go back in time? How often the user checks the next month? And the Month after that?

I would say preloading the month with the full data and then only get the simplest data like day, hour, duration for the next incoming months is a nice idea. Then, like contacts, fetch the full data depending on how full the current view displays the events? I'm not the best qualified on VEVENTS and associated entries since it's not my field, but I'd say there is some optimisation to think about.
Though, storing 1k events for the sake of preloading is not a proper optimlisation, I'll agree with you on this :)

georgehrke · 2018-11-12T23:23:11Z

and then only get the simplest data like day, hour, duration for the next incoming months is a nice idea.

We haven't actually done this partial retrieval in the past, but i don't think it makes sense for the Calendar app. We need many properties to render including DTSTART, DTEND, DURATION, RDATE, EXDATE, RRULE, EXRULE, STATUS, SUMMARY, DESCRIPTION (if we want to show that as a tooltip), RECURRENCE-ID, CATEGORIES (if you want to color-code them), ATTENDEES (if you want to include the users participation status in the display of events ...).

And unlike contacts it's very uncommon to have huge blobs of base64 encoded data in ics.

skjnldsv · 2018-11-13T06:49:03Z

@georgehrke then the idea of preloading still stands, but not on the props but on the quantity I guess :)

raimund-schluessler · 2018-11-13T09:00:35Z

How do you manage tasks? Do you load all at once?

For the Tasks app I will keep the strategy I currently use. On app load all VTODOs which are not completed are loaded like so

<c:calendar-query xmlns:c="urn:ietf:params:xml:ns:caldav" xmlns:d="DAV:" xmlns:a="http://apple.com/ns/ical/" xmlns:o="http://owncloud.org/ns">
   <d:prop><d:getetag/><c:calendar-data/></d:prop>
   <c:filter>
      <c:comp-filter name="VCALENDAR">
      <c:comp-filter name="VTODO"><c:prop-filter name="COMPLETED"><c:is-not-defined/></c:prop-filter>
      </c:comp-filter>
      </c:comp-filter>
   </c:filter>
</c:calendar-query>

This is necessary in order to calculate the number of tasks due today/this week/which are important. When you open the details of a task, all subtasks which are already completed are loaded as well:

<c:calendar-query xmlns:c="urn:ietf:params:xml:ns:caldav" xmlns:d="DAV:" xmlns:a="http://apple.com/ns/ical/" xmlns:o="http://owncloud.org/ns">
   <d:prop><d:getetag/><c:calendar-data/></d:prop>
   <c:filter>
      <c:comp-filter name="VCALENDAR">
      <c:comp-filter name="VTODO"><c:prop-filter name="COMPLETED"/><c:prop-filter name="RELATED-TO"><c:text-match>xx5bjzqwb9</c:text-match></c:prop-filter>
      </c:comp-filter>
      </c:comp-filter>
   </c:filter>
</c:calendar-query>

(On a side note: I haven't checked if this is easily possible with the cdav-library already. If not, would be good to add it.)

I store all tasks in the Vuex store. And I also save the subtasks of a task in the tasks properties (as of nextcloud/tasks@ecdcb82). Otherwise all tasks would be re-rendered when one changes. I think for Tasks, this is the best strategy. Loading all tasks would absolutely not work fast enough.

For calendar, loading all VEVENTs is not a good idea either, I agree. Your strategy sounds fine. Maybe preloading the events for the previous and next week could be an option to speed up navigation. Loading more is not necessary in my opinion. Storing them in the Vuex store would be ok, but maybe not necessary if you have another idea.

Side note 2:
Vue offers a very nice interface for checking the performance of an app. It can be enabled with

Vue.config.devtools = true
Vue.config.performance = true

on main.js (see nextcloud/tasks@2600158)
In Chrome you then see which components are rendered in which order and how long it took:

This helped a lot in speeding up the Tasks app. Although rendering a list with 60 tasks still takes ~400 ms.

tcitworld · 2018-11-13T09:08:11Z

Maybe preloading the events for the previous and next week could be an option to speed up navigation.

Agreed with always fetching events for previous, current, and next period (same for days and months).

georgehrke · 2018-11-21T17:14:53Z

I had an idea about the caching thing that i would like to get some feedback on:

Along every event we store a time to live
initial ttl is 10
Whenever we request events from the server (no matter whether it's a single event or a bunch of events), the time to live is decremented.
if the ttl is 0, the event is purged from the current cache
if an event was already cached, but is part of the server response, the ttl is set back to 10
events from this month, the previous month and the upcoming two months always have a ttl of -1 and are never removed from cache

Any opinion @tcitworld @skjnldsv @raimund-schluessler

skjnldsv · 2018-11-21T17:22:02Z

Seems like a nice idea!!
The only thing I'm conflicted about is the ux. What if I see a view with an event I just deleted on my phone. How would the user know that this is not a bug? Could we at least fetch all of the events uid? To make ensure deletion is up-to date? What about fetching REV and UID, and only update the events that are changed?

georgehrke · 2018-11-21T17:26:17Z

There is still nextcloud/cdav-library#9 and nextcloud/cdav-library#10. Maybe we should just keep this caching out of the calendar app after all.

georgehrke · 2018-11-24T00:01:29Z

I decided to implement our own FullCalendar 4 Timezone implementation: 8e9aa9e#diff-51210ecedb0c511ac616572de6c0bf45

Moment Timezone with all timezones is 917KB and we already have all the timezone data inside our icalendar VTimezone provider, so it's great we can now live without moment timezone in FullCalendar 4.

georgehrke · 2018-11-29T11:18:11Z

We now show the owner avatar next to a shared calendar

Signed-off-by: Georg Ehrke <developer@georgehrke.com>

georgehrke · 2019-10-19T13:04:21Z

I branched off master and turned it into a protected branch: https://github.com/nextcloud/calendar/tree/stable1.7

UtechtDustin · 2019-10-19T19:06:24Z

Is there any roadmap for the release of this version ?

georgehrke · 2019-10-19T19:07:12Z

Please see https://github.com/nextcloud/calendar/milestones

UtechtDustin · 2019-10-19T19:07:56Z

That was quick! Thanks.

Ali-romdhani · 2020-12-09T16:44:31Z

Hi, great app and needful updates!
Can you tell me how to change de default view on a an iframe ?
This is the iframe code proposed on the app, what should be added ?
<iframe src="https://niceurl/apps/calendar/embed/xxxxxxxxxxxxxxxxx" width="400" height="800"></iframe>
Many thanks

jonathanmmm · 2021-05-11T15:43:14Z

Hi, great app and needful updates!
Can you tell me how to change de default view on a an iframe ?
This is the iframe code proposed on the app, what should be added ?
<iframe src="https://niceurl/apps/calendar/embed/xxxxxxxxxxxxxxxxx" width="400" height="800"></iframe>
Many thanks

use https://nextcloud.example.com/apps/calendar/embed/xxxxxxxxxxxxxxxxx/listMonth/now for list view.
Just open normally in your nextcloud webpage the calendar and copy everything after apps/calendar/ and put it at the end.
It worked for me

georgehrke added this to the 2.0.0 beta1 milestone Oct 18, 2018

georgehrke assigned georgehrke and tcitworld Oct 18, 2018

tcitworld reviewed Oct 18, 2018

View reviewed changes

georgehrke force-pushed the vue branch from a6b6f32 to 68c3919 Compare November 1, 2018 17:24

tcitworld reviewed Nov 3, 2018

View reviewed changes

georgehrke force-pushed the vue branch 2 times, most recently from 3db4443 to 983412c Compare November 19, 2018 21:14

georgehrke force-pushed the vue branch from c437b26 to d241456 Compare October 19, 2019 12:41

Update version number in package.json

982abf0

Signed-off-by: Georg Ehrke <developer@georgehrke.com>

georgehrke merged commit d6e8a94 into master Oct 19, 2019

georgehrke deleted the vue branch October 19, 2019 19:06

This was referenced Oct 20, 2019

Notice of 2 invalid options during make #1020

Closed

Calendar - Mobile view - No way to scroll down to save event #1079

Closed

georgehrke mentioned this pull request Oct 30, 2019

Disable buttons after clicking to prevent double click actions #38

Closed

3 tasks

yekibud mentioned this pull request Aug 18, 2020

email notification after data event update, not only dates [$40] #848

Closed

chasharpur mentioned this pull request Aug 4, 2022

Do not send invites on import #576 #4408

Open

Calendar 2.0 - Vue #926

Calendar 2.0 - Vue #926

Conversation

georgehrke commented Oct 18, 2018 • edited Loading

Components

Sidebar

calendar grid

editor

Routes

Related tickets

tcitworld commented Oct 18, 2018

georgehrke commented Oct 18, 2018

tcitworld Oct 18, 2018

Choose a reason for hiding this comment

georgehrke Oct 18, 2018

Choose a reason for hiding this comment

skjnldsv Oct 19, 2018

Choose a reason for hiding this comment

skjnldsv Nov 3, 2018

Choose a reason for hiding this comment

tcitworld commented Oct 18, 2018

skjnldsv commented Oct 19, 2018

rullzer commented Oct 19, 2018

tcitworld commented Oct 19, 2018

tcitworld Nov 3, 2018

Choose a reason for hiding this comment

georgehrke Nov 5, 2018

Choose a reason for hiding this comment

skjnldsv Nov 6, 2018

Choose a reason for hiding this comment

georgehrke commented Nov 5, 2018

tcitworld commented Nov 11, 2018 • edited Loading

skjnldsv commented Nov 11, 2018

georgehrke commented Nov 12, 2018

georgehrke commented Nov 12, 2018

georgehrke commented Nov 12, 2018

skjnldsv commented Nov 12, 2018

georgehrke commented Nov 12, 2018

skjnldsv commented Nov 13, 2018

raimund-schluessler commented Nov 13, 2018

tcitworld commented Nov 13, 2018

georgehrke commented Nov 21, 2018

skjnldsv commented Nov 21, 2018

georgehrke commented Nov 21, 2018

georgehrke commented Nov 24, 2018

georgehrke commented Nov 29, 2018

georgehrke commented Oct 19, 2019

UtechtDustin commented Oct 19, 2019

georgehrke commented Oct 19, 2019

UtechtDustin commented Oct 19, 2019

Ali-romdhani commented Dec 9, 2020

jonathanmmm commented May 11, 2021

georgehrke commented Oct 18, 2018 •

edited

Loading

tcitworld commented Nov 11, 2018 •

edited

Loading