这是我参与更文挑战的第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();
});
}
},
注：整个代码已放在 Github 上了，
tag为0.6.13。
小结
到目前为止除了「删除 Event」未实现之外，基本完成了 Event 的「增加、更新、获取」。
明天是端午节了，这两天开始着手就之前开发的功能做一个修修补补，把一个产品该有的都补上了，具体核心功能估计需要放一放了，就目前的功能足够第一版使用了，未完待续！
这个项目的所有记录基本放进专栏里了，欢迎查看： Electron+Vue3 MAC 版日历开发记录 最近有伙伴问代码链接：代码已同步到 github 上了：github.com/fanly/fanly…
