Skip to content

Commit

Permalink
Merge branch 'master' into feat/cms
Browse files Browse the repository at this point in the history
  • Loading branch information
yusuke-sak committed Oct 13, 2023
2 parents cf8e6cf + 1dbbc92 commit 5bfd261
Show file tree
Hide file tree
Showing 7 changed files with 2,583 additions and 68 deletions.
2 changes: 2 additions & 0 deletions apps/app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -212,6 +212,8 @@
"handsontable": "v7.0.0 or above is no loger MIT lisence."
},
"devDependencies": {
"@ant-design/charts": "^1.4.2",
"@ant-design/plots": "^1.2.5",
"@growi/presentation": "link:../../packages/presentation",
"@growi/ui": "link:../../packages/ui",
"@handsontable/react": "=2.1.0",
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import React, { ReactNode } from 'react';

import dynamic from 'next/dynamic';

import { RawLayout } from '~/components/Layout/RawLayout';
import { GrowiNavbar } from '~/components/Navbar/GrowiNavbar';
import { PagePresentationModal } from '~/components/PagePresentationModal';


const SystemVersion = dynamic(() => import('~/components/SystemVersion'), { ssr: false });
const HotkeysManager = dynamic(() => import('~/components/Hotkeys/HotkeysManager'), { ssr: false });


type Props = {
componentTitle?: string
children?: ReactNode
}


export const CourceLayout = ({
children, componentTitle,
}: Props): JSX.Element => {

return (
<RawLayout>
<div>
<GrowiNavbar />

<header className="py-0 container-fluid">
<h1 className="title px-3">{componentTitle}</h1>
</header>
<div id="main" className="main">
<div className="container-fluid">
{children}
</div>
</div>

<PagePresentationModal />
<SystemVersion />
</div>

<HotkeysManager />

</RawLayout>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './CourceLayout';
Original file line number Diff line number Diff line change
@@ -1,3 +1,137 @@
import { useEffect, useState } from 'react';

import { TinyLine, Liquid, Column } from '@ant-design/plots';

const DemoTinyLine = () => {
const data: number[] = [];
for (let i = 0; i < 10; i++) {
data.push(Math.random() * 1000);
}
const config = {
height: 60,
autoFit: false,
data,
smooth: true,
};
return <TinyLine {...config} />;
};

const DemoLiquid = () => {
const config = {
percent: 0.25,
outline: {
border: 4,
distance: 8,
},
wave: {
length: 128,
},
};
return <Liquid {...config} />;
};

const DemoColumn = () => {
const [data, setData] = useState([]);

const asyncFetch = () => {
fetch('https://gw.alipayobjects.com/os/antfincdn/8elHX%26irfq/stack-column-data.json')
.then(response => response.json())
.then(json => setData(json))
.catch((error) => {
console.log('fetch data failed', error);
});
};
const config = {
data,
isStack: true,
xField: 'year',
yField: 'value',
seriesField: 'type',
};

useEffect(() => {
asyncFetch();
}, []);

return <Column {...config} />;
};

export const CourceDashboard = (): JSX.Element => {
return <>(TBD) Dashboard</>;
return (
<>
<div className="row">
<div className="col-4">
<div className="card mb-3">
<div className="row no-gutters">
<div className="col-md-4 d-flex flex-column align-items-center justify-content-center bg-light">
<div><b>Active user / week</b></div>
<div className="display-3">26</div>
</div>
<div className="col-md-8">
<div className="card-body">
<h5 className="card-title">Card title</h5>
<p className="card-text"><DemoTinyLine /></p>
<p className="card-text text-right"><small className="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>
<div className="col-4">
<div className="card mb-3">
<div className="row no-gutters">
<div className="col-md-4 d-flex flex-column align-items-center justify-content-center bg-light">
<div><b>Active user / month</b></div>
<div className="display-3">500</div>
</div>
<div className="col-md-8">
<div className="card-body">
<h5 className="card-title">Card title</h5>
<p className="card-text"><DemoTinyLine /></p>
<p className="card-text text-right"><small className="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>
<div className="col-4">
<div className="card mb-3">
<div className="row no-gutters">
<div className="col-md-4 d-flex flex-column align-items-center justify-content-center bg-light">
<div><b>Active organizations</b></div>
<div className="display-3">1349</div>
</div>
<div className="col-md-8">
<div className="card-body">
<h5 className="card-title">Card title</h5>
<p className="card-text"><DemoTinyLine /></p>
<p className="card-text text-right"><small className="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-4">
<div className="card mb-3">
<div className="card-body">
<h5 className="card-title">Completed users</h5>
<p className="d-flex justify-content-center" style={{ minHeight: '300px' }}><DemoLiquid /></p>
<p className="card-text text-right"><small className="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
<div className="col-8">
<div className="card mb-3">
<div className="card-body">
<h5 className="card-title">Completed users</h5>
<p className="d-flex justify-content-center" style={{ minHeight: '300px' }}><DemoColumn /></p>
<p className="card-text text-right"><small className="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -23,24 +23,22 @@ export const CourceView = (): JSX.Element => {
}

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 className="list-group sticky-top d-none d-lg-block">
<button type="button" className={`list-group-item list-group-item-action ${isDashboardMode ? 'active' : ''}`} onClick={() => setDashboardMode(true)}>
<span className="icon icon-grid mr-1"></span>Dashboard
</button>
<button type="button" className={`list-group-item list-group-item-action ${isDashboardMode ? '' : 'active'}`} onClick={() => setDashboardMode(false)}>
<span className="icon icon-list mr-1"></span>List
</button>
</div>
);

return (
<>
<div className="d-flex flex-column align-items-end">
<div className="row">
<div className="col-lg-2">
<Toggler />
</div>
<div className="mt-3">
<div className="col-lg-10">
<TabContent activeTab={isDashboardMode ? 'dashboard' : 'list'}>
<TabPane tabId="dashboard">
<CourceDashboard />
Expand All @@ -50,6 +48,6 @@ export const CourceView = (): JSX.Element => {
</TabPane>
</TabContent>
</div>
</>
</div>
);
};
21 changes: 5 additions & 16 deletions apps/app/src/pages/_lms/[namespace].page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,12 @@ import dynamic from 'next/dynamic';
import Head from 'next/head';

import { GrowiSubNavigation } from '~/components/Navbar/GrowiSubNavigation';
import { CourceLayout } from '~/features/lms/client/components/CourceLayout';
import type { CrowiRequest } from '~/interfaces/crowi-request';
import type { RendererConfig } from '~/interfaces/services/renderer';
import { useCurrentPageId } from '~/stores/page';
import { useDrawerMode } from '~/stores/ui';

import { BasicLayout } from '../../components/Layout/BasicLayout';
import {
useCurrentUser, useCurrentPathname, useGrowiCloudUri,
useIsSearchServiceConfigured, useIsSearchServiceReachable,
Expand Down Expand Up @@ -69,23 +69,12 @@ const CourcePage: NextPageWithLayout<CommonProps> = (props: Props) => {
<title>{title}</title>
</Head>
<div className="dynamic-layout-root">
<header className="py-0 position-relative">
<GrowiSubNavigation
pagePath={props.currentPathname}
showDrawerToggler={isDrawerMode}
isTagLabelsDisabled
isDrawerMode={isDrawerMode}
additionalClasses={['container-fluid']}
/>
</header>

<div className="content-main container-lg grw-container-convertible mb-5 pb-5">
<div className="mt-4">
<div className="container-fluid">
<header className="mb-5">
<h1>{props.courceTitle}</h1>
</div>
</header>
<CourceView />
</div>

</div>
</>
);
Expand All @@ -99,7 +88,7 @@ const Layout = ({ children, ...props }: LayoutProps): JSX.Element => {
// init sidebar config with UserUISettings and sidebarConfig
useInitSidebarConfig(props.sidebarConfig, props.userUISettings);

return <BasicLayout>{children}</BasicLayout>;
return <CourceLayout>{children}</CourceLayout>;
};

CourcePage.getLayout = function getLayout(page) {
Expand Down
Loading

0 comments on commit 5bfd261

Please sign in to comment.