feat: add selectbox for select submission point for role Admin (Q.ORDER)

src/components/popup/SurveySaleSubmitPopup.tsx

@@ -6,10 +6,11 @@ import { useState } from 'react'
 import { useSessionStore } from '@/store/session'
 
 interface SubmitFormData {
+  saleBase: string | null
   store: string
   sender: string
   receiver: string
-  reference: string
+  reference: string | null
   title: string
   contents: string
 }
@@ -20,13 +21,15 @@ interface FormField {
   required: boolean
 }
 
-const FORM_FIELDS: FormField[] = [
-  { id: 'store', name: '提出販売店', required: true },
-  { id: 'sender', name: '発送者', required: true },
-  { id: 'receiver', name: '受信者', required: true },
-  { id: 'reference', name: '参考', required: false },
-  { id: 'title', name: 'タイトル', required: true },
-  { id: 'contents', name: '内容', required: true },
+const dummy = [
+  {
+    id: 1,
+    name: '東京支店',
+  },
+  {
+    id: 2,
+    name: '大阪支店',
+  },
 ]
 
 export default function SurveySaleSubmitPopup() {
@@ -35,11 +38,22 @@ export default function SurveySaleSubmitPopup() {
   const params = useParams()
   const routeId = params.id
 
+  const FORM_FIELDS: FormField[] = [
+    { id: 'saleBase', name: '提出地点選択', required: session?.role === 'Admin' },
+    { id: 'store', name: '提出販売店', required: true },
+    { id: 'sender', name: '発送者', required: true },
+    { id: 'receiver', name: '受信者', required: true },
+    { id: 'reference', name: '参考', required: false },
+    { id: 'title', name: 'タイトル', required: true },
+    { id: 'contents', name: '内容', required: true },
+  ]
+
   const [submitData, setSubmitData] = useState<SubmitFormData>({
+    saleBase: null,
     store: '',
     sender: session?.email ?? '',
     receiver: '',
-    reference: '',
+    reference: null,
     title: '[HANASYS現地調査] 調査物件が提出.',
     contents: '',
   })
@@ -54,12 +68,12 @@ export default function SurveySaleSubmitPopup() {
     const requiredFields = FORM_FIELDS.filter((field) => field.required)
 
     for (const field of requiredFields) {
-      if (!data[field.id].trim()) {
+      if (!data[field.id]?.trim()) {
+        alert(`${field.name}は必須入力項目です。`)
         const element = document.getElementById(field.id)
         if (element) {
           element.focus()
         }
-        alert(`${field.name}は必須入力項目です。`)
         return false
       }
     }
@@ -83,9 +97,12 @@ export default function SurveySaleSubmitPopup() {
   }
 
   const renderFormField = (field: FormField) => {
-    // const isReadOnly = (field.id === 'store' && session?.role !== 'Partner') || (field.id === 'receiver' && session?.role !== 'Partner')
     const isReadOnly = false
 
+    if (field.id === 'saleBase' && session?.role !== 'Admin') {
+      return null
+    }
+
     return (
       <div className="data-input-form-bx" key={field.id}>
         <div className="data-input-form-tit">
@@ -96,18 +113,36 @@ export default function SurveySaleSubmitPopup() {
             <textarea
               className="textarea-form"
               id={field.id}
-              value={submitData[field.id]}
+              value={submitData[field.id] ?? ''}
               onChange={(e) => handleInputChange(field.id, e.target.value)}
             />
           ) : (
-            <input
-              className="input-frame"
-              type="text"
-              id={field.id}
-              value={submitData[field.id]}
-              onChange={(e) => handleInputChange(field.id, e.target.value)}
-              readOnly={isReadOnly}
-            />
+            <>
+              {field.id === 'saleBase' && session?.role === 'Admin' ? (
+                <select
+                  className="select-form"
+                  id={field.id}
+                  value={submitData[field.id] ?? ''}
+                  onChange={(e) => handleInputChange(field.id, e.target.value)}
+                >
+                  <option value="">選択してください</option>
+                  {dummy.map((item) => (
+                    <option key={item.id} value={item.name}>
+                      {item.name}
+                    </option>
+                  ))}
+                </select>
+              ) : (
+                <input
+                  className="input-frame"
+                  type="text"
+                  id={field.id}
+                  value={submitData[field.id] ?? ''}
+                  onChange={(e) => handleInputChange(field.id, e.target.value)}
+                  readOnly={isReadOnly}
+                />
+              )}
+            </>
           )}
         </div>
       </div>