first commit
This commit is contained in:
@@ -0,0 +1,159 @@
|
||||
/* eslint-disable jsx-a11y/no-autofocus */
|
||||
import PropTypes from 'prop-types'
|
||||
import { useCallback, useMemo, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { postJSON } from '../../../infrastructure/fetch-json'
|
||||
import { CloneProjectTag } from './clone-project-tag'
|
||||
import {
|
||||
OLModalBody,
|
||||
OLModalFooter,
|
||||
OLModalHeader,
|
||||
OLModalTitle,
|
||||
} from '@/features/ui/components/ol/ol-modal'
|
||||
import Notification from '@/shared/components/notification'
|
||||
import OLForm from '@/features/ui/components/ol/ol-form'
|
||||
import OLFormGroup from '@/features/ui/components/ol/ol-form-group'
|
||||
import OLFormControl from '@/features/ui/components/ol/ol-form-control'
|
||||
import OLFormLabel from '@/features/ui/components/ol/ol-form-label'
|
||||
import OLButton from '@/features/ui/components/ol/ol-button'
|
||||
|
||||
export default function CloneProjectModalContent({
|
||||
handleHide,
|
||||
inFlight,
|
||||
setInFlight,
|
||||
handleAfterCloned,
|
||||
projectId,
|
||||
projectName,
|
||||
projectTags,
|
||||
}) {
|
||||
const { t } = useTranslation()
|
||||
|
||||
const [error, setError] = useState()
|
||||
const [clonedProjectName, setClonedProjectName] = useState(
|
||||
`${projectName} (Copy)`
|
||||
)
|
||||
|
||||
const [clonedProjectTags, setClonedProjectTags] = useState(projectTags)
|
||||
|
||||
// valid if the cloned project has a name
|
||||
const valid = useMemo(
|
||||
() => clonedProjectName.trim().length > 0,
|
||||
[clonedProjectName]
|
||||
)
|
||||
|
||||
// form submission: clone the project if the name is valid
|
||||
const handleSubmit = event => {
|
||||
event.preventDefault()
|
||||
|
||||
if (!valid) {
|
||||
return
|
||||
}
|
||||
|
||||
setError(false)
|
||||
setInFlight(true)
|
||||
|
||||
// clone the project
|
||||
postJSON(`/project/${projectId}/clone`, {
|
||||
body: {
|
||||
projectName: clonedProjectName,
|
||||
tags: clonedProjectTags.map(tag => ({ id: tag._id })),
|
||||
},
|
||||
})
|
||||
.then(data => {
|
||||
// open the cloned project
|
||||
handleAfterCloned(data, clonedProjectTags)
|
||||
})
|
||||
.catch(({ response, data }) => {
|
||||
if (response?.status === 400) {
|
||||
setError(data.message)
|
||||
} else {
|
||||
setError(true)
|
||||
}
|
||||
})
|
||||
.finally(() => {
|
||||
setInFlight(false)
|
||||
})
|
||||
}
|
||||
|
||||
const removeTag = useCallback(tag => {
|
||||
setClonedProjectTags(value => value.filter(item => item._id !== tag._id))
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<>
|
||||
<OLModalHeader closeButton>
|
||||
<OLModalTitle>{t('copy_project')}</OLModalTitle>
|
||||
</OLModalHeader>
|
||||
|
||||
<OLModalBody>
|
||||
<OLForm id="clone-project-form" onSubmit={handleSubmit}>
|
||||
<OLFormGroup controlId="clone-project-form-name">
|
||||
<OLFormLabel>{t('new_name')}</OLFormLabel>
|
||||
<OLFormControl
|
||||
type="text"
|
||||
placeholder="New Project Name"
|
||||
required
|
||||
value={clonedProjectName}
|
||||
onChange={event => setClonedProjectName(event.target.value)}
|
||||
autoFocus
|
||||
/>
|
||||
</OLFormGroup>
|
||||
|
||||
{clonedProjectTags.length > 0 && (
|
||||
<OLFormGroup
|
||||
controlId="clone-project-tags-list"
|
||||
className="clone-project-tag"
|
||||
>
|
||||
<OLFormLabel>{t('tags')}: </OLFormLabel>
|
||||
<div role="listbox" id="clone-project-tags-list">
|
||||
{clonedProjectTags.map(tag => (
|
||||
<CloneProjectTag
|
||||
key={tag._id}
|
||||
tag={tag}
|
||||
removeTag={removeTag}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</OLFormGroup>
|
||||
)}
|
||||
</OLForm>
|
||||
|
||||
{error && (
|
||||
<Notification
|
||||
content={error.length ? error : t('generic_something_went_wrong')}
|
||||
type="error"
|
||||
/>
|
||||
)}
|
||||
</OLModalBody>
|
||||
|
||||
<OLModalFooter>
|
||||
<OLButton variant="secondary" disabled={inFlight} onClick={handleHide}>
|
||||
{t('cancel')}
|
||||
</OLButton>
|
||||
<OLButton
|
||||
variant="primary"
|
||||
disabled={inFlight || !valid}
|
||||
form="clone-project-form"
|
||||
type="submit"
|
||||
>
|
||||
{inFlight ? <>{t('copying')}…</> : t('copy')}
|
||||
</OLButton>
|
||||
</OLModalFooter>
|
||||
</>
|
||||
)
|
||||
}
|
||||
CloneProjectModalContent.propTypes = {
|
||||
handleHide: PropTypes.func.isRequired,
|
||||
inFlight: PropTypes.bool,
|
||||
setInFlight: PropTypes.func.isRequired,
|
||||
handleAfterCloned: PropTypes.func.isRequired,
|
||||
projectId: PropTypes.string,
|
||||
projectName: PropTypes.string,
|
||||
projectTags: PropTypes.arrayOf(
|
||||
PropTypes.shape({
|
||||
_id: PropTypes.string.isRequired,
|
||||
name: PropTypes.string.isRequired,
|
||||
color: PropTypes.string,
|
||||
})
|
||||
),
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
import React, { memo, useCallback, useState } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import CloneProjectModalContent from './clone-project-modal-content'
|
||||
import OLModal from '@/features/ui/components/ol/ol-modal'
|
||||
|
||||
function CloneProjectModal({
|
||||
show,
|
||||
handleHide,
|
||||
handleAfterCloned,
|
||||
projectId,
|
||||
projectName,
|
||||
projectTags,
|
||||
}) {
|
||||
const [inFlight, setInFlight] = useState(false)
|
||||
|
||||
const onHide = useCallback(() => {
|
||||
if (!inFlight) {
|
||||
handleHide()
|
||||
}
|
||||
}, [handleHide, inFlight])
|
||||
|
||||
return (
|
||||
<OLModal
|
||||
animation
|
||||
show={show}
|
||||
onHide={onHide}
|
||||
id="clone-project-modal"
|
||||
// backdrop="static" will disable closing the modal by clicking
|
||||
// outside of the modal element
|
||||
backdrop={inFlight ? 'static' : undefined}
|
||||
>
|
||||
<CloneProjectModalContent
|
||||
handleHide={onHide}
|
||||
inFlight={inFlight}
|
||||
setInFlight={setInFlight}
|
||||
handleAfterCloned={handleAfterCloned}
|
||||
projectId={projectId}
|
||||
projectName={projectName}
|
||||
projectTags={projectTags}
|
||||
/>
|
||||
</OLModal>
|
||||
)
|
||||
}
|
||||
|
||||
CloneProjectModal.propTypes = {
|
||||
handleHide: PropTypes.func.isRequired,
|
||||
show: PropTypes.bool.isRequired,
|
||||
handleAfterCloned: PropTypes.func.isRequired,
|
||||
projectId: PropTypes.string,
|
||||
projectName: PropTypes.string,
|
||||
projectTags: PropTypes.arrayOf(
|
||||
PropTypes.shape({
|
||||
_id: PropTypes.string.isRequired,
|
||||
name: PropTypes.string.isRequired,
|
||||
color: PropTypes.string,
|
||||
})
|
||||
),
|
||||
}
|
||||
|
||||
export default memo(CloneProjectModal)
|
||||
@@ -0,0 +1,26 @@
|
||||
import { FC } from 'react'
|
||||
import { Tag as TagType } from '../../../../../app/src/Features/Tags/types'
|
||||
import { getTagColor } from '@/features/project-list/util/tag'
|
||||
import Tag from '@/features/ui/components/bootstrap-5/tag'
|
||||
|
||||
export const CloneProjectTag: FC<{
|
||||
tag: TagType
|
||||
removeTag: (tag: TagType) => void
|
||||
}> = ({ tag, removeTag }) => {
|
||||
return (
|
||||
<Tag
|
||||
prepend={
|
||||
<i
|
||||
className="badge-tag-circle"
|
||||
style={{ backgroundColor: getTagColor(tag) }}
|
||||
/>
|
||||
}
|
||||
closeBtnProps={{
|
||||
onClick: () => removeTag(tag),
|
||||
}}
|
||||
className="ms-2 mb-2"
|
||||
>
|
||||
{tag.name}
|
||||
</Tag>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import React from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import { useProjectContext } from '../../../shared/context/project-context'
|
||||
import withErrorBoundary from '../../../infrastructure/error-boundary'
|
||||
import CloneProjectModal from './clone-project-modal'
|
||||
|
||||
const EditorCloneProjectModalWrapper = React.memo(
|
||||
function EditorCloneProjectModalWrapper({ show, handleHide, openProject }) {
|
||||
const {
|
||||
_id: projectId,
|
||||
name: projectName,
|
||||
tags: projectTags,
|
||||
} = useProjectContext()
|
||||
|
||||
if (!projectName) {
|
||||
// wait for useProjectContext
|
||||
return null
|
||||
} else {
|
||||
return (
|
||||
<CloneProjectModal
|
||||
handleHide={handleHide}
|
||||
show={show}
|
||||
handleAfterCloned={openProject}
|
||||
projectId={projectId}
|
||||
projectName={projectName}
|
||||
projectTags={projectTags}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
EditorCloneProjectModalWrapper.propTypes = {
|
||||
handleHide: PropTypes.func.isRequired,
|
||||
show: PropTypes.bool.isRequired,
|
||||
openProject: PropTypes.func.isRequired,
|
||||
}
|
||||
|
||||
export default withErrorBoundary(EditorCloneProjectModalWrapper)
|
||||
Reference in New Issue
Block a user