feat: CompanyCategoryName Input

Author: JerryLiu

js/src/components/CreatCompanyCategoryCard/index.tsx

@@ -1,11 +1,12 @@
 import { useState, useEffect } from 'react'
 import { defaultRouterMetas } from '@/utils'
 import { useColor } from '@/hooks'
-import { Outlet } from 'react-router-dom'
+import { Outlet, useLocation } from 'react-router-dom'
 
 const CustomLayouts = () => {
  const { colorText } = useColor()
- const pathname = window.location.pathname
+ const location = useLocation()
+ const pathname = location.pathname
  const [
  title,
  setTitle,

js/src/components/CreatCompanyCategoryInput/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Card } from 'antd'
 import { Link } from 'react-router-dom'
-import defaultImage from '@/defaultImage.jpg'
+import defaultImage from '@/static/defaultImage.jpg'
 import { renderHTML } from '@/utils'
 
 const { Meta } = Card

js/src/components/CustomLayouts/index.tsx

@@ -80,6 +80,7 @@ const Export = () => {
  centered
  open={isExportModalOpen}
  footer={null}
+ onCancel={() => setIsExportModalOpen(false)}
  >
  <Input.TextArea value={jsonString} rows={6} />
  <div className="flex justify-end mt-4">

js/src/components/ProjectsCompanyCard/index.tsx

@@ -27,8 +27,27 @@ import { useQueryClient } from '@tanstack/react-query'
 import { IGroupData } from './ScopeI/CheckScopeITable/Table/types'
 import { isEqual } from 'lodash-es'
 import ImageUpload from '@/components/ImageUpload'
-import { renderHTML } from '@/utils'
 
+export const defaultScopes = {
+ scopeI: [
+ {
+ groupKey: '0',
+ groupName: '工廠 #1',
+ dataSource: [],
+ },
+ ],
+ scopeII: [
+ {
+ groupKey: '0',
+ groupName: '工廠 #1',
+ dataSource: [],
+ },
+ ],
+ info: {
+ title: '○○○○股份有限公司',
+ companyCategory: '未分類',
+ },
+}
 export const ProjectContext = createContext<{
  projectData: any
  scopes: {
@@ -41,22 +60,7 @@ export const ProjectContext = createContext<{
  }>
 }>({
  projectData: null,
- scopes: {
- scopeI: [
- {
- groupKey: '0',
- groupName: '工廠 #1',
- dataSource: [],
- },
- ],
- scopeII: [
- {
- groupKey: '0',
- groupName: '工廠 #1',
- dataSource: [],
- },
- ],
- },
+ scopes: defaultScopes,
  setScopes: () => {},
 })
 
@@ -94,22 +98,11 @@ const App: React.FC = () => {
  ] = useState<{
  scopeI: IGroupData[]
  scopeII: IGroupData[]
- }>({
- scopeI: [
- {
- groupKey: '0',
- groupName: '工廠 #1',
- dataSource: [],
- },
- ],
- scopeII: [
- {
- groupKey: '0',
- groupName: '工廠 #1',
- dataSource: [],
- },
- ],
- })
+ info: {
+ title: string
+ companyCategory: string
+ }
+ }>(defaultScopes)
  const [
  popoverOpen,
  setPopoverOpen,
@@ -138,7 +131,8 @@ const App: React.FC = () => {
 
  const handleUpdate = async () => {
  const content = form.getFieldValue(['content'])
- const copyScopes = JSON.parse(JSON.stringify(scopes))
+ const copyScopes = JSON.parse(JSON.stringify(scopes || defaultScopes))
+
  const updateScopeI = copyScopes.scopeI.map(
  (theGroup: IGroupData, groupIndex: number) => ({
  ...theGroup,

js/src/defaultImage.jpg

@@ -0,0 +1,40 @@
+import React from 'react'
+import { Card } from 'antd'
+
+const { Meta } = Card
+
+const CreatCompanyCategoryCard: React.FC<{
+ option: {
+ name: string
+ key: string
+ image: string
+ }
+ showModal: (_name: string) => () => void
+}> = ({ option, showModal }) => {
+ return (
+ <>
+ <Card
+ onClick={showModal(option.name || '沒有名稱')}
+ className="w-full"
+ cover={
+ <img
+ className="aspect-[16/9]"
+ alt={option.name || '沒有名稱'}
+ src={
+ option.image ||
+ 'https://via.placeholder.com/480x270.png?text=NO+IMAGE'
+ }
+ />
+ }
+ >
+ <Meta
+ title={
+ <p className="text-center my-auto">{option.name || '沒有名稱'}</p>
+ }
+ />
+ </Card>
+ </>
+ )
+}
+
+export default CreatCompanyCategoryCard

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

@@ -0,0 +1,45 @@
+import React, { useState } from 'react'
+import { QuestionOutlined } from '@ant-design/icons'
+import { Input, Button } from 'antd'
+
+const CreatCompanyCategoryInput: React.FC<{
+ showModal: (_name: string) => () => void
+ setCompanyCategoryName: React.Dispatch<React.SetStateAction<string>>
+}> = ({ showModal, setCompanyCategoryName }) => {
+ const [
+ inputValue,
+ setInputValue,
+ ] = useState<string>('')
+ const handleInpuChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+ setInputValue(e.target.value)
+ }
+ const handleSubmit = () => {
+ showModal(inputValue)()
+ setCompanyCategoryName(inputValue)
+ }
+
+ return (
+ <div className="border-2 border-gray-300 h-full w-full rounded-lg border-dashed flex flex-col justify-center items-center">
+ <div className="aspect-[16/9] flex flex-col justify-center items-center w-full">
+ <QuestionOutlined className="text-gray-300" style={{ fontSize: 48 }} />
+ <div className="text-gray-300" style={{ marginTop: 24 }}>
+ 找不到所屬的產業
+ </div>
+ </div>
+ <div className="w-full py-4">
+ <Input.Group compact className="text-center">
+ <Input
+ onChange={handleInpuChange}
+ style={{ width: 'calc(100% - 200px)' }}
+ placeholder="自行輸入"
+ />
+ <Button onClick={handleSubmit} type="primary">
+ 送出
+ </Button>
+ </Input.Group>
+ </div>
+ </div>
+ )
+}
+
+export default CreatCompanyCategoryInput