mirror of
https://github.com/web3privacy/explorer-app.git
synced 2024-10-15 16:46:26 +02:00
refactor: improvements and fixes
This commit is contained in:
DomWane
parent
c59bc96187
commit
e3d81fe567
3 changed files with 161 additions and 97 deletions
|
|
@ -68,35 +68,33 @@ defineExpose({
|
|||
|
||||
<template>
|
||||
<div mt-24px>
|
||||
<ClientOnly>
|
||||
<ProjectCreateComponentsSelectChips
|
||||
v-model="categories"
|
||||
label="Categories"
|
||||
required
|
||||
:options="categoriesData?.map(cat => ({ label: cat.name, value: cat.id }))"
|
||||
placeholder="Add category"
|
||||
hint="Choose categories that fits your project"
|
||||
:error="categoriesError"
|
||||
/>
|
||||
<ProjectCreateComponentsSelectChips
|
||||
v-model="usecases"
|
||||
label="Use-cases"
|
||||
required
|
||||
:options="usecasesData?.map(uc => ({ label: uc.name, value: uc.id }))"
|
||||
placeholder="Add use-case"
|
||||
hint="What can be your project used for?"
|
||||
:error="usecasesError"
|
||||
/>
|
||||
<ProjectCreateComponentsSelectChips
|
||||
v-model="ecosystems"
|
||||
label="Ecosystems"
|
||||
required
|
||||
:options="ecosystemsData?.map(ec => ({ label: ec.name, value: ec.id }))"
|
||||
placeholder="Add ecosystem"
|
||||
hint="Choose ecosystems that is your project part of"
|
||||
:error="ecosystemsError"
|
||||
/>
|
||||
</ClientOnly>
|
||||
<ProjectCreateComponentsSelectChips
|
||||
v-model="categories"
|
||||
label="Categories"
|
||||
required
|
||||
:options="categoriesData?.map(cat => ({ label: cat.name, value: cat.id }))"
|
||||
placeholder="Add category"
|
||||
hint="Choose categories that fits your project"
|
||||
:error="categoriesError"
|
||||
/>
|
||||
<ProjectCreateComponentsSelectChips
|
||||
v-model="usecases"
|
||||
label="Use-cases"
|
||||
required
|
||||
:options="usecasesData?.map(uc => ({ label: uc.name, value: uc.id }))"
|
||||
placeholder="Add use-case"
|
||||
hint="What can be your project used for?"
|
||||
:error="usecasesError"
|
||||
/>
|
||||
<ProjectCreateComponentsSelectChips
|
||||
v-model="ecosystems"
|
||||
label="Ecosystems"
|
||||
required
|
||||
:options="ecosystemsData?.map(ec => ({ label: ec.name, value: ec.id }))"
|
||||
placeholder="Add ecosystem"
|
||||
hint="Choose ecosystems that is your project part of"
|
||||
:error="ecosystemsError"
|
||||
/>
|
||||
<ProjectCreateComponentsInput
|
||||
v-model="description"
|
||||
lg="w-1/2"
|
||||
|
|
|
|||
|
|
@ -31,15 +31,15 @@ if (!project.value) {
|
|||
}
|
||||
|
||||
const tabs = reactive([
|
||||
{ label: 'Basic Info', value: 'basic_info', component: ProjectCreateCategoriesBasicInfo },
|
||||
{ label: 'Assets', value: 'assets', component: ProjectCreateCategoriesAssets },
|
||||
{ label: 'Links', value: 'links', component: ProjectCreateCategoriesLinks },
|
||||
{ label: 'Technology', value: 'technology', component: ProjectCreateCategoriesTechnology },
|
||||
{ label: 'Privacy', value: 'privacy', component: ProjectCreateCategoriesPrivacy },
|
||||
{ label: 'Security', value: 'security', component: ProjectCreateCategoriesSecurity },
|
||||
{ label: 'Team', value: 'team', component: ProjectCreateCategoriesTeam },
|
||||
{ label: 'Funding', value: 'funding', component: ProjectCreateCategoriesFunding },
|
||||
{ label: 'History', value: 'history', component: ProjectCreateCategoriesHistory },
|
||||
{ label: 'Basic Info', value: 'basic_info', component: markRaw(ProjectCreateCategoriesBasicInfo) },
|
||||
{ label: 'Assets', value: 'assets', component: markRaw(ProjectCreateCategoriesAssets) },
|
||||
{ label: 'Links', value: 'links', component: markRaw(ProjectCreateCategoriesLinks) },
|
||||
{ label: 'Technology', value: 'technology', component: markRaw(ProjectCreateCategoriesTechnology) },
|
||||
{ label: 'Privacy', value: 'privacy', component: markRaw(ProjectCreateCategoriesPrivacy) },
|
||||
{ label: 'Security', value: 'security', component: markRaw(ProjectCreateCategoriesSecurity) },
|
||||
{ label: 'Team', value: 'team', component: markRaw(ProjectCreateCategoriesTeam) },
|
||||
{ label: 'Funding', value: 'funding', component: markRaw(ProjectCreateCategoriesFunding) },
|
||||
{ label: 'History', value: 'history', component: markRaw(ProjectCreateCategoriesHistory) },
|
||||
])
|
||||
|
||||
const selectedTab = ref(tabs[0].value)
|
||||
|
|
@ -73,7 +73,7 @@ const projectNameInput = ref<HTMLInputElement | null>(null)
|
|||
function useProjectName() {
|
||||
const isEditing = ref(false)
|
||||
// const name = ref('Untitled')
|
||||
const { value: name, errorMessage: nameError } = useField<string>('name', yup.string().required().notOneOf(['Untitled', 'Undefined']))
|
||||
const { value: name, errorMessage: nameError } = useField<string>('name', yup.string().required().notOneOf(['Untitled', 'Undefined', 'Create', 'create']))
|
||||
name.value = project.value?.name || 'Untitled'
|
||||
|
||||
function toggleEdit() {
|
||||
|
|
@ -143,6 +143,7 @@ function jumpTo(tab: string) {
|
|||
|
||||
selectedTab.value = tab
|
||||
}
|
||||
const transitionDone = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -306,26 +307,44 @@ function jumpTo(tab: string) {
|
|||
mb-170px
|
||||
lg="mb-55px"
|
||||
>
|
||||
<component
|
||||
:is="getCurrentComponent()"
|
||||
v-if="project"
|
||||
ref="currentComponent"
|
||||
:project="project"
|
||||
w-full
|
||||
flex
|
||||
flex-col
|
||||
gap-24px
|
||||
/>
|
||||
<Button
|
||||
v-if="selectedTab !== tabs[tabs.length - 1].value"
|
||||
class="hidden!"
|
||||
mt-48px
|
||||
lg="w-fit flex!"
|
||||
border
|
||||
@click="next()"
|
||||
>
|
||||
<span px-24px>NEXT SECTION</span>
|
||||
</Button>
|
||||
<ClientOnly>
|
||||
<Transition
|
||||
v-if="!transitionDone"
|
||||
name="fade"
|
||||
mode="out-in"
|
||||
appear
|
||||
@after-enter="transitionDone = true"
|
||||
>
|
||||
<component
|
||||
:is="getCurrentComponent()"
|
||||
ref="currentComponent"
|
||||
:project="project"
|
||||
w-full
|
||||
flex
|
||||
flex-col
|
||||
gap-24px
|
||||
/>
|
||||
</Transition>
|
||||
<component
|
||||
:is="getCurrentComponent()"
|
||||
ref="currentComponent"
|
||||
:project="project"
|
||||
w-full
|
||||
flex
|
||||
flex-col
|
||||
gap-24px
|
||||
/>
|
||||
<Button
|
||||
v-if="selectedTab !== tabs[tabs.length - 1].value"
|
||||
class="hidden!"
|
||||
mt-48px
|
||||
lg="w-fit flex!"
|
||||
border
|
||||
@click="next()"
|
||||
>
|
||||
<span px-24px>NEXT SECTION</span>
|
||||
</Button>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -388,3 +407,15 @@ function jumpTo(tab: string) {
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -18,15 +18,15 @@ const { saveProject, publishProject, saveProjectImage } = useProject()
|
|||
const { project, isPublishing } = storeToRefs(useProject())
|
||||
|
||||
const tabs = reactive([
|
||||
{ label: 'Basic Info', value: 'basic_info', component: ProjectCreateCategoriesBasicInfo },
|
||||
{ label: 'Assets', value: 'assets', component: ProjectCreateCategoriesAssets },
|
||||
{ label: 'Links', value: 'links', component: ProjectCreateCategoriesLinks },
|
||||
{ label: 'Technology', value: 'technology', component: ProjectCreateCategoriesTechnology },
|
||||
{ label: 'Privacy', value: 'privacy', component: ProjectCreateCategoriesPrivacy },
|
||||
{ label: 'Security', value: 'security', component: ProjectCreateCategoriesSecurity },
|
||||
{ label: 'Team', value: 'team', component: ProjectCreateCategoriesTeam },
|
||||
{ label: 'Funding', value: 'funding', component: ProjectCreateCategoriesFunding },
|
||||
{ label: 'History', value: 'history', component: ProjectCreateCategoriesHistory },
|
||||
{ label: 'Basic Info', value: 'basic_info', component: markRaw(ProjectCreateCategoriesBasicInfo) },
|
||||
{ label: 'Assets', value: 'assets', component: markRaw(ProjectCreateCategoriesAssets) },
|
||||
{ label: 'Links', value: 'links', component: markRaw(ProjectCreateCategoriesLinks) },
|
||||
{ label: 'Technology', value: 'technology', component: markRaw(ProjectCreateCategoriesTechnology) },
|
||||
{ label: 'Privacy', value: 'privacy', component: markRaw(ProjectCreateCategoriesPrivacy) },
|
||||
{ label: 'Security', value: 'security', component: markRaw(ProjectCreateCategoriesSecurity) },
|
||||
{ label: 'Team', value: 'team', component: markRaw(ProjectCreateCategoriesTeam) },
|
||||
{ label: 'Funding', value: 'funding', component: markRaw(ProjectCreateCategoriesFunding) },
|
||||
{ label: 'History', value: 'history', component: markRaw(ProjectCreateCategoriesHistory) },
|
||||
])
|
||||
|
||||
const selectedTab = ref(tabs[0].value)
|
||||
|
|
@ -60,7 +60,7 @@ const projectNameInput = ref<HTMLInputElement | null>(null)
|
|||
function useProjectName() {
|
||||
const isEditing = ref(false)
|
||||
// const name = ref('Untitled')
|
||||
const { value: name, errorMessage: nameError } = useField<string>('name', yup.string().required().notOneOf(['Untitled', 'Undefined']))
|
||||
const { value: name, errorMessage: nameError } = useField<string>('name', yup.string().required().notOneOf(['Untitled', 'Undefined', 'Create', 'create']))
|
||||
name.value = project.value?.name || 'Untitled'
|
||||
|
||||
function toggleEdit() {
|
||||
|
|
@ -127,6 +127,7 @@ function jumpTo(tab: string) {
|
|||
|
||||
selectedTab.value = tab
|
||||
}
|
||||
const transitionDone = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -196,6 +197,7 @@ function jumpTo(tab: string) {
|
|||
flex
|
||||
items-center
|
||||
gap-12px
|
||||
relative
|
||||
>
|
||||
<input
|
||||
v-if="isEditing"
|
||||
|
|
@ -234,6 +236,16 @@ function jumpTo(tab: string) {
|
|||
i-heroicons-solid-pencil
|
||||
/>
|
||||
</button>
|
||||
<span
|
||||
v-if="nameError"
|
||||
text-nowrap
|
||||
text-app-danger
|
||||
text-12px
|
||||
absolute
|
||||
lg:bottom--24px
|
||||
bottom--16px
|
||||
select-none
|
||||
>Invalid project name</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -266,16 +278,6 @@ function jumpTo(tab: string) {
|
|||
>
|
||||
{{ tab.label }}
|
||||
</button>
|
||||
<span
|
||||
v-if="nameError"
|
||||
text-nowrap
|
||||
text-app-danger
|
||||
text-12px
|
||||
absolute
|
||||
lg:bottom--24px
|
||||
bottom--16px
|
||||
select-none
|
||||
>Invalid project name</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -290,24 +292,45 @@ function jumpTo(tab: string) {
|
|||
mb-170px
|
||||
lg="mb-55px"
|
||||
>
|
||||
<component
|
||||
:is="getCurrentComponent()"
|
||||
ref="currentComponent"
|
||||
w-full
|
||||
flex
|
||||
flex-col
|
||||
gap-24px
|
||||
/>
|
||||
<Button
|
||||
v-if="selectedTab !== tabs[tabs.length - 1].value"
|
||||
class="hidden!"
|
||||
mt-48px
|
||||
lg="w-fit flex!"
|
||||
border
|
||||
@click="next()"
|
||||
>
|
||||
<span px-24px>NEXT SECTION</span>
|
||||
</Button>
|
||||
<ClientOnly>
|
||||
<Transition
|
||||
v-if="!transitionDone"
|
||||
name="fade"
|
||||
mode="out-in"
|
||||
appear
|
||||
@after-enter="transitionDone = true"
|
||||
>
|
||||
<component
|
||||
:is="getCurrentComponent()"
|
||||
ref="currentComponent"
|
||||
:project="project"
|
||||
w-full
|
||||
flex
|
||||
flex-col
|
||||
gap-24px
|
||||
/>
|
||||
</Transition>
|
||||
<component
|
||||
:is="getCurrentComponent()"
|
||||
v-else
|
||||
ref="currentComponent"
|
||||
:project="project"
|
||||
w-full
|
||||
flex
|
||||
flex-col
|
||||
gap-24px
|
||||
/>
|
||||
<Button
|
||||
v-if="selectedTab !== tabs[tabs.length - 1].value"
|
||||
class="hidden!"
|
||||
mt-48px
|
||||
lg="w-fit flex!"
|
||||
border
|
||||
@click="next()"
|
||||
>
|
||||
<span px-24px>NEXT SECTION</span>
|
||||
</Button>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -370,3 +393,15 @@ function jumpTo(tab: string) {
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue