v3

src/pages/ProjectCreatePage.vue

@@ -0,0 +1,60 @@
+<template>
+  <pn-page-card>
+    <template #title>
+      <div class="flex items-center justify-between col-grow">
+        <div>
+          {{$t('project_card__add_project')}}
+        </div>
+        <q-btn
+          v-if="isFormValid && isDirty"
+          @click = "addProject(project)"
+          flat round
+          icon="mdi-check"
+        />
+      </div>
+    </template>
+    <pn-scroll-list>
+      <project-info-block
+        v-model="project"
+        @valid="isFormValid = $event"
+      />
+    </pn-scroll-list>
+  </pn-page-card>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed } from 'vue'
+  import { useRouter } from 'vue-router'
+  import projectInfoBlock from 'components/admin/projectInfoBlock.vue'
+  import { useProjectsStore } from 'stores/projects'
+  import type { ProjectParams } from 'src/types'
+
+
+  const router = useRouter()
+  const projectsStore = useProjectsStore()
+  
+  const initialProject: ProjectParams = {
+    name: '',
+    logo: '',
+    description: '',
+    logo_as_bg: false
+  }
+
+  const project = ref<ProjectParams>({ ...initialProject })
+  const isFormValid = ref(false)
+
+  const isDirty = computed(() => {
+    return (
+      project.value.name !== initialProject.name ||
+      project.value.logo !== initialProject.logo ||
+      project.value.description !== initialProject.description ||
+      project.value.logo_as_bg !== initialProject.logo_as_bg
+    )
+  })
+  
+ async function addProject (data: ProjectParams) {
+    const newProject = projectsStore.addProject(data)
+    await router.push({name: 'chats', params: { id: newProject.id}})
+  }
+
+</script>