yaml-admin-front 0.0.3 → 0.0.4

package/package.json

@@ -1,10 +1,12 @@
 {
   "name": "yaml-admin-front",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "type": "module",
   "description": "React components for yaml-admin front (library)",
   "main": "src/index.js",
-  "scripts": {},
+  "scripts": {
+    "publish": "npm publish -w yaml-admin-front --access public"
+  },
   "dependencies": {
     "@iconify/react": "^6.0.0",
     "axios": "^1.11.0",

package/src/YMLAdmin.jsx

@@ -1,27 +1,61 @@
-import { Admin, Resource, ListGuesser } from "react-admin";
+import { Admin, Resource, ListGuesser, CreateBase, fetchUtils, CustomRoutes } from "react-admin";
 import jsonServerProvider from "ra-data-json-server";
+import { Route } from "react-router-dom";
 import YAML from 'yaml';
-import LoginPage from './login/LoginPage';
 import MyLayout from './layout/MyLayout'
+import DynamicList from './section/DynamicList';
+import DynamicCreate from './section/DynamicCreate';
+import DynamicEdit from './section/DynamicEdit';
+import DynamicShow from './section/DynamicShow';
 import { useState, useEffect } from 'react';
 import { Icon } from '@iconify/react';
 import { AdminProvider } from './AdminContext';
 import authProvider from './login/authProvider';
-import { setApiHost} from './common/axios';
+import { setApiHost } from './common/axios';
+import fileUploader from './common/fileUploader';
 
-const API_HOST = import.meta.env.VITE_HOST_API || 'http://localhost:6911'
-const dataProvider = jsonServerProvider(API_HOST);
+const httpClient = (url, options = {}) => {
+  if (!options.headers) {
+    options.headers = new Headers({ Accept: 'application/json' });
+  }
+  const token = localStorage.getItem('token');
+  options.headers.set('x-access-token', token);
+  return fetchUtils.fetchJson(url, options);
+}
 
-const YMLAdmin = ({ adminYaml }) => {
+const YMLAdmin = ({ adminYaml, i18nProvider, custom }) => {
   const [yml, setYml] = useState(null);
+  const [dataProvider, setDataProvider] = useState(null);
+
   useEffect(() => {
     const loadYamlFile = async () => {
       try {
         const json = YAML.parse(adminYaml);
         setYml(json);
-        setApiHost(json['api-host'].uri);
+        const api_host = json['api-host'].uri;
+        const privateEntityMap = {}
+        Object.entries(json.entity).map(([key, val])=>{
+            val.fields.map((field)=>{
+                if(field.private) {
+                    privateEntityMap[key] = {
+                      ...privateEntityMap[key],
+                        [field.name]: field.private
+                    }
+                }
+            })
+        });
+
+        if(json.upload?.local) {
+          setDataProvider(fileUploader(jsonServerProvider(api_host, httpClient), true, privateEntityMap));
+        } else if(json.upload?.s3) {
+          setDataProvider(fileUploader(jsonServerProvider(api_host, httpClient), false, privateEntityMap));
+        } else {
+          setDataProvider(jsonServerProvider(api_host, httpClient));
+        }
+        
+        setApiHost(api_host);
       } catch (error) {
-        console.error('YAML 파일을 읽는 중 오류가 발생했습니다:', error);
+        console.error('YAML file load error', error);
       }
     };
 
@@ -29,26 +63,49 @@ const YMLAdmin = ({ adminYaml }) => {
   }, []);
 
   return (
-    <AdminProvider initialYml={yml} width="1250px">
-      <Admin
-        layout={MyLayout}
-        authProvider={authProvider}
-        dataProvider={dataProvider}>
-        {yml?.entity && Object.keys(yml.entity).map(name => {
-          const entity = yml.entity[name];
-          const IconComponent = entity?.icon
-            ? () => <Icon icon={entity.icon} width="1.25rem" height="1.25rem" />
-            : undefined;
-          return (
-            <Resource key={name} name={name}
-              options={{ label: entity.label }}
-              icon={IconComponent}
-              list={ListGuesser} />
-          )
-        })}
-
-      </Admin>
-    </AdminProvider>
+    <>
+      {dataProvider && <AdminProvider initialYml={yml} width="1250px">
+        <Admin
+          dashboard={undefined}
+          layout={MyLayout}
+          authProvider={authProvider}
+          i18nProvider={i18nProvider}
+          dataProvider={dataProvider}>
+          {yml?.entity && Object.keys(yml.entity).map(name => {
+            const entity = yml.entity[name];
+            const IconComponent = entity?.icon
+              ? () => <Icon icon={entity.icon} width="1.25rem" height="1.25rem" />
+              : undefined;
+
+            if (entity.custom)
+              return <Resource key={name} name={name} options={{ label: entity.label }} icon={IconComponent}/>  
+            else 
+              return (
+                <Resource key={name} name={name}
+                  options={{ label: entity.label }}
+                  icon={IconComponent}
+                  list={(props => <DynamicList {...props} custom={custom} />)}
+                  create={(props => <DynamicCreate {...props} custom={custom} />)}
+                  edit={(props => <DynamicEdit {...props} custom={custom} />)}
+                  show={(props => <DynamicShow {...props} custom={custom} />)}
+                />
+              )
+
+          })}
+
+          {/* <CustomRoutes>
+            {yml?.entity && Object.keys(yml.entity).map(name => {
+              const entity = yml.entity[name];
+              if (entity.custom)
+                return (
+                  <Route path={`/${name}`} element={customEntity(name, 'entire')} />
+                )
+            })}
+          </CustomRoutes> */}
+        </Admin>
+      </AdminProvider>
+      }
+    </>
   )
 };
 

package/src/common/axios.jsx

@@ -4,6 +4,14 @@ import axios from 'axios';
 
 const axiosInstance = axios.create({});
 
+export const updateToken = async (query) => {
+  if (query && query.token) {
+    sessionStorage.setItem('token', query.token);
+    localStorage.setItem('token', query.token);
+    axios.defaults.headers.common['x-access-token'] = `${query.token}`;
+  }
+};
+
 export const setApiHost = (host) => {
   let base = host ?? import.meta.env.VITE_HOST_API ?? 'http://localhost:6911';
   if (base && !base.startsWith('http')) {
@@ -24,6 +32,7 @@ export default axiosInstance;
 
 // ----------------------------------------------------------------------
 
+
 export const fetcher = async (args) => {
   const [url, config] = Array.isArray(args) ? args : [args];
 
@@ -33,46 +42,193 @@ export const fetcher = async (args) => {
 };
 
 export const postFetcher = async (url, config, param) => {
+  if (!url.startsWith('http'))
+    url = `${import.meta.env.VITE_HOST_API}${url}`;
   const res = await axiosInstance.post(url, param, { ...config });
 
   return res.data;
 };
 
-export const putFetcher = async (url, config, param) => {
-  const res = await axiosInstance.put(url, param, { ...config });
-
-  return res.data;
-};
 
 export const uploadFile = (blob_path, file_name) => new Promise((resolve, reject) => {
-  if(blob_path){
-      const reader = new FileReader();
-      reader.readAsArrayBuffer(blob_path);
-      reader.onload = async () => {
-          const ext = file_name.substring(file_name.lastIndexOf('.')+1, file_name.length);
-          const res = await fetcher(`/api/media/url/put/${ext}`)
-          fetch(res.upload_url, { method: "PUT", 
-            headers: {
-              'Content-Type': res.contentType
-            },
-            body:reader.result })
-          .then(res2=>{
-              resolve(res.key)
-          });
-      };
-      reader.onerror = reject;
-  } else  {
-      resolve(null);
+  const reader = new FileReader();
+  reader.readAsArrayBuffer(blob_path);
+  reader.onload = async () => {
+    const ext = file_name.substring(file_name.lastIndexOf('.') + 1, file_name.length);
+    const res = await fetcher(`/api/media/url/put/${ext}`)
+    fetch(res.upload_url, {
+      method: "PUT",
+      headers: {
+        'Content-Type': res.contentType
+      },
+      body: reader.result
+    })
+      .then(res2 => {
+        resolve(res.key)
+      });
+  };
+  reader.onerror = reject;
+});
+
+export const uploadFileSecure = (blob_path, file_name) => new Promise((resolve, reject) => {
+  const reader = new FileReader();
+  reader.readAsArrayBuffer(blob_path);
+  reader.onload = async () => {
+    const ext = file_name.substring(file_name.lastIndexOf('.') + 1, file_name.length);
+    const res = await fetcher(`/api/media/url/secure/put/${ext}`)
+    fetch(res.upload_url, {
+      method: "PUT",
+      headers: {
+        'Content-Type': res.contentType
+      },
+      body: reader.result
+    }).then(res2 => {
+      resolve(res.key)
+    });
+  };
+  reader.onerror = reject;
+});
+
+export const uploadFileSecureProgress = async (file, onProgress) => {
+  const CHUNK_SIZE = 50 * 1024 * 1024; // 진행상황 업데이트 위해 분할크기 축소
+  const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
+  let uploadedSize = 0;
+
+  const ext = file.name.split('.').pop();
+
+  // uploadId
+  let initRes
+  try {
+    initRes = await fetcher(`/api/media/url/secure/init/${ext}`);
+  } catch (e) {
+    throw new Error("업로드 초기화 실패");
   }
+  const { uploadId, key } = initRes;
+
+  try {
+    const partRequests = Array.from({ length: totalChunks }, (_, i) =>
+      postFetcher(`/api/media/url/secure/part`, {}, { key, uploadId, partNumber: i + 1 })
+    );
+
+    // part uploadUrl
+    const partResponses = await Promise.all(partRequests);
+
+    /*
+     * uploadedParts = { PartNumber: chunk index, ETag: ETag }
+     */
+    const uploadedParts = [];
+
+    // 분할 업로드 진행상황 표시를 위해 순차 업로드
+    for (let partIndex = 0; partIndex < partResponses.length; partIndex++) {
+      const start = partIndex * CHUNK_SIZE;
+      const end = Math.min(start + CHUNK_SIZE, file.size);
+      const chunk = file.slice(start, end);
+
+      // eslint-disable-next-line no-await-in-loop
+      const uploadResponse = await fetchWithRetry(partResponses[partIndex].uploadUrl, { method: "PUT", body: chunk });
+      uploadedSize += chunk.size;
+      // 퍼센트 업데이트
+      onProgress(Math.round((uploadedSize / file.size) * 100));
+
+      const eTag = uploadResponse.headers.get("ETag");
+      uploadedParts.push({ PartNumber: partIndex + 1, ETag: eTag.replace(/"/g, '') });
+    }
+
+    // 분할 업로드 완료, 파일 병합 요청
+    await postFetcher(`/api/media/url/secure/complete`, {}, { key, uploadId, parts: uploadedParts })
+
+    return key;
+  } catch (e) {
+    const abort = await postFetcher(`/api/media/url/secure/abort`, {}, { key, uploadId });
+    if (abort && abort.r) {
+      throw new Error("파일 업로드 실패");
+    }
+    else {
+      throw new Error(`업로드 실패 key: ${key}`);
+    }
+  }
+};
+
+export const uploadFileWithBase64String = (base64string, file_name) => new Promise((resolve, reject) => {
+  const ext = file_name.substring(file_name.lastIndexOf('.') + 1, file_name.length);
+  fetcher(`/api/media/url/put/${ext}`).then(res => {
+    let byteString = base64string;
+    if (base64string.startsWith('data:'))
+      byteString = atob(base64string.split(',')[1]);
+    const ab = new ArrayBuffer(byteString.length);
+    const ia = new Uint8Array(ab);
+    for (let i = 0; i < byteString.length; i++) {
+      ia[i] = byteString.charCodeAt(i);
+    }
+    fetch(res.upload_url, {
+      method: "PUT",
+      headers: {
+        'Content-Type': res.contentType
+      },
+      body: ab
+    })
+      .then(res2 => {
+        resolve(res.key)
+      });
+  })
 });
 
-export const convertFileToBase64 = file => new Promise((resolve, reject) => {
-  if(file){
-      const reader = new FileReader();
-      reader.readAsDataURL(file);
-      reader.onload = () => resolve(reader.result);
-      reader.onerror = reject;
-  } else  {
-      reject(new Error('no file'))
+export const useGetFetcher = (path) => {
+  const url = path.startsWith('http') ? path : `${import.meta.env.VITE_HOST_API}${path}`
+  const { data, isLoading, error, isValidating } = useSWR(url, fetcher);
+
+  const memoizedValue = useMemo(
+    () => ({
+      data,
+      isLoading,
+      error,
+      isValidating
+    }),
+    [data, error, isLoading, isValidating]
+  );
+
+  return memoizedValue;
+}
+
+async function fetchWithRetry(url, options = {}, retries = 0) {
+  try {
+    return await fetch(url, options);
+  } catch (error) {
+    if (retries < 3) {
+      console.log(`요청 실패. 재시도${retries + 1}회 : ${url}`);
+      await new Promise(resolve => setTimeout(resolve, 1000));
+      return fetchWithRetry(url, options, retries + 1);
+    } else {
+      throw new Error("파일 업로드 실패");
+    }
   }
+}
+export const uploadFileLocal = (blob_path, file_name) => new Promise((resolve, reject) => {
+  const reader = new FileReader();
+  reader.readAsArrayBuffer(blob_path);
+  reader.onload = async () => {
+    const ext = file_name.substring(file_name.lastIndexOf('.') + 1, file_name.length);
+    const url = `/api/local/media/upload?ext=${ext}&name=${encodeURIComponent(file_name)}`
+    const res = await axiosInstance.put(url, reader.result, {
+      headers: { 'Content-Type': 'application/octet-stream' },
+      transformRequest: [(data) => data]
+    });
+    resolve(res.data.key)
+  };
+  reader.onerror = reject;
 });
+
+export const uploadFileLocalSecure = (blob_path, file_name) => new Promise((resolve, reject) => {
+  const reader = new FileReader();
+  reader.readAsArrayBuffer(blob_path);
+  reader.onload = async () => {
+    const ext = file_name.substring(file_name.lastIndexOf('.') + 1, file_name.length);
+    const url = `/api/local/media/upload/secure?ext=${ext}&name=${encodeURIComponent(file_name)}`
+    const res = await axiosInstance.put(url, reader.result, {
+      headers: { 'Content-Type': 'application/octet-stream' },
+      transformRequest: [(data) => data]
+    });
+    resolve(res.data.key)
+  };
+  reader.onerror = reject;
+});

package/src/common/field.jsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import {
+    TextField, NumberField, ReferenceField, DateField, BooleanField,
+    ReferenceInput, AutocompleteInput, TextInput,
+    SelectInput, FunctionField, ImageInput, ImageField,
+} from 'react-admin';
+import { Avatar } from '@mui/material';
+import ClickableImageField from '../component/ClickableImageField';
+import SafeImageField from '../component/SafeImageField';
+
+export const getFieldShow = (field, isList = false) => {
+    if (!field || field.type == 'password') return null;
+    if (field.type == 'string' || field.key){
+        return <TextField key={field.name} label={field.label} source={field.name} />
+    } else if (field.type == 'integer')
+        return <NumberField key={field.name} label={field.label} source={field.name} />
+    else if (field.type == 'select')
+        return <FunctionField key={field.name} label={field.label} source={field.name}
+            render={record => field.select_values.find(m => field.name == record[field.name])?.label} />
+    else if (field.type == 'reference')
+        return <ReferenceField key={field.name} link="show" label={field.label} source={field.name} reference={field.reference_entity}>
+            <TextField source={field.reference_name} />
+        </ReferenceField>
+    else if (field.type == 'date')
+        return <DateField key={field.name} label={field.label} source={field.name} />
+    else if (field.type == 'boolean')
+        return <BooleanField key={field.name} label={field.label} source={field.name} />
+    else if (field.type == 'objectId')
+        return <TextField key={field.name} label={field.label} source={field.name} />
+    else if (field.type == 'image') {
+        if(field.avatar)
+            return <FunctionField label={field.label} render={record =>
+                <Avatar alt="Natacha" src={record[field.name].image_preview} 
+                        sx={isList ? {width: 100, height: 100} : {width: 256, height: 256}}/>
+            } />
+        else 
+            return <ClickableImageField key={field.name} label={field.label} source={field.name} 
+                width={isList ? "100px" : "200px"} height={isList ? "100px" : "200px"}/>
+    } 
+    else
+        return <TextField key={field.name} label={field.label} source={field.name} />
+}
+
+const required = (message = 'ra.validation.required') =>
+    value => value ? undefined : message;
+const validateRequire = [required()];
+
+export const getFieldEdit = (field, search = false) => {
+    if (!field)
+        return null;
+    const { type, autogenerate } = field
+    if (autogenerate && !search) return null
+    if (type == 'reference')
+        return <ReferenceInput key={field.name} label={field?.label} source={field.name} reference={field?.reference_entity} alwaysOn>
+            <AutocompleteInput sx={{ width: '300px' }} label={field?.label} optionText={field?.reference_name}
+                filterToQuery={(searchText) => ({ [field?.reference_name || 'q']: searchText })} 
+                validate={field.required && !search && validateRequire}
+                />
+        </ReferenceInput>
+    else if (field?.type == 'select')
+        return <SelectInput key={field.name} label={field?.label} source={field.name} alwaysOn
+            choices={field?.select_values}
+            optionText="name" optionValue="label"
+            validate={field.required && !search && validateRequire}
+        />
+    else if (field?.type == 'image') {
+        return <ImageInput key={field.name} source={field.name} label={field.label} accept="image/*" placeholder={<p>{field.label}</p>} 
+            validate={field.required && !search && validateRequire}>
+            <SafeImageField source={'src'} title={'title'} />
+        </ImageInput>
+    }
+    else {
+        return <TextInput key={field.name} label={field?.label} source={field.name} alwaysOn 
+            validate={field.required && !search && validateRequire}
+        />
+    }
+}

package/src/common/fileUploader.jsx

@@ -0,0 +1,81 @@
+import { uploadFile, uploadFileLocal, uploadFileLocalSecure, uploadFileSecure } from '../common/axios'
+
+/**
+ * react-admin v5 uses a method-based dataProvider (getList/getOne/create/update/...).
+ * This wrapper intercepts create/update to upload any fields containing `rawFile`,
+ * replaces them with `{ src, title }`, and then delegates to the original provider.
+ */
+const fileUploader = (provider, isLocal = false, privateEntityMap = {}) => {
+    const isPlainObject = (value) => value && typeof value === 'object' && !Array.isArray(value);
+    const replaceFileField = async (entity_name, filed_name, value) => {
+        if (value && value.rawFile && value.title) {
+            let key
+            let isSecure = false
+            if(privateEntityMap[entity_name] && privateEntityMap[entity_name][filed_name]) {
+                isSecure = true
+            }
+
+            if(isLocal) {
+                if(isSecure) {
+                    key = await uploadFileLocalSecure(value.rawFile, value.title);
+                } else {
+                    key = await uploadFileLocal(value.rawFile, value.title);
+                }
+            } else {
+                if(isSecure) {
+                    key = await uploadFileSecure(value.rawFile, value.title);
+                } else {
+                    key = await uploadFile(value.rawFile, value.title);
+                }
+            }
+            
+            if (key) {
+                const next = { ...value };
+                next.src = key;
+                delete next.rawFile;
+                return next;
+            }
+        }
+        return value;
+    };
+
+    const deepProcessData = async (entity_name, data) => {
+        if (Array.isArray(data)) {
+            const processed = await Promise.all(data.map(item => deepProcessData(entity_name, item)));
+            return processed;
+        }
+        if (!isPlainObject(data)) return data;
+
+        const entries = await Promise.all(Object.entries(data).map(async ([key, val]) => {
+            if (val && val.rawFile) {
+                const replaced = await replaceFileField(entity_name, key, val);
+                return [key, replaced];
+            }
+            if (Array.isArray(val) || isPlainObject(val)) {
+                const nested = await deepProcessData(entity_name, val);
+                return [key, nested];
+            }
+            return [key, val];
+        }));
+
+        return Object.fromEntries(entries);
+    };
+
+    return {
+        ...provider,
+        async create(resource, params) {
+            const nextData = await deepProcessData(resource, params?.data ?? {});
+            return provider.create(resource, { ...params, data: nextData });
+        },
+        async update(resource, params) {
+            try {
+                const nextData = await deepProcessData(resource, params?.data ?? {});            
+                return provider.update(resource, { ...params, data: nextData });
+            } catch (e) {
+                console.error('update error', e)
+            }
+        },
+    };
+};
+
+export default fileUploader;