wip

src/components/LabelControls.vue

@@ -120,7 +120,7 @@ function deleteEditingLabel() {
   </v-card>
 
   <isolated-dialog v-model="editDialog" max-width="800px">
-    <ToolLabelEditor
+    <tool-label-editor
       v-if="editingLabelID"
       v-model:name="editState.labelName"
       v-model:stroke-width="editState.strokeWidth"

src/components/LabelEditor.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import { toRefs } from 'vue';
+import { computed, toRefs } from 'vue';
 
 const emit = defineEmits(['done', 'cancel', 'delete', 'update:color']);
-const props = defineProps({
-  color: String,
+const props = defineProps<{ color: string; valid: boolean }>();
+const { color, valid } = toRefs(props);
+const doneDisabled = computed(() => {
+  console.log('valid.value', valid.value);
+  return !valid.value;
 });
-const { color } = toRefs(props);
 
 const done = () => {
   emit('done');
@@ -40,6 +42,7 @@ const onDelete = () => {
               color="secondary"
               variant="elevated"
               @click="done"
+              :disabled="doneDisabled"
               data-testid="edit-label-done-button"
             >
               Done

src/components/ToolLabelEditor.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import LabelEditor from '@/src/components/LabelEditor.vue';
 import type { LabelsStore } from '../store/tools/useLabels';
 import type { AnnotationTool } from '../types/annotation-tool';
@@ -20,6 +20,8 @@ const props = defineProps<{
   labelsStore: LabelsStore<Pick<AnnotationTool, 'strokeWidth'>>;
 }>();
 
+const editingName = ref(props.name);
+
 const existingNames = computed(
   () =>
     new Set(
@@ -28,17 +30,28 @@ const existingNames = computed(
 );
 
 function isUniqueEditingName(name: string) {
-  return !existingNames.value.has(name);
+  console.log('isUniqueEditingName', name, !existingNames.value.has(name));
+  return !existingNames.value.has(name) || name === props.name;
 }
 
 function uniqueNameRule(name: string) {
   return isUniqueEditingName(name) || 'Name is not unique';
 }
+
+const valid = computed(() => {
+  console.log(
+    'valid',
+    editingName.value,
+    isUniqueEditingName(editingName.value)
+  );
+  return isUniqueEditingName(editingName.value);
+});
 </script>
 
 <template>
   <label-editor
     :color="color"
+    :valid="valid"
     @update:color="$emit('update:color', $event)"
     @cancel="$emit('cancel')"
     @done="$emit('done')"
@@ -53,7 +66,7 @@ function uniqueNameRule(name: string) {
       <v-text-field
         label="Name"
         class="flex-grow-0"
-        :model-value="name"
+        :model-value="editingName"
         @update:model-value="$emit('update:name', $event)"
         @keydown.stop.enter="done"
         :rules="[uniqueNameRule]"