9/5首頁通訊錄、待辦事項畫面調整

src/content/Homepage/Mainpage/Dashboard/index.vue

@@ -2,25 +2,13 @@
   <div id="app">
     <div style="background-color: #1d325f; width: 100%; height: 100%">
       <!-- 通訊錄 -->
-      <b-container
-        style="
-          padding-top: 20px;
-          border-radius: 5px;
-          background-color: white;
-          width: 20%;
-          height: 90%;
-          margin-top: 50px;
-          margin-left: 40px;
-          float: left;
-        "
-      >
-        <span
-          class="mainPageTitle"
-          style="margin-left: 5px; font-size: 28px"
-        >
-          通訊錄
-        </span>
-        <multiselect
+      <b-tabs pills cards style="margin-left:5vw">
+        <b-tab title="通訊錄">
+          <b-container class="contact-list-container">
+             <span class="mainPageTitle" style="margin-left: 5px; font-size: 28px">
+                通訊錄
+             </span>
+             <multiselect
           v-model="searchCompany"
           style="width: 100%; margin-top: 5px"
           placeholder="查詢公司名稱"
@@ -33,7 +21,7 @@
         >
           <span slot="noResult">查無此公司名稱</span>
         </multiselect>
-        <div class="mt-2" style="height: calc(80vh - 120px); overflow: auto">
+        <div class="mt-2" style="height: calc(80vh - 65px); overflow: auto">
           <b-list-group v-for="(item, i) in list" :key="i">
             <b-list-group-item style="padding: 10px" @click="openInfo(item)">
               <b-avatar
@@ -68,69 +56,16 @@
           />
         </modal>
       </b-container>
-      <!-- 標案行事曆 -->
-      <b-container
-        style="
-          padding-top: 20px;
-          border-radius: 5px;
-          background-color: white;
-          width: 47%;
-          height: 90%;
-          margin-top: 50px;
-          margin-left: 30px;
-          float: left;
-        "
-      >
-        <span
-          class="mainPageTitle"
-          style="margin-left: 5px; font-size: 28px"
-        >
-          標案行事曆
-        </span>
-        <modal
-          :isOpen="EditEventModalOpen"
-          title="檢視事件"
-          @closeEvent="EditEventModalOpen = false"
-        >
-          <editEvent @closeEvent="EditEventModalOpen = false" />
-        </modal>
-        <FullCalendar
-          class="fullCalendar mt-2"
-          ref="fullCalendar"
-          :options="calendarOptions"
-        >
-          <template #eventContent="arg">
-            <div class="word">
-              <span style="cursor:pointer;">
-                <b>{{ arg.timeText }}</b>
-                <i>{{ arg.event.title }}</i>
+    </b-tab>
+     <!-- 個人待辦事項 -->
+     <b-tab title="個人待辦事項">
+          <b-container class="contact-list-container">
+            <b-row>
+              <span class="mainPageTitle" style="margin-left: 15px; font-size: 28px">
+                 個人待辦事項
               </span>
-            </div>
-          </template>
-        </FullCalendar>
-      </b-container>
-      <!-- 個人待辦事項 -->
-      <b-container
-        style="
-          padding-top: 20px;
-          border-radius: 5px;
-          background-color: white;
-          width: 26%;
-          height: 90%;
-          margin-top: 50px;
-          margin-left: 30px;
-          float: left;
-        "
-        >
-        <b-row>
-          <span
-            class="mainPageTitle"
-            style="margin-left: 15px; font-size: 28px"
-          >
-            個人待辦事項
-          </span>
-        </b-row>
-        <div class="mt-3">
+            </b-row>
+            <div class="mt-3">
           <b-button-group style="border-radius: 3px !important;">
             <b-button
               class="btn_list"
@@ -235,25 +170,56 @@
             </ul>
           </div>
         </div>
-      </b-container>
-    </div>
-    <modal
+        <modal
       :is-open="AddTodoListModalOpen"
       title="新增個人待辦事項"
       @closeEvent="closeAddEvent"
