mirror of
https://github.com/HangarMC/Hangar.git
synced 2024-12-21 06:51:19 +08:00
finish up project creation
This commit is contained in:
MiniDigger | Martin
parent
8b95ffe7e0
commit
718c68ea90
@ -57,7 +57,7 @@ once QA has passed, the checkboxes can be removed and the page can be ~~striked
|
||||
- index
|
||||
- [x] fetch
|
||||
- [x] layout
|
||||
- [ ] functionality (search without reloading the page, sorting, licence and version filter)
|
||||
- [ ] functionality (sorting, licence and version filter)
|
||||
- [x] design
|
||||
- [ ] qa
|
||||
- linkout
|
||||
@ -70,7 +70,7 @@ once QA has passed, the checkboxes can be removed and the page can be ~~striked
|
||||
- [x] fetch
|
||||
- [x] layout
|
||||
- [x] functionality
|
||||
- [ ] design
|
||||
- [x] design
|
||||
- [ ] qa
|
||||
- notifications
|
||||
- [x] fetch
|
||||
|
||||
@ -16,9 +16,10 @@ const dum = computed(() => props);
|
||||
watch(dum, fetch, { deep: true });
|
||||
|
||||
const renderedMarkdown = ref<string>("");
|
||||
const loading = ref<boolean>(true);
|
||||
const loading = ref<boolean>(false);
|
||||
async function fetch() {
|
||||
if (!props.raw) return;
|
||||
loading.value = true;
|
||||
renderedMarkdown.value = await useInternalApi<string>("pages/render", false, "post", {
|
||||
content: props.raw,
|
||||
}).catch<any>((e) => handleRequestError(e, ctx, i18n));
|
||||
|
||||
@ -1,17 +1,21 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed } from "vue";
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
to?: string | object;
|
||||
href?: string;
|
||||
activeUnderline?: boolean;
|
||||
disabled?: boolean;
|
||||
}>(),
|
||||
{
|
||||
activeUnderline: false,
|
||||
to: undefined,
|
||||
href: undefined,
|
||||
disabled: false,
|
||||
}
|
||||
);
|
||||
const classes = "color-primary font-bold hover:(underline)";
|
||||
const classes = computed<string>(() => "font-bold " + (props.disabled ? "color-gray-400 cursor-not-allowed" : "color-primary hover:(underline)"));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed, ComputedRef, Ref, ref } from "vue";
|
||||
import { computed, Ref } from "vue";
|
||||
import Link from "~/components/design/Link.vue";
|
||||
import Card from "~/components/design/Card.vue";
|
||||
import { useSettingsStore } from "~/store/settings";
|
||||
@ -101,12 +101,12 @@ export interface Step {
|
||||
<div v-for="step in steps" :key="step.value">
|
||||
<slot v-if="internalValue === step.value" :name="step.value" />
|
||||
</div>
|
||||
<Button v-if="showBack" :disabled="disableBack" size="medium" class="mt-6 mr-2" @click="back">{{
|
||||
i18n.t(buttonLangKey + activeStepIndex + ".back")
|
||||
}}</Button>
|
||||
<Button v-if="showNext" :disabled="disableNext" size="medium" class="mt-6" @click="next">{{
|
||||
i18n.t(buttonLangKey + activeStepIndex + ".continue")
|
||||
}}</Button>
|
||||
<Button v-if="showBack" :disabled="disableBack" size="medium" class="mt-6 mr-2" @click="back">
|
||||
{{ i18n.t(buttonLangKey + activeStepIndex + ".back") }}
|
||||
</Button>
|
||||
<Button v-if="showNext" :disabled="disableNext" size="medium" class="mt-6" @click="next">
|
||||
{{ i18n.t(buttonLangKey + activeStepIndex + ".continue") }}
|
||||
</Button>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -13,20 +13,44 @@ const internalValue = computed({
|
||||
export interface Tab {
|
||||
value: string;
|
||||
header: string;
|
||||
show?: () => boolean;
|
||||
disable?: () => boolean;
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
modelValue: string;
|
||||
tabs: Tab[];
|
||||
}>();
|
||||
vertical: boolean;
|
||||
}>(),
|
||||
{
|
||||
vertical: true,
|
||||
}
|
||||
);
|
||||
|
||||
function selectTab(tab: Tab) {
|
||||
if (!tab.disable || !tab.disable()) {
|
||||
internalValue.value = tab.value;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col <md:space-y-2 md:(flex-row space-x-2)">
|
||||
<div class="min-w-12ch">
|
||||
<ul class="flex flex-row <md:space-x-2 md:(flex-col space-y-2)">
|
||||
<li v-for="tab in tabs" :key="tab.value">
|
||||
<Link :class="internalValue == tab.value ? 'underline' : '!font-semibold'" :href="'#' + tab.value" @click.prevent="internalValue = tab.value">
|
||||
<div :class="{ 'flex flex-col <md:space-y-2 md:(flex-row space-x-2)': vertical, 'flex flex-row flex-wrap': !vertical }">
|
||||
<div :class="{ 'min-w-13ch': vertical, 'basis-full': !vertical }">
|
||||
<ul :class="{ 'flex flex-row <md:space-x-2 md:(flex-col space-y-2)': vertical, 'flex flex-row gap-2 mb-2': !vertical }">
|
||||
<li
|
||||
v-for="tab in tabs"
|
||||
:key="tab.value"
|
||||
:class="'rounded p-2 ' + (internalValue === tab.value ? 'bg-gray-200 dark:(bg-black)' : 'bg-gray-300 dark:(bg-gray-600)')"
|
||||
>
|
||||
<Link
|
||||
v-if="!tab.show || tab.show()"
|
||||
:disabled="tab.disable && tab.disable()"
|
||||
:class="internalValue === tab.value ? 'underline' : '!font-semibold'"
|
||||
:href="'#' + tab.value"
|
||||
@click.prevent="selectTab(tab)"
|
||||
>
|
||||
{{ tab.header }}
|
||||
</Link>
|
||||
</li>
|
||||
|
||||
@ -15,7 +15,6 @@ const selected = computed(() => {
|
||||
return routerPath == props.to;
|
||||
});
|
||||
|
||||
// TODO hover effect
|
||||
const clazz = computed(() => {
|
||||
return (
|
||||
"px-2 py-1 inline-flex items-center transition duration-300 border-b-2 border-transparent hover:border-[#004ee9] " +
|
||||
|
||||
@ -189,6 +189,7 @@
|
||||
},
|
||||
"step2": {
|
||||
"title": "Basic Settings",
|
||||
"description": "Please provide the basic settings for this project",
|
||||
"continue": "Continue",
|
||||
"back": "Back",
|
||||
"userSelect": "Create as...",
|
||||
@ -198,6 +199,7 @@
|
||||
},
|
||||
"step3": {
|
||||
"title": "Additional Settings",
|
||||
"description": "You can provide these (optional) additional settings. You can change them in your project settings at any time.",
|
||||
"continue": "Continue",
|
||||
"back": "Back",
|
||||
"optional": "Optional",
|
||||
@ -215,6 +217,7 @@
|
||||
},
|
||||
"step4": {
|
||||
"title": "Import from Spigot",
|
||||
"description": "You can optionally use this step to convert your existing description for your project from spigot. If you safely skip this and design your description from scratch once you got your project created.",
|
||||
"continue": "Create",
|
||||
"back": "Back",
|
||||
"optional": "Optional",
|
||||
|
||||
@ -68,19 +68,24 @@ const isCustomLicense = computed(() => form.value.settings.license.type === "(cu
|
||||
|
||||
const selectedStep = ref("tos");
|
||||
const steps: Step[] = [
|
||||
{ value: "tos", header: i18n.t("project.new.step1.title") },
|
||||
{ value: "tos", header: i18n.t("project.new.step1.title"), showBack: () => false },
|
||||
{ value: "basic", header: i18n.t("project.new.step2.title") },
|
||||
{ value: "additional", header: i18n.t("project.new.step3.title") },
|
||||
{ value: "import", header: i18n.t("project.new.step4.title") },
|
||||
// TODO buttons need to be disabled here
|
||||
{ value: "finishing", header: i18n.t("project.new.step5.title") },
|
||||
{
|
||||
value: "import",
|
||||
header: i18n.t("project.new.step4.title"),
|
||||
beforeNext: () => {
|
||||
createProject();
|
||||
return true;
|
||||
},
|
||||
},
|
||||
{ value: "finishing", header: i18n.t("project.new.step5.title"), showNext: () => false, showBack: () => false },
|
||||
];
|
||||
|
||||
const selectBBCodeTab = ref("convert");
|
||||
const bbCodeTabs: Tab[] = [
|
||||
{ value: "convert", header: i18n.t("project.new.step4.convert") },
|
||||
// TODO tab needs to be disabled if no markdown was entered
|
||||
{ value: "preview", header: i18n.t("project.new.step4.preview") },
|
||||
{ value: "preview", header: i18n.t("project.new.step4.preview"), disable: () => !converter.value.markdown },
|
||||
{ value: "tutorial", header: i18n.t("project.new.step4.tutorial") },
|
||||
];
|
||||
|
||||
@ -126,7 +131,6 @@ function createProject() {
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- todo: icon -->
|
||||
<template>
|
||||
<Steps v-model="selectedStep" :steps="steps" button-lang-key="project.new.step">
|
||||
<template #tos>
|
||||
@ -135,8 +139,7 @@ function createProject() {
|
||||
</template>
|
||||
<template #basic>
|
||||
<div class="flex flex-wrap">
|
||||
<!-- todo i18n -->
|
||||
<p class="basis-full mb-4">Please provide the basic settings for this project</p>
|
||||
<p class="basis-full mb-4">{{ i18n.t("project.new.step2.description") }}</p>
|
||||
<div class="basis-full md:basis-6/12">
|
||||
<InputSelect
|
||||
v-model="form.ownerId"
|
||||
@ -173,9 +176,8 @@ function createProject() {
|
||||
</div>
|
||||
</template>
|
||||
<template #additional>
|
||||
<!-- todo i18n -->
|
||||
<p>You can provide these additional settings. You can change them in your project settings at any time.</p>
|
||||
<div class="text-lg mt-4">
|
||||
<p>{{ i18n.t("project.new.step3.description") }}</p>
|
||||
<div class="text-lg mt-4 flex gap-2 items-center">
|
||||
<IconMdiLink />
|
||||
{{ i18n.t("project.new.step3.links") }}
|
||||
<hr />
|
||||
@ -186,7 +188,7 @@ function createProject() {
|
||||
<div class="basis-full mt-4"><InputText v-model.trim="form.settings.source" :label="i18n.t('project.new.step3.source')" :rules="[url()]" /></div>
|
||||
<div class="basis-full mt-4"><InputText v-model.trim="form.settings.support" :label="i18n.t('project.new.step3.support')" :rules="[url()]" /></div>
|
||||
</div>
|
||||
<div class="text-lg mt-6">
|
||||
<div class="text-lg mt-6 flex gap-2 items-center">
|
||||
<IconMdiLicense />
|
||||
{{ i18n.t("project.new.step3.license") }}
|
||||
<hr />
|
||||
@ -207,7 +209,7 @@ function createProject() {
|
||||
<InputText v-model.trim="form.settings.license.url" :label="i18n.t('project.new.step3.url')" :rules="[url()]" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-lg mt-6">
|
||||
<div class="text-lg mt-6 flex gap-2 items-center">
|
||||
<IconMdiCloudSearch />
|
||||
{{ i18n.t("project.new.step3.seo") }}
|
||||
<hr />
|
||||
@ -224,12 +226,8 @@ function createProject() {
|
||||
</div>
|
||||
</template>
|
||||
<template #import>
|
||||
<p class="mb-4">
|
||||
You can optionally use this step to convert your existing description for your project form spigot. If you savely skip this and desing you rdescription
|
||||
from scratch once you got your project created.
|
||||
</p>
|
||||
<!-- todo vertical tabs -->
|
||||
<Tabs v-model="selectBBCodeTab" :tabs="bbCodeTabs">
|
||||
<p class="mb-4">{{ i18n.t("project.new.step4.description") }}</p>
|
||||
<Tabs v-model="selectBBCodeTab" :tabs="bbCodeTabs" :vertical="false">
|
||||
<template #convert>
|
||||
<div class="flex flex-wrap">
|
||||
<div class="basis-full"><InputTextarea v-model="converter.bbCode" :rows="6" :label="i18n.t('project.new.step4.convertLabels.bbCode')" /></div>
|
||||
@ -263,7 +261,6 @@ function createProject() {
|
||||
<template #finishing>
|
||||
<div class="flex flex-col">
|
||||
<div v-if="projectLoading" class="text-center my-8"><Spinner class="stroke-red-500" :diameter="90" :stroke="6" /></div>
|
||||
<div v-if="projectLoading" class="text-center"><Button @click="createProject">button go brrrr</Button></div>
|
||||
<template v-else-if="projectCreationErrors && projectCreationErrors.length > 0">
|
||||
<div class="text-lg mt-2">
|
||||
{{ i18n.t("project.new.error.create") }}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user