Add EventCard dropdown

availabili.tf/package-lock.json

@@ -17,6 +17,7 @@
         "moment": "^2.30.1",
         "moment-timezone": "^0.5.46",
         "pinia": "^2.2.4",
+        "radix-vue": "^1.9.10",
         "vue": "^3.5.12",
         "vue-router": "^4.4.5",
         "vue-select": "^4.0.0-beta.6",
@@ -786,6 +787,43 @@
       "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==",
       "license": "MIT"
     },
+    "node_modules/@floating-ui/vue": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.1.5.tgz",
+      "integrity": "sha512-ynL1p5Z+woPVSwgMGqeDrx6HrJfGIDzFyESFkyqJKilGW1+h/8yVY29Khn0LaU6wHBRwZ13ntG6reiHWK6jyzw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0",
+        "@floating-ui/utils": "^0.2.8",
+        "vue-demi": ">=0.13.0"
+      }
+    },
+    "node_modules/@floating-ui/vue/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.0",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.0.tgz",
@@ -838,6 +876,24 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
+    "node_modules/@internationalized/date": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.6.0.tgz",
+      "integrity": "sha512-+z6ti+CcJnRlLHok/emGEsWQhe7kfSmEW+/6qCzvKY67YPh7YOBfvc7+/+NXq+zJlbArg30tYpqLjNgcAYv2YQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "node_modules/@internationalized/number": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/@internationalized/number/-/number-3.6.0.tgz",
+      "integrity": "sha512-PtrRcJVy7nw++wn4W2OuePQQfTqDzfusSuY1QTtui4wa7r+rGVtR75pO8CyKvHvzyQYi3Q1uO5sY0AsB4e65Bw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -1243,6 +1299,41 @@
         "win32"
       ]
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.15",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
+      "integrity": "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
+    "node_modules/@tanstack/virtual-core": {
+      "version": "3.10.9",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.10.9.tgz",
+      "integrity": "sha512-kBknKOKzmeR7lN+vSadaKWXaLS0SZZG+oqpQ/k80Q6g9REn6zRHS/ZYdrIzHnpHgy/eWs00SujveUN/GJT2qTw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
+    "node_modules/@tanstack/vue-virtual": {
+      "version": "3.10.9",
+      "resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.10.9.tgz",
+      "integrity": "sha512-KU2quiwJQpA0sdflpXw24bhW+x8PG+FlrSJK3Ilobim671HNn4ztLVWUCEz3Inei4dLYq+GW1MK9X6i6ZeirkQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/virtual-core": "3.10.9"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "vue": "^2.7.0 || ^3.0.0"
+      }
+    },
     "node_modules/@tsconfig/node20": {
       "version": "20.1.4",
       "resolved": "https://registry.npmjs.org/@tsconfig/node20/-/node20-20.1.4.tgz",
@@ -1307,6 +1398,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.20",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.20.tgz",
+      "integrity": "sha512-g9gZnnXVq7gM7v3tJCWV/qw7w+KeOlSHAhgF9RytFyifW6AF61hdT2ucrYhPq9hLs5JIryeupHV3qGk95dH9ow==",
+      "license": "MIT"
+    },
     "node_modules/@types/yauzl": {
       "version": "2.10.3",
       "resolved": "https://registry.npmjs.org/@types/yauzl/-/yauzl-2.10.3.tgz",
@@ -1936,6 +2033,94 @@
         }
       }
     },
+    "node_modules/@vueuse/core": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.11.1.tgz",
+      "integrity": "sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.20",
+        "@vueuse/metadata": "10.11.1",
+        "@vueuse/shared": "10.11.1",
+        "vue-demi": ">=0.14.8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.11.1.tgz",
+      "integrity": "sha512-IGa5FXd003Ug1qAZmyE8wF3sJ81xGLSqTqtQ6jaVfkeZ4i5kS2mwQF61yhVqojRnenVew5PldLyRgvdl4YYuSw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "10.11.1",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.11.1.tgz",
+      "integrity": "sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==",
+      "license": "MIT",
+      "dependencies": {
+        "vue-demi": ">=0.14.8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.14.10",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+      "integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/abbrev": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-2.0.0.tgz",
@@ -2144,6 +2329,18 @@
       "dev": true,
       "license": "Python-2.0"
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.4.tgz",
+      "integrity": "sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/asn1": {
       "version": "0.2.6",
       "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.6.tgz",
@@ -3143,6 +3340,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/defu": {
+      "version": "6.1.4",
+      "resolved": "https://registry.npmjs.org/defu/-/defu-6.1.4.tgz",
+      "integrity": "sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==",
+      "license": "MIT"
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -3768,7 +3971,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/fast-diff": {
@@ -6167,6 +6369,46 @@
       ],
       "license": "MIT"
     },
