Hide labels the user is not allowed to edit

src/components/labels/ListLabels.vue

@@ -3,17 +3,18 @@
 		<h1>Manage labels</h1>
 		<p>
 			Click on a label to edit it.
-			You can edit all labels you are the owner of, you can use all lables of whose list you have access to.
+			You can edit all labels you created, you can use all lables which are associated with a task to whose list you have access.
 		</p>
 		<div class="columns">
 			<div class="labels-list column">
 				<a
 					v-for="l in labels" :key="l.id"
 					class="tag"
-					@click="labelEditLabel = l; isLabelEdit = true"
+					:class="{'disabled': user.infos.id !== l.created_by.id}"
+					@click="editLabel(l)"
 					:style="{'background': l.hex_color, 'color': l.hasDarkColor() ? '#4a4a4a' : '#e5e5e5'}">
 					<span>{{ l.title }}</span>
-					<a class="delete is-small" @click="deleteLabel(l)"></a>
+					<a class="delete is-small" @click="deleteLabel(l)" v-if="user.infos.id === l.created_by.id"></a>
 				</a>
 			</div>
 			<div class="column is-4" v-if="isLabelEdit">
@@ -84,6 +85,7 @@
 	import LabelService from '../../services/label'
 	import LabelModel from '../../models/label'
 	import message from '../../message'
+	import auth from '../../auth'
 
 	export default {
 		name: 'ListLabels',
@@ -96,6 +98,7 @@
 				labels: [],
 				labelEditLabel: LabelModel,
 				isLabelEdit: false,
+				user: auth.user,
 			}
 		},
 		created() {
@@ -131,7 +134,6 @@
 			editLabelSubmit() {
 				this.labelService.update(this.labelEditLabel)
 					.then(r => {
-						//
 						for (const l in this.labels) {
 							if (this.labels[l].id === r.id) {
 								this.$set(this.labels, l, r)
@@ -142,6 +144,13 @@
 					.catch(e => {
 						message.error(e, this)
 					})
+			},
+			editLabel(label) {
+				if(label.created_by.id !== this.user.id) {
+					return
+				}
+				this.labelEditLabel = label
+				this.isLabelEdit = true
 			}
 		}
 	}

src/styles/labels.scss

@@ -6,5 +6,10 @@
   .tag{
     margin: 0.5em;
     background: darken($background, 5);
+
+    &.disabled{
+      opacity: 0.7;
+      pointer-events: none;
+    }
   }
 }

todo.md

@@ -97,7 +97,7 @@
   * if none is found, "enter" should create and add it to the task
   * multiselect -> action dispatcher + styling
   * [x] Label overview + edit
-  	* [ ] Only be able to edit labels where the user has the right, disable the others
+  	* [x] Only be able to edit labels where the user has the right, disable the others
   * [ ] Delay when searching to not search for the character I entered 5 minutes ago
 * [ ] Timeline/Calendar view -> Dazu tasks die in einem Bestimmten Bereich due sind, macht dann das Frontend