ビンゴの公開設定の変更とセルに投稿者したユーザを表示 (#84)

components/BingoCardCarousel.vue

@@ -57,6 +57,7 @@
           <BingoCardView
             @openBingoCardDetailModal="openBingoCardDetailModal"
             :bingoCard="bingoCard"
+            :currentUserUid="props.currentUserUid"
           />
         </div>
       </div>
@@ -88,18 +89,24 @@
       @postBingoCellRequest="postBingoCellRequest"
       @postCheckFollowingSubject="postCheckFollowingSubject"
       @openNextBingoCardDetailModal="openNextBingoCardDetailModal"
+      :currentUserUid="props.currentUserUid"
       :selectedBingoCell="selectedBingoCardCell"
       :isFollowingSubject="isFollowingSubject"
       :selectedBingoCardCellNo="selectedBingoCardCellNo"
+      :answeredUserDetail="props.selectedBingoCellDetail?.answeredUserDetail"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-import { BingoCardDetail } from "@/server/models/bingo/dto";
+import { BingoCardDetail, BingoCellDetail } from "@/server/models/bingo/dto";
 import { IsFollowingSubjectResponse } from "@/server/models/facades/visionai/imageDescription";
 
 const props = defineProps({
+  currentUserUid: {
+    type: Object as PropType<String | undefined>,
+    required: true,
+  },
   bingoCards: {
     default: [],
     type: Array as PropType<BingoCardDetail[]>,
@@ -109,12 +116,18 @@ const props = defineProps({
     type: Object as PropType<IsFollowingSubjectResponse | null>,
     required: true,
   },
+  selectedBingoCellDetail: {
+    // モーダルで選択中のセルの詳細
+    type: Object as PropType<BingoCellDetail | null>,
+    required: false,
+  },
 });
 
 const emits = defineEmits([
   "postBingoCellRequest",
   "postCheckFollowingSubject",
   "clearIsFollowingSubject",
+  "getBingoCellDetail",
 ]);
 
 const bingoCellId = ref("");
@@ -212,6 +225,12 @@ const openNextBingoCardDetailModal = (index: number) => {
   openBingoCardDetailModal(selectedBingoCard.value.bingoCells[index].id);
 };
 const openBingoCardDetailModal = async (bingoCellIdByChild: string) => {
+  // ビンゴセルの詳細情報を取得する
+  await emits(
+    "getBingoCellDetail",
+    selectedBingoCardId.value,
+    bingoCellIdByChild
+  );
   bingoCellId.value = bingoCellIdByChild;
   modalIsOpen.value = true;
 };

components/BingoCardDetailModal.vue

@@ -47,15 +47,15 @@
           <div v-if="registered">
             <div class="mt-8">
               <label class="block mb-2 text-sm font-medium text-gray-700"
-                >あなたが投稿した画像</label
+                >投稿された画像</label
               >
               <img :src="selectedBingoCell.imageUrl!" alt="" />
             </div>
             <div class="mt-3">
               <label
                 for="message"
                 class="block mb-2 text-sm font-medium text-gray-700"
-                >あなたが投稿したコメント</label
+                >投稿されたコメント</label
               >
               <textarea
                 id="message"
@@ -65,6 +65,19 @@
                 disabled
               ></textarea>
             </div>
+
+            <div class="mt-8">
+              <label
+                for="message"
+                class="block mb-2 text-sm font-medium text-gray-700"
+                >投稿した人</label
+              >
+              <CreateUserBadge
+                :currentUserUid="currentUserUid"
+                :createdUid="answeredUserDetail?.uid"
+                :createdUserDetail="answeredUserDetail"
+              />
+            </div>
           </div>
           <!-- 投稿済みでない場合 -->
           <div v-else>
@@ -219,6 +232,10 @@ import { BingoCell } from "@/server/models/bingo/dto";
 import { IsFollowingSubjectResponse } from "@/server/models/facades/visionai/imageDescription";
 
 const props = defineProps({
+  currentUserUid: {
+    type: Object as PropType<String | undefined>,
+    required: true,
+  },
   selectedBingoCell: {
     type: Object as PropType<BingoCell>,
     required: true,
@@ -231,8 +248,11 @@ const props = defineProps({
     type: Number,
     required: true,
   },
+  answeredUserDetail: {
+    type: Object as PropType<UserInfo | undefined>,
+    required: true,
+  },
 });
-
 const currentPosition = ref(props.selectedBingoCardCellNo); // 現在の位置、初期値はセンターのセル
 
 const canMove = (direction, index) => {

components/BingoCardView.vue

@@ -29,11 +29,16 @@
     </div>
     <div class="pt-4 color text-sm flex justify-between">
       <span class="flex items-center">
-        <span class="text-xs">CREATED BY</span>
-        <CreateUserBadge :isAnonymousCard="isAnonymousCard" class="pl-2" />
+        <CreateUserBadge
+          :currentUserUid="props.currentUserUid"
+          :createdUid="bingoCard.createdUid"
+          :createdUserDetail="bingoCard.createdUserDetail"
+          class="pl-2"
+        />
+        <span class="text-xs">のビンゴカード</span>
       </span>
 
-      {{ CreatedAt }}
+      {{ createdAt }}
     </div>
   </div>
 </template>
@@ -48,22 +53,22 @@ const props = defineProps({
     type: Object as PropType<BingoCardDetail>,
     required: true,
   },
+  currentUserUid: {
+    type: Object as PropType<String | undefined>,
+    required: true,
+  },
 });
 
 const emits = defineEmits(["openBingoCardDetailModal"]);
 const openBingoCardDetailModal = async (bingoCellId: string) => {
   await emits("openBingoCardDetailModal", bingoCellId);
 };
 // computed プロパティを作成
-const CreatedAt = computed(() => {
+const createdAt = computed(() => {
   const timestamp = props.bingoCard.createdAt.getTime as any;
   return dayjs(timestamp).locale("ja").format("YYYY/M/D HH:mm");
 });
 
-const isAnonymousCard = computed(() => {
-  return props.bingoCard.createdUid === "";
-});
-
 const isReach = (index: number) => {
   let cells = props.bingoCard.bingoCells;
   // 各行のビンゴマスのcompletedステータスをチェックし、すべてがtrueの場合にtrueを返す

components/CreateUserBadge.vue

@@ -2,42 +2,65 @@
   <div
     class="bingo-owner-badge-object font-bold"
     :class="
-      props.isAnonymousCard
-        ? 'bingo-owner-badge-anonymous'
-        : 'bingo-owner-badge-own'
+      isAnonymousCard ? 'bingo-owner-badge-anonymous' : 'bingo-owner-badge-own'
     "
   >
-    <img
-      v-if="!props.isAnonymousCard && currentUser"
-      :src="currentUser.photoURL"
-      alt="プロフィールアイコン"
-      class="rounded-full w-7"
-    />
-    <span v-if="!props.isAnonymousCard && !currentUser">{{ message }}</span>
-    <svg v-if="props.isAnonymousCard" fill="currentColor" class="w-6 h-6">
+    <!-- 自分のカードの場合「あなた」と表示 -->
+    <span>{{ message }}</span>
+
+    <!-- ログインしないユーザが作成したビンゴカードの場合は、匿名ユーザとして表示する。 -->
+    <svg
+      v-if="isAnonymousCard || !hasPhotoURL"
+      fill="currentColor"
+      class="w-6 h-6"
+    >
       <path
         fill-rule="evenodd"
         d="M18.685 19.097A9.723 9.723 0 0021.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 003.065 7.097A9.716 9.716 0 0012 21.75a9.716 9.716 0 006.685-2.653zm-12.54-1.285A7.486 7.486 0 0112 15a7.486 7.486 0 015.855 2.812A8.224 8.224 0 0112 20.25a8.224 8.224 0 01-5.855-2.438zM15.75 9a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z"
         clip-rule="evenodd"
       />
     </svg>
+    <img
+      v-else-if="!isAnonymousCard"
+      :src="props.createdUserDetail!.photoURL"
+      alt=""
+      class="rounded-full w-7"
+    />
+  </div>
+  <div class="hidden group-hover:block absolute bg-white p-5 shadow-lg rounded">
+    Detail Information Here.
   </div>
 </template>
 
 <script setup lang="ts">
-import { BingoCardDetail } from "~/server/models/bingo/dto";
-import { useCurrentUser } from "vuefire";
-const currentUser = useCurrentUser();
-
 const props = defineProps({
-  isAnonymousCard: {
-    type: Boolean,
+  currentUserUid: {
+    type: Object as PropType<String | undefined>,
+    required: true,
+  },
+  createdUid: {
+    type: Object as PropType<String | undefined>,
     required: true,
   },
+  createdUserDetail: {
+    type: Object as PropType<UserInfo>,
+    required: false,
+  },
 });
 
 const message = computed(() => {
-  return props.isAnonymousCard ? "だれか" : "あなた";
+  if (props.createdUid === "") return "匿名";
+  if (props.createdUid !== "" && props.createdUid === props.currentUserUid)
+    return "あなた";
+  return "誰か";
+});
+
+const hasPhotoURL = computed(() => {
+  return props.createdUserDetail;
+});
+
+const isAnonymousCard = computed(() => {
+  return props.createdUid === "";
 });
 </script>
 

pages/create.vue

@@ -94,6 +94,18 @@
           </div>
         </fieldset>
       </div> -->
+
+      <!-- 公開ビンゴカードとするか -->
+      <label class="relative inline-flex items-center cursor-pointer mb-3 m">
+        <input type="checkbox" v-model="form.isPublic" class="sr-only peer" />
+        <div
+          class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
+        ></div>
+        <span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300"
+          >ビンゴカードを公開する</span
+        >
+      </label>
+
       <div class="flex justify-between">
         <router-link
           class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2"
@@ -127,6 +139,7 @@ const form = ref({
   title: "",
   theme: "",
   imageColor: "#6B8CFF",
+  isPublic: false,
 });
 
 const router = useRouter();
@@ -142,9 +155,8 @@ const createBingoCard = async () => {
       Authorization: `Bearer ${await currentUser.value?.getIdToken()}`,
     },
     body: JSON.stringify({
+      ...form.value,
       title: form.value.title == "" ? "タイトルなし" : form.value.title,
-      theme: form.value.theme,
-      imageColor: form.value.imageColor,
     } as BongoCreateRequest),
   });
   const data = (await res.json()) as { message: string; bingoCardId: string };

pages/index.vue

@@ -3,8 +3,11 @@
     @clearIsFollowingSubject="clearIsFollowingSubject"
     @postBingoCellRequest="postBingoCellRequest"
     @postCheckFollowingSubject="postCheckFollowingSubject"
+    @getBingoCellDetail="getBingoCellDetail"
     :bingoCards="bingoCardDetails"
     :isFollowingSubject="isFollowingSubject"
+    :currentUserUid="currentUser?.uid"
+    :selectedBingoCellDetail="bingoCellDetail"
   />
   <congratulations-complete
     v-if="congratulationsCompleteViewIsOpen"
@@ -18,16 +21,18 @@
 </template>
 
 <script setup lang="ts">
-import { BingoCardDetail } from "@/server/models/bingo/dto";
+import { BingoCardDetail, BingoCellDetail } from "@/server/models/bingo/dto";
 import {
   BingoCardsGetAllResponse,
+  BingoCellGetResponse,
   BingoCellPutResponse,
 } from "@/server/models/bingo/response";
 import { IsFollowingSubjectResponse } from "@/server/models/facades/visionai/imageDescription";
 import { useCurrentUser } from "vuefire";
 
 const currentUser = useCurrentUser(); // TODO: 画面をリロードすると全てのビンゴカードが表示される不具合あり
 const bingoCardDetails = ref([] as BingoCardDetail[]);
+const bingoCellDetail = ref(null as BingoCellDetail | null);
 const isFollowingSubject = ref(null as IsFollowingSubjectResponse | null);
 const congratulationsCompleteViewIsOpen = ref(false);
 const congratulationsBingoViewIsOpen = ref(false);
@@ -117,6 +122,19 @@ const postBingoCellRequest = async (
   await getAllBingoCard();
 };
 
+// ビンゴセルの詳細情報を取得する
+const getBingoCellDetail = async (bingoCardId: string, bingoCellId: string) => {
+  const res = await fetch(
+    `/api/bingoCell/${bingoCardId}?bingoCellId=${bingoCellId}`,
+    {
+      headers: {},
+    }
+  );
+  const data = (await res.json()) as BingoCellGetResponse;
+  console.log(data);
+  bingoCellDetail.value = data.bingoCellDetail;
+};
+
 // ビンゴカードをコンプリートしたときのお祝い画面をひらく
 const openCongratulationsCompleteView = async () => {
   congratulationsCompleteViewIsOpen.value = true;

pages/mypage.vue

@@ -74,6 +74,7 @@ onBeforeMount(async () => {
     router.push(`/login`);
   } else {
     await getUser();
+    updateUser(); // バックグラウンドで実行するため、awaitしない
   }
 });
 
@@ -90,6 +91,23 @@ const getUser = async () => {
   userInfo.value = data;
 };
 
+// ユーザ情報を更新
+const updateUser = async () => {
+  const res = await fetch("/api/user", {
+    method: "PUT",
+    headers: {
+      Authorization: `Bearer ${await currentUser.value?.getIdToken()}`,
+      ContentType: "application/json",
+    },
+    body: JSON.stringify({
+      displayName: currentUser.value?.displayName,
+      photoURL: currentUser.value?.photoURL,
+    } as UserPutRequest),
+  });
+  const data = await res.json();
+  userInfo.value = data;
+};
+
 // サインアウトボタン
 const logout = async () => {
   const auth = getAuth();

server/api/bingoCard/index.post.ts

@@ -65,6 +65,7 @@ function createBingoCard(
     name: body.title,
     theme: body.theme,
     imageColor: body.imageColor,
+    isPublic: body.isPublic,
     bingoCells: [],
     countOfBingoLine: 0, // ビンゴラインの数
     completed: false, // ビンゴカードが完成したかどうか