mirror/Hangar
2
0
Fork 0
mirror of https://github.com/HangarMC/Hangar.git synced 2024-12-21 06:51:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

finish up project creation

Browse Source
This commit is contained in:
MiniDigger | Martin 2022-06-15 21:32:56 +02:00
parent 8b95ffe7e0
commit 718c68ea90
8 changed files with 70 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend-new/TODO.md
View File

@ -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

3
frontend-new/src/components/Markdown.vue
View File

@ -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));

6
frontend-new/src/components/design/Link.vue
View File

@ -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>

14
frontend-new/src/components/design/Steps.vue
View File

@ -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>

42
frontend-new/src/components/design/Tabs.vue
View File

@ -13,20 +13,44 @@ const internalValue = computed({
export interface Tab {
value: string;
header: string;
show?: () => boolean;
disable?: () => boolean;
}
const props = defineProps<{
modelValue: string;
tabs: Tab[];
}>();
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>

1
frontend-new/src/components/projects/ProjectNavItem.vue
View File

@ -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] " +

3
frontend-new/src/i18n/locales/en.json
View File

@ -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",

39
frontend-new/src/pages/new.vue
View File

@ -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") }}