feat: JSON Upload

Author: JerryLiu

js/src/api/axios.tsx

@@ -14,10 +14,11 @@ const instance: AxiosInstance = axios.create({
 instance.interceptors.response.use(
  function (response) {
  // Any status code that lie within the range of 2xx cause this function to trigger
-
+ // console.log('response', response)
  const type = response?.data?.type
- const method = response.config.method
- const typeText = getTypeText(type)
+ const method = response?.config?.method || ''
+ const statusText = response?.statusText
+ const typeText = getTypeText(type, method, statusText)
  if (method !== 'get') {
  notification.success({
  message: `${typeText}成功`,

js/src/components/JsonUpload/index.tsx

@@ -0,0 +1,181 @@
+import { ChangeEvent, useState } from 'react'
+import {
+ UploadOutlined,
+ ImportOutlined,
+ LoadingOutlined,
+} from '@ant-design/icons'
+import {
+ Upload,
+ UploadProps,
+ Button,
+ Modal,
+ Input,
+ Row,
+ Col,
+ Divider,
+} from 'antd'
+import { createResource } from '@/api'
+import { addKey } from '@/utils'
+import { useQueryClient } from '@tanstack/react-query'
+import { Link } from 'react-router-dom'
+
+const baseUrl = process.env.BASE_URL || ''
+
+const JsonUpload = () => {
+ const [
+ isLoading,
+ setIsLoading,
+ ] = useState(false)
+ const [
+ showLink,
+ setShowLink,
+ ] = useState(false)
+
+ const [
+ theProjectId,
+ setTheProjectId,
+ ] = useState<number>(0)
+
+ const [
+ jsonContent,
+ setJsonContent,
+ ] = useState<string>('')
+
+ const [
+ isJsonUploadModalOpen,
+ setIsJsonUploadModalOpen,
+ ] = useState(false)
+
+ const queryClient = useQueryClient()
+
+ const showJsonUploadModal = () => {
+ setIsJsonUploadModalOpen(true)
+ }
+
+ const handleJsonUploadOk = () => {
+ setIsJsonUploadModalOpen(false)
+ }
+
+ const handleJsonUploadCancel = () => {
+ setIsJsonUploadModalOpen(false)
+ setShowLink(false)
+ }
+
+ const props: UploadProps = {
+ accept: '.json',
+ name: 'file',
+ multiple: false,
+
+ onChange({ file }) {
+ setIsLoading(true)
+
+ const reader = new FileReader()
+ reader.onload = (event) => {
+ const content = event?.target?.result || '{}'
+ setJsonContent(content as string)
+ // setJsonContent(JSON.parse(content as string))
+ setIsLoading(false)
+ }
+ if (file?.originFileObj) {
+ reader.readAsText(file.originFileObj)
+ }
+ },
+ onDrop(e) {
+ console.log('Dropped files', e.dataTransfer.files)
+ },
+ maxCount: 1,
+ showUploadList: false,
+ className: 'block w-full',
+ }
+
+ const handleImport = async () => {
+ //add key & groupKey back
+ const scopesWithoutKey = JSON.parse(jsonContent || '{}')
+ const scopes = addKey(scopesWithoutKey)
+
+ const createResult = await createResource({
+ resource: 'carbon-project',
+ args: {
+ title: scopes?.info?.title || '○○○○股份有限公司',
+ content: scopes?.info?.content || '',
+ status: 'publish',
+ featured_media: scopes?.info?.imgData?.attachmentId || 0,
+ meta: {
+ project_data: JSON.stringify(scopes || {}),
+ },
+ },
+ })
+ if (createResult?.status === 201 || createResult?.status === 200) {
+ queryClient.invalidateQueries([
+ 'get_carbon-projects',
+ ])
+
+ setShowLink(true)
+ setTheProjectId(createResult?.data?.id || 0)
+ } else {
+ console.log('createResult', createResult)
+ }
+ }
+
+ const handleTextAreaChange = (e: ChangeEvent<any>) => {
+ const text = e?.target?.value || ''
+ setJsonContent(text)
+ }
+
+ return (
+ <>
+ <Button icon={<UploadOutlined />} onClick={showJsonUploadModal}>
+ 使用 JSON 檔案上傳
+ </Button>
+ <Modal
+ title="匯入專案 JSON 數據"
+ centered
+ open={isJsonUploadModalOpen}
+ onOk={handleJsonUploadOk}
+ onCancel={handleJsonUploadCancel}
+ footer={null}
+ >
+ <Input.TextArea
+ disabled={isLoading}
+ value={jsonContent}
+ rows={6}
+ onChange={handleTextAreaChange}
+ />
+ <Row gutter={24} className="mt-4 json-upload">
+ <Col span={12}>
+ <Upload {...props}>
+ <Button
+ className="w-full"
+ icon={isLoading ? <LoadingOutlined /> : <UploadOutlined />}
+ >
+ 使用 JSON 檔案上傳
+ </Button>
+ </Upload>
+ </Col>
+ <Col span={12}>
+ <Button
+ type="primary"
+ className="w-full"
+ onClick={handleImport}
+ icon={<ImportOutlined />}
+ >
+ 確認匯入 JSON
+ </Button>
+ </Col>
+ {showLink && (
+ <Col span={24} className="mt-4">
+ <Divider plain>已成功創建專案</Divider>
+ <Link to={`${baseUrl}check`} state={{ id: theProjectId }}>
+ <Button type="primary" className="w-full">
+ 立即查看專案
+ </Button>
+ </Link>
+ </Col>
+ )}
+ </Row>
+ </Modal>
+ </>
+ )
+}
+
+export default JsonUpload

js/src/components/JsonUpload/types/index.tsx

@@ -0,0 +1,38 @@
+import { z } from 'zod'
+
+const ZJsonUpload = z.object({
+ scopeI: z
+ .object({
+ groupKey: z.string(),
+ groupName: z.string(),
+ dataSource: z
+ .object({
+ key: z.string(),
+ equipment: z.string(),
+ gwp: z.string(),
+ yearlyAmount: z.number().min(0),
+ ar5: z.number().min(0),
+ co2e: z.number().min(0),
+ carbonTonsPerYear: z.number().min(0),
+ period: z.union([
+ z.literal('yearly'),
+ z.literal('monthly'),
+ z.literal('hourly'),
+ ]),
+ monthlyAmount: z.number().min(0).array().length(12),
+ hourlyAmount: z.number().min(0),
+ unit: z.union([
+ z.literal('kg'),
+ z.literal('tons'),
+ ]),
+ })
+ .array(),
+ })
+ .array(),
+ scopeII: z.object({}).array(),
+ info: z.object({
+ title: z.string(),
+ content: z.string(),
+ companyCategory: z.string(),
+ }),
+})

js/src/components/ProjectsImportButton/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { UploadOutlined } from '@ant-design/icons'
 import { Button, message, Upload, UploadProps } from 'antd'
+import JsonUpload from '../JsonUpload'
 
 const props: UploadProps = {
  name: 'file',
@@ -21,9 +22,9 @@ const props: UploadProps = {
 }
 
 const ProjectsImportButton: React.FC = () => (
- <Upload {...props}>
- <Button icon={<UploadOutlined />}>使用 JSON 檔案上傳</Button>
- </Upload>
+ <>
+ <JsonUpload />
+ </>
 )
 
 export default ProjectsImportButton

js/src/global.scss

@@ -18,6 +18,11 @@
  overflow-y: auto;
  overflow-x: hidden;
 }
+.json-upload {
+ .ant-upload {
+ width: 100%;
+ }
+}
 
 @media print {
  html,

js/src/hooks/useMany.tsx

@@ -30,13 +30,19 @@ const useMany = (options: {
  }),
  options.queryOptions || {},
  )
- const { isSuccess, data } = getResult
+ const { isSuccess, data, isFetching } = getResult
 
  useEffect(() => {
+ console.log('changeddddd')
  if (data) {
+ console.log('set data')
+
  setFetchedData(data.data || null)
  }
- }, [isSuccess])
+ }, [
+ isSuccess,
+ isFetching,
+ ])
 
  return fetchedData
 }

js/src/pages/Check/Export/index.tsx

@@ -10,6 +10,7 @@ import ClipboardJS from 'clipboard'
 import { DownloadOutlined, CopyOutlined } from '@ant-design/icons'
 import { flatten } from 'lodash-es'
 import { useReactToPrint } from 'react-to-print'
+import { getCopyableJson, removeKey } from '@/utils'
 
 new ClipboardJS('.button')
 
@@ -79,10 +80,11 @@ const Export = () => {
  setIsExportModalOpen(true)
  }
 
- const jsonString = JSON.stringify(JSON.stringify(scopes || '{}')).replace(
- /\\/g,
- ' ',
- )
+ //TODO scopeII remove key
+ //remove key
+ const scopesForDownload = removeKey(scopes)
+
+ const jsonString = getCopyableJson(scopesForDownload || '{}')
 
  const download = (text: string) => () => {
  const blob = new Blob([text], { type: 'text/plain' })
@@ -130,7 +132,7 @@ const Export = () => {
  })}
  </div>
  <Row className="my-8" gutter={24}>
- <Col span={24} lg={{ span: 12 }}>
+ <Col className="my-2" span={24} lg={{ span: 12 }}>
  <Button
  type="primary"
  size="large"
@@ -140,7 +142,7 @@ const Export = () => {
  匯出為 PDF
  </Button>
  </Col>
- <Col span={24} lg={{ span: 12 }}>
+ <Col className="my-2" span={24} lg={{ span: 12 }}>
  <Button
  type="default"
  size="large"

js/src/pages/Check/components/EditProjectButtons/index.tsx

@@ -47,7 +47,7 @@ const EditProjectButtons: React.FC<{
  })
  if (deleteResult?.status === 200) {
  setIsDeleteProjectModalOpen(false)
- navigate('')
+ navigate(process.env.BASE_URL || '/home/carbon-check-app/')
  } else {
  console.log('deleteResult', deleteResult)
  }