From ad827c1dc8ce717fa6823d3542d2c6e728300e0a Mon Sep 17 00:00:00 2001
From: "xiaozhe.ma" <xiaozhe.ma@jp.ricoh.com>
Date: Fri, 6 Sep 2024 09:08:56 +0900
Subject: [PATCH] =?UTF-8?q?feat:TASK617-681=E4=BF=AE=E6=AD=A3=20617:?=
 =?UTF-8?q?=E5=B1=9E=E6=80=A7=E6=9B=B4=E6=96=B0=E6=99=82Toast=E8=A1=A8?=
 =?UTF-8?q?=E7=A4=BA=20618:=E3=83=95=E3=82=A3=E3=83=BC=E3=83=AB=E3=83=89?=
 =?UTF-8?q?=E3=81=AE=E8=A1=A8=E7=A4=BA=E4=BB=B6=E6=95=B0=E3=80=81=E5=88=9D?=
 =?UTF-8?q?=E6=9C=9F=E3=82=BD=E3=83=BC=E3=83=89=E9=A0=86=E5=A4=89=E6=9B=B4?=
 =?UTF-8?q?=20=E3=81=9D=E3=81=AE=E4=BB=96=EF=BC=9A=E3=83=95=E3=83=AD?=
 =?UTF-8?q?=E3=83=BC=E3=82=A8=E3=83=87=E3=82=A3=E3=82=BF=E3=81=AE=E4=B8=8D?=
 =?UTF-8?q?=E5=85=B7=E5=90=88=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/FieldList.vue         | 17 +++++-
 frontend/src/components/FieldSelect.vue       |  4 +-
 frontend/src/components/left/EventTree.vue    | 14 ++---
 frontend/src/components/right/EventSetter.vue | 12 ++--
 .../src/components/right/PropertyPanel.vue    |  8 +--
 frontend/src/pages/FlowChart.vue              | 15 ++++-
 frontend/src/stores/flowEditor.ts             | 19 +++++-
 frontend/src/types/ActionTypes.ts             | 13 ++--
 frontend/src/types/KintoneEvents.ts           | 22 +++----
 plugin/kintone-addins/readme.md               | 60 +++++++++++++++----
 10 files changed, 127 insertions(+), 57 deletions(-)

diff --git a/frontend/src/components/FieldList.vue b/frontend/src/components/FieldList.vue
index 9669d51..dee41f0 100644
--- a/frontend/src/components/FieldList.vue
+++ b/frontend/src/components/FieldList.vue
@@ -1,13 +1,18 @@
 <template>
   <div class="q-pa-md">
     <q-table flat bordered :loading="!isLoaded" row-key="name" :selection="type" :selected="modelValue"
-      @update:selected="$emit('update:modelValue', $event)" :filter="filter" :columns="columns" :rows="rows" />
+      @update:selected="$emit('update:modelValue', $event)"
+      :filter="filter"
+      :columns="columns"
+      :rows="rows"
+      :pagination="pagination"
+      style="max-height: 55vh;"/>
   </div>
 </template>
 <script lang="ts">
 import { useAsyncState } from '@vueuse/core';
 import { api } from 'boot/axios';
-import { computed ,Prop,PropType} from 'vue';
+import { computed ,Prop,PropType,ref} from 'vue';
 import {IField} from 'src/types/ComponentTypes';
 
 export default {
@@ -50,7 +55,13 @@ export default {
       columns,
       rows,
       // selected: ref([]),
-      isLoaded
+      isLoaded,
+      pagination: ref({
+        rowsPerPage: 25,
+        sortBy: 'name',
+        descending: false,
+        page: 1,
+      })
     }
   },
 
diff --git a/frontend/src/components/FieldSelect.vue b/frontend/src/components/FieldSelect.vue
index 0527562..6b77015 100644
--- a/frontend/src/components/FieldSelect.vue
+++ b/frontend/src/components/FieldSelect.vue
@@ -46,10 +46,10 @@ export default {
       { name: 'type', label: 'フィールドタイプ', align: 'left', field: 'type', sortable: true }
     ];
     const pageSetting = ref({
-      sortBy: 'desc',
+      sortBy: 'name',
       descending: false,
       page: 1,
-      rowsPerPage: props.not_page ? 0 : 5
+      rowsPerPage: props.not_page ? 0 : 25
       // rowsNumber: xx if getting data from a server
     });
     const rows = reactive([]);
