Skip to content

Commit

Permalink
[feat]広告のステータスと情報を編集可能にする
Browse files Browse the repository at this point in the history
  • Loading branch information
@Kubosaka
Kubosaka committed Mar 29, 2024
1 parent 961d35a commit d733401
Show file tree
Hide file tree
Showing 3 changed files with 139 additions and 11 deletions.
148 changes: 137 additions & 11 deletions view/next-project/src/components/sponsoractivities/DetailPage2.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,19 @@ import { clsx } from 'clsx';
import { saveAs } from 'file-saver';
import React, { FC, useEffect, useState } from 'react';

import { FaChevronCircleLeft } from 'react-icons/fa';
import { FaChevronCircleLeft, FaCheckCircle } from 'react-icons/fa';
import { FiPlusSquare } from 'react-icons/fi';
import { DeleteButton, OutlinePrimaryButton, PrimaryButton } from '../common';
import { RiCloseCircleLine } from 'react-icons/ri';
import {
DeleteButton,
EditButton,
Input,
OutlinePrimaryButton,
PrimaryButton,
Select,
} from '../common';
import UplaodFileModal from './UploadFileModal';
import { post, del } from '@/utils/api/api_methods';
import { post, del, put } from '@/utils/api/api_methods';
import { DESIGN_PROGRESSES } from '@constants/designProgresses';
import { SponsorActivityView, SponsorActivityInformation } from '@type/common';

Expand All @@ -25,10 +33,16 @@ const DetailPage2: FC<ModalProps> = (props) => {
};
const [isOpen, setIsOpen] = useState<boolean>(false);
const [editActivityInformationId, setEditActivityInformationId] = useState<number>(0);
const [activityInformationData, setActivityInformationData] = useState<string>('');

const [sponsorActivityInformations, setSponsorActivityInformations] = useState<
SponsorActivityInformation[]
>(props.sponsorActivitiesViewItem.sponsorActivityInformations || []);
const [isEditInformations, setIsEditInformations] = useState<boolean[]>(
sponsorActivityInformations.map(() => {
return false;
}),
);

