wip

src/layout/EditableTitle.vue

@@ -4,70 +4,82 @@ import ValidationError from '@/components/ValidationError.vue'
 import { required } from '@vuelidate/validators'
 import useVuelidate from '@vuelidate/core'
 import { CheckIcon, PencilIcon, XIcon } from '@heroicons/vue/outline'
-import { computed, defineEmits, defineProps, reactive, ref } from 'vue'
+import { computed, defineEmits, defineProps, effect, ref, watchEffect } from 'vue'
 
 const emit = defineEmits(['change'])
 
 const props = defineProps({
   busy: Boolean,
   disabled: Boolean,
   placeholder: String,
+  validate: [Function, Object],
   value: String
 })
 
-const formState = reactive({
-  newValue: props.value || ''
-})
+const newValue = ref('')
 
-const v$ = useVuelidate({ newValue: [required] }, formState)
+const v$ = useVuelidate({ newValue: props.validate || { required } }, { newValue })
 
-const canSave = computed(() => !v$.value.$invalid)
+const canSave = computed(() => !props.disabled && !v$.value.$invalid)
 const editing = ref(false)
-const inputRef = ref()
+const inputRef = ref(null)
+
+function reset() {
+  editing.value = false
+  v$.value.newValue.$model = props.value || ''
+  v$.value.$reset()
+}
 
 function startEdit() {
   editing.value = true
-  inputRef.value.focus()
 }
 
-function stopEdit(change = true) {
+async function stopEdit() {
+  if (!await v$.value.$validate()) return
+
+  emit('change', newValue.value)
+
   editing.value = false
-  if (change) {
-    emit('change', formState.newValue)
-  }
 }
+
+effect(() => {
+  reset()
+})
+
+watchEffect(() => {
+  if (inputRef.value) inputRef.value.focus()
+})
 </script>
 
 <template>
   <div class="editable-title__container flex">
     <div v-if="editing">
       <input
         v-model="v$.newValue.$model"
-        @keypress.enter="stopEdit"
+        @keypress.enter.prevent="stopEdit"
         class="editable-title__value"
-        :placeholder="value || placeholder"
-        :ref="inputRef"
+        :placeholder="placeholder"
+        ref="inputRef"
         type="text"
       />
       <ValidationError :errors="v$.newValue.$errors" />
     </div>
     <h1 v-else class="w-max mb-0">{{ value }}</h1>
 
-    <div v-if=editing class="mt-3">
+    <div class="mt-3">
       <button v-if="busy" class="ml-2" disabled>
         <LoadingSpinner v-if="busy" />
       </button>
-      <button v-else class="ml-2" @click="stopEdit" :disabled="!canSave">
+      <button v-else-if="editing" class="ml-2" @click="stopEdit" :disabled="!canSave">
         <CheckIcon class="button__icon text-green hover:text-green-600" />
       </button>
-      <button v-if="!busy" @click="stopEdit(false)" class="ml-2">
-        <XIcon class="button__icon text-red hover:text-red-600" />
-      </button>
-    </div>
-    <div v-else-if="!disabled" class="mt-3">
-      <button class="ml-2" @click="startEdit">
+      <button v-else class="ml-2" @click="startEdit" :disabled="disabled">
         <PencilIcon class="button__icon text-gray-400 hover:text-green" />
       </button>
+
+      <button v-if="!busy && editing" @click="reset" class="ml-2">
+        <XIcon class="button__icon text-red hover:text-red-600" />
+      </button>
     </div>
   </div>
 </template>

src/modules/vpns/views/VPN.vue

@@ -6,17 +6,16 @@ import { ArrowLeftIcon } from '@heroicons/vue/outline'
 import EditableTitle from '../../../layout/EditableTitle.vue'
 import { useStore } from 'vuex'
 import { RouterLink, useRoute } from 'vue-router'
+import { and, minLength, required } from '@vuelidate/validators'
 import { computed, effect, ref } from 'vue'
 
 const route = useRoute()
 const store = useStore()
 
 const data = ref()
 const error = ref()
-const busy = ref(false)
 const loading = ref(false)
 
-const server = computed(() => data.value && data.value.server)
 const vpn = computed(() => data.value && data.value.vpn)
 
 async function reload() {
@@ -52,6 +51,8 @@ effect(() => {
     </div>
 
     <EditableTitle
+      placeholder="VPN name"
+      :validate="and(required, minLength(3))"
       :value="vpn.name"
       @change="updateName"
     />