Add use event composable

.gitignore

@@ -27,5 +27,4 @@ logs
 sw.*
 
 # Other
-bun.lockb
 package-lock.json

components/FilterMultiSelect.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+const emit = defineEmits(['update:modelValue'])
+/*
+  Model Value => The selected filters, each containing an id, their content, and optionally if they are user created
+  Options => Pre-programmed filter options, each with an id and content
+  Extra options => Guidelines for user creation of filters. Array of strings. Becomes a button with extraOption ': ' user input
+  Search Placeholder => placeholder for search (user input). defaults to "Search or Add Filter"
+  Filter Placeholder => placeholder for filter (dropdown button). defaults to "Edit Filters"
+ */
+const props = defineProps<{
+  modelValue: Array<{ id: number, content: string, custom?: boolean}>,
+  options: Array<{ id: number, content: string, custom?: boolean}>,
+  extraOptions?: Array<string>
+  searchPlaceholder?: string,
+  filterPlaceholder?: string,
+}>()
+
+const value = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    for(let option of props.options){
+      let optionSelected = false
+      for(let selectedOption of value){
+        if(option.id == selectedOption.id)
+          optionSelected = true
+      }
+      if(!optionSelected && option.custom != undefined && option.custom){
+        props.options.splice(props.options.indexOf(option, 1))
+      }
+    }
+    for(let selectedOption of value){
+      if(!props.options.includes(selectedOption)){
+        let optionExists = false
+        for(let option in props.options){
+          if(props.options[2].id == selectedOption.id){
+            optionExists = true
+          }
+        }
+        if(!optionExists){
+          props.options.push(selectedOption)
+
+        }
+      }
+    }
+    emit('update:modelValue', value)
+  }
+})
+
+let dropdownVariants = ref<Array<string>>()
+if(props.extraOptions) {
+  dropdownVariants = ref(Array(props.extraOptions.length)
+      .fill("")
+      .map(
+          () => "ghost"
+      ))
+}
+
+function addFilter(filterOption: string, index: number, query: string){
+  let customFilter = { id: props.options.length + 1, content: filterOption + ': ' +  query, custom: true}
+  props.options.push(customFilter)
+  let currentVal = value.value
+  currentVal.push(customFilter)
+  value.value = currentVal
+}
+
+</script>
+
+<template>
+    <USelectMenu
+        v-model="value"
+        by="id"
+        :options="props.options"
+        option-attribute="content"
+        multiple
+        searchable
+        :searchable-placeholder="searchPlaceholder != undefined ? searchPlaceholder: 'Search or Add Filter'"
+    >
+      <template #default>
+        <UButton color="gray" class="flex-1 justify-between min-h-9">
+          <span class="text-slate-600" v-if="value.length == 0">{{filterPlaceholder != undefined ? filterPlaceholder: 'Edit Filters'}}</span>
+          <div>
+            <UBadge class="mr-1 pl-2.5 pr-2.5" v-for="filter in value" :label="filter.content" color="white" :ui="{ rounded: 'rounded-full' }"></UBadge>
+          </div>
+          <UIcon name="i-heroicons-adjustments-horizontal" class="w-5 h-5 transition-transform text-gray-400 dark:text-gray-500" :class="[open && 'transform rotate-90']" />
+        </UButton>
+      </template>
+      <template #option-empty="{ query }" class="w-full">
+        <UButton v-for="(option, index) in props.extraOptions" :label="'add \'' + option + ': ' + query + '\''" :variant="dropdownVariants[index]" color="gray" @mouseover="dropdownVariants[index] = 'soft'" @mouseleave="dropdownVariants[index] = 'ghost'" @click="addFilter(option, index, query)"></UButton>
+      </template>
+    </USelectMenu>
+</template>
+
+<style scoped>
+
+</style>

