From 9c115b7f5c6d779124090e300fef27c8ad453714 Mon Sep 17 00:00:00 2001
From: Dominik Pschenitschni <mail@celement.de>
Date: Fri, 24 Jan 2025 12:37:40 +0100
Subject: [PATCH] feat: improve project edit form

This moves the identifier and colorpicker below the description field and next to each other.

Additionally this fixes a bug of the identifier, where it was possible to add an identifier with a length greater than 10, that resulted in an error.
---
 .../project/settings/ProjectSettingsEdit.vue  | 57 ++++++++++---------
 1 file changed, 31 insertions(+), 26 deletions(-)

diff --git a/frontend/src/views/project/settings/ProjectSettingsEdit.vue b/frontend/src/views/project/settings/ProjectSettingsEdit.vue
index 4243ba2f9..11ebb4624 100644
--- a/frontend/src/views/project/settings/ProjectSettingsEdit.vue
+++ b/frontend/src/views/project/settings/ProjectSettingsEdit.vue
@@ -26,28 +26,6 @@
 				>
 			</div>
 		</div>
-		<div class="field">
-			<label
-				v-tooltip="$t('project.edit.identifierTooltip')"
-				class="label"
-				for="identifier"
-			>
-				{{ $t('project.edit.identifier') }}
-			</label>
-			<div class="control">
-				<input
-					id="identifier"
-					v-model="project.identifier"
-					v-focus
-					:class="{ 'disabled': isLoading}"
-					:disabled="isLoading || undefined"
-					class="input"
-					:placeholder="$t('project.edit.identifierPlaceholder')"
-					type="text"
-					@keyup.enter="save"
-				>
-			</div>
-		</div>
 		<div class="field">
 			<label class="label">{{ $t('project.parent') }}</label>
 			<div class="control">
@@ -69,10 +47,37 @@
 				/>
 			</div>
 		</div>
-		<div class="field">
-			<label class="label">{{ $t('project.edit.color') }}</label>
-			<div class="control">
-				<ColorPicker v-model="project.hexColor" />
+
+		<div class="columns">
+			<div class="column field">
+				<label
+					v-tooltip="$t('project.edit.identifierTooltip')"
+					class="label"
+					for="identifier"
+				>
+					{{ $t('project.edit.identifier') }}
+				</label>
+				<div class="control">
+					<input
+						id="identifier"
+						v-model="project.identifier"
+						v-focus
+						:class="{ 'disabled': isLoading}"
+						:disabled="isLoading || undefined"
+						class="input"
+						:placeholder="$t('project.edit.identifierPlaceholder')"
+						type="text"
+						maxlength="10"
+						@keyup.enter="save"
+					>
+				</div>
+			</div>
+
+			<div class="column field">
+				<label class="label">{{ $t('project.edit.color') }}</label>
+				<div class="control">
+					<ColorPicker v-model="project.hexColor" />
+				</div>
 			</div>
 		</div>
 	</CreateEdit>