useEffect(() => {
const newSponsorActivitiesView = {
Expand Down Expand Up @@ -67,7 +81,6 @@ const DetailPage2: FC<ModalProps> = (props) => {
const newSponsorActivityInformations = sponsorActivityInformations.filter(
(sponsorActivityInformation) => sponsorActivityInformation.id !== id,
);
console.log(newSponsorActivityInformations);
if (activityInformation.fileName === '') {
const res = await del(deleteSponsorActivityInformationUrl);
} else {
Expand All @@ -91,13 +104,63 @@ const DetailPage2: FC<ModalProps> = (props) => {
fileName: '',
fileType: '',
designProgress: 1,
fileInformation: '',
};
const res = await post(sponsorActivitiesUrl, nullData);
const newSponsorActivityInformations = [...sponsorActivityInformations, res];
setSponsorActivityInformations(newSponsorActivityInformations);
setIsEditInformations([...isEditInformations, false]);
props.setIsChange(true);
};

const handleUpdateProgress = async (
e: React.ChangeEvent<HTMLSelectElement>,
activityInformation: SponsorActivityInformation,
) => {
const sponsorActivitiesUrl =
process.env.CSR_API_URI + '/activity_informations/' + activityInformation.id;
const updateActivityInformation = {
...activityInformation,
designProgress: Number(e.target.value),
};
const res = await put(sponsorActivitiesUrl, updateActivityInformation);
const newSponsorActivityInformations = sponsorActivityInformations.map(
(sponsorActivityInformation) => {
if (sponsorActivityInformation.id === activityInformation.id) {
return updateActivityInformation;
}
return sponsorActivityInformation;
},
);
setSponsorActivityInformations(newSponsorActivityInformations);
props.setIsChange(true);
};

const handleUpdateInformation = async (activityInformation: SponsorActivityInformation) => {
const sponsorActivitiesUrl =
process.env.CSR_API_URI + '/activity_informations/' + activityInformation.id;
const updateActivityInformation = {
...activityInformation,
fileInformation: activityInformationData,
};
const res = await put(sponsorActivitiesUrl, updateActivityInformation);
const newSponsorActivityInformations = sponsorActivityInformations.map(
(sponsorActivityInformation) => {
if (sponsorActivityInformation.id === activityInformation.id) {
return updateActivityInformation;
}
return sponsorActivityInformation;
},
);
setSponsorActivityInformations(newSponsorActivityInformations);
props.setIsChange(true);
setIsEditInformations(
isEditInformations.map(() => {
return false;
}),
);
};

return (
<>
<p className='mx-auto mb-2 mt-7 w-fit text-xl text-black-600'>協賛スタイル</p>
Expand Down Expand Up @@ -152,22 +215,85 @@ const DetailPage2: FC<ModalProps> = (props) => {
{sponsorActivityInformations &&
sponsorActivityInformations.map((activityInformation, index) => (
<>
<div className='flex flex-row-reverse border-t border-primary-1 p-2'>
<div className='m-0 flex flex-row-reverse border-t border-primary-1 p-0'>
<div className='mt-2 w-1/12'>
<button className=''>
<DeleteButton
onClick={() => handleDelete(activityInformation.id || 0, activityInformation)}
/>
</button>
</div>
<div className='w-11/12'>
<div className='my-1 ml-4 flex flex-wrap justify-center gap-7 '>
<div className='flex gap-3'>
<p className='text-black-600'>広告の状況</p>
<div className='w-11/12' />
</div>
<div className='flex flex-col flex-wrap justify-center'>
<div className='my-1 flex justify-center'>
<div className='flex w-fit items-center justify-center gap-3'>
<p className='w-25 whitespace-nowrap text-black-600'>広告状況</p>
<Select
value={designProgresses[index].id}
className='w-28 py-2'
onChange={(e) => {
handleUpdateProgress(e, activityInformation);
}}
>
{DESIGN_PROGRESSES.map((designProgress) => {
return <option value={designProgress.id}>{designProgress.state}</option>;
})}
</Select>
</div>
</div>
<div className='my-1 ml-4 flex flex-wrap justify-center gap-7 '>
<div className='flex items-center justify-center gap-3'>
<p className='text-black-600'>情報</p>
{isEditInformations[index] ? (
<>
<Input
value={activityInformationData}
className='w-40'
onChange={(e) => {
setActivityInformationData(e.target.value);
}}
/>
<RiCloseCircleLine
size={'32px'}
color={'gray'}
className='cursor-pointer'
onClick={() => {
setIsEditInformations(
isEditInformations.map(() => {
return false;
}),
);
}}
/>
<FaCheckCircle
size={'28px'}
className='cursor-pointer'
onClick={() => {
handleUpdateInformation(activityInformation);
}}
/>
</>
) : activityInformation.fileInformation.trim() === '' ? (
<p className='w-30 border-b border-primary-1'>　　　</p>
) : (
<p className='border-b border-primary-1'>
{designProgresses && designProgresses[index].state}
{activityInformation.fileInformation}
</p>
</div>
)}
{!isEditInformations[index] && (
<EditButton
onClick={() => {
const newIsEditInformations = isEditInformations.map(
(isEditInformation, editIndex) => {
return index === editIndex;
},
);
setActivityInformationData(activityInformation.fileInformation || '');
setIsEditInformations(newIsEditInformations);
}}
/>
)}
</div>
</div>
</div>
Expand Down
1 change: 1 addition & 0 deletions view/next-project/src/components/sponsoractivities/UploadFileModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ const UplaodFileModal: FC<ModalProps> = (props) => {
fileName: '',
fileType: '',
designProgress: 1,
fileInformation: '',
},
);

Expand Down
1 change: 1 addition & 0 deletions view/next-project/src/type/common.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,7 @@ export interface SponsorActivityInformation {
fileName: string;
fileType: string;
designProgress: number;
fileInformation: string;
createdAt?: string;
updatedAt?: string;
}
Expand Down

0 comments on commit d733401

Please sign in to comment.