保存ボタンクリック時にイベントを一括削除

2024-05-13 00:53:24 +09:00
5 changed files with 558 additions and 311 deletions
--- a/frontend/src/components/left/EventTree.vue
+++ b/frontend/src/components/left/EventTree.vue
@@ -1,48 +1,55 @@
 <template>
  <!-- <div class="q-pa-md q-gutter-sm"> -->
-    <q-tree
-      :nodes="store.eventTree.screens"
-      node-key="eventId"
-      children-key="events"
-      no-connectors
-      v-model:expanded="store.expandedScreen"
-      :dense="true"
-      :ref="tree"
-    >
+  <q-tree :nodes="store.eventTree.screens" node-key="eventId" children-key="events" no-connectors
+    v-model:expanded="store.expandedScreen" :dense="true" :ref="tree">
    <template v-slot:header-EVENT="prop">
-        <div class="row col items-start no-wrap event-node" @click="onSelected(prop.node)">
-          <q-icon v-if="prop.node.eventId"
-                  name="play_circle"
-                  :color="prop.node.hasFlow?'green':'grey'"
-                  size="16px" class="q-mr-sm">
+      <div :ref="prop.node.eventId" class="row col items-center no-wrap event-node">
+        <q-icon v-if="prop.node.eventId" name="play_circle" :color="prop.node.hasFlow ? 'green' : 'grey'" size="16px"
+          class="q-mr-sm">
        </q-icon>
-          <div class="no-wrap" :class="selectedEvent && prop.node.eventId===selectedEvent.eventId?'selected-node':''">{{ prop.node.label }}</div>
+        <div class="no-wrap" @click="onSelected(prop.node)"
+          :class="selectedEvent && prop.node.eventId === selectedEvent.eventId ? 'selected-node' : ''">{{
+            prop.node.label }}</div>
        <q-space></q-space>
        <!-- <q-icon v-if="prop.node.hasFlow" name="delete" color="negative" size="16px" class="q-mr-sm"></q-icon> -->
      </div>
    </template>
    <template v-slot:header-CHANGE="prop">
-        <div class="row col items-start no-wrap event-node" >
+      <div class="row col items-center no-wrap event-node">
        <div class="no-wrap">{{ prop.node.label }}</div>
        <q-space></q-space>
-          <q-icon name="add_circle" color="primary" size="16px" class="q-mr-sm" @click="addChangeEvent(prop.node)"></q-icon>
+        <q-icon name="add_circle" color="primary" size="16px" class="q-mr-sm"
+          @click="addChangeEvent(prop.node)"></q-icon>
+      </div>
+    </template>
+    <template v-slot:header-DELETABLE="prop">
+      <div class="row col items-center event-node">
+        <div class="row col items-center" @click="onSelected(prop.node)">
+          <q-icon v-if="prop.node.eventId" name="play_circle" :color="prop.node.hasFlow ? 'green' : 'grey'" size="16px"
+            class="q-mr-sm">
+          </q-icon>
+          <div>{{ prop.node.label }}</div>
+        </div>
+        <div>
+          <q-btn class="q-mr-sm delete-btn" flat fab-mini icon="delete_forever" padding="none" color="negative"
+            @click="deleteEvent(prop.node)"></q-btn>
+        </div>
      </div>
    </template>
  </q-tree>
-    <show-dialog v-model:visible="showDialog" name="フィールド選択" @close="closeDg" widht="400px">
+  <show-dialog v-model:visible="showDialog" name="フィールド選択" @close="closeDg">
    <field-select ref="appDg" name="フィールド" type="single" :appId="store.appInfo?.appId"></field-select>
  </show-dialog>
 </template>

 <script lang="ts">
-import { defineComponent, computed, ref } from 'vue';
-import { IKintoneEvent ,IKintoneEventGroup, IKintoneEventNode, kintoneEvent} from '../../types/KintoneEvents';
-import { storeToRefs } from 'pinia';
-import { useFlowEditorStore } from 'stores/flowEditor';
-import { ActionFlow, ActionNode, RootAction } from 'src/types/ActionTypes';
-import ShowDialog from '../ShowDialog.vue';
-import FieldSelect from '../FieldSelect.vue';
 import { QTree } from 'quasar';
