mirror of
https://github.com/yu-i-i/overleaf-cep.git
synced 2025-07-22 20:00:06 +02:00
Compare commits
5 commits
f8ce07b8ac
...
e747b28011
Author | SHA1 | Date | |
---|---|---|---|
![]() |
e747b28011 | ||
![]() |
23a7f1707b | ||
![]() |
95894dacd8 | ||
![]() |
7de7718eaf | ||
![]() |
c12b144cbb |
73 changed files with 3257 additions and 57 deletions
|
@ -123,14 +123,14 @@ services:
|
|||
dockerfile: services/real-time/Dockerfile
|
||||
env_file:
|
||||
- dev.env
|
||||
|
||||
|
||||
redis:
|
||||
image: redis:5
|
||||
ports:
|
||||
- "127.0.0.1:6379:6379" # for debugging
|
||||
volumes:
|
||||
- redis-data:/data
|
||||
|
||||
|
||||
web:
|
||||
build:
|
||||
context: ..
|
||||
|
|
|
@ -111,6 +111,11 @@ if (settings.filestore.stores.template_files) {
|
|||
keyBuilder.templateFileKeyMiddleware,
|
||||
fileController.insertFile
|
||||
)
|
||||
app.delete(
|
||||
'/template/:template_id/v/:version/:format',
|
||||
keyBuilder.templateFileKeyMiddleware,
|
||||
fileController.deleteFile
|
||||
)
|
||||
}
|
||||
|
||||
app.get(
|
||||
|
|
|
@ -5,7 +5,7 @@ const { callbackify } = require('node:util')
|
|||
const safeExec = require('./SafeExec').promises
|
||||
const { ConversionError } = require('./Errors')
|
||||
|
||||
const APPROVED_FORMATS = ['png']
|
||||
const APPROVED_FORMATS = ['png', 'jpg']
|
||||
const FOURTY_SECONDS = 40 * 1000
|
||||
const KILL_SIGNAL = 'SIGTERM'
|
||||
|
||||
|
@ -34,16 +34,14 @@ async function convert(sourcePath, requestedFormat) {
|
|||
}
|
||||
|
||||
async function thumbnail(sourcePath) {
|
||||
const width = '260x'
|
||||
return await convert(sourcePath, 'png', [
|
||||
const width = '548x'
|
||||
return await _convert(sourcePath, 'jpg', [
|
||||
'convert',
|
||||
'-flatten',
|
||||
'-background',
|
||||
'white',
|
||||
'-density',
|
||||
'300',
|
||||
'-define',
|
||||
`pdf:fit-page=${width}`,
|
||||
`${sourcePath}[0]`,
|
||||
'-resize',
|
||||
width,
|
||||
|
@ -51,16 +49,14 @@ async function thumbnail(sourcePath) {
|
|||
}
|
||||
|
||||
async function preview(sourcePath) {
|
||||
const width = '548x'
|
||||
return await convert(sourcePath, 'png', [
|
||||
const width = '794x'
|
||||
return await _convert(sourcePath, 'jpg', [
|
||||
'convert',
|
||||
'-flatten',
|
||||
'-background',
|
||||
'white',
|
||||
'-density',
|
||||
'300',
|
||||
'-define',
|
||||
`pdf:fit-page=${width}`,
|
||||
`${sourcePath}[0]`,
|
||||
'-resize',
|
||||
width,
|
||||
|
|
|
@ -150,7 +150,9 @@ async function _getConvertedFileAndCache(bucket, key, convertedKey, opts) {
|
|||
let convertedFsPath
|
||||
try {
|
||||
convertedFsPath = await _convertFile(bucket, key, opts)
|
||||
await ImageOptimiser.promises.compressPng(convertedFsPath)
|
||||
if (convertedFsPath.toLowerCase().endsWith(".png")) {
|
||||
await ImageOptimiser.promises.compressPng(convertedFsPath)
|
||||
}
|
||||
await PersistorManager.sendFile(bucket, convertedKey, convertedFsPath)
|
||||
} catch (err) {
|
||||
LocalFileWriter.deleteFile(convertedFsPath, () => {})
|
||||
|
|
|
@ -599,7 +599,7 @@ const _ProjectController = {
|
|||
}
|
||||
|
||||
const isAdminOrTemplateOwner =
|
||||
hasAdminAccess(user) || Settings.templates?.user_id === userId
|
||||
hasAdminAccess(user) || Settings.templates?.nonAdminCanManage
|
||||
const showTemplatesServerPro =
|
||||
Features.hasFeature('templates-server-pro') && isAdminOrTemplateOwner
|
||||
|
||||
|
|
|
@ -11,21 +11,22 @@ const TemplatesController = {
|
|||
// Read split test assignment so that it's available for Pug to read
|
||||
await SplitTestHandler.promises.getAssignment(req, res, 'core-pug-bs5')
|
||||
|
||||
const templateVersionId = req.params.Template_version_id
|
||||
const templateId = req.query.id
|
||||
if (!/^[0-9]+$/.test(templateVersionId) || !/^[0-9]+$/.test(templateId)) {
|
||||
logger.err(
|
||||
{ templateVersionId, templateId },
|
||||
'invalid template id or version'
|
||||
)
|
||||
return res.sendStatus(400)
|
||||
}
|
||||
const templateId = req.params.Template_version_id
|
||||
const templateVersionId = req.query.version
|
||||
// if (!/^[0-9]+$/.test(templateVersionId) || !/^[0-9]+$/.test(templateId)) {
|
||||
// logger.err(
|
||||
// { templateVersionId, templateId },
|
||||
// 'invalid template id or version'
|
||||
// )
|
||||
// return res.sendStatus(400)
|
||||
// }
|
||||
const data = {
|
||||
templateVersionId,
|
||||
templateId,
|
||||
name: req.query.templateName,
|
||||
compiler: ProjectHelper.compilerFromV1Engine(req.query.latexEngine),
|
||||
imageName: req.query.texImage,
|
||||
name: req.query.name,
|
||||
compiler: req.query.compiler,
|
||||
language: req.query.language,
|
||||
imageName: req.query.imageName,
|
||||
mainFile: req.query.mainFile,
|
||||
brandVariationId: req.query.brandVariationId,
|
||||
}
|
||||
|
@ -40,6 +41,7 @@ const TemplatesController = {
|
|||
|
||||
async createProjectFromV1Template(req, res) {
|
||||
const userId = SessionManager.getLoggedInUserId(req.session)
|
||||
|
||||
const project = await TemplatesManager.promises.createProjectFromV1Template(
|
||||
req.body.brandVariationId,
|
||||
req.body.compiler,
|
||||
|
@ -48,7 +50,8 @@ const TemplatesController = {
|
|||
req.body.templateName,
|
||||
req.body.templateVersionId,
|
||||
userId,
|
||||
req.body.imageName
|
||||
req.body.imageName,
|
||||
req.body.language
|
||||
)
|
||||
delete req.session.templateData
|
||||
if (!project) {
|
||||
|
|
|
@ -18,6 +18,7 @@ const crypto = require('crypto')
|
|||
const Errors = require('../Errors/Errors')
|
||||
const { pipeline } = require('stream/promises')
|
||||
const ClsiCacheManager = require('../Compile/ClsiCacheManager')
|
||||
const TIMEOUT = 30000 // 30 sec
|
||||
|
||||
const TemplatesManager = {
|
||||
async createProjectFromV1Template(
|
||||
|
@ -28,25 +29,19 @@ const TemplatesManager = {
|
|||
templateName,
|
||||
templateVersionId,
|
||||
userId,
|
||||
imageName
|
||||
imageName,
|
||||
language
|
||||
) {
|
||||
const zipUrl = `${settings.apis.v1.url}/api/v1/overleaf/templates/${templateVersionId}`
|
||||
const zipUrl = `${settings.apis.filestore.url}/template/${templateId}/v/${templateVersionId}/zip`
|
||||
const zipReq = await fetchStreamWithResponse(zipUrl, {
|
||||
basicAuth: {
|
||||
user: settings.apis.v1.user,
|
||||
password: settings.apis.v1.pass,
|
||||
},
|
||||
signal: AbortSignal.timeout(settings.apis.v1.timeout),
|
||||
signal: AbortSignal.timeout(TIMEOUT),
|
||||
})
|
||||
|
||||
const projectName = ProjectDetailsHandler.fixProjectName(templateName)
|
||||
const dumpPath = `${settings.path.dumpFolder}/${crypto.randomUUID()}`
|
||||
const writeStream = fs.createWriteStream(dumpPath)
|
||||
try {
|
||||
const attributes = {
|
||||
fromV1TemplateId: templateId,
|
||||
fromV1TemplateVersionId: templateVersionId,
|
||||
}
|
||||
const attributes = {}
|
||||
await pipeline(zipReq.stream, writeStream)
|
||||
|
||||
if (zipReq.response.status !== 200) {
|
||||
|
@ -78,14 +73,9 @@ const TemplatesManager = {
|
|||
await TemplatesManager._setCompiler(project._id, compiler)
|
||||
await TemplatesManager._setImage(project._id, imageName)
|
||||
await TemplatesManager._setMainFile(project._id, mainFile)
|
||||
await TemplatesManager._setSpellCheckLanguage(project._id, language)
|
||||
await TemplatesManager._setBrandVariationId(project._id, brandVariationId)
|
||||
|
||||
const update = {
|
||||
fromV1TemplateId: templateId,
|
||||
fromV1TemplateVersionId: templateVersionId,
|
||||
}
|
||||
await Project.updateOne({ _id: project._id }, update, {})
|
||||
|
||||
await prepareClsiCacheInBackground
|
||||
|
||||
return project
|
||||
|
@ -102,11 +92,12 @@ const TemplatesManager = {
|
|||
},
|
||||
|
||||
async _setImage(projectId, imageName) {
|
||||
if (!imageName) {
|
||||
imageName = 'wl_texlive:2018.1'
|
||||
try {
|
||||
await ProjectOptionsHandler.setImageName(projectId, imageName)
|
||||
} catch {
|
||||
logger.warn({ imageName: imageName }, 'not available')
|
||||
await ProjectOptionsHandler.setImageName(projectId, settings.currentImageName)
|
||||
}
|
||||
|
||||
await ProjectOptionsHandler.setImageName(projectId, imageName)
|
||||
},
|
||||
|
||||
async _setMainFile(projectId, mainFile) {
|
||||
|
@ -116,6 +107,13 @@ const TemplatesManager = {
|
|||
await ProjectRootDocManager.setRootDocFromName(projectId, mainFile)
|
||||
},
|
||||
|
||||
async _setSpellCheckLanguage(projectId, language) {
|
||||
if (language == null) {
|
||||
return
|
||||
}
|
||||
await ProjectOptionsHandler.setSpellCheckLanguage(projectId, language)
|
||||
},
|
||||
|
||||
async _setBrandVariationId(projectId, brandVariationId) {
|
||||
if (brandVariationId == null) {
|
||||
return
|
||||
|
|
|
@ -428,7 +428,7 @@ module.exports = function (webRouter, privateApiRouter, publicApiRouter) {
|
|||
labsEnabled: Settings.labs && Settings.labs.enable,
|
||||
wikiEnabled: Settings.overleaf != null || Settings.proxyLearn,
|
||||
templatesEnabled:
|
||||
Settings.overleaf != null || Settings.templates?.user_id != null,
|
||||
Settings.overleaf != null || Boolean(Settings.templates),
|
||||
cioWriteKey: Settings.analytics?.cio?.writeKey,
|
||||
cioSiteId: Settings.analytics?.cio?.siteId,
|
||||
}
|
||||
|
|
|
@ -69,7 +69,7 @@ const Features = {
|
|||
case 'oauth':
|
||||
return Boolean(Settings.oauth)
|
||||
case 'templates-server-pro':
|
||||
return Boolean(Settings.templates?.user_id)
|
||||
return Boolean(Settings.templates)
|
||||
case 'affiliations':
|
||||
case 'analytics':
|
||||
return Boolean(_.get(Settings, ['apis', 'v1', 'url']))
|
||||
|
|
|
@ -262,6 +262,8 @@ async function initialize(webRouter, privateApiRouter, publicApiRouter) {
|
|||
'/read-only/one-time-login'
|
||||
)
|
||||
|
||||
await Modules.applyRouter(webRouter, privateApiRouter, publicApiRouter)
|
||||
|
||||
webRouter.post('/logout', UserController.logout)
|
||||
|
||||
webRouter.get('/restricted', AuthorizationMiddleware.restricted)
|
||||
|
@ -285,8 +287,6 @@ async function initialize(webRouter, privateApiRouter, publicApiRouter) {
|
|||
TokenAccessRouter.apply(webRouter)
|
||||
HistoryRouter.apply(webRouter, privateApiRouter)
|
||||
|
||||
await Modules.applyRouter(webRouter, privateApiRouter, publicApiRouter)
|
||||
|
||||
if (Settings.enableSubscriptions) {
|
||||
webRouter.get(
|
||||
'/user/bonus',
|
||||
|
|
|
@ -146,6 +146,18 @@ nav.navbar.navbar-default.navbar-main.navbar-expand-lg(class={
|
|||
event-segmentation={ page: currentUrl, item: 'register', location: 'top-menu' }
|
||||
) #{translate('sign_up')}
|
||||
|
||||
// templates link
|
||||
if settings.templates
|
||||
+nav-item
|
||||
+nav-link(
|
||||
href="/templates"
|
||||
event-tracking="menu-click"
|
||||
event-tracking-action="clicked"
|
||||
event-tracking-trigger="click"
|
||||
event-tracking-mb="true"
|
||||
event-segmentation={ page: currentUrl, item: 'templates', location: 'top-menu' }
|
||||
) #{translate('templates')}
|
||||
|
||||
// login link
|
||||
+nav-item
|
||||
+nav-link(
|
||||
|
|
|
@ -140,6 +140,18 @@ nav.navbar.navbar-default.navbar-main(class={
|
|||
|
||||
// logged out
|
||||
if !getSessionUser()
|
||||
// templates link
|
||||
if settings.templates
|
||||
li
|
||||
a(
|
||||
href="/templates"
|
||||
event-tracking="menu-click"
|
||||
event-tracking-action="clicked"
|
||||
event-tracking-trigger="click"
|
||||
event-tracking-mb="true"
|
||||
event-segmentation={ page: currentUrl, item: 'templates', location: 'top-menu' }
|
||||
) #{translate('templates')}
|
||||
|
||||
// register link
|
||||
if hasFeature('registration-page')
|
||||
li.primary
|
||||
|
|
|
@ -31,8 +31,10 @@ block content
|
|||
input(type="hidden" name="templateVersionId" value=templateVersionId)
|
||||
input(type="hidden" name="templateName" value=name)
|
||||
input(type="hidden" name="compiler" value=compiler)
|
||||
input(type="hidden" name="imageName" value=imageName)
|
||||
if imageName
|
||||
input(type="hidden" name="imageName" value=imageName)
|
||||
input(type="hidden" name="mainFile" value=mainFile)
|
||||
input(type="hidden" name="language" value=language)
|
||||
if brandVariationId
|
||||
input(type="hidden" name="brandVariationId" value=brandVariationId)
|
||||
input(hidden type="submit")
|
||||
|
|
18
services/web/app/views/template_gallery/template-gallery.pug
Normal file
18
services/web/app/views/template_gallery/template-gallery.pug
Normal file
|
@ -0,0 +1,18 @@
|
|||
extends ../layout-react
|
||||
|
||||
block entrypointVar
|
||||
- entrypoint = 'pages/template-gallery'
|
||||
|
||||
block vars
|
||||
block vars
|
||||
- const suppressNavContentLinks = true
|
||||
- const suppressNavbar = true
|
||||
- const suppressFooter = true
|
||||
- bootstrap5PageStatus = 'enabled' // One of 'disabled', 'enabled', and 'queryStringOnly'
|
||||
- isWebsiteRedesign = false
|
||||
|
||||
block append meta
|
||||
meta(name="ol-templateCategory" data-type="string" content=category)
|
||||
|
||||
block content
|
||||
#template-gallery-root
|
20
services/web/app/views/template_gallery/template.pug
Normal file
20
services/web/app/views/template_gallery/template.pug
Normal file
|
@ -0,0 +1,20 @@
|
|||
extends ../layout-react
|
||||
|
||||
block entrypointVar
|
||||
- entrypoint = 'pages/template'
|
||||
|
||||
block vars
|
||||
- const suppressNavContentLinks = true
|
||||
- const suppressNavbar = true
|
||||
- const suppressFooter = true
|
||||
- bootstrap5PageStatus = 'enabled' // One of 'disabled', 'enabled', and 'queryStringOnly'
|
||||
- isWebsiteRedesign = false
|
||||
|
||||
block append meta
|
||||
meta(name="ol-template" data-type="json" content=template)
|
||||
meta(name="ol-languages" data-type="json" content=languages)
|
||||
meta(name="ol-userIsAdmin" data-type="boolean" content=hasAdminAccess())
|
||||
|
||||
block content
|
||||
#template-root
|
||||
|
|
@ -981,7 +981,7 @@ module.exports = {
|
|||
importProjectFromGithubModalWrapper: [],
|
||||
importProjectFromGithubMenu: [],
|
||||
editorLeftMenuSync: [],
|
||||
editorLeftMenuManageTemplate: [],
|
||||
editorLeftMenuManageTemplate: ['@/features/editor-left-menu/components/actions-manage-template'],
|
||||
oauth2Server: [],
|
||||
managedGroupSubscriptionEnrollmentNotification: [],
|
||||
managedGroupEnrollmentInvite: [],
|
||||
|
@ -1005,6 +1005,7 @@ module.exports = {
|
|||
'launchpad',
|
||||
'server-ce-scripts',
|
||||
'user-activate',
|
||||
'template-gallery',
|
||||
],
|
||||
viewIncludes: {},
|
||||
|
||||
|
|
|
@ -23,6 +23,7 @@
|
|||
"about_to_delete_cert": "",
|
||||
"about_to_delete_projects": "",
|
||||
"about_to_delete_tag": "",
|
||||
"about_to_delete_template": "",
|
||||
"about_to_delete_the_following_project": "",
|
||||
"about_to_delete_the_following_projects": "",
|
||||
"about_to_delete_user_preamble": "",
|
||||
|
@ -124,6 +125,7 @@
|
|||
"all_premium_features_including": "",
|
||||
"all_projects": "",
|
||||
"all_projects_will_be_transferred_immediately": "",
|
||||
"all_templates": "",
|
||||
"all_these_experiments_are_available_exclusively": "",
|
||||
"allows_to_search_by_author_title_etc_possible_to_pull_results_directly_from_your_reference_manager_if_connected": "",
|
||||
"already_have_a_papers_account": "",
|
||||
|
@ -154,6 +156,7 @@
|
|||
"ask_repo_owner_to_reconnect": "",
|
||||
"ask_repo_owner_to_renew_overleaf_subscription": "",
|
||||
"at_most_x_libraries_can_be_selected": "",
|
||||
"author": "",
|
||||
"auto_close_brackets": "",
|
||||
"auto_compile": "",
|
||||
"auto_complete": "",
|
||||
|
@ -215,6 +218,8 @@
|
|||
"card_must_be_authenticated_by_3dsecure": "",
|
||||
"card_payment": "",
|
||||
"careers": "",
|
||||
"categories": "",
|
||||
"category": "",
|
||||
"category_arrows": "",
|
||||
"category_greek": "",
|
||||
"category_misc": "",
|
||||
|
@ -352,6 +357,7 @@
|
|||
"customize_your_group_subscription": "",
|
||||
"customizing_figures": "",
|
||||
"customizing_tables": "",
|
||||
"date": "",
|
||||
"date_and_owner": "",
|
||||
"dealing_with_errors": "",
|
||||
"decrease_indent": "",
|
||||
|
@ -377,6 +383,7 @@
|
|||
"delete_sso_config": "",
|
||||
"delete_table": "",
|
||||
"delete_tag": "",
|
||||
"delete_template": "",
|
||||
"delete_token": "",
|
||||
"delete_user": "",
|
||||
"delete_your_account": "",
|
||||
|
@ -476,6 +483,7 @@
|
|||
"edit_figure": "",
|
||||
"edit_sso_configuration": "",
|
||||
"edit_tag": "",
|
||||
"edit_template": "",
|
||||
"edit_your_custom_dictionary": "",
|
||||
"editing": "",
|
||||
"editing_captions": "",
|
||||
|
@ -890,6 +898,7 @@
|
|||
"last_name": "",
|
||||
"last_resort_trouble_shooting_guide": "",
|
||||
"last_suggested_fix": "",
|
||||
"last_updated": "",
|
||||
"last_updated_date_by_x": "",
|
||||
"last_used": "",
|
||||
"latam_discount_modal_info": "",
|
||||
|
@ -898,6 +907,8 @@
|
|||
"latex_in_thirty_minutes": "",
|
||||
"latex_places_figures_according_to_a_special_algorithm": "",
|
||||
"latex_places_tables_according_to_a_special_algorithm": "",
|
||||
"latex_templates": "",
|
||||
"latex_templates_for_journal_articles": "",
|
||||
"layout": "",
|
||||
"layout_options": "",
|
||||
"layout_processing": "",
|
||||
|
@ -921,7 +932,8 @@
|
|||
"let_us_know_what_you_think": "",
|
||||
"lets_get_those_premium_features": "",
|
||||
"library": "",
|
||||
"licenses": "",
|
||||
"license": "",
|
||||
"license_for_educational_purposes_confirmation": "",
|
||||
"limited_document_history": "",
|
||||
"limited_offer": "",
|
||||
"limited_to_n_collaborators_per_project": "",
|
||||
|
@ -1105,6 +1117,7 @@
|
|||
"no_selection_select_file": "",
|
||||
"no_symbols_found": "",
|
||||
"no_thanks_cancel_now": "",
|
||||
"no_templates_found": "",
|
||||
"normal": "",
|
||||
"normally_x_price_per_month": "",
|
||||
"normally_x_price_per_year": "",
|
||||
|
@ -1135,6 +1148,7 @@
|
|||
"only_importer_can_refresh": "",
|
||||
"open_action_menu": "",
|
||||
"open_advanced_reference_search": "",
|
||||
"open_as_template": "",
|
||||
"open_file": "",
|
||||
"open_link": "",
|
||||
"open_path": "",
|
||||
|
@ -1160,6 +1174,7 @@
|
|||
"overleaf_is_easy_to_use": "",
|
||||
"overleaf_labs": "",
|
||||
"overleaf_logo": "",
|
||||
"overleaf_template_gallery": "",
|
||||
"overleafs_functionality_meets_my_needs": "",
|
||||
"overview": "",
|
||||
"overwrite": "",
|
||||
|
@ -1222,6 +1237,7 @@
|
|||
"please_change_primary_to_remove": "",
|
||||
"please_check_your_inbox_to_confirm": "",
|
||||
"please_compile_pdf_before_download": "",
|
||||
"please_compile_pdf_before_publish_as_template": "",
|
||||
"please_compile_pdf_before_word_count": "",
|
||||
"please_confirm_primary_email_or_edit": "",
|
||||
"please_confirm_secondary_email_or_edit": "",
|
||||
|
@ -1256,6 +1272,7 @@
|
|||
"premium_plan_label": "",
|
||||
"presentation_mode": "",
|
||||
"press_and_awards": "",
|
||||
"prev": "",
|
||||
"previous_page": "",
|
||||
"price": "",
|
||||
"primarily_work_study_question": "",
|
||||
|
@ -1709,6 +1726,7 @@
|
|||
"tell_the_project_owner_and_ask_them_to_upgrade": "",
|
||||
"template": "",
|
||||
"template_description": "",
|
||||
"template_gallery": "",
|
||||
"template_title_taken_from_project_title": "",
|
||||
"templates": "",
|
||||
"temporarily_hides_the_preview": "",
|
||||
|
|
|
@ -0,0 +1,72 @@
|
|||
import { useCallback, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import * as eventTracking from '../../../infrastructure/event-tracking'
|
||||
import getMeta from '../../../utils/meta'
|
||||
import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
|
||||
import { useDetachCompileContext } from '../../../shared/context/detach-compile-context'
|
||||
import EditorManageTemplateModalWrapper from '../../template/components/manage-template-modal/editor-manage-template-modal-wrapper'
|
||||
import LeftMenuButton from './left-menu-button'
|
||||
|
||||
type TemplateManageResponse = {
|
||||
template_id: string
|
||||
}
|
||||
|
||||
export default function ActionsManageTemplate() {
|
||||
|
||||
const templatesAdmin = getMeta('ol-showTemplatesServerPro')
|
||||
if (!templatesAdmin) {
|
||||
return null
|
||||
}
|
||||
|
||||
const [showModal, setShowModal] = useState(false)
|
||||
const { pdfFile } = useDetachCompileContext()
|
||||
const { t } = useTranslation()
|
||||
|
||||
const handleShowModal = useCallback(() => {
|
||||
eventTracking.sendMB('left-menu-template')
|
||||
setShowModal(true)
|
||||
}, [])
|
||||
|
||||
const openTemplate = useCallback(
|
||||
({ template_id: templateId }: TemplateManageResponse) => {
|
||||
location.assign(`/template/${templateId}`)
|
||||
},
|
||||
[location]
|
||||
)
|
||||
|
||||
return (
|
||||
<>
|
||||
{pdfFile ? (
|
||||
<LeftMenuButton onClick={handleShowModal} icon='open_in_new'>
|
||||
{t('publish_as_template')}
|
||||
</LeftMenuButton>
|
||||
) : (
|
||||
<OLTooltip
|
||||
id="disabled-publish-as-template"
|
||||
description={t('please_compile_pdf_before_publish_as_template')}
|
||||
overlayProps={{
|
||||
placement: 'top',
|
||||
}}
|
||||
>
|
||||
{/* OverlayTrigger won't fire unless the child is a non-react html element (e.g div, span) */}
|
||||
<div>
|
||||
<LeftMenuButton
|
||||
icon='open_in_new'
|
||||
disabled
|
||||
disabledAccesibilityText={t(
|
||||
'please_compile_pdf_before_publish_as_template'
|
||||
)}
|
||||
>
|
||||
{t('publish_as_template')}
|
||||
</LeftMenuButton>
|
||||
</div>
|
||||
</OLTooltip>
|
||||
)}
|
||||
<EditorManageTemplateModalWrapper
|
||||
show={showModal}
|
||||
handleHide={() => setShowModal(false)}
|
||||
openTemplate={openTemplate}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
|
@ -0,0 +1,29 @@
|
|||
import { useTranslation } from 'react-i18next'
|
||||
import OLCol from '@/features/ui/components/ol/ol-col'
|
||||
import OLRow from '@/features/ui/components/ol/ol-row'
|
||||
|
||||
export default function GalleryHeaderAll() {
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<div className="gallery-header">
|
||||
<OLRow>
|
||||
<OLCol md={12}>
|
||||
<h1 className="gallery-title">
|
||||
<span className="eyebrow-text">
|
||||
<span aria-hidden="true">{</span>
|
||||
<span>{t('overleaf_template_gallery')}</span>
|
||||
<span aria-hidden="true">}</span>
|
||||
</span>
|
||||
{t('latex_templates')}
|
||||
</h1>
|
||||
</OLCol>
|
||||
</OLRow>
|
||||
<div className="row">
|
||||
<div className="col-md-12">
|
||||
<p className="gallery-summary">{t('latex_templates_for_journal_articles')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
|
@ -0,0 +1,33 @@
|
|||
import getMeta from '@/utils/meta'
|
||||
import OLCol from '@/features/ui/components/ol/ol-col'
|
||||
import OLRow from '@/features/ui/components/ol/ol-row'
|
||||
import GallerySearchSortHeader from './gallery-search-sort-header'
|
||||
|
||||
export default function GalleryHeaderTagged({ category }) {
|
||||
const title = getMeta('og:title')
|
||||
const { templateLinks } = getMeta('ol-ExposedSettings') || []
|
||||
|
||||
const description = templateLinks?.find(link => link.url.split("/").pop() === category)?.description
|
||||
const gotoAllLink = (category !== 'all')
|
||||
return (
|
||||
<div className="tagged-header-container">
|
||||
<GallerySearchSortHeader
|
||||
gotoAllLink={gotoAllLink}
|
||||
/>
|
||||
{ category && (
|
||||
<>
|
||||
<OLRow>
|
||||
<OLCol xs={12}>
|
||||
<h1 className="gallery-title">{title}</h1>
|
||||
</OLCol>
|
||||
</OLRow>
|
||||
<OLRow>
|
||||
<OLCol lg={8}>
|
||||
<p className="gallery-summary">{description}</p>
|
||||
</OLCol>
|
||||
</OLRow>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
|
@ -0,0 +1,31 @@
|
|||
import { useTranslation } from 'react-i18next'
|
||||
import getMeta from '@/utils/meta'
|
||||
|
||||
export default function GalleryPopularTags() {
|
||||
const { t } = useTranslation()
|
||||
const { templateLinks } = getMeta('ol-ExposedSettings') || []
|
||||
|
||||
if(!templateLinks || templateLinks.length < 2) return null
|
||||
|
||||
return (
|
||||
<div className="popular-tags">
|
||||
<h1>{t('categories')}</h1>
|
||||
<div className="row popular-tags-list">
|
||||
{templateLinks?.filter(link => link.url.split("/").pop() !== "all").map((link, index) => (
|
||||
<div key={index} className="gallery-thumbnail col-12 col-md-6 col-lg-4">
|
||||
<a href={link.url}>
|
||||
<div className="thumbnail-tag">
|
||||
<img
|
||||
src={`/img/website-redesign/gallery/${link.url.split("/").pop()}.svg`}
|
||||
alt={link.name}
|
||||
/>
|
||||
</div>
|
||||
<span className="caption-title">{link.name}</span>
|
||||
</a>
|
||||
<p>{link.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
|
@ -0,0 +1,78 @@
|
|||
import { useTemplateGalleryContext } from '../context/template-gallery-context'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import SearchForm from './search-form'
|
||||
import OLCol from '@/features/ui/components/ol/ol-col'
|
||||
import OLRow from '@/features/ui/components/ol/ol-row'
|
||||
import useSort from '../hooks/use-sort'
|
||||
import withContent, { SortBtnProps } from './sort/with-content'
|
||||
import MaterialIcon from '@/shared/components/material-icon'
|
||||
|
||||
function SortBtn({ onClick, text, iconType, screenReaderText }: SortBtnProps) {
|
||||
return (
|
||||
<button
|
||||
className="gallery-header-sort-btn inline-block"
|
||||
onClick={onClick}
|
||||
aria-label={screenReaderText}
|
||||
>
|
||||
<span>{text}</span>
|
||||
{iconType ? (
|
||||
<MaterialIcon type={iconType} />
|
||||
) : (
|
||||
<MaterialIcon type="arrow_upward" style={{ visibility: 'hidden' }} />
|
||||
)}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
const SortByButton = withContent(SortBtn)
|
||||
|
||||
export default function GallerySearchSortHeader( { gotoAllLink }: { boolean } ) {
|
||||
const { t } = useTranslation()
|
||||
const {
|
||||
searchText,
|
||||
setSearchText,
|
||||
sort,
|
||||
} = useTemplateGalleryContext()
|
||||
|
||||
const { handleSort } = useSort()
|
||||
return (
|
||||
<OLRow className="align-items-center">
|
||||
{gotoAllLink ? (
|
||||
<OLCol className="col-auto">
|
||||
<a className="previous-page-link" href="/templates/all">
|
||||
<i className="material-symbols material-symbols-rounded" aria-hidden="true">arrow_left_alt</i>
|
||||
{t('all_templates')}
|
||||
</a>
|
||||
</OLCol>
|
||||
) : (
|
||||
<OLCol className="col-auto">
|
||||
<a className="previous-page-link" href="/templates">
|
||||
<i className="material-symbols material-symbols-rounded" aria-hidden="true">arrow_left_alt</i>
|
||||
{t('template_gallery')}
|
||||
</a>
|
||||
</OLCol>
|
||||
)}
|
||||
<OLCol className="d-flex justify-content-center gap-2">
|
||||
<SortByButton
|
||||
column="lastUpdated"
|
||||
text={t('last_updated')}
|
||||
sort={sort}
|
||||
onClick={() => handleSort('lastUpdated')}
|
||||
/>
|
||||
|
||||
<SortByButton
|
||||
column="name"
|
||||
text={t('title')}
|
||||
sort={sort}
|
||||
onClick={() => handleSort('name')}
|
||||
/>
|
||||
</OLCol>
|
||||
<OLCol xs={3} className="ms-auto" >
|
||||
<SearchForm
|
||||
inputValue={searchText}
|
||||
setInputValue={setSearchText}
|
||||
/>
|
||||
</OLCol>
|
||||
</OLRow>
|
||||
)
|
||||
}
|
|
@ -0,0 +1,80 @@
|
|||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
export default function Pagination({ currentPage, totalPages, onPageChange }) {
|
||||
const { t } = useTranslation()
|
||||
if (totalPages <= 1) return null
|
||||
|
||||
const pageNumbers = []
|
||||
let startPage = Math.max(1, currentPage - 4)
|
||||
let endPage = Math.min(totalPages, currentPage + 4)
|
||||
|
||||
if (startPage > 1) {
|
||||
pageNumbers.push(1)
|
||||
if (startPage > 2) {
|
||||
pageNumbers.push("...")
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = startPage; i <= endPage; i++) {
|
||||
pageNumbers.push(i)
|
||||
}
|
||||
|
||||
if (endPage < totalPages) {
|
||||
if (endPage < totalPages - 1) {
|
||||
pageNumbers.push("...")
|
||||
}
|
||||
pageNumbers.push(totalPages)
|
||||
}
|
||||
|
||||
return (
|
||||
<nav role="navigation" aria-label={t('pagination_navigation')}>
|
||||
<ul className="pagination">
|
||||
{/*
|
||||
{currentPage > 1 && (
|
||||
<li>
|
||||
<button aria-label={t('go_to_first_page')} onClick={() => onPageChange(1)}>
|
||||
<< {t('first')}
|
||||
</button>
|
||||
</li>
|
||||
)}
|
||||
*/}
|
||||
{currentPage > 1 && (
|
||||
<li>
|
||||
<button aria-label={t('go_prev_page')} onClick={() => onPageChange(currentPage - 1)}>
|
||||
< {t('prev')}
|
||||
</button>
|
||||
</li>
|
||||
)}
|
||||
{pageNumbers.map((page, index) => (
|
||||
<li key={index} className={page === currentPage ? "active" : ""}>
|
||||
{page === "..." ? (
|
||||
<span aria-hidden="true">{page}</span>
|
||||
) : page === currentPage ? (
|
||||
<span aria-label={t('page_current', { page })} aria-current="true">{page}</span>
|
||||
) : (
|
||||
<button aria-label={t('go_page', { page })} onClick={() => onPageChange(page)}>
|
||||
{page}
|
||||
</button>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
{currentPage < totalPages && (
|
||||
<li>
|
||||
<button aria-label={t('go_next_page')} onClick={() => onPageChange(currentPage + 1)}>
|
||||
{t('next')} >
|
||||
</button>
|
||||
</li>
|
||||
)}
|
||||
{/*
|
||||
{currentPage < totalPages && (
|
||||
<li>
|
||||
<button aria-label={t('go_to_last_page')} onClick={() => onPageChange(totalPages)}>
|
||||
{t('last')} >>
|
||||
</button>
|
||||
</li>
|
||||
)}
|
||||
*/}
|
||||
</ul>
|
||||
</nav>
|
||||
)
|
||||
}
|
|
@ -0,0 +1,61 @@
|
|||
import { useTranslation } from 'react-i18next'
|
||||
import { MergeAndOverride } from '../../../../../types/utils'
|
||||
import OLForm from '@/features/ui/components/ol/ol-form'
|
||||
import OLFormControl from '@/features/ui/components/ol/ol-form-control'
|
||||
import MaterialIcon from '@/shared/components/material-icon'
|
||||
|
||||
type SearchFormOwnProps = {
|
||||
inputValue: string
|
||||
setInputValue: (input: string) => void
|
||||
}
|
||||
|
||||
type SearchFormProps = MergeAndOverride<
|
||||
React.ComponentProps<typeof OLForm>,
|
||||
SearchFormOwnProps
|
||||
>
|
||||
|
||||
export default function SearchForm({
|
||||
inputValue,
|
||||
setInputValue,
|
||||
}: SearchFormProps) {
|
||||
const { t } = useTranslation()
|
||||
let placeholderMessage = t('search')
|
||||
const placeholder = `${placeholderMessage}…`
|
||||
|
||||
const handleChange: React.ComponentProps<typeof OLFormControl
|
||||
>['onChange'] = e => {
|
||||
setInputValue(e.target.value)
|
||||
}
|
||||
|
||||
const handleClear = () => setInputValue('')
|
||||
|
||||
return (
|
||||
<OLForm
|
||||
role="search"
|
||||
onSubmit={e => e.preventDefault()}
|
||||
>
|
||||
<OLFormControl
|
||||
className="gallery-search-form-control"
|
||||
id="gallery-search-form-control"
|
||||
type="text"
|
||||
value={inputValue}
|
||||
onChange={handleChange}
|
||||
placeholder={placeholder}
|
||||
aria-label={placeholder}
|
||||
prepend={<MaterialIcon type="search" />}
|
||||
append={
|
||||
inputValue.length > 0 && (
|
||||
<button
|
||||
type="button"
|
||||
className="form-control-search-clear-btn"
|
||||
aria-label={t('clear_search')}
|
||||
onClick={handleClear}
|
||||
>
|
||||
<MaterialIcon type="clear" />
|
||||
</button>
|
||||
)
|
||||
}
|
||||
/>
|
||||
</OLForm>
|
||||
)
|
||||
}
|
|
@ -0,0 +1,46 @@
|
|||
import { useTranslation } from 'react-i18next'
|
||||
import { Sort } from '../../types/api'
|
||||
|
||||
type SortBtnOwnProps = {
|
||||
column: string
|
||||
sort: Sort
|
||||
text: string
|
||||
onClick: () => void
|
||||
}
|
||||
|
||||
type WithContentProps = {
|
||||
iconType?: string
|
||||
screenReaderText: string
|
||||
}
|
||||
|
||||
export type SortBtnProps = SortBtnOwnProps & WithContentProps
|
||||
|
||||
function withContent<T extends SortBtnOwnProps>(
|
||||
WrappedComponent: React.ComponentType<T & WithContentProps>
|
||||
) {
|
||||
function WithContent(hocProps: T) {
|
||||
const { t } = useTranslation()
|
||||
const { column, text, sort } = hocProps
|
||||
let iconType
|
||||
|
||||
let screenReaderText = t('sort_by_x', { x: text })
|
||||
|
||||
if (column === sort.by) {
|
||||
iconType =
|
||||
sort.order === 'asc' ? 'arrow_upward_alt' : 'arrow_downward_alt'
|
||||
screenReaderText = t('reverse_x_sort_order', { x: text })
|
||||
}
|
||||
|
||||
return (
|
||||
<WrappedComponent
|
||||
{...hocProps}
|
||||
iconType={iconType}
|
||||
screenReaderText={screenReaderText}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
return WithContent
|
||||
}
|
||||
|
||||
export default withContent
|
|
@ -0,0 +1,29 @@
|
|||
import { memo } from 'react'
|
||||
import { cleanHtml } from '../../../../../modules/template-gallery/app/src/CleanHtml.mjs'
|
||||
|
||||
function TemplateGalleryEntry({ template }) {
|
||||
return (
|
||||
<div className={"gallery-thumbnail col-12 col-md-6 col-lg-4"}>
|
||||
<a href={`/template/${template.id}`} className="thumbnail-link">
|
||||
<div className="thumbnail">
|
||||
<img
|
||||
src={`/template/${template.id}/preview?version=${template.version}&style=thumbnail`}
|
||||
alt={template.name}
|
||||
/>
|
||||
</div>
|
||||
<span className="gallery-list-item-title">
|
||||
<span className="caption-title">{template.name}</span>
|
||||
<span className="badge-container"></span>
|
||||
</span>
|
||||
</a>
|
||||
<div className="caption">
|
||||
<p className="caption-description" dangerouslySetInnerHTML={{ __html: cleanHtml(template.description, 'plainText') }} />
|
||||
</div>
|
||||
<div className="author-name">
|
||||
<div dangerouslySetInnerHTML={{ __html: cleanHtml(template.author, 'plainText') }} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default memo(TemplateGalleryEntry)
|
|
@ -0,0 +1,64 @@
|
|||
import { TemplateGalleryProvider } from '../context/template-gallery-context'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import useWaitForI18n from '../../../shared/hooks/use-wait-for-i18n'
|
||||
import withErrorBoundary from '../../../infrastructure/error-boundary'
|
||||
import { GenericErrorBoundaryFallback } from '@/shared/components/generic-error-boundary-fallback'
|
||||
import getMeta from '@/utils/meta'
|
||||
import DefaultNavbar from '@/features/ui/components/bootstrap-5/navbar/default-navbar'
|
||||
import Footer from '@/features/ui/components/bootstrap-5/footer/footer'
|
||||
import GalleryHeaderTagged from './gallery-header-tagged'
|
||||
import GalleryHeaderAll from './gallery-header-all'
|
||||
import TemplateGallery from './template-gallery'
|
||||
import GallerySearchSortHeader from './gallery-search-sort-header'
|
||||
import GalleryPopularTags from './gallery-popular-tags'
|
||||
|
||||
function TemplateGalleryRoot() {
|
||||
const { isReady } = useWaitForI18n()
|
||||
if (!isReady) {
|
||||
return null
|
||||
}
|
||||
return (
|
||||
<TemplateGalleryProvider>
|
||||
<TemplateGalleryPageContent />
|
||||
</TemplateGalleryProvider>
|
||||
)
|
||||
}
|
||||
|
||||
function TemplateGalleryPageContent() {
|
||||
const { t } = useTranslation()
|
||||
const navbarProps = getMeta('ol-navbar')
|
||||
const footerProps = getMeta('ol-footer')
|
||||
const category = getMeta('ol-templateCategory')
|
||||
|
||||
return (
|
||||
<>
|
||||
<DefaultNavbar {...navbarProps} />
|
||||
<main id="main-content"
|
||||
className={`content content-page gallery ${category ? 'gallery-tagged' : ''}`}
|
||||
>
|
||||
<div className="container">
|
||||
{category ? (
|
||||
<>
|
||||
<GalleryHeaderTagged category={category} />
|
||||
<TemplateGallery />
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<GalleryHeaderAll />
|
||||
<GalleryPopularTags />
|
||||
<hr className="w-full border-muted mb-5" />
|
||||
<div className="recent-docs">
|
||||
<GallerySearchSortHeader />
|
||||
<h2>{t('all_templates')}</h2>
|
||||
<TemplateGallery />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
<Footer {...footerProps} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default withErrorBoundary(TemplateGalleryRoot, GenericErrorBoundaryFallback)
|
|
@ -0,0 +1,65 @@
|
|||
import { useEffect, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import OLRow from '@/features/ui/components/ol/ol-row'
|
||||
import { useTemplateGalleryContext } from '../context/template-gallery-context'
|
||||
import TemplateGalleryEntry from './template-gallery-entry'
|
||||
import Pagination from './pagination'
|
||||
|
||||
export default function TemplateGallery() {
|
||||
const { t } = useTranslation()
|
||||
const {
|
||||
searchText,
|
||||
sort,
|
||||
visibleTemplates,
|
||||
} = useTemplateGalleryContext()
|
||||
|
||||
const templatesPerPage = 6
|
||||
const totalPages = Math.ceil(visibleTemplates.length / templatesPerPage)
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(1)
|
||||
|
||||
useEffect(() => {
|
||||
setCurrentPage(1)
|
||||
}, [sort])
|
||||
|
||||
const [lastNonSearchPage, setLastNonSearchPage] = useState(1)
|
||||
const [isSearching, setIsSearching] = useState(false)
|
||||
useEffect(() => {
|
||||
if (searchText.length > 0) {
|
||||
if (!isSearching) {
|
||||
setLastNonSearchPage(currentPage)
|
||||
setIsSearching(true)
|
||||
}
|
||||
setCurrentPage(1)
|
||||
} else {
|
||||
if (isSearching) {
|
||||
setCurrentPage(lastNonSearchPage)
|
||||
setIsSearching(false)
|
||||
}
|
||||
}
|
||||
}, [searchText])
|
||||
|
||||
const startIndex = (currentPage - 1) * templatesPerPage
|
||||
const currentTemplates = visibleTemplates.slice(startIndex, startIndex + templatesPerPage)
|
||||
|
||||
return (
|
||||
<>
|
||||
<OLRow className="gallery-container">
|
||||
{currentTemplates.length > 0 ? (
|
||||
currentTemplates.map(p => (
|
||||
<TemplateGalleryEntry
|
||||
className="gallery-thumbnail col-12 col-md-6 col-lg-4"
|
||||
key={p.id}
|
||||
template={p}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<OLRow>
|
||||
<p className="text-center">{t('no_templates_found')}</p>
|
||||
</OLRow>
|
||||
)}
|
||||
</OLRow>
|
||||
<Pagination currentPage={currentPage} totalPages={totalPages} onPageChange={setCurrentPage} />
|
||||
</>
|
||||
)
|
||||
}
|
|
@ -0,0 +1,129 @@
|
|||
import {
|
||||
createContext,
|
||||
ReactNode,
|
||||
useContext,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from 'react'
|
||||
import { Template } from '../../../../../types/template'
|
||||
import { GetTemplatesResponseBody, Sort } from '../types/api'
|
||||
import getMeta from '../../../utils/meta'
|
||||
import useAsync from '../../../shared/hooks/use-async'
|
||||
import { getTemplates } from '../util/api'
|
||||
import sortTemplates from '../util/sort-templates'
|
||||
import { debugConsole } from '@/utils/debugging'
|
||||
|
||||
export type TemplateGalleryContextValue = {
|
||||
visibleTemplates: Template[]
|
||||
totalTemplatesCount: number
|
||||
error: Error | null
|
||||
sort: Sort
|
||||
setSort: React.Dispatch<React.SetStateAction<Sort>>
|
||||
searchText: string
|
||||
setSearchText: React.Dispatch<React.SetStateAction<string>>
|
||||
}
|
||||
|
||||
export const TemplateGalleryContext = createContext<
|
||||
TemplateGalleryContextValue | undefined
|
||||
>(undefined)
|
||||
|
||||
type TemplateGalleryProviderProps = {
|
||||
children: ReactNode
|
||||
}
|
||||
|
||||
export function TemplateGalleryProvider({ children }: TemplateGalleryProviderProps) {
|
||||
const [loadedTemplates, setLoadedTemplates] = useState<Template[]>([])
|
||||
const [visibleTemplates, setVisibleTemplates] = useState<Template[]>([])
|
||||
const [totalTemplatesCount, setTotalTemplatesCount] = useState<number>(0)
|
||||
const [sort, setSort] = useState<Sort>({
|
||||
by: 'lastUpdated',
|
||||
order: 'desc',
|
||||
})
|
||||
const prevSortRef = useRef<Sort>(sort)
|
||||
|
||||
const [searchText, setSearchText] = useState('')
|
||||
|
||||
const {
|
||||
error,
|
||||
runAsync,
|
||||
} = useAsync<GetTemplatesResponseBody>()
|
||||
|
||||
const category = getMeta('ol-templateCategory') || 'all'
|
||||
|
||||
useEffect(() => {
|
||||
runAsync(getTemplates(sort, category))
|
||||
.then(data => {
|
||||
setLoadedTemplates(data.templates)
|
||||
setTotalTemplatesCount(data.totalSize)
|
||||
})
|
||||
.catch(debugConsole.error)
|
||||
.finally(() => {
|
||||
})
|
||||
}, [runAsync])
|
||||
|
||||
useEffect(() => {
|
||||
let filteredTemplates = [...loadedTemplates]
|
||||
|
||||
if (searchText.length) {
|
||||
filteredTemplates = filteredTemplates.filter(template =>
|
||||
template.name.toLowerCase().includes(searchText.toLowerCase()) ||
|
||||
template.description.toLowerCase().includes(searchText.toLowerCase())
|
||||
)
|
||||
}
|
||||
|
||||
if (prevSortRef.current !== sort) {
|
||||
filteredTemplates = sortTemplates(filteredTemplates, sort)
|
||||
const loadedTemplatesSorted = sortTemplates(loadedTemplates, sort)
|
||||
setLoadedTemplates(loadedTemplatesSorted)
|
||||
}
|
||||
setVisibleTemplates(filteredTemplates)
|
||||
}, [
|
||||
loadedTemplates,
|
||||
searchText,
|
||||
sort,
|
||||
])
|
||||
|
||||
useEffect(() => {
|
||||
prevSortRef.current = sort
|
||||
}, [sort])
|
||||
|
||||
|
||||
const value = useMemo<TemplateGalleryContextValue>(
|
||||
() => ({
|
||||
error,
|
||||
searchText,
|
||||
setSearchText,
|
||||
setSort,
|
||||
sort,
|
||||
totalTemplatesCount,
|
||||
visibleTemplates,
|
||||
}),
|
||||
[
|
||||
error,
|
||||
searchText,
|
||||
setSearchText,
|
||||
setSort,
|
||||
sort,
|
||||
totalTemplatesCount,
|
||||
visibleTemplates,
|
||||
]
|
||||
)
|
||||
|
||||
return (
|
||||
<TemplateGalleryContext.Provider value={value}>
|
||||
{children}
|
||||
</TemplateGalleryContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export function useTemplateGalleryContext() {
|
||||
const context = useContext(TemplateGalleryContext)
|
||||
if (!context) {
|
||||
throw new Error(
|
||||
'TemplateGalleryContext is only available inside TemplateGalleryProvider'
|
||||
)
|
||||
}
|
||||
return context
|
||||
}
|
|
@ -0,0 +1,20 @@
|
|||
import { useTemplateGalleryContext } from '../context/template-gallery-context'
|
||||
import { Sort } from '../types/api'
|
||||
import { SortingOrder } from '../../../../../types/sorting-order'
|
||||
|
||||
const toggleSort = (order: SortingOrder): SortingOrder => {
|
||||
return order === 'asc' ? 'desc' : 'asc'
|
||||
}
|
||||
|
||||
function useSort() {
|
||||
const { sort, setSort } = useTemplateGalleryContext()
|
||||
const handleSort = (by: Sort['by']) => {
|
||||
setSort(prev => ({
|
||||
by,
|
||||
order: prev.by === by ? toggleSort(sort.order) : by === 'lastUpdated' ? 'desc' : 'asc',
|
||||
}))
|
||||
}
|
||||
return { handleSort }
|
||||
}
|
||||
|
||||
export default useSort
|
|
@ -0,0 +1,12 @@
|
|||
import { SortingOrder } from '../../../../../types/sorting-order'
|
||||
import { Template } from '../../../../../types/template'
|
||||
|
||||
export type Sort = {
|
||||
by: 'lastUpdated' | 'name'
|
||||
order: SortingOrder
|
||||
}
|
||||
|
||||
export type GetTemplatesResponseBody = {
|
||||
totalSize: number
|
||||
templates: Template[]
|
||||
}
|
|
@ -0,0 +1,12 @@
|
|||
import { GetTemplatesResponseBody, Sort } from '../types/api'
|
||||
import { getJSON } from '../../../infrastructure/fetch-json'
|
||||
|
||||
export function getTemplates(sortBy: Sort, category: string): Promise<GetTemplatesResponseBody> {
|
||||
const queryParams = new URLSearchParams({
|
||||
by: sortBy.by,
|
||||
order: sortBy.order,
|
||||
category,
|
||||
}).toString()
|
||||
|
||||
return getJSON(`/api/templates?${queryParams}`)
|
||||
}
|
|
@ -0,0 +1,40 @@
|
|||
import { Sort } from '../types/api'
|
||||
import { Template } from '../../../../../types/template'
|
||||
import { SortingOrder } from '../../../../../types/sorting-order'
|
||||
import { Compare } from '../../../../../types/helpers/array/sort'
|
||||
|
||||
const order = (order: SortingOrder, templates: Template[]) => {
|
||||
return order === 'asc' ? [...templates] : templates.reverse()
|
||||
}
|
||||
|
||||
export const defaultComparator = (
|
||||
v1: Template,
|
||||
v2: Template,
|
||||
key: 'name' | 'lastUpdated'
|
||||
) => {
|
||||
const value1 = v1[key].toLowerCase()
|
||||
const value2 = v2[key].toLowerCase()
|
||||
|
||||
if (value1 !== value2) {
|
||||
return value1 < value2 ? Compare.SORT_A_BEFORE_B : Compare.SORT_A_AFTER_B
|
||||
}
|
||||
|
||||
return Compare.SORT_KEEP_ORDER
|
||||
}
|
||||
|
||||
export default function sortTemplates(templates: Template[], sort: Sort) {
|
||||
let sorted = [...templates]
|
||||
if (sort.by === 'name') {
|
||||
sorted = sorted.sort((...args) => {
|
||||
return defaultComparator(...args, 'name')
|
||||
})
|
||||
}
|
||||
|
||||
if (sort.by === 'lastUpdated') {
|
||||
sorted = sorted.sort((...args) => {
|
||||
return defaultComparator(...args, 'lastUpdated')
|
||||
})
|
||||
}
|
||||
|
||||
return order(sort.order, sorted)
|
||||
}
|
|
@ -0,0 +1,48 @@
|
|||
import { useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import useIsMounted from '@/shared/hooks/use-is-mounted'
|
||||
import OLButton from '@/features/ui/components/ol/ol-button'
|
||||
import DeleteTemplateModal from './modals/delete-template-modal'
|
||||
import { useTemplateContext } from '../context/template-context'
|
||||
import { deleteTemplate } from '../util/api'
|
||||
import type { Template } from '../../../../../types/template'
|
||||
|
||||
function DeleteTemplateButton() {
|
||||
const { t } = useTranslation()
|
||||
const [showModal, setShowModal] = useState(false)
|
||||
const isMounted = useIsMounted()
|
||||
const { template, setTemplate } = useTemplateContext()
|
||||
|
||||
const handleOpenModal = () => {
|
||||
setShowModal(true)
|
||||
}
|
||||
|
||||
const handleCloseModal = () => {
|
||||
if (isMounted.current) {
|
||||
setShowModal(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDeleteTemplate = async (template: Template) => {
|
||||
await deleteTemplate(template)
|
||||
handleCloseModal()
|
||||
const previousPage = document.referrer || '/templates'
|
||||
window.location.href = previousPage
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<OLButton variant="danger" onClick={handleOpenModal}>
|
||||
{t('delete')}
|
||||
</OLButton>
|
||||
<DeleteTemplateModal
|
||||
template={template}
|
||||
actionHandler={handleDeleteTemplate}
|
||||
showModal={showModal}
|
||||
handleCloseModal={handleCloseModal}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default DeleteTemplateButton
|
|
@ -0,0 +1,46 @@
|
|||
import { useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import useIsMounted from '@/shared/hooks/use-is-mounted'
|
||||
import OLButton from '@/features/ui/components/ol/ol-button'
|
||||
import EditTemplateModal from './modals/edit-template-modal'
|
||||
import { useTemplateContext } from '../context/template-context'
|
||||
import { updateTemplate } from '../util/api'
|
||||
import type { Template } from '../../../../../types/template'
|
||||
|
||||
export default function EditTemplateButton() {
|
||||
const { t } = useTranslation()
|
||||
const [showModal, setShowModal] = useState(false)
|
||||
const isMounted = useIsMounted()
|
||||
const { template, setTemplate } = useTemplateContext()
|
||||
|
||||
const handleOpenModal = () => {
|
||||
setShowModal(true)
|
||||
}
|
||||
|
||||
const handleCloseModal = () => {
|
||||
if (isMounted.current) {
|
||||
setShowModal(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleEditTemplate = async (editedTemplate: Template) => {
|
||||
const updated = await updateTemplate({ editedTemplate, template })
|
||||
if (updated) {
|
||||
setTemplate(prev => ({ ...prev, ...updated }))
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<OLButton variant="secondary" onClick={handleOpenModal}>
|
||||
{t('edit')}
|
||||
</OLButton>
|
||||
|
||||
<EditTemplateModal
|
||||
showModal={showModal}
|
||||
handleCloseModal={handleCloseModal}
|
||||
actionHandler={handleEditTemplate}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
|
@ -0,0 +1,17 @@
|
|||
import React from 'react'
|
||||
import OLFormControl from '@/features/ui/components/ol/ol-form-control'
|
||||
|
||||
interface FormFieldInputProps extends React.ComponentProps<typeof OLFormControl> {
|
||||
value: string
|
||||
placeholder?: string
|
||||
onChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>
|
||||
}
|
||||
|
||||
const FormFieldInput: React.FC<FormFieldInputProps> = ({
|
||||
type = 'text',
|
||||
...props
|
||||
}) => (
|
||||
<OLFormControl type={type} {...props} />
|
||||
)
|
||||
|
||||
export default FormFieldInput
|
|
@ -0,0 +1,26 @@
|
|||
import React from 'react'
|
||||
import OLFormGroup from '@/features/ui/components/ol/ol-form-group'
|
||||
import OLFormLabel from '@/features/ui/components/ol/ol-form-label'
|
||||
|
||||
interface LabeledRowFormGroupProps {
|
||||
controlId: string
|
||||
label: string
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
const LabeledRowFormGroup: React.FC<LabeledRowFormGroupProps> = ({
|
||||
controlId,
|
||||
label,
|
||||
children,
|
||||
}) => (
|
||||
<OLFormGroup controlId={controlId} className="row">
|
||||
<div className="col-2">
|
||||
<OLFormLabel className="col-form-label col">{label}</OLFormLabel>
|
||||
</div>
|
||||
<div className="col-10">
|
||||
{children}
|
||||
</div>
|
||||
</OLFormGroup>
|
||||
)
|
||||
|
||||
export default React.memo(LabeledRowFormGroup)
|
|
@ -0,0 +1,96 @@
|
|||
import React, { useCallback } from 'react'
|
||||
import LabeledRowFormGroup from '../form/labeled-row-form-group'
|
||||
import FormFieldInput from '../form/form-field-input'
|
||||
import SettingsTemplateCategory from '../settings/settings-template-category'
|
||||
import SettingsLicense from '../settings/settings-license'
|
||||
import SettingsLanguage from '../settings/settings-language'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import type { Template } from '../../../../../../types/template'
|
||||
|
||||
interface TemplateFormFieldsProps {
|
||||
template: Partial<Template>
|
||||
includeLanguage?: boolean
|
||||
onChange: (changes: Partial<Template>) => void
|
||||
onEnterKey?: () => void
|
||||
}
|
||||
|
||||
function TemplateFormFields({
|
||||
template,
|
||||
includeLanguage = false,
|
||||
onChange,
|
||||
onEnterKey,
|
||||
}: TemplateFormFieldsProps) {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const handleKeyDown = useCallback(
|
||||
(e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault()
|
||||
onEnterKey?.()
|
||||
}
|
||||
},
|
||||
[onEnterKey]
|
||||
)
|
||||
|
||||
return (
|
||||
<>
|
||||
<LabeledRowFormGroup controlId="form-title" label={t('title') + ':'}>
|
||||
<FormFieldInput
|
||||
required
|
||||
maxLength="255"
|
||||
value={template.name ?? ''}
|
||||
placeholder={t('title')}
|
||||
onChange={e => onChange({ name: e.target.value })}
|
||||
onKeyDown={handleKeyDown}
|
||||
/>
|
||||
</LabeledRowFormGroup>
|
||||
|
||||
<LabeledRowFormGroup controlId="form-author" label={t('author') + ':'}>
|
||||
<FormFieldInput
|
||||
maxLength="255"
|
||||
value={template.authorMD ?? ''}
|
||||
placeholder={t('author')}
|
||||
onChange={e => onChange({ authorMD: e.target.value })}
|
||||
onKeyDown={handleKeyDown}
|
||||
/>
|
||||
</LabeledRowFormGroup>
|
||||
|
||||
<LabeledRowFormGroup controlId="form-category" label={t('category') + ':'}>
|
||||
<SettingsTemplateCategory
|
||||
value={template.category}
|
||||
onChange={val => onChange({ category: val })}
|
||||
/>
|
||||
</LabeledRowFormGroup>
|
||||
|
||||
<LabeledRowFormGroup controlId="form-description" label={t('description') + ':'}>
|
||||
<FormFieldInput
|
||||
as="textarea"
|
||||
rows={8}
|
||||
maxLength="5000"
|
||||
value={template.descriptionMD ?? ''}
|
||||
placeholder={t('description')}
|
||||
onChange={e => onChange({ descriptionMD: e.target.value })}
|
||||
autoFocus
|
||||
/>
|
||||
</LabeledRowFormGroup>
|
||||
|
||||
<LabeledRowFormGroup controlId="form-license" label={t('license') + ':'}>
|
||||
<SettingsLicense
|
||||
value={template.license}
|
||||
onChange={val => onChange({ license: val })}
|
||||
/>
|
||||
</LabeledRowFormGroup>
|
||||
|
||||
{includeLanguage && (
|
||||
<LabeledRowFormGroup controlId="form-language" label={t('language') + ':'}>
|
||||
<SettingsLanguage
|
||||
value={template.language}
|
||||
onChange={val => onChange({ language: val })}
|
||||
/>
|
||||
</LabeledRowFormGroup>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(TemplateFormFields)
|
|
@ -0,0 +1,40 @@
|
|||
import React from 'react'
|
||||
import withErrorBoundary from '@/infrastructure/error-boundary'
|
||||
import { useProjectContext } from '@/shared/context/project-context'
|
||||
import ManageTemplateModal from './manage-template-modal'
|
||||
import type { Template } from '../../../../../../types/template'
|
||||
|
||||
interface EditorManageTemplateModalWrapperProps {
|
||||
show: boolean
|
||||
handleHide: () => void
|
||||
openTemplate: (data: Template) => void
|
||||
}
|
||||
|
||||
const EditorManageTemplateModalWrapper = React.memo(
|
||||
function EditorManageTemplateModalWrapper({
|
||||
show,
|
||||
handleHide,
|
||||
openTemplate,
|
||||
}: EditorManageTemplateModalWrapperProps) {
|
||||
const {
|
||||
_id: projectId,
|
||||
name: projectName,
|
||||
} = useProjectContext()
|
||||
|
||||
if (!projectName) {
|
||||
// wait for useProjectContext
|
||||
return null
|
||||
}
|
||||
return (
|
||||
<ManageTemplateModal
|
||||
handleHide={handleHide}
|
||||
show={show}
|
||||
handleAfterPublished={openTemplate}
|
||||
projectId={projectId}
|
||||
projectName={projectName}
|
||||
/>
|
||||
)
|
||||
}
|
||||
)
|
||||
|
||||
export default withErrorBoundary(EditorManageTemplateModalWrapper)
|
|
@ -0,0 +1,169 @@
|
|||
import React, { useEffect, useState, useRef } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { debugConsole } from '@/utils/debugging'
|
||||
import { getJSON, postJSON } from '@/infrastructure/fetch-json'
|
||||
import Notification from '@/shared/components/notification'
|
||||
import {
|
||||
OLModalBody,
|
||||
OLModalFooter,
|
||||
OLModalHeader,
|
||||
OLModalTitle,
|
||||
} from '@/features/ui/components/ol/ol-modal'
|
||||
import OLForm from '@/features/ui/components/ol/ol-form'
|
||||
import OLButton from '@/features/ui/components/ol/ol-button'
|
||||
import { useDetachCompileContext } from '@/shared/context/detach-compile-context'
|
||||
import { useUserContext } from '@/shared/context/user-context'
|
||||
import { useFocusTrap } from '../../hooks/use-focus-trap'
|
||||
import TemplateFormFields from '../form/template-form-fields'
|
||||
import type { Template } from '../../../../../../types/template'
|
||||
|
||||
|
||||
interface ManageTemplateModalContentProps {
|
||||
handleHide: () => void
|
||||
inFlight: boolean
|
||||
setInFlight: (inFlight: boolean) => void
|
||||
handleAfterPublished: (data: Template) => void
|
||||
projectId: string
|
||||
projectName: string
|
||||
}
|
||||
|
||||
export default function ManageTemplateModalContent({
|
||||
handleHide,
|
||||
inFlight,
|
||||
setInFlight,
|
||||
handleAfterPublished,
|
||||
projectId,
|
||||
projectName,
|
||||
}: ManageTemplateModalContentProps) {
|
||||
const { t } = useTranslation()
|
||||
const { pdfFile } = useDetachCompileContext()
|
||||
const user = useUserContext()
|
||||
|
||||
const [template, setTemplate] = useState<Partial<Template>>({
|
||||
name: projectName,
|
||||
authorMD: `${user.first_name} ${user.last_name}`.trim(),
|
||||
})
|
||||
const [override, setOverride] = useState(false)
|
||||
const [titleConflict, setTitleConflict] = useState(false)
|
||||
const [error, setError] = useState<string | false>(false)
|
||||
const [notificationType, setNotificationType] = useState<'error' | 'warning'>('error')
|
||||
const [disablePublish, setDisablePublish] = useState(false)
|
||||
|
||||
// Only the trimmed name gates submission
|
||||
const valid = (template.name ?? '').trim()
|
||||
|
||||
useEffect(() => {
|
||||
const queryParams = new URLSearchParams({ key: 'name', val: projectName })
|
||||
getJSON(`/api/template?${queryParams}`)
|
||||
.then((data) => {
|
||||
if (!data) return
|
||||
setTemplate(prev => ({
|
||||
...prev,
|
||||
descriptionMD: data.descriptionMD,
|
||||
authorMD: data.authorMD,
|
||||
license: data.license,
|
||||
category: data.category,
|
||||
}))
|
||||
})
|
||||
.catch(debugConsole.error)
|
||||
}, [])
|
||||
|
||||
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault()
|
||||
|
||||
if (!valid) return
|
||||
|
||||
setError(false)
|
||||
setInFlight(true)
|
||||
|
||||
postJSON(`/template/new/${projectId}`, {
|
||||
body: {
|
||||
category: template.category,
|
||||
name: valid,
|
||||
authorMD: (template.authorMD ?? '').trim(),
|
||||
license: template.license,
|
||||
descriptionMD: (template.descriptionMD ?? '').trim(),
|
||||
build: pdfFile.build,
|
||||
override,
|
||||
},
|
||||
})
|
||||
.then(data => {
|
||||
handleHide()
|
||||
handleAfterPublished(data)
|
||||
})
|
||||
.catch(({ response, data }) => {
|
||||
if (response?.status === 409 && data.canOverride) {
|
||||
setNotificationType('warning')
|
||||
setOverride(true)
|
||||
} else {
|
||||
setNotificationType('error')
|
||||
setDisablePublish(true)
|
||||
}
|
||||
setError(data.message)
|
||||
if (response?.status === 409) setTitleConflict(true)
|
||||
})
|
||||
.finally(() => {
|
||||
setInFlight(false)
|
||||
})
|
||||
}
|
||||
|
||||
const handleChange = (changes: Partial<Template>) => {
|
||||
if ('name' in changes && titleConflict) {
|
||||
setError(false)
|
||||
setOverride(false)
|
||||
if (disablePublish) setDisablePublish(false)
|
||||
}
|
||||
setTemplate(prev => ({ ...prev, ...changes }))
|
||||
}
|
||||
|
||||
const handleEnterKey = () => {
|
||||
document.getElementById('submit-publish-template')?.click()
|
||||
}
|
||||
|
||||
const modalRef = useRef<HTMLDivElement>(null)
|
||||
useFocusTrap(modalRef)
|
||||
|
||||
return (
|
||||
<div ref={modalRef}>
|
||||
<OLModalHeader closeButton>
|
||||
<OLModalTitle>{t('publish_as_template')}</OLModalTitle>
|
||||
</OLModalHeader>
|
||||
|
||||
<OLModalBody>
|
||||
<div className="modal-body-publish">
|
||||
<div className="content-as-table">
|
||||
<OLForm id="publish-template-form" onSubmit={handleSubmit}>
|
||||
<TemplateFormFields
|
||||
template={template}
|
||||
includeLanguage={false}
|
||||
onChange={handleChange}
|
||||
onEnterKey={handleEnterKey}
|
||||
/>
|
||||
</OLForm>
|
||||
</div>
|
||||
</div>
|
||||
{error && (
|
||||
<Notification
|
||||
content={error.length ? error : t('generic_something_went_wrong')}
|
||||
type={notificationType}
|
||||
/>
|
||||
)}
|
||||
</OLModalBody>
|
||||
|
||||
<OLModalFooter>
|
||||
<OLButton variant="secondary" disabled={inFlight} onClick={handleHide}>
|
||||
{t('cancel')}
|
||||
</OLButton>
|
||||
<OLButton
|
||||
id="submit-publish-template"
|
||||
variant={override ? 'danger' : 'primary'}
|
||||
disabled={inFlight || !valid || disablePublish}
|
||||
form="publish-template-form"
|
||||
type="submit"
|
||||
>
|
||||
{inFlight ? <>{t('publishing')}…</> : override ? t('overwrite') : t('publish')}
|
||||
</OLButton>
|
||||
</OLModalFooter>
|
||||
</div>
|
||||
)
|
||||
}
|
|
@ -0,0 +1,52 @@
|
|||
import React, { memo, useCallback, useState } from 'react'
|
||||
import OLModal from '@/features/ui/components/ol/ol-modal'
|
||||
import ManageTemplateModalContent from './manage-template-modal-content'
|
||||
import type { Template } from '../../../../../../types/template'
|
||||
|
||||
interface ManageTemplateModalProps {
|
||||
show: boolean
|
||||
handleHide: () => void
|
||||
handleAfterPublished: (data: Template) => void
|
||||
projectId: string
|
||||
projectName: string
|
||||
}
|
||||
|
||||
function ManageTemplateModal({
|
||||
show,
|
||||
handleHide,
|
||||
handleAfterPublished,
|
||||
projectId,
|
||||
projectName,
|
||||
}: ManageTemplateModalProps) {
|
||||
const [inFlight, setInFlight] = useState(false)
|
||||
|
||||
const onHide = useCallback(() => {
|
||||
if (!inFlight) {
|
||||
handleHide()
|
||||
}
|
||||
}, [handleHide, inFlight])
|
||||
|
||||
return (
|
||||
<OLModal
|
||||
size="lg"
|
||||
animation
|
||||
show={show}
|
||||
onHide={onHide}
|
||||
id="publish-template-modal"
|
||||
// backdrop="static" will disable closing the modal by clicking
|
||||
// outside of the modal element
|
||||
backdrop='static'
|
||||
>
|
||||
<ManageTemplateModalContent
|
||||
handleHide={onHide}
|
||||
inFlight={inFlight}
|
||||
setInFlight={setInFlight}
|
||||
handleAfterPublished={handleAfterPublished}
|
||||
projectId={projectId}
|
||||
projectName={projectName}
|
||||
/>
|
||||
</OLModal>
|
||||
)
|
||||
}
|
||||
|
||||
export default memo(ManageTemplateModal)
|
|
@ -0,0 +1,43 @@
|
|||
import { useTranslation } from 'react-i18next'
|
||||
import withErrorBoundary from '@/infrastructure/error-boundary'
|
||||
import Notification from '@/shared/components/notification'
|
||||
import TemplateActionModal from './template-action-modal'
|
||||
|
||||
type DeleteTemplateModalProps = Pick<
|
||||
React.ComponentProps<typeof TemplateActionModal>,
|
||||
'template' | 'actionHandler' | 'showModal' | 'handleCloseModal'
|
||||
>
|
||||
|
||||
function DeleteTemplateModal({
|
||||
template,
|
||||
actionHandler,
|
||||
showModal,
|
||||
handleCloseModal,
|
||||
}: DeleteTemplateModalProps) {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<TemplateActionModal
|
||||
action="delete"
|
||||
actionHandler={actionHandler}
|
||||
title={t('delete_template')}
|
||||
showModal={showModal}
|
||||
handleCloseModal={handleCloseModal}
|
||||
template={template}
|
||||
>
|
||||
<p>{t('about_to_delete_template')}</p>
|
||||
<ul>
|
||||
<li key={`template-action-list-${template.id}`}>
|
||||
<b>{template.name}</b>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<Notification
|
||||
content={t('this_action_cannot_be_undone')}
|
||||
type="warning"
|
||||
/>
|
||||
</TemplateActionModal>
|
||||
)
|
||||
}
|
||||
|
||||
export default withErrorBoundary(DeleteTemplateModal)
|
|
@ -0,0 +1,139 @@
|
|||
import React, { useReducer, useState, useEffect, useRef, useCallback, useMemo } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import OLForm from '@/features/ui/components/ol/ol-form'
|
||||
import OLButton from '@/features/ui/components/ol/ol-button'
|
||||
import withErrorBoundary from '@/infrastructure/error-boundary'
|
||||
//import { useFocusTrap } from '../../hooks/use-focus-trap'
|
||||
import TemplateActionModal from './template-action-modal'
|
||||
import { useTemplateContext } from '../../context/template-context'
|
||||
import TemplateFormFields from '../form/template-form-fields'
|
||||
import type { Template } from '../../../../../../types/template'
|
||||
|
||||
type EditTemplateModalProps = {
|
||||
showModal: boolean
|
||||
handleCloseModal: () => void
|
||||
actionHandler: (editedTemplate: Template) => void | Promise<void>
|
||||
}
|
||||
|
||||
type ActionError = {
|
||||
info?: {
|
||||
statusCode?: number
|
||||
}
|
||||
}
|
||||
|
||||
type TemplateFormAction =
|
||||
| { type: 'UPDATE'; payload: Partial<Template> }
|
||||
| { type: 'RESET'; payload: Template }
|
||||
| { type: 'CLEAR_FIELD'; field: keyof Template }
|
||||
|
||||
function templateFormReducer(state: Template, action: TemplateFormAction): Template {
|
||||
switch (action.type) {
|
||||
case 'UPDATE':
|
||||
return { ...state, ...action.payload }
|
||||
case 'RESET':
|
||||
return { ...action.payload }
|
||||
case 'CLEAR_FIELD':
|
||||
return { ...state, [action.field]: '' }
|
||||
default:
|
||||
return state
|
||||
}
|
||||
}
|
||||
|
||||
function EditTemplateModal({
|
||||
showModal,
|
||||
handleCloseModal,
|
||||
actionHandler,
|
||||
}: EditTemplateModalProps) {
|
||||
const { t } = useTranslation()
|
||||
const { template } = useTemplateContext()
|
||||
|
||||
const [editedTemplate, dispatch] = useReducer(templateFormReducer, template)
|
||||
const [actionError, setActionError] = useState<ActionError | null>(null)
|
||||
const clearModalErrorRef = useRef<() => void>(() => {})
|
||||
|
||||
useEffect(() => {
|
||||
if (showModal) {
|
||||
dispatch({ type: 'RESET', payload: template })
|
||||
setActionError(null)
|
||||
}
|
||||
}, [showModal, template])
|
||||
|
||||
const isConflictError = useMemo(
|
||||
() => actionError?.info?.statusCode === 409,
|
||||
[actionError]
|
||||
)
|
||||
|
||||
const valid = useMemo(
|
||||
() => editedTemplate.name.trim().length > 0,
|
||||
[editedTemplate.name]
|
||||
)
|
||||
|
||||
const handleChange = useCallback(
|
||||
(changes: Partial<Template>) => {
|
||||
dispatch({ type: 'UPDATE', payload: changes })
|
||||
if ('name' in changes && isConflictError) {
|
||||
setActionError(null)
|
||||
clearModalErrorRef.current?.()
|
||||
}
|
||||
},
|
||||
[isConflictError]
|
||||
)
|
||||
|
||||
const handleEnterKey = useCallback(() => {
|
||||
document.getElementById('submit-edit-template')?.click()
|
||||
}, [])
|
||||
|
||||
const handleAction = useCallback(() => {
|
||||
return Promise.resolve(actionHandler(editedTemplate)).catch(err => {
|
||||
setActionError(err)
|
||||
throw err
|
||||
})
|
||||
}, [actionHandler, editedTemplate])
|
||||
|
||||
const submitButtonDisabled = !valid || isConflictError
|
||||
|
||||
return (
|
||||
<TemplateActionModal
|
||||
action="edit"
|
||||
title={t('edit_template')}
|
||||
template={editedTemplate}
|
||||
showModal={showModal}
|
||||
handleCloseModal={handleCloseModal}
|
||||
size="lg"
|
||||
actionHandler={handleAction}
|
||||
renderFooterButtons={({ onConfirm, onCancel, isProcessing }) => (
|
||||
<>
|
||||
<OLButton variant="secondary" onClick={onCancel}>
|
||||
{t('cancel')}
|
||||
</OLButton>
|
||||
<OLButton
|
||||
id="submit-edit-template"
|
||||
onClick={onConfirm}
|
||||
variant="primary"
|
||||
disabled={submitButtonDisabled || isProcessing}
|
||||
>
|
||||
{t('save')}
|
||||
</OLButton>
|
||||
</>
|
||||
)}
|
||||
onClearError={fn => {
|
||||
clearModalErrorRef.current = fn
|
||||
}}
|
||||
>
|
||||
<div className="modal-body-publish">
|
||||
<div className="content-as-table">
|
||||
<OLForm onSubmit={e => e.preventDefault()}>
|
||||
<TemplateFormFields
|
||||
template={editedTemplate}
|
||||
includeLanguage
|
||||
onChange={handleChange}
|
||||
onEnterKey={handleEnterKey}
|
||||
/>
|
||||
</OLForm>
|
||||
</div>
|
||||
</div>
|
||||
</TemplateActionModal>
|
||||
)
|
||||
}
|
||||
|
||||
export default withErrorBoundary(React.memo(EditTemplateModal))
|
|
@ -0,0 +1,145 @@
|
|||
import { memo, useEffect, useState, useRef } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { getUserFacingMessage } from '@/infrastructure/fetch-json'
|
||||
import * as eventTracking from '@/infrastructure/event-tracking'
|
||||
import { isSmallDevice } from '@/infrastructure/event-tracking'
|
||||
import useIsMounted from '@/shared/hooks/use-is-mounted'
|
||||
import Notification from '@/shared/components/notification'
|
||||
import OLButton from '@/features/ui/components/ol/ol-button'
|
||||
import OLModal, {
|
||||
OLModalBody,
|
||||
OLModalFooter,
|
||||
OLModalHeader,
|
||||
OLModalTitle,
|
||||
} from '@/features/ui/components/ol/ol-modal'
|
||||
import type { Template } from '../../../../../../types/template'
|
||||
import { useFocusTrap } from '../../hooks/use-focus-trap'
|
||||
|
||||
type TemplateActionModalProps = {
|
||||
title: string
|
||||
size?: string
|
||||
action: 'delete' | 'edit'
|
||||
actionHandler: (template: Template) => Promise<void>
|
||||
handleCloseModal: () => void
|
||||
template: Template
|
||||
showModal: boolean
|
||||
children?: React.ReactNode
|
||||
renderFooterButtons?: (props: {
|
||||
onConfirm: () => void
|
||||
onCancel: () => void
|
||||
isProcessing: boolean
|
||||
}) => React.ReactNode
|
||||
onClearError?: (clear: () => void) => void
|
||||
}
|
||||
|
||||
function TemplateActionModal({
|
||||
title,
|
||||
size,
|
||||
action,
|
||||
actionHandler,
|
||||
handleCloseModal,
|
||||
showModal,
|
||||
template,
|
||||
children,
|
||||
renderFooterButtons,
|
||||
onClearError,
|
||||
}: TemplateActionModalProps) {
|
||||
const { t } = useTranslation()
|
||||
const [error, setError] = useState<false | { name: string; error: unknown }>(false)
|
||||
const [isProcessing, setIsProcessing] = useState(false)
|
||||
const isMounted = useIsMounted()
|
||||
const modalRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
useFocusTrap(modalRef, showModal)
|
||||
|
||||
useEffect(() => {
|
||||
if (onClearError) {
|
||||
onClearError(() => setError(false))
|
||||
}
|
||||
}, [onClearError])
|
||||
|
||||
async function handleActionForTemplate(template: Template) {
|
||||
let errored
|
||||
setIsProcessing(true)
|
||||
setError(false)
|
||||
|
||||
try {
|
||||
await actionHandler(template)
|
||||
} catch (e) {
|
||||
errored = { name: template.name, error: e }
|
||||
}
|
||||
|
||||
if (isMounted.current) {
|
||||
setIsProcessing(false)
|
||||
}
|
||||
|
||||
if (!errored) {
|
||||
handleCloseModal()
|
||||
} else {
|
||||
setError(errored)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (showModal) {
|
||||
eventTracking.sendMB('template-info-page-interaction', {
|
||||
action,
|
||||
isSmallDevice,
|
||||
})
|
||||
} else {
|
||||
setError(false)
|
||||
}
|
||||
}, [action, showModal])
|
||||
|
||||
return (
|
||||
<OLModal
|
||||
size={size}
|
||||
show={showModal}
|
||||
onHide={handleCloseModal}
|
||||
id="action-tempate-modal"
|
||||
backdrop="static"
|
||||
>
|
||||
<div ref={modalRef}>
|
||||
<OLModalHeader closeButton>
|
||||
<OLModalTitle>{title}</OLModalTitle>
|
||||
</OLModalHeader>
|
||||
|
||||
<OLModalBody>
|
||||
{children}
|
||||
{!isProcessing && error && (
|
||||
<Notification
|
||||
type="error"
|
||||
title={error.name}
|
||||
content={getUserFacingMessage(error.error) as string}
|
||||
/>
|
||||
)}
|
||||
</OLModalBody>
|
||||
|
||||
<OLModalFooter>
|
||||
{renderFooterButtons ? (
|
||||
renderFooterButtons({
|
||||
onConfirm: () => handleActionForTemplate(template),
|
||||
onCancel: handleCloseModal,
|
||||
isProcessing,
|
||||
})
|
||||
) : (
|
||||
<>
|
||||
<OLButton variant="secondary" onClick={handleCloseModal}>
|
||||
{t('cancel')}
|
||||
</OLButton>
|
||||
<OLButton
|
||||
variant="danger"
|
||||
onClick={() => handleActionForTemplate(template)}
|
||||
disabled={isProcessing}
|
||||
>
|
||||
{t('confirm')}
|
||||
</OLButton>
|
||||
</>
|
||||
)}
|
||||
</OLModalFooter>
|
||||
</div>
|
||||
</OLModal>
|
||||
)
|
||||
}
|
||||
|
||||
export default memo(TemplateActionModal)
|
|
@ -0,0 +1,42 @@
|
|||
import { useMemo } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import getMeta from '../../../../utils/meta'
|
||||
import SettingsMenuSelect from './settings-menu-select'
|
||||
import type { Optgroup } from './settings-menu-select'
|
||||
|
||||
interface SettingsLanguageProps {
|
||||
value: string
|
||||
onChange: (value: string) => void
|
||||
}
|
||||
|
||||
export default function SettingsLanguage({
|
||||
value,
|
||||
onChange,
|
||||
}: SettingsLanguageProps) {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const optgroup: Optgroup = useMemo(() => {
|
||||
const options = (getMeta('ol-languages') ?? [])
|
||||
// only include spell-check languages that are available in the client
|
||||
.filter(language => language.dic !== undefined)
|
||||
|
||||
return {
|
||||
label: 'Language',
|
||||
options: options.map(language => ({
|
||||
value: language.code,
|
||||
label: language.name,
|
||||
})),
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<SettingsMenuSelect
|
||||
onChange={onChange}
|
||||
value={value}
|
||||
options={[{ value: '', label: t('off') }]}
|
||||
optgroup={optgroup}
|
||||
label={t('spell_check')}
|
||||
name="spellCheckLanguage"
|
||||
/>
|
||||
)
|
||||
}
|
|
@ -0,0 +1,33 @@
|
|||
import { useTranslation } from 'react-i18next'
|
||||
import SettingsMenuSelect from './settings-menu-select'
|
||||
import type { Option } from './settings-menu-select'
|
||||
|
||||
export const licensesMap = {
|
||||
'cc_by_4.0': 'Creative Commons CC BY 4.0',
|
||||
'lppl_1.3c': 'LaTeX Project Public License 1.3c',
|
||||
'other': 'Other (as stated in the work)',
|
||||
}
|
||||
|
||||
interface SettingsLicenseProps {
|
||||
value: string
|
||||
onChange: (value: string) => void
|
||||
}
|
||||
|
||||
export default function SettingsLicense({
|
||||
value,
|
||||
onChange,
|
||||
}: SettingsLicenseProps) {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const options = Object.entries(licensesMap).map(([value, label]) => ({ value, label }))
|
||||
|
||||
return (
|
||||
<SettingsMenuSelect
|
||||
name="license"
|
||||
label={t('license')}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
options={options}
|
||||
/>
|
||||
)
|
||||
}
|
|
@ -0,0 +1,91 @@
|
|||
import { ChangeEventHandler, useCallback, useRef, useEffect } from 'react'
|
||||
import OLFormGroup from '@/features/ui/components/ol/ol-form-group'
|
||||
import OLFormLabel from '@/features/ui/components/ol/ol-form-label'
|
||||
import OLFormSelect from '@/features/ui/components/ol/ol-form-select'
|
||||
|
||||
type PossibleValue = string | number | boolean
|
||||
|
||||
export type Option<T extends PossibleValue = string> = {
|
||||
value: T
|
||||
label: string
|
||||
ariaHidden?: 'true' | 'false'
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
export type Optgroup<T extends PossibleValue = string> = {
|
||||
label: string
|
||||
options: Array<Option<T>>
|
||||
}
|
||||
|
||||
type SettingsMenuSelectProps<T extends PossibleValue = string> = {
|
||||
name: string
|
||||
options: Array<Option<T>>
|
||||
optgroup?: Optgroup<T>
|
||||
onChange: (val: T) => void
|
||||
value?: T
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
export default function SettingsMenuSelect<T extends PossibleValue = string>(
|
||||
props: SettingsMenuSelectProps<T>
|
||||
) {
|
||||
|
||||
const { name, options, optgroup, onChange, value, disabled = false } = props
|
||||
const defaultApplied = useRef(false)
|
||||
|
||||
useEffect(() => {
|
||||
if (value === undefined || value === null) {
|
||||
onChange(options?.[0]?.value || optgroup?.options?.[0]?.value)
|
||||
}
|
||||
}, [value, options, onChange])
|
||||
|
||||
const handleChange: ChangeEventHandler<HTMLSelectElement> = useCallback(
|
||||
event => {
|
||||
const selectedValue = event.target.value
|
||||
let onChangeValue: PossibleValue = selectedValue
|
||||
if (typeof value === 'boolean') {
|
||||
onChangeValue = selectedValue === 'true'
|
||||
} else if (typeof value === 'number') {
|
||||
onChangeValue = parseInt(selectedValue, 10)
|
||||
}
|
||||
onChange(onChangeValue as T)
|
||||
},
|
||||
[onChange, value]
|
||||
)
|
||||
const selectRef = useRef<HTMLSelectElement | null>(null)
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<OLFormSelect
|
||||
onChange={handleChange}
|
||||
value={value?.toString()}
|
||||
disabled={disabled}
|
||||
ref={selectRef}
|
||||
>
|
||||
{options.map(option => (
|
||||
<option
|
||||
key={`${name}-${option.value}`}
|
||||
value={option.value.toString()}
|
||||
aria-hidden={option.ariaHidden}
|
||||
disabled={option.disabled}
|
||||
>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
{optgroup ? (
|
||||
<optgroup label={optgroup.label}>
|
||||
{optgroup.options.map(option => (
|
||||
<option
|
||||
value={option.value.toString()}
|
||||
key={option.value.toString()}
|
||||
>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</optgroup>
|
||||
) : null}
|
||||
</OLFormSelect>
|
||||
</>
|
||||
)
|
||||
}
|
|
@ -0,0 +1,44 @@
|
|||
import React, { useMemo } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import getMeta from '@/utils/meta'
|
||||
import SettingsMenuSelect from './settings-menu-select'
|
||||
import type { Option } from './settings-menu-select'
|
||||
|
||||
interface SettingsTemplateCategoryProps {
|
||||
value: string
|
||||
onChange: (value: string) => void
|
||||
}
|
||||
|
||||
const SettingsTemplateCategory: React.FC<SettingsTemplateCategoryProps> = ({
|
||||
value,
|
||||
onChange,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const options: Option[] = useMemo(() => {
|
||||
const { templateLinks = [] } = getMeta('ol-ExposedSettings') as {
|
||||
templateLinks?: Array<{ name: string; url: string; description: string }>
|
||||
}
|
||||
|
||||
return templateLinks.map(({ name, url }) => ({
|
||||
value: url,
|
||||
label: name,
|
||||
}))
|
||||
}, [])
|
||||
|
||||
if (options.length === 0) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<SettingsMenuSelect
|
||||
name="category"
|
||||
label={`${t('category')}:`}
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
options={options}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(SettingsTemplateCategory)
|
|
@ -0,0 +1,104 @@
|
|||
import { useTranslation } from 'react-i18next'
|
||||
import getMeta from '@/utils/meta'
|
||||
import OLCol from '@/features/ui/components/ol/ol-col'
|
||||
import OLRow from '@/features/ui/components/ol/ol-row'
|
||||
import OLTooltip from '@/features/ui/components/ol/ol-tooltip'
|
||||
import { formatDate, fromNowDate } from '../../../utils/dates'
|
||||
import { cleanHtml } from '../../../../../modules/template-gallery/app/src/CleanHtml.mjs'
|
||||
import { useTemplateContext } from '../context/template-context'
|
||||
import DeleteTemplateButton from './delete-template-button'
|
||||
import EditTemplateButton from './edit-template-button'
|
||||
import { licensesMap } from './settings/settings-license'
|
||||
|
||||
function TemplateDetails() {
|
||||
const { t } = useTranslation()
|
||||
const {template, setTemplate} = useTemplateContext()
|
||||
const lastUpdatedDate = fromNowDate(template.lastUpdated)
|
||||
const tooltipText = formatDate(template.lastUpdated)
|
||||
const loggedInUserId = getMeta('ol-user_id')
|
||||
const loggedInUserIsAdmin = getMeta('ol-userIsAdmin')
|
||||
|
||||
const openAsTemplateParams = new URLSearchParams({
|
||||
version: template.version,
|
||||
...(template.brandVariationId && { brandVariationId: template.brandVariationId }),
|
||||
name: template.name,
|
||||
compiler: template.compiler,
|
||||
mainFile: template.mainFile,
|
||||
language: template.language,
|
||||
...(template.imageName && { imageName: template.imageName })
|
||||
}).toString()
|
||||
|
||||
const sanitizedAuthor = cleanHtml(template.author, 'linksOnly') || t('anonymous')
|
||||
const sanitizedDescription = cleanHtml(template.description, 'reachText')
|
||||
|
||||
return (
|
||||
<>
|
||||
<OLRow>
|
||||
<OLCol md={12}>
|
||||
<div className={"gallery-item-title"}>
|
||||
<h1 className="h2">{template.name}</h1>
|
||||
</div>
|
||||
</OLCol>
|
||||
</OLRow>
|
||||
<OLRow className="cta-links-container">
|
||||
<OLCol md={12} className="cta-links">
|
||||
<a className="btn btn-primary cta-link" href={`/project/new/template/${template.id}?${openAsTemplateParams}`}>{t('open_as_template')}</a>
|
||||
<a className="btn btn-secondary cta-link" href={`/template/${template.id}/preview?version=${template.version}`}>{t('view_pdf')}</a>
|
||||
</OLCol>
|
||||
</OLRow>
|
||||
<div className="template-details-container">
|
||||
<div className="template-detail">
|
||||
<div>
|
||||
<b>{t('author')}:</b>
|
||||
</div>
|
||||
<div dangerouslySetInnerHTML={{ __html: sanitizedAuthor }} />
|
||||
</div>
|
||||
<div className="template-detail">
|
||||
<div>
|
||||
<b>{t('last_updated')}:</b>
|
||||
</div>
|
||||
<div>
|
||||
<OLTooltip
|
||||
id={`${template.id}`}
|
||||
description={tooltipText}
|
||||
overlayProps={{ placement: 'bottom', trigger: ['hover', 'focus'] }}
|
||||
>
|
||||
<span>
|
||||
{lastUpdatedDate.trim()}
|
||||
</span>
|
||||
</OLTooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div className="template-detail">
|
||||
<div>
|
||||
<b>{t('license')}:</b>
|
||||
</div>
|
||||
<div>
|
||||
{licensesMap[template.license]}
|
||||
</div>
|
||||
</div>
|
||||
{sanitizedDescription && (
|
||||
<div className="template-detail">
|
||||
<div>
|
||||
<b>{t('abstract')}:</b>
|
||||
</div>
|
||||
<div
|
||||
className="gallery-abstract"
|
||||
data-ol-mathjax=""
|
||||
dangerouslySetInnerHTML={{ __html: sanitizedDescription }}>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{loggedInUserId && (loggedInUserId === template.owner || loggedInUserIsAdmin) && (
|
||||
<OLRow className="cta-links-container">
|
||||
<OLCol md={12} className="text-end">
|
||||
<EditTemplateButton />
|
||||
<DeleteTemplateButton />
|
||||
</OLCol>
|
||||
</OLRow>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
export default TemplateDetails
|
|
@ -0,0 +1,23 @@
|
|||
import OLCol from '@/features/ui/components/ol/ol-col'
|
||||
import OLRow from '@/features/ui/components/ol/ol-row'
|
||||
import { useTemplateContext } from '../context/template-context'
|
||||
|
||||
|
||||
function TemplatePreview() {
|
||||
const { template, setTemplate } = useTemplateContext()
|
||||
return (
|
||||
<div className="entry">
|
||||
<OLRow>
|
||||
<OLCol md={12}>
|
||||
<div className="gallery-large-pdf-preview">
|
||||
<img
|
||||
src={`/template/${template.id}/preview?version=${template.version}&style=preview`}
|
||||
alt={template.name}
|
||||
/>
|
||||
</div>
|
||||
</OLCol>
|
||||
</OLRow>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default TemplatePreview
|
|
@ -0,0 +1,70 @@
|
|||
import { useTranslation } from 'react-i18next'
|
||||
import useWaitForI18n from '../../../shared/hooks/use-wait-for-i18n'
|
||||
import withErrorBoundary from '../../../infrastructure/error-boundary'
|
||||
import { GenericErrorBoundaryFallback } from '@/shared/components/generic-error-boundary-fallback'
|
||||
import DefaultNavbar from '@/features/ui/components/bootstrap-5/navbar/default-navbar'
|
||||
import Footer from '@/features/ui/components/bootstrap-5/footer/footer'
|
||||
import getMeta from '@/utils/meta'
|
||||
import OLCol from '@/features/ui/components/ol/ol-col'
|
||||
import OLRow from '@/features/ui/components/ol/ol-row'
|
||||
import TemplateDetails from './template-details'
|
||||
import TemplatePreview from './template-preview'
|
||||
import { useTemplateContext, TemplateProvider } from '../context/template-context'
|
||||
|
||||
function TemplateRoot() {
|
||||
const { isReady } = useWaitForI18n()
|
||||
if (!isReady) {
|
||||
return null
|
||||
}
|
||||
return (
|
||||
<TemplateProvider>
|
||||
<TemplatePageContent />
|
||||
</TemplateProvider>
|
||||
)
|
||||
}
|
||||
|
||||
function TemplatePageContent() {
|
||||
const { t } = useTranslation()
|
||||
const navbarProps = getMeta('ol-navbar')
|
||||
const footerProps = getMeta('ol-footer')
|
||||
const { template } = useTemplateContext()
|
||||
const { templateLinks } = getMeta('ol-ExposedSettings') || []
|
||||
const categoryName = templateLinks?.find(link => link.url === template.category)?.name
|
||||
|
||||
return (
|
||||
<>
|
||||
<DefaultNavbar {...navbarProps} />
|
||||
<main id="main-content" className="gallery content content-page">
|
||||
<div className="container">
|
||||
<OLRow className="previous-page-link-container">
|
||||
<OLCol lg={6}>
|
||||
<a className="previous-page-link" href={'/templates/all'}>
|
||||
<i className="material-symbols material-symbols-rounded" aria-hidden="true">arrow_left_alt</i>
|
||||
{t('all_templates')}
|
||||
</a>
|
||||
{categoryName && template.category !== '/templates/all' && (
|
||||
<>
|
||||
<span className="mx-2">/</span>
|
||||
<a className="previous-page-link" href={template.category}>
|
||||
{categoryName}
|
||||
</a>
|
||||
</>
|
||||
)}
|
||||
</OLCol>
|
||||
</OLRow>
|
||||
<OLRow>
|
||||
<OLCol className="template-item-left-section" md={6}>
|
||||
<TemplateDetails />
|
||||
</OLCol>
|
||||
<OLCol className="template-item-right-section" md={6}>
|
||||
<TemplatePreview />
|
||||
</OLCol>
|
||||
</OLRow>
|
||||
</div>
|
||||
</main>
|
||||
<Footer {...footerProps} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default withErrorBoundary(TemplateRoot, GenericErrorBoundaryFallback)
|
|
@ -0,0 +1,53 @@
|
|||
import {
|
||||
createContext,
|
||||
FC,
|
||||
useCallback,
|
||||
useContext,
|
||||
useState,
|
||||
useMemo,
|
||||
} from 'react'
|
||||
import useEventListener from '@/shared/hooks/use-event-listener'
|
||||
import getMeta from '@/utils/meta'
|
||||
import { Template } from '../../../../../types/template'
|
||||
|
||||
type TemplateContextType = {
|
||||
template: Template
|
||||
setTemplate: (template: Template) => void
|
||||
}
|
||||
|
||||
export const TemplateContext = createContext<TemplateContextType | undefined>(
|
||||
undefined
|
||||
)
|
||||
|
||||
type TemplateProviderProps = {
|
||||
loadedTemplate: Template
|
||||
}
|
||||
|
||||
export const TemplateProvider: FC<TemplateProviderProps> = ({ children }) => {
|
||||
const loadedTemplate = useMemo(() => getMeta('ol-template'), [])
|
||||
const [template, setTemplate] = useState(loadedTemplate)
|
||||
|
||||
const value = useMemo(
|
||||
() => ({
|
||||
template,
|
||||
setTemplate,
|
||||
}),
|
||||
[template, setTemplate]
|
||||
)
|
||||
|
||||
return (
|
||||
<TemplateContext.Provider value={value}>
|
||||
{children}
|
||||
</TemplateContext.Provider>
|
||||
)
|
||||
}
|
||||
|
||||
export const useTemplateContext = () => {
|
||||
const context = useContext(TemplateContext)
|
||||
if (!context) {
|
||||
throw new Error(
|
||||
`useTemplateContext must be used within a TemplateProvider`
|
||||
)
|
||||
}
|
||||
return context
|
||||
}
|
|
@ -0,0 +1,46 @@
|
|||
import { useEffect } from 'react'
|
||||
|
||||
export function useFocusTrap(ref: React.RefObject<HTMLElement>, enabled = true) {
|
||||
useEffect(() => {
|
||||
if (!enabled || !ref.current) return
|
||||
|
||||
const element = ref.current
|
||||
const previouslyFocusedElement = document.activeElement as HTMLElement
|
||||
const focusableElements = element.querySelectorAll<HTMLElement>(
|
||||
'a[href], button, textarea, input, select, [tabindex]:not([tabindex="-1"])'
|
||||
)
|
||||
|
||||
const firstElement = focusableElements[0]
|
||||
const lastElement = focusableElements[focusableElements.length - 1]
|
||||
|
||||
// Don't override if something inside already received focus
|
||||
const isAlreadyFocusedInside = element.contains(document.activeElement)
|
||||
|
||||
function handleKeyDown(e: KeyboardEvent) {
|
||||
if (e.key !== 'Tab') return
|
||||
|
||||
if (e.shiftKey) {
|
||||
if (document.activeElement === firstElement) {
|
||||
e.preventDefault()
|
||||
lastElement?.focus()
|
||||
}
|
||||
} else {
|
||||
if (document.activeElement === lastElement) {
|
||||
e.preventDefault()
|
||||
firstElement?.focus()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
element.addEventListener('keydown', handleKeyDown)
|
||||
|
||||
if (!isAlreadyFocusedInside) {
|
||||
firstElement?.focus()
|
||||
}
|
||||
|
||||
return () => {
|
||||
element.removeEventListener('keydown', handleKeyDown)
|
||||
previouslyFocusedElement?.focus()
|
||||
}
|
||||
}, [ref, enabled])
|
||||
}
|
47
services/web/frontend/js/features/template/util/api.ts
Normal file
47
services/web/frontend/js/features/template/util/api.ts
Normal file
|
@ -0,0 +1,47 @@
|
|||
import { deleteJSON, postJSON } from '@/infrastructure/fetch-json'
|
||||
import { Template } from '../../../../../types/template'
|
||||
|
||||
export function deleteTemplate(template: Template) {
|
||||
return deleteJSON(`/template/${template.id}/delete`, {
|
||||
body: {
|
||||
version: template.version,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
type UpdateTemplateOptions = {
|
||||
template: Template
|
||||
initialTemplate: Template
|
||||
descriptionEdited: boolean
|
||||
}
|
||||
|
||||
export function updateTemplate({
|
||||
editedTemplate,
|
||||
template
|
||||
}: UpdateTemplateOptions): Promise<Template | null> {
|
||||
const updatedFields: Partial<Template> = {
|
||||
name: editedTemplate.name.trim(),
|
||||
license: editedTemplate.license.trim(),
|
||||
category: editedTemplate.category,
|
||||
language: editedTemplate.language,
|
||||
authorMD: editedTemplate.authorMD.trim(),
|
||||
descriptionMD: editedTemplate.descriptionMD.trim(),
|
||||
}
|
||||
|
||||
const changedFields = Object.entries(updatedFields).reduce((diff, [key, value]) => {
|
||||
if (value !== undefined && template[key as keyof Template] !== value) {
|
||||
diff[key] = value
|
||||
}
|
||||
return diff
|
||||
}, {} as Partial<Template>)
|
||||
|
||||
if (Object.keys(changedFields).length === 0) {
|
||||
return null
|
||||
}
|
||||
|
||||
const updated = postJSON(`/template/${editedTemplate.id}/edit`, {
|
||||
body: changedFields
|
||||
})
|
||||
|
||||
return updated
|
||||
}
|
|
@ -4,6 +4,7 @@ import type { NavbarSessionUser } from '@/features/ui/components/types/navbar'
|
|||
import NavLinkItem from '@/features/ui/components/bootstrap-5/navbar/nav-link-item'
|
||||
import { AccountMenuItems } from './account-menu-items'
|
||||
import { useSendProjectListMB } from '@/features/project-list/components/project-list-events'
|
||||
import getMeta from '@/utils/meta'
|
||||
|
||||
export default function LoggedInItems({
|
||||
sessionUser,
|
||||
|
@ -14,11 +15,18 @@ export default function LoggedInItems({
|
|||
}) {
|
||||
const { t } = useTranslation()
|
||||
const sendProjectListMB = useSendProjectListMB()
|
||||
const { templatesEnabled } = getMeta('ol-ExposedSettings')
|
||||
|
||||
return (
|
||||
<>
|
||||
<NavLinkItem href="/project" className="nav-item-projects">
|
||||
{t('projects')}
|
||||
</NavLinkItem>
|
||||
{templatesEnabled && (
|
||||
<NavLinkItem href="/templates" className="nav-item-templates">
|
||||
{t('templates')}
|
||||
</NavLinkItem>
|
||||
)}
|
||||
<NavDropdownMenu
|
||||
title={t('Account')}
|
||||
className="nav-item-account"
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import { useTranslation } from 'react-i18next'
|
||||
import NavLinkItem from '@/features/ui/components/bootstrap-5/navbar/nav-link-item'
|
||||
import { useSendProjectListMB } from '@/features/project-list/components/project-list-events'
|
||||
import getMeta from '@/utils/meta'
|
||||
|
||||
export default function LoggedOutItems({
|
||||
showSignUpLink,
|
||||
|
@ -9,9 +10,15 @@ export default function LoggedOutItems({
|
|||
}) {
|
||||
const { t } = useTranslation()
|
||||
const sendMB = useSendProjectListMB()
|
||||
const { templatesEnabled } = getMeta('ol-ExposedSettings')
|
||||
|
||||
return (
|
||||
<>
|
||||
{templatesEnabled && (
|
||||
<NavLinkItem href="/templates" className="nav-item-templates">
|
||||
{t('templates')}
|
||||
</NavLinkItem>
|
||||
)}
|
||||
{showSignUpLink ? (
|
||||
<NavLinkItem
|
||||
href="/register"
|
||||
|
|
15
services/web/frontend/js/pages/template-gallery.tsx
Normal file
15
services/web/frontend/js/pages/template-gallery.tsx
Normal file
|
@ -0,0 +1,15 @@
|
|||
import './../utils/meta'
|
||||
import '../utils/webpack-public-path'
|
||||
import './../infrastructure/error-reporter'
|
||||
import '@/i18n'
|
||||
import '../features/event-tracking'
|
||||
import '../features/cookie-banner'
|
||||
import '../features/link-helpers/slow-link'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import TemplateGalleryRoot from '../features/template-gallery/components/template-gallery-root'
|
||||
|
||||
const element = document.getElementById('template-gallery-root')
|
||||
if (element) {
|
||||
const root = ReactDOM.createRoot(element)
|
||||
root.render(<TemplateGalleryRoot />)
|
||||
}
|
15
services/web/frontend/js/pages/template.tsx
Normal file
15
services/web/frontend/js/pages/template.tsx
Normal file
|
@ -0,0 +1,15 @@
|
|||
import './../utils/meta'
|
||||
import '../utils/webpack-public-path'
|
||||
import './../infrastructure/error-reporter'
|
||||
import '@/i18n'
|
||||
import '../features/event-tracking'
|
||||
import '../features/cookie-banner'
|
||||
import '../features/link-helpers/slow-link'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import TemplateRoot from '../features/template/components/template-root'
|
||||
|
||||
const element = document.getElementById('template-root')
|
||||
if (element) {
|
||||
const root = ReactDOM.createRoot(element)
|
||||
root.render(<TemplateRoot />)
|
||||
}
|
|
@ -24,6 +24,7 @@ import {
|
|||
} from '../../../types/project/dashboard/notification'
|
||||
import { Survey } from '../../../types/project/dashboard/survey'
|
||||
import { GetProjectsResponseBody } from '../../../types/project/dashboard/api'
|
||||
import { GetTemplatesResponseBody } from '../../../types/template/dashboard/api'
|
||||
import { Tag } from '../../../app/src/Features/Tags/types'
|
||||
import { Institution } from '../../../types/institution'
|
||||
import {
|
||||
|
@ -184,6 +185,7 @@ export interface Meta {
|
|||
'ol-postCheckoutRedirect': string
|
||||
'ol-postUrl': string
|
||||
'ol-prefetchedProjectsBlob': GetProjectsResponseBody | undefined
|
||||
'ol-prefetchedTemplatesBlob': GetTemplatesResponseBody | undefined
|
||||
'ol-preventCompileOnLoad'?: boolean
|
||||
'ol-primaryEmail': { email: string; confirmed: boolean }
|
||||
'ol-project': any // TODO
|
||||
|
|
|
@ -9,5 +9,6 @@
|
|||
i {
|
||||
margin-right: var(--spacing-02);
|
||||
padding-bottom: 3px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -23,6 +23,37 @@
|
|||
.gallery {
|
||||
padding-top: calc($header-height + var(--spacing-10)) !important;
|
||||
|
||||
.gallery-search-form-control {
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
|
||||
.gallery-header-sort-btn {
|
||||
font-size: var(--font-size-02);
|
||||
border: 0;
|
||||
text-align: left;
|
||||
color: var(--neutral-90);
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
font-weight: bold;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: var(--neutral-90);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.material-symbols {
|
||||
vertical-align: top;
|
||||
font-size: var(--font-size-05);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.gallery-tagged-tags-container-spacing {
|
||||
padding: 0 var(--spacing-09);
|
||||
margin-bottom: var(--spacing-16);
|
||||
|
|
|
@ -19,6 +19,7 @@
|
|||
"about_to_delete_cert": "Du bist dabei, das folgende Zertifikat zu löschen:",
|
||||
"about_to_delete_projects": "Du bist kurz davor folgende Projekte zu löschen:",
|
||||
"about_to_delete_tag": "Du bist dabei, das folgende Stichwort zu löschen (darin enthaltene Projekte werden nicht gelöscht):",
|
||||
"about_to_delete_template": "Du bist dabei, die folgende Vorlage zu löschen:",
|
||||
"about_to_delete_the_following_project": "Du bist dabei, das folgende Projekt zu löschen",
|
||||
"about_to_delete_the_following_projects": "Du bist dabei, die folgenden Projekte zu löschen",
|
||||
"about_to_delete_user_preamble": "Du bist dabei, __userName__ (__userEmail__) zu löschen. Das bedeutet:",
|
||||
|
@ -161,6 +162,7 @@
|
|||
"card_must_be_authenticated_by_3dsecure": "Deine Karte muss mit 3D Secure authentifiziert werden, bevor du fortfahren kannst",
|
||||
"card_payment": "Kartenzahlung",
|
||||
"careers": "Karriere",
|
||||
"category": "Kategorie",
|
||||
"category_arrows": "Pfeile",
|
||||
"category_greek": "Griechisch",
|
||||
"category_misc": "Sonstiges",
|
||||
|
@ -297,6 +299,7 @@
|
|||
"delete_figure": "Abbildung löschen",
|
||||
"delete_projects": "Projekte archivieren",
|
||||
"delete_tag": "Stichwort löschen",
|
||||
"delete_template": "Vorlage löschen",
|
||||
"delete_token": "Token löschen",
|
||||
"delete_user": "Nutzer löschen",
|
||||
"delete_your_account": "Lösche dein Konto",
|
||||
|
@ -316,6 +319,7 @@
|
|||
"do_not_have_acct_or_do_not_want_to_link": "Wenn du kein <b>__appName__</b>-Konto hast oder nicht mit deinem <b>__institutionName__</b>-Konto verknüpfen möchtest, klicke auf <b>„__clickText__“</b>.",
|
||||
"do_not_link_accounts": "Konten nicht verknüpfen",
|
||||
"do_you_want_to_change_your_primary_email_address_to": "Willst Du deine primäre E-Mail-Adresse in <b>__email__</b> ändern?",
|
||||
"do_you_want_to_overwrite_it": "Möchtest du es überschreiben?",
|
||||
"do_you_want_to_overwrite_them": "Willst Du sie überschreiben?",
|
||||
"documentation": "Dokumentation",
|
||||
"does_not_contain_or_significantly_match_your_email": "nicht mit Teilen deiner E-Mail-Adresse übereinstimmt",
|
||||
|
@ -364,6 +368,7 @@
|
|||
"edit_dictionary_remove": "Aus Wörterbuch entfernen",
|
||||
"edit_figure": "Abbildung bearbeiten",
|
||||
"edit_tag": "Schlagwort bearbeiten",
|
||||
"edit_template": "Vorlage bearbeiten",
|
||||
"editing": "Bearbeitung",
|
||||
"editing_captions": "Beschriftungen bearbeiten",
|
||||
"editor_and_pdf": "Editor & PDF",
|
||||
|
@ -408,6 +413,7 @@
|
|||
"expiry": "Ablaufdatum",
|
||||
"export_csv": "CSV-Datei exportieren",
|
||||
"export_project_to_github": "Projekt nach GitHub exportieren",
|
||||
"failed_to_publish_as_a_template": "Veröffentlichung als Vorlage fehlgeschlagen.",
|
||||
"failed_to_send_managed_user_invite_to_email": "Der Versand der Einladung für Verwaltete Benutzer an <0>__email__</0> hat nicht funktioniert. Bitte versuche es später noch einmal.",
|
||||
"faq_how_does_free_trial_works_answer": "Während deines __len__-tägigen Probe-Abonnements erhältst du vollen Zugriff auf die Funktionen des von dir gewählten __appName__-Abonnements. Es besteht keine Verpflichtung, über die Testperiode hinaus fortzufahren. Deine Karte wird am Ende des __len__-tägigen Testzeitraums belastet, sofern du nicht vorher gekündigt hast. Um zu kündigen, gehe zu deinen Abonnementeinstellungen in deinem Konto.",
|
||||
"fast": "Schnell",
|
||||
|
@ -856,6 +862,7 @@
|
|||
"no_search_results": "Keine Suchergebnisse",
|
||||
"no_selection_select_file": "Derzeit ist keine Datei ausgewählt. Bitte wähle eine Datei aus dem Dateibaum aus.",
|
||||
"no_symbols_found": "Keine Symbole gefunden",
|
||||
"no_templates_found": "Keine Vorlagen gefunden.",
|
||||
"no_thanks_cancel_now": "Nein, danke - Ich möchte nach wie vor jetzt stornieren",
|
||||
"no_update_email": "Nein, E-Mail-Adresse aktualisieren",
|
||||
"normal": "Normal",
|
||||
|
@ -940,6 +947,7 @@
|
|||
"please_change_primary_to_remove": "Bitte ändere deine primäre E-Mail-Adresse, um sie zu entfernen",
|
||||
"please_check_your_inbox_to_confirm": "Bitte überprüfe deinen E-Mail-Postfach, um deine Zugehörigkeit zu <0>__institutionName__</0> zu bestätigen.",
|
||||
"please_compile_pdf_before_download": "Bitte kompiliere dein Projekt, bevor du das PDF herunterlädst",
|
||||
"please_compile_pdf_before_publish_as_template": "Bitte kompiliere dein Projekt, bevor du es als Vorlage veröffentlichst.",
|
||||
"please_compile_pdf_before_word_count": "Bitte kompiliere dein Projekt, bevor du eine Wortzählung durchführst.",
|
||||
"please_confirm_email": "Bitte bestätige deine E-Mail-Adresse __emailAddress__, indem du auf den Link in der Bestätigungs-E-Mail klickst",
|
||||
"please_confirm_your_email_before_making_it_default": "Bitte bestätige deine E-Mail-Adresse, bevor du sie zur primären machst.",
|
||||
|
@ -1198,6 +1206,7 @@
|
|||
"template_not_found_description": "Diese Methode zum Erstellen von Projekten aus Vorlagen wurde entfernt. Besuche unsere Vorlagengalerie, um weitere Vorlagen zu finden.",
|
||||
"template_title_taken_from_project_title": "Der Vorlagentitel wird automatisch aus dem Projekttitel übernommen",
|
||||
"template_top_pick_by_overleaf": "Diese Vorlage wurde von Overleaf-Mitarbeitern aufgrund ihrer hohen Qualität ausgewählt",
|
||||
"template_with_this_title_exists_and_owned_by_x": "Eine Vorlage mit diesem Namen existiert bereits, und der Besitzer ist: __x__.",
|
||||
"templates": "Vorlagen",
|
||||
"templates_admin_source_project": "Administration: Quellprojekt",
|
||||
"templates_page_title": "Vorlagen - Zeitschriften, Lebensläufe, Präsentationen, Berichte und mehr",
|
||||
|
@ -1267,6 +1276,7 @@
|
|||
"try_it_for_free": "Probiere es kostenlos aus",
|
||||
"try_now": "Jetzt versuchen",
|
||||
"try_premium_for_free": "Teste Premium kostenlos",
|
||||
"try_recompile_project": "Versuche bitte, das Projekt von Grund auf neu zu kompilieren.",
|
||||
"try_recompile_project_or_troubleshoot": "Versuche bitte, das Projekt von Grund auf neu zu kompilieren. Wenn das Problem weiterhin besteht, findest Du im <0>Troubleshooting Guide</0> weitere Hilfe",
|
||||
"try_to_compile_despite_errors": "Versuche, trotz Fehler zu kompilieren",
|
||||
"turn_off_link_sharing": "Deaktiviere die Linkfreigabe",
|
||||
|
@ -1279,6 +1289,7 @@
|
|||
"unconfirmed": "Unbestätigt",
|
||||
"unfold_line": "Zeile ausklappen",
|
||||
"university": "Universität",
|
||||
"unknown": "Unbekannt",
|
||||
"unlimited": "Unbegrenzt",
|
||||
"unlimited_collabs": "Unbeschränkt viele Mitarbeiter",
|
||||
"unlimited_projects": "Unbegrenzte Projekte",
|
||||
|
@ -1352,8 +1363,10 @@
|
|||
"x_price_per_year": "__price__ pro Jahr",
|
||||
"year": "Jahr",
|
||||
"yes_that_is_correct": "Ja, das ist richtig",
|
||||
"you": "Du",
|
||||
"you_can_now_log_in_sso": "Du kannst dich jetzt über deine Institution anmelden und möglicherweise <0>kostenlose __appName__ „Professionell“-Funktionen</0> erhalten!",
|
||||
"you_can_opt_in_and_out_of_the_program_at_any_time_on_this_page": "Du kannst dich jederzeit auf dieser Seite für das Beta-Programm an- und abmelden",
|
||||
"you_cant_overwrite_it": "Überschreiben ist nicht möglich.",
|
||||
"you_have_added_x_of_group_size_y": "Du hast <0>__addedUsersSize__</0> von <1>__groupSize__</1> verfügbaren Mitgliedern hinzugefügt",
|
||||
"you_will_be_able_to_contact_us_any_time_to_share_your_feedback": "Du kannst uns jederzeit kontaktieren, um uns dein Feedback mitzuteilen",
|
||||
"your_affiliation_is_confirmed": "Deine Zugehörigkeit zu <0>__institutionName__</0> ist bestätigt.",
|
||||
|
|
|
@ -26,6 +26,7 @@
|
|||
"about_to_delete_cert": "You are about to delete the following certificate:",
|
||||
"about_to_delete_projects": "You are about to delete the following projects:",
|
||||
"about_to_delete_tag": "You are about to delete the following tag (any projects in them will not be deleted):",
|
||||
"about_to_delete_template": "You are about to delete the following template:",
|
||||
"about_to_delete_the_following_project": "You are about to delete the following project",
|
||||
"about_to_delete_the_following_projects": "You are about to delete the following projects",
|
||||
"about_to_delete_user_preamble": "You’re about to delete __userName__ (__userEmail__). Doing this will mean:",
|
||||
|
@ -280,6 +281,7 @@
|
|||
"card_payment": "Card payment",
|
||||
"careers": "Careers",
|
||||
"categories": "Categories",
|
||||
"category": "Category",
|
||||
"category_arrows": "Arrows",
|
||||
"category_greek": "Greek",
|
||||
"category_misc": "Misc",
|
||||
|
@ -499,6 +501,7 @@
|
|||
"delete_sso_config": "Delete SSO configuration",
|
||||
"delete_table": "Delete table",
|
||||
"delete_tag": "Delete Tag",
|
||||
"delete_template": "Delete template",
|
||||
"delete_token": "Delete token",
|
||||
"delete_user": "Delete user",
|
||||
"delete_your_account": "Delete your account",
|
||||
|
@ -615,6 +618,7 @@
|
|||
"edit_figure": "Edit figure",
|
||||
"edit_sso_configuration": "Edit SSO Configuration",
|
||||
"edit_tag": "Edit Tag",
|
||||
"edit_template": "Edit template",
|
||||
"edit_your_custom_dictionary": "Edit your custom dictionary",
|
||||
"editing": "Editing",
|
||||
"editing_and_collaboration": "Editing and collaboration",
|
||||
|
@ -711,6 +715,7 @@
|
|||
"explore_all_plans": "Explore all plans",
|
||||
"export_csv": "Export CSV",
|
||||
"export_project_to_github": "Export Project to GitHub",
|
||||
"failed_to_publish_as_a_template": "Failed to publish as a template.",
|
||||
"failed_to_send_group_invite_to_email": "Failed to send Group invite to <0>__email__</0>. Please try again later.",
|
||||
"failed_to_send_managed_user_invite_to_email": "Failed to send Managed User invite to <0>__email__</0>. Please try again later.",
|
||||
"failed_to_send_sso_link_invite_to_email": "Failed to send SSO invite reminder to <0>__email__</0>. Please try again later.",
|
||||
|
@ -1444,6 +1449,7 @@
|
|||
"no_search_results": "No Search Results",
|
||||
"no_selection_select_file": "Currently, no file is selected. Please select a file from the file tree.",
|
||||
"no_symbols_found": "No symbols found",
|
||||
"no_templates_found": "No templates found.",
|
||||
"no_thanks_cancel_now": "No thanks, I still want to cancel",
|
||||
"no_update_email": "No, update email",
|
||||
"non_deletable_entity": "The specified entity may not be deleted",
|
||||
|
@ -1532,7 +1538,7 @@
|
|||
"overleaf_labs": "Overleaf Labs",
|
||||
"overleaf_logo": "Overleaf logo",
|
||||
"overleaf_plans_and_pricing": "overleaf plans and pricing",
|
||||
"overleaf_template_gallery": "overleaf template gallery",
|
||||
"overleaf_template_gallery": "overleaf ce template gallery",
|
||||
"overleafs_functionality_meets_my_needs": "Overleaf’s functionality meets my needs.",
|
||||
"overview": "Overview",
|
||||
"overwrite": "Overwrite",
|
||||
|
@ -1624,6 +1630,7 @@
|
|||
"please_change_primary_to_remove": "Please change your primary email in order to remove",
|
||||
"please_check_your_inbox_to_confirm": "Please check your email inbox to confirm your <0>__institutionName__</0> affiliation.",
|
||||
"please_compile_pdf_before_download": "Please compile your project before downloading the PDF",
|
||||
"please_compile_pdf_before_publish_as_template": "Please compile your project before publishing it as a template",
|
||||
"please_compile_pdf_before_word_count": "Please compile your project before performing a word count",
|
||||
"please_confirm_email": "Please confirm your email __emailAddress__ by clicking on the link in the confirmation email ",
|
||||
"please_confirm_primary_email_or_edit": "Please confirm your primary email address __emailAddress__. To edit it, go to <0>Account settings</0>.",
|
||||
|
@ -1666,6 +1673,7 @@
|
|||
"presentation": "Presentation",
|
||||
"presentation_mode": "Presentation mode",
|
||||
"press_and_awards": "Press & awards",
|
||||
"prev": "Prev",
|
||||
"previous_page": "Previous page",
|
||||
"price": "Price",
|
||||
"primarily_work_study_question": "Where do you primarily work or study?",
|
||||
|
@ -1728,7 +1736,7 @@
|
|||
"pt": "Portuguese",
|
||||
"public": "Public",
|
||||
"publish": "Publish",
|
||||
"publish_as_template": "Manage Template",
|
||||
"publish_as_template": "Publish as a Template",
|
||||
"publisher_account": "Publisher Account",
|
||||
"publishing": "Publishing",
|
||||
"pull_github_changes_into_sharelatex": "Pull GitHub changes into __appName__",
|
||||
|
@ -2215,6 +2223,7 @@
|
|||
"template_not_found_description": "This way of creating projects from templates has been removed. Please visit our template gallery to find more templates.",
|
||||
"template_title_taken_from_project_title": "The template title will be taken automatically from the project title",
|
||||
"template_top_pick_by_overleaf": "This template was hand-picked by Overleaf staff for its high quality",
|
||||
"template_with_this_title_exists_and_owned_by_x": "A template with this title already exists and is owned by __x__.",
|
||||
"templates": "Templates",
|
||||
"templates_admin_source_project": "Admin: Source Project",
|
||||
"templates_lowercase": "templates",
|
||||
|
@ -2418,6 +2427,7 @@
|
|||
"try_now": "Try Now",
|
||||
"try_papers_for_free": "Try Papers for free",
|
||||
"try_premium_for_free": "Try Premium for free",
|
||||
"try_recompile_project": "Please try recompiling the project from scratch.",
|
||||
"try_recompile_project_or_troubleshoot": "Please try recompiling the project from scratch, and if that doesn’t help, follow our <0>troubleshooting guide</0>.",
|
||||
"try_relinking_provider": "It looks like you need to re-link your __provider__ account.",
|
||||
"try_the_new_editor": "Try the new editor",
|
||||
|
@ -2662,6 +2672,7 @@
|
|||
"you_can_still_use_your_premium_features": "You can still use your premium features until the pause becomes active.",
|
||||
"you_cant_add_or_change_password_due_to_sso": "You can’t add or change your password because your group or organization uses <0>single sign-on (SSO)</0>.",
|
||||
"you_cant_join_this_group_subscription": "You can’t join this group subscription",
|
||||
"you_cant_overwrite_it": "You can’t overwrite it.",
|
||||
"you_cant_reset_password_due_to_sso": "You can’t reset your password because your group or organization uses SSO. <0>Log in with SSO</0>.",
|
||||
"you_dont_have_any_add_ons_on_your_account": "You don’t have any add-ons on your account.",
|
||||
"you_dont_have_any_repositories": "You don’t have any repositories",
|
||||
|
|
|
@ -20,6 +20,7 @@
|
|||
"about_to_archive_projects": "Вы собираетесь архивировать следующие проекты:",
|
||||
"about_to_delete_cert": "Вы собираетесь удалить следующий сертификат:",
|
||||
"about_to_delete_projects": "Следующие проекты будут удалены:",
|
||||
"about_to_delete_template": "Следующий шаблон будет удален:",
|
||||
"about_to_delete_the_following_project": "Вы собираетесь удалить следующий проект:",
|
||||
"about_to_delete_the_following_projects": "Вы собираетесь удалить следующие проекты:",
|
||||
"about_to_leave_project": "Вы собираетесь покинуть этот проект:",
|
||||
|
@ -69,6 +70,7 @@
|
|||
"cancel_your_subscription": "Остановить подписку",
|
||||
"cant_find_email": "Извините, данный адрес не зарегистрирован.",
|
||||
"cant_find_page": "К сожалению, страница не найдена",
|
||||
"category": "Категория",
|
||||
"change": "Изменить",
|
||||
"change_password": "Изменение пароля",
|
||||
"change_plan": "Сменить тарифный план",
|
||||
|
@ -127,9 +129,11 @@
|
|||
"delete_account_warning_message_3": "Вы собираетесь <strong>удалить все данные Вашего аккаунта</strong>, включая все Ваши проекты и настройки. Пожалуйста, введите адрес электронной почты и пароль Вашего аккаунта в форму внизу для продолжения.",
|
||||
"delete_and_leave_projects": "Удалить или оставить проекты",
|
||||
"delete_projects": "Удалить проекты",
|
||||
"delete_template": "Удалить шаблон",
|
||||
"delete_your_account": "Удалить аккаунт",
|
||||
"deleting": "Удаление",
|
||||
"disconnected": "Разъединен",
|
||||
"do_you_want_to_overwrite_it": "Перезаписать?",
|
||||
"documentation": "Документация",
|
||||
"doesnt_match": "Не совпадает",
|
||||
"done": "Готово",
|
||||
|
@ -138,6 +142,7 @@
|
|||
"download_zip_file": "Скачать архив (.zip)",
|
||||
"dropbox_sync": "Синхронизация с Dropbox",
|
||||
"dropbox_sync_description": "Синхронизируйте Ваши __appName__ проекты с Вашим Dropbox. Изменения в __appName__ автоматически сохраняются в Вашем Dropbox, и наоборот.",
|
||||
"edit_template": "Редактировать шаблон",
|
||||
"editing": "Редактор",
|
||||
"email": "Адрес электронной почты",
|
||||
"email_already_registered": "Этот адрес уже зарегистрирован.",
|
||||
|
@ -149,6 +154,7 @@
|
|||
"example_project": "Использовать пример",
|
||||
"expiry": "Срок действия",
|
||||
"export_project_to_github": "Экспорт проекта на GitHub",
|
||||
"failed_to_publish_as_a_template": "Не удалось создать шаблон.",
|
||||
"fast": "быстрый",
|
||||
"features": "Возможности",
|
||||
"february": "Февраль",
|
||||
|
@ -272,6 +278,7 @@
|
|||
"no_projects": "Нет проектов",
|
||||
"no_search_results": "Ничего не найдено",
|
||||
"no_thanks_cancel_now": "Нет, спасибо - я хочу удалить сейчас",
|
||||
"no_templates_found": "Шаблоны не найдены.",
|
||||
"normal": "нормальный",
|
||||
"not_now": "Не сейчас",
|
||||
"notification_project_invite": "<b>__userName__</b> приглашает Вас принять участие в проекте __projectName__,<a class=\"ben btn-xs btn-info\" href=\"’/project/__projectId__/invite/token/__token__’\">Присоединиться</a>",
|
||||
|
@ -300,7 +307,8 @@
|
|||
"plans_amper_pricing": "Тарифы",
|
||||
"plans_and_pricing": "Тарифные планы",
|
||||
"please_compile_pdf_before_download": "Пожалуйста, скомпилируйте проект перед загрузкой PDF",
|
||||
"please_compile_pdf_before_word_count": "Пожалуйста, скомпилируйте проект, прежде чем подсчитывать количество слов!",
|
||||
"please_compile_pdf_before_publish_as_template": "Пожалуйста, скомпилируйте проект, прежде чем создавать из него шаблон",
|
||||
"please_compile_pdf_before_word_count": "Пожалуйста, скомпилируйте проект, прежде чем подсчитывать количество слов.",
|
||||
"please_enter_email": "Пожалуйста, введите адрес электронной почты",
|
||||
"please_refresh": "Пожалуйста, обновите страницу для продолжения",
|
||||
"please_set_a_password": "Пожалуйста, укажите пароль",
|
||||
|
@ -409,6 +417,7 @@
|
|||
"syntax_validation": "Проверка кода",
|
||||
"take_me_home": "Вернуться в начало",
|
||||
"template_description": "Описание шаблона",
|
||||
"template_with_this_title_exists_and_owned_by_x": "Уже есть шаблон с таким названием, его владелец __x__.",
|
||||
"templates": "Шаблоны",
|
||||
"terminated": "Компиляция отменена",
|
||||
"terms": "Условия",
|
||||
|
@ -433,8 +442,10 @@
|
|||
"total_words": "Количество слов",
|
||||
"tr": "Турецкий",
|
||||
"try_now": "Попробуйте",
|
||||
"try_recompile_project": "Попробуйте скомпилировать проект заново.",
|
||||
"uk": "Украинский",
|
||||
"university": "Университет",
|
||||
"unknown": "Неизвестный",
|
||||
"unlimited_collabs": "Неограниченно число соавторов",
|
||||
"unlimited_projects": "Неограниченное число проектов",
|
||||
"unlink": "Отсоединить",
|
||||
|
@ -462,6 +473,8 @@
|
|||
"welcome_to_sl": "Добро пожаловать в __appName__",
|
||||
"word_count": "Количество слов",
|
||||
"year": "год",
|
||||
"you": "Вы",
|
||||
"you_cant_overwrite_it": "Перезаписать нельзя.",
|
||||
"you_have_added_x_of_group_size_y": "Вы добавили <0>__addedUsersSize__</0> из <1>__groupSize__</1> доступных участников",
|
||||
"your_plan": "Ваш тариф",
|
||||
"your_projects": "Созданные мной",
|
||||
|
|
22
services/web/modules/template-gallery/app/src/CleanHtml.mjs
Normal file
22
services/web/modules/template-gallery/app/src/CleanHtml.mjs
Normal file
|
@ -0,0 +1,22 @@
|
|||
import sanitizeHtml from 'sanitize-html'
|
||||
|
||||
const sanitizeOptions = {
|
||||
linksOnly: {
|
||||
allowedTags: ["a"],
|
||||
allowedAttributes: { "a": ["href"] }
|
||||
},
|
||||
reachText: {
|
||||
allowedTags: ["h1", "h2", "h3", "h4", "h5", "h6",
|
||||
"p", "blockquote", "ul", "ol", "li",
|
||||
"em", "strong", "s", "code", "pre", "hr", "a"],
|
||||
allowedAttributes: { "a": ["href"] }
|
||||
},
|
||||
plainText: {
|
||||
allowedTags: [],
|
||||
allowedAttributes: {},
|
||||
},
|
||||
}
|
||||
|
||||
export function cleanHtml(text, sanitizeType) {
|
||||
return sanitizeHtml(text, sanitizeOptions[sanitizeType])
|
||||
}
|
|
@ -0,0 +1,13 @@
|
|||
import OError from '@overleaf/o-error'
|
||||
|
||||
export class TemplateNameConflictError extends OError {
|
||||
constructor(ownerId, message = 'template_with_this_title_exists_and_owned_by_x') {
|
||||
super(message, { ownerId })
|
||||
}
|
||||
}
|
||||
|
||||
export class RecompileRequiredError extends OError {
|
||||
constructor(message = 'Recompile required') {
|
||||
super(message, { status: 400 })
|
||||
}
|
||||
}
|
|
@ -0,0 +1,162 @@
|
|||
import logger from '@overleaf/logger'
|
||||
import ErrorController from '../../../../app/src/Features/Errors/ErrorController.js'
|
||||
import Errors from '../../../../app/src/Features/Errors/Errors.js'
|
||||
import SessionManager from '../../../../app/src/Features/Authentication/SessionManager.js'
|
||||
import TemplateGalleryManager from'./TemplateGalleryManager.mjs'
|
||||
import { getUserName } from './TemplateGalleryHelper.mjs'
|
||||
import { TemplateNameConflictError, RecompileRequiredError } from './TemplateErrors.mjs'
|
||||
import Settings from '@overleaf/settings'
|
||||
|
||||
async function createTemplateFromProject(req, res, next) {
|
||||
const t = req.i18n.translate
|
||||
try {
|
||||
const userId = SessionManager.getLoggedInUserId(req.session)
|
||||
const result = await TemplateGalleryManager.createTemplateFromProject({
|
||||
projectId: req.params.Project_id,
|
||||
userId,
|
||||
templateSource: req.body,
|
||||
})
|
||||
if (result.conflict) {
|
||||
const ownerName = (result.templateOwnerName === 'you') ? t('you') : result.templateOwnerName
|
||||
const message = `${t('template_with_this_title_exists_and_owned_by_x', { x: ownerName })} `
|
||||
+ t(result.canOverride ? 'do_you_want_to_overwrite_it' : 'you_cant_overwrite_it')
|
||||
return res.status(409).json({ canOverride: result.canOverride, message })
|
||||
}
|
||||
return res.status(200).json({ template_id: result.templateId })
|
||||
} catch (error) {
|
||||
if (error instanceof Errors.InvalidNameError) {
|
||||
return res.status(error.info?.status || 400).json({ message: error.message })
|
||||
}
|
||||
|
||||
const mainMessage = t('failed_to_publish_as_a_template')
|
||||
if (error instanceof RecompileRequiredError) {
|
||||
return res.status(error.info?.status || 400).json({
|
||||
message: `${mainMessage} ${t('try_recompile_project')}`
|
||||
})
|
||||
}
|
||||
return res.status(400).json({ message: mainMessage })
|
||||
}
|
||||
}
|
||||
|
||||
async function editTemplate(req, res, next) {
|
||||
const t = req.i18n.translate
|
||||
try {
|
||||
const result = await TemplateGalleryManager.editTemplate({
|
||||
templateId: req.params.template_id,
|
||||
updates: req.body
|
||||
})
|
||||
res.status(200).json(result)
|
||||
} catch (error) {
|
||||
if (error instanceof TemplateNameConflictError) {
|
||||
const ownerId = error.info?.ownerId
|
||||
const userId = SessionManager.getLoggedInUserId(req.session)
|
||||
const ownerName = (ownerId === userId)
|
||||
? t('you')
|
||||
: await getUserName(ownerId) || t('unknown')
|
||||
const message = t(error.message, { x: ownerName })
|
||||
return res.status(409).json({ message })
|
||||
}
|
||||
if (error instanceof Errors.InvalidNameError) {
|
||||
return res.status(error.info?.status || 400).json({ message: error.message })
|
||||
}
|
||||
logger.error({ error }, 'Failure saving template')
|
||||
return res.status(500).json({ message: t('something_went_wrong_server') })
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteTemplate(req, res, next) {
|
||||
const t = req.i18n.translate
|
||||
try {
|
||||
await TemplateGalleryManager.deleteTemplate({
|
||||
templateId: req.params.template_id,
|
||||
version: req.body.version
|
||||
})
|
||||
res.sendStatus(200)
|
||||
} catch (error) {
|
||||
logger.error({ error }, 'Failure deleting template')
|
||||
return res.status(500).json({ message: t('something_went_wrong_server') })
|
||||
}
|
||||
}
|
||||
|
||||
async function getTemplatePreview(req, res, next) {
|
||||
try {
|
||||
const templateId = req.params.template_id
|
||||
const { version, style } = req.query
|
||||
|
||||
const { stream, contentType } = await TemplateGalleryManager.fetchTemplatePreview({ templateId, version, style })
|
||||
|
||||
res.setHeader('Content-Type', contentType)
|
||||
stream.pipe(res)
|
||||
} catch (error) {
|
||||
if (error.info?.status == 404) {
|
||||
return ErrorController.notFound(req, res, next)
|
||||
}
|
||||
return res.status(error.info?.status || 400).json(error.info)
|
||||
}
|
||||
}
|
||||
|
||||
async function templatesCategoryPage(req, res, next) {
|
||||
const t = req.i18n.translate
|
||||
try {
|
||||
let { category } = req.params
|
||||
const result = await TemplateGalleryManager.getTemplatesPageData(category)
|
||||
|
||||
let title
|
||||
if (result.categoryName) {
|
||||
title = t('latex_templates') + ' — ' + result.categoryName
|
||||
} else {
|
||||
category = null
|
||||
title = t('templates_page_title')
|
||||
}
|
||||
res.render('template_gallery/template-gallery', {
|
||||
title,
|
||||
category,
|
||||
})
|
||||
} catch (error) {
|
||||
next(error)
|
||||
}
|
||||
}
|
||||
|
||||
async function templateDetailsPage(req, res, next) {
|
||||
const t = req.i18n.translate
|
||||
try {
|
||||
const template = await TemplateGalleryManager.getTemplate('_id', req.params.template_id)
|
||||
res.render('template_gallery/template', {
|
||||
title: `${t('template')}: ${template.name}`,
|
||||
template: JSON.stringify(template),
|
||||
languages: Settings.languages,
|
||||
})
|
||||
} catch (error) {
|
||||
return ErrorController.notFound(req, res, next)
|
||||
}
|
||||
}
|
||||
|
||||
async function getTemplateJSON(req, res, next) {
|
||||
try {
|
||||
const { key, val } = req.query
|
||||
const template = await TemplateGalleryManager.getTemplate(key, val)
|
||||
res.json(template)
|
||||
} catch (error) {
|
||||
next(error)
|
||||
}
|
||||
}
|
||||
|
||||
async function getCategoryTemplatesJSON(req, res, next) {
|
||||
try {
|
||||
const result = await TemplateGalleryManager.getCategoryTemplates(req.query)
|
||||
res.json(result)
|
||||
} catch (error) {
|
||||
next(error)
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
createTemplateFromProject,
|
||||
editTemplate,
|
||||
deleteTemplate,
|
||||
getTemplatePreview,
|
||||
templatesCategoryPage,
|
||||
templateDetailsPage,
|
||||
getTemplateJSON,
|
||||
getCategoryTemplatesJSON,
|
||||
}
|
|
@ -0,0 +1,238 @@
|
|||
import { marked } from 'marked'
|
||||
import request from 'request'
|
||||
import logger from '@overleaf/logger'
|
||||
import settings from '@overleaf/settings'
|
||||
import Errors from '../../../../app/src/Features/Errors/Errors.js'
|
||||
import ProjectGetter from '../../../../app/src/Features/Project/ProjectGetter.js'
|
||||
import ProjectLocator from '../../../../app/src/Features/Project/ProjectLocator.js'
|
||||
import ProjectZipStreamManager from '../../../../app/src/Features/Downloads/ProjectZipStreamManager.mjs'
|
||||
import DocumentUpdaterHandler from '../../../../app/src/Features/DocumentUpdater/DocumentUpdaterHandler.js'
|
||||
import ClsiManager from '../../../../app/src/Features/Compile/ClsiManager.js'
|
||||
import CompileManager from '../../../../app/src/Features/Compile/CompileManager.js'
|
||||
import UserGetter from '../../../../app/src/Features/User/UserGetter.js'
|
||||
import { fetchStreamWithResponse } from '@overleaf/fetch-utils'
|
||||
import { Template } from './models/Template.js'
|
||||
import { RecompileRequiredError } from './TemplateErrors.mjs'
|
||||
import { cleanHtml } from './CleanHtml.mjs'
|
||||
|
||||
const TIMEOUT = 30000
|
||||
|
||||
const MAX_PROJECT_NAME_LENGTH = 150
|
||||
const MAX_FORM_INPUT_LENGTH = 512
|
||||
const MAX_TEMPLATE_DESCRIPTION_LENGTH = 4096
|
||||
|
||||
// Configure marked for CommonMark-only parsing
|
||||
marked.setOptions({
|
||||
gfm: false,
|
||||
breaks: false,
|
||||
headerIds: false,
|
||||
mangle: false,
|
||||
})
|
||||
|
||||
marked.use({
|
||||
renderer: {
|
||||
html: () => '' // strips any HTML tags
|
||||
}
|
||||
})
|
||||
|
||||
function _createZipStreamForProjectAsync(projectId) {
|
||||
return new Promise((resolve, reject) => {
|
||||
ProjectZipStreamManager.createZipStreamForProject(projectId, (err, archive) => {
|
||||
if (err) {
|
||||
return reject(err)
|
||||
}
|
||||
archive.on('error', (err) => reject(err))
|
||||
resolve(archive)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export function validateTemplateInput({ name, descriptionMD, authorMD, license }) {
|
||||
if (name?.length > MAX_PROJECT_NAME_LENGTH) {
|
||||
throw new Errors.InvalidNameError(`Template title exceeds the maximum length of ${MAX_PROJECT_NAME_LENGTH} characters.`)
|
||||
}
|
||||
if (descriptionMD?.length > MAX_TEMPLATE_DESCRIPTION_LENGTH) {
|
||||
throw new Errors.InvalidNameError(`Template description exceeds the maximum length of ${MAX_TEMPLATE_DESCRIPTION_LENGTH} characters.`)
|
||||
}
|
||||
if (authorMD?.length > MAX_FORM_INPUT_LENGTH) {
|
||||
throw new Errors.InvalidNameError('Author name is too long.')
|
||||
}
|
||||
if (license?.length > MAX_FORM_INPUT_LENGTH) {
|
||||
throw new Errors.InvalidNameError('License name is too long.')
|
||||
}
|
||||
}
|
||||
|
||||
export async function canUserOverrideTemplate(template, userId) {
|
||||
let templateOwnerId = template.owner
|
||||
let templateOwnerName = 'you'
|
||||
let userIsOwner = true
|
||||
let userIsAdmin
|
||||
if (templateOwnerId != userId) {
|
||||
userIsOwner = false
|
||||
try {
|
||||
userIsAdmin = (await UserGetter.promises.getUser(userId, { isAdmin: 1 })).isAdmin
|
||||
} catch {
|
||||
logger.error({ error, userId }, 'Logged in user does not exist, strange...')
|
||||
userIsAdmin = false
|
||||
}
|
||||
templateOwnerName = await getUserName(templateOwnerId) || 'unknown'
|
||||
}
|
||||
const canOverride = userIsOwner || userIsAdmin
|
||||
return { canOverride, templateOwnerName }
|
||||
}
|
||||
|
||||
export async function getUserName(userId) {
|
||||
try {
|
||||
const user = await UserGetter.promises.getUser(userId, {
|
||||
first_name: 1,
|
||||
last_name: 1,
|
||||
})
|
||||
return ((user?.first_name || "") + " " + (user?.last_name || "")).trim()
|
||||
} catch (error) {
|
||||
return 'unknown'
|
||||
}
|
||||
}
|
||||
|
||||
export async function generateTemplateData(projectId, {
|
||||
descriptionMD,
|
||||
authorMD,
|
||||
category,
|
||||
license,
|
||||
name,
|
||||
}) {
|
||||
try {
|
||||
await DocumentUpdaterHandler.promises.flushProjectToMongo(projectId)
|
||||
|
||||
const project = await ProjectGetter.promises.getProject(projectId, {
|
||||
imageName: true,
|
||||
compiler: true,
|
||||
spellCheckLanguage: true,
|
||||
rootDoc_id: true,
|
||||
rootFolder: true,
|
||||
})
|
||||
|
||||
const { path } = await ProjectLocator.promises.findRootDoc({ project })
|
||||
const mainFile = path.fileSystem.replace(/^\/+/, '')
|
||||
const template = {
|
||||
name,
|
||||
category,
|
||||
authorMD,
|
||||
descriptionMD,
|
||||
license,
|
||||
mainFile,
|
||||
compiler: project.compiler,
|
||||
imageName: project.imageName,
|
||||
language: project.spellCheckLanguage,
|
||||
lastUpdated: new Date(),
|
||||
}
|
||||
|
||||
await renderTemplateHtmlFields(template)
|
||||
return template
|
||||
} catch (error) {
|
||||
logger.error({ error, projectId }, 'Failed to retrieve project data')
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
export async function uploadTemplateAssets(projectId, userId, build, template) {
|
||||
let zipStream, pdfStream
|
||||
try {
|
||||
[zipStream, pdfStream] = await Promise.all([
|
||||
_createZipStreamForProjectAsync(projectId),
|
||||
CompileManager.promises
|
||||
.getProjectCompileLimits(projectId)
|
||||
.then((limits) =>
|
||||
ClsiManager.promises.getOutputFileStream(projectId, userId, limits, undefined, build, 'output.pdf')
|
||||
)
|
||||
])
|
||||
} catch (error) {
|
||||
logger.error({ error, projectId }, 'No output.pdf?')
|
||||
throw new RecompileRequiredError()
|
||||
}
|
||||
try {
|
||||
const templateUrl = `${settings.apis.filestore.url}/template/${template._id}/v/${template.version}`
|
||||
const zipUrl = `${templateUrl}/zip`
|
||||
const pdfUrl = `${templateUrl}/pdf`
|
||||
const [zipReq, pdfReq] = await Promise.all([
|
||||
fetchStreamWithResponse(zipUrl, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/octet-stream',
|
||||
},
|
||||
body: zipStream,
|
||||
signal: AbortSignal.timeout(TIMEOUT),
|
||||
}),
|
||||
fetchStreamWithResponse(pdfUrl, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/pdf',
|
||||
},
|
||||
body: pdfStream,
|
||||
signal: AbortSignal.timeout(TIMEOUT),
|
||||
}),
|
||||
])
|
||||
const uploadErrors = []
|
||||
if (zipReq?.response.status !== 200) {
|
||||
uploadErrors.push({ file: 'zip', uri: zipUrl, statusCode: zipReq.response.status })
|
||||
}
|
||||
if (pdfReq?.response.status !== 200) {
|
||||
uploadErrors.push({ file: 'pdf', uri: pdfUrl, statusCode: pdfReq.response.status })
|
||||
}
|
||||
if (uploadErrors.length > 0) {
|
||||
logger.error({ uploadErrors }, 'Template upload failed')
|
||||
throw new RecompileRequiredError()
|
||||
}
|
||||
} catch (error) {
|
||||
if (error instanceof RecompileRequiredError) throw error
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
export async function deleteTemplateAssets(templateId, version, deleteFromDb) {
|
||||
if (deleteFromDb) {
|
||||
try {
|
||||
await Template.deleteOne({ _id: templateId }).exec()
|
||||
} catch (error) {
|
||||
logger.error({ err, templateId }, 'Failed to delete template from MongoDB')
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
// kick off file deletions, but don't wait
|
||||
const baseUrl = settings.apis.filestore.url
|
||||
const urlTemplate = `${baseUrl}/template/${templateId}/v/${version}/zip`
|
||||
const urlImages = `${baseUrl}/template/${templateId}/v/${version}/pdf`
|
||||
|
||||
const optsTemplate = {
|
||||
method: 'DELETE',
|
||||
uri: urlTemplate,
|
||||
timeout: TIMEOUT,
|
||||
}
|
||||
|
||||
const optsImages = {
|
||||
method: 'DELETE',
|
||||
uri: urlImages,
|
||||
timeout: TIMEOUT,
|
||||
}
|
||||
|
||||
request(optsTemplate, (err, response) => {
|
||||
if (err)
|
||||
logger.warn({ err, templateId }, 'Failed to delete template zip from filestore')
|
||||
})
|
||||
|
||||
request(optsImages, (err, response) => {
|
||||
if (err)
|
||||
logger.warn({ err, templateId }, 'Failed to delete images from filestore')
|
||||
})
|
||||
}
|
||||
|
||||
export function renderTemplateHtmlFields(updates) {
|
||||
if (updates.descriptionMD !== undefined) {
|
||||
const descriptionRawHTML = marked.parse(updates.descriptionMD)
|
||||
updates.description = cleanHtml(descriptionRawHTML, "reachText")
|
||||
}
|
||||
if (updates.authorMD !== undefined) {
|
||||
const authorRawHTML = marked.parse(updates.authorMD)
|
||||
updates.author = cleanHtml(authorRawHTML, "linksOnly")
|
||||
}
|
||||
}
|
|
@ -0,0 +1,214 @@
|
|||
import _ from 'lodash'
|
||||
import logger from '@overleaf/logger'
|
||||
import { Readable } from 'stream'
|
||||
import settings from '@overleaf/settings'
|
||||
import { OError } from '../../../../app/src/Features/Errors/Errors.js'
|
||||
import { Template } from './models/Template.js'
|
||||
import {
|
||||
validateTemplateInput,
|
||||
renderTemplateHtmlFields,
|
||||
uploadTemplateAssets,
|
||||
deleteTemplateAssets,
|
||||
canUserOverrideTemplate,
|
||||
generateTemplateData
|
||||
} from './TemplateGalleryHelper.mjs'
|
||||
import { cleanHtml } from './CleanHtml.mjs'
|
||||
import { TemplateNameConflictError } from './TemplateErrors.mjs'
|
||||
import { fetchStreamWithResponse } from '@overleaf/fetch-utils'
|
||||
const TIMEOUT = 30000
|
||||
|
||||
async function editTemplate({ templateId, updates }) {
|
||||
|
||||
validateTemplateInput(updates)
|
||||
|
||||
const template = await Template.findById(templateId)
|
||||
if (!template) {
|
||||
throw new OError('Current template not found, strange...', { status: 500, templateId })
|
||||
}
|
||||
|
||||
if (updates.name) {
|
||||
const conflictingTemplate = await Template.findOne(
|
||||
{ name: updates.name, _id: { $ne: templateId } },
|
||||
{ owner: true }
|
||||
).exec()
|
||||
if (conflictingTemplate) {
|
||||
throw new TemplateNameConflictError(String(conflictingTemplate.owner))
|
||||
}
|
||||
}
|
||||
|
||||
await renderTemplateHtmlFields(updates)
|
||||
updates.lastUpdated = new Date()
|
||||
Object.assign(template, updates)
|
||||
|
||||
await template.save()
|
||||
|
||||
return updates
|
||||
}
|
||||
|
||||
async function deleteTemplate({ templateId, version }) {
|
||||
await deleteTemplateAssets(templateId, version, true)
|
||||
}
|
||||
|
||||
async function createTemplateFromProject({ projectId, userId, templateSource }) {
|
||||
validateTemplateInput(templateSource)
|
||||
let template = await Template.findOne({ name: templateSource.name }).exec()
|
||||
|
||||
if (template && !templateSource.override) {
|
||||
const { canOverride, templateOwnerName } = await canUserOverrideTemplate(template, userId)
|
||||
|
||||
return {
|
||||
conflict: true,
|
||||
canOverride,
|
||||
templateOwnerName
|
||||
}
|
||||
}
|
||||
|
||||
const templateData = await generateTemplateData(projectId, templateSource)
|
||||
|
||||
let previousVersionExists
|
||||
if (!template) {
|
||||
template = new Template(templateData)
|
||||
template.owner = userId
|
||||
previousVersionExists = false
|
||||
} else {
|
||||
Object.assign(template, templateData, {
|
||||
version: template.version + 1,
|
||||
})
|
||||
previousVersionExists = true
|
||||
}
|
||||
|
||||
await uploadTemplateAssets(projectId, userId, templateSource.build, template)
|
||||
await template.save()
|
||||
|
||||
if (previousVersionExists) {
|
||||
deleteTemplateAssets(template._id, template.version - 1, false)
|
||||
}
|
||||
return {
|
||||
conflict: false,
|
||||
templateId: template._id,
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchTemplatePreview({ templateId, version, style }) {
|
||||
if (!templateId || !version) {
|
||||
throw new OError('Template ID and version are required', { status: 404 })
|
||||
}
|
||||
const styleParam = style ? `style=${style}` : ''
|
||||
const isImage = (style === 'preview' || style === 'thumbnail')
|
||||
|
||||
if (style && !isImage) {
|
||||
throw new OError('Wrong style', { status: 404, style })
|
||||
}
|
||||
|
||||
const pdfUrl = `${settings.apis.filestore.url}/template/${templateId}/v/${version}/pdf?${styleParam}`
|
||||
const { response } = await fetchStreamWithResponse(pdfUrl, {
|
||||
method: 'GET',
|
||||
signal: AbortSignal.timeout(TIMEOUT),
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
throw new OError(`Failed to fetch file: ${response.statusText}`, { status: 400, templateId, version, styleParam })
|
||||
}
|
||||
|
||||
return {
|
||||
stream: Readable.from(response.body),
|
||||
contentType: isImage ? 'application/octet-stream' : 'application/pdf'
|
||||
}
|
||||
}
|
||||
|
||||
async function getTemplatesPageData(category) {
|
||||
const categoryName = settings.templateLinks.find(item => item.url.endsWith(`/${category}`))?.name
|
||||
const templateLinks = categoryName ? undefined : settings.templateLinks.filter(link => link.url !== '/templates/all')
|
||||
return {
|
||||
categoryName,
|
||||
templateLinks
|
||||
}
|
||||
}
|
||||
|
||||
async function getTemplate(key, val) {
|
||||
if (!key || !val) {
|
||||
logger.warn('No key or val provided to getTemplate')
|
||||
return null
|
||||
}
|
||||
|
||||
const query = { [key]: val }
|
||||
const template = await Template.findOne(query).exec()
|
||||
if (!template) return null
|
||||
|
||||
return _formatTemplateForPage(template)
|
||||
}
|
||||
|
||||
async function getCategoryTemplates(reqQuery) {
|
||||
const {
|
||||
category,
|
||||
by = 'lastUpdated',
|
||||
order = 'desc',
|
||||
} = reqQuery || {}
|
||||
|
||||
const query = (category === 'all') ? {} : { category : '/templates/' + category }
|
||||
const projection = { _id : 1, version : 1, name : 1, author : 1, description : 1, lastUpdated : 1 }
|
||||
const allTemplates = await Template.find(query, projection).exec()
|
||||
const formattedTemplates = allTemplates.map(_formatTemplateForList)
|
||||
const sortedTemplates = _sortTemplates(formattedTemplates, { by, order })
|
||||
|
||||
return {
|
||||
totalSize: sortedTemplates.length,
|
||||
templates: sortedTemplates,
|
||||
}
|
||||
}
|
||||
|
||||
function _sortTemplates(templates, sort) {
|
||||
if (
|
||||
(sort.by && !['lastUpdated', 'name'].includes(sort.by)) ||
|
||||
(sort.order && !['asc', 'desc'].includes(sort.order))
|
||||
) {
|
||||
throw new OError('Invalid sorting criteria', { status: 400, sort })
|
||||
}
|
||||
const sortedTemplates = _.orderBy(
|
||||
templates,
|
||||
[sort.by || 'lastUpdated'],
|
||||
[sort.order || 'desc']
|
||||
)
|
||||
return sortedTemplates
|
||||
}
|
||||
|
||||
function _formatTemplateForList(template) {
|
||||
return {
|
||||
id: String(template._id),
|
||||
version: String(template.version),
|
||||
name: template.name,
|
||||
author: cleanHtml(template.author, "plainText"),
|
||||
description: cleanHtml(template.description, "plainText"),
|
||||
lastUpdated: template.lastUpdated,
|
||||
}
|
||||
}
|
||||
|
||||
function _formatTemplateForPage(template) {
|
||||
return {
|
||||
id: template._id.toString(),
|
||||
version: template.version.toString(),
|
||||
category: template.category,
|
||||
name: template.name,
|
||||
author: cleanHtml(template.author, "linksOnly"),
|
||||
authorMD: template.authorMD,
|
||||
description: cleanHtml(template.description, "reachText"),
|
||||
descriptionMD: template.descriptionMD,
|
||||
license: template.license,
|
||||
lastUpdated: template.lastUpdated,
|
||||
owner: template.owner,
|
||||
mainFile: template.mainFile,
|
||||
compiler: template.compiler,
|
||||
imageName: template.imageName,
|
||||
language: template.language,
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
createTemplateFromProject,
|
||||
editTemplate,
|
||||
deleteTemplate,
|
||||
getTemplate,
|
||||
getCategoryTemplates,
|
||||
fetchTemplatePreview,
|
||||
getTemplatesPageData,
|
||||
}
|
|
@ -0,0 +1,82 @@
|
|||
import logger from '@overleaf/logger'
|
||||
|
||||
import AuthenticationController from '../../../../app/src/Features/Authentication/AuthenticationController.js'
|
||||
import RateLimiterMiddleware from '../../../../app/src/Features/Security/RateLimiterMiddleware.js'
|
||||
import { RateLimiter } from '../../../../app/src/infrastructure/RateLimiter.js'
|
||||
import TemplateGalleryController from './TemplateGalleryController.mjs'
|
||||
|
||||
const rateLimiterNewTemplate = new RateLimiter('create-template-from-project', {
|
||||
points: 20,
|
||||
duration: 60,
|
||||
})
|
||||
const rateLimiter = new RateLimiter('template-gallery', {
|
||||
points: 60,
|
||||
duration: 60,
|
||||
})
|
||||
const rateLimiterThumbnails = new RateLimiter('template-gallery-thumbnails', {
|
||||
points: 240,
|
||||
duration: 60,
|
||||
})
|
||||
|
||||
|
||||
export default {
|
||||
rateLimiter,
|
||||
apply(webRouter) {
|
||||
logger.debug({}, 'Init templates router')
|
||||
|
||||
webRouter.post(
|
||||
'/template/new/:Project_id',
|
||||
AuthenticationController.requireLogin(),
|
||||
RateLimiterMiddleware.rateLimit(rateLimiterNewTemplate),
|
||||
TemplateGalleryController.createTemplateFromProject
|
||||
)
|
||||
|
||||
webRouter.get(
|
||||
'/template/:template_id',
|
||||
RateLimiterMiddleware.rateLimit(rateLimiter),
|
||||
TemplateGalleryController.templateDetailsPage
|
||||
)
|
||||
|
||||
webRouter.post(
|
||||
'/template/:template_id/edit',
|
||||
AuthenticationController.requireLogin(),
|
||||
RateLimiterMiddleware.rateLimit(rateLimiter),
|
||||
TemplateGalleryController.editTemplate
|
||||
)
|
||||
|
||||
webRouter.delete(
|
||||
'/template/:template_id/delete',
|
||||
AuthenticationController.requireLogin(),
|
||||
RateLimiterMiddleware.rateLimit(rateLimiter),
|
||||
TemplateGalleryController.deleteTemplate
|
||||
)
|
||||
|
||||
webRouter.get(
|
||||
'/templates/:category?',
|
||||
RateLimiterMiddleware.rateLimit(rateLimiter),
|
||||
TemplateGalleryController.templatesCategoryPage
|
||||
)
|
||||
|
||||
webRouter.get(
|
||||
'/api/template',
|
||||
RateLimiterMiddleware.rateLimit(rateLimiter),
|
||||
TemplateGalleryController.getTemplateJSON
|
||||
)
|
||||
|
||||
webRouter.get(
|
||||
'/api/templates',
|
||||
RateLimiterMiddleware.rateLimit(rateLimiter),
|
||||
TemplateGalleryController.getCategoryTemplatesJSON
|
||||
)
|
||||
|
||||
webRouter.get(
|
||||
'/template/:template_id/preview',
|
||||
(req, res, next) => {
|
||||
req.query.style === 'thumbnail'
|
||||
? RateLimiterMiddleware.rateLimit(rateLimiterThumbnails)(req, res, next)
|
||||
: RateLimiterMiddleware.rateLimit(rateLimiter)(req, res, next)
|
||||
},
|
||||
TemplateGalleryController.getTemplatePreview
|
||||
)
|
||||
},
|
||||
}
|
|
@ -0,0 +1,33 @@
|
|||
const mongoose = require('../../../../../app/src/infrastructure/Mongoose')
|
||||
|
||||
const { Schema } = mongoose
|
||||
const { ObjectId } = Schema
|
||||
|
||||
const TemplateSchema = new Schema(
|
||||
{
|
||||
name: { type: String, required: true },
|
||||
category: { type: String, required: true },
|
||||
description: { type: String },
|
||||
descriptionMD: { type: String },
|
||||
author: { type: String },
|
||||
authorMD: { type: String },
|
||||
license: { type: String, required: true },
|
||||
mainFile: { type: String, required: true },
|
||||
compiler: { type: String, required: true },
|
||||
imageName: { type: String },
|
||||
language: { type: String },
|
||||
version: { type: Number, default: 1, required: true },
|
||||
owner: { type: ObjectId, ref: 'User' },
|
||||
lastUpdated: {
|
||||
type: Date,
|
||||
default() {
|
||||
return new Date()
|
||||
},
|
||||
required: true
|
||||
},
|
||||
},
|
||||
{ minimize: false }
|
||||
)
|
||||
|
||||
exports.Template = mongoose.model('Template', TemplateSchema)
|
||||
exports.TemplateSchema = TemplateSchema
|
42
services/web/modules/template-gallery/index.mjs
Normal file
42
services/web/modules/template-gallery/index.mjs
Normal file
|
@ -0,0 +1,42 @@
|
|||
import Settings from '@overleaf/settings'
|
||||
import TemplateGalleryRouter from './app/src/TemplateGalleryRouter.mjs'
|
||||
|
||||
function boolFromEnv(env) {
|
||||
if (env === undefined || env === null) return undefined
|
||||
if (typeof env === "string") {
|
||||
const envLower = env.toLowerCase()
|
||||
if (envLower === 'true') return true
|
||||
if (envLower === 'false') return false
|
||||
}
|
||||
throw new Error("Invalid value for boolean environment variable")
|
||||
}
|
||||
|
||||
let TemplateGalleryModule = {}
|
||||
|
||||
if (process.env.OVERLEAF_TEMPLATE_GALLERY === 'true') {
|
||||
TemplateGalleryModule = {
|
||||
router: TemplateGalleryRouter,
|
||||
}
|
||||
|
||||
Settings.templates = {
|
||||
nonAdminCanManage: boolFromEnv(process.env.OVERLEAF_NON_ADMIN_CAN_PUBLISH_TEMPLATES)
|
||||
}
|
||||
|
||||
const templateKeys = process.env.OVERLEAF_TEMPLATE_CATEGORIES
|
||||
? process.env.OVERLEAF_TEMPLATE_CATEGORIES + ' all'
|
||||
: 'all'
|
||||
|
||||
Settings.templateLinks = templateKeys.split(/\s+/).map(key => {
|
||||
const envKeyBase = key.toUpperCase().replace(/-/g, "_")
|
||||
const name = process.env[`TEMPLATE_${envKeyBase}_NAME`] || ( key === 'all' ? 'All templates' : key)
|
||||
const description = process.env[`TEMPLATE_${envKeyBase}_DESCRIPTION`] || ''
|
||||
|
||||
return {
|
||||
name,
|
||||
url: `/templates/${key}`,
|
||||
description
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export default TemplateGalleryModule
|
16
services/web/types/template.ts
Normal file
16
services/web/types/template.ts
Normal file
|
@ -0,0 +1,16 @@
|
|||
export type Template = {
|
||||
id: string
|
||||
version: number
|
||||
name: string
|
||||
lastUpdated: Date
|
||||
author: string
|
||||
authorMD: string
|
||||
description: string
|
||||
descriptionMD: string
|
||||
license: string
|
||||
category: string
|
||||
compiler?: string
|
||||
language?: string
|
||||
owner: string
|
||||
}
|
||||
|
Loading…
Add table
Add a link
Reference in a new issue