feat: add filter for team and org

Signed-off-by: Dup4 <lyuzhi.pan@gmail.com>

packages/apps/board/src/components/board/SubmissionsTable.vue

@@ -1,10 +1,17 @@
 <script setup lang="ts">
-import type { Rank, Submissions } from "@xcpcio/core";
+import { MultiSelect } from "vue-search-select";
+
+import type { Rank, SelectOptionItem, Submissions } from "@xcpcio/core";
 import { Submission } from "@xcpcio/core";
 import { SubmissionStatusToString } from "@xcpcio/types";
 
 import { Pagination } from "~/composables/pagination";
 
+interface FilterOptions {
+  orgNames: string[];
+  teamIds: string[];
+}
+
 const props = defineProps<{
   rank: Rank,
   submissions: Submissions,
@@ -13,11 +20,89 @@ const props = defineProps<{
 }>();
 
 const rank = computed(() => props.rank);
+
+const filterOptions = ref<FilterOptions>({ orgNames: [], teamIds: [] });
+
+const orgOptions = computed(() => {
+  const res = rank.value.organizations.map((o) => {
+    return {
+      value: o,
+      text: o,
+    };
+  });
+
+  return res;
+});
+
+const orgSelectedItems = ref<Array<SelectOptionItem>>([]);
+const orgLastSelectItem = ref({});
+
+function orgOnSelect(selectedItems: Array<SelectOptionItem>, lastSelectItem: SelectOptionItem) {
+  orgSelectedItems.value = selectedItems;
+  orgLastSelectItem.value = lastSelectItem;
+}
+
+const teamsOptions = computed(() => {
+  const res = rank.value.originTeams.map((t) => {
+    return {
+      value: t.id,
+      text: t.organization ? `${t.name} - ${t.organization}` : t.name,
+    };
+  });
+
+  return res;
+});
+
+const teamsSelectedItems = ref<Array<SelectOptionItem>>([]);
+const teamsLastSelectItem = ref({});
+
+function teamsOnSelect(selectedItems: Array<SelectOptionItem>, lastSelectItem: SelectOptionItem) {
+  teamsSelectedItems.value = selectedItems;
+  teamsLastSelectItem.value = lastSelectItem;
+}
+
 const submissions = computed(() => {
-  const s = props.submissions;
-  return s.sort(Submission.compare).reverse();
+  const ss = props.submissions;
+  return ss.filter((s) => {
+    const o = filterOptions.value;
+
+    if (o.orgNames.length === 0 && o.teamIds.length === 0) {
+      return true;
+    }
+
+    if (o.teamIds.length > 0) {
+      for (const t of o.teamIds) {
+        if (t === s.teamId) {
+          return true;
+        }
+      }
+    }
+
+    if (o.orgNames.length > 0) {
+      const team = rank.value.teamsMap.get(s.teamId);
+      for (const n of o.orgNames) {
+        if (n === team?.organization) {
+          return true;
+        }
+      }
+    }
+
+    return false;
+  }).sort(Submission.compare).reverse();
 });
 
+function onFilter() {
+  const newFilterOptions: FilterOptions = {
+    orgNames: [],
+    teamIds: [],
+  };
+
+  newFilterOptions.orgNames = orgSelectedItems.value.map(o => o.value);
+  newFilterOptions.teamIds = teamsSelectedItems.value.map(t => t.value);
+
+  filterOptions.value = newFilterOptions;
+}
+
 const p = ref(new Pagination());
 
 p.value.currentPage = 0;
@@ -69,78 +154,63 @@ function getProblemLabelColorStyle(s: Submission) {
 <template>
   <section>
     <div
-      class="mx-auto w-full"
+      mx-auto w-full
       px-4
     >
       <div
-        class="relative overflow-hidden bg-white dark:bg-gray-800"
+        relative overflow-hidden
+        bg-white dark:bg-gray-800
         :class="{
           'shadow-md': props.removeBorder !== true,
           'sm:rounded-sm': props.removeBorder !== true,
         }"
       >
         <div
-          class="lg:flex-row lg:items-center lg:justify-between space-y-3 lg:space-x-4 lg:space-y-0"
+          space-y-3
           flex flex-col
           px-4 py-3
+          lg:flex-row lg:items-center lg:justify-between
+          lg:space-x-4 lg:space-y-0
         >
           <div
-            class="flex flex-shrink-0 flex-col md:flex-row md:items-center lg:justify-end space-y-3 md:space-x-3 md:space-y-0"
+            flex flex-shrink-0 flex-col
+            md:flex-row md:items-center
+            lg:justify-end space-y-3
+            md:space-x-3 md:space-y-0
           >
-            <button
-              v-if="notShowing"
-              type="button"
-              class="flex items-center justify-center rounded-lg bg-primary-700 px-4 py-2 text-sm font-medium text-white dark:bg-primary-600 hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
+            <div
+              v-if="rank.contest.organization"
+              w-48
             >
-              <svg
-                class="mr-2 h-3.5 w-3.5"
-                fill="currentColor"
-                viewbox="0 0 20 20"
-                xmlns="http://www.w3.org/2000/svg"
-                aria-hidden="true"
-              >
-                <path
-                  clip-rule="evenodd"
-                  fill-rule="evenodd"
-                  d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
-                />
-              </svg>
-              Add new product
-            </button>
+              <MultiSelect
+                :options="orgOptions"
+                :selected-options="orgSelectedItems"
+                :placeholder="rank.contest.organization"
+                @select="orgOnSelect"
+              />
+            </div>
 
-            <button
-              v-if="notShowing"
-              type="button"
-              class="flex flex-shrink-0 items-center justify-center border border-gray-200 rounded-lg bg-white px-3 py-2 text-sm font-medium text-gray-900 focus:z-10 dark:border-gray-600 dark:bg-gray-800 hover:bg-gray-100 dark:text-gray-400 hover:text-primary-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
+            <div
+              w-48
             >
-              <svg
-                class="mr-2 h-4 w-4"
-                xmlns="http://www.w3.org/2000/svg"
-                aria-hidden="true"
-                fill="none"
-                viewbox="0 0 24 24"
-                stroke-width="1.5"
-                stroke="currentColor"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"
-                />
-              </svg>
-              Update stocks 1/250
-            </button>
+              <MultiSelect
+                :options="teamsOptions"
+                :selected-options="teamsSelectedItems"
+                placeholder="Team"
+                @select="teamsOnSelect"
+              />
+            </div>
 
             <button
-              v-if="notShowing"
               type="button"
               class="flex flex-shrink-0 items-center justify-center border border-gray-200 rounded-lg bg-white px-3 py-2 text-sm font-medium text-gray-900 focus:z-10 dark:border-gray-600 dark:bg-gray-800 hover:bg-gray-100 dark:text-gray-400 hover:text-primary-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"
+              @click="onFilter"
             >
               <div
-                i-pajamas-export
-                class="mr-2 h-4 w-4"
+                i-material-symbols-search
+                mr-1 h-5 w-5
               />
-              Export
+              Filter
             </button>
           </div>
         </div>