Add country dropdown and flags (#28)

* Add country dropdown and flags

* Fix build for country flags

* Improve country select filtering and scoreboard teams

* Fix country select display value

* Fix country select input display

src/dashboard/example/views/Players.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { useHead } from '@unhead/vue';
 import type { QTableColumn } from 'quasar';
-import { computed, reactive, ref } from 'vue';
+import { computed, reactive, ref, watch } from 'vue';
 import type { Schemas } from '../../../types';
+import { countryOptions, getCountryLabel } from '../../../shared/countries';
 import { usePlayersStore } from '../stores/players';
 
 useHead({ title: 'Players' });
@@ -38,11 +39,40 @@ const form = reactive<Player>({ ...emptyPlayer });
 const columns: QTableColumn<PlayerRow>[] = [
   { name: 'gamertag', label: 'Gamertag', field: 'gamertag', sortable: true, align: 'left' },
   { name: 'team', label: 'Team', field: 'team', sortable: true, align: 'left' },
-  { name: 'country', label: 'Country', field: 'country', sortable: true, align: 'left' },
+  {
+    name: 'country',
+    label: 'Country',
+    field: (row) => getCountryLabel(row.country),
+    sortable: true,
+    align: 'left',
+  },
   { name: 'twitter', label: 'Twitter', field: 'twitter', sortable: true, align: 'left' },
   { name: 'actions', label: 'Actions', field: (row) => row.id, sortable: false, align: 'right' },
 ];
 
+const filteredCountryOptions = ref(countryOptions);
+const countryInput = ref('');
+const filterCountries = (value: string, update: (callback: () => void) => void) => {
+  update(() => {
+    const needle = value.toLowerCase().trim();
+    if (!needle) {
+      filteredCountryOptions.value = countryOptions;
+      return;
+    }
+    filteredCountryOptions.value = countryOptions.filter((country) =>
+      country.label.toLowerCase().includes(needle),
+    );
+  });
+};
+
+watch(
+  () => form.country,
+  (value) => {
+    countryInput.value = getCountryLabel(value);
+  },
+  { immediate: true },
+);
+
 const generateId = () => {
   if (typeof crypto !== 'undefined' && 'randomUUID' in crypto) {
     return crypto.randomUUID();
@@ -219,8 +249,20 @@ const handleImport = async (event: Event) => {
                 />
               </div>
               <div class="col-12 col-md-6">
-                <QInput
+                <QSelect
                   v-model="form.country"
+                  v-model:input-value="countryInput"
+                  :options="filteredCountryOptions"
+                  option-value="value"
+                  option-label="label"
+                  emit-value
+                  map-options
+                  use-input
+                  input-debounce="0"
+                  hide-selected
+                  fill-input
+                  @filter="filterCountries"
+                  clearable
                   label="Country"
                   dense
                   outlined