From 6e48753b71d098ef4ffbb77aa9d68fa8da5ce079 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Thu, 21 Jan 2021 21:38:50 +0100
Subject: [PATCH] Move creating new labels to new create component

---
 src/views/labels/NewLabel.vue | 81 +++++++++++++++++++----------------
 1 file changed, 43 insertions(+), 38 deletions(-)

diff --git a/src/views/labels/NewLabel.vue b/src/views/labels/NewLabel.vue
index 155b193be..129d7d889 100644
--- a/src/views/labels/NewLabel.vue
+++ b/src/views/labels/NewLabel.vue
@@ -1,42 +1,39 @@
 <template>
-	<div class="fullpage">
-		<a @click="back()" class="close">
-			<icon :icon="['far', 'times-circle']"/>
-		</a>
-		<h3>Create a new label</h3>
-		<form @keyup.esc="back()" @submit.prevent="newlabel">
-			<div class="field is-grouped">
-				<p class="control is-expanded" v-bind:class="{ 'is-loading': labelService.loading }">
-					<input
-						:class="{ 'disabled': labelService.loading }"
-						class="input"
-						placeholder="The label title goes here..." type="text"
-						v-focus
-						v-model="label.title"/>
-				</p>
-				<p class="control">
-					<x-button
-						:shadow="false"
-						icon="plus"
-						@click="newlabel"
-					>
-						Add
-					</x-button>
-				</p>
+	<create
+		title="Create a new label"
+		@create="newLabel()"
+		:create-disabled="label.title === ''"
+	>
+		<div class="field">
+			<label class="label" for="labelTitle">Label Title</label>
+			<div
+				class="control is-expanded"
+				:class="{ 'is-loading': labelService.loading }"
+			>
+				<input
+					:class="{ disabled: labelService.loading }"
+					class="input"
+					placeholder="The label title goes here..."
+					type="text"
+					id="labelTitle"
+					v-focus
+					v-model="label.title"
+					@keyup.enter="newLabel()"
+				/>
 			</div>
-			<p class="help is-danger" v-if="showError && label.title === ''">
-				Please specify a title.
-			</p>
-		</form>
-	</div>
+		</div>
+		<p class="help is-danger" v-if="showError && label.title === ''">
+			Please specify a title.
+		</p>
+	</create>
 </template>
 
 <script>
 import labelModel from '../../models/label'
 import labelService from '../../services/label'
-import {IS_FULLPAGE} from '@/store/mutation-types'
 import LabelModel from '../../models/label'
 import LabelService from '../../services/label'
+import Create from '@/components/misc/create'
 
 export default {
 	name: 'NewLabel',
@@ -47,29 +44,37 @@ export default {
 			showError: false,
 		}
 	},
+	components: {
+		Create,
+	},
 	created() {
 		this.labelService = new LabelService()
 		this.label = new LabelModel()
-		this.$store.commit(IS_FULLPAGE, true)
 	},
 	mounted() {
 		this.setTitle('Create a new label')
 	},
 	methods: {
-		newlabel() {
-
+		newLabel() {
 			if (this.label.title === '') {
 				this.showError = true
 				return
 			}
 			this.showError = false
 
-			this.labelService.create(this.label)
-				.then(response => {
-					this.$router.push({name: 'labels.index', params: {id: response.id}})
-					this.success({message: 'The label was successfully created.'}, this)
+			this.labelService
+				.create(this.label)
+				.then((response) => {
+					this.$router.push({
+						name: 'labels.index',
+						params: { id: response.id },
+					})
+					this.success(
+						{ message: 'The label was successfully created.' },
+						this
+					)
 				})
-				.catch(e => {
+				.catch((e) => {
 					this.error(e, this)
 				})
 		},