mirror of https://github.com/requarks/wiki
NGPixel
3 weeks ago
parent
fdd7945a6d
commit
b16402ae0f
@ -0,0 +1,319 @@
|
||||
<template>
|
||||
<w-card class="page-locale-relations" style="width: 620px; max-width: 92vw">
|
||||
<w-toolbar class="bg-primary text-white">
|
||||
<div class="text-subtitle2">{{ t('editor.localeRel.title') }}</div>
|
||||
</w-toolbar>
|
||||
<w-card-section>
|
||||
<div class="text-caption pb-4 text-black/60 dark:text-white/70">
|
||||
{{ t('editor.localeRel.intro') }}
|
||||
</div>
|
||||
<w-list class="rounded bg-white dark:bg-black/20" separator bordered>
|
||||
<w-item v-for="row of state.rows" :key="`loc-` + row.locale">
|
||||
<w-item-section side>
|
||||
<!-- -> The short code as an avatar, as the locale selector draws it, so a row here is
|
||||
recognisable as the same locale the reader picks in the sidebar -->
|
||||
<w-avatar
|
||||
rounded
|
||||
:color="row.isSelf ? `secondary` : `primary`"
|
||||
text-color="white"
|
||||
size="sm">
|
||||
<div class="text-caption uppercase">
|
||||
<strong>{{ row.language }}</strong>
|
||||
</div>
|
||||
</w-avatar>
|
||||
</w-item-section>
|
||||
<w-item-section>
|
||||
<w-item-label
|
||||
><strong>{{ row.displayName }}</strong></w-item-label
|
||||
>
|
||||
<!-- -> The page's own row says which slot it fills rather than offering to change it: it
|
||||
IS the entry for its locale, and pointing that slot elsewhere would be a move -->
|
||||
<w-item-label caption v-if="row.isSelf">{{
|
||||
t('editor.localeRel.thisPage')
|
||||
}}</w-item-label>
|
||||
<w-item-label caption v-else-if="row.title">{{ row.title }}</w-item-label>
|
||||
<w-item-label caption v-else>{{ t('editor.localeRel.notSet') }}</w-item-label>
|
||||
</w-item-section>
|
||||
<w-item-section side>
|
||||
<div class="text-caption font-robotomono max-w-56 truncate">
|
||||
{{ row.path ? `/${row.path}` : '—' }}
|
||||
</div>
|
||||
</w-item-section>
|
||||
<w-item-section side v-if="!row.isSelf">
|
||||
<div class="flex flex-nowrap items-center gap-1">
|
||||
<w-btn
|
||||
:label="t(`editor.localeRel.selectPage`)"
|
||||
color="primary"
|
||||
outline
|
||||
dense
|
||||
no-caps
|
||||
padding="xs sm"
|
||||
:loading="state.checking === row.locale"
|
||||
@click="selectPage(row)" />
|
||||
<!-- -> Only where there is something to take away, so the control appears with the
|
||||
relation it clears rather than sitting dead on every empty row -->
|
||||
<w-btn
|
||||
v-if="row.path"
|
||||
icon="la:times"
|
||||
dense
|
||||
flat
|
||||
padding="none"
|
||||
:aria-label="t(`editor.localeRel.clear`)"
|
||||
@click="clearRow(row)">
|
||||
<w-tooltip>{{ t('editor.localeRel.clear') }}</w-tooltip>
|
||||
</w-btn>
|
||||
</div>
|
||||
</w-item-section>
|
||||
</w-item>
|
||||
</w-list>
|
||||
<div class="text-caption pt-4 text-black/60 dark:text-white/70">
|
||||
{{ t('editor.localeRel.appliesOnSave') }}
|
||||
</div>
|
||||
</w-card-section>
|
||||
<w-card-actions class="card-actions">
|
||||
<w-space />
|
||||
<w-btn
|
||||
class="acrylic-btn"
|
||||
icon="la:times"
|
||||
:label="t(`common.actions.discard`)"
|
||||
color="grey-7"
|
||||
padding="xs md"
|
||||
flat
|
||||
@click="$emit('close')" />
|
||||
<w-btn
|
||||
icon="la:check"
|
||||
:label="t(`common.actions.apply`)"
|
||||
unelevated
|
||||
color="primary"
|
||||
padding="xs md"
|
||||
@click="saveAndClose" />
|
||||
</w-card-actions>
|
||||
</w-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { onMounted, reactive } from 'vue'
|
||||
|
||||
import { dialog } from '@/composables/dialog'
|
||||
import { notify } from '@/composables/notify'
|
||||
|
||||
import { apiErrorMessage } from '@/helpers/apiError'
|
||||
|
||||
import { useEditorStore } from '@/stores/editor'
|
||||
import { usePageStore } from '@/stores/page'
|
||||
import { useSiteStore } from '@/stores/site'
|
||||
|
||||
import LinkPickerDialog from './LinkPickerDialog.vue'
|
||||
|
||||
/**
|
||||
* The set of pages this page belongs to: itself, and the same page written in the other locales.
|
||||
*
|
||||
* One row per active locale, because the question is asked of the locales a site HAS rather than of
|
||||
* the relations it happens to hold -- an empty row is a language this page has no counterpart in, and
|
||||
* is how one is added. The row for the page's own locale is the page itself and is not a choice.
|
||||
*
|
||||
* Nothing here writes to the server. The set is staged on the page store and goes up with the page,
|
||||
* so discarding the edit discards the relations with it -- which is what every other field in the
|
||||
* properties panel does. What IS asked of the server is whether a chosen page is free to be related:
|
||||
* see `selectPage`.
|
||||
*/
|
||||
|
||||
// STORES
|
||||
|
||||
const editorStore = useEditorStore()
|
||||
const pageStore = usePageStore()
|
||||
const siteStore = useSiteStore()
|
||||
|
||||
// I18N
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
// DATA
|
||||
|
||||
const state = reactive({
|
||||
/** One row per locale: `{ locale, language, displayName, isSelf, path, title }`. */
|
||||
rows: [],
|
||||
/** The locale whose row is waiting on the server, which is what puts that button in a spinner. */
|
||||
checking: null
|
||||
})
|
||||
|
||||
// METHODS
|
||||
|
||||
/** The row for a locale, or undefined for a locale this site does not have. */
|
||||
function rowFor(locale) {
|
||||
return state.rows.find((r) => r.locale === locale)
|
||||
}
|
||||
|
||||
/**
|
||||
* Put a page in a locale's row.
|
||||
*
|
||||
* The picker is opened ON that locale and locked to it: a page from another language is not a
|
||||
* different answer to "which page is the French one", it is a wrong one.
|
||||
*/
|
||||
function selectPage(row) {
|
||||
dialog({
|
||||
component: LinkPickerDialog,
|
||||
componentProps: {
|
||||
title: t('editor.localeRel.pickerTitle', { locale: row.displayName }),
|
||||
okLabel: t('common.actions.select'),
|
||||
locale: row.locale,
|
||||
lockLocale: true,
|
||||
newTabOption: false,
|
||||
initialHref: row.path ? `/${row.path}` : ''
|
||||
}
|
||||
}).onOk(({ path, locale }) => {
|
||||
if (!path || locale !== row.locale) {
|
||||
return
|
||||
}
|
||||
adopt(row, path)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Take a chosen page, and with it whatever set it already belongs to.
|
||||
*
|
||||
* The server is asked before the row is filled in, because a page that is already some other page's
|
||||
* counterpart cannot become this one's: a page belongs to one set. Where the set it is in can be
|
||||
* joined, its other members are filled in here too -- they are the same page as well, and the author
|
||||
* should see what they are joining before they save rather than discover it afterwards.
|
||||
*/
|
||||
async function adopt(row, path) {
|
||||
state.checking = row.locale
|
||||
let group
|
||||
try {
|
||||
group = await API_CLIENT.get(`sites/${siteStore.id}/pages/locale-relations`, {
|
||||
searchParams: { path, locale: row.locale }
|
||||
}).json()
|
||||
} catch (err) {
|
||||
notify({
|
||||
type: 'negative',
|
||||
message: t('editor.localeRel.checkFailed'),
|
||||
caption: apiErrorMessage(err)
|
||||
})
|
||||
return
|
||||
} finally {
|
||||
state.checking = null
|
||||
}
|
||||
|
||||
/*
|
||||
Every page of the set being joined, checked against what this dialog already says before anything
|
||||
is changed: a set that cannot be joined must leave the rows as they were, or the author would be
|
||||
left holding a selection the save is going to refuse.
|
||||
*/
|
||||
const joining = group?.relations ?? []
|
||||
for (const rel of joining) {
|
||||
if (rel.locale === pageStore.locale && rel.path !== pageStore.path) {
|
||||
// -> The case this check exists for: the chosen page is already the translation of another page
|
||||
// in THIS page's language, so there is no slot here for this page to take
|
||||
notify({
|
||||
type: 'negative',
|
||||
message: t('editor.localeRel.conflictOwnLocale', {
|
||||
path: `/${path}`,
|
||||
locale: row.displayName,
|
||||
other: `/${rel.path}`
|
||||
})
|
||||
})
|
||||
return
|
||||
}
|
||||
const existing = rowFor(rel.locale)
|
||||
if (existing && !existing.isSelf && existing.path && existing.path !== rel.path) {
|
||||
notify({
|
||||
type: 'negative',
|
||||
message: t('editor.localeRel.conflictRow', {
|
||||
path: `/${path}`,
|
||||
locale: existing.displayName,
|
||||
other: `/${rel.path}`
|
||||
})
|
||||
})
|
||||
return
|
||||
}
|
||||
}
|
||||
|
||||
row.path = path
|
||||
row.title = group?.page?.title ?? ''
|
||||
|
||||
// -> The rest of the set, into the rows that have nothing in them. A locale the set covers and this
|
||||
// site no longer has is left out: there is no row to put it in, and the save states rows.
|
||||
let adopted = 0
|
||||
for (const rel of joining) {
|
||||
const target = rowFor(rel.locale)
|
||||
if (!target || target.isSelf || target.path === rel.path) {
|
||||
continue
|
||||
}
|
||||
target.path = rel.path
|
||||
target.title = rel.title ?? ''
|
||||
adopted++
|
||||
}
|
||||
if (adopted > 0) {
|
||||
notify({
|
||||
type: 'info',
|
||||
message: t('editor.localeRel.joinedSet', { count: adopted })
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function clearRow(row) {
|
||||
row.path = ''
|
||||
row.title = ''
|
||||
}
|
||||
|
||||
/**
|
||||
* Hand the set to the page store, which is what the save sends.
|
||||
*
|
||||
* Every row that names a page, the page's own excepted: it occupies its own locale's slot by being the
|
||||
* page being saved, and sending it back would be sending the server its own answer.
|
||||
*
|
||||
* And the editor is told it has an unsaved change, which is not automatic: `hasPendingChanges` is what
|
||||
* enables Save Changes, and writing the store alone leaves that button disabled -- so the set was
|
||||
* staged, could not be saved, and was thrown away when the editor closed. The same two steps the icon
|
||||
* and the title take in `PageHeader`.
|
||||
*/
|
||||
function saveAndClose() {
|
||||
pageStore.localeRelations = state.rows
|
||||
.filter((row) => !row.isSelf && row.path)
|
||||
.map((row) => ({ locale: row.locale, path: row.path, title: row.title }))
|
||||
editorStore.lastChangeTimestamp = Temporal.Now.instant()
|
||||
emit('close')
|
||||
}
|
||||
|
||||
// EMITS
|
||||
|
||||
const emit = defineEmits(['close'])
|
||||
|
||||
// MOUNTED
|
||||
|
||||
onMounted(() => {
|
||||
const held = pageStore.localeRelations ?? []
|
||||
const rows = siteStore.locales.active.map((locale) => {
|
||||
const relation = held.find((rel) => rel.locale === locale.code)
|
||||
const isSelf = locale.code === pageStore.locale
|
||||
return {
|
||||
locale: locale.code,
|
||||
language: locale.language,
|
||||
displayName: locale.displayName,
|
||||
isSelf,
|
||||
path: isSelf ? pageStore.path : (relation?.path ?? ''),
|
||||
title: isSelf ? pageStore.title : (relation?.title ?? '')
|
||||
}
|
||||
})
|
||||
/*
|
||||
And a relation to a locale the site no longer has active, which would otherwise be dropped by the
|
||||
save without anybody saying so -- the rows ARE the set. It gets a row like any other, so it can be
|
||||
seen and taken off deliberately.
|
||||
*/
|
||||
for (const relation of held) {
|
||||
if (!rows.some((row) => row.locale === relation.locale)) {
|
||||
rows.push({
|
||||
locale: relation.locale,
|
||||
language: relation.locale.split('-')[0],
|
||||
displayName: relation.locale,
|
||||
isSelf: false,
|
||||
path: relation.path,
|
||||
title: relation.title ?? ''
|
||||
})
|
||||
}
|
||||
}
|
||||
state.rows = rows
|
||||
})
|
||||
</script>
|
||||
Loading…
Reference in new issue