This is the 13th day of my participation in Gwen Challenge

< span style = “box-sizing: border-box! Important; color: RGB (74, 74, 74); line-height: 22px; font-size: 14px! Important; white-space: inherit! Important;”

Since the code was a bit messy the previous two days, I will refactor it and put some duplicate code together. It also makes the code look a little cleaner for later “plug-in” development.

Refactoring the Event function

Previously, the Events acquisition and Event creation were performed on the list page and the create page respectively. This time, they were placed on the Main page for the following reasons:

  1. The same data operations should be put together as far as possible for unified management.
  2. After an Event is created, the List data can be updated synchronously on the Main page. And there is no need to send another signal to the list page to trigger the update.
// FullCalendarMain.vue

<fullcalendar-sub
  v-model:changeShowFestivals="changeShowFestivals"
  v-model:changeShowWeather="changeShowWeather"
  v-model:events="events"
  v-model:weather="weather"
  v-model:location="location"
  @menuClick="menuClick"
  @dateClick="dateClick"
/>

... 

setup() {
    // 调用 event service
    const eventService = ref(new EventService());
    const events:any = ref([]);
    const visibleFullSetting = ref(false);
    const store = useStore();
    
    return {
      eventService,
      events,
      visibleFullSetting,
      store,
    };
},

...

methods: {
  updateEvents(): any {
    this.eventService.getEvents().then((data) => {
    this.events = data;
      });
  },
  
    ...
  addEventClick(data: any) {
      this.eventService.postEvent(data.title, data.start, data.end)
        .then((response: any) => {
          this.$toast.add({severity:'success', summary: 'Success Message', detail:'Order submitted', life: 3000});
          this.updateEvents();
    });
  },
Copy the code

At least this can ensure that the sub-module is only responsible for page display, how to get data to the next layer to think about. At the same time, a Toast component has been added to facilitate the display of update results for some asynchronous operations:

<Toast />

this.$toast.add({severity:'success', summary: 'Success Message', detail:'event submitted', life: 3000});
Copy the code

Similarly, on the sub-layout, only one Events prop is required:

// FullcalendarSub.vue
props: {
events: {},
changeShowFestivals: Boolean,
changeShowWeather: Boolean,
weather: {},
},
Copy the code

< span style = “box-sizing: border-box; color: RGB (74, 74, 74); line-height: 22px; font-size: 14px! Important; white-space: inherit! Important;”

emits: [
  'addEventClick',
  'update:visibleFullDialog',
],

...

add(): void {
  const start: Date = this.dates[0];
  const end: Date = this.dates[1] == null ? this.dates[0] : this.dates[1];

  this.$emit('addEventClick',{
    title: this.eventText,
    start: start,
    end: end,
  });
  this.dates = [];
  this.eventText = '';
  this.$emit('update:visibleFullDialog', false);
},
Copy the code

Update the Event

< span style = “box-sizing: border-box; color: RGB (74, 74, 74); line-height: 22px; font-size: 14px! Important; white-space: inherit! Important; word-break: inherit! Important;”

Perform a look at the changes in the background:

Again, the code implementation is simple:

Async patchEvent(id: string, title: string, start: Date, end: string); Date, ) { const http = wrapper(axios, { maxCacheSize: 15, }); const res = await http({ url: import.meta.env.VITE_NOTION_PAGE_API + '/' + id, method: 'patch', headers: this.headers, data: { 'properties': { 'title': { 'type': 'rich_text', 'rich_text': [{ 'type': 'text', 'text': { 'content': title }, }], }, 'start': { 'type': 'date', 'date': { 'start': start }, }, 'end': { 'type': 'date', 'date': { 'start': end }, }, }, }, }); return res; }Copy the code

On the layout, we add an Event click Event:

Add Event Prop to the Event creation page to retrieve the value of the Event property:

// EventCreateDialog.vue props: { visibleFullDialog: Boolean, event: Object, }, emits: [ 'addEventClick', 'update:visibleFullDialog', ], ... watch: { event(): void { if (this.event ! = null) { this.eventText = this.event.title; this.dates = [this.event.start, this.event.end]; } else { this.eventText = ''; this.dates = []; }}},Copy the code

Let’s click on an Event to see if the page is called up and if the content is filled:

Finally, it is to submit the update event, and determine whether to increase or update the event according to whether there is an event ID:

addEventClick(data: any) { if (data.id) { this.eventService.patchEvent(data.id, data.title, data.start, data.end) .then((response: any) => { this.$toast.add({severity:'success', summary: 'Success Message', detail:'event submitted', life: 3000}); this.updateEvents(); }); } else { this.eventService.postEvent(data.title, data.start, data.end) .then((response: any) => { this.$toast.add({severity:'success', summary: 'Success Message', detail:'event submitted', life: 3000}); this.updateEvents(); }); }},Copy the code

Note: The entire code is posted on Github with a 0.6.13 tag.

summary

So far, except that “deleting Event” has not been realized, “adding, updating and acquiring” of Event has been basically completed.

Tomorrow is the Dragon Boat Festival, these two days began to do a tinkering before the development of the function, a product should have to fill up, the specific core functions estimated need to be put aside, on the current function is enough to use the first version, to be continued!

The Electron+Vue3 Calendar for MAC version development records recently a partner asked the code link: the code has been synchronized to github: github.com/fanly/fanly…