alicorn-dev/KintoneAppBuilder
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged PR 91: feat:TASK617-681修正

Browse Source 
feat:TASK617-681修正
617:属性更新時Toast表示
618:フィールドの表示件数、初期ソード順変更
その他：フローエディタの不具合修正

Related work items: #617, #618
This commit is contained in:
Shohtetsu Ma
2024-09-09 04:37:02 +00:00
committed by Takuto Yoshida（タクト）
parent c907fd8473 ad827c1dc8
commit b3c65fb4b5
10 changed files with 127 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/components/FieldList.vue
View File

@@ -1,13 +1,18 @@
<template> <template>
<div class="q-pa-md"> <div class="q-pa-md">
<q-table flat bordered :loading="!isLoaded" row-key="name" :selection="type" :selected="modelValue" <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> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { useAsyncState } from '@vueuse/core'; import { useAsyncState } from '@vueuse/core';
import { api } from 'boot/axios'; import { api } from 'boot/axios';
import { computed ,Prop,PropType} from 'vue'; import { computed ,Prop,PropType,ref} from 'vue';
import {IField} from 'src/types/ComponentTypes'; import {IField} from 'src/types/ComponentTypes';
export default { export default {
@@ -50,7 +55,13 @@ export default {
columns, columns,
rows, rows,
// selected: ref([]), // selected: ref([]),
isLoaded isLoaded,
pagination: ref({
rowsPerPage: 25,
sortBy: 'name',
descending: false,
page: 1,
})
} }
}, },

4
frontend/src/components/FieldSelect.vue
View File

@@ -46,10 +46,10 @@ export default {
{ name: 'type', label: 'フィールドタイプ', align: 'left', field: 'type', sortable: true } { name: 'type', label: 'フィールドタイプ', align: 'left', field: 'type', sortable: true }
]; ];
const pageSetting = ref({ const pageSetting = ref({
sortBy: 'desc', sortBy: 'name',
descending: false, descending: false,
page: 1, page: 1,
rowsPerPage: props.not_page ? 0 : 5 rowsPerPage: props.not_page ? 0 : 25
// rowsNumber: xx if getting data from a server // rowsNumber: xx if getting data from a server
}); });
const rows = reactive([]); const rows = reactive([]);

14
frontend/src/components/left/EventTree.vue
View File