+    "node_modules/radix-vue": {
+      "version": "1.9.10",
+      "resolved": "https://registry.npmjs.org/radix-vue/-/radix-vue-1.9.10.tgz",
+      "integrity": "sha512-+4+J1v5A+4wbkyVr7VcjR1Zpm3K2hWJQCLgAiHSdrISaj+hPqYSeppP4yTnXQAI4B99myyihxkiC63YhTuvFBw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.6.7",
+        "@floating-ui/vue": "^1.1.0",
+        "@internationalized/date": "^3.5.4",
+        "@internationalized/number": "^3.5.3",
+        "@tanstack/vue-virtual": "^3.8.1",
+        "@vueuse/core": "^10.11.0",
+        "@vueuse/shared": "^10.11.0",
+        "aria-hidden": "^1.2.4",
+        "defu": "^6.1.4",
+        "fast-deep-equal": "^3.1.3",
+        "nanoid": "^5.0.7"
+      },
+      "peerDependencies": {
+        "vue": ">= 3.2.0"
+      }
+    },
+    "node_modules/radix-vue/node_modules/nanoid": {
+      "version": "5.0.9",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.0.9.tgz",
+      "integrity": "sha512-Aooyr6MXU6HpvvWXKoVoXwKMs/KyVakWwg7xQfv5/S/RIgJMy0Ifa45H9qqYy7pTCszrHzP21Uk4PZq2HpEM8Q==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.js"
+      },
+      "engines": {
+        "node": "^18 || >=20"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -7015,7 +7257,6 @@
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.0.tgz",
       "integrity": "sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA==",
-      "dev": true,
       "license": "0BSD"
     },
     "node_modules/tunnel-agent": {

availabili.tf/package.json

@@ -24,6 +24,7 @@
     "moment": "^2.30.1",
     "moment-timezone": "^0.5.46",
     "pinia": "^2.2.4",
+    "radix-vue": "^1.9.10",
     "vue": "^3.5.12",
     "vue-router": "^4.4.5",
     "vue-select": "^4.0.0-beta.6",

availabili.tf/src/assets/base.css

@@ -44,6 +44,8 @@
   --peach: #fe640b;
   --green: #40a02b;
   --yellow: #df8e1d;
+
+  --destructive: var(--flamingo);
   /*
   --green: #a6e3a1;
   --yellow: #f9e2af;
@@ -94,6 +96,7 @@
   --base: #24273a;
   --mantle: #1e2030;
   --crust: #181926;
+  --destructive: var(--red);
 */
 }
 

availabili.tf/src/assets/main.css

