diff --git a/frontend/pages/Modules/Show.tsx b/frontend/pages/Modules/Show.tsx index 37cb68f..d531779 100644 --- a/frontend/pages/Modules/Show.tsx +++ b/frontend/pages/Modules/Show.tsx @@ -15,9 +15,8 @@ import { stringify } from '@/utils/queryString' import { Params, useModuleParams } from './hooks/useModuleParams' export const Show: React.FC = () => { - const navigate = useNavigate() const pathModule = useParams()['*'] ?? '' - const { data, isLoading } = useModule(pathModule) + const { data, isLoading, mutate } = useModule(pathModule) const [params, setParams] = useModuleParams() const content = useMemo(() => { @@ -27,7 +26,7 @@ export const Show: React.FC = () => { switch (params.tab) { case 'sources': { - return + return } case 'moduleDependencies': { return ( @@ -51,7 +50,11 @@ export const Show: React.FC = () => { } case 'sourceReverseDependencies': { return ( - + ) } default: { diff --git a/frontend/pages/Modules/components/SourceReverseDependenciesContent/SourceReverseDependenciesContent.tsx b/frontend/pages/Modules/components/SourceReverseDependenciesContent/SourceReverseDependenciesContent.tsx index 9175ff3..83a653a 100644 --- a/frontend/pages/Modules/components/SourceReverseDependenciesContent/SourceReverseDependenciesContent.tsx +++ b/frontend/pages/Modules/components/SourceReverseDependenciesContent/SourceReverseDependenciesContent.tsx @@ -1,13 +1,32 @@ import { Link } from '@/components/Link' -import { EmptyTableBody, Table, Th, Text, Td, Button, Cluster, Chip } from '@/components/ui' +import { + EmptyTableBody, + Table, + Th, + Text, + Td, + Button, + Cluster, + Chip, + Tooltip, + FaCircleInfoIcon, + FaPencilIcon, +} from '@/components/ui' import { path } from '@/constants/path' import { Module, SpecificModule, SpecificModuleSource } from '@/models/module' import { FC, useCallback, useMemo, useState } from 'react' import { StickyThead } from '../StickyThead' import { SortTypes, ascNumber, ascString, sortTypes } from '@/utils/sort' - -const SourceTr: FC<{ source: SpecificModuleSource; filteredModule: Module | null }> = ({ filteredModule, source }) => { +import styled from 'styled-components' +import { SourceMemoInput } from '@/components/SourceMemoInput' + +const SourceTr: FC<{ mutate: () => void; source: SpecificModuleSource; filteredModule: Module | null }> = ({ + mutate, + filteredModule, + source, +}) => { const [expanded, setExpanded] = useState(false) + const [editingMemo, setEditingMemo] = useState(false) const modules = useMemo(() => { const modules = new Set() @@ -42,6 +61,38 @@ const SourceTr: FC<{ source: SpecificModuleSource; filteredModule: Module | null {source.sourceName} + + {editingMemo ? ( + { + setEditingMemo(false) + mutate() + }} + onClose={() => { + setEditingMemo(false) + }} + /> + ) : ( + + {source.memo !== '' ? ( + + + + ) : ( + + + + )} +
+ +
+
+ )} + {modules.map((module) => ( @@ -123,11 +174,12 @@ type SortType = { } type Props = { + mutate: () => void sources: SpecificModule['sourceReverseDependencies'] filteredModule: Module | null } -export const SourceReverseDependenciesContent: FC = ({ filteredModule, sources }) => { +export const SourceReverseDependenciesContent: FC = ({ mutate, filteredModule, sources }) => { const [sort, setSort] = useState({ key: 'sourceName', sort: 'none' }) const sortedSources = useMemo(() => { @@ -179,10 +231,18 @@ export const SourceReverseDependenciesContent: FC = ({ filteredModule, so ) : ( {sortedSources.map((source) => ( - + ))} )} ) } + +const Transparent = styled.span` + opacity: 0; +` + +const FixedWidthMemo = styled(Cluster)` + width: 4em; +` diff --git a/frontend/pages/Modules/components/SourcesContent/SourcesContent.tsx b/frontend/pages/Modules/components/SourcesContent/SourcesContent.tsx index 1404169..e70d32d 100644 --- a/frontend/pages/Modules/components/SourcesContent/SourcesContent.tsx +++ b/frontend/pages/Modules/components/SourcesContent/SourcesContent.tsx @@ -1,13 +1,32 @@ import { Link } from '@/components/Link' -import { EmptyTableBody, Table, Th, Text, Td, Button, Chip, Cluster } from '@/components/ui' +import { + EmptyTableBody, + Table, + Th, + Text, + Td, + Button, + Chip, + Cluster, + FaPencilIcon, + FaCircleInfoIcon, + Tooltip, +} from '@/components/ui' import { path } from '@/constants/path' import { Module, SpecificModule, SpecificModuleSource } from '@/models/module' import { FC, useCallback, useMemo, useState } from 'react' import { StickyThead } from '../StickyThead' import { SortTypes, ascNumber, ascString, sortTypes } from '@/utils/sort' - -const SourceTr: FC<{ source: SpecificModuleSource; filteredModule: Module | null }> = ({ source, filteredModule }) => { +import styled from 'styled-components' +import { SourceMemoInput } from '@/components/SourceMemoInput' + +const SourceTr: FC<{ mutate: () => void; source: SpecificModuleSource; filteredModule: Module | null }> = ({ + mutate, + source, + filteredModule, +}) => { const [expanded, setExpanded] = useState(false) + const [editingMemo, setEditingMemo] = useState(false) const modules = useMemo(() => { const modules = new Set() @@ -42,6 +61,38 @@ const SourceTr: FC<{ source: SpecificModuleSource; filteredModule: Module | null {source.sourceName} + + {editingMemo ? ( + { + setEditingMemo(false) + mutate() + }} + onClose={() => { + setEditingMemo(false) + }} + /> + ) : ( + + {source.memo !== '' ? ( + + + + ) : ( + + + + )} +
+ +
+
+ )} + {modules.map((module) => ( @@ -58,6 +109,7 @@ const SourceTr: FC<{ source: SpecificModuleSource; filteredModule: Module | null dependencies.map((dependency) => dependency.methodIds.map((methodId, index) => ( + @@ -123,11 +175,12 @@ type SortType = { } type Props = { + mutate: () => void sources: SpecificModule['sources'] filteredModule: Module | null } -export const SourcesContent: FC = ({ filteredModule, sources }) => { +export const SourcesContent: FC = ({ mutate, filteredModule, sources }) => { const [sort, setSort] = useState({ key: 'sourceName', sort: 'none' }) const sortedSources = useMemo(() => { @@ -164,6 +217,7 @@ export const SourcesContent: FC = ({ filteredModule, sources }) => { setNextSort('sourceName')}> Source + Memo Dependency Module setNextSort('dependency')}> Dependency @@ -179,10 +233,18 @@ export const SourcesContent: FC = ({ filteredModule, sources }) => { ) : ( {sortedSources.map((source) => ( - + ))} )} ) } + +const Transparent = styled.span` + opacity: 0; +` + +const FixedWidthMemo = styled(Cluster)` + width: 4em; +` diff --git a/frontend/repositories/moduleRepository.ts b/frontend/repositories/moduleRepository.ts index 56a9a1d..3f620f9 100644 --- a/frontend/repositories/moduleRepository.ts +++ b/frontend/repositories/moduleRepository.ts @@ -53,7 +53,7 @@ type SpecificModuleResponse = { } export const useModule = (module: string) => { - const { data, isLoading } = useSWR(path.api.modules.show(module), async (): Promise => { + const { data, isLoading, mutate } = useSWR(path.api.modules.show(module), async (): Promise => { const response = await get(path.api.modules.show(module)) return { @@ -91,5 +91,5 @@ export const useModule = (module: string) => { } }) - return { data, isLoading } + return { data, isLoading, mutate } }