feat:select existing talk room for conversations on calendar events

[GretaD]

fixes #6581

This PR adds the ability to link Talk rooms to calendar events. Users can create a new Talk room or select an existing one, and the link is added to the event's location or description(when the location field is already filled).
How to test:

1. Activate talk app
2. Create an event on calendar
3. Open the side bar by clicking more details
4. Find the Add Talk button

hover state and selected state

the side bar after selecting an existing convesation

[codecov]

Codecov Report

Attention: Patch coverage is 0% with 97 lines in your changes missing coverage. Please review.

Project coverage is 23.17%. Comparing base (c27f067) to head (1d63a89).
Report is 6 commits behind head on main.

Files with missing lines	Patch %	Lines
src/components/Editor/AddTalkModal.vue	0.00%	79 Missing ⚠️
src/views/EditSidebar.vue	0.00%	17 Missing ⚠️
src/services/talkService.js	0.00%	1 Missing ⚠️

Additional details and impacted files

@@             Coverage Diff              @@
##               main    #6595      +/-   ##
============================================
- Coverage     23.41%   23.17%   -0.24%     
  Complexity      472      472              
============================================
  Files           249      250       +1     
  Lines         11899    12020     +121     
  Branches       2268     2296      +28     
============================================
  Hits           2786     2786              
- Misses         8786     8907     +121     
  Partials        327      327              

Flag	Coverage Δ
javascript	14.66% <0.00%> (-0.19%)	⬇️
php	59.45% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[nimishavijay]

Changes discussed:

• Nice-to-have: avatar of the each conversation (34*34px)
• Instead of a "Select" button for each item, have only one select button in the bottom right corner
• When you click on an item, it will be highlighted in the primary color (similar to the Talk conversation list)

Additional changes:

• heading wording "Select a talk room from the list" --> "Add Talk conversation"
• use small modal size
• Nice-to-have: sort by alphabetical order

Follow ups:

• Show conversation description in subline
• Add search bar which filters the list

[st3iny]

For reference, the URL for getting conversation avatars is the following:

const avatarUrl = generateOcsUrl('apps/spreed/api/v1/room/{roomToken}/avatar', {
	roomToken: conversation.token,
})

[nimishavijay]

Looks awesome! Could we try with 28px size for the avatar and 34px height of the whole element?

I would also suggest to add some spacing between the avatar and the conversation name, maybe one more --default-grid-baseline :)

[GretaD]

Looks awesome! Could we try with 28px size for the avatar and 34px height of the whole element?

sure

I would also suggest to add some spacing between the avatar and the conversation name, maybe one more --default-grid-baseline :)

--default-grid-baseline is 4px, i have added 5px, so how big should i make it?

Agreed with nimisha to have it 8px

[nimishavijay]

Looks great design wise 🚀

[tcitworld]

I'm not fond of

The location field is also used for readable information when it's a physical location, not just URLs, and restricting the width again makes it harder to do modifications to a physical address.
Maybe but the button below on subline?

[GretaD]

I'm not fond of

The location field is also used for readable information when it's a physical location, not just URLs, and restricting the width again makes it harder to do modifications to a physical address. Maybe but the button below on subline?

@nimishavijay what do you think?

[tcitworld]

Yup, looks good!

[GretaD]

changed the desc with the latest state

[GretaD]

Yup, looks good!

thank you, changed the position as suggested by nimisha. Can you please approve if you are happy with it?

[tcitworld]

changed the position as suggested by nimisha

The button is above the field instead of under it? No opinion on this, but it differs with your previous screenshot.

[GretaD]

changed the position as suggested by nimisha

The button is above the field instead of under it? No opinion on this, but it differs with your previous screenshot.

yes, she sent me a mockup. Sorry if i was not clear. i marked my comment as outdated

[hamza221]

render the add talkbutton conditionally only when talk is installed.
Or show a better error message

[st3iny]

render the add talkbutton conditionally only when talk is installed. Or show a better error message

I think you are not on the latest version. Please pull again.

[hamza221]

LGTM

[st3iny]

Styling is a bit off. I fixed it locally and if you have no pending changes, I'll push a commit.

[ChristophWurst]

Should

calendar/src/components/Editor/Invitees/InviteesList.vue

Lines 42 to 47 in e0c14a6

	<NcButton v-if="isCreateTalkRoomButtonVisible"
	class="invitees-list-button-group__button"
	:disabled="isCreateTalkRoomButtonDisabled"
	@click="createTalkRoom">
	{{ $t('calendar', 'Create Talk room for this event') }}
	</NcButton>

stay? It means there are now two ways to create a new conversation.

[GretaD]

Should

calendar/src/components/Editor/Invitees/InviteesList.vue

Lines 42 to 47 in e0c14a6

	<NcButton v-if="isCreateTalkRoomButtonVisible"
	class="invitees-list-button-group__button"
	:disabled="isCreateTalkRoomButtonDisabled"
	@click="createTalkRoom">
	{{ $t('calendar', 'Create Talk room for this event') }}
	</NcButton>

stay? It means there are now two ways to create a new conversation.

it is in the scope of the feature, and i think its convenient when you dont find a room to select, you can create right way a new one, but your call.

[ChristophWurst]

I mean to remove the previous mechanism and only have the new one.

[GretaD]

I mean to remove the previous mechanism and only have the new one.

ah, i think thats a good idea. I will do it in a separate pr

[st3iny]

The new file AddTalkModal.vue needs a license header:

<!--
 - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
 - SPDX-License-Identifier: AGPL-3.0-or-later
 -->

[ChristophWurst]

Happy new year btw

[GretaD]

Happy new year btw

file was created on the 30th of December :)