-    >
-      <addTodoList @closeEvent="closeAddEvent" />
-    </modal>
-    <modal
-      :is-open="EditTodoListModalOpen"
-      title="編輯個人待辦事項"
-      @closeEvent="closeEditEvent"
-    >
-      <editTodoList
-        :get-content="todoId"
-        @closeEvent="closeEditEvent"
-      />
-    </modal>
+          >
+         <addTodoList @closeEvent="closeAddEvent" />
+        </modal>
+        <modal
+           :is-open="EditTodoListModalOpen"
+           title="編輯個人待辦事項"
+           @closeEvent="closeEditEvent"
+         >
+        <editTodoList
+             :get-content="todoId"
+             @closeEvent="closeEditEvent"
+         />
+        </modal>
+      </b-container>
+      </b-tab>
+      </b-tabs>
+      <!-- 標案行事曆 -->
+      <b-container
+      v-if="visibility !== 'personalTodo'"
+      class="calendar-container">
+        <span class="mainPageTitle" style="margin-left: 5px; font-size: 28px">
+          標案行事曆
+        </span>
+        <modal
+          :isOpen="EditEventModalOpen"
+          title="檢視事件"
+          @closeEvent="EditEventModalOpen = false"
+        >
+          <editEvent @closeEvent="EditEventModalOpen = false" />
+        </modal>
+        <FullCalendar
+          class="fullCalendar mt-2"
+          ref="fullCalendar"
+          :options="calendarOptions"
+        >
+          <template #eventContent="arg">
+            <div style="getEventTitleStyle(arg.event.start, arg.event.end)" >
+              <span style="cursor:pointer;">
+                <b>{{ arg.timeText }}</b>
+                <i :class="{'event-title-wrap': isOneDayEvent(arg.event.start, arg.event.end)}">{{ arg.event.title }}</i>
+              </span>
+            </div>
+          </template>
+        </FullCalendar>
+      </b-container>
+    </div>
   </div>
 </template>
 
@@ -385,38 +351,15 @@ export default {
         })
       } 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, lookId)
-          } else {
-            await this.lookSchedule(clickInfo, endDate, lookId)
-          }
-        } 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, lookId)
-          } else {
-            await this.lookSchedule(clickInfo, endDate, lookId)
-          }
-        }
+
+        const endStr = clickInfo.event.endStr
+        const endDateObject = new Date(endStr)
+        endDateObject.setDate(endDateObject.getDate()) // Adding one day
+
+        const formattedEndDate =
+  endDateObject.toISOString().slice(0, 10)
+
+        await this.lookSchedule(clickInfo, formattedEndDate, lookId)
       }
     },
     async lookSchedule (data, end, id) {
@@ -433,12 +376,32 @@ export default {
         imageFile: this.schedule.imageFile
       })
     },
+    getFormattedTime (time) {
+      return this.formatTime(time)
+    },
+    formatTime (time) {
+      if (time && time.length >= 3) {
+        return time.substr(0, time.length - 3)
+      } else {
+        return ''
+      }
+    },
     async getEvents () {
       await this.getScheduleList()
-      this.calendarOptions.events = []
-      this.scheduleList.forEach((obj, i) => {
-        this.calendarOptions.events[i] = {
-          title: obj.title,
+      await this.$store.dispatch('conference/getConferenceList')
+      this.calendarOptions.events = this.scheduleList.map(obj => {
+        let titlePrefix = ''
+
+        if (obj.scheduleType === '會議') {
+          // 查找對應會議的開始時間
+          const conference = this.conference.find(conf => conf._id === obj.conferenceId)
+          if (conference) {
+            titlePrefix = `${this.getFormattedTime(conference.conference_time)} - `
+          }
+        }
+
+        return {
+          title: titlePrefix + obj.title,
           start: obj.start,
           end: obj.end,
           color: obj.color,
@@ -446,6 +409,13 @@ export default {
         }
       })
     },
+    isOneDayEvent (start, end) {
+      const startDate = new Date(start)
+      const endDate = new Date(end)
+      const oneDay = 24 * 60 * 60 * 1000
+
+      return endDate - startDate <= oneDay
+    },
     openInfo (data) {
       this.AddressBookModalOpen = true
       this.content = data
@@ -545,11 +515,30 @@ export default {
     }
   },
   computed: {
+    getEventTitleStyle () {
+      return (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'
+          }
+        }
+      }
+    },
     ...mapState({
       schedule: (state) => state.schedule.Schedule,
       scheduleList: (state) => state.schedule.ScheduleList,
       directoryList: (state) => state.project.list,
-      todoList: (state) => state.staff.todoList
+      todoList: (state) => state.staff.todoList,
+      conferenceList: (state) => state.conference.ConferenceList,
+      conference: (state) => state.conference.ConferenceList
     })
   },
   watch: {
@@ -584,10 +573,35 @@ export default {
 ::-webkit-scrollbar-thumb:hover {
   background: #555;
 }
+.event-title-wrap {
+  white-space: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.contact-list-container{
+  padding-top: 20px;
+  border-radius: 5px;
+  background-color: white;
+  width: 26%;
+  height: 90%;
+  margin-left: 30px;
+  float: left;
+  }
 .mainPageTitle {
   font-family: 'Noto Sans TC', sans-serif;
   font-weight: 700;
 }
+.calendar-container{
+  padding-top: 20px;
+  border-radius: 5px;
+  background-color: white;
+  width: 60%;
+  height: 90%;
+  margin-left: 30px;
+  float: left;
+  overflow: hidden;
+  }
+
 .alarm {
   font-family: 'Noto Sans TC', sans-serif;
   font-weight: 500;