fakz9/Assemblr-Admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
fakz9
2023-11-25 08:12:57 +03:00
commit 1004bbae76
23 changed files with 9416 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env Normal file
View File

@@ -0,0 +1,2 @@
VITE_REST_URL= http://192.168.1.101:5000/admin
VITE_AUTH_URL=http://192.168.1.101:5000/auth

20
.eslintrc.js Normal file
View File

@@ -0,0 +1,20 @@
module.exports = {
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:react/jsx-runtime",
"plugin:react-hooks/recommended",
"prettier"
],
"parser": "@typescript-eslint/parser",
"plugins": ["@typescript-eslint"],
"env": {
"browser": true,
"es2021": true
},
"settings": {
"react": {
"version": "detect"
}
}
}

24
.gitignore vendored Normal file
View File

@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

41
README.md Normal file
View File

@@ -0,0 +1,41 @@
# assemblr-admin
## Installation
Install the application dependencies by running:
```sh
yarn
```
## Development
Start the application in development mode by running:
```sh
yarn dev
```
## Production
Build the application in production mode by running:
```sh
yarn build
```
## DataProvider
The included data provider use [ra-data-simple-rest](https://github.com/marmelab/react-admin/tree/master/packages/ra-data-simple-rest). It fits REST APIs using simple GET parameters for filters and sorting. This is the dialect used for instance in [FakeRest](https://github.com/marmelab/FakeRest).
You'll find an `.env` file at the project root that includes a `VITE_JSON_SERVER_URL` variable. Set it to the URL of your backend.
## Authentication
The included auth provider should only be used for development and test purposes.
You'll find a `users.json` file in the `src` directory that includes the users you can use.
You can sign in to the application with the following usernames and password:
- janedoe / password
- johndoe / password

125
index.html Normal file
View File

@@ -0,0 +1,125 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no"
/>
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="./manifest.json" />
<link rel="shortcut icon" href="./favicon.ico" />
<title>assemblr-admin</title>
<style>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.loader-container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #fafafa;
}
/* CSS Spinner from https://projects.lukehaas.me/css-loaders/ */
.loader,
.loader:before,
.loader:after {
border-radius: 50%;
}
.loader {
color: #283593;
font-size: 11px;
text-indent: -99999em;
margin: 55px auto;
position: relative;
width: 10em;
height: 10em;
box-shadow: inset 0 0 0 1em;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
.loader:before,
.loader:after {
position: absolute;
content: '';
}
.loader:before {
width: 5.2em;
height: 10.2em;
background: #fafafa;
border-radius: 10.2em 0 0 10.2em;
top: -0.1em;
left: -0.1em;
-webkit-transform-origin: 5.2em 5.1em;
transform-origin: 5.2em 5.1em;
-webkit-animation: load2 2s infinite ease 1.5s;
animation: load2 2s infinite ease 1.5s;
}
.loader:after {
width: 5.2em;
height: 10.2em;
background: #fafafa;
border-radius: 0 10.2em 10.2em 0;
top: -0.1em;
left: 5.1em;
-webkit-transform-origin: 0px 5.1em;
transform-origin: 0px 5.1em;
-webkit-animation: load2 2s infinite ease;
animation: load2 2s infinite ease;
}
@-webkit-keyframes load2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
rel="stylesheet"
/>
</head>
<body>
<noscript> You need to enable JavaScript to run this app. </noscript>
<div id="root">
<div class="loader-container">
<div class="loader">Loading...</div>
</div>
</div>
</body>
<script type="module" src="/src/index.tsx"></script>
</html>

5732
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

35
package.json Normal file
View File

@@ -0,0 +1,35 @@
{
"name": "assemblr-admin",
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview",
"type-check": "tsc --noEmit",
"lint": "eslint --fix --ext .js,.jsx,.ts,.tsx ./src",
"format": "prettier --write ./src"
},
"dependencies": {
"@material-ui/core": "^4.12.4",
"ra-data-simple-rest": "^4.16.0",
"ra-language-russian": "^4.14.1",
"react": "^18.2.0",
"react-admin": "^4.16.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/node": "^18.16.1",
"@types/react": "^18.0.22",
"@types/react-dom": "^18.0.7",
"@typescript-eslint/eslint-plugin": "^5.60.1",
"@typescript-eslint/parser": "^5.60.1",
"@vitejs/plugin-react": "^4.0.1",
"eslint": "^8.43.0",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"prettier": "^2.8.8",
"typescript": "^5.1.6",
"vite": "^4.3.9"
}
}

1
prettier.config.js Normal file
View File

@@ -0,0 +1 @@
module.exports = {}

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

15
public/manifest.json Normal file
View File

@@ -0,0 +1,15 @@
{
"short_name": "assemblr-admin",
"name": "{{name}}",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
}
],
"start_url": "./index.html",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

30
src/App.tsx Normal file
View File

@@ -0,0 +1,30 @@
import {
Admin,
Resource,
} from "react-admin";
import {dataProvider} from "./dataProvider";
import {authProvider} from "./authProvider";
import UserList from "./Lists/UserList";
import userEdit from "./Edits/UserEdit";
import polyglotI18nProvider from 'ra-i18n-polyglot';
// @ts-ignore
import russianMessages from 'ra-language-russian';
const i18nProvider = polyglotI18nProvider(() => russianMessages, 'ru');
export const App = () => {
return (
<Admin i18nProvider={i18nProvider} darkTheme={{palette: {mode: 'dark'}}} defaultTheme={"dark"}
dataProvider={dataProvider}
authProvider={authProvider}>
<Resource
hasEdit
options={{label: "Пользователи"}}
name="user"
list={UserList}
edit={userEdit}
/>
</Admin>
)
}

