feat:TASK617-681修正

617:属性更新時Toast表示 618:フィールドの表示件数、初期ソード順変更その他：フローエディタの不具合修正
2024-09-06 09:08:56 +09:00
parent a7783987a8
commit ad827c1dc8
10 changed files with 127 additions and 57 deletions
--- 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,
+      })
    }
  },

--- 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([]);
--- 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();
      }
--- 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(() => {
--- a/frontend/src/components/right/PropertyPanel.vue
+++ b/frontend/src/components/right/PropertyPanel.vue
@@ -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 {
--- 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({
        type: 'positive',
        caption: "通知",
-        message: `${flow.getRoot()?.subTitle}のフロー設定を保存しました。`
+        message: `すべてのフロー設定を保存しました。`
      });
-    }
    saveLoading.value = false;
  }catch (error) {
    console.error(error);
--- 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 {
+        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);
+        }
      }
    },

--- 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);
    }
--- 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);
--- a/plugin/kintone-addins/readme.md
+++ b/plugin/kintone-addins/readme.md
@@ -73,20 +73,58 @@
 | 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.アクションアドインの開発