update

src/components/projectBlock.vue

@@ -4,27 +4,30 @@
       {{ $t(title) }}
     </template>
     <template #footer>
-      <q-btn
-        rounded color="primary"
-        class="w100 q-mt-md q-mb-xs fix-disabled-btn"
-        :disable="!isFormValid"
-        @click = "onSubmit"
-        >
-        {{ $t(btnText) }}
-      </q-btn>
+      <div class="w100 q-pa-md">
+        <q-btn
+          rounded color="primary"
+          class="w100 fix-disabled-btn"
+          :disable="!isFormValid"
+          @click = "onSubmit"
+          >
+          {{ $t(btnText) }}
+        </q-btn>
+      </div>
     </template>
 
     <pn-scroll-list>
       <div class="flex column items-center q-pa-md q-pb-sm">
         <pn-image-selector
-          v-model="modelValue.logo"
+          v-model="projectMod.logo"
           :size="100" 
-          :iconsize="80" 
+          :iconsize="80"
+          type="rounded"
           class="q-pb-lg" 
         />
         <div class="q-gutter-y-lg w100">
           <q-input
-            v-model="modelValue.name"
+            v-model="projectMod.name"
             no-error-icon
             dense
             filled
@@ -38,7 +41,7 @@
           </q-input>
           
           <q-input
-            v-model="modelValue.description"
+            v-model="projectMod.description"
             dense
             filled
             autogrow
@@ -53,44 +56,52 @@
 </template>
 
 <script setup lang="ts">
-  import { computed } from 'vue'
+  import { computed, reactive } from 'vue'
   import { useI18n } from 'vue-i18n'
   import type { ProjectParams } from 'types/Project'
-  import { convertEmptyStringsToNull } from 'src/utils/helpers'
+  import { removeNullKeys } from 'utils/helpers'
 
   const { t } = useI18n()
 
-  const modelValue = defineModel<ProjectParams>({
-    required: true
-  })
-
-  defineProps<{
+  const props = defineProps<{
     title: string,
-    btnText: string
+    btnText: string,
+    project?: ProjectParams
   }>()
   
   const emit = defineEmits(['update'])
 
+  const projectMod = reactive({
+    name: props.project?.name ?? '',
+    description: props.project?.description ?? '',
+    logo: props.project?.logo ?? null
+  })
+
   const rulesErrorMessage = {
     name: t('project_block__error_name')
   }
   
   const rules = {
-    name: (val: ProjectParams['name']) => !!val?.trim() || rulesErrorMessage['name']
+    name: (val: string) => !!val?.trim() || rulesErrorMessage['name']
   }
 
   const isFormValid = computed(() => {
     const validations = {
-      name: rules.name(modelValue.value.name) === true
+      name: projectMod.name && rules.name(projectMod.name) === true
     }
     
     return Object.values(validations).every(Boolean)
   })
 
   function onSubmit() {
-    const cleanedData = convertEmptyStringsToNull(modelValue.value)
-    emit('update', cleanedData)
+    const outData = {
+      name: projectMod.name,
+      description: projectMod.description ?? (typeof props.project?.description === 'string' ? '' : null),
+      logo: projectMod.logo
+    }
+    emit('update', removeNullKeys(outData))
   }
+
 </script>
 
 <style scoped>