before delete 3software

src/components/projectBlock.vue

@@ -0,0 +1,110 @@
+<template>
+  <pn-page-card>
+    <template #title>
+      {{ $t(title) }}
+    </template>
+    <template #footer>
+      <q-btn
+        rounded color="primary"
+        class="w100 q-mt-md q-mb-xs"
+        :disable="!(isFormValid && (isDirty(initialProject, modelValue)))"
+        @click = "emit('update')"
+        >
+        {{ $t(btnText) }}
+      </q-btn>
+    </template>
+
+    <pn-scroll-list>
+      <div class="flex column items-center q-pa-md q-pb-sm">
+        <pn-image-selector
+          v-model="modelValue.logo"
+          :size="100" 
+          :iconsize="80" 
+          class="q-pb-lg" 
+        />
+        <div class="q-gutter-y-lg w100">
+          <q-input
+            v-model="modelValue.name"
+            no-error-icon
+            dense
+            filled
+            label-slot
+            class = "w100 fix-bottom-padding"
+            :rules="[rules.name]"
+            >
+            <template #label>
+              {{ $t('project_block__project_name') }} <span class="text-red">*</span>
+            </template>
+          </q-input>
+          
+          <q-input
+            v-model="modelValue.description"
+            dense
+            filled
+            autogrow
+            class="w100 q-pt-sm"
+            :label="$t('project_block__project_description')"
+          />
+    
+          <!-- <q-checkbox
+            v-if="modelValue.logo"
+            v-model="modelValue.is_logo_bg"
+            class="w100"
+            dense
+            >
+            {{ $t('project_block__image_use_as_background_chats') }}
+          </q-checkbox> -->
+        </div>
+      </div>
+    </pn-scroll-list>
+  </pn-page-card>
+
+</template>
+
+<script setup lang="ts">
+  import { onMounted, computed, ref } from 'vue'
+  import { useI18n } from 'vue-i18n'
+  import { isDirty } from 'helpers/helpers'
+  import type { ProjectParams } from 'types/Project'
+
+  const { t } = useI18n()
+
+  const modelValue = defineModel<ProjectParams>({
+    required: true
+  })
+
+  defineProps<{
+    title: string,
+    btnText: string
+  }>()
+  
+  const emit = defineEmits(['update'])
+
+  const rulesErrorMessage = {
+    name: t('project_block__error_name')
+  }
+  
+  const rules = {
+    name: (val: ProjectParams['name']) => !!val?.trim() || rulesErrorMessage['name']
+  }
+
+  const isFormValid = computed(() => {
+    const validations = {
+      name: rules.name(modelValue.value.name) === true
+    }
+    
+    return Object.values(validations).every(Boolean)
+  })
+
+  const initialProject = ref({} as ProjectParams)
+
+  onMounted(() => {
+    initialProject.value = { ...modelValue.value }
+  })
+</script>
+
+<style scoped>
+  .fix-bottom-padding.q-field--with-bottom {
+    padding-bottom: 0 !important
+  }
+</style>