diff --git a/frontend/src/components/left/EventTree.vue b/frontend/src/components/left/EventTree.vue
index cdee7a9..f6297dd 100644
--- a/frontend/src/components/left/EventTree.vue
+++ b/frontend/src/components/left/EventTree.vue
@@ -43,7 +43,7 @@ import { QTree, useQuasar } from 'quasar';
 import { ActionFlow, RootAction } from 'src/types/ActionTypes';
 import { useFlowEditorStore } from 'stores/flowEditor';
 import { defineComponent, ref,watchEffect } from 'vue';
-import { IKintoneEvent, IKintoneEventGroup, IKintoneEventNode } from '../../types/KintoneEvents';
+import { IKintoneEvent, IKintoneEventGroup, IKintoneEventNode, kintoneEvent } from '../../types/KintoneEvents';
 import FieldSelect from '../FieldSelect.vue';
 import ShowDialog from '../ShowDialog.vue';
 export default defineComponent({
@@ -89,12 +89,12 @@ export default defineComponent({
         if (store.eventTree.findEventById(eventid)) {
           return;
         }
-        selectedChangeEvent.value?.events.push({
-          eventId: eventid,
-          label: field.name,
-          parentId: selectedChangeEvent.value.eventId,
-          header: 'DELETABLE'
-        });
+        selectedChangeEvent.value?.events.push(new kintoneEvent(
+           field.name,
+           eventid,
+           selectedChangeEvent.value.eventId,
+          'DELETABLE'
+        ));
         tree.value?.expanded?.push(selectedChangeEvent.value.eventId);
         tree.value?.expandAll();
       }
diff --git a/frontend/src/components/right/EventSetter.vue b/frontend/src/components/right/EventSetter.vue
index b9f8f2c..5ed6227 100644
--- a/frontend/src/components/right/EventSetter.vue
+++ b/frontend/src/components/right/EventSetter.vue
@@ -81,12 +81,12 @@ export default defineComponent({
         if(store.eventTree.findEventById(addEventId)){
           return;
         }
-        customEvents.events.push({
-          eventId: addEventId,
-          label: displayName,
-          parentId: customButtonId,
-          header: 'DELETABLE'
-        });
+        customEvents.events.push(new kintoneEvent(
+           displayName,
+          addEventId,
+          customButtonId,
+          'DELETABLE'
+        ));
       }
     }
     watchEffect(() => {
diff --git a/frontend/src/components/right/PropertyPanel.vue b/frontend/src/components/right/PropertyPanel.vue
index a5fca22..5384028 100644
--- a/frontend/src/components/right/PropertyPanel.vue
+++ b/frontend/src/components/right/PropertyPanel.vue
@@ -30,8 +30,8 @@
    </div>
  </template>
  <script lang="ts">
- import {  ref,defineComponent, PropType ,watchEffect} from 'vue'
- import PropertyList from 'components/right/PropertyList.vue';
+import {  ref,defineComponent, PropType ,watchEffect} from 'vue'
+import PropertyList from 'components/right/PropertyList.vue';
 import { IActionNode, IActionProperty } from 'src/types/ActionTypes';
  export default defineComponent({
   name: 'PropertyPanel',
@@ -53,7 +53,7 @@ import { IActionNode, IActionProperty } from 'src/types/ActionTypes';
     'saveActionProps'
   ],
   setup(props,{emit}) {
-    const showPanel =ref(props.drawerRight);
+     const showPanel =ref(props.drawerRight);
 
     const cloneProps = (actionProps:IActionProperty[]):IActionProperty[]|null=>{
         if(!actionProps){
@@ -81,7 +81,7 @@ import { IActionNode, IActionProperty } from 'src/types/ActionTypes';
     const save = async () =>{
       showPanel.value=false;
       emit('saveActionProps', actionProps.value);
-      emit('update:drawerRight',false )
+      emit('update:drawerRight',false );
     }
 
     return {
diff --git a/frontend/src/pages/FlowChart.vue b/frontend/src/pages/FlowChart.vue
index d741232..9e95e78 100644
--- a/frontend/src/pages/FlowChart.vue
+++ b/frontend/src/pages/FlowChart.vue
@@ -213,6 +213,11 @@ const onDeploy = async () => {
 const onSaveActionProps=(props:IActionProperty[])=>{
   if(store.activeNode){
       store.activeNode.actionProps=props;
+      $q.notify({
+        type: 'positive',
+        caption: "通知",
+        message: `${store.activeNode?.subTitle}の属性設定を更新しました。`
+      });
   }
 };
 
@@ -261,13 +266,17 @@ const onSaveAllFlow= async ()=>{
     }
     saveLoading.value = true;
     for(const flow of targetFlows ){
+      const isNew = flow.id === '';
+      if(isNew && flow.actionNodes.length===1){
+        continue;
+      }
       await store.saveFlow(flow);
-      $q.notify({
+    }
+    $q.notify({
         type: 'positive',
         caption: "通知",
-        message: `${flow.getRoot()?.subTitle}のフロー設定を保存しました。`
+        message: `すべてのフロー設定を保存しました。`
       });
-    }
     saveLoading.value = false;
   }catch (error) {
     console.error(error);
diff --git a/frontend/src/stores/flowEditor.ts b/frontend/src/stores/flowEditor.ts
index 3eb23f6..75dbf11 100644
--- a/frontend/src/stores/flowEditor.ts
+++ b/frontend/src/stores/flowEditor.ts
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia';
 import { AppInfo, IActionFlow, IActionNode } from 'src/types/ActionTypes';
-import { IKintoneEvent, KintoneEventManager } from 'src/types/KintoneEvents';
+import { IKintoneEvent, KintoneEventManager, kintoneEvent } from 'src/types/KintoneEvents';
 import { FlowCtrl } from '../control/flowctrl';
 
 export interface FlowEditorState {
@@ -101,6 +101,12 @@ export const useFlowEditorStore = defineStore('flowEditor', {
         const eventNode=this.eventTree.findEventById(eventid||'');
         if(eventNode){
           expandScreens.push(eventNode.parentId);
+          if(eventNode.header==='DELETABLE'){
+            const groupEvent = this.eventTree.findEventById(eventNode.parentId);
+            if(groupEvent){
+              expandScreens.push(groupEvent.parentId);
+            }
+          }
         }
       });
       // const expandName =actionFlows[0].getRoot()?.title;
@@ -109,7 +115,7 @@ export const useFlowEditorStore = defineStore('flowEditor', {
     /**
      * フローをDBに保存及び更新する
      */
-    async saveFlow(flow: IActionFlow) {
+    async saveFlow(flow: IActionFlow):Promise<boolean> {
       const root = flow.getRoot();
       const isNew = flow.id === '';
       const jsonData = {
@@ -123,7 +129,14 @@ export const useFlowEditorStore = defineStore('flowEditor', {
       if (isNew) {
         return await flowCtrl.SaveFlow(jsonData);
       } else {
-        return await flowCtrl.UpdateFlow(jsonData);
+        if(flow.actionNodes.length>1){
+          return await flowCtrl.UpdateFlow(jsonData);
+        }else{
+          const eventId = flow.getRoot()?.name||'';
+          const eventNode = eventTree.findEventById(eventId) as kintoneEvent;
+          eventNode.flowData=undefined;
+          return await flowCtrl.DeleteFlow(flow.id);
+        }
       }
     },
 
diff --git a/frontend/src/types/ActionTypes.ts b/frontend/src/types/ActionTypes.ts
index dc48c71..942a25d 100644
--- a/frontend/src/types/ActionTypes.ts
+++ b/frontend/src/types/ActionTypes.ts
@@ -292,6 +292,11 @@ export class ActionFlow implements IActionFlow {
     if (!targetNode) {
       return false;
     }
+    if(targetNode.isRoot){
+      this.actionNodes=[targetNode];
+      targetNode.nextNodeIds.clear();
+      return;
+    }
     if (targetNode.nextNodeIds.size == 0) {
       return false;
     }
@@ -312,9 +317,9 @@ export class ActionFlow implements IActionFlow {
     if (!targetNode) {
       return
     }
-    if (targetNode.nextNodeIds.size == 0) {
-      return
-    }
+    // if (targetNode.nextNodeIds.size == 0) {
+    //   return
+    // }
     for (const [, id] of targetNode.nextNodeIds) {
       this.removeAll(id);
     }
@@ -460,7 +465,7 @@ export class ActionFlow implements IActionFlow {
 
       if(prevNode.varName.modelValue ==='object'){
         console.log(prevNode);
-        
+
       }
 
       varNames.unshift({
diff --git a/frontend/src/types/KintoneEvents.ts b/frontend/src/types/KintoneEvents.ts
index 4e43bbb..f0fdf7c 100644
--- a/frontend/src/types/KintoneEvents.ts
+++ b/frontend/src/types/KintoneEvents.ts
@@ -24,11 +24,12 @@ export class kintoneEvent implements IKintoneEvent {
   }
   flowData?: IActionFlow | undefined;
   label: string;
-  header = 'EVENT';
-  constructor(label: string, eventId: string, parentId: string) {
+  header :string;
+  constructor(label: string, eventId: string, parentId: string,header?:string) {
     this.eventId = eventId;
     this.label = label;
     this.parentId = parentId;
+    this.header=header?header:'EVENT';
   }
 }
 
@@ -97,16 +98,9 @@ export class KintoneEventManager {
           const eventNode = this.findEventById(groupId);
           if (eventNode && (eventNode.header === 'EVENTGROUP' || eventNode.header === 'CHANGE')) {
             const groupEvent = eventNode as kintoneEventGroup;
-
-            const newEvent = {
-              label: flow.getRoot()?.subTitle || '',
-              eventId: eventId,
-              parentId: groupId,
-              header: 'DELETABLE',
-              hasFlow: true,
-              flowData: flow,
-            };
-
+            const label=flow.getRoot()?.subTitle || '';
+            const newEvent = new kintoneEvent(label,eventId,groupId,'DELETABLE');
+            newEvent.flowData=flow;
             groupEvent.events.push(newEvent);
           }
         }
@@ -149,8 +143,8 @@ export class KintoneEventManager {
           }
         }else if (event.header === 'EVENTGROUP' || event.header === 'CHANGE') {
           const eventGroup = event as IKintoneEventGroup;
-          const targetEvent = eventGroup.events.find((ev) => {
-            if (ev.header === "EVENT") {
+          eventGroup.events.forEach((ev) => {
+            if (ev.header === "EVENT" || ev.header === "DELETABLE") {
               const eventNode = ev as IKintoneEvent;
               if(eventNode.flowData!==undefined){
                 flows.push(eventNode.flowData);
diff --git a/plugin/kintone-addins/readme.md b/plugin/kintone-addins/readme.md
index b93b934..c5fddd3 100644
--- a/plugin/kintone-addins/readme.md
+++ b/plugin/kintone-addins/readme.md
@@ -70,23 +70,61 @@
 | placeholder | 対象項目を選択してください| 入力フィールドに表示されるプレースホルダーのテキストです。この場合は設定されていません。          |
 | hint        | 説明文| 長い説明文を設定することが可能です。（markdown形式サポート予定、現在HTML可能）          |
 | selectType  |`single` or `multiple`| フィールド選択・他のアプリのフィールド選択の選択モードを設定する         |
-| required  | boolean | 必須チェックするかどうか         |
-| requiredMessage  | string | 必須チェック時のエラーメッセージ。（未設定の場合「XXXX」が必須です。になります）        |
-| rules  |"[val=>val<=100 && val>=1 \|\| '1-100の範囲内の数値を入力してください']"| 必須チェック以外のルールを設定する  |
+| required    | boolean | 必須チェックするかどうか         |
+| requiredMessage| string | 必須チェック時のエラーメッセージ。（未設定の場合「XXXX」が必須です。になります）        |
+| rules       |"[val=>val<=100 && val>=1 \|\| '1-100の範囲内の数値を入力してください']"| 必須チェック以外のルールを設定する  |
+| fieldTypes  |["SINGLE_LINE_TEXT","MULTI_LINE_TEXT","NUMBER"]| FieldInput,AppFieldSelectのみ使用可能。  |
+
 
 ### 使用可能なコンポーネント
 | No. | コンポーネント名      | コンポーネントタイプ | 説明                                     |
 |-----|------------------|------------------|-----------------------------------------|
 | 1   | テキストボックス    | InputText        | 一行のテキスト入力が可能なフィールドです。                 |
 | 2   | テキストボックス（改行可能） | MuiltInputText   | 複数行のテキスト入力が可能なテキストエリアです。          |
-| 3   | 日付            | DatePicker       | 日付を選択するためのカレンダーコンポーネントです。          |
-| 4   | フィールド選択     | FieldInput       | システムのフィールドを選択するための入力コンポーネントです。   |
-| 5   | 選択リスト        | SelectBox        | 複数のオプションから選択するためのドロップダウンリストです。   |
-| 6   | 条件式設定       | ConditionInput   | 条件式やロジックを入力するためのコンポーネントです。         |
-| 7   | イベント設定       |EventSetter    | ボタンイベント設定のコンポーネントです。         |
-| 8   | 色選択       | ColorPicker   | 色を設定する         |
-| 9   | 他のアプリのフィールド選択       | AppFieldSelect   | 他のアプリのフィールドを選択する |
-| 10  | アプリ選択       | AppSelect   | アプリを選択する         |
+| 3   | 数値入力 | NumInput   | 数値のみ入力可能フィールド。          |
+| 4   | 日付            | DatePicker       | 日付を選択するためのカレンダーコンポーネントです。          |
+| 5   | フィールド選択     | FieldInput       | システムのフィールドを選択するための入力コンポーネントです。   |
+| 6   | 選択リスト        | SelectBox        | 複数のオプションから選択するためのドロップダウンリストです。   |
+| 7   | 条件式設定       | ConditionInput   | 条件式やロジックを入力するためのコンポーネントです。         |
+| 8   | イベント設定       |EventSetter    | ボタンイベント設定のコンポーネントです。         |
+| 9   | 色選択       | ColorPicker   | 色を設定する         |
+| 10  | 他のアプリのフィールド選択       | AppFieldSelect   | 他のアプリのフィールドを選択する |
+| 11  | アプリ選択       | AppSelect   | アプリを選択する         |
+
+### フィールド選択コンポーネントのfieldTypes属性を使用可能フィールド種別
+| 番号 | 項目タイプ名          | 種別タイプ        |
+|------|-----------------------|-------------------|
+| 1    | カテゴリー            | CATEGORY          |
+| 2    | 作成日時              | CREATED_TIME      |
+| 3    | 作成者                | CREATOR           |
+| 4    | 更新者                | MODIFIER          |
+| 5    | レコード番号          | RECORD_NUMBER     |
+| 6    | 更新日時              | UPDATED_TIME      |
+| 7    | 計算                  | CALC              |
+| 8    | チェックボックス      | CHECK_BOX         |
+| 9    | 日付                  | DATE              |
+| 10   | 日時                  | DATETIME          |
+| 11   | ドロップダウン        | DROP_DOWN         |
+| 12   | 添付ファイル          | FILE              |
+| 13   | グループ              | GROUP             |
+| 14   | グループ選択          | GROUP_SELECT      |
+| 15   | リンク                | LINK              |
+| 16   | 文字列 (複数行)       | MULTI_LINE_TEXT   |
+| 17   | 複数選択              | MULTI_SELECT      |
+| 18   | 数値                  | NUMBER            |
+| 19   | 組織選択              | ORGANIZATION_SELECT |
+| 20   | ラジオボタン          | RADIO_BUTTON      |
+| 21   | 関連レコード一覧      | REFERENCE_TABLE   |
+| 22   | リッチエディター      | RICH_TEXT         |
+| 23   | 文字列 (1行)          | SINGLE_LINE_TEXT  |
+| 24   | ステータス            | STATUS            |
+| 25   | 作業者                | STATUS_ASSIGNEE   |
+| 26   | テーブル              | SUBTABLE          |
+| 27   | 時刻                  | TIME              |
+| 28   | ユーザー選択          | USER_SELECT       |
+| 29   | スペース              | SPACER            |
+| 30   | ルックアップ          | lookup            |
+
 
 ## 2.アクションアドインの開発