From 5b0e157bf4433139672141c255db24bb2a084cc9 Mon Sep 17 00:00:00 2001
From: shan8851 <asamshan456@gmail.com>
Date: Tue, 10 Dec 2024 22:29:39 +0000
Subject: [PATCH] feat: add nickname to [rpject

---
 .../Project/Create/Categories/BasicInfo.vue   | 22 ++++++++++++++++++
 .../Create/Components/ContactDialog.vue       | 23 +++++++++++++++----
 pages/project/create.vue                      | 17 --------------
 types/project.ts                              |  1 +
 4 files changed, 41 insertions(+), 22 deletions(-)

diff --git a/components/Project/Create/Categories/BasicInfo.vue b/components/Project/Create/Categories/BasicInfo.vue
index 54bb655..e111405 100644
--- a/components/Project/Create/Categories/BasicInfo.vue
+++ b/components/Project/Create/Categories/BasicInfo.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import * as yup from 'yup'
+import ContactDialog from '../Components/ContactDialog.vue'
 import type { Project } from '~/types'
 
 const props = defineProps<{
@@ -29,12 +30,17 @@ const month = ref(new Date(props.project?.product_launch_day || '').getMonth())
 const year = ref(new Date(props.project?.product_launch_day || '').getFullYear())
 const isDead = ref(props.project?.sunset || false)
 
+const addNickname = ref(false)
+const isOpen = ref(false)
+const nickname = ref('')
+
 resetForm({
   values: {
     categories: Array.isArray(props.project?.categories) ? props.project?.categories?.map(c => c.toLowerCase()) : [],
     usecases: Array.isArray(props.project?.usecases) ? props.project?.usecases?.map(u => u.toLowerCase()) : [],
     ecosystems: Array.isArray(props.project?.ecosystem) ? props.project?.ecosystem?.map(e => e.toLowerCase()) : [],
     description: props.project?.description || '',
+    nickname: props.project?.nickname || '',
   },
 })
 
@@ -56,6 +62,7 @@ function save() {
     ecosystem: ecosystems.value,
     description: description.value,
     product_launch_day: (year.value && month.value && day.value) ? new Date(year.value, month.value, day.value).toISOString() : undefined,
+    nickname: nickname.value || undefined,
     sunset: isDead.value,
   })
 }
@@ -121,6 +128,21 @@ and why should user use your project."
       lg="text-16px"
     >Other Information
     </span>
+    <div class="mt-4 flex items-center gap-2">
+      <input
+        v-model="addNickname"
+        type="checkbox"
+        class="w-6 h-6 border-2 border-app-bg-dark_grey accent-black cursor-pointer"
+        @change="isOpen = addNickname"
+      >
+      <label class="text-white text-sm">Add nickname (We collect this to track and reward our contributors in the future)</label>
+    </div>
+
+    <ContactDialog
+      v-model="isOpen"
+      @confirm="nickname = $event"
+    />
+
     <ProjectCreateComponentsToggle
       v-model="isDead"
       label="Sunset (project is dead)"
diff --git a/components/Project/Create/Components/ContactDialog.vue b/components/Project/Create/Components/ContactDialog.vue
index fa842bf..e6f05a7 100644
--- a/components/Project/Create/Components/ContactDialog.vue
+++ b/components/Project/Create/Components/ContactDialog.vue
@@ -7,24 +7,37 @@ import {
   DialogTitle,
 } from '@headlessui/vue'
 
-const isOpen = defineModel<boolean>()
+const { modelValue } = defineProps<{
+  modelValue: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'confirm', nickname: string): void
+}>()
 
 const userInput = ref('')
+
+const closeDialog = () => {
+  emit('update:modelValue', false)
+}
+
 const handleConfirm = () => {
-  // Perform actions with userInput.value
-  isOpen.value = false
+  emit('confirm', userInput.value)
+  closeDialog()
 }
 </script>
 
 <template>
   <TransitionRoot
     appear
-    :show="isOpen"
+    :show="modelValue"
     as="template"
   >
     <Dialog
       as="div"
       class="relative z-10"
+      @close="closeDialog"
     >
       <TransitionChild
         as="template"
@@ -85,7 +98,7 @@ const handleConfirm = () => {
                     uppercase
                     w-full
                     border
-                    @click="isOpen = false"
+                    @click="closeDialog"
                   >
                     <span>cancel</span>
                   </Button>
diff --git a/pages/project/create.vue b/pages/project/create.vue
index 043bdf3..17c0681 100644
--- a/pages/project/create.vue
+++ b/pages/project/create.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import ContactDialog from '~/components/Project/Create/Components/ContactDialog.vue'
-
 definePageMeta({
   layout: 'create',
 })
@@ -40,12 +38,6 @@ watch(isEditingName, () => {
 
 const transitionDone = ref(false)
 
-const isOpen = ref(false)
-
-const handleDialog = () => {
-  isOpen.value = true
-}
-
 onBeforeMount(() => {
   clearProject()
   initForm()
@@ -248,7 +240,6 @@ onBeforeMount(() => {
         </ClientOnly>
       </div>
     </div>
-    <ContactDialog v-model="isOpen" />
     <Transition
       name="fade"
       mode="out-in"
@@ -312,14 +303,6 @@ onBeforeMount(() => {
               px-24px
             >PUBLISH</span>
           </Button>
-          <Button
-            w-full
-            lg="w-fit"
-            inverted-color
-            @click="handleDialog()"
-          >
-            TEST DIALOG
-          </Button>
         </div>
       </div>
     </Transition>
diff --git a/types/project.ts b/types/project.ts
index fabb1b7..e545427 100644
--- a/types/project.ts
+++ b/types/project.ts
@@ -28,6 +28,7 @@ export interface Project {
   product_launch_day?: string
   project_phase?: string
   sunset: boolean
+  nickname?: string
   technology?: {
     type: string
     name?: string