forked from didirus/AstralRinth
feat: managing project versions (#4811)
* start modal, working show modal * add stages and implement MultiModalStage component * add project versions context and add file button * implement add files stage * export interfaces * move MultiStageModal to /base * small update to file input * add version types to api-client * wrap version namespace under v3 * implement add details stage fields and loaders component * start create MC versions stage * implement changelog stage and bring width into a per stage concern * implement loader picker with grouping * improve grouping and sorting for loader picker * use chips component * small updaets * fix loader icon color * componentize mc version picker * initial version of shift click to select range * use newModal for markdown editor * start add dependencies stage with search * implement showing mod options in search * componentize modselect and add version/dependency relation select * hide version and dependency relation when no project selected * fix project facet search * implement api-client versions requests * fix search api request facet type to be string * fix new modal outer container scroll * implement add dependency stage * fix parse error * add placeholders * fix types * update dependency row styles * small change * fix the types on manage versions to be correct with labrinth request bodies * fix create version file parts * use draft version ref in flow and implement proper file handlling * use draft version ref for mc versions select * implement reactive modal state and conditionally disabled next buttons * ensure all data is using draftVersion ref * remove shift click to select range since it sucks * fix up add dependencies stage state/types * small fixes * implement adding dependencies connected to api calls and make adding dependencies work * add final create version button config * start create version backend call and bring versions table to project settings * set add files stage width * remove version file upload in project page * small fix * fix create version api call * implement error handling * implement mc versions search * implement showing all mc versions * small fix * implement prefill data * add success notification * add cancel button * add new dropzone file input * run pnpm run fix * add tailwind preset in ui package * polish file version row * fix modal widths * hide added versions when no versions added * implement add loaders stage * implement small chips and small fixes * implement grouping for all releases * implement new all releases grouping * implement better shift click for version select * small fixes * fix search input style * delete versions provider and start project type inferring * implement getting project type * add versions empty state, add folder up icon and pnpm run fix * implement create version in project versions table * update side nav * implement dynamic create version flow depending on project type and detected data * add id to stages and fix calling setStage not working * move added loaded out of loader picker * remove selected and detected MC versions * add loading message to dependency search and fix dependency type always being "required" * fix components in ref * fix width on dropdown * implement toggle all mc versions based on state of last in range * fix mc version text colour * do proper clean up * update loaders to use tag item * update UI to use TagItem and better match styles * handle detected data when setting primary file * add progress bar * hide progress bar for non-progress stage * add loading state on submit * properly cache dependencies projects/versions * pnpm run fix * add dragover show purple border on dropzone file input * better handle added dependencies * move versions in side nav * implement adding file type * fix api body format for file type * implement working edit existing version - working add/remove file - working edit version details * a step towards proper versions refresh * add gallery to project settings * actually figured out refresh versions * move checklist into settings page * remove editing version from version page and add button to versions table in project settings * remove edit and delete buttons from gallery in project page * add empty state messages for project page * add default scroll bar styles * implement support for new file types * remove edit from dropdown in project page versions table * redirect to settings page * move changelog to row with actions * fix overflow on added dependencies * fix redirect * update scroll styles * implement add environment stage (create and modify version not persisting environment to backend) * small style fixes * small spacing fix * small style fixes * add a flag for loading dependency projects * address PR comments * fix modrinth ui imports * use magic keys instead of window.addeventlistener * add spacing in bottom of settings page * useDebounceFn from vue * fix inconsistent stroke * persist scroll through * fix remove button * fix api fields * fix version file dropdown: hide primary option in edit mode and fix setting initial value * fix links in nags * implement skipped field for skipping steps instead of mutating stages array's elements * implement suggested dependencies components * implement suggested dependencies api call * refactor cached get project and get version calls * always hide environments * update links * set scroll in 10ms * update links * fix links pt2 * fix shadow * fix progress bar * dont include mc versions in suggested versions finder * fix text overflow styles * use tooltip * fix change version name api * implement set environment api call * delete unused vue pages * implement detected environment, edit environment step, and fix showing loaders in details for no loader projects * small fix * no loaders project wrong check * fix not having 'minecraft' loader for resource pack * implement updating existing files file type * move add minecraft loader outside try catch * add datapack to have environment * fix being able to select duplicate MC versions * remove datapack project from environment * fix version fetch * fix having detected environment not properly skipping step * only add detected data when primary file changes * fix unknown environemtn * implement gallery and versions have moved admonition * update project page for creator view * small copy update * merge fixes * pnpm run fix * fix checkmark squished * fix version type can be deselected * refactor: DI context + better typed MultistageModal * fix type import * Misc QA fixes * fix allowed file types with no project type * implement new add files stage * fix versiosn header with new pagination * hide buttons when no files for add file stage * use prettier formatter * allow signature file types * add detecting primary file * fix progress bar in firefox * fix environment not correctly being hidden/shown * remove environment missing nag * temp bring back environment page * remove delete version action from project page * replace "continue" next button label with actual next step * fix types * pnpm run fix * move supplementary files alert up and update border radius style on dropzone * copy updates * small update on version num placeholder * update placeholder * make timeout on upload routes 2 minutes * fix lint issues * run pnpm intl:extract --------- Co-authored-by: Calum H. (IMB11) <contact@cal.engineer>
This commit is contained in:
Truman Gao
122
packages/ui/src/components/base/DropzoneFileInput.vue
Normal file
122
packages/ui/src/components/base/DropzoneFileInput.vue
Normal file
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<label
|
||||
:class="[
|
||||
'flex flex-col items-center justify-center cursor-pointer border-2 border-dashed bg-surface-4 text-contrast transition-colors',
|
||||
size === 'small' ? 'p-5' : 'p-12',
|
||||
size === 'small' ? 'gap-2' : 'gap-4',
|
||||
size === 'small' ? 'rounded-2xl' : 'rounded-3xl',
|
||||
isDragOver ? 'border-purple' : 'border-surface-5',
|
||||
]"
|
||||
@dragover.prevent="onDragOver"
|
||||
@dragleave.prevent="onDragLeave"
|
||||
@drop.prevent="handleDrop"
|
||||
>
|
||||
<div
|
||||
:class="[
|
||||
'grid place-content-center text-brand border-brand border-solid border bg-highlight-green',
|
||||
size === 'small' ? 'w-10 h-10' : 'h-14 w-14',
|
||||
size === 'small' ? 'rounded-xl' : 'rounded-2xl',
|
||||
]"
|
||||
>
|
||||
<FolderUpIcon
|
||||
aria-hidden="true"
|
||||
:class="['text-brand', size === 'small' ? 'w-6 h-6' : 'w-8 h-8']"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col items-center justify-center gap-1 text-contrast text-center">
|
||||
<div class="text-contrast font-medium text-pretty">
|
||||
{{ primaryPrompt }}
|
||||
</div>
|
||||
<span class="text-primary text-sm text-pretty">
|
||||
{{ secondaryPrompt }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<input
|
||||
ref="fileInput"
|
||||
type="file"
|
||||
:multiple="multiple"
|
||||
:accept="accept"
|
||||
:disabled="disabled"
|
||||
class="hidden"
|
||||
@change="handleChange"
|
||||
/>
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { FolderUpIcon } from '@modrinth/assets'
|
||||
import { fileIsValid } from '@modrinth/utils'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const fileInput = ref<HTMLInputElement | null>(null)
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'change', files: File[]): void
|
||||
}>()
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
prompt?: string
|
||||
primaryPrompt?: string | null
|
||||
secondaryPrompt?: string | null
|
||||
multiple?: boolean
|
||||
accept?: string
|
||||
maxSize?: number | null
|
||||
shouldAlwaysReset?: boolean
|
||||
disabled?: boolean
|
||||
size?: 'small' | 'standard'
|
||||
}>(),
|
||||
{
|
||||
prompt: 'Drag and drop files or click to browse',
|
||||
primaryPrompt: 'Drag and drop files or click to browse',
|
||||
secondaryPrompt: 'You can try to drag files or folder or click this area to select it',
|
||||
size: 'standard',
|
||||
},
|
||||
)
|
||||
|
||||
const files = ref<File[]>([])
|
||||
|
||||
function addFiles(incoming: FileList, shouldNotReset = false) {
|
||||
if (!shouldNotReset || props.shouldAlwaysReset) {
|
||||
files.value = Array.from(incoming)
|
||||
}
|
||||
|
||||
const validationOptions = {
|
||||
maxSize: props.maxSize ?? undefined,
|
||||
alertOnInvalid: true,
|
||||
}
|
||||
|
||||
files.value = files.value.filter((file) => fileIsValid(file, validationOptions))
|
||||
|
||||
if (files.value.length > 0) {
|
||||
emit('change', files.value)
|
||||
}
|
||||
|
||||
if (fileInput.value) fileInput.value.value = ''
|
||||
}
|
||||
|
||||
const isDragOver = ref(false)
|
||||
|
||||
function onDragOver() {
|
||||
isDragOver.value = true
|
||||
}
|
||||
|
||||
function onDragLeave() {
|
||||
isDragOver.value = false
|
||||
}
|
||||
|
||||
function handleDrop(e: DragEvent) {
|
||||
isDragOver.value = false
|
||||
|
||||
if (!e.dataTransfer) return
|
||||
addFiles(e.dataTransfer.files)
|
||||
}
|
||||
|
||||
function handleChange(e: Event) {
|
||||
const input = e.target as HTMLInputElement
|
||||
if (!input.files) return
|
||||
addFiles(input.files)
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user