@@ -43,7 +43,7 @@ import { QTree, useQuasar } from 'quasar';
import { ActionFlow, RootAction } from 'src/types/ActionTypes'; import { ActionFlow, RootAction } from 'src/types/ActionTypes';
import { useFlowEditorStore } from 'stores/flowEditor'; import { useFlowEditorStore } from 'stores/flowEditor';
import { defineComponent, ref,watchEffect } from 'vue'; 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 FieldSelect from '../FieldSelect.vue';
import ShowDialog from '../ShowDialog.vue'; import ShowDialog from '../ShowDialog.vue';
export default defineComponent({ export default defineComponent({
@@ -89,12 +89,12 @@ export default defineComponent({
if (store.eventTree.findEventById(eventid)) { if (store.eventTree.findEventById(eventid)) {
return; return;
} }
selectedChangeEvent.value?.events.push({ selectedChangeEvent.value?.events.push(new kintoneEvent(
eventId: eventid, field.name,
label: field.name, eventid,
parentId: selectedChangeEvent.value.eventId, selectedChangeEvent.value.eventId,
header: 'DELETABLE' 'DELETABLE'
}); ));
tree.value?.expanded?.push(selectedChangeEvent.value.eventId); tree.value?.expanded?.push(selectedChangeEvent.value.eventId);
tree.value?.expandAll(); tree.value?.expandAll();
} }

12
frontend/src/components/right/EventSetter.vue
View File

@@ -81,12 +81,12 @@ export default defineComponent({
if(store.eventTree.findEventById(addEventId)){ if(store.eventTree.findEventById(addEventId)){
return; return;
} }
customEvents.events.push({ customEvents.events.push(new kintoneEvent(
eventId: addEventId, displayName,
label: displayName, addEventId,
parentId: customButtonId, customButtonId,
header: 'DELETABLE' 'DELETABLE'
}); ));
} }
} }
watchEffect(() => { watchEffect(() => {

8
frontend/src/components/right/PropertyPanel.vue
View File

@@ -30,8 +30,8 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { ref,defineComponent, PropType ,watchEffect} from 'vue' import { ref,defineComponent, PropType ,watchEffect} from 'vue'
import PropertyList from 'components/right/PropertyList.vue'; import PropertyList from 'components/right/PropertyList.vue';
import { IActionNode, IActionProperty } from 'src/types/ActionTypes'; import { IActionNode, IActionProperty } from 'src/types/ActionTypes';
export default defineComponent({ export default defineComponent({
name: 'PropertyPanel', name: 'PropertyPanel',
@@ -53,7 +53,7 @@ import { IActionNode, IActionProperty } from 'src/types/ActionTypes';
'saveActionProps' 'saveActionProps'
], ],
setup(props,{emit}) { setup(props,{emit}) {
const showPanel =ref(props.drawerRight); const showPanel =ref(props.drawerRight);
const cloneProps = (actionProps:IActionProperty[]):IActionProperty[]|null=>{ const cloneProps = (actionProps:IActionProperty[]):IActionProperty[]|null=>{
if(!actionProps){ if(!actionProps){
@@ -81,7 +81,7 @@ import { IActionNode, IActionProperty } from 'src/types/ActionTypes';
const save = async () =>{ const save = async () =>{
showPanel.value=false; showPanel.value=false;
emit('saveActionProps', actionProps.value); emit('saveActionProps', actionProps.value);
emit('update:drawerRight',false ) emit('update:drawerRight',false );
} }
return { return {

15
frontend/src/pages/FlowChart.vue
View File

@@ -213,6 +213,11 @@ const onDeploy = async () => {
const onSaveActionProps=(props:IActionProperty[])=>{ const onSaveActionProps=(props:IActionProperty[])=>{
if(store.activeNode){ if(store.activeNode){
store.activeNode.actionProps=props; store.activeNode.actionProps=props;
$q.notify({
type: 'positive',
caption: "通知",
message: `${store.activeNode?.subTitle}の属性設定を更新しました。`
});
} }
}; };
@@ -261,13 +266,17 @@ const onSaveAllFlow= async ()=>{
} }
saveLoading.value = true; saveLoading.value = true;
for(const flow of targetFlows ){ for(const flow of targetFlows ){
const isNew = flow.id === '';
if(isNew && flow.actionNodes.length===1){
continue;
}
await store.saveFlow(flow); await store.saveFlow(flow);
$q.notify({ }
$q.notify({
type: 'positive', type: 'positive',
caption: "通知", caption: "通知",
message: `${flow.getRoot()?.subTitle}のフロー設定を保存しました。` message: `すべてのフロー設定を保存しました。`
}); });
}
saveLoading.value = false; saveLoading.value = false;
}catch (error) { }catch (error) {
console.error(error); console.error(error);

19
frontend/src/stores/flowEditor.ts
View File

@@ -1,6 +1,6 @@
import { defineStore } from 'pinia'; import { defineStore } from 'pinia';
import { AppInfo, IActionFlow, IActionNode } from 'src/types/ActionTypes'; 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'; import { FlowCtrl } from '../control/flowctrl';
export interface FlowEditorState { export interface FlowEditorState {
@@ -101,6 +101,12 @@ export const useFlowEditorStore = defineStore('flowEditor', {
const eventNode=this.eventTree.findEventById(eventid||''); const eventNode=this.eventTree.findEventById(eventid||'');
if(eventNode){ if(eventNode){
expandScreens.push(eventNode.parentId); 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; // const expandName =actionFlows[0].getRoot()?.title;
@@ -109,7 +115,7 @@ export const useFlowEditorStore = defineStore('flowEditor', {
/** /**
* フローをDBに保存及び更新する * フローをDBに保存及び更新する
*/ */
async saveFlow(flow: IActionFlow) { async saveFlow(flow: IActionFlow):Promise<boolean> {
const root = flow.getRoot(); const root = flow.getRoot();
const isNew = flow.id === ''; const isNew = flow.id === '';
const jsonData = { const jsonData = {
@@ -123,7 +129,14 @@ export const useFlowEditorStore = defineStore('flowEditor', {
if (isNew) { if (isNew) {
return await flowCtrl.SaveFlow(jsonData); return await flowCtrl.SaveFlow(jsonData);
} else { } 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);
}
} }
}, },

11
frontend/src/types/ActionTypes.ts
View File

@@ -292,6 +292,11 @@ export class ActionFlow implements IActionFlow {
if (!targetNode) { if (!targetNode) {
return false; return false;
} }
if(targetNode.isRoot){
this.actionNodes=[targetNode];
targetNode.nextNodeIds.clear();
return;
}
if (targetNode.nextNodeIds.size == 0) { if (targetNode.nextNodeIds.size == 0) {
return false; return false;
} }
@@ -312,9 +317,9 @@ export class ActionFlow implements IActionFlow {
if (!targetNode) { if (!targetNode) {
return return
} }
if (targetNode.nextNodeIds.size == 0) { // if (targetNode.nextNodeIds.size == 0) {
return // return
} // }
for (const [, id] of targetNode.nextNodeIds) { for (const [, id] of targetNode.nextNodeIds) {
this.removeAll(id); this.removeAll(id);
} }

22
frontend/src/types/KintoneEvents.ts
View File

@@ -24,11 +24,12 @@ export class kintoneEvent implements IKintoneEvent {
} }
flowData?: IActionFlow | undefined; flowData?: IActionFlow | undefined;
label: string; label: string;
header = 'EVENT'; header :string;
constructor(label: string, eventId: string, parentId: string) { constructor(label: string, eventId: string, parentId: string,header?:string) {
this.eventId = eventId; this.eventId = eventId;
this.label = label; this.label = label;
this.parentId = parentId; this.parentId = parentId;
this.header=header?header:'EVENT';
} }
} }
@@ -97,16 +98,9 @@ export class KintoneEventManager {
const eventNode = this.findEventById(groupId); 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 groupEvent = eventNode as kintoneEventGroup;
const label=flow.getRoot()?.subTitle || '';
const newEvent = { const newEvent = new kintoneEvent(label,eventId,groupId,'DELETABLE');
label: flow.getRoot()?.subTitle || '', newEvent.flowData=flow;
eventId: eventId,
parentId: groupId,
header: 'DELETABLE',
hasFlow: true,
flowData: flow,
};
groupEvent.events.push(newEvent); groupEvent.events.push(newEvent);
} }
} }
@@ -149,8 +143,8 @@ export class KintoneEventManager {
} }
}else if (event.header === 'EVENTGROUP' || event.header === 'CHANGE') { }else if (event.header === 'EVENTGROUP' || event.header === 'CHANGE') {
const eventGroup = event as IKintoneEventGroup; const eventGroup = event as IKintoneEventGroup;
const targetEvent = eventGroup.events.find((ev) => { eventGroup.events.forEach((ev) => {
if (ev.header === "EVENT") { if (ev.header === "EVENT" || ev.header === "DELETABLE") {
const eventNode = ev as IKintoneEvent; const eventNode = ev as IKintoneEvent;
if(eventNode.flowData!==undefined){ if(eventNode.flowData!==undefined){
flows.push(eventNode.flowData); flows.push(eventNode.flowData);

60
plugin/kintone-addins/readme.md
View File

@@ -70,23 +70,61 @@
| placeholder | 対象項目を選択してください| 入力フィールドに表示されるプレースホルダーのテキストです。この場合は設定されていません。 | | placeholder | 対象項目を選択してください| 入力フィールドに表示されるプレースホルダーのテキストです。この場合は設定されていません。 |
| hint | 説明文| 長い説明文を設定することが可能です。（markdown形式サポート予定、現在HTML可能） | | hint | 説明文| 長い説明文を設定することが可能です。（markdown形式サポート予定、現在HTML可能） |
| selectType |`single` or `multiple`| フィールド選択・他のアプリのフィールド選択の選択モードを設定する | | selectType |`single` or `multiple`| フィールド選択・他のアプリのフィールド選択の選択モードを設定する |
| required | boolean | 必須チェックするかどうか | | required | boolean | 必須チェックするかどうか |
| requiredMessage | string | 必須チェック時のエラーメッセージ。（未設定の場合「XXXX」が必須です。になります） | | requiredMessage| string | 必須チェック時のエラーメッセージ。（未設定の場合「XXXX」が必須です。になります） |
| rules |"[val=>val<=100 && val>=1 \|\| '1-100の範囲内の数値を入力してください']"| 必須チェック以外のルールを設定する | | rules |"[val=>val<=100 && val>=1 \|\| '1-100の範囲内の数値を入力してください']"| 必須チェック以外のルールを設定する |
| fieldTypes |["SINGLE_LINE_TEXT","MULTI_LINE_TEXT","NUMBER"]| FieldInput,AppFieldSelectのみ使用可能。 |
### 使用可能なコンポーネント ### 使用可能なコンポーネント
| No. | コンポーネント名 | コンポーネントタイプ | 説明 | | No. | コンポーネント名 | コンポーネントタイプ | 説明 |
|-----|------------------|------------------|-----------------------------------------| |-----|------------------|------------------|-----------------------------------------|
| 1 | テキストボックス | InputText | 一行のテキスト入力が可能なフィールドです。 | | 1 | テキストボックス | InputText | 一行のテキスト入力が可能なフィールドです。 |
| 2 | テキストボックス（改行可能） | MuiltInputText | 複数行のテキスト入力が可能なテキストエリアです。 | | 2 | テキストボックス（改行可能） | MuiltInputText | 複数行のテキスト入力が可能なテキストエリアです。 |
| 3 | 日付 | DatePicker | 日付を選択するためのカレンダーコンポーネントです。 | | 3 | 数値入力 | NumInput | 数値のみ入力可能フィールド。 |
| 4 | フィールド選択 | FieldInput | システムのフィールドを選択するための入力コンポーネントです。 | | 4 | 日付 | DatePicker | 日付を選択するためのカレンダーコンポーネントです。 |
| 5 | 選択リスト | SelectBox | 複数のオプションから選択するためのドロップダウンリストです。 | | 5 | フィールド選択 | FieldInput | システムのフィールドを選択するための入力コンポーネントです。 |
| 6 | 条件式設定 | ConditionInput | 条件式やロジックを入力するためのコンポーネントです。 | | 6 | 選択リスト | SelectBox | 複数のオプションから選択するためのドロップダウンリストです。 |
| 7 | イベント設定 |EventSetter | ボタンイベント設定のコンポーネントです。 | | 7 | 条件式設定 | ConditionInput | 条件式やロジックを入力するためのコンポーネントです。 |
| 8 | 色選択 | ColorPicker | 色を設定する | | 8 | イベント設定 |EventSetter | ボタンイベント設定のコンポーネントです。 |
| 9 | 他のアプリのフィールド選択 | AppFieldSelect | 他のアプリのフィールドを選択する | | 9 | 色選択 | ColorPicker | 色を設定する |
| 10 | アプリ選択 | AppSelect | アプリを選択する | | 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.アクションアドインの開発 ## 2.アクションアドインの開発