refactor(items): merge ancient artifacts into items data model
Migrate ancient artifacts to items table using a category key. Consolidate detail and edit views into ItemDetail and ItemEdit. Update API, search, and data tools to reflect unified structure.
This commit is contained in:
@@ -7,7 +7,6 @@ import HabitatDetail from '../views/HabitatDetail.vue';
|
||||
import ItemsList from '../views/ItemsList.vue';
|
||||
import ItemDetail from '../views/ItemDetail.vue';
|
||||
import AncientArtifactList from '../views/AncientArtifactList.vue';
|
||||
import AncientArtifactDetail from '../views/AncientArtifactDetail.vue';
|
||||
import RecipeList from '../views/RecipeList.vue';
|
||||
import RecipeDetail from '../views/RecipeDetail.vue';
|
||||
import DailyChecklistView from '../views/DailyChecklistView.vue';
|
||||
@@ -200,7 +199,7 @@ export const router = createRouter({
|
||||
name: 'ancient-artifact-new',
|
||||
component: AncientArtifactList,
|
||||
meta: {
|
||||
requiredPermission: 'ancient-artifacts.create',
|
||||
requiredPermission: 'items.create',
|
||||
editorModal: true,
|
||||
seo: seo({
|
||||
titleKey: 'pages.ancientArtifacts.newTitle',
|
||||
@@ -213,9 +212,9 @@ export const router = createRouter({
|
||||
{
|
||||
path: '/ancient-artifacts/:id/edit',
|
||||
name: 'ancient-artifact-edit',
|
||||
component: AncientArtifactDetail,
|
||||
component: ItemDetail,
|
||||
meta: {
|
||||
requiredPermission: 'ancient-artifacts.update',
|
||||
requiredPermission: 'items.update',
|
||||
editorModal: true,
|
||||
seo: seo({
|
||||
titleKey: 'pages.ancientArtifacts.editKicker',
|
||||
@@ -228,7 +227,7 @@ export const router = createRouter({
|
||||
{
|
||||
path: '/ancient-artifacts/:id',
|
||||
name: 'ancient-artifact-detail',
|
||||
component: AncientArtifactDetail,
|
||||
component: ItemDetail,
|
||||
meta: { seo: seo({ titleKey: 'pages.ancientArtifacts.detailKicker', descriptionKey: 'pages.ancientArtifacts.subtitle' }) }
|
||||
},
|
||||
{ path: '/recipes', name: 'recipe-list', component: RecipeList, meta: { seo: seo({ titleKey: 'pages.recipes.title', descriptionKey: 'pages.recipes.subtitle' }) } },
|
||||
|
||||
@@ -258,6 +258,7 @@ export interface Item extends EditInfo {
|
||||
details: string;
|
||||
baseDetails?: string;
|
||||
basePrice: number | null;
|
||||
ancientArtifactCategory: NamedEntity | null;
|
||||
isEventItem: boolean;
|
||||
translations?: TranslationMap;
|
||||
image: EntityImage | null;
|
||||
@@ -791,6 +792,7 @@ export interface ItemPayload {
|
||||
name: string;
|
||||
details: string;
|
||||
basePrice: number | null;
|
||||
ancientArtifactCategoryId: number | null;
|
||||
translations?: TranslationMap;
|
||||
categoryId: number;
|
||||
usageId: number | null;
|
||||
|
||||
@@ -1,166 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue';
|
||||
import { computed, onMounted, ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute } from 'vue-router';
|
||||
import DetailSection from '../components/DetailSection.vue';
|
||||
import EditHistoryPanel from '../components/EditHistoryPanel.vue';
|
||||
import EntityChips from '../components/EntityChips.vue';
|
||||
import EntityDiscussionPanel from '../components/EntityDiscussionPanel.vue';
|
||||
import PageHeader from '../components/PageHeader.vue';
|
||||
import Skeleton from '../components/Skeleton.vue';
|
||||
import Tabs, { type TabOption } from '../components/Tabs.vue';
|
||||
import { iconArtifact, iconBack, iconEdit } from '../icons';
|
||||
import { applySeo } from '../seo';
|
||||
import { api, getAuthToken, type AncientArtifactDetail, type AuthUser } from '../services/api';
|
||||
import AncientArtifactEdit from './AncientArtifactEdit.vue';
|
||||
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
const artifact = ref<AncientArtifactDetail | null>(null);
|
||||
const currentUser = ref<AuthUser | null>(null);
|
||||
const detailTab = ref('details');
|
||||
const showEditor = computed(() => route.name === 'ancient-artifact-edit');
|
||||
const canUpdateArtifact = computed(() => currentUser.value?.permissions.includes('ancient-artifacts.update') === true);
|
||||
const detailTabs = computed<TabOption[]>(() => [
|
||||
{ value: 'details', label: t('common.details') },
|
||||
{ value: 'discussion', label: t('discussion.title') },
|
||||
{ value: 'history', label: t('history.editHistory') }
|
||||
]);
|
||||
|
||||
async function loadArtifactDetail() {
|
||||
const nextArtifact = await api.ancientArtifactDetail(String(route.params.id));
|
||||
artifact.value = nextArtifact;
|
||||
|
||||
if (route.meta.editorModal !== true) {
|
||||
applySeo({
|
||||
title: `${nextArtifact.name} - ${t('pages.ancientArtifacts.title')}`,
|
||||
description: t('seo.ancientArtifactDetailDescription', { name: nextArtifact.name }),
|
||||
canonicalPath: `/ancient-artifacts/${nextArtifact.id}`,
|
||||
image: nextArtifact.image?.url
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
if (getAuthToken()) {
|
||||
try {
|
||||
currentUser.value = (await api.me()).user;
|
||||
} catch {
|
||||
currentUser.value = null;
|
||||
}
|
||||
}
|
||||
await loadArtifactDetail();
|
||||
});
|
||||
|
||||
watch(
|
||||
() => route.name,
|
||||
(name, oldName) => {
|
||||
if (oldName === 'ancient-artifact-edit' && name === 'ancient-artifact-detail') {
|
||||
void loadArtifactDetail();
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
watch(
|
||||
() => route.params.id,
|
||||
() => {
|
||||
artifact.value = null;
|
||||
detailTab.value = 'details';
|
||||
void loadArtifactDetail();
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section v-if="!artifact" class="page-stack" aria-busy="true" :aria-label="t('pages.ancientArtifacts.loadingDetail')">
|
||||
<div class="page-header page-header--skeleton" aria-hidden="true">
|
||||
<div class="page-header__copy">
|
||||
<Skeleton width="132px" />
|
||||
<Skeleton width="260px" height="46px" />
|
||||
<Skeleton width="220px" />
|
||||
</div>
|
||||
<div class="page-header__actions">
|
||||
<Skeleton variant="box" width="88px" height="36px" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="detail-section skeleton-detail-section" aria-hidden="true">
|
||||
<div class="detail-section__header">
|
||||
<Skeleton width="112px" height="24px" />
|
||||
</div>
|
||||
<div class="detail-section__body">
|
||||
<Skeleton width="45%" />
|
||||
<Skeleton variant="box" height="120px" />
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<section v-else class="page-stack">
|
||||
<PageHeader :title="artifact.name" :subtitle="artifact.category.name">
|
||||
<template #kicker>{{ t('pages.ancientArtifacts.detailKicker') }}</template>
|
||||
<template #actions>
|
||||
<RouterLink v-if="canUpdateArtifact" class="ui-button ui-button--primary ui-button--small" :to="`/ancient-artifacts/${artifact.id}/edit`">
|
||||
<Icon :icon="iconEdit" class="ui-icon" aria-hidden="true" />
|
||||
{{ t('common.edit') }}
|
||||
</RouterLink>
|
||||
<RouterLink class="ui-button ui-button--blue ui-button--small" to="/ancient-artifacts">
|
||||
<Icon :icon="iconBack" class="ui-icon" aria-hidden="true" />
|
||||
{{ t('common.backToList') }}
|
||||
</RouterLink>
|
||||
</template>
|
||||
</PageHeader>
|
||||
|
||||
<div class="detail-tabs">
|
||||
<Tabs id="artifact-detail-tabs" v-model="detailTab" :tabs="detailTabs" :label="t('common.details')" />
|
||||
|
||||
<div v-if="detailTab === 'details'" class="detail-grid">
|
||||
<DetailSection :title="t('common.details')">
|
||||
<dl class="entity-profile-facts">
|
||||
<div>
|
||||
<dt>{{ t('pages.ancientArtifacts.category') }}</dt>
|
||||
<dd>{{ artifact.category.name }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</DetailSection>
|
||||
|
||||
<DetailSection :title="t('media.image')">
|
||||
<div class="entity-detail-image">
|
||||
<div class="entity-detail-image__frame" :class="{ 'entity-detail-image__frame--placeholder': !artifact.image }">
|
||||
<img v-if="artifact.image" :src="artifact.image.url" :alt="t('media.imageAlt', { name: artifact.name })" />
|
||||
<span v-else class="entity-card__mark entity-detail-image__mark" role="img" :aria-label="t('media.imageEmpty')">
|
||||
<Icon :icon="iconArtifact" class="entity-card__icon" aria-hidden="true" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</DetailSection>
|
||||
|
||||
<DetailSection :title="t('pages.ancientArtifacts.description')">
|
||||
<p v-if="artifact.details" class="preserve-lines">{{ artifact.details }}</p>
|
||||
<p v-else class="meta-line">{{ t('common.none') }}</p>
|
||||
</DetailSection>
|
||||
|
||||
<DetailSection :title="t('pages.ancientArtifacts.category')">
|
||||
<span class="chip">
|
||||
<Icon :icon="iconArtifact" class="ui-icon" aria-hidden="true" />
|
||||
{{ artifact.category.name }}
|
||||
</span>
|
||||
</DetailSection>
|
||||
|
||||
<DetailSection :title="t('pages.ancientArtifacts.tags')">
|
||||
<EntityChips v-if="artifact.tags.length" :items="artifact.tags" />
|
||||
<p v-else class="meta-line">{{ t('common.none') }}</p>
|
||||
</DetailSection>
|
||||
</div>
|
||||
|
||||
<div v-else-if="detailTab === 'discussion'" class="detail-tab-panel">
|
||||
<EntityDiscussionPanel entity-type="ancient-artifacts" :entity-id="artifact.id" />
|
||||
</div>
|
||||
|
||||
<div v-else class="detail-tab-panel">
|
||||
<EditHistoryPanel :entity="artifact" :history="artifact.editHistory" />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<AncientArtifactEdit v-if="showEditor" />
|
||||
</template>
|
||||
@@ -1,261 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import { Icon } from '@iconify/vue';
|
||||
import { computed, onMounted, ref } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import ImageUploadField from '../components/ImageUploadField.vue';
|
||||
import Modal from '../components/Modal.vue';
|
||||
import Skeleton from '../components/Skeleton.vue';
|
||||
import StatusMessage from '../components/StatusMessage.vue';
|
||||
import TagsSelect from '../components/TagsSelect.vue';
|
||||
import TranslationFields from '../components/TranslationFields.vue';
|
||||
import { iconCancel, iconSave } from '../icons';
|
||||
import {
|
||||
api,
|
||||
getAuthToken,
|
||||
type AncientArtifactPayload,
|
||||
type AuthUser,
|
||||
type ConfigType,
|
||||
type EntityImage,
|
||||
type EntityImageUpload,
|
||||
type Language,
|
||||
type Options,
|
||||
type TranslationMap
|
||||
} from '../services/api';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const { locale, t } = useI18n();
|
||||
const options = ref<Options | null>(null);
|
||||
const languages = ref<Language[]>([]);
|
||||
const currentUser = ref<AuthUser | null>(null);
|
||||
const currentImage = ref<EntityImage | null>(null);
|
||||
const imageHistory = ref<EntityImageUpload[]>([]);
|
||||
const loading = ref(true);
|
||||
const busy = ref(false);
|
||||
const message = ref('');
|
||||
const creatingSelect = ref('');
|
||||
const artifactForm = ref({
|
||||
name: '',
|
||||
details: '',
|
||||
translations: {} as TranslationMap,
|
||||
categoryId: '',
|
||||
tagIds: [] as string[],
|
||||
imagePath: ''
|
||||
});
|
||||
|
||||
const routeId = computed(() => (typeof route.params.id === 'string' ? route.params.id : ''));
|
||||
const isEditing = computed(() => routeId.value !== '');
|
||||
const pageTitle = computed(() =>
|
||||
isEditing.value
|
||||
? t('pages.ancientArtifacts.editTitle', { name: artifactForm.value.name || t('pages.ancientArtifacts.fallbackName') })
|
||||
: t('pages.ancientArtifacts.newTitle')
|
||||
);
|
||||
const cancelTo = computed(() => (isEditing.value ? `/ancient-artifacts/${routeId.value}` : '/ancient-artifacts'));
|
||||
const canCreateConfig = computed(() => currentUser.value?.permissions.includes('admin.config.create') === true);
|
||||
const canUploadImage = computed(() => currentUser.value?.permissions.includes('ancient-artifacts.upload') === true);
|
||||
const imageEntityName = computed(() => artifactNameForSave().trim());
|
||||
|
||||
function toIds(values: string[]): number[] {
|
||||
return values.map(Number).filter((item) => Number.isInteger(item) && item > 0);
|
||||
}
|
||||
|
||||
function errorText(error: unknown, fallback: string) {
|
||||
return error instanceof Error && error.message ? error.message : fallback;
|
||||
}
|
||||
|
||||
function closeEditor() {
|
||||
void router.push(cancelTo.value);
|
||||
}
|
||||
|
||||
function artifactNameForSave() {
|
||||
const baseName = artifactForm.value.name.trim();
|
||||
if (baseName !== '') {
|
||||
return artifactForm.value.name;
|
||||
}
|
||||
|
||||
return artifactForm.value.translations[String(locale.value || '')]?.name ?? '';
|
||||
}
|
||||
|
||||
async function loadEditor() {
|
||||
loading.value = true;
|
||||
message.value = '';
|
||||
|
||||
try {
|
||||
const [loadedOptions, loadedLanguages] = await Promise.all([api.options(), api.languages()]);
|
||||
options.value = loadedOptions;
|
||||
languages.value = loadedLanguages;
|
||||
|
||||
if (getAuthToken()) {
|
||||
try {
|
||||
currentUser.value = (await api.me()).user;
|
||||
} catch {
|
||||
currentUser.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
if (isEditing.value) {
|
||||
const artifact = await api.ancientArtifactDetail(routeId.value);
|
||||
artifactForm.value = {
|
||||
name: artifact.baseName ?? artifact.name,
|
||||
details: artifact.baseDetails ?? artifact.details,
|
||||
translations: artifact.translations ?? {},
|
||||
categoryId: String(artifact.category.id),
|
||||
tagIds: artifact.tags.map((tag) => String(tag.id)),
|
||||
imagePath: artifact.image?.path ?? ''
|
||||
};
|
||||
currentImage.value = artifact.image;
|
||||
imageHistory.value = artifact.imageHistory;
|
||||
}
|
||||
} catch (error) {
|
||||
message.value = errorText(error, t('errors.loadFailed'));
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function createMultiOption(selectKey: string, type: ConfigType, name: string, values: string[]) {
|
||||
const cleanName = name.trim();
|
||||
if (!cleanName || !canCreateConfig.value) return;
|
||||
|
||||
creatingSelect.value = selectKey;
|
||||
message.value = '';
|
||||
try {
|
||||
const created = await api.createConfig(type, { name: cleanName });
|
||||
options.value = await api.options();
|
||||
const value = String(created.id);
|
||||
if (!values.includes(value)) {
|
||||
values.push(value);
|
||||
}
|
||||
} catch (error) {
|
||||
message.value = errorText(error, t('errors.addFailed'));
|
||||
} finally {
|
||||
creatingSelect.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
async function saveArtifact() {
|
||||
busy.value = true;
|
||||
message.value = '';
|
||||
|
||||
try {
|
||||
const payload: AncientArtifactPayload = {
|
||||
name: artifactNameForSave(),
|
||||
details: artifactForm.value.details,
|
||||
translations: artifactForm.value.translations,
|
||||
categoryId: Number(artifactForm.value.categoryId),
|
||||
tagIds: toIds(artifactForm.value.tagIds),
|
||||
imagePath: artifactForm.value.imagePath
|
||||
};
|
||||
const saved = isEditing.value
|
||||
? await api.updateAncientArtifact(routeId.value, payload)
|
||||
: await api.createAncientArtifact(payload);
|
||||
await router.push(`/ancient-artifacts/${saved.id}`);
|
||||
} catch (error) {
|
||||
message.value = errorText(error, t('errors.saveFailed'));
|
||||
} finally {
|
||||
busy.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleImageSelected(image: EntityImage) {
|
||||
currentImage.value = image;
|
||||
}
|
||||
|
||||
function handleImageUploaded(image: EntityImageUpload) {
|
||||
currentImage.value = image;
|
||||
imageHistory.value = [image, ...imageHistory.value.filter((item) => item.path !== image.path)];
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
void loadEditor();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal :title="pageTitle" :subtitle="t('pages.ancientArtifacts.editSubtitle')" :close-label="t('common.close')" size="wide" @close="closeEditor">
|
||||
<StatusMessage v-if="message" variant="danger">{{ message }}</StatusMessage>
|
||||
|
||||
<form v-if="!loading && options" id="artifact-edit-form" class="modal-edit-form" @submit.prevent="saveArtifact">
|
||||
<TranslationFields
|
||||
id-prefix="artifact-name"
|
||||
v-model:base-value="artifactForm.name"
|
||||
v-model:translations="artifactForm.translations"
|
||||
field="name"
|
||||
:label="t('common.name')"
|
||||
:languages="languages"
|
||||
required
|
||||
/>
|
||||
|
||||
<TranslationFields
|
||||
id-prefix="artifact-details"
|
||||
v-model:base-value="artifactForm.details"
|
||||
v-model:translations="artifactForm.translations"
|
||||
field="details"
|
||||
:label="t('pages.ancientArtifacts.description')"
|
||||
:languages="languages"
|
||||
multiline
|
||||
:rows="4"
|
||||
/>
|
||||
|
||||
<div class="field">
|
||||
<label for="artifact-category">{{ t('pages.ancientArtifacts.category') }}</label>
|
||||
<TagsSelect
|
||||
id="artifact-category"
|
||||
v-model="artifactForm.categoryId"
|
||||
:options="options.ancientArtifactCategories"
|
||||
:multiple="false"
|
||||
:placeholder="t('common.select')"
|
||||
:search-placeholder="t('pages.ancientArtifacts.searchCategory')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ImageUploadField
|
||||
v-model="artifactForm.imagePath"
|
||||
entity-type="ancient-artifacts"
|
||||
:entity-id="isEditing ? routeId : null"
|
||||
:entity-name="imageEntityName"
|
||||
:label="t('media.image')"
|
||||
:current-image="currentImage"
|
||||
:history="imageHistory"
|
||||
:disabled="busy"
|
||||
:allow-upload="canUploadImage"
|
||||
@selected="handleImageSelected"
|
||||
@uploaded="handleImageUploaded"
|
||||
@error="message = $event"
|
||||
/>
|
||||
|
||||
<div class="field">
|
||||
<label for="artifact-tags">{{ t('pages.ancientArtifacts.tags') }}</label>
|
||||
<TagsSelect
|
||||
id="artifact-tags"
|
||||
v-model="artifactForm.tagIds"
|
||||
:options="options.itemTags"
|
||||
:allow-create="canCreateConfig"
|
||||
:creating="creatingSelect === 'artifact-tags'"
|
||||
:placeholder="t('pages.ancientArtifacts.searchTags')"
|
||||
@create="createMultiOption('artifact-tags', 'favorite-things', $event, artifactForm.tagIds)"
|
||||
/>
|
||||
</div>
|
||||
</form>
|
||||
<section v-else class="modal-edit-form skeleton-detail-section" aria-busy="true" :aria-label="t('pages.ancientArtifacts.loadingEdit')">
|
||||
<Skeleton width="160px" />
|
||||
<Skeleton variant="box" height="44px" />
|
||||
<Skeleton width="140px" />
|
||||
<Skeleton variant="box" height="120px" />
|
||||
<Skeleton width="120px" />
|
||||
<Skeleton variant="box" height="44px" />
|
||||
</section>
|
||||
|
||||
<template #footer>
|
||||
<button type="button" class="ui-button ui-button--ghost" @click="closeEditor">
|
||||
<Icon :icon="iconCancel" class="ui-icon" aria-hidden="true" />
|
||||
{{ t('common.cancel') }}
|
||||
</button>
|
||||
<button type="submit" form="artifact-edit-form" class="ui-button ui-button--primary" :disabled="busy || loading">
|
||||
<Icon :icon="iconSave" class="ui-icon" aria-hidden="true" />
|
||||
{{ busy ? t('common.saving') : t('common.save') }}
|
||||
</button>
|
||||
</template>
|
||||
</Modal>
|
||||
</template>
|
||||
@@ -11,7 +11,7 @@ import Tabs, { type TabOption } from '../components/Tabs.vue';
|
||||
import TagsSelect from '../components/TagsSelect.vue';
|
||||
import { iconAdd, iconArtifact } from '../icons';
|
||||
import { api, getAuthToken, type AncientArtifact, type AuthUser, type Options } from '../services/api';
|
||||
import AncientArtifactEdit from './AncientArtifactEdit.vue';
|
||||
import ItemEdit from './ItemEdit.vue';
|
||||
|
||||
const route = useRoute();
|
||||
const { t } = useI18n();
|
||||
@@ -37,7 +37,7 @@ const artifactQuery = computed(() => ({
|
||||
tagIds: tagIds.value.join(',')
|
||||
}));
|
||||
const showEditor = computed(() => route.name === 'ancient-artifact-new');
|
||||
const canCreateArtifact = computed(() => currentUser.value?.permissions.includes('ancient-artifacts.create') === true);
|
||||
const canCreateArtifact = computed(() => currentUser.value?.permissions.includes('items.create') === true);
|
||||
|
||||
function artifactCardImage(artifact: AncientArtifact) {
|
||||
return artifact.image ? { src: artifact.image.url, alt: t('media.imageAlt', { name: artifact.name }) } : undefined;
|
||||
@@ -139,6 +139,6 @@ watch(artifactQuery, loadArtifacts);
|
||||
/>
|
||||
</div>
|
||||
|
||||
<AncientArtifactEdit v-if="showEditor" />
|
||||
<ItemEdit v-if="showEditor" />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
import { Icon } from '@iconify/vue';
|
||||
import { computed, onMounted, ref, watch } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import DetailSection from '../components/DetailSection.vue';
|
||||
import EditHistoryPanel from '../components/EditHistoryPanel.vue';
|
||||
import EntityDiscussionPanel from '../components/EntityDiscussionPanel.vue';
|
||||
@@ -17,11 +17,13 @@ import { api, getAuthToken, type AuthUser, type ItemDetail } from '../services/a
|
||||
import ItemEdit from './ItemEdit.vue';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const { locale, t } = useI18n();
|
||||
const item = ref<ItemDetail | null>(null);
|
||||
const currentUser = ref<AuthUser | null>(null);
|
||||
const detailTab = ref('details');
|
||||
const showEditor = computed(() => route.name === 'item-edit');
|
||||
const isAncientArtifactRoute = computed(() => route.name === 'ancient-artifact-detail' || route.name === 'ancient-artifact-edit');
|
||||
const showEditor = computed(() => route.name === 'item-edit' || route.name === 'ancient-artifact-edit');
|
||||
const canUpdateItem = computed(() => currentUser.value?.permissions.includes('items.update') === true);
|
||||
const canCreateRecipe = computed(() => currentUser.value?.permissions.includes('recipes.create') === true);
|
||||
const detailTabs = computed<TabOption[]>(() => [
|
||||
@@ -36,8 +38,26 @@ const itemSubtitle = computed(() => {
|
||||
|
||||
return item.value.usage ? `${item.value.category.name} · ${item.value.usage.name}` : item.value.category.name;
|
||||
});
|
||||
const detailKicker = computed(() => (item.value?.isEventItem ? t('pages.eventItems.detailKicker') : t('pages.items.detailKicker')));
|
||||
const listTarget = computed(() => (item.value?.isEventItem ? '/event-items' : '/items'));
|
||||
const detailKicker = computed(() =>
|
||||
isAncientArtifactRoute.value
|
||||
? t('pages.ancientArtifacts.detailKicker')
|
||||
: item.value?.isEventItem
|
||||
? t('pages.eventItems.detailKicker')
|
||||
: t('pages.items.detailKicker')
|
||||
);
|
||||
const listTarget = computed(() => (isAncientArtifactRoute.value ? '/ancient-artifacts' : item.value?.isEventItem ? '/event-items' : '/items'));
|
||||
const editTarget = computed(() =>
|
||||
item.value ? (isAncientArtifactRoute.value ? `/ancient-artifacts/${item.value.id}/edit` : `/items/${item.value.id}/edit`) : ''
|
||||
);
|
||||
const detailCanonicalPath = computed(() =>
|
||||
item.value ? (isAncientArtifactRoute.value ? `/ancient-artifacts/${item.value.id}` : `/items/${item.value.id}`) : ''
|
||||
);
|
||||
const detailTitleKey = computed(() =>
|
||||
isAncientArtifactRoute.value ? 'pages.ancientArtifacts.title' : item.value?.isEventItem ? 'pages.eventItems.title' : 'pages.items.title'
|
||||
);
|
||||
const detailDescriptionKey = computed(() =>
|
||||
isAncientArtifactRoute.value ? 'seo.ancientArtifactDetailDescription' : 'seo.itemDetailDescription'
|
||||
);
|
||||
const basePriceDisplay = computed(() => {
|
||||
const price = item.value?.basePrice;
|
||||
return price === null || price === undefined ? t('common.none') : new Intl.NumberFormat(locale.value).format(price);
|
||||
@@ -57,13 +77,19 @@ const customization = computed(() => {
|
||||
|
||||
async function loadItemDetail() {
|
||||
const nextItem = await api.itemDetail(String(route.params.id));
|
||||
|
||||
if (isAncientArtifactRoute.value && !nextItem.ancientArtifactCategory) {
|
||||
await router.replace(route.name === 'ancient-artifact-edit' ? `/items/${nextItem.id}/edit` : `/items/${nextItem.id}`);
|
||||
return;
|
||||
}
|
||||
|
||||
item.value = nextItem;
|
||||
|
||||
if (route.meta.editorModal !== true) {
|
||||
applySeo({
|
||||
title: `${nextItem.name} - ${t(nextItem.isEventItem ? 'pages.eventItems.title' : 'pages.items.title')}`,
|
||||
description: t('seo.itemDetailDescription', { name: nextItem.name }),
|
||||
canonicalPath: `/items/${nextItem.id}`,
|
||||
title: `${nextItem.name} - ${t(detailTitleKey.value)}`,
|
||||
description: t(detailDescriptionKey.value, { name: nextItem.name }),
|
||||
canonicalPath: detailCanonicalPath.value,
|
||||
image: nextItem.image?.url
|
||||
});
|
||||
}
|
||||
@@ -83,7 +109,10 @@ onMounted(async () => {
|
||||
watch(
|
||||
() => route.name,
|
||||
(name, oldName) => {
|
||||
if (oldName === 'item-edit' && name === 'item-detail') {
|
||||
if (
|
||||
(oldName === 'item-edit' && name === 'item-detail') ||
|
||||
(oldName === 'ancient-artifact-edit' && name === 'ancient-artifact-detail')
|
||||
) {
|
||||
void loadItemDetail();
|
||||
}
|
||||
}
|
||||
@@ -156,7 +185,7 @@ watch(
|
||||
<PageHeader :title="item.name" :subtitle="itemSubtitle">
|
||||
<template #kicker>{{ detailKicker }}</template>
|
||||
<template #actions>
|
||||
<RouterLink v-if="canUpdateItem" class="ui-button ui-button--primary ui-button--small" :to="`/items/${item.id}/edit`">
|
||||
<RouterLink v-if="canUpdateItem" class="ui-button ui-button--primary ui-button--small" :to="editTarget">
|
||||
<Icon :icon="iconEdit" class="ui-icon" aria-hidden="true" />
|
||||
{{ t('common.edit') }}
|
||||
</RouterLink>
|
||||
@@ -198,6 +227,10 @@ watch(
|
||||
<dt>{{ t('pages.items.basePrice') }}</dt>
|
||||
<dd>{{ basePriceDisplay }}</dd>
|
||||
</div>
|
||||
<div v-if="item.ancientArtifactCategory">
|
||||
<dt>{{ t('pages.items.ancientArtifact') }}</dt>
|
||||
<dd>{{ item.ancientArtifactCategory.name }}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>{{ t('pages.items.recipeInfo') }}</dt>
|
||||
<dd>{{ item.noRecipe ? t('pages.items.noRecipe') : item.recipe ? item.recipe.name : t('common.none') }}</dd>
|
||||
|
||||
@@ -39,6 +39,7 @@ const itemForm = ref({
|
||||
name: '',
|
||||
details: '',
|
||||
basePrice: '',
|
||||
ancientArtifactCategoryId: '',
|
||||
translations: {} as TranslationMap,
|
||||
categoryId: '',
|
||||
usageId: '',
|
||||
@@ -67,18 +68,39 @@ const itemCreateDefaultsStorageKey = 'pokopia_item_create_defaults';
|
||||
const routeId = computed(() => (typeof route.params.id === 'string' ? route.params.id : ''));
|
||||
const isEditing = computed(() => routeId.value !== '');
|
||||
const isEventCreate = computed(() => route.name === 'event-item-new');
|
||||
const isAncientArtifactRoute = computed(() => route.name === 'ancient-artifact-new' || route.name === 'ancient-artifact-edit');
|
||||
const isAncientArtifactCreate = computed(() => route.name === 'ancient-artifact-new');
|
||||
const insertBeforeItemId = computed(() => queryItemId(route.query.insertBeforeItemId));
|
||||
const insertAfterItemId = computed(() => queryItemId(route.query.insertAfterItemId));
|
||||
const pageTitle = computed(() =>
|
||||
isEditing.value
|
||||
? t('pages.items.editTitle', { name: itemForm.value.name || t('pages.items.fallbackName') })
|
||||
? isAncientArtifactRoute.value
|
||||
? t('pages.ancientArtifacts.editTitle', { name: itemForm.value.name || t('pages.ancientArtifacts.fallbackName') })
|
||||
: t('pages.items.editTitle', { name: itemForm.value.name || t('pages.items.fallbackName') })
|
||||
: isAncientArtifactCreate.value
|
||||
? t('pages.ancientArtifacts.newTitle')
|
||||
: isEventCreate.value
|
||||
? t('pages.eventItems.newTitle')
|
||||
: t('pages.items.newTitle')
|
||||
);
|
||||
const cancelTo = computed(() => (isEditing.value ? `/items/${routeId.value}` : isEventCreate.value ? '/event-items' : '/items'));
|
||||
const pageSubtitle = computed(() => (isAncientArtifactRoute.value ? t('pages.ancientArtifacts.editSubtitle') : t('pages.items.editSubtitle')));
|
||||
const cancelTo = computed(() =>
|
||||
isEditing.value
|
||||
? isAncientArtifactRoute.value
|
||||
? `/ancient-artifacts/${routeId.value}`
|
||||
: `/items/${routeId.value}`
|
||||
: isAncientArtifactCreate.value
|
||||
? '/ancient-artifacts'
|
||||
: isEventCreate.value
|
||||
? '/event-items'
|
||||
: '/items'
|
||||
);
|
||||
const hasRecipe = ref(false);
|
||||
const imageEntityName = computed(() => itemNameForSave().trim());
|
||||
const ancientArtifactOptions = computed(() => [
|
||||
{ value: '', label: t('common.no') },
|
||||
...(options.value?.ancientArtifactCategories.map((item) => ({ value: String(item.id), label: item.name })) ?? [])
|
||||
]);
|
||||
const canCreateConfig = computed(() => currentUser.value?.permissions.includes('admin.config.create') === true);
|
||||
const canUploadImage = computed(() => currentUser.value?.permissions.includes('items.upload') === true);
|
||||
|
||||
@@ -163,6 +185,7 @@ function applyItemCreateDefaults(isEventItem: boolean) {
|
||||
...itemForm.value,
|
||||
categoryId: categoryIds.has(defaults.categoryId) ? defaults.categoryId : '',
|
||||
usageId: usageIds.has(defaults.usageId) ? defaults.usageId : '',
|
||||
ancientArtifactCategoryId: isAncientArtifactCreate.value ? String(loadedOptions.ancientArtifactCategories[0]?.id ?? '') : '',
|
||||
dyeable: defaults.dyeable,
|
||||
dualDyeable: defaults.dualDyeable,
|
||||
patternEditable: defaults.patternEditable,
|
||||
@@ -216,6 +239,7 @@ async function loadEditor() {
|
||||
name: item.baseName ?? item.name,
|
||||
details: item.baseDetails ?? item.details,
|
||||
basePrice: item.basePrice === null || item.basePrice === undefined ? '' : String(item.basePrice),
|
||||
ancientArtifactCategoryId: item.ancientArtifactCategory ? String(item.ancientArtifactCategory.id) : '',
|
||||
translations: item.translations ?? {},
|
||||
categoryId: String(item.category.id),
|
||||
usageId: item.usage ? String(item.usage.id) : '',
|
||||
@@ -270,6 +294,8 @@ async function saveItem() {
|
||||
name: itemNameForSave(),
|
||||
details: itemForm.value.details,
|
||||
basePrice: itemForm.value.basePrice.trim() === '' ? null : Number(itemForm.value.basePrice),
|
||||
ancientArtifactCategoryId:
|
||||
itemForm.value.ancientArtifactCategoryId.trim() === '' ? null : Number(itemForm.value.ancientArtifactCategoryId),
|
||||
translations: itemForm.value.translations,
|
||||
categoryId: Number(itemForm.value.categoryId),
|
||||
usageId: itemForm.value.usageId ? Number(itemForm.value.usageId) : null,
|
||||
@@ -289,7 +315,7 @@ async function saveItem() {
|
||||
payload.insertAfterItemId = insertAfterItemId.value;
|
||||
}
|
||||
const saved = isEditing.value ? await api.updateItem(routeId.value, payload) : await api.createItem(payload);
|
||||
await router.push(`/items/${saved.id}`);
|
||||
await router.push(isAncientArtifactRoute.value ? `/ancient-artifacts/${saved.id}` : `/items/${saved.id}`);
|
||||
} catch (error) {
|
||||
message.value = errorText(error, t('errors.saveFailed'));
|
||||
} finally {
|
||||
@@ -312,7 +338,7 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal :title="pageTitle" :subtitle="t('pages.items.editSubtitle')" :close-label="t('common.close')" size="wide" @close="closeEditor">
|
||||
<Modal :title="pageTitle" :subtitle="pageSubtitle" :close-label="t('common.close')" size="wide" @close="closeEditor">
|
||||
<StatusMessage v-if="message" variant="danger">{{ message }}</StatusMessage>
|
||||
|
||||
<form v-if="!loading && options" id="item-edit-form" class="modal-edit-form" @submit.prevent="saveItem">
|
||||
@@ -386,6 +412,18 @@ onMounted(() => {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<fieldset class="radio-group">
|
||||
<legend>{{ t('pages.items.ancientArtifact') }}</legend>
|
||||
<div class="radio-group__options">
|
||||
<label v-for="option in ancientArtifactOptions" :key="option.value" class="radio-group__option">
|
||||
<input v-model="itemForm.ancientArtifactCategoryId" type="radio" name="item-ancient-artifact" :value="option.value" />
|
||||
<span>{{ option.label }}</span>
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="check-row">
|
||||
<label><input v-model="itemForm.dyeable" type="checkbox" /> {{ t('pages.items.dyeable') }}</label>
|
||||
<label><input v-model="itemForm.dualDyeable" type="checkbox" /> {{ t('pages.items.dualDyeable') }}</label>
|
||||
@@ -422,7 +460,7 @@ onMounted(() => {
|
||||
</form>
|
||||
|
||||
<section v-else class="modal-edit-form skeleton-detail-section" aria-busy="true" :aria-label="t('pages.items.loadingEdit')">
|
||||
<div v-for="index in 6" :key="index" class="field">
|
||||
<div v-for="index in 7" :key="index" class="field">
|
||||
<Skeleton :width="index === 1 ? '52px' : '88px'" />
|
||||
<Skeleton variant="box" height="44px" />
|
||||
</div>
|
||||
@@ -460,6 +498,46 @@ onMounted(() => {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
display: grid;
|
||||
gap: 7px;
|
||||
min-width: 0;
|
||||
min-inline-size: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.radio-group legend {
|
||||
padding: 0;
|
||||
color: var(--ink-soft);
|
||||
font-size: 14px;
|
||||
font-weight: 850;
|
||||
}
|
||||
|
||||
.radio-group__options {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.radio-group__option {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
min-height: 36px;
|
||||
color: var(--ink-soft);
|
||||
font-weight: 850;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.radio-group__option input {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
accent-color: var(--pokemon-blue);
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.item-edit-row--name-price,
|
||||
.item-edit-row--category-usage {
|
||||
|
||||
Reference in New Issue
Block a user