Feat/add member

packages/client/src/components/chat/VoteViewer.svelte

@@ -14,6 +14,36 @@
   const { isResultVisible } = $derived(myVotes());
   let { selectedOptions } = $derived(proxify(myVotes()));
 
+  let numberOfAllVotes = $state(0);
+
+  let numberOfVotesOfMostVotedOption = $state(0);
+
+  let voteShareOfMostVotedOption = $state(0.0);
+
+  let numbersOfVotersPerOption: number[] = $state([]);
+
+  let selectedOptions: number[] = $state([]);
+
+  if (vote.data) {
+    let tempNumbersOfVotersPerOption: number[] = [];
+    let tempNumberOfAllVotes = 0;
+    let max = 0;
+    for (let i = 0; i < vote.data.voteOptions.length; i++) {
+      let num = 0;
+      for (let j = 0; j < vote.data.voters.length; j++) {
+        if (vote.data.voters[j].votedOptions.includes(i)) {
+          num++;
+        }   
+      }
+      if(num > max) max = num;
+      tempNumberOfAllVotes += num;
+      tempNumbersOfVotersPerOption.push(num);
+    }
+    numbersOfVotersPerOption = tempNumbersOfVotersPerOption;
+    numberOfAllVotes = tempNumberOfAllVotes;
+    voteShareOfMostVotedOption = tempNumberOfAllVotes? (max / tempNumberOfAllVotes) : 0;
+    numberOfVotesOfMostVotedOption = max;
+
   interface CalculateVotesReturn {
     numbersOfVotersPerOption: number[];
   }
@@ -44,18 +74,34 @@
       selectedOptions: [],
     };
   }
