-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
23 changed files
with
370 additions
and
89 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
7 changes: 7 additions & 0 deletions
7
apps/app/src/features/lms/client/components/CourceEnd/CourceEnd.module.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
.lms-cource-end :global { | ||
.btn { | ||
width: 400px; | ||
height: 150px; | ||
pointer-events: auto; | ||
} | ||
} |
22 changes: 22 additions & 0 deletions
22
apps/app/src/features/lms/client/components/CourceEnd/CourceEnd.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
import { useCallback } from 'react'; | ||
|
||
import { usePagePresentationModal } from '~/stores/modal'; | ||
|
||
import styles from './CourceEnd.module.scss'; | ||
|
||
export const CourceEnd = (): JSX.Element => { | ||
|
||
const { close } = usePagePresentationModal(); | ||
|
||
const clickHandler = useCallback(() => { | ||
close(); | ||
}, [close]); | ||
|
||
return ( | ||
<div className={`${styles['lms-cource-end']} d-flex justify-content-center`}> | ||
<button type="button" className="btn btn-lg btn-outline-success" onClick={clickHandler}> | ||
<div className="display-4">Save and exit</div> | ||
</button> | ||
</div> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export * from './CourceEnd'; |
37 changes: 0 additions & 37 deletions
37
apps/app/src/features/lms/client/components/CourceUnitList/CourceUnitRow.tsx
This file was deleted.
Oops, something went wrong.
3 changes: 3 additions & 0 deletions
3
apps/app/src/features/lms/client/components/CourceView/CourceDashboard/CourceDashboard.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
export const CourceDashboard = (): JSX.Element => { | ||
return <>(TBD) Dashboard</>; | ||
}; |
1 change: 1 addition & 0 deletions
1
apps/app/src/features/lms/client/components/CourceView/CourceDashboard/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export * from './CourceDashboard'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
55 changes: 55 additions & 0 deletions
55
apps/app/src/features/lms/client/components/CourceView/CourceUnitList/CourceUnitRow.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
import type { IPageHasId } from '@growi/core'; | ||
import { DevidedPagePath } from '@growi/core/dist/models'; | ||
import { format } from 'date-fns'; | ||
|
||
import PagePathHierarchicalLink from '~/components/PagePathHierarchicalLink'; | ||
import LinkedPagePath from '~/models/linked-page-path'; | ||
|
||
|
||
const formatDate = (date: Date | null) => { | ||
if (date == null) { | ||
return ''; | ||
} | ||
return format(new Date(date), 'yyyy-MM-dd HH:mm'); | ||
}; | ||
|
||
|
||
export const CourceUnitHead = (): JSX.Element => { | ||
return ( | ||
<tr> | ||
<th style={{ width: '1px' }}></th> | ||
<th>Cource unit name</th> | ||
<th>Author</th> | ||
<th style={{ width: '200px' }}>Last update</th> | ||
</tr> | ||
); | ||
}; | ||
|
||
|
||
type Props = { | ||
page: IPageHasId, | ||
onPlayButtonClicked?: (page: IPageHasId) => void, | ||
} | ||
|
||
export const CourceUnitRow = (props: Props): JSX.Element => { | ||
const { page, onPlayButtonClicked } = props; | ||
const { creator, updatedAt } = page; | ||
|
||
const dPagePath: DevidedPagePath = new DevidedPagePath(page.path, false); | ||
const linkedPagePath = new LinkedPagePath(dPagePath.latter); | ||
|
||
return ( | ||
<tr> | ||
<td> | ||
<button type="button" className="btn btn-lg btn-light d-flex align-items-center" onClick={() => onPlayButtonClicked?.(page)}> | ||
<span className="material-icons">play_arrow</span> | ||
</button> | ||
</td> | ||
<td className="align-middle"> | ||
<PagePathHierarchicalLink linkedPagePath={linkedPagePath} basePath={dPagePath.isRoot ? undefined : dPagePath.former} /> | ||
</td> | ||
<td className="align-middle">{creator.name}</td> | ||
<td className="align-middle">{formatDate(updatedAt)}</td> | ||
</tr> | ||
); | ||
}; |
File renamed without changes.
55 changes: 55 additions & 0 deletions
55
apps/app/src/features/lms/client/components/CourceView/CourceView.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
import { useState } from 'react'; | ||
|
||
import dynamic from 'next/dynamic'; | ||
import { TabContent, TabPane } from 'reactstrap'; | ||
|
||
import { useCurrentPathname } from '~/stores/context'; | ||
|
||
import { CourceUnitList } from './CourceUnitList'; | ||
|
||
|
||
const CourceDashboard = dynamic(() => import('./CourceDashboard').then(mod => mod.CourceDashboard), { | ||
ssr: false, | ||
}); | ||
|
||
export const CourceView = (): JSX.Element => { | ||
|
||
const { data: currentPagePath } = useCurrentPathname(); | ||
|
||
const [isDashboardMode, setDashboardMode] = useState(false); | ||
|
||
if (currentPagePath == null) { | ||
return <></>; | ||
} | ||
|
||
const Toggler = () => ( | ||
<div className="btn-group btn-group-toggle" data-toggle="buttons"> | ||
<label className={`btn btn-outline-secondary ${isDashboardMode ? 'active' : ''}`} onClick={() => setDashboardMode(true)}> | ||
<input type="radio" name="options" id="option1" checked={isDashboardMode} onChange={() => setDashboardMode(true)} /> | ||
<span className="icon icon-graph"></span> | ||
</label> | ||
<label className={`btn btn-outline-secondary ${isDashboardMode ? '' : 'active'}`} onClick={() => setDashboardMode(false)}> | ||
<input type="radio" name="options" id="option2" checked={!isDashboardMode} onChange={() => setDashboardMode(true)} /> | ||
<span className="icon icon-list"></span> | ||
</label> | ||
</div> | ||
); | ||
|
||
return ( | ||
<> | ||
<div className="d-flex flex-column align-items-end"> | ||
<Toggler /> | ||
</div> | ||
<div className="mt-3"> | ||
<TabContent activeTab={isDashboardMode ? 'dashboard' : 'list'}> | ||
<TabPane tabId="dashboard"> | ||
<CourceDashboard /> | ||
</TabPane> | ||
<TabPane tabId="list"> | ||
<CourceUnitList path={currentPagePath} /> | ||
</TabPane> | ||
</TabContent> | ||
</div> | ||
</> | ||
); | ||
}; |
1 change: 1 addition & 0 deletions
1
apps/app/src/features/lms/client/components/CourceView/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export * from './CourceView'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
export * from './CourceList'; | ||
export * from './CourceView'; |
Oops, something went wrong.