Skip to content

Commit

Permalink
[feat]デザインの追加・削除機能追加
Browse files Browse the repository at this point in the history
  • Loading branch information
@Kubosaka
Kubosaka committed Mar 20, 2024
1 parent c8acb39 commit 4b1a99b
Show file tree
Hide file tree
Showing 10 changed files with 255 additions and 125 deletions.
36 changes: 18 additions & 18 deletions api/docs/docs.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,26 +56,26 @@ const docTemplate = `{
}
},
},
"/activities/details/{year}": {
"get": {
tags: ["activity"],
"description": "年度で指定されたactivitiesとsponsor,sponsorStyle,userの一覧を取得",
"parameters": [
{
"name": "year",
"in": "path",
"description": "year",
"required": true,
"type": "integer"
}
],
"responses": {
"200": {
"description": "年度で指定されたactivitiesとsponsor,sponsorStyle,userの一覧を取得",
}
"/activities/details/{year}": {
"get": {
tags: ["activity"],
"description": "年度で指定されたactivitiesとsponsor,sponsorStyle,userの一覧を取得",
"parameters": [
{
"name": "year",
"in": "path",
"description": "year",
"required": true,
"type": "integer"
}
},
],
"responses": {
"200": {
"description": "年度で指定されたactivitiesとsponsor,sponsorStyle,userの一覧を取得",
}
}
},
},
"/activities/{id}": {
"get": {
tags: ["activity"],
Expand Down
2 changes: 1 addition & 1 deletion api/externals/controller/activity_information_controller.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,5 +93,5 @@ func (a *activityInformationController) DestroyActivityInformation(c echo.Contex
if err != nil {
return err
}
return c.String(http.StatusOK, "Destroy ActivityInformations")
return c.JSON(http.StatusOK, "Destroy ActivityInformations")
}
2 changes: 1 addition & 1 deletion view/Dockerfile
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
# ベースイメージの作成
FROM node:20
FROM node:16.13.0
# コンテナ内で作業するディレクトリを指定
WORKDIR /app/next-project
COPY ./ /app
Expand Down
1 change: 1 addition & 0 deletions view/next-project/.env
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,4 @@ NEXT_PUBLIC_ENDPOINT='192.168.176.1'
NEXT_PUBLIC_PORT=9000
NEXT_PUBLIC_ACCESS_KEY='bE5KYqihEcEXMrgkVhZn'
NEXT_PUBLIC_SECRET_KEY='oQvamjXnAvrsyneZdluX7S49TfRi0na6AO8WNPuL'
NEXT_PUBLIC_BUCKET_NAME='finansu'
14 changes: 12 additions & 2 deletions view/next-project/src/components/sponsoractivities/DetailModal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { clsx } from 'clsx';
import React, { FC, useState } from 'react';
import { useRouter } from 'next/router';
import { RiCloseCircleLine } from 'react-icons/ri';

import { Modal } from '@components/common';
Expand All @@ -18,8 +19,15 @@ interface ModalProps {
}

const DetailModal: FC<ModalProps> = (props) => {
const [isChange, setIsChange] = useState<boolean>(false);
const [sponsorActivitiesView, setSponsorActivitiesView] = useState<SponsorActivityView>(
props.sponsorActivitiesViewItem,
);

const router = useRouter();
const onClose = () => {
props.setIsOpen(false);
isChange && router.reload();
};
const [pageNum, setPageNum] = useState<number>(1);

Expand All @@ -39,15 +47,17 @@ const DetailModal: FC<ModalProps> = (props) => {
{pageNum === 1 && (
<DetailPage1
setPageNum={setPageNum}
sponsorActivitiesViewItem={props.sponsorActivitiesViewItem}
sponsorActivitiesViewItem={sponsorActivitiesView}
id={props.id}
/>
)}
{pageNum === 2 && (
<DetailPage2
setPageNum={setPageNum}
sponsorActivitiesViewItem={props.sponsorActivitiesViewItem}
sponsorActivitiesViewItem={sponsorActivitiesView}
setSponsorActivitiesView={setSponsorActivitiesView}
id={props.id}
setIsChange={setIsChange}
/>
)}
</Modal>
Expand Down
2 changes: 1 addition & 1 deletion view/next-project/src/components/sponsoractivities/DetailPage1.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@ const DetailPage1: FC<ModalProps> = (props) => {
</tbody>
</table>
<div className='mt-2 flex justify-end'>
<button onClick={() => toPage2()}>
<button onClick={() => toPage2()} className='rounded-full hover:bg-grey-300'>
<FaChevronCircleRight size={30} />
</button>
</div>
Expand Down
197 changes: 132 additions & 65 deletions view/next-project/src/components/sponsoractivities/DetailPage2.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import { clsx } from 'clsx';
import React, { FC, useState } from 'react';
import React, { FC, useEffect, useState } from 'react';
import { post, del } from '@/utils/api/api_methods';

import { DESIGN_PROGRESSES } from '@constants/designProgresses';
import { SponsorActivityView, SponsorActivityInformation } from '@type/common';
import { FaChevronCircleLeft } from 'react-icons/fa';
import { OutlinePrimaryButton, PrimaryButton, RedButton } from '../common';
import { FiPlusSquare } from 'react-icons/fi';
import { DeleteButton, OutlinePrimaryButton, PrimaryButton, RedButton } from '../common';
import { saveAs } from 'file-saver';
import UplaodFileModal from './UploadFileModal';

Expand All @@ -13,17 +15,28 @@ interface ModalProps {
children?: React.ReactNode;
id: React.ReactNode;
sponsorActivitiesViewItem: SponsorActivityView;
setIsChange: (isChange: boolean) => void;
setSponsorActivitiesView: (sponsorActivitiesView: SponsorActivityView) => void;
}

const DetailPage2: FC<ModalProps> = (props) => {
const toPage1 = () => {
props.setPageNum(1);
};
const [isOpen, setIsOpen] = useState<boolean>(false);
const [editActivityInformation, setEditActivityInformation] =
useState<SponsorActivityInformation | null>(null);
const [editActivityInformationId, setEditActivityInformationId] = useState<number>(0);

const sponsorActivityInformations = props.sponsorActivitiesViewItem.sponsorActivityInformations;
const [sponsorActivityInformations, setSponsorActivityInformations] = useState<
SponsorActivityInformation[]
>(props.sponsorActivitiesViewItem.sponsorActivityInformations || []);

useEffect(() => {
const newSponsorActivitiesView = {
...props.sponsorActivitiesViewItem,
sponsorActivityInformations: sponsorActivityInformations,
};
props.setSponsorActivitiesView(newSponsorActivitiesView);
}, [sponsorActivityInformations]);

const designProgresses =
sponsorActivityInformations &&
Expand All @@ -45,10 +58,46 @@ const DetailPage2: FC<ModalProps> = (props) => {
const download = async (url: string, fileName: string) => {
const response = await fetch(url);
const blob = await response.blob();

saveAs(blob, fileName);
};

const handleDelete = async (id: number, activityInformation: SponsorActivityInformation) => {
const deleteSponsorActivityInformationUrl =
process.env.CSR_API_URI + '/activity_informations/' + String(id);
const newSponsorActivityInformations = sponsorActivityInformations.filter(
(sponsorActivityInformation) => sponsorActivityInformation.id !== id,
);
console.log(newSponsorActivityInformations);
if (activityInformation.fileName === '') {
const res = await del(deleteSponsorActivityInformationUrl);
} else {
const confirm = window.confirm('本当に削除してよろしいですか？');
if (confirm) {
const res = await del(deleteSponsorActivityInformationUrl);
} else {
window.alert('キャンセルしました');
return;
}
}
setSponsorActivityInformations(newSponsorActivityInformations);
props.setIsChange(true);
};

const createInfomation = async () => {
const sponsorActivitiesUrl = process.env.CSR_API_URI + '/activity_informations';
const nullData = {
activityID: props.sponsorActivitiesViewItem.sponsorActivity.id || 0,
bucketName: '',
fileName: '',
fileType: '',
designProgress: 1,
};
const res = await post(sponsorActivitiesUrl, nullData);
const newSponsorActivityInformations = [...sponsorActivityInformations, res];
setSponsorActivityInformations(newSponsorActivityInformations);
props.setIsChange(true);
};

return (
<>
<p className='mx-auto mb-2 mt-7 w-fit text-xl text-black-600'>協賛スタイル</p>
Expand Down Expand Up @@ -103,79 +152,97 @@ const DetailPage2: FC<ModalProps> = (props) => {
{sponsorActivityInformations &&
sponsorActivityInformations.map((activityInformation, index) => (
<>
<div className='my-1 flex flex-wrap justify-center gap-7 border-t border-primary-1 p-2'>
<div className='flex gap-3'>
<p className='text-black-600'>広告の状況</p>
<p className='border-b border-primary-1'>
{designProgresses && designProgresses[index].state}
</p>
<div className='flex flex-row-reverse border-t border-primary-1 p-2'>
<div className='mt-2 w-1/12'>
<button className=''>
<DeleteButton
onClick={() => handleDelete(activityInformation.id || 0, activityInformation)}
/>
</button>
</div>
</div>
<div className='flex flex-wrap justify-center'>
{activityInformation?.fileType === 'application/pdf' &&
activityInformation?.fileName && (
<embed src={fileURLs && fileURLs[index]} type='application/pdf' width='200' />
<div className='w-11/12'>
<div className='my-1 flex flex-wrap justify-center gap-7 '>
<div className='flex gap-3'>
<p className='text-black-600'>広告の状況</p>
<p className='border-b border-primary-1'>
{designProgresses && designProgresses[index].state}
</p>
</div>
</div>
<div className='flex flex-wrap justify-center'>
{activityInformation?.fileType === 'application/pdf' &&
activityInformation?.fileName && (
<embed
src={fileURLs && fileURLs[index]}
type='application/pdf'
width='200'
/>
)}
{activityInformation.fileType !== 'application/pdf' &&
activityInformation.fileName && (
<img
src={fileURLs && fileURLs[index]}
alt='Picture of the author'
width='160'
/>
)}
</div>
{activityInformation.fileName !== '' && (
<div className='my-2 flex flex-wrap justify-center gap-2'>
<OutlinePrimaryButton
className='p-1'
onClick={() => {
setEditActivityInformationId(index);
setIsOpen(true);
}}
>
変更
</OutlinePrimaryButton>
<PrimaryButton
onClick={() =>
fileURLs && download(fileURLs[index], activityInformation.fileName || '')
}
>
ダウンロード
</PrimaryButton>
</div>
)}
{activityInformation.fileType !== 'application/pdf' &&
activityInformation.fileName && (
<img
src={fileURLs && fileURLs[index]}
alt='Picture of the author'
width='160'
/>
{activityInformation.fileName === '' && (
<div className='my-2 flex flex-wrap justify-center gap-2'>
<OutlinePrimaryButton
className='mx-auto my-2'
onClick={() => {
setEditActivityInformationId(index);
setIsOpen(true);
}}
>
広告登録
</OutlinePrimaryButton>
</div>
)}
</div>
<div className='my-2 flex flex-wrap justify-center gap-2'>
<OutlinePrimaryButton
className='p-1'
onClick={() => {
setEditActivityInformation(activityInformation);
setIsOpen(true);
}}
>
変更
</OutlinePrimaryButton>
<PrimaryButton
onClick={() =>
fileURLs && download(fileURLs[index], activityInformation.fileName || '')
}
>
ダウンロード
</PrimaryButton>
</div>
</div>
</>
))}
{!sponsorActivityInformations && (
<>
<div className='my-1 flex flex-wrap justify-center gap-7 border-t border-primary-1 p-2'>
<div className='flex gap-3'>
<p className='text-black-600'>広告の状況</p>
<p className='border-b border-primary-1'>未回収</p>
</div>
</div>
<div className='my-2 flex flex-wrap justify-center gap-2'>
<OutlinePrimaryButton
className='mx-auto my-2'
onClick={() => {
setIsOpen(true);
}}
>
広告登録
</OutlinePrimaryButton>
</div>
</>
)}
<div className='my-1 flex flex-wrap justify-center gap-7 border-t border-primary-1 p-2'>
<button className='rounded hover:bg-grey-300'>
<FiPlusSquare size={30} onClick={() => createInfomation()} />
</button>
</div>
</div>
<div className='mt-2'>
<button onClick={() => toPage1()}>
<button onClick={() => toPage1()} className='rounded-full hover:bg-grey-300'>
<FaChevronCircleLeft size={30} />
</button>
</div>
{isOpen && (
<UplaodFileModal
setIsOpen={setIsOpen}
id={props.sponsorActivitiesViewItem.sponsorActivity.id}
sponsorActivityInformation={editActivityInformation}
id={props.sponsorActivitiesViewItem.sponsorActivity.id || 0}
ActivityInformationId={editActivityInformationId}
sponsorActivityInformations={sponsorActivityInformations}
setSponsorActivityInformations={setSponsorActivityInformations}
setIsChange={props.setIsChange}
/>
)}
</>
Expand Down
Loading

0 comments on commit 4b1a99b

Please sign in to comment.