Electron+Vue3 MAC 版日历开发记录(13)——事件功能重构-一一网

这是我参与更文挑战的第13天，活动详情查看：更文挑战

这几天核心功能放在了 Event 事件功能开发上，本来想把 Event 删除功能补充上去，但我发现在 Notion API 里似乎没有提供 delete API，有发现的伙伴们，欢迎在评论里告诉我。

因为之前两天代码有点乱，所以今天重新重构下，把一些重复的代码放在一起。也让代码看起来清晰一点，为后续的「插件化」开发做准备。

重构 Event 功能

之前把 Events 获取和创建 Event 分别在列表页和创建页面上操作，这回统一放在 Main 页面上，理由如下：

同样的数据操作，尽可能放在一起，便于统一管理；
对于创建一个 Event 后，可以在 Main 页面上同步更新 list 数据。而且不需要再发送一个信号到列表页去触发更新。

// 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();
    });
  },
复制代码

这样至少可以保证子模块只负责页面展示，数据怎么获取的交给上一层去思考了。同时，也增加了一个 Toast 组件，便于一些异步操作的更新结果显示：

<Toast />

this.$toast.add({severity:'success', summary: 'Success Message', detail:'event submitted', life: 3000});
复制代码

一样的，在子布局上，只需要一个 events prop 即可：

// FullcalendarSub.vue
props: {
events: {},
changeShowFestivals: Boolean,
changeShowWeather: Boolean,
weather: {},
},
复制代码

在创建 Event 页面上，把提交 Notion 服务器代码移除，只留下本页面需要的操作：

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);
},
复制代码

更新 Event

更新 Event 就很简单了，Notion 官方提供的接口满足 Restful，所以更新的请求就是 patch，我们利用 Postman 模拟下就知道了：

执行看看后台的变化：

一样的，代码实现也很简单了：

/**
* 更新 title 或者 start、end 到 Notion API
*/
async patchEvent(
id: string,
title: string,
start: Date,
end: 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;
}
复制代码

在布局上，我们增加一个 Event 点击事件：

具体做法和之前点击时间事件 (dateClick) 一样，过程代码就不重复了，只有在 Event 创建页面增加了 Event Prop 为了获取更新 Event 的属性值：

// 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 = [];
      }
    }
},
复制代码

我们点击一个 Event 看看是否调出页面，以及内容是否填充：

最后，就是提交更新事件，根据是否有 event id 来判断是增加 Event 还是更新 Event：

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();
    });
  }
},
复制代码