components/IncrementalButton.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+/*
+Model Value: the number selected
+Max Value: the maximum value possible
+(implied min value): must be above 0, can be changed in code below if need be
+ */
 const props = defineProps<{
   modelValue: number,
   maxValue?: number,

components/MultiSelect.vue

@@ -1,6 +1,12 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 const emit = defineEmits(['update:modelValue'])
+/*
+Model Value: Array of numbers => 1 is selected, 0 is not selected
+Options: Array of strings => the labels for the buttons
+Connected Options: Array of numbers => matches the amount of buttons,
+ if two buttons have the same number in this array they can be selected at the same time
+ */
 const props = defineProps<{
   modelValue: Array<number>,
   options: Array<String>,

components/Navbar.vue

@@ -2,7 +2,7 @@
 import LoginState from "~/utils/authorization/LoginState";
 import {loginStateKey} from "~/utils/keys";
 import SessionResponse = PouchDB.Authentication.SessionResponse;
-
+import {eventOptions} from "~/utils/eventOptions";
 const {usernameState, sessionState, logout}: {
   logout: () => Promise<void>;
   // noinspection TypeScriptUnresolvedReference
@@ -14,6 +14,11 @@ const {usernameState, sessionState, logout}: {
   updateUsernameState: () => Promise<boolean>
 } = inject(loginStateKey)!
 
+const events = eventOptions
+let selectedEvent = ref(localStorage.getItem('currentEvent') || eventOptions[0])
+watch(selectedEvent, (value) => {
+  window.localStorage.setItem('currentEvent', value)
+})
 let props = defineProps({
   scoutMode: {
     type: Boolean,
@@ -33,72 +38,64 @@ let links: VerticalNavigationLink[] = [
   { label: "Dashboard", to: "/dashboard" },
   { label: "Matches", to: "/matches" },
   { label: "Teams", to: "/teams" },
-  { label: "Competitions", to: "/competitions" },
   { label: "Attachments", to: "/attachments" },
-  { label: "Contacts", to: "/contacts" }
 ]
 console.log(sessionState?.value?.userCtx?.roles)
 if (sessionState?.value?.userCtx?.roles?.indexOf('_admin') != -1)
   links.push({ label: "Users", to: "/users" })
 
-const events = ['2024test', '2024trial']
-
-let selectedEvent = ref(window.localStorage.getItem("event"))
-
-function updateEvent(value: string){
-  window.localStorage.setItem("event", value)
-}
 </script>
 
 <template>
-  <div class="py-2.5 px-5 z-10 bg-opacity-50 bg-gray-200 dark:bg-gray-700 w-screen navbar-right sticky top-0 flex-row justify-between backdrop-blur-lg">
-    <div class="flex">
+  <div v-if="!disableSidebar" class="py-2.5 px-5 z-10 bg-opacity-50 bg-gray-200 dark:bg-gray-700 w-screen navbar-right sticky top-0 flex-row justify-between backdrop-blur-lg min-h-16">
       <Transition name="slide-fade">
-        <UButton class="slide-nothing" v-if="!disableSidebar" icon="i-heroicons-bars-3-20-solid" variant="ghost" @click="isOpen=!isOpen" :size="scoutMode?'sm':'xl'" square/>
+          <UButton class="slide-nothing" v-if="!disableSidebar" icon="i-heroicons-bars-3-20-solid" variant="ghost" @click="isOpen=!isOpen" :size="'xl'" square style="position:absolute; top:50%; transform: translateY(-50%)"/>
       </Transition>
-      <UPopover style="right: 1%; position: absolute;top: 50%;transform: translateY(-50%);">
-        <UButton variant="ghost">
-          <UAvatar v-if="usernameState!==undefined" :alt="usernameState" :size="scoutMode?'xs':'md'" class="m-1"/>
-        </UButton>
-        <template #panel>
-          <UCard class="p-2">
-            <template #header>
-              {{usernameState}}
-            </template>
-            <UFormGroup class="inputDiv" label="Event" name="event">
-              <USelectMenu v-model="selectedEvent" :options="events" @update:model-value ="value => {updateEvent(value)}"/>
-            </UFormGroup>
-            <template #footer>
-              <UButton block label="Logout" square @click="logout"/>
-            </template>
-          </UCard>
-        </template>
-      </UPopover>
-    </div>
   </div>
   <USlideover v-model="isOpen" side="left" :appear="!disableSidebar">
     <UCard class="flex flex-col h-screen">
       <template #header>
-        <UButton icon="i-heroicons-bars-3-20-solid" variant="ghost" @click="isOpen=!isOpen" :size="scoutMode?'sm':'xl'"/>
+        <UButton icon="i-heroicons-bars-3-20-solid" variant="ghost" @click="isOpen=!isOpen" :size="'xl'"/>
       </template>
       <UVerticalNavigation :links="links"/>
+      <div class="settingsPopupDiv">
+        <UPopover>
+          <UButton icon="i-heroicons-cog-6-tooth" square :size="'xl'" :variant="'ghost'" :color="'gray'"/>
+          <template #panel>
+            <UCard class="p-2">
+              <template #header>
+                <div class="usernameLabel max-w-32 text-zinc-900">
+                  {{usernameState}}
+                </div>
+              </template>
+              <UFormGroup class="inputDiv" label="Event" name="event">
+                <USelectMenu v-model="selectedEvent" :options="events" @update:v-model="(value) => updateEvent(value)"/>
+              </UFormGroup>
+              <template #footer>
+                <UButton block label="Logout" square @click="logout"/>
+              </template>
+            </UCard>
+          </template>
+        </UPopover>
+      </div>
     </UCard>
   </USlideover>
 </template>
 
 <style scoped>
-.slide-fade-enter-active,
-.slide-fade-leave-active {
-  transition: all 0.3s ease-in-out;
+
+.slide-nothing {
+  transform: translateX(0%);
 }
 
-.slide-fade-enter-from,
-.slide-fade-leave-to {
-  transform: translateX(-100%) !important;
-  opacity: .5;
+.usernameLabel{
+  overflow:hidden
 }
 
-.slide-nothing {
-  transform: translateX(0%);
+.settingsPopupDiv{
+  position:absolute;
+  left:4%;
+  bottom: 2%
 }
+
 </style>