Skip to content

Commit

Permalink
refactor: promote add instance dialog to top & add param
Browse files Browse the repository at this point in the history
  • Loading branch information
ci010 committed Jan 5, 2022
1 parent 7ee63f0 commit a9bd593
Show file tree
Hide file tree
Showing 21 changed files with 220 additions and 63 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,17 @@
step="2"
>{{ $t('profile.baseSetting') }}</v-stepper-step>
<v-divider />
<!-- <v-stepper-step :complete="step > 2" step="2">{{ $t('profile.templateSetting.importing') }}</v-stepper-step> -->
<v-stepper-step
:editable="currentTemplate && currentTemplate.type === 'modpack'"
:complete="step > 2"
step="3"
>{{ $t('profile.templateSetting.preview') }}</v-stepper-step>
</v-stepper-header>

<v-stepper-items>
<v-stepper-content step="1" style="overflow: auto; max-height: 450px;">
<template-content
:preset="template"
:preset="presetTemplate"
:value="currentTemplate"
:on-activated="onActivated"
:on-deactivated="onDeactivated"
Expand Down Expand Up @@ -51,41 +55,55 @@
@quit="quit"
/>
</v-stepper-content>
<v-stepper-content step="3" class="overflow-auto max-h-[70vh]">
<stepper-modpack-content
v-if="currentTemplate && currentTemplate.type === 'modpack'"
:modpack="currentTemplate"
:shown="isModpackContentShown"
/>
</v-stepper-content>
</v-stepper-items>
</v-stepper>
</v-dialog>
</template>

