feat: Calendar Task (PanJiaChen#1894)

* feat Calendar `Tasks`.

* Feat: List Tasks (#52)

* Feat: List Tasks

* load events from server.

* remove console.log

---------

Co-authored-by: Edwin Betancourt <[email protected]>

---------

Co-authored-by: Elsio Sanchez <[email protected]>

src/api/ADempiere/form/task-management.ts

@@ -0,0 +1,36 @@
+/**
+ * ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+ * Copyright (C) 2018-Present E.R.P. Consultores y Asociados, C.A. www.erpya.com
+ * Contributor(s): Edwin Betancourt [email protected] https://github.com/EdwinBetanc0urt
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+// Get Instance for connection
+import { request } from '@/utils/ADempiere/request'
+
+export function requestListTasks({
+  date
+}) {
+  return request({
+    url: `/task-management/tasks`,
+    method: 'get',
+    params: {
+      // date: '2023-01-24T00:00:00.000Z',
+      is_with_projects: true,
+      is_with_requests: true,
+      is_with_resource_assignments: true
+      // date
+    }
+  })
+}

src/store/modules/ADempiere/form/calendarView.js

@@ -0,0 +1,86 @@
+/**
+ * ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+ * Copyright (C) 2018-Present E.R.P. Consultores y Asociados, C.A. www.erpya.com
+ * Contributor(s): Elsio Sanchez [email protected] https://github.com/elsiosanchez
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+// import lang from '@/lang'
+
+// API Request Methods
+import { requestListTasks } from '@/api/ADempiere/form/task-management.ts'
+import { isEmptyValue } from '@/utils/ADempiere'
+
+// Utils and Helper Methods
+// import { translateDate } from '@/utils/ADempiere/formatValue/dateFormat'
+import { showMessage } from '@/utils/ADempiere/notification.js'
+
+const calendarView = {
+  listEvents: []
+}
+
+export default {
+  state: calendarView,
+
+  mutations: {
+    setListTaks(state, list) {
+      state.listEvents = list
+    }
+  },
+
+  actions: {
+    getListTasksFromServer({ commit }, {
+      date = undefined
+    }) {
+      return new Promise(resolve => {
+        requestListTasks({
+          date
+        })
+          .then(response => {
+            const { tasks } = response
+            // const list = tasks.map(list => {
+            //   return {
+            //     title: list.name,
+            //     timeText: translateDate({
+            //       value: list.start_date,
+            //       format: 'long'
+            //     })
+            //   }
+            // })
+            commit('setListTaks', tasks)
+            resolve(tasks)
+          })
+          .catch(error => {
+            console.warn(`Add List Taks: ${error.message}. Code: ${error.code}.`)
+            let message = error.message
+            if (!isEmptyValue(error.response) && !isEmptyValue(error.response.data.message)) {
+              message = error.response.data.message
+            }
+
+            showMessage({
+              type: 'error',
+              message,
+              showClose: true
+            })
+            resolve({})
+          })
+      })
+    }
+  },
+  getters: {
+    getListTasksEvents(state) {
+      return state.listEvents
+    }
+  }
+}

src/views/ADempiere/CalendarView/event-utils.js

@@ -33,8 +33,8 @@ export const INITIAL_EVENTS = [
   {
     id: 1234,
     title: 'Governors - Full Paint',
-    start: '2023-10-01 13:00-:00',
-    end: '2023-10-01 15:00:00'
+    start: '2023-10-01',
+    end: '2023-10-02'
   },
   {
     id: 1111,

src/views/ADempiere/CalendarView/index.vue

@@ -36,12 +36,24 @@
 
         <ul>
           <li v-for="event in currentEvents" :key="event.id">
-            <b>{{ translateDate({
-              value: event.startStr,
-              format: event.startStr.length > 10 ? 'short' : 'onlyDate',
-
-            }) }}</b>
-            <i>{{ event.title }}</i>
+            <el-card
+              shadow="never"
+              class="custom-card-calendar"
+              :body-style="{ padding: '5px' }"
+            >
+              <b>
+                <i>{{ '( ' + event.name + ' )' }}</i>
+              </b>
+              <p style="font-size: 14px;">
+                {{ event.description }}
+              </p>
+              <p style="text-align: left;color: gray;font-size: 12px;margin: 0px;">
+                {{ translateDate({
+                  value: event.start_date,
+                  format: event.start_date.length > 10 ? 'short' : 'onlyDate'
+                }) }}
+              </p>
+            </el-card>
           </li>
         </ul>
       </div>
@@ -62,6 +74,12 @@
 
 <script>
 import lang from '@/lang'
+import store from '@/store'
+import {
+  defineComponent,
+  computed
+  // ref
+} from '@vue/composition-api'
 
 // Components and Mixins
 import FullCalendar from '@fullcalendar/vue'
@@ -71,20 +89,33 @@ import timeGridPlugin from '@fullcalendar/timegrid'
 import interactionPlugin from '@fullcalendar/interaction'
 import listPlugin from '@fullcalendar/list'
 
-import { INITIAL_EVENTS, createEventId } from './event-utils'
+// Constants
+import { createEventId } from './event-utils'
 
+// Utils and Helper Methods
 import { translateDate } from '@/utils/ADempiere/formatValue/dateFormat'
 
-export default {
+export default defineComponent({
   name: 'CalendarView',
 
   components: {
     FullCalendar // make the <FullCalendar> tag available
   },
 
-  data: function() {
-    return {
-      calendarOptions: {
+  setup() {
+    /**
+     * Ref
+     */
+    // const currentEvents = ref([])
+    /**
+     * Computed
+     */
+    const currentEvents = computed(() => {
+      return store.getters.getListTasksEvents
+    })
+
+    const calendarOptions = computed(() => {
+      return {
         plugins: [
           dayGridPlugin,
           timeGridPlugin,
@@ -99,39 +130,41 @@ export default {
           right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
         },
         initialView: 'dayGridMonth',
-        initialEvents: INITIAL_EVENTS, // alternatively, use the `events` setting to fetch from a feed
+        initialEvents: store.getters.getListTasksEvents.map(list => {
+          const { start_date, end_date, name } = list
+          return {
+            id: list.request,
+            title: name,
+            start: parse(start_date),
+            end: parse(end_date)
+          }
+        }), // alternatively, use the `events` setting to fetch from a feed
         editable: true,
         selectable: true,
         selectMirror: true,
         dayMaxEvents: true,
         weekends: true,
-        select: this.handleDateSelect,
-        eventClick: this.handleEventClick,
-        eventsSet: this.handleEvents
-        /* you can update a remote database when these fire:
-        eventAdd:
-        eventChange:
-        eventRemove:
-        */
-      },
-      currentEvents: []
-    }
-  },
-
-  methods: {
-    translateDate,
+        select: handleDateSelect(),
+        eventClick: handleEventClick(),
+        eventsSet: handleEvents()
+      }
+    })
 
-    handleWeekendsToggle() {
-      // update a property
-      this.calendarOptions.weekends = !this.calendarOptions.weekends
-    },
+    /**
+     * Methods
+     */
+    function parse(dateToParse) {
+      const parts = dateToParse.split('T')[0].split('-')
+      return `${parts[0]}-${parts[1]}-${parts[2]}`
+    }
 
-    handleDateSelect(selectInfo) {
+    function handleDateSelect(selectInfo) {
+      if (!selectInfo) {
+        return
+      }
       const title = prompt(lang.t('component.calendar.titleNewEvent'))
       const calendarApi = selectInfo.view.calendar
-
       calendarApi.unselect() // clear date selection
-
       if (title) {
         calendarApi.addEvent({
           id: createEventId(),
@@ -141,19 +174,39 @@ export default {
           allDay: selectInfo.allDay
         })
       }
-    },
+    }
 
-    handleEventClick(clickInfo) {
+    function handleEventClick(clickInfo) {
       if (confirm(`${lang.t('component.calendar.deleteEventConfirm')} '${clickInfo.event.title}'`)) {
         clickInfo.event.remove()
       }
-    },
+    }
+
+    function handleEvents(events) {
+      currentEvents.value = events
+    }
+
+    store.dispatch('getListTasksFromServer', {})
 
-    handleEvents(events) {
-      this.currentEvents = events
+    return {
+      // Ref
+      currentEvents,
+      // Computed
+      calendarOptions,
+      // Methods
+      handleDateSelect,
+      handleEventClick,
+      handleEvents,
+      translateDate,
+      //
+      esLocale,
+      listPlugin,
+      dayGridPlugin,
+      timeGridPlugin,
+      interactionPlugin
     }
   }
-}
+})
 </script>
 
 <style lang='scss'>
@@ -174,12 +227,14 @@ export default {
     }
 
     ul {
+      overflow: auto;
+      height: 89vh;
+      padding: 0px 5px;
       margin: 0;
-      padding: 0 0 0 1.5em;
     }
 
     li {
-      margin: 1.5em 0;
+      margin: 0.5em 0;
       padding: 0;
     }
 
@@ -208,4 +263,13 @@ export default {
     display: block;
   }
 }
+
+.custom-card-calendar {
+  margin: 0px;
+  cursor: pointer;
+}
+.custom-card-calendar:hover {
+  background-color: #eaf5fe;
+  border: 1px solid #36a3f7;
+}
 </style>