-  function calculateVotes(): CalculateVotesReturn {
-    if (!vote.data) {
-      return {
-        numbersOfVotersPerOption: [],
-      };
-    }
-    const numbersOfVotersPerOption: number[] = [];
-    for (let i = 0; i < vote.data.voteOptions.length; i++) {
-      let num = 0;
-      for (const voter of vote.data.voters) {
-        if (voter.votedOptions.includes(i)) {
-          num++;
+
+  $effect(() => {
+    if (vote.data) {
+      let tempNumbersOfVotersPerOption: number[] = [];
+      let tempNumberOfAllVotes = 0;
+      let max = 0;
+      for (let i = 0; i < vote.data.voteOptions.length; i++) {
+        let num = 0;
+        for (let j = 0; j < vote.data.voters.length; j++) {
+          if (vote.data.voters[j].votedOptions.includes(i)) {
+            num++;
+          }
+
+        }
+        if(num > max) max = num;
+        tempNumberOfAllVotes += num;
+        tempNumbersOfVotersPerOption.push(num);
+      }
+      numbersOfVotersPerOption = tempNumbersOfVotersPerOption;
+      numberOfAllVotes = tempNumberOfAllVotes;
+      voteShareOfMostVotedOption = tempNumberOfAllVotes? (max / tempNumberOfAllVotes) : 0;
+      numberOfVotesOfMostVotedOption = max;
+      if (me.data) {
+        for (let i = 0; i < vote.data.voters.length; i++) {
+          if (vote.data.voters[i].userId === me.data._id) {
+            selectedOptions = vote.data.voters[i].votedOptions;
+            isResultVisible = true;
+          }
         }
       }
       numbersOfVotersPerOption.push(num);
@@ -93,24 +139,27 @@
   }
 </script>
 
-{#if vote.data}
-  <div class="card bg-base-200 rounded p-2 shadow">
-    <h2 class="text-primary m-1 font-mono text-4xl">投票：</h2>
-    <h1 class="m-1 font-mono text-5xl">{vote.data?.title}</h1>
-    <p class="text-secondary m-1 font-mono">
-      一人の最大投票数：{vote.data?.maxVotes}票
-    </p>
-    {#each vote.data?.voteOptions as option, i}
-      {@const status = clickableStatus(i)}
-      <div class="flex">
-        <p class="m-1 text-xl">
-          {#if isResultVisible && numbersOfVotersPerOption[i]}
-            {option}: {numbersOfVotersPerOption[i]}人
-          {:else}
-            {option}
-          {/if}
+<div class="card bg-base-200 rounded p-2 shadow">
+  <h2 class="text-primary m-1 font-mono text-4xl">投票：</h2>
+  <h1 class="m-1 font-mono text-5xl">{vote.data?.title}</h1>
+  <p class="text-secondary m-1 font-mono">
+    一人の最大投票数：{vote.data?.maxVotes}票
+  </p>
+  {#each vote.data?.voteOptions as option, i}
+    <div class="flex">
+      <div class="relative w-full mr-3">
+        <div class="transition transition-all rounded absolute mt-2 h-[28px] z-0 {(numbersOfVotersPerOption[i] === numberOfVotesOfMostVotedOption) ? "bg-orange-500" : "bg-blue-500"}"
+          style={
+            "width:" + ((numbersOfVotersPerOption[i] && numberOfAllVotes && voteShareOfMostVotedOption) ? (numbersOfVotersPerOption[i] / numberOfAllVotes / voteShareOfMostVotedOption * 100) : 0) + "%;"
+          }></div>
+        <p class="relative mt-2 ml-1 text-xl">
+          {option}{isResultVisible
+            ? "：" + numbersOfVotersPerOption[i] + "人"
+            : ""}
         </p>
-        <button
+      </div>
+
+      <button
           class={[
             "btn {selectedOptions.includes(i) m-1 ml-auto",
             status === "can select" && "btn-primary",
@@ -123,21 +172,19 @@
         >
           {hasInSelectedOptions(i) ? "解除" : "選択"}
         </button>
-      </div>
-    {/each}
-    <button
-      class="btn btn-primary w-16"
-      onclick={async () => {
-        if (me.data) {
-          await convex.mutation(api.vote.vote, {
-            voteId: voteId,
-            userId: me.data._id as Id<"users">,
-            votedOptions: selectedOptions,
-          });
-        }
-      }}
-    >
-      投票
-    </button>
-  </div>
-{:else}{/if}
+    </div>
+  {/each}
+  <button
+    class="btn btn-primary w-16"
+    onclick={async () => {
+      if (me.data) {
+        await convex.mutation(api.vote.vote, {
+          voteId: voteId,
+          userId: me.data._id as Id<"users">,
+          votedOptions: selectedOptions,
+        });
+      }
+    }}>投票</button
+  >
+</div>
+

packages/client/src/routes/orgs/[orgId]/settings/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { api, type Id } from "@packages/convex";
-  import { useQuery } from "convex-svelte";
+  import { useConvexClient, useQuery } from "convex-svelte";
   import { page } from "$app/stores";
   import { useMutation } from "~/lib/useMutation.svelte.ts";
 
@@ -14,6 +14,7 @@
   }));
   const updateOrganization = useMutation(api.organizations.update);
   const removeMember = useMutation(api.organizations.removeMember);
+  const convex = useConvexClient();
 
   let isEditing = $state(false);
   let editForm = $state({
@@ -55,6 +56,39 @@
       }
     }
   }
+
+  async function addMember(){
+    let email = prompt("追加するメンバーのメールアドレスを入力してください");
+    if(!email?.trim()) return;
+
+    if(members.data){
+      for(const m of members.data){
+        if(m.user?.email === email){
+          alert("そのメンバーはもう存在します");
+          return;
+        }
+      }
+    }
+    const users = await convex.query(api.users.getUsersByEmail, {email});
+    if(!users.length){
+      alert("ユーザーが見つかりませんでした");
+      return;
+    }
+    if(users.length > 1){
+      alert("同じメールアドレスで登録されている人物が複数確認されました。開発者に報告してください。");
+      return;
+    }
+    let message = "以下のユーザーが見つかりました\n" + users[0]?.name + "\n組織に追加しますか？";
+
+    const answer = confirm(message);
+    if(answer && users[0]){
+      convex.mutation(api.organizations.addMember, {
+        organizationId: organizationId,
+        userId: users[0]._id as Id<"users">,
+        permission: "member",
+      });
+    }
+  }
 </script>
 
 <div class="container mx-auto p-6">
@@ -143,7 +177,7 @@
         <div class="mb-4 flex items-center justify-between">
           <h2 class="card-title">メンバー</h2>
           {#if organization.data?.permission === "admin"}
-            <button class="btn btn-primary btn-sm"> メンバーを追加 </button>
+            <button class="btn btn-primary btn-sm" onclick={addMember}> メンバーを追加 </button>
           {/if}
         </div>
 

packages/convex/src/convex/users.ts

@@ -1,7 +1,7 @@
 import { getAuthUserId } from "@convex-dev/auth/server";
 import { v } from "convex/values";
 import type { Id } from "./_generated/dataModel";
-import { query } from "./_generated/server";
+import { query, mutation } from "./_generated/server";
 
 export const me = query({
   args: {},
@@ -64,3 +64,14 @@ export const getUserNicknames = query({
     return userNicknames;
   },
 });
+
+export const getUsersByEmail = query({
+  args: {
+    email: v.string(),
+  },
+  handler: async (ctx, args) => {
+    return await ctx.db.query("users")
+      .filter((q) => q.eq(q.field("email"), args.email))
+      .collect();;
+  }
+});