ui fixes, calendar

src/components/NavigationMenu.vue

@@ -19,8 +19,13 @@ const menu = ref([
     props: { prependIcon: 'mdi-list-status', to: '/issues', requiresAuth: true },
   },
   {
-    title: 'Games',
+    title: 'Calendar',
     value: 3,
+    props: { prependIcon: 'mdi-calendar', to: '/calendar', requiresAuth: true },
+  },
+  {
+    title: 'Games',
+    value: 4,
     props: { prependIcon: 'mdi-view-dashboard', to: '/games', requiresAuth: false },
   },
 ])

src/components/StatusFilter.vue

@@ -24,21 +24,13 @@ watch(
   <v-btn-toggle
     v-model="selected"
     divided
+    border
     size="default"
     density="comfortable"
-    variant="flat"
+    variant="text"
     @update:model-value="onUpdate"
   >
-    <v-btn
-      border
-      slim
-      v-for="el in statusStore.statuses"
-      :color="el.color"
-      :value="el.alias"
-      :key="el.alias"
-      rounded="0"
-    >
-      <!--      <v-icon :icon="icons.get(el.alias)" class="mr-1" />-->
+    <v-btn slim v-for="el in statusStore.statuses" :color="el.color" :value="el.alias" :key="el.alias" rounded="0">
       <div class="text-default">{{ el.name }}</div>
     </v-btn>
   </v-btn-toggle>

src/router/calendar.ts

@@ -0,0 +1,8 @@
+import type { RouteRecordRaw } from 'vue-router'
+import CalendarView from '@/views/calendar/CalendarView.vue'
+
+export const calendarRoutes: RouteRecordRaw = {
+  path: '/calendar',
+  component: CalendarView,
+  meta: { requiresAuth: true },
+}

src/router/index.ts

@@ -8,6 +8,7 @@ import SignInView from '@/views/users/SignInView.vue'
 import { authClient } from '@/lib/auth-client.ts'
 import { gamesRoutes } from '@/router/games.ts'
 import { settingsRoutes } from '@/router/settings.ts'
+import { calendarRoutes } from '@/router/calendar.ts'
 
 declare module 'vue-router' {
   interface RouteMeta {
@@ -47,6 +48,7 @@ const router = createRouter({
       meta: { requiresAuth: true },
     },
     issuesRoutes,
+    calendarRoutes,
     gamesRoutes,
     settingsRoutes,
   ],

src/views/HomeView.vue

@@ -126,7 +126,7 @@ function onClickCard(status?: string) {
 
 <template>
   <div>
-    <div v-if="session.data" class="d-flex flex-column ga-4">
+    <div v-if="session.data" class="d-flex flex-column ga-2">
       <project-menu />
 
       <div class="dashboard_grid">
@@ -142,6 +142,23 @@ function onClickCard(status?: string) {
 
       <v-divider />
 
+      <v-row density="compact">
+        <v-col cols="12" md="6">
+          <v-card border>
+            <v-card-title>Issues by status</v-card-title>
+            <v-divider />
+            <v-card-text>
+              <issue-status-chart :stats="stats" @select="onClickCard" />
+            </v-card-text>
+          </v-card>
+        </v-col>
+        <v-col cols="12" md="6">
+          <!--          <v-card border>-->
+          <!--            <v-card-text>text</v-card-text>-->
+          <!--          </v-card>-->
+        </v-col>
+      </v-row>
+
       <v-row density="compact">
         <v-col cols="12" md="8">
           <v-card border>
@@ -207,23 +224,6 @@ function onClickCard(status?: string) {
           </v-card>
         </v-col>
       </v-row>
-
-      <v-row density="compact">
-        <v-col cols="12" md="6">
-          <v-card border>
-            <v-card-title>Issues by status</v-card-title>
-            <v-divider />
-            <v-card-text>
-              <issue-status-chart :stats="stats" @select="onClickCard" />
-            </v-card-text>
-          </v-card>
-        </v-col>
-        <v-col cols="12" md="6">
-          <!--          <v-card border>-->
-          <!--            <v-card-text>text</v-card-text>-->
-          <!--          </v-card>-->
-        </v-col>
-      </v-row>
     </div>
   </div>
 </template>

src/views/calendar/CalendarView.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const type = ref('month')
+const types = ['month', 'week', 'day', '4day']
+const mode = ref('stack')
+const modes = ['stack', 'column']
+const weekday = ref([0, 1, 2, 3, 4, 5, 6])
+const weekdays = [
+  { title: 'Sun - Sat', value: [0, 1, 2, 3, 4, 5, 6] },
+  { title: 'Mon - Sun', value: [1, 2, 3, 4, 5, 6, 0] },
+  { title: 'Mon - Fri', value: [1, 2, 3, 4, 5] },
+  { title: 'Mon, Wed, Fri', value: [1, 3, 5] },
+]
+const value = ref('')
+const events = ref([])
+const colors = ['blue', 'indigo', 'deep-purple', 'cyan', 'green', 'orange', 'grey-darken-1']
+const names = ['Meeting', 'Holiday', 'PTO', 'Travel', 'Event', 'Birthday', 'Conference', 'Party']
+
+function rnd(a: number, b: number) {
+  return Math.floor((b - a + 1) * Math.random()) + a
+}
+</script>
+
+<template>
+  <div>
+    <v-sheet height="600">
+      <v-calendar></v-calendar>
+    </v-sheet>
+  </div>
+</template>
+<style scoped lang="scss"></style>