filter out past sessions in calendar view

Playabl-io · Dec 10, 2023 · 04de71e · 04de71e
1 parent 0e4ebb9
commit 04de71e
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 5 deletions.
diff --git a/src/components/Menus/SortMenu.vue b/src/components/Menus/SortMenu.vue
@@ -2,7 +2,7 @@
   <Listbox :model-value="modelValue" @update:model-value="emitValueUpdate">
     <div class="relative">
       <ListboxButton
-        class="relative h-10 w-full py-2 pl-3 pr-10 text-left bg-gray-200 bg-opacity-70 hover:bg-opacity-100 text-slate-900 rounded-xl cursor-default focus-styles"
+        class="relative h-10 w-full py-2 pl-3 pr-10 text-left bg-white border border-solid border-gray-200 bg-opacity-70 hover:bg-opacity-100 text-slate-900 rounded-xl cursor-default focus-styles"
       >
         {{ modelValue.label }}
         <span

diff --git a/src/pages/Community/CommunityCalendar.vue b/src/pages/Community/CommunityCalendar.vue
@@ -5,7 +5,7 @@
       <div class="items-center relative">
         <Menu>
           <MenuButton
-            class="border border-solid border-gray-200 bg-gray-200 bg-opacity-70 hover:bg-opacity-100 transition-all rounded-md h-10 w-10 grid place-content-center"
+            class="border border-solid border-gray-200 bg-white bg-opacity-70 hover:bg-opacity-100 transition-all rounded-md h-10 w-10 grid place-content-center"
           >
             <AdjustmentsHorizontalIcon class="h-6 w-6" />
           </MenuButton>
@@ -56,6 +56,23 @@
                   Hide games I'm in
                 </FormLabel>
               </MenuItem>
+              <MenuItem v-slot="{ active }">
+                <FormLabel
+                  class="font-normal p-2 flex items-center gap-2 rounded-md"
+                  :class="{
+                    'bg-gray-200 bg-opacity-50': active,
+                  }"
+                  no-margin
+                >
+                  <input
+                    id="include-completed"
+                    v-model="includeCompleted"
+                    type="checkbox"
+                    class="text-brand-500 rounded-md shadow-sm border border-gray-300 dark:bg-slate-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-700 dark:focus-visible:ring-sky-500"
+                  />
+                  Include finished sessions
+                </FormLabel>
+              </MenuItem>
             </MenuItems>
           </transition>
         </Menu>
@@ -118,7 +135,14 @@
 </template>
 <script setup lang="ts">
 import { onMounted, ref, watch, computed } from "vue";
-import { startOfMonth, endOfMonth, addMonths, format, parse } from "date-fns";
+import {
+  startOfMonth,
+  endOfMonth,
+  addMonths,
+  format,
+  parse,
+  isAfter,
+} from "date-fns";
 import {
   TabGroup,
   TabList,
@@ -144,9 +168,11 @@ import { store } from "@/store";
 import * as R from "ramda";
 import { useRoute, useRouter } from "vue-router";
 import { sessionWithGame } from "../IndexPage.vue";
+import { useNow } from "@vueuse/core";
 
 const route = useRoute();
 const router = useRouter();
+const now = useNow();
 
 const options = [
   {
@@ -186,6 +212,7 @@ const sessionsByGame = computed(() => {
 
 const excludeOwnGames = ref(false);
 const excludeRsvpdGames = ref(false);
+const includeCompleted = ref(false);
 
 const filteredSessions = computed(() => {
   let filteredSessions = sessions.value;
@@ -199,6 +226,11 @@ const filteredSessions = computed(() => {
       (session) => !session.rsvps.includes(store.user?.id || ""),
     );
   }
+  if (!includeCompleted.value) {
+    filteredSessions = filteredSessions.filter((session) =>
+      isAfter(new Date(session.start_time), now.value),
+    );
+  }
   return filteredSessions;
 });
 

diff --git a/src/pages/Community/ListView.vue b/src/pages/Community/ListView.vue
@@ -19,13 +19,35 @@
         :is="view === 'tile' ? SecondaryButton : GhostButton"
         @click="view = 'tile'"
       >
-        <Squares2X2Icon class="h-5 w-5 text-slate-700" />
+        <Tooltip>
+          <template #trigger="{ toggleTooltip }">
+            <Squares2X2Icon
+              class="h-5 w-5 text-slate-700"
+              @mouseenter="toggleTooltip"
+              @mouseleave="toggleTooltip"
+              @focus="toggleTooltip"
+              @blur="toggleTooltip"
+            />
+          </template>
+          <template #tooltip> Display as cards </template>
+        </Tooltip>
       </component>
       <component
         :is="view === 'list' ? SecondaryButton : GhostButton"
         @click="view = 'list'"
       >
-        <ListBulletIcon class="h-5 w-5 text-slate-700" />
+        <Tooltip>
+          <template #trigger="{ toggleTooltip }">
+            <ListBulletIcon
+              class="h-5 w-5 text-slate-700"
+              @mouseenter="toggleTooltip"
+              @mouseleave="toggleTooltip"
+              @focus="toggleTooltip"
+              @blur="toggleTooltip"
+            />
+          </template>
+          <template #tooltip> Display as list </template>
+        </Tooltip>
       </component>
     </div>
     <ul
@@ -74,6 +96,7 @@ import SecondaryButton from "@/components/Buttons/SecondaryButton.vue";
 import MiniGameItem from "./MiniGameItem.vue";
 import ListViewItem from "./ListViewItem.vue";
 import { sessionWithGame } from "../IndexPage.vue";
+import Tooltip from "@/components/Tooltip.vue";
 
 const props = defineProps({
   sessions: {