<script lang=ts>
import { reactive, toRefs, computed, watch, defineComponent, ref, Ref, provide } from '@vue/composition-api'
import { computed, defineComponent, InjectionKey, provide, reactive, ref, Ref, toRefs, watch } from '@vue/composition-api'
import AdvanceContent from './StepperAdvanceContent.vue'
import BaseContent from './StepperBaseContent.vue'
import StepperFooter from './StepperFooter.vue'
import StepperModpackContent from './StepperModpackContent.vue'
import TemplateContent, { InstanceTemplate, ModpackTemplate } from './StepperTemplateContent.vue'
import {
useCurseforgeImport,
useInstanceCreation,
useInstances,
useRouter,
useRouter
} from '/@/hooks'
import { DialogKey, useDialog } from '/@/windows/main/composables'
import { InstanceData } from '/@shared/entities/instance.schema'
import { JavaRecord } from '/@shared/entities/java'
import { optional, withDefault } from '/@/util/props'
import { CreateOptionKey } from './InstanceCreationStepper/creation'
import StepperFooter from './StepperFooter.vue'
import AdvanceContent from './StepperAdvanceContent.vue'
import BaseContent from './StepperBaseContent.vue'
import TemplateContent, { InstanceTemplate, ModpackTemplate } from './StepperTemplateContent.vue'
import { useDialog } from '/@/windows/main/composables'
type ToRefs<T> = {
[K in keyof T]: Ref<T[K]>
}
export const CreateOptionKey: InjectionKey<ToRefs<InstanceData>> = Symbol('CreateOption')
export const AddInstanceDialogKey: DialogKey<string> = 'add-instance-dialog'
export default defineComponent({
components: {
StepperFooter,
BaseContent,
AdvanceContent,
TemplateContent,
StepperModpackContent
},
props: {
show: withDefault(Boolean, () => false),
template: optional(String),
},
setup(props, context) {
const { isShown } = useDialog('add-instance-dialog')
const { isShown, parameter } = useDialog(AddInstanceDialogKey)
const { create, reset, ...creationData } = useInstanceCreation()
const router = useRouter()
const { mountInstance } = useInstances()
Expand All @@ -102,6 +120,7 @@ export default defineComponent({
const currentTemplate: Ref<InstanceTemplate | ModpackTemplate | undefined> = ref(undefined)
const ready = computed(() => data.valid)
const isModpackContentShown = computed(() => data.step === 3)
let activateRef = () => { }
let deactivatedRef = () => { }
Expand Down Expand Up @@ -140,27 +159,30 @@ export default defineComponent({
await new Promise((resolve) => {
setTimeout(resolve, 1000)
})
isShown.value = false
} finally {
data.creating = false
}
}
watch(() => props.show, (v) => {
watch(isShown, (v) => {
if (!v) {
deactivatedRef()
return
}
reset()
activate()
data.step = 2
data.creating = false
data.valid = true
activate()
})
const presetTemplate = computed(() => isShown.value ? parameter.value : undefined)
return {
...toRefs(data),
isModpackContentShown,
...creationData,
isShown,
presetTemplate,
currentTemplate,
onActivated,
onDeactivated,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,10 @@
</v-form>
</v-list-tile>
<v-list-tile v-if="showMinecraft">
<v-list-tile-action>
<img :src="minecraftPng" width="40">
<!-- <v-checkbox /> -->
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>
{{
Expand Down Expand Up @@ -70,7 +74,8 @@
</v-list-tile>
<v-list-tile>
<v-list-tile-action>
<v-checkbox />
<img :src="forgePng" width="40">
<!-- <v-checkbox /> -->
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>
Expand Down Expand Up @@ -102,8 +107,9 @@
</v-list-tile>
<v-list-tile>
<v-list-tile-action>
<img :src="fabricPng" width="40">
<!-- <forge-icon></forge-icon> -->
<v-checkbox />
<!-- <v-checkbox /> -->
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>Fabric</v-list-tile-title>
Expand Down Expand Up @@ -137,10 +143,13 @@ import { defineComponent, inject } from '@vue/composition-api'
import FabricVersionMenu from './FabricVersionMenu.vue'
import ForgeVersionMenu from './ForgeVersionMenu.vue'
import MinecraftVersionMenu from './MinecraftVersionMenu.vue'
import { CreateOptionKey } from './InstanceCreationStepper/creation'
import { CreateOptionKey } from './AddInstanceDialog.vue'
import { useJava } from '/@/hooks'
import { required, withDefault } from '/@/util/props'
import { JavaRecord } from '/@shared/entities/java'
import forgePng from '/@/assets/forge.png'
import minecraftPng from '/@/assets/minecraft.png'
import fabricPng from '/@/assets/fabric.png'
export default defineComponent({
Expand Down Expand Up @@ -196,6 +205,9 @@ export default defineComponent({
onSelectMinecraft,
onSelectFabric,
onSelectForge,
forgePng,
minecraftPng,
fabricPng,
}
},
})
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
<script lang=ts>
import { computed, defineComponent, inject } from '@vue/composition-api'
import MinecraftVersionMenu from './MinecraftVersionMenu.vue'
import { CreateOptionKey } from './InstanceCreationStepper/creation'
import { CreateOptionKey } from './AddInstanceDialog.vue'
import { useI18n } from '/@/hooks'
import { required } from '/@/util/props'
import FabricVersionMenu from './FabricVersionMenu.vue'
Expand Down
45 changes: 45 additions & 0 deletions src/renderer/windows/main/components/StepperModpackContent.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<template>
<div class="flex flex-col h-full overflow-auto">
<v-list two-line>
<StepperModpackContentFile
v-for="file in curseforgeMetadata.files"
:file-id="file.fileID"
:project-id="file.projectID"
/>
</v-list>
</div>
</template>
<script lang="ts">
import { computed, defineComponent, watch } from '@vue/composition-api';
import { optional, required } from '/@/util/props';
import type { InstanceTemplate, ModpackTemplate } from './StepperTemplateContent.vue'
import { useService } from '/@/hooks';
import { CurseForgeServiceKey } from '/@shared/services/CurseForgeService';
import { useRefreshable } from '/@/hooks/useRefreshable';
import { CurseforgeModpackManifest } from '/@shared/entities/curseforge';
import StepperModpackContentFile from './StepperModpackContentFile.vue';
export default defineComponent({
props: {
modpack: optional<ModpackTemplate>(Object),
shown: required(Boolean),
},
setup(props) {
const { fetchProject } = useService(CurseForgeServiceKey);
const curseforgeMetadata = computed(() => props.modpack?.source.metadata as CurseforgeModpackManifest);
watch(() => props.shown, (isShown) => {
if (isShown) {
}
});
return {
curseforgeMetadata
};
},
components: { StepperModpackContentFile }
})
</script>
<style scoped>
.v-list {
background: transparent;
}
</style>
64 changes: 64 additions & 0 deletions src/renderer/windows/main/components/StepperModpackContentFile.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
<template>
<v-list-tile avatar @click="onClick">
<v-list-tile-avatar>
<v-img :src="image">
<template v-slot:placeholder>
<v-layout fill-height align-center justify-center ma-0>
<v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
</v-layout>
</template>
</v-img>
</v-list-tile-avatar>

<v-list-tile-content>
<v-list-tile-title>{{ project ? project.name : '' }}</v-list-tile-title>
<v-list-tile-sub-title>
<span
v-if="project ? project.authors[0].name : ''"
class="text--primary"
>{{ project ? project.authors[0].name : '' }}</span>
{{ project ? project.summary : '' }}
</v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile>
</template>
<script lang="ts">
import { computed, defineComponent, watch, onMounted, Ref, ref } from '@vue/composition-api';
import { optional, required } from '/@/util/props';
import type { InstanceTemplate, ModpackTemplate } from './StepperTemplateContent.vue'
import { useBaseService, useService } from '/@/hooks';
import { CurseForgeServiceKey } from '/@shared/services/CurseForgeService';
import { useRefreshable } from '/@/hooks/useRefreshable';
import { CurseforgeModpackManifest } from '/@shared/entities/curseforge';
import type { AddonInfo } from '@xmcl/curseforge';
export default defineComponent({
props: {
projectId: required(Number),
fileId: required(Number),
},
setup(props) {
const { fetchProject } = useService(CurseForgeServiceKey)
const { openInBrowser } = useBaseService()
onMounted(() => {
refresh()
})
const project: Ref<AddonInfo | undefined> = ref(undefined)
const image = computed(() => project.value?.attachments[0] ? project.value.attachments[0].thumbnailUrl : '')
const { refresh, refreshing } = useRefreshable(async () => {
const result = await fetchProject(props.projectId)
project.value = result
})
function onClick() {
if (project.value?.websiteUrl) {
openInBrowser(project.value.websiteUrl)
}
}
return {
project,
image,
onClick,
}
},
})
</script>
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,8 @@
</template>

<script lang=ts>
import { computed, defineComponent, inject, onUnmounted, ref } from '@vue/composition-api'
import { CreateOptionKey } from './InstanceCreationStepper/creation'
import { computed, defineComponent, inject, onUnmounted, ref, watch } from '@vue/composition-api'
import { CreateOptionKey } from './AddInstanceDialog.vue'
import {
useI18n,
useInstanceTemplates
Expand Down Expand Up @@ -210,15 +210,18 @@ export default defineComponent({
context.emit('select', template)
}
const searchTextRef = ref(null)
props.onActivated(() => {
if (props.value) {
onUse(props.value)
} else if (props.preset) {
watch([computed(() => props.preset), templates], () => {
if (props.preset) {
const preset = templates.value.find(t => t.path === props.preset)
if (preset) {
onUse(preset)
}
}
})
props.onActivated(() => {
if (props.value) {
onUse(props.value)
}
toggles.unshift(() => {
if (searchTextRef.value) {
searchTextRef.value.focus()
Expand All @@ -227,7 +230,6 @@ export default defineComponent({
})
})
props.onDeactivated(() => {
console.log('deactivated')
toggles.shift()
})
onUnmounted(() => {
Expand Down
6 changes: 4 additions & 2 deletions src/renderer/windows/main/components/TaskDialogTaskView.vue
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
item-children="children"
>
<template #append="{ item }">
<task-node-status
<TaskDialogNodeStatus
:item="item"
:show-number="hovered[item.id]"
@pause="pause(item)"
Expand All @@ -37,7 +37,7 @@
<span style="max-width: 100px;">{{ item.title }}</span>
<div
style="color: grey; font-size: 12px; font-style: italic; max-width: 300px;"
>{{ item.time }}</div>
>{{ item.time.toLocaleString() }}</div>
<div
style="color: grey; font-size: 12px; font-style: italic; max-width: 300px;"
>{{ item.message || item.from || item.to }}</div>
Expand All @@ -50,10 +50,12 @@

<script lang=ts>
import { defineComponent, reactive, toRefs } from '@vue/composition-api'
import TaskDialogNodeStatus from './TaskDialogNodeStatus.vue'
import { TaskItem } from '/@/entities/task'
import { useTasks } from '/@/hooks'
export default defineComponent({
components: { TaskDialogNodeStatus },
setup() {
const { tasks, pause, resume, cancel } = useTasks()
Expand Down
Loading

0 comments on commit a9bd593

Please sign in to comment.