+import { ActionFlow, RootAction } from 'src/types/ActionTypes';
+import { useFlowEditorStore } from 'stores/flowEditor';
+import { defineComponent, ref } from 'vue';
+import { IKintoneEvent, IKintoneEventGroup, IKintoneEventNode } from '../../types/KintoneEvents';
+import FieldSelect from '../FieldSelect.vue';
+import ShowDialog from '../ShowDialog.vue';
 export default defineComponent({
  name: 'EventTree',
  components: {
@@ -72,12 +79,12 @@ export default defineComponent({
        if (store.eventTree.findEventById(eventid)) {
          return;
        }
-        selectedChangeEvent.value?.events.push(
-          new kintoneEvent(
-            field.label,
-            eventid,
-            selectedChangeEvent.value.eventId)
-        );
+        selectedChangeEvent.value?.events.push({
+          eventId: eventid,
+          label: field.name,
+          parentId: selectedChangeEvent.value.eventId,
+          header: 'DELETABLE'
+        });
        tree.value?.expanded?.push(selectedChangeEvent.value.eventId);
        tree.value?.expandAll();
      }
@@ -89,6 +96,17 @@ export default defineComponent({
      selectedChangeEvent.value = node;
      showDialog.value = true;
    }
+
+    const deleteEvent = (node: IKintoneEvent) => {
+      if (!node.eventId) {
+        return;
+      }
+      store.deleteStoreEventAndFlow(node);
+      store.selectFlow(undefined)
+      console.log(store.selectedFlow);
+      
+    }
+
    const onSelected = (node: IKintoneEvent) => {
      if (!node.eventId) {
        return;
@@ -98,6 +116,7 @@ export default defineComponent({
        return;
      }
      const screen = store.eventTree.findEventById(node.parentId);
+
      let flow = store.findFlowByEventId(node.eventId);
      let screenName = screen !== null ? screen.label : "";
      let nodeLabel = node.label;
@@ -105,6 +124,7 @@ export default defineComponent({
      //   screenName=nodeLabel;
      //   nodeLabel=`${node.label}の値を変更したとき`;
      // }
+
      if (flow !== undefined && flow !== null) {
        store.selectFlow(flow);
      } else {
@@ -125,6 +145,7 @@ export default defineComponent({
      onSelected,
      selectedEvent,
      addChangeEvent,
+      deleteEvent,
      closeDg,
      store
    }
@@ -136,16 +157,21 @@ export default defineComponent({
  flex-wrap: nowarp;
  text-wrap: nowarp;
 }
+
 .event-node {
  cursor: pointer;
 }
+
 .selected-node {
  color: $primary;
  font-weight: bolder;
 }
+
 .event-node:hover {
  background-color: $light-blue-1;
 }

+.delete-btn {
+  margin-right: 5px;
+}
 </style>
-
--- a/frontend/src/control/flowctrl.ts
+++ b/frontend/src/control/flowctrl.ts
@@ -1,11 +1,8 @@
 import { api } from 'boot/axios';
 import { ActionFlow } from 'src/types/ActionTypes';

-export class FlowCtrl
-{
-
-  async getFlows(appId:string):Promise<ActionFlow[]>
-  {
+export class FlowCtrl {
+  async getFlows(appId: string): Promise<ActionFlow[]> {
    const flows: ActionFlow[] = [];
    try {
      const result = await api.get(`api/flows/${appId}`);
@@ -24,10 +21,9 @@ export class FlowCtrl
    }
  }

-  async SaveFlow(jsonData:any):Promise<boolean>
-  {
+  async SaveFlow(jsonData: any): Promise<boolean> {
    const result = await api.post('api/flow', jsonData);
-       console.info(result.data)
+    console.info(result.data);
    return true;
  }
  /**
@@ -35,10 +31,19 @@ export class FlowCtrl
   * @param jsonData
   * @returns
   */
-  async  UpdateFlow(jsonData:any):Promise<boolean>
-  {
+  async UpdateFlow(jsonData: any): Promise<boolean> {
    const result = await api.put('api/flow/' + jsonData.flowid, jsonData);
-    console.info(result.data)
+    console.info(result.data);
+    return true;
+  }
+  /**
+   * フローを消去する
+   * @param flowId
+   * @returns
+   */
+  async DeleteFlow(flowId: string): Promise<boolean> {
+    const result = await api.delete('api/flow/' + flowId);
+    console.info(result.data);
    return true;
  }
  /**
@@ -46,12 +51,9 @@ export class FlowCtrl
   * @param appid
   * @returns
   */
-  async depoly(appid:string):Promise<boolean>
-  {
+  async depoly(appid: string): Promise<boolean> {
    const result = await api.post(`api/v1/createjstokintone?app=${appid}`);
    console.info(result.data);
    return true;
  }
-
 }
-
--- a/frontend/src/pages/FlowChart.vue
+++ b/frontend/src/pages/FlowChart.vue
@@ -20,10 +20,9 @@
          </div>
        </q-drawer>
      </div>
-      <q-btn flat dense round
-              :icon="drawerLeft?'keyboard_double_arrow_left':'keyboard_double_arrow_right'"
-              :style="[drawerLeft?{'left':'300px'}:{'left':'0px'}]"
-              @click="drawerLeft=!drawerLeft" class="expand" />
+      <q-btn flat dense round :icon="drawerLeft ? 'keyboard_double_arrow_left' : 'keyboard_double_arrow_right'"
+        :style="[drawerLeft ? { 'left': '300px' } : { 'left': '0px' }]" @click="drawerLeft = !drawerLeft"
+        class="expand" />
      <div class="q-pa-md q-gutter-sm" :style="{ minWidth: minPanelWidth }">
        <div class="flowchart" v-if="store.currentFlow" :style="[drawerLeft ? { paddingLeft: '300px' } : {}]">
          <node-item v-if="rootNode !== undefined" :key="rootNode.id" :isSelected="rootNode === store.activeNode"
@@ -195,7 +194,22 @@ const onDeploy = async () => {

 const onSaveFlow = async () => {
  const targetFlow = store.selectedFlow;
+
+  const deleteFlows = () => {
+    $q.notify({
+      type: 'positive',
+      caption: "通知",
+      message: `削除 ${store.deleteFlowIds.length} イベント`
+    });
+    store.deletebackendFlow();
+  }
+
  if (targetFlow === undefined) {
+    if (store.deleteFlowIds.length > 0) {
+      deleteFlows();
+      return;
+    }
+
    $q.notify({
      type: 'negative',
      caption: "エラー",
@@ -204,6 +218,9 @@ const onSaveFlow = async () => {
    return;
  }
  try {
+    if (store.deleteFlowIds.length > 0) {
+      deleteFlows();
+    }
    saveLoading.value = true;
    await store.saveFlow(targetFlow);
    saveLoading.value = false;
@@ -265,6 +282,7 @@ onMounted(() => {
  top: 50px;
  z-index: 999;
 }
+
 .expand {
  position: fixed;
  left: 0px;
--- a/frontend/src/stores/flowEditor.ts
+++ b/frontend/src/stores/flowEditor.ts
@@ -12,10 +12,11 @@ export interface FlowEditorState{
  eventTree: KintoneEventManager;
  selectedEvent: IKintoneEvent | undefined;
  expandedScreen: any[];
+  deleteFlowIds: string[];
 }
 const flowCtrl = new FlowCtrl();
 const eventTree = new KintoneEventManager();
-export const useFlowEditorStore = defineStore("flowEditor",{
+export const useFlowEditorStore = defineStore('flowEditor', {
  state: (): FlowEditorState => ({
    flowNames1: '',
    appInfo: undefined,
@@ -24,7 +25,8 @@ export const useFlowEditorStore = defineStore("flowEditor",{
    activeNode: undefined,
    eventTree: eventTree,
    selectedEvent: undefined,
-      expandedScreen:[]
+    expandedScreen: [],
+    deleteFlowIds: [],
  }),
  getters: {
    /**
@@ -43,17 +45,29 @@ export const useFlowEditorStore = defineStore("flowEditor",{
      return (eventId: string) => {
        return state.flows?.find((flow) => {
          const root = flow.getRoot();
-              return root?.name===eventId
+          return root?.name === eventId;
        });
-      }
-    }
+      };
+    },
+
+    findEventById(state) {
+      return (eventId: string) => {
+        return state.eventTree.findEventById(eventId);
+      };
+    },
+
+    findEventFrist(state) {
+      return () => {
+        return state.eventTree.findEventFrist();
+      };
+    },
  },

  actions: {
    setFlows(flows: IActionFlow[]) {
      this.flows = flows;
    },
-    selectFlow(flow:IActionFlow){
+    selectFlow(flow: IActionFlow | undefined) {
      this.selectedFlow = flow;
    },
    setActiveNode(node: IActionNode) {
@@ -62,6 +76,12 @@ export const useFlowEditorStore = defineStore("flowEditor",{
    setApp(app: AppInfo) {
      this.appInfo = app;
    },
+    addDeleteFlowId(flowId: string) {
+      this.deleteFlowIds.push(flowId);
+    },
+    clearDeleteFlowIds() {
+      this.deleteFlowIds = [];
+    },
    /**
     * DBからフルーを保存する
     * @returns
@@ -80,7 +100,7 @@ export const useFlowEditorStore = defineStore("flowEditor",{
      if (actionFlows && actionFlows.length > 0) {
        this.selectFlow(actionFlows[0]);
      }
-        const expandNames = actionFlows.map(flow=>flow.getRoot()?.title);
+      const expandNames = actionFlows.map((flow) => flow.getRoot()?.title);
      // const expandName =actionFlows[0].getRoot()?.title;
      this.expandedScreen = expandNames;
    },
@@ -95,8 +115,8 @@ export const useFlowEditorStore = defineStore("flowEditor",{
        appid: this.appInfo?.appId,
        eventid: root?.name,
        name: root?.subTitle,
-        content: JSON.stringify(flow)
-      }
+        content: JSON.stringify(flow),
+      };

      if (isNew) {
        return await flowCtrl.SaveFlow(jsonData);
@@ -104,6 +124,33 @@ export const useFlowEditorStore = defineStore("flowEditor",{
        return await flowCtrl.UpdateFlow(jsonData);
      }
    },
+
+    async deletebackendFlow() {
+      const deletePromises = Object.values(this.deleteFlowIds).map((flowId) =>
+        flowCtrl.DeleteFlow(flowId)
+      );
+      await Promise.all(deletePromises);
+      this.clearDeleteFlowIds();
+    },
+
+    deleteStoreEventAndFlow(event: IKintoneEvent) {
+      const store = useFlowEditorStore();
+      if (event.flowData) {
+        const flow = event.flowData;
+        if (flow.id === '') {
+          return;
+        }
+        console.log('delete flow', flow);
+        
+        this.addDeleteFlowId(flow.id);
+        eventTree.deleteEvent(event, store);
+        if(this.flows){
+          this.flows = this.flows.filter((f) => f.id !== flow.id);
+        }
+      } else {
+        eventTree.deleteEvent(event, store);
+      }
+    },
    /**
     * デプロイする
     */
@@ -112,7 +159,6 @@ export const useFlowEditorStore = defineStore("flowEditor",{
        return false;
      }
      return await flowCtrl.depoly(this.appInfo?.appId);
-   }
-
-  }
+    },
+  },
 });
--- a/frontend/src/types/KintoneEvents.ts
+++ b/frontend/src/types/KintoneEvents.ts
@@ -1,3 +1,4 @@
+import { useFlowEditorStore } from 'src/stores/flowEditor';
 import { IActionFlow } from './ActionTypes';
 export interface IKintoneEventNode {
  label: string;
@@ -15,18 +16,15 @@ export interface IKintoneEventGroup extends IKintoneEventNode {
  events: IKintoneEventNode[];
 }

-
 export class kintoneEvent implements IKintoneEvent {
  eventId: string;
  parentId: string;
  get hasFlow(): boolean {
-    return this.flowData!==undefined && this.flowData.actionNodes.length>1
-  };
+    return this.flowData !== undefined && this.flowData.actionNodes.length > 1;
+  }
  flowData?: IActionFlow | undefined;
  label: string;
-  get header():string{
-    return "EVENT";
-  }
+  header = 'EVENT';
  constructor(label: string, eventId: string, parentId: string) {
    this.eventId = eventId;
    this.label = label;
@@ -40,9 +38,14 @@ export class kintoneEventGroup implements IKintoneEventGroup{
  label: string;
  events: IKintoneEventNode[];
  get header(): string {
-    return "EVENTGROUP";
+    return 'EVENTGROUP';
  }
-  constructor(eventId:string,label:string,events:IKintoneEventNode[],parentId:string){
+  constructor(
+    eventId: string,
+    label: string,
+    events: IKintoneEventNode[],
+    parentId: string
+  ) {
    this.eventId = eventId;
    this.label = label;
    this.events = events;
@@ -50,16 +53,20 @@ export class kintoneEventGroup implements IKintoneEventGroup{
  }
 }

-
 export class kintoneEventForChange implements IKintoneEventGroup {
  eventId: string;
  parentId: string;
  label: string;
  events: IKintoneEventNode[];
  get header(): string {
-    return "CHANGE";
+    return 'CHANGE';
  }
-  constructor(eventId:string,label:string,events:IKintoneEventNode[],parentId:string){
+  constructor(
+    eventId: string,
+    label: string,
+    events: IKintoneEventNode[],
+    parentId: string
+  ) {
    this.eventId = eventId;
    this.label = label;
    this.events = events;
@@ -67,8 +74,6 @@ export class kintoneEventForChange implements IKintoneEventGroup{
  }
 }

-
-
 export class KintoneEventManager {
  public screens: IKintoneEventGroup[];

@@ -80,24 +85,38 @@ export class KintoneEventManager {
    this.screens = this.getKintoneEvents();
    for (const flow of flows) {
      const eventId = flow.getRoot()?.name;
+      console.log('eventId:', eventId);
      if (eventId !== undefined) {
        const eventNode = this.findEventById(eventId);
-        if(eventNode!==null && eventNode.header==="EVENT"){
+        if (eventNode !== null && eventNode.header === 'EVENT') {
          const event = eventNode as kintoneEvent;
          event.flowData = flow;
        } else {
          //EventGroupのIDを取得
-          const lastIndex = eventId.lastIndexOf(".");
+          const lastIndex = eventId.lastIndexOf('.');
          const groupId = eventId.substring(0, lastIndex);
          const eventNode = this.findEventById(groupId);
-          if(eventNode && (eventNode.header==="EVENTGROUP" || eventNode.header==="CHANGE")){
+          if (
+            eventNode &&
+            (eventNode.header === 'EVENTGROUP' || eventNode.header === 'CHANGE')
+          ) {
            const groupEvent = eventNode as kintoneEventGroup;
-            const newEvent =new kintoneEvent(
-              flow.getRoot()?.subTitle || "",
-              eventId,
-              groupEvent.parentId
-            );
-            newEvent.flowData=flow;
+            console.log('label:', flow.getRoot()?.subTitle);
+
+            const newEvent = {
+              label: flow.getRoot()?.subTitle || '',
+              eventId: eventId,
+              parentId: groupId,
+              header: 'DELETABLE',
+              hasFlow: true,
+              flowData: flow,
+            };
+
+            // new kintoneEvent(
+            // flow.getRoot()?.subTitle || '',
+            // eventId,
+            // groupEvent.parentId
+            // );
            groupEvent.events.push(newEvent);
          }
        }
@@ -105,19 +124,25 @@ export class KintoneEventManager {
    }
  }

+  public findEventFrist() {
+    return this.findEventById('app.record.create.show') as IKintoneEvent;
+  }
+
  public findEventById(eventId: string): IKintoneEventNode | null {
    const screen = this.findScreen(eventId);
-    if(screen) {return screen;}
+    if (screen) {
+      return screen;
+    }
    for (const screen of this.screens) {
      for (const event of screen.events) {
        if (event.eventId === eventId) {
          return event;
        }
-          if(event.header==="EVENTGROUP"||event.header==="CHANGE"){
+        if (event.header === 'EVENTGROUP' || event.header === 'CHANGE') {
          const eventGroup = event as IKintoneEventGroup;
          const targetEvent = eventGroup.events.find((ev) => {
            return ev.eventId === eventId;
-            })
+          });
          if (targetEvent) {
            return targetEvent;
          }
@@ -128,39 +153,169 @@ export class KintoneEventManager {
  }

  public findScreen(eventId: string): IKintoneEventGroup | undefined {
-    return this.screens.find(screen=>screen.eventId==eventId);
+    return this.screens.find((screen) => screen.eventId == eventId);
+  }
+
+  public deleteEvent(
+    event: kintoneEvent,
+    store: ReturnType<typeof useFlowEditorStore>
+  ) {
+    if (event.header !== 'DELETABLE') {
+      return;
+    }
+
+    const parent = store.findEventById(event.parentId);
+    if (parent?.header !== 'CHANGE' && parent?.header !== 'EVENTGROUP') {
+      return;
+    }
+    const realParent = parent as kintoneEventForChange;
+
+    const index = realParent.events.findIndex(
+      (e) => e.eventId === event.eventId
+    );
+
+    if (index !== -1) {
+      realParent.events.splice(index, 1);
+    }
  }

  public getKintoneEvents(): IKintoneEventGroup[] {
    return [
-        new kintoneEventGroup("app.record.create","レコード追加画面",[
-          new kintoneEvent('レコード追加画面を表示した後','app.record.create.show',"app.record.create"),
-          new kintoneEvent('保存をクリックしたとき','app.record.create.submit',"app.record.create"),
-          new kintoneEvent('保存が成功したとき','app.record.create.submit.success',"app.record.create"),
-          new kintoneEventForChange('app.record.create.change','フィールドの値を変更したとき',[],"app.record.create"),
-          new kintoneEventGroup('app.record.create.show.customButtonClick','ボタンをクリックした時',[],"app.record.create")
-        ],""),
-        new kintoneEventGroup("app.record.detail","レコード詳細画面",[
-          new kintoneEvent('レコード詳細画面を表示した後','app.record.detail.show',"app.record.detail"),
-          new kintoneEvent('レコードを削除するとき','app.record.detail.delete.submit',"app.record.detail"),
-          new kintoneEvent('プロセス管理のアクションを実行したとき','app.record.detail.process.proceed',"app.record.detail"),
-          new kintoneEventGroup('app.record.detail.show.customButtonClick','ボタンをクリックした時',[],"app.record.detail"),
-        ],""),
-        new kintoneEventGroup("app.record.edit","レコード編集画面",[
-          new kintoneEvent('レコード編集画面を表示した後','app.record.edit.show',"app.record.edit"),
-          new kintoneEvent('保存をクリックしたとき','app.record.edit.submit',"app.record.edit"),
-          new kintoneEvent('保存が成功したとき','app.record.edit.submit.success',"app.record.edit"),
-          new kintoneEventForChange('app.record.edit.change','フィールドの値を変更したとき',[],"app.record.edit"),
-          new kintoneEventGroup('app.record.edit.show.customButtonClick','ボタンをクリックした時',[],"app.record.edit"),
-        ],""),
-        new kintoneEventGroup("app.record.index","レコード一覧画面",[
-          new kintoneEvent('一覧画面を表示した後', 'app.record.index.show',"app.record.index"),
-          new kintoneEvent('インライン編集を開始したとき','app.record.index.edit.show',"app.record.index"),
-          new kintoneEvent('インライン編集の【保存】をクリックしたとき','app.record.index.edit.submit',"app.record.index"),
-          new kintoneEvent('インライン編集の保存が成功したとき', 'app.record.index.edit.submit.success',"app.record.index"),
-          new kintoneEventForChange('app.record.index.edit.change','インライン編集のフィールド値を変更したとき' ,[],"app.record.index"),
-          new kintoneEventGroup('app.record.detail.show.customButtonClick','ボタンをクリックした時',[],"app.record.index"),
-        ],"")
+      new kintoneEventGroup(
+        'app.record.create',
+        'レコード追加画面',
+        [
+          new kintoneEvent(
+            'レコード追加画面を表示した後',
+            'app.record.create.show',
+            'app.record.create'
+          ),
+          new kintoneEvent(
+            '保存をクリックしたとき',
+            'app.record.create.submit',
+            'app.record.create'
+          ),
+          new kintoneEvent(
+            '保存が成功したとき',
+            'app.record.create.submit.success',
+            'app.record.create'
+          ),
+          new kintoneEventForChange(
+            'app.record.create.change',
+            'フィールドの値を変更したとき',
+            [],
+            'app.record.create'
+          ),
+          new kintoneEventGroup(
+            'app.record.create.show.customButtonClick',
+            'ボタンをクリックした時',
+            [],
+            'app.record.create'
+          ),
+        ],
+        ''
+      ),
+      new kintoneEventGroup(
+        'app.record.detail',
+        'レコード詳細画面',
+        [
+          new kintoneEvent(
+            'レコード詳細画面を表示した後',
+            'app.record.detail.show',
+            'app.record.detail'
+          ),
+          new kintoneEvent(
+            'レコードを削除するとき',
+            'app.record.detail.delete.submit',
+            'app.record.detail'
+          ),
+          new kintoneEvent(
+            'プロセス管理のアクションを実行したとき',
+            'app.record.detail.process.proceed',
+            'app.record.detail'
+          ),
+          new kintoneEventGroup(
+            'app.record.detail.show.customButtonClick',
+            'ボタンをクリックした時',
+            [],
+            'app.record.detail'
+          ),
+        ],
+        ''
+      ),
+      new kintoneEventGroup(
+        'app.record.edit',
+        'レコード編集画面',
+        [
+          new kintoneEvent(
+            'レコード編集画面を表示した後',
+            'app.record.edit.show',
+            'app.record.edit'
+          ),
+          new kintoneEvent(
+            '保存をクリックしたとき',
+            'app.record.edit.submit',
+            'app.record.edit'
+          ),
+          new kintoneEvent(
+            '保存が成功したとき',
+            'app.record.edit.submit.success',
+            'app.record.edit'
+          ),
+          new kintoneEventForChange(
+            'app.record.edit.change',
+            'フィールドの値を変更したとき',
+            [],
+            'app.record.edit'
+          ),
+          new kintoneEventGroup(
+            'app.record.edit.show.customButtonClick',
+            'ボタンをクリックした時',
+            [],
+            'app.record.edit'
+          ),
+        ],
+        ''
+      ),
+      new kintoneEventGroup(
+        'app.record.index',
+        'レコード一覧画面',
+        [
+          new kintoneEvent(
+            '一覧画面を表示した後',
+            'app.record.index.show',
+            'app.record.index'
+          ),
+          new kintoneEvent(
+            'インライン編集を開始したとき',
+            'app.record.index.edit.show',
+            'app.record.index'
+          ),
+          new kintoneEvent(
+            'インライン編集の【保存】をクリックしたとき',
+            'app.record.index.edit.submit',
+            'app.record.index'
+          ),
+          new kintoneEvent(
+            'インライン編集の保存が成功したとき',
+            'app.record.index.edit.submit.success',
+            'app.record.index'
+          ),
+          new kintoneEventForChange(
+            'app.record.index.edit.change',
+            'インライン編集のフィールド値を変更したとき',
+            [],
+            'app.record.index'
+          ),
+          new kintoneEventGroup(
+            'app.record.detail.show.customButtonClick',
+            'ボタンをクリックした時',
+            [],
+            'app.record.index'
+          ),
+        ],
+        ''
+      ),
    ];
  }
 }