Add names to link shares when creating them (#456)

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/456
Co-authored-by: konrad <konrad@kola-entertainments.de>
Co-committed-by: konrad <konrad@kola-entertainments.de>

src/components/sharing/linkSharing.vue

@@ -5,6 +5,14 @@
 			<div class="p-4">
 				<p>Share with a link:</p>
 				<div class="field has-addons">
+					<div class="control">
+						<input
+							class="input"
+							placeholder="Name"
+							v-tooltip="'All actions done by this link share will show up with the name.'"
+							v-model="name"
+						/>
+					</div>
 					<div class="control">
 						<div class="select">
 							<select v-model="selectedRight">
@@ -28,7 +36,8 @@
 				<thead>
 				<tr>
 					<th>Link</th>
-					<th>Shared by</th>
+					<th>Name</th>
+					<th>Shared&nbsp;by</th>
 					<th>Right</th>
 					<th>Delete</th>
 				</tr>
@@ -58,6 +67,12 @@
 							</div>
 						</div>
 					</td>
+					<td>
+						<template v-if="s.name !== ''">
+							{{ s.name }}
+						</template>
+						<i v-else>No name set</i>
+					</td>
 					<td>
 						{{ s.sharedBy.getDisplayName() }}
 					</td>
@@ -65,19 +80,19 @@
 						<template v-if="s.right === rights.ADMIN">
 							<span class="icon is-small">
 								<icon icon="lock"/>
-								</span>
+							</span>&nbsp;
 							Admin
 						</template>
 						<template v-else-if="s.right === rights.READ_WRITE">
 							<span class="icon is-small">
 								<icon icon="pen"/>
-								</span>
+							</span>&nbsp;
 							Write
 						</template>
 						<template v-else>
 							<span class="icon is-small">
 								<icon icon="users"/>
-								</span>
+							</span>&nbsp;
 							Read-only
 						</template>
 					</td>
@@ -140,6 +155,7 @@ export default {
 			newLinkShare: LinkShareModel,
 			rights: rights,
 			selectedRight: rights.READ,
+			name: '',
 			showDeleteModal: false,
 			linkIdToDelete: 0,
 		}
@@ -180,6 +196,7 @@ export default {
 			let newLinkShare = new LinkShareModel({
 				right: this.selectedRight,
 				listId: this.listId,
+				name: this.name,
 			})
 			this.linkShareService
 				.create(newLinkShare)

src/models/linkShare.js

@@ -22,6 +22,7 @@ export default class ListModel extends AbstractModel {
 			sharedBy: UserModel,
 			sharingType: 0,
 			listId: 0,
+			name: '',
 
 			created: null,
 			updated: null,