レイアウト修正による不具合修正など (#42)

components/BingoCardCarousel.vue

@@ -97,7 +97,7 @@
 
 <script setup lang="ts">
 import { BingoCard } from "@/server/models/bingo/dto";
-import { IsFollowingSubjectResponse } from "~/server/models/facades/visionai/imageDescription";
+import { IsFollowingSubjectResponse } from "@/server/models/facades/visionai/imageDescription";
 
 const props = defineProps({
   bingoCards: {
@@ -114,6 +114,7 @@ const props = defineProps({
 const emits = defineEmits([
   "postBingoCellRequest",
   "postCheckFollowingSubject",
+  "clearIsFollowingSubject",
 ]);
 
 const bingoCellId = ref("");
@@ -126,6 +127,9 @@ const state = reactive({
   diffX: 0,
 });
 
+/**
+ *  ビンゴカード一覧のスワイプ処理
+ */
 const onTouchMove = (event: any) => {
   if (state.startX == null) {
     return;
@@ -175,38 +179,58 @@ const onTouchStart = (event: any) => {
   state.startX = "touches" in event ? event.touches[0].clientX : event.clientX;
 };
 
-const modalIsOpen = ref(false);
-
-// トップに表示されているビンゴカード
+/**
+ *  トップに表示されているビンゴカード
+ */
 const selectedBingoCard = computed(() => {
   return props.bingoCards[state.currentNum];
 });
+const selectedBingoCardId = computed(() => {
+  return selectedBingoCard.value.id;
+});
 // モーダルに表示するビンゴのセル
 const selectedBingoCardCell = computed(() => {
   return selectedBingoCard.value.bingoCells.filter(
     (value) => value.id === bingoCellId.value
   )[0];
 });
 
-// アップロードモーダル上のイベント
-// ビンゴカードの詳細を開く
+/**
+ * モーダルの処理
+ */
+// ビンゴカード詳細モーダルを開く
+const modalIsOpen = ref(false);
 const openBingoCardDetailModal = async (bingoCellIdByChild: string) => {
   bingoCellId.value = bingoCellIdByChild;
   modalIsOpen.value = true;
 };
-// ビンゴカードの詳細を閉じる
+// ビンゴカード詳細モーダルを閉じる
 const closeBingoCardDetailModal = async () => {
   modalIsOpen.value = false;
+  emits("clearIsFollowingSubject"); // モーダルを閉じる時に、検証結果をクローズする。
 };
-// 投稿ボタンが押されたときの処理のイベント発火
+// モーダルの投稿ボタンが押されたときの処理のイベント発火
 const postBingoCellRequest = async (form: { comments: string }, file: any) => {
   // bingoCellIdを付与して返す。
-  await emits("postBingoCellRequest", bingoCellId, form, file);
+  await emits(
+    "postBingoCellRequest",
+    selectedBingoCardId.value,
+    bingoCellId.value,
+    form,
+    file
+  );
+  // 投稿処理後、モーダルを閉じる
+  modalIsOpen.value = false;
 };
-// アップロードした画像がテーマに沿っているかを確認するイベント発火
-const postCheckFollowingSubject = async (bingoCellId: string, file: any) => {
+// モーダルでアップロードした画像がテーマに沿っているかを確認するイベント発火
+const postCheckFollowingSubject = async (file: any) => {
   // bingoCellIdを付与して返す。
-  await emits("postCheckFollowingSubject", bingoCellId, file);
+  await emits(
+    "postCheckFollowingSubject",
+    selectedBingoCardId.value,
+    bingoCellId.value,
+    file
+  );
 };
 </script>
 

components/BingoCardDetailModal.vue

@@ -76,6 +76,8 @@
                 type="file"
                 @change="onFileChange"
               />
+              <!-- アップロードした写真を表示 -->
+              <div v-if="fileUrl"><img :src="fileUrl" alt="" /></div>
               <div v-if="isCheckProcessing">
                 <p>検証中...</p>
               </div>
@@ -116,9 +118,9 @@
           <button
             v-if="!registered"
             @click="postBingoCellRequest"
-            data-modal-hide="extralarge-modal"
             type="button"
-            class="text-gray-700 bg-blue-400 hover:bg-blue-600 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+            :class="buttonClass"
+            :disabled="!isRegisterButtonActive"
           >
             保存する
           </button>
@@ -149,37 +151,68 @@ const emits = defineEmits([
   "postCheckFollowingSubject",
 ]);
 
+/**
+ * モーダルの状態に関する定義
+ */
 // モーダルクローズのイベント発火
 const closeBingoCardDetailModal = async () => {
   await emits("closeBingoCardDetailModal");
 };
-
-// モーダルのセルが投稿済みの場合True
+// モーダルのセルが投稿済みの場合: True
 const registered = computed(() => {
   return props.selectedBingoCell.completed;
 });
+// モーダルが投稿可能な状態の場合: True
+const isRegisterButtonActive = computed(() => {
+  return (
+    !registered.value && // このセルが登録済みでない
+    form.value.comments !== "" && // コメントが入力されている
+    selectedFile.value !== null // 画像が選択されている
+    // props.isFollowingSubject?.isFollowingSubject // 画像がテーマに沿っている、検証中のためコメントアウト
+  );
+});
+// ボタンの表示を切り替えるためのクラス
+const buttonClass = computed(() => {
+  return `text-white font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 focus:outline-none ${
+    isRegisterButtonActive.value
+      ? "bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
+      : "bg-gray-400 cursor-not-allowed"
+  }`;
+});
 
-// ファイルが変更された時、ファイルの検査処理のイベント発火
+/*
+ * 画像がアップロードされたときの処理
+ */
+//ファイルが変更された時、ファイルの検査処理のイベント発火
 let selectedFile = ref(null);
+let fileUrl = ref("");
 const onFileChange = async (e: any) => {
   selectedFile.value = e.target.files[0];
+  fileUrl.value = URL.createObjectURL(e.target.files[0]);
   await emits("postCheckFollowingSubject", selectedFile.value);
 };
-
-// 検証プロセスが実行中の場合True
+// 検証プロセスが実行中の場合: True
 const isCheckProcessing = computed(() => {
   return selectedFile.value !== null && props.isFollowingSubject === null;
 });
+// 検証結果のBooleanを文字列に変換
 const checkResultMessage = computed(() => {
   return props.isFollowingSubject?.isFollowingSubject ? "OK" : "NG";
 });
 
+/*
+ * 画像を投稿する処理
+ */
 // 投稿する
 const form = ref({
   comments: "",
 });
 // 投稿ボタンが押されたときのイベント発火
 const postBingoCellRequest = async () => {
+  if (!isRegisterButtonActive.value) {
+    // 投稿ボタンが押されたが、投稿できない場合は何もしない
+    return;
+  }
   await emits("postBingoCellRequest", form.value, selectedFile.value);
 };
 </script>

pages/create.vue

@@ -132,7 +132,7 @@ const createBingoCard = async () => {
   await new Promise((resolve) => setTimeout(resolve, 1000));
 
   isLoading.value = false;
-  router.push(`/BingoCard/${data.bingoCardId}`);
+  router.push(`/`);
 };
 </script>
 

pages/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="main">
     <BingoCardCarousel
+      @clearIsFollowingSubject="clearIsFollowingSubject"
       @postBingoCellRequest="postBingoCellRequest"
       @postCheckFollowingSubject="postCheckFollowingSubject"
       :bingoCards="bingoCards"
@@ -11,31 +12,30 @@
 
 <script setup lang="ts">
 import { BingoCard } from "@/server/models/bingo/dto";
-import {
-  BingoCardsGetAllResponse,
-  BingoCardsGetResponse,
-} from "@/server/models/bingo/response";
-import { IsFollowingSubjectResponse } from "~/server/models/facades/visionai/imageDescription";
+import { BingoCardsGetAllResponse } from "@/server/models/bingo/response";
+import { IsFollowingSubjectResponse } from "@/server/models/facades/visionai/imageDescription";
 
 const bingoCards = ref([] as BingoCard[]);
-const bingoCardId = ref("");
 const isFollowingSubject = ref(null as IsFollowingSubjectResponse | null);
 
 // 全てのビンゴカードを取得
 onMounted(async () => {
-  const res = await getAllBingoCard();
-  bingoCards.value = res.bingoCards;
+  await getAllBingoCard();
 });
-
 // ビンゴカードの情報取得
 const getAllBingoCard = async () => {
   const res = await fetch(`api/bingoCard`);
   const data = (await res.json()) as BingoCardsGetAllResponse;
-  return data;
+  bingoCards.value = data.bingoCards;
 };
 
+// 投稿画像に対するチェック処理
 // アップロードした画像がテーマに沿っているかを確認する。
-const postCheckFollowingSubject = async (bingoCellId: string, file: any) => {
+const postCheckFollowingSubject = async (
+  bingoCardId: string,
+  bingoCellId: string,
+  file: any
+) => {
   // 前の検証結果をクリア
   isFollowingSubject.value = null;
 
@@ -57,10 +57,15 @@ const postCheckFollowingSubject = async (bingoCellId: string, file: any) => {
   );
   isFollowingSubject.value = await res.json();
 };
+// チェック処理の結果をクリア
+const clearIsFollowingSubject = async () => {
+  isFollowingSubject.value = null;
+};
 
-// ビンゴカードの詳細を投稿する
-// 投稿完了後、ビンゴカードの最新の状態を取得し、モーダルを閉じる
+// ビンゴセルに対する投稿処理
+// ビンゴセルに画像を投稿する。投稿完了後、ビンゴカードの最新の状態を取得する。
 const postBingoCellRequest = async (
+  bingoCardId: string,
   bingoCellId: string,
   form: { comments: string },
   file: any
@@ -78,15 +83,7 @@ const postBingoCellRequest = async (
     method: "PUT",
     body: formData,
   });
-  const res = await fetchBingoCard();
-  // bingoCard.value = res.bingoCard;
-  // modalIsOpen.value = false;
-};
-
-// ビンゴカードの情報取得
-const fetchBingoCard = async () => {
-  const res = await fetch(`/api/bingoCard/${bingoCardId}`);
-  const data = (await res.json()) as BingoCardsGetResponse;
-  return data;
+  // 最新の状態を取得
+  await getAllBingoCard();
 };
 </script>

server/api/bingoCell/checkFollowingSubject/[bingoCardId].post.ts

@@ -6,7 +6,7 @@ import {
   ImageDescriptionResponse,
   IsFollowingSubjectResponse,
 } from "@/server/models/facades/visionai/imageDescription";
-import { validateFollowingSubject } from "~/server/facades/generativeai/chatgpt";
+import { validateFollowingSubject } from "@/server/facades/generativeai/chatgpt";
 
 export default defineEventHandler(async (event) => {
   try {

server/facades/generativeai/chatgpt.ts

@@ -1,10 +1,10 @@
 import { OpenAI } from "openai";
-import { BingoCell } from "~/server/models/bingo/dto";
-import { CreateBingoCellThemeResponse } from "~/server/models/facades/generativeai/chatgpt";
+import { BingoCell } from "@/server/models/bingo/dto";
+import { CreateBingoCellThemeResponse } from "@/server/models/facades/generativeai/chatgpt";
 import {
   ImageDescriptionResponse,
   IsFollowingSubjectResponse,
-} from "~/server/models/facades/visionai/imageDescription";
+} from "@/server/models/facades/visionai/imageDescription";
 
 const openai = new OpenAI({
   apiKey: process.env.OPENAI_API_KEY,