20
src/Edits/UserEdit.tsx Normal file
View File

@@ -0,0 +1,20 @@
import {BooleanInput, Edit, PasswordInput, ReferenceInput, SelectInput, SimpleForm, TextInput} from "react-admin";
const UserEdit = () => {
return (<Edit>
<SimpleForm>
<TextInput disabled label="ID" source="id"/>
<TextInput label="Логин" source="login"/>
<PasswordInput label="Новый пароль" source="password"/>
<ReferenceInput source="city_id" reference="city" label="Город">
<SelectInput isRequired optionText="name" disableValue={""}/>
</ReferenceInput>
<BooleanInput source={"is_admin"} label={"Права администратора"}/>
</SimpleForm>
</Edit>)
}
export default UserEdit;

11
src/Inputs/CityInput.tsx Normal file
View File

@@ -0,0 +1,11 @@
import {SelectInput, useGetList} from "react-admin";
const CityInput = () => {
const {data, isLoading} = useGetList('cities', {});
return (<SelectInput
source="city_id"
choices={data}
isLoading={isLoading}
/>)
}
export default CityInput;

16
src/Lists/UserList.tsx Normal file
View File

@@ -0,0 +1,16 @@
import {BooleanField, Datagrid, EditButton, List, ReferenceField, TextField} from "react-admin";
export const UserList = () => {
return (<List>
<Datagrid>
<TextField source="id" label={"ID"}/>
<TextField source="login" label={"Логин"}/>
<ReferenceField source={"city_id"} reference={"city"} label={"Город"}>
<TextField source={"name"}/>
</ReferenceField>
<BooleanField source={"is_admin"} label={"Права администратора"}/>
<EditButton/>
</Datagrid>
</List>)
}
export default UserList;

0
src/api.ts Normal file
View File

56
src/authProvider.ts Normal file
View File

@@ -0,0 +1,56 @@
import {AuthProvider} from "react-admin";
/**
* This authProvider is only for test purposes. Don't use it in production.
*/
export const authProvider: AuthProvider = {
login: ({username, password}) => {
if (!import.meta.env.VITE_AUTH_URL) return Promise.reject();
const request = new Request(import.meta.env.VITE_AUTH_URL + '/login', {
method: "POST",
body: JSON.stringify({login: username, password: password}),
headers: new Headers({'Content-Type': 'application/json'})
});
return fetch(request).then(response => {
if (response.status < 200 || response.status >= 300) {
throw new Error(response.statusText);
}
return response.json();
}).then(({accessToken}) => {
localStorage.setItem('token', accessToken);
});
},
logout: () => {
localStorage.removeItem("token");
return Promise.resolve();
},
checkError: () => Promise.resolve(),
checkAuth: () => {
if (!import.meta.env.VITE_REST_URL) return Promise.reject();
const token = localStorage.getItem('token');
if (!token) return Promise.reject("Token is not provided");
const request = new Request(import.meta.env.VITE_REST_URL + '/ping', {
method: "GET",
headers: {
Authorization: `Bearer ${token}`
}
});
return fetch(request).then(response => {
if (response.status < 200 || response.status >= 300) {
throw new Error(response.statusText);
}
});
},
getPermissions: () => {
return Promise.resolve(undefined);
},
getIdentity: () => {
const persistedUser = localStorage.getItem("user");
const user = persistedUser ? JSON.parse(persistedUser) : null;
return Promise.resolve(user);
},
};
export default authProvider;

22
src/dataProvider.ts Normal file
View File

@@ -0,0 +1,22 @@
import simpleRestProvider from "ra-data-simple-rest";
import {fetchUtils} from 'react-admin';
const httpClient = (url: string, options: fetchUtils.Options = {}) => {
// Создаем экземпляр Headers, если он еще не существует
if (!options.headers) {
options.headers = new Headers({ Accept: 'application/json' });
} else if (!(options.headers instanceof Headers)) {
// Если options.headers не экземпляр Headers, преобразуем его в Headers
options.headers = new Headers(options.headers);
}
const token = localStorage.getItem('token');
if (token) {
options.headers.set('Authorization', `Bearer ${token}`);
}
return fetchUtils.fetchJson(url, options);
};
export const dataProvider = simpleRestProvider(
import.meta.env.VITE_REST_URL,
httpClient
);

9
src/index.tsx Normal file
View File

@@ -0,0 +1,9 @@
import React from "react";
import ReactDOM from "react-dom/client";
import { App } from "./App";
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<App />
</React.StrictMode>
);

18
src/users.json Normal file
View File

File diff suppressed because one or more lines are too long

1
src/vite-env.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
/// <reference types="vite/client" />

26
tsconfig.json Normal file
View File

@@ -0,0 +1,26 @@
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
]
}

14
vite.config.ts Normal file
View File

@@ -0,0 +1,14 @@
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
define: {
'process.env': process.env,
},
server: {
host: true,
},
base: './',
});

3198
yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff