Merge pull request #301 from traPtitech/develop

Develop

.husky/.gitignore

@@ -0,0 +1 @@
+_

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn lint-staged

package.json

@@ -1,12 +1,13 @@
 {
   "name": "room-web",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
-    "lint:fix": "vue-cli-service lint --fix"
+    "lint:fix": "vue-cli-service lint --fix",
+    "prepare": "husky install"
   },
   "dependencies": {
     "@cloudcmd/clipboard": "^2.0.0",
@@ -61,11 +62,6 @@
     "last 2 versions",
     "not ie <= 8"
   ],
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
   "lint-staged": {
     "*.{ts,tsx,vue}": [
       "vue-cli-service lint --fix"

src/components/main/SidebarNavigation.vue

@@ -36,9 +36,9 @@ export default class SidebarNavigation extends Vue {
         link: '/events',
       },
       {
-        icon: 'mdi-map-marker',
-        title: 'Rooms',
-        link: '/rooms',
+        icon: 'mdi-calendar',
+        title: 'Calendar',
+        link: '/calendar',
       },
     ]
   }

src/components/shared/Calendar.vue

@@ -0,0 +1,217 @@
+<template>
+  <div>
+    <v-sheet height="64">
+      <v-toolbar flat>
+        <v-btn
+          outlined
+          class="mr-4"
+          color="grey darken-2"
+          @click="jumpToCurrentDate"
+        >
+          Today
+        </v-btn>
+        <v-btn fab text small color="grey darken-2" @click="prev">
+          <v-icon small> mdi-chevron-left </v-icon>
+        </v-btn>
+        <v-btn fab text small color="grey darken-2" @click="next">
+          <v-icon small> mdi-chevron-right </v-icon>
+        </v-btn>
+        <v-toolbar-title v-if="$refs.calendar">
+          {{ calendarTitle }}
+        </v-toolbar-title>
+        <v-spacer />
+        <v-menu bottom right>
+          <template #activator="{ on, attrs }">
+            <v-btn outlined color="grey darken-2" v-bind="attrs" v-on="on">
+              <span>{{ typeToLabel[type] }}</span>
+              <v-icon right> mdi-menu-down </v-icon>
+            </v-btn>
+          </template>
+          <v-list>
+            <v-list-item @click="type = 'day'">
+              <v-list-item-title>{{ typeToLabel['day'] }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item @click="type = '4day'">
+              <v-list-item-title>{{ typeToLabel['4day'] }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item @click="type = 'week'">
+              <v-list-item-title>{{ typeToLabel['week'] }}</v-list-item-title>
+            </v-list-item>
+            <v-list-item @click="type = 'month'">
+              <v-list-item-title>{{ typeToLabel['month'] }}</v-list-item-title>
+            </v-list-item>
+          </v-list>
+        </v-menu>
+      </v-toolbar>
+    </v-sheet>
+    <v-sheet :height="height - 64">
+      <v-calendar
+        :ref="calendarRefName"
+        v-model="focus"
+        :type="type"
+        :events="calendarEvent"
+        :event-color="getEventColor"
+        @click:event="showEvent"
+        @click:more="viewDay"
+        @click:date="viewDay"
+      />
+      <v-menu
+        v-model="selectedOpen"
+        :close-on-content-click="false"
+        :activator="selectedElement"
+        offset-x
+      >
+        <v-card
+          v-if="selectedEvent"
+          color="grey lighten-4"
+          min-width="350px"
+          flat
+        >
+          <v-toolbar :color="selectedEvent.color" dark flat>
+            <v-toolbar-title>
+              <router-link :to="`/events/${selectedEvent.eventId}`">
+                {{ selectedEvent.name }}
+              </router-link>
+            </v-toolbar-title>
+            <v-spacer />
+            <v-btn
+              v-if="isMyEvent(selectedEvent)"
+              icon
+              :to="`/events/edit/${selectedEvent.eventId}`"
+            >
+              <v-icon>mdi-pencil</v-icon>
+            </v-btn>
+          </v-toolbar>
+          <v-card-text>
+            <p v-if="!selectedEvent.description">No description provided.</p>
+            <markdown-field v-else :src="selectedEvent.description" />
+          </v-card-text>
+          <v-card-actions>
+            <v-btn text color="secondary" @click="selectedOpen = false">
+              Close
+            </v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-menu>
+    </v-sheet>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { Component, Prop } from 'vue-property-decorator'
+import { formatDate } from '@/workers/date'
+import MarkdownField from '@/components/shared/MarkdownField.vue'
+
+type CalendarEvent = {
+  eventId: string
+  name: string
+  description: string
+  start: string
+  end: string
+  admins: string[]
+  color: string
+}
+
+@Component({
+  components: {
+    MarkdownField,
+  },
+})
+export default class Calendar extends Vue {
+  @Prop({ type: Number, required: true })
+  height!: number
+
+  @Prop({ type: Array, default: [] })
+  events!: Schemas.Event[]
+
+  focus = ''
+  type = 'month'
+
+  selectedEvent: CalendarEvent | null = null
+  selectedElement = null
+  selectedOpen = false
+
+  typeToLabel = {
+    month: 'Month',
+    week: 'Week',
+    '4day': '4 Days',
+    day: 'Day',
+  }
+
+  calendarRefName = 'calendar'
+  get calendarRef() {
+    return this.$refs[this.calendarRefName] as any
+  }
+  get calendarTitle() {
+    return this.calendarRef?.title
+  }
+
+  prev() {
+    this.calendarRef?.prev()
+  }
+  next() {
+    this.calendarRef?.next()
+  }
+  jumpToCurrentDate() {
+    this.focus = ''
+  }
+
+  showEvent({ nativeEvent, event }) {
+    const open = () => {
+      this.selectedEvent = event
+      this.selectedElement = nativeEvent.target
+      setTimeout(() => {
+        this.selectedOpen = true
+      }, 10)
+    }
+
+    if (this.selectedOpen) {
+      this.selectedOpen = false
+      setTimeout(open, 10)
+    } else {
+      open()
+    }
+
+    nativeEvent.stopPropagation()
+  }
+
+  viewDay({ date }) {
+    this.focus = date
+    this.type = 'day'
+  }
+
+  get calendarEvent(): CalendarEvent[] {
+    const idToColor = (id: string) =>
+      [
+        'blue',
+        'indigo',
+        'deep-purple',
+        'cyan',
+        'green',
+        'orange',
+        'grey darken-1',
+        'red',
+      ][parseInt(id[0], 16) % 8]
+    const toVCalendarDateFormat = formatDate('YYYY-MM-DD HH:mm')
+
+    return this.events.map(event => ({
+      eventId: event.eventId,
+      name: event.name,
+      description: event.description,
+      admins: event.admins,
+      color: idToColor(event.groupId),
+      start: toVCalendarDateFormat(event.timeStart),
+      end: toVCalendarDateFormat(event.timeEnd),
+    }))
+  }
+  getEventColor(event: CalendarEvent) {
+    return event.color
+  }
+
+  get isMyEvent() {
+    return (event: CalendarEvent) =>
+      event?.admins.includes(this.$store.direct.state.me?.userId ?? '') ?? false
+  }
+}
+</script>

src/pages/Calendar.vue

@@ -0,0 +1,27 @@
+<template>
+  <v-col>
+    <calendar :height="784" :events="events" />
+  </v-col>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { Component } from 'vue-property-decorator'
+import RepositoryFactory from '@/repositories/RepositoryFactory'
+import Calendar from '@/components/shared/Calendar.vue'
+
+const EventsRepo = RepositoryFactory.get('events')
+
+@Component({
+  components: {
+    Calendar,
+  },
+})
+export default class CalendarPage extends Vue {
+  events: Schemas.Event[] = []
+
+  async created() {
+    this.events = (await EventsRepo.get()).data
+  }
+}
+</script>

src/pages/EventSearch.vue

@@ -59,9 +59,9 @@ export default class EventSearch extends Vue {
   filterTags: string[] = []
   showFinished = false
 
-  events: Schemas.Event[] | null = null
-  rooms: Map<string, Schemas.Room> | null = null
-  tags: Schemas.Tag[] | null = null
+  events: Schemas.Event[] = []
+  rooms: Map<string, Schemas.Room> = new Map()
+  tags: Schemas.Tag[] = []
 
   async created() {
     this.status = 'loading'

src/router/index.ts

@@ -4,6 +4,7 @@ import store from '@/store'
 import PathStorage from '@/workers/PathStorage'
 
 const Dashboard = () => import('@/pages/Dashboard.vue')
+const Calendar = () => import('@/pages/Calendar.vue')
 const EventSearch = () => import('@/pages/EventSearch.vue')
 const EventDetail = () => import('@/pages/EventDetail.vue')
 const EventNew = () => import('@/pages/EventNew.vue')
@@ -32,6 +33,12 @@ const router = new Router({
       component: WIP,
       meta: { headerTitle: 'Rooms' },
     },
+    {
+      path: '/calendar',
+      name: 'Calendar',
+      component: Calendar,
+      meta: { headerTitle: 'Calendar' },
+    },
     {
       path: '/groups',
       name: 'Groups',