Make start.gg imports always temporary and switch to tournament select

src/dashboard/scoreko-dev/views/Players.vue

@@ -106,7 +106,8 @@ const loadingTournamentPlayers = ref(false);
 const selectedTournament = ref<StartGGTournament | null>(null);
 const startGGPlayers = ref<StartGGImportedPlayer[]>([]);
 const selectedStartGGPlayerIds = ref<string[]>([]);
-const importAsTemporary = ref(true);
+const selectedTournamentSlug = ref('');
+const tournamentInput = ref('');
 const temporaryStartGGPlayers = ref<TemporaryStartGGPlayersMap>({});
 let temporaryCleanupTimer: ReturnType<typeof setInterval> | null = null;
 
@@ -169,6 +170,41 @@ const loadTemporaryStartGGPlayers = (): TemporaryStartGGPlayersMap => {
   }
 };
 
+const tournamentOptions = computed(() =>
+  recentTournaments.value.map((tournament) => ({
+    label: tournament.name,
+    value: tournament.slug,
+    caption: tournament.slug,
+  })),
+);
+const filteredTournamentOptions = ref(tournamentOptions.value);
+
+watch(tournamentOptions, (value) => {
+  filteredTournamentOptions.value = value;
+  if (selectedTournamentSlug.value && !recentTournaments.value.some((item) => item.slug === selectedTournamentSlug.value)) {
+    selectedTournamentSlug.value = '';
+    tournamentInput.value = '';
+  }
+});
+
+const selectedTournamentOption = computed(() =>
+  recentTournaments.value.find((item) => item.slug === selectedTournamentSlug.value) ?? null,
+);
+
+const filterTournaments = (value: string, update: (callback: () => void) => void) => {
+  update(() => {
+    const needle = value.toLowerCase().trim();
+    if (!needle) {
+      filteredTournamentOptions.value = tournamentOptions.value;
+      return;
+    }
+
+    filteredTournamentOptions.value = tournamentOptions.value.filter((option) =>
+      option.label.toLowerCase().includes(needle) || option.caption.toLowerCase().includes(needle),
+    );
+  });
+};
+
 const sendNodeCGMessage = <T>(messageName: string, payload: unknown): Promise<T> =>
   new Promise((resolve, reject) => {
     nodecg.sendMessage(messageName, payload, (error, response) => {
@@ -298,7 +334,8 @@ const openStartGGImportDialog = async (tournament: StartGGTournament) => {
   isImportDialogOpen.value = true;
   loadingTournamentPlayers.value = true;
   selectedStartGGPlayerIds.value = [];
-  importAsTemporary.value = true;
+  selectedTournamentSlug.value = tournament.slug;
+  tournamentInput.value = tournament.name;
   startGGPlayers.value = [];
 
   try {
@@ -317,6 +354,14 @@ const openStartGGImportDialog = async (tournament: StartGGTournament) => {
   }
 };
 
+
+const openSelectedTournamentImportDialog = () => {
+  if (!selectedTournamentOption.value) {
+    return;
+  }
+  void openStartGGImportDialog(selectedTournamentOption.value);
+};
+
 const importSelectedStartGGPlayers = () => {
   const selectedPlayers = startGGPlayers.value.filter((player) =>
     selectedStartGGPlayerIds.value.includes(player.id),
@@ -336,14 +381,12 @@ const importSelectedStartGGPlayers = () => {
       twitter: player.twitter,
     });
 
-    if (importAsTemporary.value && tournament) {
+    if (tournament) {
       nextMeta[player.id] = {
         expiresAt,
         tournamentSlug: tournament.slug,
         tournamentName: tournament.name,
       };
-    } else {
-      delete nextMeta[player.id];
     }
   });
 
@@ -566,33 +609,50 @@ onBeforeUnmount(() => {
           >
             {{ tournamentsError }}
           </div>
-          <QList
-            v-if="recentTournaments.length"
-            bordered
-            separator
-            class="q-mt-md startgg-tournaments-list"
-          >
-            <QItem
-              v-for="tournament in recentTournaments"
-              :key="tournament.id"
-              clickable
+          <div class="row q-col-gutter-sm items-center q-mt-md">
+            <div class="col">
+              <QSelect
+                v-model="selectedTournamentSlug"
+                v-model:input-value="tournamentInput"
+                :options="filteredTournamentOptions"
+                option-value="value"
+                option-label="label"
+                emit-value
+                map-options
+                use-input
+                hide-selected
+                fill-input
+                input-debounce="0"
+                clearable
+                dense
+                label="Torneo"
+                class="players-underlined-field"
+                @filter="filterTournaments"
               >
+                <template #option="scope">
+                  <QItem v-bind="scope.itemProps">
                     <QItemSection>
-                <QItemLabel>{{ tournament.name }}</QItemLabel>
+                      <QItemLabel>{{ scope.opt.label }}</QItemLabel>
                       <QItemLabel caption>
-                  {{ tournament.slug }}
+                        {{ scope.opt.caption }}
                       </QItemLabel>
                     </QItemSection>
-              <QItemSection side>
+                  </QItem>
+                </template>
+              </QSelect>
+            </div>
+            <div
+              v-if="selectedTournamentOption"
+              class="col-auto"
+            >
               <QBtn
                 color="primary"
                 unelevated
                 label="Importar jugadores"
-                  @click.stop="openStartGGImportDialog(tournament)"
+                @click="openSelectedTournamentImportDialog"
               />
-              </QItemSection>
-            </QItem>
-          </QList>
+            </div>
+          </div>
         </QCard>
       </div>
     </div>
@@ -614,11 +674,6 @@ onBeforeUnmount(() => {
             <span>Cargando inscritos...</span>
           </div>
           <div v-else>
-            <QCheckbox
-              v-model="importAsTemporary"
-              label="Importar como temporales (se eliminan automáticamente al terminar el torneo)"
-              class="q-mb-sm"
-            />
             <QOptionGroup
               v-model="selectedStartGGPlayerIds"
               type="checkbox"