8/29首頁行事曆

src/content/Homepage/Calendar/Memorabilia/index.vue

@@ -149,9 +149,9 @@
         <FullCalendar class="demo-app-calendar" :options="calendarOptions">
           <template #eventContent="arg">
             <div class="word">
-            <span style="cursor: pointer">
-              <!-- <b>{{ arg.timeText }}</b> -->
-              <i>{{ arg.event.title }}</i>
+              <span style="cursor: pointer" :style="getEventTitleStyle(arg.event.start, arg.event.end)">
+              <i v-if="arg.event.extendedProps.titlePrefix">{{arg.event.extendedProps.titlePrefix}}{{ arg.event.title }}</i>
+              <i v-else>{{ arg.event.title }}</i>
             </span></div>
           </template>
         </FullCalendar>
@@ -263,74 +263,45 @@ export default {
     }
   },
   async mounted () {
+    await this.getConferenceList()
     await this.getEvents()
     this.reloadPage()
     this.usePermission()
-    console.log(this.scheduleList);
   },
   methods: {
     ...mapActions('schedule', ['getScheduleList', 'initSchedule', 'printChronologyZip']),
     ...mapActions('paramsSetting', ['lookupParam']),
+    ...mapActions('conference', ['getConferenceList']),
     handleWeekendsToggle () {
       this.calendarOptions.weekends = !this.calendarOptions.weekends
     },
     async handleDateSelect (selectInfo) {
-      this.AddEventModalOpen = true
-      await this.$store.dispatch('schedule/handleDateSelect', {
-        startDate: selectInfo.startStr,
-        endDate: selectInfo.endStr
-      })
+      if (this.eventManagement.permission === 2) {
+        this.AddEventModalOpen = true
+        await this.$store.dispatch('schedule/handleDateSelect', {
+          startDate: selectInfo.startStr,
+          endDate: selectInfo.endStr
+        })
+      }
     },
     async handleEventClick (clickInfo) {
       this.content = clickInfo.event.extendedProps.scheduleId
-      if (clickInfo.event.backgroundColor === '#f56161') {
-        // 會議另開
-        await this.$store.dispatch('schedule/getScheduleContent', this.content)
+
+      // 會議另開
+      await this.$store.dispatch('schedule/getScheduleContent', this.content)
+      const conference = this.conference.find(conf => conf._id === this.schedule.conferenceId)
+      if (conference) {
         this.$router.push({
           name: 'ConferenceDetail',
-          query: { fid: this.schedule.conferenceId }
+          query: { fid: conference._id }
         })
       } else {
         this.EditEventModalOpen = true
-        if (String(Number(clickInfo.event.endStr.slice(-2))).length === 1) {
-          let endDate =
-            clickInfo.event.endStr.slice(0, 8) +
-            String(Number(clickInfo.event.endStr.slice(-2)) - 1).padStart(
-              2,
-              '0'
-            )
-          if (String(endDate.slice(-2)) === '00') {
-            let day = new Date(
-              endDate.slice(0, 4),
-              String(Number(endDate.slice(5, 7)) - 1).padStart(2, '0')
-            )
-            let end = new Date(day.getFullYear(), day.getMonth(), 0)
-            let endToday =
-              end.getFullYear() +
-              '-' +
-              String(end.getMonth() + 1).padStart(2, '0') +
-              '-' +
-              String(end.getDate()).padStart(2, '0')
-            await this.lookSchedule(clickInfo, endToday, this.content)
-          } else {
-            await this.lookSchedule(clickInfo, endDate, this.content)
-          }
-        } else {
-          let endDate =
-            clickInfo.event.endStr.slice(0, 8) +
-            String(Number(clickInfo.event.endStr.slice(-2)) - 1)
-          if (String(endDate.slice(7)).length === 2) {
-            let end =
-              endDate.slice(0, 8) + String(endDate.slice(-1)).padStart(2, '0')
-            await this.lookSchedule(clickInfo, end, this.content)
-          } else {
-            await this.lookSchedule(clickInfo, endDate, this.content)
-          }
-        }
+        const formattedEndDate = clickInfo.event.endStr
+        await this.lookSchedule(clickInfo, formattedEndDate, this.content)
       }
     },
     async lookSchedule (data, end, id) {
-      // 調整日期專用
       await this.$store.dispatch('schedule/getScheduleContent', id)
       await this.$store.dispatch('schedule/lookupSchedule', {
         id: id,
@@ -345,7 +316,14 @@ export default {
       })
     },
     handleEvents (events) {
-      this.currentEvents = events
+      const calendarEvents = events.map(event => {
+        const isAllDay = this.isOneDayEvent(event.start, event.end)
+        return {
+          ...event,
+          allDay: isAllDay
+        }
+      })
+      this.currentEvents = calendarEvents
     },
     editEvent () {
       this.EditEventModalOpen = false
@@ -360,19 +338,91 @@ export default {
       this.AddEventModalOpen = true
       await this.initSchedule()
     },
+    getFormattedTime (time) {
+      return this.formatTime(time)
+    },
+    formatTime (time) {
+      if (time && time.length >= 3) {
+        return time.substr(0, time.length - 3)
+      } else {
+        return ''
+      }
+    },
+    getTimeObject (time) {
+      const [hours, minutes] = time.split(':')
+      return {
+        hour: parseInt(hours),
+        minute: parseInt(minutes)
+      }
+    },
+    isOneDayEvent (start, end) {
+      const startDate = new Date(start)
+      const endDate = new Date(end)
+      const oneDay = 24 * 60 * 60 * 1000
+
+      return endDate - startDate <= oneDay
+    },
+    getEventTitleStyle (start, end) {
+      const startDate = new Date(start)
+      const endDate = new Date(end)
+      const oneDay = 24 * 60 * 60 * 1000
+
+      if (endDate - startDate <= oneDay) {
+        return {
+          whiteSpace: 'normal'
+        }
+      } else {
+        return {
+          whiteSpace: 'nowrap'
+        }
+      }
+    },
     async getEvents () {
       this.$router.push({ name: 'Memorabilia' })
       await this.getScheduleList()
-      this.calendarOptions.events = []
-      this.scheduleList.forEach((obj, i) => { // 顯示需要不須在更改
-        this.calendarOptions.events[i] = {
-          title: obj.title,
-          start: obj.start,
-          end: obj.end,
-          color: obj.color,
-          scheduleId: obj._id
+      await this.$store.dispatch('conference/getConferenceList')
+      const calendarEvents = []
+      for (const obj of this.scheduleList) {
+        if (obj.start && obj.end) {
+          let titlePrefix = ''
+          if (obj.scheduleType === '會議') {
+            const conference = this.conference.find(conf => conf._id === obj.conferenceId)
+            if (conference) {
+              const start = new Date((obj.start + ' ' + conference.conference_time).toString())
+              const end = new Date((obj.start + ' ' + conference.end_time).toString())
+              titlePrefix = `${this.getFormattedTime(conference.conference_time)} - `
+              const startFormatted = `${start.toLocaleDateString()} ${start.toLocaleTimeString()}`
+              const endFormatted = `${end.toLocaleDateString()} ${end.toLocaleTimeString()}`
+              calendarEvents.push({
+                titlePrefix: titlePrefix,
+                title: obj.title,
+                start: start,
+                end: end,
+                color: obj.color,
+                scheduleId: obj._id,
+                startFormatted,
+                endFormatted
+              })
+            }
+          } else {
+            let start = new Date((obj.start + ' ' + '00:00:00').toString())
+            let end = new Date(obj.end)
+            end.setDate(end.getDate() + 1)
+            calendarEvents.push({
+              title: obj.title,
+              start: start,
+              end: end,
+              color: obj.color,
+              scheduleId: obj._id,
+              allDay: true
+            })
+          }
         }
-      })
+        this.calendarOptions.events = calendarEvents
+        this.calendarOptions.eventClick = info => {
+          this.handleEventClick(info)
+        }
+      }
     },
     async reloadPage () { // 篩選條件用
       this.scheduleClassification = await this.lookupParam(
@@ -383,15 +433,24 @@ export default {
         this.typeList.push(type.name)
       }
     },
+    async reload () {
+      await this.getConferenceList()
+      this.getNewConferenceList()
+    },
+    closeAddEventModal () {
+      this.AddEventModalOpen = false
+    },
+    closeEditEventModal () {
+      this.EditEventModalOpen = false
+    },
     closeAddTypeModal () {
       this.AddEventTypeModalOpen = false
       this.reloadPage()
     },
     addEventType () {
-      // 參數設置 | 事件類型
       this.AddEventTypeModalOpen = true
     },
-    async selectList (name) { // 篩選事件類別
+    async selectList (name) {
       await this.getScheduleList()
       this.typeList.includes(name)
         ? this.typeList = this.typeList.filter((item) => {
@@ -409,13 +468,51 @@ export default {
       }
       const newScheduleList = getDifference(allList, list)
       this.calendarOptions.events = []
+      let titlePrefix = ''
       newScheduleList.forEach((obj, i) => {
-        this.calendarOptions.events[i] = {
-          title: obj.title,
-          start: obj.start,
-          end: obj.end,
-          color: obj.color,
-          scheduleId: obj._id
+        let conference = this.conference.find(conf => conf._id === obj.conferenceId)
+        if (conference) {
+          if (obj.scheduleType === '會議') {
+            let start = new Date((obj.start + ' ' + (conference ? conference.conference_time : '')).toString())
+            let end = new Date((obj.start + ' ' + (conference ? conference.end_time : '')).toString())
+            let startFormatted = `${start.toLocaleDateString()} ${start.toLocaleTimeString()}`
+            let endFormatted = `${end.toLocaleDateString()} ${end.toLocaleTimeString()}`
+            titlePrefix = `${this.getFormattedTime(conference.conference_time)} - `
+            this.calendarOptions.events[i] = {
+              titlePrefix: titlePrefix,
+              title: obj.title,
+              start: start,
+              end: end,
+              color: obj.color,
+              scheduleId: obj._id,
+              startFormatted,
+              endFormatted
+            }
+          } else {
+            let start = new Date((obj.start + ' ' + '00:00:00').toString())
+            let end = new Date(obj.end)
+            end.setDate(end.getDate() + 1)
+            this.calendarOptions.events[i] = {
+              title: obj.title,
+              start: start,
+              end: end,
+              color: obj.color,
+              scheduleId: obj._id,
+              allDay: true
+            }
+          }
+        } else {
+          let start = new Date((obj.start + ' ' + '00:00:00').toString())
+          let end = new Date(obj.end)
+          end.setDate(end.getDate() + 1)
+          this.calendarOptions.events[i] = {
+            title: obj.title,
+            start: start,
+            end: end,
+            color: obj.color,
+            scheduleId: obj._id,
+            allDay: true
+          }
         }
       })
     },
@@ -667,7 +764,9 @@ export default {
     ...mapState({
       schedule: (state) => state.schedule.Schedule,
       scheduleList: (state) => state.schedule.ScheduleList,
-      currentUser: (state) => state.user.current
+      currentUser: (state) => state.user.current,
+      conferenceList: (state) => state.conference.ConferenceList,
+      conference: (state) => state.conference.ConferenceList
     })
   },
   watch: {