Compare commits
No commits in common. "54a164ddc6da31a6a467e539c4b2eb70cc7ba4ed" and "57eb3d317bd6c433788223c14dfa5d77e80f77da" have entirely different histories.
54a164ddc6
...
57eb3d317b
@ -2,4 +2,4 @@ preact.config.js
|
||||
src/generated/**/*
|
||||
postcss.js
|
||||
*.config.js
|
||||
tests/**/*
|
||||
tests/**/*
|
||||
|
||||
@ -38,8 +38,7 @@ module.exports = {
|
||||
files: ['*.js', '*.ts', '*.tsx'],
|
||||
rules: {
|
||||
'@typescript-eslint/explicit-function-return-type': 'off',
|
||||
'@typescript-eslint/interface-name-prefix': 'off',
|
||||
'@typescript-eslint/no-non-null-assertion': 'off'
|
||||
'@typescript-eslint/interface-name-prefix': 'off'
|
||||
}
|
||||
},
|
||||
]
|
||||
|
||||
5
.vscode/settings.json
vendored
5
.vscode/settings.json
vendored
@ -4,8 +4,5 @@
|
||||
"editor.quickSuggestions": {
|
||||
"strings": true,
|
||||
"other": true,
|
||||
},
|
||||
"cSpell.words": [
|
||||
"Formik"
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -339,8 +339,8 @@
|
||||
"kind": "NON_NULL",
|
||||
"name": null,
|
||||
"ofType": {
|
||||
"kind": "OBJECT",
|
||||
"name": "Project",
|
||||
"kind": "SCALAR",
|
||||
"name": "Boolean",
|
||||
"ofType": null
|
||||
}
|
||||
},
|
||||
@ -386,6 +386,16 @@
|
||||
"enumValues": null,
|
||||
"possibleTypes": null
|
||||
},
|
||||
{
|
||||
"kind": "SCALAR",
|
||||
"name": "Boolean",
|
||||
"description": "The `Boolean` scalar type represents `true` or `false`.",
|
||||
"fields": null,
|
||||
"inputFields": null,
|
||||
"interfaces": null,
|
||||
"enumValues": null,
|
||||
"possibleTypes": null
|
||||
},
|
||||
{
|
||||
"kind": "SCALAR",
|
||||
"name": "Float",
|
||||
@ -562,16 +572,6 @@
|
||||
"enumValues": null,
|
||||
"possibleTypes": null
|
||||
},
|
||||
{
|
||||
"kind": "SCALAR",
|
||||
"name": "Boolean",
|
||||
"description": "The `Boolean` scalar type represents `true` or `false`.",
|
||||
"fields": null,
|
||||
"inputFields": null,
|
||||
"interfaces": null,
|
||||
"enumValues": null,
|
||||
"possibleTypes": null
|
||||
},
|
||||
{
|
||||
"kind": "OBJECT",
|
||||
"name": "__Schema",
|
||||
|
||||
65
package-lock.json
generated
65
package-lock.json
generated
@ -1313,35 +1313,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"@fortawesome/fontawesome-common-types": {
|
||||
"version": "0.2.34",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.34.tgz",
|
||||
"integrity": "sha512-XcIn3iYbTEzGIxD0/dY5+4f019jIcEIWBiHc3KrmK/ROahwxmZ/s+tdj97p/5K0klz4zZUiMfUlYP0ajhSJjmA=="
|
||||
},
|
||||
"@fortawesome/fontawesome-svg-core": {
|
||||
"version": "1.2.34",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.34.tgz",
|
||||
"integrity": "sha512-0KNN0nc5eIzaJxlv43QcDmTkDY1CqeN6J7OCGSs+fwGPdtv0yOQqRjieopBCmw+yd7uD3N2HeNL3Zm5isDleLg==",
|
||||
"requires": {
|
||||
"@fortawesome/fontawesome-common-types": "^0.2.34"
|
||||
}
|
||||
},
|
||||
"@fortawesome/free-solid-svg-icons": {
|
||||
"version": "5.15.2",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.2.tgz",
|
||||
"integrity": "sha512-ZfCU+QjaFsdNZmOGmfqEWhzI3JOe37x5dF4kz9GeXvKn/sTxhqMtZ7mh3lBf76SvcYY5/GKFuyG7p1r4iWMQqw==",
|
||||
"requires": {
|
||||
"@fortawesome/fontawesome-common-types": "^0.2.34"
|
||||
}
|
||||
},
|
||||
"@fortawesome/react-fontawesome": {
|
||||
"version": "0.1.14",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz",
|
||||
"integrity": "sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==",
|
||||
"requires": {
|
||||
"prop-types": "^15.7.2"
|
||||
}
|
||||
},
|
||||
"@fullhuman/postcss-purgecss": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@fullhuman/postcss-purgecss/-/postcss-purgecss-3.1.3.tgz",
|
||||
@ -8915,27 +8886,6 @@
|
||||
"mime-types": "^2.1.12"
|
||||
}
|
||||
},
|
||||
"formik": {
|
||||
"version": "2.2.6",
|
||||
"resolved": "https://registry.npmjs.org/formik/-/formik-2.2.6.tgz",
|
||||
"integrity": "sha512-Kxk2zQRafy56zhLmrzcbryUpMBvT0tal5IvcifK5+4YNGelKsnrODFJ0sZQRMQboblWNym4lAW3bt+tf2vApSA==",
|
||||
"requires": {
|
||||
"deepmerge": "^2.1.1",
|
||||
"hoist-non-react-statics": "^3.3.0",
|
||||
"lodash": "^4.17.14",
|
||||
"lodash-es": "^4.17.14",
|
||||
"react-fast-compare": "^2.0.1",
|
||||
"tiny-warning": "^1.0.2",
|
||||
"tslib": "^1.10.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"deepmerge": {
|
||||
"version": "2.2.1",
|
||||
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz",
|
||||
"integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA=="
|
||||
}
|
||||
}
|
||||
},
|
||||
"forwarded": {
|
||||
"version": "0.1.2",
|
||||
"resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
|
||||
@ -12498,11 +12448,6 @@
|
||||
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
|
||||
"integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
|
||||
},
|
||||
"lodash-es": {
|
||||
"version": "4.17.20",
|
||||
"resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.20.tgz",
|
||||
"integrity": "sha512-JD1COMZsq8maT6mnuz1UMV0jvYD0E0aUsSOdrr1/nAG3dhqQXwRRgeW0cSqH1U43INKcqxaiVIQNOUDld7gRDA=="
|
||||
},
|
||||
"lodash._reinterpolate": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
|
||||
@ -17998,11 +17943,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"react-fast-compare": {
|
||||
"version": "2.0.4",
|
||||
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz",
|
||||
"integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw=="
|
||||
},
|
||||
"react-is": {
|
||||
"version": "17.0.1",
|
||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz",
|
||||
@ -20703,11 +20643,6 @@
|
||||
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
|
||||
"dev": true
|
||||
},
|
||||
"tiny-warning": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
|
||||
"integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
|
||||
},
|
||||
"tinydate": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/tinydate/-/tinydate-1.3.0.tgz",
|
||||
|
||||
@ -26,12 +26,8 @@
|
||||
],
|
||||
"dependencies": {
|
||||
"@apollo/client": "^3.3.7",
|
||||
"@fortawesome/fontawesome-svg-core": "^1.2.34",
|
||||
"@fortawesome/free-solid-svg-icons": "^5.15.2",
|
||||
"@fortawesome/react-fontawesome": "^0.1.14",
|
||||
"@tailwindcss/postcss7-compat": "^2.0.2",
|
||||
"autoprefixer": "^9.8.6",
|
||||
"formik": "^2.2.6",
|
||||
"graphql": "^15.5.0",
|
||||
"mobx": "^6.1.4",
|
||||
"mobx-react": "^7.1.0",
|
||||
|
||||
@ -1,21 +0,0 @@
|
||||
import { action, makeObservable, observable } from 'mobx';
|
||||
import { ComponentChild } from 'preact';
|
||||
|
||||
export class AppStore {
|
||||
@observable.ref nav: ComponentChild;
|
||||
@observable.ref main: ComponentChild;
|
||||
constructor() {
|
||||
makeObservable(this);
|
||||
}
|
||||
|
||||
@action
|
||||
setNav(component: ComponentChild) {
|
||||
this.nav = component;
|
||||
}
|
||||
@action
|
||||
setMain(component: ComponentChild) {
|
||||
this.main = component;
|
||||
}
|
||||
}
|
||||
|
||||
export const appStore = new AppStore();
|
||||
@ -1,13 +1,7 @@
|
||||
.projectPanel {
|
||||
@apply w-1/6;
|
||||
}
|
||||
|
||||
.app {
|
||||
@apply flex flex-row-reverse bg-red-50;
|
||||
|
||||
aside {
|
||||
@apply w-1/6 shadow;
|
||||
}
|
||||
main {
|
||||
@apply flex-auto ml-px;
|
||||
}
|
||||
@apply flex bg-red-50;
|
||||
}
|
||||
|
||||
1
src/components/app.scss.d.ts
vendored
1
src/components/app.scss.d.ts
vendored
@ -2,6 +2,7 @@
|
||||
declare namespace AppScssNamespace {
|
||||
export interface IAppScss {
|
||||
app: string;
|
||||
projectPanel: string;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,10 +1,26 @@
|
||||
import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
|
||||
import { Fragment, FunctionalComponent, h } from 'preact';
|
||||
import {
|
||||
ApolloClient,
|
||||
ApolloProvider,
|
||||
gql,
|
||||
InMemoryCache,
|
||||
useQuery
|
||||
} from '@apollo/client';
|
||||
import { FunctionalComponent, FunctionComponent, h } from 'preact';
|
||||
import { globalState } from '../global.state';
|
||||
import { ProjectPanel } from './projects/project-panel';
|
||||
import styles from './app.scss';
|
||||
import { OverlayContainer } from './commons/overlay/overlay';
|
||||
import { useObserver } from 'mobx-react';
|
||||
import { appStore } from '../app.store';
|
||||
import * as styles from './app.scss';
|
||||
|
||||
const LIST_PROJECT = gql`
|
||||
query listProject {
|
||||
findProjects {
|
||||
id
|
||||
name
|
||||
sshUrl
|
||||
comment
|
||||
webUrl
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const client = new ApolloClient({
|
||||
uri: '/api/graphql',
|
||||
@ -16,26 +32,18 @@ const App: FunctionalComponent = () => {
|
||||
<ApolloProvider client={client}>
|
||||
<div id="app" class={styles.app}>
|
||||
<Content />
|
||||
<OverlayContainer />
|
||||
</div>
|
||||
</ApolloProvider>
|
||||
);
|
||||
};
|
||||
|
||||
const Content = () => {
|
||||
return <Board />;
|
||||
};
|
||||
const Board = () => {
|
||||
return useObserver(() => {
|
||||
return (
|
||||
<Fragment>
|
||||
<main>{appStore.main}</main>
|
||||
<aside>
|
||||
<ProjectPanel />
|
||||
</aside>
|
||||
</Fragment>
|
||||
);
|
||||
});
|
||||
const Content: FunctionComponent = () => {
|
||||
const { loading, data } = useQuery(LIST_PROJECT);
|
||||
globalState.projects = data?.findProjects;
|
||||
console.log(globalState.projects);
|
||||
const Loading: FunctionComponent = () => <div>Loading...</div>;
|
||||
const Board: FunctionComponent = () => <ProjectPanel />;
|
||||
return loading ? <Loading /> : <Board />;
|
||||
};
|
||||
|
||||
export default App;
|
||||
|
||||
@ -1,6 +0,0 @@
|
||||
.mask {
|
||||
@apply opacity-50 bg-white fixed top-0 bottom-0 left-0 right-0;
|
||||
}
|
||||
.body {
|
||||
@apply fixed top-0 bottom-0 left-0 right-0;
|
||||
}
|
||||
11
src/components/commons/overlay/overlay.scss.d.ts
vendored
11
src/components/commons/overlay/overlay.scss.d.ts
vendored
@ -1,11 +0,0 @@
|
||||
// This file is automatically generated from your CSS. Any edits will be overwritten.
|
||||
declare namespace OverlayScssNamespace {
|
||||
export interface IOverlayScss {
|
||||
body: string;
|
||||
mask: string;
|
||||
}
|
||||
}
|
||||
|
||||
declare const OverlayScssModule: OverlayScssNamespace.IOverlayScss;
|
||||
|
||||
export = OverlayScssModule;
|
||||
@ -1,26 +0,0 @@
|
||||
import { makeAutoObservable, observable } from 'mobx';
|
||||
import { ComponentChild } from 'preact';
|
||||
|
||||
export class OverlayStore {
|
||||
@observable.ref overlays: [string, ComponentChild][] = [];
|
||||
|
||||
constructor() {
|
||||
makeAutoObservable(this, {
|
||||
overlays: observable.shallow
|
||||
});
|
||||
}
|
||||
|
||||
addOverlay(id: string, overlay: ComponentChild) {
|
||||
this.overlays = [...this.overlays, [id, overlay]];
|
||||
}
|
||||
|
||||
removeOverlay(id: string) {
|
||||
const index = this.overlays.findIndex(it => it[0] === id);
|
||||
if (index === -1) {
|
||||
return;
|
||||
}
|
||||
this.overlays.splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
export const overlayStore = new OverlayStore();
|
||||
@ -1,78 +0,0 @@
|
||||
import { ComponentChild, createContext, Fragment, h } from 'preact';
|
||||
import styles from './overlay.scss';
|
||||
|
||||
import { observer } from 'mobx-react';
|
||||
import { overlayStore } from './overlay.store';
|
||||
import { useContext, useState } from 'preact/hooks';
|
||||
import { createPortal } from 'preact/compat';
|
||||
|
||||
interface Props {
|
||||
content: ComponentChild;
|
||||
overlayId?: string;
|
||||
onClose?: () => void;
|
||||
onOk?: () => void;
|
||||
onCancel?: () => void;
|
||||
}
|
||||
|
||||
interface OverlayContext {
|
||||
close: () => void;
|
||||
}
|
||||
|
||||
const rootElement = document.createElement('div');
|
||||
rootElement.classList.add('overlay-root');
|
||||
document.body.appendChild(rootElement);
|
||||
|
||||
export const createOverlay = (props: Props) => {
|
||||
return new Promise(resolve => {
|
||||
const id = Math.random()
|
||||
.toString(36)
|
||||
.substr(2, 6);
|
||||
props.overlayId = props.overlayId ?? id;
|
||||
const overlay = (
|
||||
<Overlay {...props} onClose={() => resolve(undefined)}></Overlay>
|
||||
);
|
||||
overlayStore.addOverlay(props.overlayId, overlay);
|
||||
});
|
||||
};
|
||||
|
||||
export const overlayContext = createContext<OverlayContext>({
|
||||
close: () => undefined
|
||||
});
|
||||
|
||||
const OverlayProvider = overlayContext.Provider;
|
||||
|
||||
export const useOverlay = () => {
|
||||
return useContext(overlayContext);
|
||||
};
|
||||
|
||||
export const Overlay = (props: Props) => {
|
||||
const [isVisible, setIsVisible] = useState(true);
|
||||
const close = () => {
|
||||
setIsVisible(false);
|
||||
overlayStore.removeOverlay(props.overlayId!);
|
||||
props.onClose?.();
|
||||
};
|
||||
const controller = {
|
||||
close
|
||||
};
|
||||
return createPortal(
|
||||
isVisible ? (
|
||||
<OverlayProvider value={controller}>
|
||||
<Fragment>
|
||||
<div class={styles.mask}></div>
|
||||
<div class={styles.body}>{props.content}</div>
|
||||
</Fragment>
|
||||
</OverlayProvider>
|
||||
) : (
|
||||
<div></div>
|
||||
),
|
||||
rootElement
|
||||
);
|
||||
};
|
||||
|
||||
export const OverlayContainer = observer(() => {
|
||||
const list = overlayStore.overlays.map(item => (
|
||||
<div key={item[0]}>{item[1]}</div>
|
||||
));
|
||||
return <div className="overlay-container">{list}</div>;
|
||||
});
|
||||
@ -1,20 +0,0 @@
|
||||
.projectDetails {
|
||||
header {
|
||||
@apply bg-red-400 text-gray-50 p-2;
|
||||
@apply grid grid-cols-2 grid-rows-2;
|
||||
|
||||
h2 {
|
||||
@apply text-white text-lg col-start-1 row-start-1 align-middle;
|
||||
svg {
|
||||
@apply text-xs ml-2;
|
||||
}
|
||||
}
|
||||
small {
|
||||
@apply text-sm col-start-1 row-start-2;
|
||||
}
|
||||
|
||||
.operations {
|
||||
@apply col-start-2 row-span-2 justify-self-end self-center;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,11 +0,0 @@
|
||||
// This file is automatically generated from your CSS. Any edits will be overwritten.
|
||||
declare namespace ProjectDetailsScssNamespace {
|
||||
export interface IProjectDetailsScss {
|
||||
operations: string;
|
||||
projectDetails: string;
|
||||
}
|
||||
}
|
||||
|
||||
declare const ProjectDetailsScssModule: ProjectDetailsScssNamespace.IProjectDetailsScss;
|
||||
|
||||
export = ProjectDetailsScssModule;
|
||||
@ -1,39 +0,0 @@
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||
import { faEdit, faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
|
||||
import { h } from 'preact';
|
||||
import { Project } from '../../generated/graphql';
|
||||
import styles from './project-details.scss';
|
||||
import { createOverlay } from '../commons/overlay/overlay';
|
||||
import { ProjectEditor } from './project-editor';
|
||||
|
||||
interface Props {
|
||||
project: Project;
|
||||
}
|
||||
|
||||
export const ProjectDetails = ({ project }: Props) => {
|
||||
const editProject = () => {
|
||||
createOverlay({
|
||||
content: <ProjectEditor project={project} />
|
||||
});
|
||||
};
|
||||
return (
|
||||
<section className={styles.projectDetails}>
|
||||
<header>
|
||||
<h2>
|
||||
{project.name}
|
||||
{project.webUrl ? (
|
||||
<a target="blank" href={project.webUrl}>
|
||||
<FontAwesomeIcon icon={faExternalLinkAlt} />
|
||||
</a>
|
||||
) : null}
|
||||
</h2>
|
||||
<small>{project.comment}</small>
|
||||
<div className={styles.operations}>
|
||||
<button onClick={editProject}>
|
||||
<FontAwesomeIcon icon={faEdit} />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@ -1,34 +0,0 @@
|
||||
.editor {
|
||||
@apply bg-white shadow-lg p-4 rounded-lg text-gray-800
|
||||
top-1/4 left-1/2 absolute
|
||||
transform -translate-x-1/2 -translate-y-1/2
|
||||
w-5/6;
|
||||
}
|
||||
.form {
|
||||
@apply bg-white;
|
||||
& > * {
|
||||
@apply block;
|
||||
}
|
||||
label {
|
||||
@apply my-4 relative flex;
|
||||
}
|
||||
.label {
|
||||
@apply text-gray-700 w-20 inline-block text-right;
|
||||
|
||||
&::after {
|
||||
content: '：';
|
||||
}
|
||||
}
|
||||
.controller {
|
||||
@apply border-b border-gray-300 flex-auto;
|
||||
}
|
||||
.submitBtn {
|
||||
@apply px-2 py-1 rounded-full bg-red-400 text-white;
|
||||
}
|
||||
.cancelBtn {
|
||||
@apply px-2 py-1 rounded-full bg-gray-100 text-gray-700 ml-2;
|
||||
}
|
||||
.footer {
|
||||
@apply text-right;
|
||||
}
|
||||
}
|
||||
16
src/components/projects/project-editor.scss.d.ts
vendored
16
src/components/projects/project-editor.scss.d.ts
vendored
@ -1,16 +0,0 @@
|
||||
// This file is automatically generated from your CSS. Any edits will be overwritten.
|
||||
declare namespace ProjectEditorScssNamespace {
|
||||
export interface IProjectEditorScss {
|
||||
cancelBtn: string;
|
||||
controller: string;
|
||||
editor: string;
|
||||
footer: string;
|
||||
form: string;
|
||||
label: string;
|
||||
submitBtn: string;
|
||||
}
|
||||
}
|
||||
|
||||
declare const ProjectEditorScssModule: ProjectEditorScssNamespace.IProjectEditorScss;
|
||||
|
||||
export = ProjectEditorScssModule;
|
||||
@ -1,137 +0,0 @@
|
||||
import { gql, useApolloClient, useMutation } from '@apollo/client';
|
||||
import { Field, Form, Formik } from 'formik';
|
||||
import { h } from 'preact';
|
||||
import {
|
||||
CreateProjectInput,
|
||||
Project,
|
||||
UpdateProjectInput
|
||||
} from '../../generated/graphql';
|
||||
import { useOverlay } from '../commons/overlay/overlay';
|
||||
import styles from './project-editor.scss';
|
||||
|
||||
interface Props {
|
||||
project?: Project;
|
||||
}
|
||||
|
||||
const CREATE_PROJECT = gql`
|
||||
mutation CreateProject($project: CreateProjectInput!) {
|
||||
createProject(project: $project) {
|
||||
id
|
||||
name
|
||||
comment
|
||||
sshUrl
|
||||
webUrl
|
||||
webHookSecret
|
||||
}
|
||||
}
|
||||
`;
|
||||
const MODIFY_PROJECT = gql`
|
||||
mutation ModifyProject($id: String!, $project: UpdateProjectInput!) {
|
||||
modifyProject(id: $id, project: $project) {
|
||||
id
|
||||
name
|
||||
comment
|
||||
sshUrl
|
||||
webUrl
|
||||
webHookSecret
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export const ProjectEditor = (props: Props) => {
|
||||
useApolloClient();
|
||||
const isCreate = props.project === undefined;
|
||||
|
||||
const [createProject] = useMutation<Project>(CREATE_PROJECT);
|
||||
const [updateProject] = useMutation<Project>(MODIFY_PROJECT);
|
||||
|
||||
const { close } = useOverlay();
|
||||
const cancel = (ev: MouseEvent) => {
|
||||
ev.preventDefault();
|
||||
close();
|
||||
};
|
||||
|
||||
type FormValues = CreateProjectInput | UpdateProjectInput;
|
||||
|
||||
const project: FormValues = {
|
||||
name: props.project?.name ?? '',
|
||||
comment: props.project?.comment ?? '',
|
||||
sshUrl: props.project?.sshUrl ?? '',
|
||||
webUrl: props.project?.webUrl ?? null,
|
||||
webHookSecret: props.project?.webHookSecret ?? ''
|
||||
};
|
||||
const submitForm = async (values: FormValues) => {
|
||||
try {
|
||||
if (isCreate) {
|
||||
await createProject({
|
||||
variables: { project: values }
|
||||
});
|
||||
} else {
|
||||
await updateProject({
|
||||
variables: { project: values, id: props.project!.id }
|
||||
});
|
||||
}
|
||||
close();
|
||||
} finally {
|
||||
//
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<section class={styles.editor}>
|
||||
<Formik initialValues={project} onSubmit={submitForm}>
|
||||
<Form className={styles.form}>
|
||||
<label>
|
||||
<span className={styles.label}>名称</span>
|
||||
<Field
|
||||
className={styles.controller}
|
||||
name="name"
|
||||
placeholder="项目名称"
|
||||
></Field>
|
||||
</label>
|
||||
<label>
|
||||
<span className={styles.label}>备注</span>
|
||||
<Field
|
||||
className={styles.controller}
|
||||
name="comment"
|
||||
placeholder="项目说明、简介"
|
||||
></Field>
|
||||
</label>
|
||||
<label>
|
||||
<span className={styles.label}>项目地址</span>
|
||||
<Field
|
||||
className={styles.controller}
|
||||
name="webUrl"
|
||||
placeholder="项目地址"
|
||||
></Field>
|
||||
</label>
|
||||
<label>
|
||||
<span className={styles.label}>SSH url</span>
|
||||
<Field
|
||||
className={styles.controller}
|
||||
name="sshUrl"
|
||||
placeholder="代码仓库地址"
|
||||
></Field>
|
||||
</label>
|
||||
<label>
|
||||
<span className={styles.label}>Secret</span>
|
||||
<Field
|
||||
className={styles.controller}
|
||||
name="webHookSecret"
|
||||
placeholder="Web Hook Secret"
|
||||
></Field>
|
||||
</label>
|
||||
|
||||
<footer className={styles.footer}>
|
||||
<button type="submit" className={styles.submitBtn}>
|
||||
{isCreate ? '创建' : '修改'}
|
||||
</button>
|
||||
<button onClick={cancel} className={styles.cancelBtn}>
|
||||
取消
|
||||
</button>
|
||||
</footer>
|
||||
</Form>
|
||||
</Formik>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
@ -1,17 +1,16 @@
|
||||
.panel {
|
||||
@apply h-full overflow-auto flex flex-col;
|
||||
@apply h-full overflow-auto;
|
||||
|
||||
h1 {
|
||||
@apply bg-red-400 text-white text-lg text-center p-2;
|
||||
}
|
||||
}
|
||||
.list {
|
||||
@apply bg-red-200 flex-grow;
|
||||
@apply bg-red-200;
|
||||
}
|
||||
.item {
|
||||
@apply block bg-gray-50 text-red-400 py-2 px-4 my-px cursor-pointer transition-colors;
|
||||
@apply hover:bg-red-50;
|
||||
min-width: 10em;
|
||||
|
||||
h3 {
|
||||
}
|
||||
@ -28,14 +27,3 @@
|
||||
@apply text-red-100;
|
||||
}
|
||||
}
|
||||
|
||||
.operations {
|
||||
@apply p-2 bg-gray-50;
|
||||
|
||||
button {
|
||||
@apply shadow hover:shadow-md py-1 px-2 rounded-lg transition-all;
|
||||
&.primaryBtn {
|
||||
@apply bg-red-400 text-white hover:bg-red-500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,9 +4,7 @@ declare namespace ProjectPanelScssNamespace {
|
||||
item: string;
|
||||
itemActive: string;
|
||||
list: string;
|
||||
operations: string;
|
||||
panel: string;
|
||||
primaryBtn: string;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -1,126 +1,37 @@
|
||||
import { gql, useQuery } from '@apollo/client';
|
||||
import {
|
||||
action,
|
||||
autorun,
|
||||
computed,
|
||||
makeObservable,
|
||||
observable,
|
||||
reaction,
|
||||
when
|
||||
} from 'mobx';
|
||||
import { useLocalStore, useObserver } from 'mobx-react';
|
||||
import { h } from 'preact';
|
||||
import { forwardRef } from 'preact/compat';
|
||||
import { useImperativeHandle, useMemo, useRef } from 'preact/hooks';
|
||||
import { appStore } from '../../app.store';
|
||||
import { observer } from 'mobx-react';
|
||||
import { FunctionComponent, h } from 'preact';
|
||||
import { Project } from '../../generated/graphql';
|
||||
import { createOverlay } from '../commons/overlay/overlay';
|
||||
import { ProjectDetails } from './project-details';
|
||||
import { ProjectEditor } from './project-editor';
|
||||
import styles from './project-panel.scss';
|
||||
import { GlobalState, globalState } from '../../global.state';
|
||||
import * as styles from './project-panel.scss';
|
||||
|
||||
const FIND_PROJECTS = gql`
|
||||
query FindProjects {
|
||||
projects: findProjects {
|
||||
id
|
||||
name
|
||||
comment
|
||||
sshUrl
|
||||
webUrl
|
||||
webHookSecret
|
||||
deletedAt
|
||||
}
|
||||
}
|
||||
`;
|
||||
interface ListRef {
|
||||
refetch: () => void;
|
||||
}
|
||||
|
||||
class Store {
|
||||
@observable currentProjectId?: string;
|
||||
@observable projects?: Project[];
|
||||
constructor() {
|
||||
makeObservable(this);
|
||||
reaction(
|
||||
() => this.details,
|
||||
() => {
|
||||
if (this.currentProject) {
|
||||
appStore.setMain(this.details);
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
@computed
|
||||
get currentProject() {
|
||||
return this.projects?.find(it => it.id === this.currentProjectId);
|
||||
}
|
||||
@computed
|
||||
get details() {
|
||||
return this.currentProject ? (
|
||||
<ProjectDetails project={this.currentProject} />
|
||||
) : null;
|
||||
}
|
||||
|
||||
@action
|
||||
setCurrentProjectId = (id: string) => {
|
||||
this.currentProjectId = id;
|
||||
};
|
||||
}
|
||||
export function ProjectPanel() {
|
||||
const listRef = useRef<ListRef>();
|
||||
const addProject = () => {
|
||||
createOverlay({
|
||||
content: <ProjectEditor />
|
||||
}).then(() => {
|
||||
listRef.current.refetch();
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<section class={styles.panel}>
|
||||
<h1>Fennec</h1>
|
||||
<section class={styles.operations}>
|
||||
<button
|
||||
class={styles.primaryBtn}
|
||||
title="add a project"
|
||||
onClick={addProject}
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</section>
|
||||
<List ref={listRef} />
|
||||
<List globalState={globalState} />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
const List = forwardRef<ListRef>((_, ref) => {
|
||||
const { data, refetch } = useQuery<{
|
||||
projects: Project[];
|
||||
}>(FIND_PROJECTS);
|
||||
const List: FunctionComponent<{ globalState: GlobalState }> = observer(
|
||||
({ globalState }) => {
|
||||
const setCurrProejct = (project: Project) => {
|
||||
globalState.setCurrentProject(project);
|
||||
};
|
||||
console.log('change');
|
||||
|
||||
const store = useLocalStore(() => new Store());
|
||||
// store.projects = data?.projects;
|
||||
useMemo(() => {
|
||||
store.projects = data?.projects;
|
||||
}, [data?.projects]);
|
||||
|
||||
useImperativeHandle(ref, () => ({
|
||||
refetch
|
||||
}));
|
||||
|
||||
return useObserver(() => {
|
||||
const list = store.projects?.map(item => (
|
||||
const list = globalState.projects?.map(item => (
|
||||
<li
|
||||
class={`${styles.item} ${
|
||||
item.id === store.currentProject?.id ? styles.itemActive : ''
|
||||
item === globalState.currentProject ? styles.itemActive : ''
|
||||
}`}
|
||||
key={item.id}
|
||||
onClick={() => store.setCurrentProjectId(item.id)}
|
||||
onClick={() => setCurrProejct(item)}
|
||||
>
|
||||
<h3>{item.name}</h3>
|
||||
<small>{item.comment}</small>
|
||||
</li>
|
||||
));
|
||||
return <ol class={styles.list}>{list}</ol>;
|
||||
});
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
import { gql } from '@apollo/client';
|
||||
export type Maybe<T> = T | null;
|
||||
export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
|
||||
export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
|
||||
export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };
|
||||
export type Exact<T extends { [key: string]: unknown }> = {
|
||||
[K in keyof T]: T[K];
|
||||
};
|
||||
export type MakeOptional<T, K extends keyof T> = Omit<T, K> &
|
||||
{ [SubKey in K]?: Maybe<T[SubKey]> };
|
||||
export type MakeMaybe<T, K extends keyof T> = Omit<T, K> &
|
||||
{ [SubKey in K]: Maybe<T[SubKey]> };
|
||||
/** All built-in and custom scalars, mapped to their actual values */
|
||||
export type Scalars = {
|
||||
ID: string;
|
||||
@ -30,7 +34,6 @@ export type Project = {
|
||||
deletedAt?: Maybe<Scalars['DateTime']>;
|
||||
};
|
||||
|
||||
|
||||
export type Query = {
|
||||
__typename?: 'Query';
|
||||
hello: Hello;
|
||||
@ -38,7 +41,6 @@ export type Query = {
|
||||
findProject: Project;
|
||||
};
|
||||
|
||||
|
||||
export type QueryFindProjectArgs = {
|
||||
id: Scalars['String'];
|
||||
};
|
||||
@ -46,22 +48,19 @@ export type QueryFindProjectArgs = {
|
||||
export type Mutation = {
|
||||
__typename?: 'Mutation';
|
||||
createProject: Project;
|
||||
modifyProject: Project;
|
||||
modifyProject: Scalars['Boolean'];
|
||||
deleteProject: Scalars['Float'];
|
||||
};
|
||||
|
||||
|
||||
export type MutationCreateProjectArgs = {
|
||||
project: CreateProjectInput;
|
||||
};
|
||||
|
||||
|
||||
export type MutationModifyProjectArgs = {
|
||||
project: UpdateProjectInput;
|
||||
id: Scalars['String'];
|
||||
};
|
||||
|
||||
|
||||
export type MutationDeleteProjectArgs = {
|
||||
id: Scalars['String'];
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user