@@ -75,7 +75,7 @@ button > i.bi {
 }
 
 button > i.bi.margin {
-  margin-right: 4px;
+  margin-right: 0.5em;
 }
 
 i.bi.margin {
@@ -98,12 +98,12 @@ button.accent.dark {
 }
 
 button.destructive {
-  background-color: var(--flamingo);
+  background-color: var(--destructive);
   color: var(--base);
 }
 
 button.destructive-on-hover:hover {
-  background-color: var(--flamingo);
+  background-color: var(--destructive);
   color: var(--base);
 }
 
@@ -266,3 +266,50 @@ hr {
   border: none;
   border-top: 1px solid var(--surface-0);
 }
+
+.shadow {
+  /*box-shadow: 0 0 4px var(--text);*/
+}
+
+div[role="menu"] {
+  background-color: var(--base);
+  border: 1px solid var(--overlay-0);
+  border-radius: 4px;
+  padding: 4px 0 4px 0;
+  min-width: 8rem;
+}
+
+div[role="menu"] button {
+  background-color: var(--base);
+  width: 100%;
+  border-radius: 0;
+}
+
+div[role="menu"] button.destructive {
+  color: var(--destructive);
+}
+
+div[role="menu"] button.destructive:hover {
+  background-color: var(--destructive);
+  color: var(--base);
+}
+
+div[role="menu"] button > i.bi.margin {
+  margin-right: 0.5em;
+}
+/*
+div[role="menu"] div[role="menuitem"]:first-child button {
+  border-top-left-radius: var(--border-radius);
+  border-top-right-radius: var(--border-radius);
+}
+
+div[role="menu"] div[role="menuitem"]:last-child button {
+  border-bottom-left-radius: var(--border-radius);
+  border-bottom-right-radius: var(--border-radius);
+}
+*/
+
+div[role="menu"] button:hover {
+  background-color: var(--surface-0);
+  width: 100%;
+}

availabili.tf/src/components/EventCard.vue

@@ -5,8 +5,7 @@ import { useTeamsStore } from "@/stores/teams";
 import { useTeamsEventsStore } from "@/stores/teams/events";
 import moment from "moment";
 import { computed } from "vue";
-import { RouterLink } from "vue-router";
+import EventCardDropdown from "./EventCardDropdown.vue";
-
 const teamsStore = useTeamsStore();
 const rosterStore = useRosterStore();
 const teamEventsStore = useTeamsEventsStore();
@@ -27,10 +26,22 @@ const shortMonth = computed(() => {
   return date.value.format("MMM");
 });
 
+const teamId = computed(() => props.event.event.teamId);
+
 const props = defineProps<{
   event: EventWithPlayerSchema;
 }>();
 
+function deleteEvent() {
+  teamEventsStore.deleteEvent(props.event.event.id)
+    .then(() => {
+      // remove event from list
+      // TODO: move this to the store
+      let idx = teamEventsStore.teamEvents[teamId.value].indexOf(props.event);
+      teamEventsStore.teamEvents[teamId.value].splice(idx, 1);
+    });
+}
+
 function attend() {
   teamEventsStore.attendEvent(props.event.event.id);
 }
@@ -60,7 +71,10 @@ function attendOrUnattend() {
     </div>
     <div class="details">
       <div>
-        <h3>{{ event.event.name }}</h3>
+        <div class="header">
+          <h3>{{ event.event.name }}</h3>
+          <EventCardDropdown :event="event" @deleteEvent="deleteEvent" />
+        </div>
         <div>
           <span>
             <i class="bi bi-clock-fill margin" />
@@ -73,15 +87,6 @@ function attendOrUnattend() {
         <em v-else class="subtext">No description provided.</em>
       </div>
       <div class="button-group">
-        <RouterLink class="button" :to="{
-          name: 'roster-builder-event',
-          params: { eventId: event.event.id }
-        }">
-          <button>
-            <i class="bi bi-pencil" />
-            Edit
-          </button>
-        </RouterLink>
         <button
           @click="attendOrUnattend()"
           v-if="event.playerEvent"
@@ -112,6 +117,15 @@ function attendOrUnattend() {
 </template>
 
 <style scoped>
+h3 {
+  display: inline-block;
+  font-weight: 700;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 14pt;
+}
+
 .event-card {
   display: flex;
   align-items: center;
@@ -174,6 +188,12 @@ function attendOrUnattend() {
   justify-content: flex-end;
 }
 
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
 button.confirmed {
   background-color: var(--text);
   color: var(--base);

availabili.tf/src/components/EventCardDropdown.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { EventWithPlayerSchema } from '@/client';
+import { RouterLink } from "vue-router";
+import {
+  DropdownMenuRoot,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuPortal,
+} from "radix-vue";
+
+
+defineProps<{
+  event: EventWithPlayerSchema;
+}>();
+
+const emit = defineEmits<{
+  deleteEvent: []
+}>();
+</script>
+
+<template>
+  <DropdownMenuRoot>
+    <DropdownMenuTrigger className="icon">
+      <i class="bi bi-three-dots" />
+    </DropdownMenuTrigger>
+    <DropdownMenuPortal>
+      <DropdownMenuContent className="shadow">
+        <DropdownMenuItem>
+          <RouterLink class="button" :to="{
+            name: 'roster-builder-event',
+            params: { eventId: event.event.id }
+          }">
+            <button>
+              <i class="bi bi-pencil margin" />
+              Edit
+            </button>
+          </RouterLink>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <button class="destructive" @click="emit('deleteEvent')">
+            <i class="bi bi-trash margin" />
+            Delete
+          </button>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenuPortal>
+  </DropdownMenuRoot>
+</template>

availabili.tf/src/stores/teams/events.ts

@@ -53,9 +53,14 @@ export const useTeamsEventsStore = defineStore("teamsEvents", () => {
       });
   }
 
+  function deleteEvent(eventId: number) {
+    // TODO: implement
+  }
+
   return {
     teamEvents,
     fetchTeamEvents,
+    deleteEvent,
     attendEvent,
     unattendEvent,
   }

package-lock.json

@@ -0,0 +1,21 @@
+{
+  "name": "availabili.tf",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "v-dropdown-menu": "^2.0.4"
+      }
+    },
+    "node_modules/v-dropdown-menu": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/v-dropdown-menu/-/v-dropdown-menu-2.0.4.tgz",
+      "integrity": "sha512-YPHnx29YWVSdRO8IZcIKNCmSx2jFOkU/5Jyv8pN7P/z2Jif/L6Xto3J29LwIhday1zwMI5sjmU5bNMbBnmdg0A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    }
+  }
+}