eightequal/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

feat: create modal limit alerting (#4429)

Browse Source 
* draft: layout for alert

* feat: simplify

* feat: remove dummy data

* fix: lint and widths

* feat: use chips rather than dropdown select

* feat: remove gap from admonition header v body

* Revert "feat: remove gap from admonition header v body"

This reverts commit 46cce52799bc3ac24825a73ca4add18e0acad3c1.

* fix: niche fixes

* feat: update for new backend structure

* fix: i18n
This commit is contained in:
Calum H.
2025-09-28 20:48:21 +01:00
committed by GitHub
parent f466470d06
commit d418eaee12
17 changed files with 785 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

227
apps/frontend/src/components/ui/create/OrganizationCreateModal.vue Normal file
View File

@@ -0,0 +1,227 @@
<template>
<NewModal ref="modal" :header="formatMessage(messages.title)">
<div class="min-w-md flex max-w-md flex-col gap-3">
<CreateLimitAlert v-model="hasHitLimit" type="org" />
<div class="flex flex-col gap-2">
<label for="name">
<span class="text-lg font-semibold text-contrast">
{{ formatMessage(messages.nameLabel) }}
<span class="text-brand-red">*</span>
</span>
</label>
<input
id="name"
v-model="name"
type="text"
maxlength="64"
:placeholder="formatMessage(messages.namePlaceholder)"
autocomplete="off"
:disabled="hasHitLimit"
@input="updateSlug"
/>
</div>
<div class="flex flex-col gap-2">
<label for="slug">
<span class="text-lg font-semibold text-contrast">
{{ formatMessage(messages.urlLabel) }}
<span class="text-brand-red">*</span>
</span>
</label>
<div class="text-input-wrapper">
<div class="text-input-wrapper__before">https://modrinth.com/organization/</div>
<input
id="slug"
v-model="slug"
type="text"
maxlength="64"
autocomplete="off"
:disabled="hasHitLimit"
@input="setManualSlug"
/>
</div>
</div>
<div class="flex flex-col gap-2">
<label for="additional-information" class="flex flex-col gap-1">
<span class="text-lg font-semibold text-contrast">
{{ formatMessage(messages.summaryLabel) }}
<span class="text-brand-red">*</span>
</span>
<span>{{ formatMessage(messages.summaryDescription) }}</span>
</label>
<div class="textarea-wrapper">
<textarea
id="additional-information"
v-model="description"
maxlength="256"
:placeholder="formatMessage(messages.summaryPlaceholder)"
:disabled="hasHitLimit"
/>
</div>
</div>
<p class="m-0">
{{ formatMessage(messages.ownershipInfo) }}
</p>
<div class="flex justify-end gap-2">
<ButtonStyled class="w-24">
<button @click="hide">
<XIcon aria-hidden="true" />
{{ formatMessage(messages.cancel) }}
</button>
</ButtonStyled>
<ButtonStyled color="brand" class="w-40">
<button :disabled="hasHitLimit" @click="createOrganization">
<PlusIcon aria-hidden="true" />
{{ formatMessage(messages.createOrganization) }}
</button>
</ButtonStyled>
</div>
</div>
</NewModal>
</template>
<script setup lang="ts">
import { PlusIcon, XIcon } from '@modrinth/assets'
import { ButtonStyled, injectNotificationManager, NewModal } from '@modrinth/ui'
import { defineMessages } from '@vintl/vintl'
import { ref } from 'vue'
import CreateLimitAlert from './CreateLimitAlert.vue'
const router = useNativeRouter()
const { addNotification } = injectNotificationManager()
const { formatMessage } = useVIntl()
const messages = defineMessages({
title: {
id: 'create.organization.title',
defaultMessage: 'Creating an organization',
},
nameLabel: {
id: 'create.organization.name-label',
defaultMessage: 'Name',
},
namePlaceholder: {
id: 'create.organization.name-placeholder',
defaultMessage: 'Enter organization name...',
},
urlLabel: {
id: 'create.organization.url-label',
defaultMessage: 'URL',
},
summaryLabel: {
id: 'create.organization.summary-label',
defaultMessage: 'Summary',
},
summaryDescription: {
id: 'create.organization.summary-description',
defaultMessage: 'A sentence or two that describes your organization.',
},
summaryPlaceholder: {
id: 'create.organization.summary-placeholder',
defaultMessage: 'An organization for...',
},
ownershipInfo: {
id: 'create.organization.ownership-info',
defaultMessage:
'You will be the owner of this organization, but you can invite other members and transfer ownership at any time.',
},
cancel: {
id: 'create.organization.cancel',
defaultMessage: 'Cancel',
},
createOrganization: {
id: 'create.organization.create-organization',
defaultMessage: 'Create organization',
},
errorTitle: {
id: 'create.organization.error-title',
defaultMessage: 'An error occurred',
},
})
const name = ref<string>('')
const slug = ref<string>('')
const description = ref<string>('')
const manualSlug = ref<boolean>(false)
const hasHitLimit = ref<boolean>(false)
const modal = ref<InstanceType<typeof NewModal>>()
async function createOrganization(): Promise<void> {
startLoading()
try {
const value = {
name: name.value.trim(),
description: description.value.trim(),
slug: slug.value.trim().replace(/ +/g, ''),
}
const result: any = await useBaseFetch('organization', {
method: 'POST',
body: JSON.stringify(value),
apiVersion: 3,
})
modal.value?.hide()
await router.push(`/organization/${result.slug}`)
} catch (err: any) {
console.error(err)
addNotification({
title: formatMessage(messages.errorTitle),
text: err.data ? err.data.description : err,
type: 'error',
})
}
stopLoading()
}
function show(event?: MouseEvent): void {
name.value = ''
description.value = ''
modal.value?.show(event)
}
function hide(): void {
modal.value?.hide()
}
function updateSlug(): void {
if (!manualSlug.value) {
slug.value = name.value
.trim()
.toLowerCase()
.replaceAll(' ', '-')
.replaceAll(/[^a-zA-Z0-9!@$()`.+,_"-]/g, '')
.replaceAll(/--+/gm, '-')
}
}
function setManualSlug(): void {
manualSlug.value = true
}
defineExpose({
show,
})
</script>
<style scoped lang="scss">
.modal-creation {
input {
width: 20rem;
max-width: 100%;
}
.text-input-wrapper {
width: 100%;
}
textarea {
min-height: 5rem;
}
.input-group {
margin-top: var(--gap-md);
}
}
</style>