Refactor date input components to use is-editing

prop
snapshot-labs · Nov 9, 2023 · 632a0b7 · 632a0b7
1 parent ac8c90b
commit 632a0b7
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/src/components/SpaceCreateVoting.vue b/src/components/SpaceCreateVoting.vue
@@ -192,14 +192,14 @@ defineEmits<{
           <SpaceCreateVotingDateStart
             :delay="space.voting?.delay"
             :date="dateStart"
-            :disabled="isEditing || !!space.voting?.delay"
+            :is-editing="isEditing"
             @select="value => setDateStart(value)"
           />
 
           <SpaceCreateVotingDateEnd
             :period="space.voting?.period"
             :date="dateEnd"
-            :disabled="isEditing || !!space.voting?.period"
+            :is-editing="isEditing"
             @select="value => setDateEnd(value)"
           />
         </div>

diff --git a/src/components/SpaceCreateVotingDateEnd.vue b/src/components/SpaceCreateVotingDateEnd.vue
@@ -4,6 +4,7 @@ const { d } = useI18n();
 const props = withDefaults(
   defineProps<{
     period?: number | null;
+    isEditing?: boolean;
     date: number;
   }>(),
   {
@@ -12,6 +13,7 @@ const props = withDefaults(
 );
 
 const dateString = computed(() => d(props.date * 1e3, 'short', 'en-US'));
+const isDisabled = computed(() => !!props.period || props.isEditing);
 
 const emit = defineEmits(['select']);
 </script>
@@ -20,9 +22,10 @@ const emit = defineEmits(['select']);
   <InputDate
     type="end"
     :title="$t(`create.end`)"
+    :disabled="isDisabled"
     :date="date"
     :date-string="dateString"
-    :tooltip="!!period ? $t('create.periodEnforced') : null"
+    :tooltip="(!!period && !isEditing) ? $t('create.periodEnforced') : null"
     @update:date="emit('select', $event)"
   />
 </template>
diff --git a/src/components/SpaceCreateVotingDateStart.vue b/src/components/SpaceCreateVotingDateStart.vue
@@ -4,6 +4,7 @@ const { t, d } = useI18n();
 const props = withDefaults(
   defineProps<{
     delay?: number | null;
+    isEditing?: boolean;
     date: number;
   }>(),
   {
@@ -17,6 +18,7 @@ const dateString = computed(() =>
     ? t('create.now')
     : d(props.date * 1e3, 'short', 'en-US')
 );
+const isDisabled = computed(() => !!props.delay || props.isEditing);
 
 const emit = defineEmits(['select']);
 </script>
@@ -25,9 +27,10 @@ const emit = defineEmits(['select']);
   <InputDate
     type="start"
     :title="$t(`create.start`)"
+    :disabled="isDisabled"
     :date="date"
     :date-string="dateString"
-    :tooltip="!!delay ? $t('create.delayEnforced') : null"
+    :tooltip="(!!delay && !isEditing) ? $t('create.delayEnforced') : null"
     @update:date="emit('select', $event)"
   />
 </template>