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>
|
<template>
|
||||||
<div mt-24px>
|
<div mt-24px>
|
||||||
<ClientOnly>
|
<ProjectCreateComponentsSelectChips
|
||||||
<ProjectCreateComponentsSelectChips
|
v-model="categories"
|
||||||
v-model="categories"
|
label="Categories"
|
||||||
label="Categories"
|
required
|
||||||
required
|
:options="categoriesData?.map(cat => ({ label: cat.name, value: cat.id }))"
|
||||||
:options="categoriesData?.map(cat => ({ label: cat.name, value: cat.id }))"
|
placeholder="Add category"
|
||||||
placeholder="Add category"
|
hint="Choose categories that fits your project"
|
||||||
hint="Choose categories that fits your project"
|
:error="categoriesError"
|
||||||
:error="categoriesError"
|
/>
|
||||||
/>
|
<ProjectCreateComponentsSelectChips
|
||||||
<ProjectCreateComponentsSelectChips
|
v-model="usecases"
|
||||||
v-model="usecases"
|
label="Use-cases"
|
||||||
label="Use-cases"
|
required
|
||||||
required
|
:options="usecasesData?.map(uc => ({ label: uc.name, value: uc.id }))"
|
||||||
:options="usecasesData?.map(uc => ({ label: uc.name, value: uc.id }))"
|
placeholder="Add use-case"
|
||||||
placeholder="Add use-case"
|
hint="What can be your project used for?"
|
||||||
hint="What can be your project used for?"
|
:error="usecasesError"
|
||||||
:error="usecasesError"
|
/>
|
||||||
/>
|
<ProjectCreateComponentsSelectChips
|
||||||
<ProjectCreateComponentsSelectChips
|
v-model="ecosystems"
|
||||||
v-model="ecosystems"
|
label="Ecosystems"
|
||||||
label="Ecosystems"
|
required
|
||||||
required
|
:options="ecosystemsData?.map(ec => ({ label: ec.name, value: ec.id }))"
|
||||||
:options="ecosystemsData?.map(ec => ({ label: ec.name, value: ec.id }))"
|
placeholder="Add ecosystem"
|
||||||
placeholder="Add ecosystem"
|
hint="Choose ecosystems that is your project part of"
|
||||||
hint="Choose ecosystems that is your project part of"
|
:error="ecosystemsError"
|
||||||
:error="ecosystemsError"
|
/>
|
||||||
/>
|
|
||||||
</ClientOnly>
|
|
||||||
<ProjectCreateComponentsInput
|
<ProjectCreateComponentsInput
|
||||||
v-model="description"
|
v-model="description"
|
||||||
lg="w-1/2"
|
lg="w-1/2"
|
||||||
|
|
|
||||||
|
|
@ -31,15 +31,15 @@ if (!project.value) {
|
||||||
}
|
}
|
||||||
|
|
||||||
const tabs = reactive([
|
const tabs = reactive([
|
||||||
{ label: 'Basic Info', value: 'basic_info', component: ProjectCreateCategoriesBasicInfo },
|
{ label: 'Basic Info', value: 'basic_info', component: markRaw(ProjectCreateCategoriesBasicInfo) },
|
||||||
{ label: 'Assets', value: 'assets', component: ProjectCreateCategoriesAssets },
|
{ label: 'Assets', value: 'assets', component: markRaw(ProjectCreateCategoriesAssets) },
|
||||||
{ label: 'Links', value: 'links', component: ProjectCreateCategoriesLinks },
|
{ label: 'Links', value: 'links', component: markRaw(ProjectCreateCategoriesLinks) },
|
||||||
{ label: 'Technology', value: 'technology', component: ProjectCreateCategoriesTechnology },
|
{ label: 'Technology', value: 'technology', component: markRaw(ProjectCreateCategoriesTechnology) },
|
||||||
{ label: 'Privacy', value: 'privacy', component: ProjectCreateCategoriesPrivacy },
|
{ label: 'Privacy', value: 'privacy', component: markRaw(ProjectCreateCategoriesPrivacy) },
|
||||||
{ label: 'Security', value: 'security', component: ProjectCreateCategoriesSecurity },
|
{ label: 'Security', value: 'security', component: markRaw(ProjectCreateCategoriesSecurity) },
|
||||||
{ label: 'Team', value: 'team', component: ProjectCreateCategoriesTeam },
|
{ label: 'Team', value: 'team', component: markRaw(ProjectCreateCategoriesTeam) },
|
||||||
{ label: 'Funding', value: 'funding', component: ProjectCreateCategoriesFunding },
|
{ label: 'Funding', value: 'funding', component: markRaw(ProjectCreateCategoriesFunding) },
|
||||||
{ label: 'History', value: 'history', component: ProjectCreateCategoriesHistory },
|
{ label: 'History', value: 'history', component: markRaw(ProjectCreateCategoriesHistory) },
|
||||||
])
|
])
|
||||||
|
|
||||||
const selectedTab = ref(tabs[0].value)
|
const selectedTab = ref(tabs[0].value)
|
||||||
|
|
@ -73,7 +73,7 @@ const projectNameInput = ref<HTMLInputElement | null>(null)
|
||||||
function useProjectName() {
|
function useProjectName() {
|
||||||
const isEditing = ref(false)
|
const isEditing = ref(false)
|
||||||
// const name = ref('Untitled')
|
// 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'
|
name.value = project.value?.name || 'Untitled'
|
||||||
|
|
||||||
function toggleEdit() {
|
function toggleEdit() {
|
||||||
|
|
@ -143,6 +143,7 @@ function jumpTo(tab: string) {
|
||||||
|
|
||||||
selectedTab.value = tab
|
selectedTab.value = tab
|
||||||
}
|
}
|
||||||
|
const transitionDone = ref(false)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -306,26 +307,44 @@ function jumpTo(tab: string) {
|
||||||
mb-170px
|
mb-170px
|
||||||
lg="mb-55px"
|
lg="mb-55px"
|
||||||
>
|
>
|
||||||
<component
|
<ClientOnly>
|
||||||
:is="getCurrentComponent()"
|
<Transition
|
||||||
v-if="project"
|
v-if="!transitionDone"
|
||||||
ref="currentComponent"
|
name="fade"
|
||||||
:project="project"
|
mode="out-in"
|
||||||
w-full
|
appear
|
||||||
flex
|
@after-enter="transitionDone = true"
|
||||||
flex-col
|
>
|
||||||
gap-24px
|
<component
|
||||||
/>
|
:is="getCurrentComponent()"
|
||||||
<Button
|
ref="currentComponent"
|
||||||
v-if="selectedTab !== tabs[tabs.length - 1].value"
|
:project="project"
|
||||||
class="hidden!"
|
w-full
|
||||||
mt-48px
|
flex
|
||||||
lg="w-fit flex!"
|
flex-col
|
||||||
border
|
gap-24px
|
||||||
@click="next()"
|
/>
|
||||||
>
|
</Transition>
|
||||||
<span px-24px>NEXT SECTION</span>
|
<component
|
||||||
</Button>
|
: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>
|
</div>
|
||||||
<div
|
<div
|
||||||
|
|
@ -388,3 +407,15 @@ function jumpTo(tab: string) {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</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 { project, isPublishing } = storeToRefs(useProject())
|
||||||
|
|
||||||
const tabs = reactive([
|
const tabs = reactive([
|
||||||
{ label: 'Basic Info', value: 'basic_info', component: ProjectCreateCategoriesBasicInfo },
|
{ label: 'Basic Info', value: 'basic_info', component: markRaw(ProjectCreateCategoriesBasicInfo) },
|
||||||
{ label: 'Assets', value: 'assets', component: ProjectCreateCategoriesAssets },
|
{ label: 'Assets', value: 'assets', component: markRaw(ProjectCreateCategoriesAssets) },
|
||||||
{ label: 'Links', value: 'links', component: ProjectCreateCategoriesLinks },
|
{ label: 'Links', value: 'links', component: markRaw(ProjectCreateCategoriesLinks) },
|
||||||
{ label: 'Technology', value: 'technology', component: ProjectCreateCategoriesTechnology },
|
{ label: 'Technology', value: 'technology', component: markRaw(ProjectCreateCategoriesTechnology) },
|
||||||
{ label: 'Privacy', value: 'privacy', component: ProjectCreateCategoriesPrivacy },
|
{ label: 'Privacy', value: 'privacy', component: markRaw(ProjectCreateCategoriesPrivacy) },
|
||||||
{ label: 'Security', value: 'security', component: ProjectCreateCategoriesSecurity },
|
{ label: 'Security', value: 'security', component: markRaw(ProjectCreateCategoriesSecurity) },
|
||||||
{ label: 'Team', value: 'team', component: ProjectCreateCategoriesTeam },
|
{ label: 'Team', value: 'team', component: markRaw(ProjectCreateCategoriesTeam) },
|
||||||
{ label: 'Funding', value: 'funding', component: ProjectCreateCategoriesFunding },
|
{ label: 'Funding', value: 'funding', component: markRaw(ProjectCreateCategoriesFunding) },
|
||||||
{ label: 'History', value: 'history', component: ProjectCreateCategoriesHistory },
|
{ label: 'History', value: 'history', component: markRaw(ProjectCreateCategoriesHistory) },
|
||||||
])
|
])
|
||||||
|
|
||||||
const selectedTab = ref(tabs[0].value)
|
const selectedTab = ref(tabs[0].value)
|
||||||
|
|
@ -60,7 +60,7 @@ const projectNameInput = ref<HTMLInputElement | null>(null)
|
||||||
function useProjectName() {
|
function useProjectName() {
|
||||||
const isEditing = ref(false)
|
const isEditing = ref(false)
|
||||||
// const name = ref('Untitled')
|
// 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'
|
name.value = project.value?.name || 'Untitled'
|
||||||
|
|
||||||
function toggleEdit() {
|
function toggleEdit() {
|
||||||
|
|
@ -127,6 +127,7 @@ function jumpTo(tab: string) {
|
||||||
|
|
||||||
selectedTab.value = tab
|
selectedTab.value = tab
|
||||||
}
|
}
|
||||||
|
const transitionDone = ref(false)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -196,6 +197,7 @@ function jumpTo(tab: string) {
|
||||||
flex
|
flex
|
||||||
items-center
|
items-center
|
||||||
gap-12px
|
gap-12px
|
||||||
|
relative
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
v-if="isEditing"
|
v-if="isEditing"
|
||||||
|
|
@ -234,6 +236,16 @@ function jumpTo(tab: string) {
|
||||||
i-heroicons-solid-pencil
|
i-heroicons-solid-pencil
|
||||||
/>
|
/>
|
||||||
</button>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -266,16 +278,6 @@ function jumpTo(tab: string) {
|
||||||
>
|
>
|
||||||
{{ tab.label }}
|
{{ tab.label }}
|
||||||
</button>
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -290,24 +292,45 @@ function jumpTo(tab: string) {
|
||||||
mb-170px
|
mb-170px
|
||||||
lg="mb-55px"
|
lg="mb-55px"
|
||||||
>
|
>
|
||||||
<component
|
<ClientOnly>
|
||||||
:is="getCurrentComponent()"
|
<Transition
|
||||||
ref="currentComponent"
|
v-if="!transitionDone"
|
||||||
w-full
|
name="fade"
|
||||||
flex
|
mode="out-in"
|
||||||
flex-col
|
appear
|
||||||
gap-24px
|
@after-enter="transitionDone = true"
|
||||||
/>
|
>
|
||||||
<Button
|
<component
|
||||||
v-if="selectedTab !== tabs[tabs.length - 1].value"
|
:is="getCurrentComponent()"
|
||||||
class="hidden!"
|
ref="currentComponent"
|
||||||
mt-48px
|
:project="project"
|
||||||
lg="w-fit flex!"
|
w-full
|
||||||
border
|
flex
|
||||||
@click="next()"
|
flex-col
|
||||||
>
|
gap-24px
|
||||||
<span px-24px>NEXT SECTION</span>
|
/>
|
||||||
</Button>
|
</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>
|
</div>
|
||||||
<div
|
<div
|
||||||
|
|
@ -370,3 +393,15 @@ function jumpTo(tab: string) {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</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