企業協賛フィルターモーダルの作成

Makefile

@@ -53,3 +53,7 @@ local-deploy:
 # DB入るコマンド
 ent-db:
 	docker compose exec db mysql -u root -proot
+
+# eslintの実行
+run-eslint:
+	docker compose exec view npm run lint

api/docs/docs.go

@@ -88,8 +88,8 @@ const docTemplate = `{
                         "required": false,
                         "schema": {
                             "type": "string",
-                            "enum": ["true", "false", "all"] 
-                        }          
+                            "enum": ["true", "false", "all"]
+                        }
                     },
                     {
                         "name": "sponsor_style_id",
@@ -134,7 +134,7 @@ const docTemplate = `{
                         "required": true,
                         "schema": {
                             "type": "string"
-                        }          
+                        }
                     },
                     {
                         "name": "is_done",
@@ -143,8 +143,8 @@ const docTemplate = `{
                         "required": false,
                         "schema": {
                             "type": "string",
-                            "enum": ["true", "false", "all"] 
-                        }          
+                            "enum": ["true", "false", "all"]
+                        }
                     },
                     {
                         "name": "sponsor_style_id",

api/externals/controller/activity_controller.go

@@ -108,7 +108,7 @@ func (a *activityController) IndexActivityDetailsByPeriod(c echo.Context) error
 }
 
 func (a *activityController) IndexFilteredActivityDetail(c echo.Context) error {
-	isDone := c.QueryParam("is_done") 
+	isDone := c.QueryParam("is_done")
 	sponsorStyleIDs := c.QueryParams()["sponsor_style_id"]
 	keyword := c.QueryParam("keyword")
 	activities, err := a.u.GetFilteredActivityDetail(c.Request().Context(), isDone, sponsorStyleIDs, keyword)
@@ -119,7 +119,7 @@ func (a *activityController) IndexFilteredActivityDetail(c echo.Context) error {
 }
 
 func (a *activityController) IndexFilteredActivityDetailByPeriod(c echo.Context) error {
-	isDone := c.QueryParam("is_done") 
+	isDone := c.QueryParam("is_done")
 	sponsorStyleIDs := c.QueryParams()["sponsor_style_id"]
 	year := c.Param("year")
 	keyword := c.QueryParam("keyword")
@@ -128,4 +128,4 @@ func (a *activityController) IndexFilteredActivityDetailByPeriod(c echo.Context)
 		return err
 	}
 	return c.JSON(http.StatusOK, activities)
-}
+}

api/externals/repository/activity_repository.go

@@ -345,4 +345,4 @@ func (ar *activityRepository) FindFilteredDetailByPeriod(c context.Context, isDo
 	}
 
 	return ar.crud.Read(c, query)
-}
+}

view/next-project/src/components/common/Input/Input.module.css

@@ -1,5 +1,4 @@
 .input:focus {
   border-color: #48b2cf;
-  border-width: 1.75px;
-  outline: none;
+  outline: 1.5px #48b2cf solid;
 }

view/next-project/src/components/common/Modal.tsx

@@ -4,6 +4,7 @@ import React, { useEffect } from 'react';
 interface Props {
   className?: string;
   children?: React.ReactNode;
+  onClick?: () => void;
 }
 
 export default function Modal(props: Props) {
@@ -23,7 +24,10 @@ export default function Modal(props: Props) {
 
   return (
     <>
-      <div className='fixed inset-0 z-50 flex items-center justify-center overflow-y-auto overflow-x-hidden bg-black-300/50 outline-none focus:outline-none'>
+      <div
+        className='fixed inset-0 z-50 flex items-center justify-center overflow-y-auto overflow-x-hidden bg-black-300/50 outline-none focus:outline-none'
+        onClick={props.onClick}
+      >
         <div className={clsx(className)} style={{ maxHeight: '90vh', overflowY: 'auto' }}>
           {props.children}
         </div>

view/next-project/src/components/common/Select/Select.module.css

@@ -1,7 +1,6 @@
 .select:focus {
   border-color: #48b2cf;
-  border-width: 1.75px;
-  outline: none;
+  outline: 1.5px #48b2cf solid;
 }
 
 .customSelect {

view/next-project/src/components/sponsoractivities/FilterModal.tsx

@@ -0,0 +1,183 @@
+import React, { FC, useState } from 'react';
+import { Modal, Select, CloseButton, Input, PrimaryButton } from '@components/common';
+import { SponsorStyle, SponsorFilterType } from '@type/common';
+
+interface ModalProps {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  sponsorStyles: SponsorStyle[];
+  filterData: SponsorFilterType;
+  setFilterData: (filterData: SponsorFilterType) => void;
+}
+
+const SELECT = '選択中';
+const NOT_SELECT = '未選択';
+
+const FilterModal: FC<ModalProps> = (props) => {
+  const { sponsorStyles, filterData, setFilterData } = props;
+
+  const [isAllStyleCheck, setIsAllStyleCheck] = useState<boolean>(
+    filterData.styleIds.length === sponsorStyles.length,
+  );
+  type SelectOption = 'all' | 'false' | 'true';
+
+  // モーダル用の変数
+  const [draftFilterData, setDraftFilterData] = useState<SponsorFilterType>(filterData);
+
+  function includeStyleIds(id: number) {
+    return draftFilterData.styleIds.includes(id);
+  }
+
+  function filterHandler(event: any) {
+    event.preventDefault();
+    setFilterData(draftFilterData);
+    setIsAllStyleCheck(isAllStyleCheck);
+    props.setIsOpen(false);
+  }
+
+  function addAndRemoveStyleIds(id: number) {
+    includeStyleIds(id)
+      ? (setDraftFilterData({
+          ...draftFilterData,
+          styleIds: draftFilterData.styleIds.filter((styleId) => styleId !== id),
+        }),
+        setIsAllStyleCheck(false))
+      : (setDraftFilterData({
+          ...draftFilterData,
+          styleIds: [...draftFilterData.styleIds, id],
+        }),
+        sponsorStyles.length === [...draftFilterData.styleIds, id].length &&
+          setIsAllStyleCheck(true));
+  }
+
+  const topCheckboxEvent = (event: any) => {
+    isAllStyleCheck ? deleteAllStyleIds() : addAllStyleIds();
+  };
+
+  const preventCloseModalEvent = (event: any) => {
+    event.stopPropagation();
+  };
+
+  function addAllStyleIds() {
+    const allStyleIDs = sponsorStyles.map((style) => style?.id || 0);
+    setDraftFilterData({ ...draftFilterData, styleIds: allStyleIDs });
+    setIsAllStyleCheck(true);
+  }
+
+  function deleteAllStyleIds() {
+    setDraftFilterData({ ...draftFilterData, styleIds: [] });
+    setIsAllStyleCheck(false);
+  }
+
+  const onClose = () => {
+    props.setIsOpen(false);
+  };
+
+  return (
+    <Modal
+      className='md:w-1/2'
+      onClick={() => {
+        onClose();
+      }}
+    >
+      <form onSubmit={filterHandler}>
+        <div onClick={preventCloseModalEvent}>
+          <div className='w-full'>
+            <div className='ml-auto w-fit'>
+              <CloseButton onClick={onClose} />
+            </div>
+          </div>
+          <div className='mx-auto mb-10 w-fit text-xl text-black-600'>協賛フィルター</div>
+          <div className='m-2 grid  grid-cols-4 items-center justify-items-center gap-x-2 gap-y-5'>
+            <p className='col-span-2 text-black-600'>協賛スタイル</p>
+            <div className='col-span-2 w-full'>
+              <div className=''>
+                <div className='flex rounded-md p-2 hover:bg-white-100'>
+                  <input
+                    type='checkbox'
+                    onChange={topCheckboxEvent}
+                    checked={isAllStyleCheck}
+                    id='all'
+                  ></input>
+                  <label htmlFor='all' className='mx-2 w-full text-black-300'>
+                    すべて （
+                    {draftFilterData.styleIds.length > 0
+                      ? SELECT + draftFilterData.styleIds.length
+                      : NOT_SELECT}
+                    ）
+                  </label>
+                </div>
+                <div className='max-h-28 overflow-y-auto rounded-md border-2 bg-white-0'>
+                  {props.sponsorStyles.map((style) => (
+                    <div className='flex p-2 hover:bg-white-100' key={style.id}>
+                      <input
+                        type='checkbox'
+                        checked={includeStyleIds(style?.id || 0)}
+                        onChange={() => {
+                          addAndRemoveStyleIds(style?.id || 0);
+                        }}
+                        id={String(style.id)}
+                      ></input>
+                      <label htmlFor={String(style.id)} className='mx-2 w-full text-black-300'>
+                        {style.style}/{style.feature}/{style.price}円
+                      </label>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+            <p className='col-span-2 text-black-600'>回収有無</p>
+            <div className='col-span-2 w-full'>
+              <Select
+                defaultValue={draftFilterData.isDone}
+                onChange={(e) => {
+                  setDraftFilterData({
+                    ...draftFilterData,
+                    isDone: e.target.value as SelectOption,
+                  });
+                }}
+                className=''
+              >
+                <option value='all'>すべて</option>
+                <option value='false'>未回収</option>
+                <option value='true'>回収済</option>
+              </Select>
+            </div>
+            <p className='col-span-2 text-black-600'>企業名検索</p>
+            <div className='col-span-2 w-full'>
+              <Input
+                value={draftFilterData.keyword}
+                className='w-full'
+                onChange={(e) => {
+                  setDraftFilterData({ ...draftFilterData, keyword: e.target.value });
+                }}
+              />
+            </div>
+            <p className='col-span-2 text-black-600'>並び替え</p>
+            <div className='col-span-2 w-full'>
+              <Select
+                className={'w-100'}
+                defaultValue={draftFilterData.selectedSort}
+                onChange={(e) =>
+                  setDraftFilterData({ ...draftFilterData, selectedSort: e.target.value })
+                }
+              >
+                <option value='default'>更新日時降順</option>
+                <option value='updateSort'>更新日時昇順</option>
+                <option value='createDesSort'>作成日時降順</option>
+                <option value='createSort'>作成日時昇順</option>
+                <option value='priceDesSort'>協賛金降順</option>
+                <option value='priceSort'>協賛金昇順</option>
+              </Select>
+            </div>
+          </div>
+          <div className='mx-auto my-8 w-fit text-xl text-black-600'>
+            <PrimaryButton type='submit'>設定</PrimaryButton>
+          </div>
+        </div>
+      </form>
+    </Modal>
+  );
+};
+
+export default FilterModal;

view/next-project/src/components/sponsoractivities/OpenAddModalButton.tsx

@@ -12,7 +12,7 @@ interface Props {
   children?: React.ReactNode;
 }
 
-export default function OpenModalButton(props: Props) {
+export default function OpenAddModalButton(props: Props) {
   const [isOpen, setIsOpen] = useState(false);
 
   return (

view/next-project/src/components/sponsoractivities/index.ts

@@ -0,0 +1,15 @@
+export { default as AddPdfDetailModal } from './AddPdfDetailModal';
+export { default as DeleteModal } from './DeleteModal';
+export { default as DetailModal } from './DetailModal';
+export { default as DetailPage1 } from './DetailPage1';
+export { default as DetailPage2 } from './DetailPage2';
+export { default as EditModal } from './EditModal';
+export { default as FilterModal } from './FilterModal';
+export { default as OpenAddModalButton } from './OpenAddModalButton';
+export { default as OpenAddPdfDetailModalButton } from './OpenAddPdfDetailModalButton';
+export { default as OpenDeleteModalButton } from './OpenDeleteModalButton';
+export { default as OpenEditModalButton } from './OpenEditModalButton';
+export { default as OpenPaymentDayModalButton } from './OpenPaymentDayModalButton';
+export { default as PaymentDayModal } from './PaymentDayModal';
+export { default as SponsorActivitiesAddModal } from './SponsorActivitiesAddModal';
+export { default as UploadFileModal } from './UploadFileModal';