条件設定関連No511,512障害修正

frontend/.env

@@ -1,6 +1,6 @@
 #開発環境
-KAB_BACKEND_URL="https://kab-backend.azurewebsites.net/"
+#KAB_BACKEND_URL="https://kab-backend.azurewebsites.net/"
 #単体テスト環境
 #KAB_BACKEND_URL="https://kab-backend-unittest.azurewebsites.net/"
 #ローカル開発環境
-#KAB_BACKEND_URL="http://127.0.0.1:8000/"
+KAB_BACKEND_URL="http://127.0.0.1:8000/"

frontend/src/components/ConditionEditor/ConditionObject.vue

@@ -1,5 +1,4 @@
 <template>
-  <div class="q-pa-sm">
     <q-field labelColor="primary" class="condition-object" dense outlined :label="label" :disable="disabled"
       :clearable="isSelected">
       <template v-slot:control>
@@ -26,19 +25,20 @@
       <condition-objects ref="appDg" name="フィールド" type="single" :filter="filter" :appId="store.appInfo?.appId" :vars="vars"></condition-objects>
     -->
       <DynamicItemInput v-model:selectedObject="selectedObject" :canInput="config.canInput"
-        :buttonsConfig="config.buttonsConfig" :appId="store.appInfo?.appId" />
+        :buttonsConfig="config.buttonsConfig" :appId="store.appInfo?.appId" :options="options" ref="inputRef" />
 
   </show-dialog>
-</div>
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, ref, watchEffect, computed } from 'vue';
+import { defineComponent, reactive, ref, watchEffect, computed ,PropType} from 'vue';
 import ShowDialog from '../ShowDialog.vue';
 // import ConditionObjects from '../ConditionObjects.vue';
 import DynamicItemInput from '../DynamicItemInput/DynamicItemInput.vue';
 import { useFlowEditorStore } from '../../stores/flowEditor';
 import { IActionFlow, IActionNode, IActionVariable } from '../../types/ActionTypes';
+import { IDynamicInputConfig } from 'src/types/ComponentTypes';
+
 
 export default defineComponent({
   name: 'ConditionObject',
@@ -57,7 +57,7 @@ export default defineComponent({
       default: undefined
     },
     config: {
-      type: Object,
+      type: Object as PropType<IDynamicInputConfig>,
       default: () => {
         return {
           canInput: false,
@@ -68,6 +68,12 @@ export default defineComponent({
         };
       }
     },
+
+    options:
+    {
+      type:Array as PropType< string[]>,
+      default:()=>[]
+    },
     modelValue: {
       type: Object,
       default: null
@@ -75,6 +81,7 @@ export default defineComponent({
   },
   setup(props, { emit }) {
     // const appDg = ref();
+    const inputRef=ref();
     const show = ref(false);
     const selectedObject = ref(props.modelValue);
     const store = useFlowEditorStore();
@@ -97,6 +104,7 @@ export default defineComponent({
     const closeDg = (val: string) => {
       if (val == 'OK') {
         // selectedObject.value = appDg.value.selected[0];
+        selectedObject.value = inputRef.value.selectedObjectRef
       }
     };
 
@@ -105,6 +113,7 @@ export default defineComponent({
     });
 
     return {
+      inputRef,
       store,
       // appDg,
       show,

frontend/src/components/ConditionEditor/NodeCondition.vue

@@ -69,17 +69,19 @@
             <div class="row no-wrap items-center q-my-xs">
               <ConditionObject v-bind="prop.node" v-model="prop.node.object" :config="leftDynamicItemConfig" class="col-4"/>
               <q-select  v-model="prop.node.operator" :options="operators"  class="operator" :outlined="true" :dense="true"></q-select>
-              <ConditionObject v-bind="prop.node" v-model="prop.node.value" :config="rightDynamicItemConfig" class="col-4"/>
+              <ConditionObject v-bind="prop.node" v-model="prop.node.value" :config="rightDynamicItemConfig" class="col-4"
+              :options="objectValueOptions(prop.node?.object?.options)"
+              />
               <!-- <ConditionObject v-bind="prop.node" v-model="prop.node.object" class="col-4"/> -->
               <!-- <q-input v-if="!prop.node.object || !('options' in prop.node.object)"
                         v-model="prop.node.value"
                         class="condition-value" :outlined="true" :dense="true" ></q-input> -->
-              <q-select v-if="prop.node.object && ('options' in prop.node.object)"
+              <!-- <q-select v-if="prop.node.object && ('options' in prop.node.object)"
                         v-model="prop.node.value"
                         :options="objectValueOptions(prop.node.object.options)"
                         clearable
                         value-key="index"
-                        class="condition-value" :outlined="true" :dense="true" ></q-select>
+                        class="condition-value" :outlined="true" :dense="true" ></q-select> -->
               <q-btn flat round dense icon="more_horiz" size="sm" >
               <q-menu  auto-close anchor="top right">
                   <q-list>
@@ -118,6 +120,7 @@ import { finished } from 'stream';
 import { defineComponent,ref,reactive, computed, inject } from 'vue';
 import { INode,ConditionTree,GroupNode,ConditionNode, LogicalOperator,Operator,NodeType } from '../../types/Conditions';
 import ConditionObject from './ConditionObject.vue';
+import { IDynamicInputConfig } from 'src/types/ComponentTypes';
 export default defineComponent( {
   name: 'NodeCondition',
   components: {
@@ -145,17 +148,18 @@ export default defineComponent( {
       return opts;
     });
 
-    const operator = inject('Operator')
+    const operatorSet = inject<Array<any>>('Operator')
-    const operators =computed(()=>{
+    const operators = ref(operatorSet ? operatorSet : Object.values(Operator));
-      return operator ? operator : Object.values(Operator);
-    });
     const tree = reactive(props.conditionTree);
 
     const conditionString = computed(()=>{
         return tree.buildConditionString(tree.root);
     });
 
-    const objectValueOptions=(options:any):any[]=>{
+    const objectValueOptions=(options:any):any[]|null=>{
+      if(!options){
+        return null;
+      }
       const opts:any[] =[];
       Object.keys(options).forEach((key) =>
       {
@@ -222,13 +226,14 @@ export default defineComponent( {
       ticked.value=[];
     }
 
-
     const expanded=computed(()=>tree.getGroups(tree.root));
     // addCondition(tree.root);
+    const leftDynamicItemConfig = inject<IDynamicInputConfig>('leftDynamicItemConfig');
+    const rightDynamicItemConfig = inject<IDynamicInputConfig>('rightDynamicItemConfig');
 
     return {
-      leftDynamicItemConfig :inject('leftDynamicItemConfig'),
+      leftDynamicItemConfig,
-      rightDynamicItemConfig:inject('rightDynamicItemConfig'),
+      rightDynamicItemConfig,
       showingCondition,
       conditionString,
       tree,
@@ -260,10 +265,11 @@ export default defineComponent( {
   max-height: 40px;
   margin: 0 2px;
 }
+
 .operator{
   min-width: 150px;
   max-height: 40px;
-  margin-left: 12px;
+  margin: 0 2px;
 
   text-align: center;
   font-size: 12pt;

frontend/src/components/DynamicItemInput/DynamicItemInput.vue

@@ -2,13 +2,30 @@
     <div class="q-mx-md" style="max-width: 600px;">
         <!-- <q-card> -->
         <div class="q-mb-md">
-            <q-input ref="inputRef" outlined dense debounce="200" @update:model-value="updateSharedText"
+            <q-input ref="inputRef" v-if="!optionsRef|| optionsRef.length===0"
-                v-model="sharedText" :readonly="!canInput" autogrow>
+                outlined dense debounce="200" @update:model-value="updateSharedText"
+                v-model="sharedText" :readonly="!canInputFlag" autogrow>
                 <template v-slot:append>
                     <q-btn flat round padding="none" icon="cancel" @click="clearSharedText" color="grey-6" />
                 </template>
             </q-input>
-
+            <q-select v-if="optionsRef && optionsRef.length>0"
+                        :model-value="sharedText"
+                        :options="optionsRef"
+                        clearable
+                        value-key="index"
+                        outlined
+                        dense
+                        use-input
+                        hide-selected
+                        input-debounce="10"
+                        fill-input
+                        @input-value="setValue"
+                        @clear="sharedText=null"
+                        hide-dropdown-icon
+                        :readonly="!canInputFlag"
+                        >
+            </q-select>
         </div>
 
         <div class="row q-gutter-sm">
@@ -34,18 +51,12 @@
 </template>
 
 <script lang="ts">
-import { ref, inject, watchEffect, defineComponent } from 'vue';
+import { ref, inject, watchEffect, defineComponent,PropType } from 'vue';
 import FieldAdd from './FieldAdd.vue';
 import VariableAdd from './VariableAdd.vue';
 // import FunctionAdd from './FunctionAdd.vue';
 import ShowDialog from '../ShowDialog.vue';
-
+import { IButtonConfig } from 'src/types/ComponentTypes';
-type ButtonConfig = {
-    label: string;
-    color: string;
-    type: string;
-    editable: boolean;
-};
 
 export default defineComponent({
     name: 'DynamicItemInput',
@@ -56,18 +67,21 @@ export default defineComponent({
         ShowDialog
     },
     props: {
-        // canInput: {
+        canInput: {
-        //     type: Boolean,
+            type: Boolean,
-        //     default: false
+            default: false
-        // },
+        },
         appId: {
             type: String,
         },
         selectedObject: {
             default: {}
         },
+        options:{
+          type:Array as PropType< string[]>
+        },
         buttonsConfig: {
-            type: Array as () => ButtonConfig[],
+            type: Array as PropType<IButtonConfig[]>,
             default: () => [
                 { label: 'フィールド', color: 'primary', type: 'FieldAdd' }
             ]
@@ -77,17 +91,18 @@ export default defineComponent({
         const filter = ref('');
         const dialogVisible = ref(false);
         const currentDialogName = ref('');
+        const selectedObjectRef = ref(props.selectedObject);
         const currentComponent = ref('FieldAdd');
         const sharedText = ref(props.selectedObject?.sharedText ?? '');
         const inputRef = ref();
-        const canInput = ref(true);
+        const canInputFlag = ref(props.canInput);
         const editable = ref(false);
 
-        const openDialog = (button: ButtonConfig) => {
+        const openDialog = (button: IButtonConfig) => {
             currentDialogName.value = button.label;
             currentComponent.value = button.type;
             dialogVisible.value = true;
-            editable.value = button.editable ?? true;
+            editable.value = canInputFlag.value;
         };
 
         const closeDialog = () => {
@@ -95,46 +110,51 @@ export default defineComponent({
         };
 
         const handleSelect = (value:any) => {
-            // 获取当前光标位置
-            // const cursorPosition = inputRef.value.getNativeElement().selectionStart;
-            // if (cursorPosition === undefined || cursorPosition === 0) {
-            sharedText.value = `${value._t}`;
-            // } else {
-            //     const textBefore = sharedText.value.substring(0, cursorPosition);
-            //     const textAfter = sharedText.value.substring(cursorPosition);
-            //     sharedText.value = `${textBefore}${value._t}${textAfter}`;
-            // }
 
             if (value && value._t && (value._t as string).length > 0) {
-                canInput.value = editable.value;
+              canInputFlag.value = editable.value;
             }
-            emit('update:selectedObject', { sharedText: sharedText.value, ...value });
+            selectedObjectRef.value={ sharedText: value._t, ...value };
+            sharedText.value = `${value._t}`;
+           // emit('update:selectedObject', { sharedText: sharedText.value, ...value });
             dialogVisible.value = false;
         };
 
         const clearSharedText = () => {
             sharedText.value = '';
-            canInput.value = true;
+            selectedObjectRef.value={};
-            emit('update:selectedObject', {});
+            canInputFlag.value = true;
+            // emit('update:selectedObject', {});
         }
         const updateSharedText = (value:string) => {
             sharedText.value = value;
-            emit('update:selectedObject', { ...props.selectedObject, sharedText: value,objectType:'text' });
+            selectedObjectRef.value= { sharedText: value,objectType:'text' }
+            // emit('update:selectedObject', { ...props.selectedObject, sharedText: value,objectType:'text' });
         }
+        const setValue=(value:string)=>{
+          sharedText.value = value;
+          if(selectedObjectRef.value.sharedText!==value){
+            selectedObjectRef.value= { sharedText: value,objectType:'text' }
+          }
+        }
+        const optionsRef=ref(props.options);
 
         return {
             filter,
             dialogVisible,
             currentDialogName,
             currentComponent,
-            canInput,
+            canInputFlag,
             openDialog,
             closeDialog,
             handleSelect,
             clearSharedText,
             updateSharedText,
+            setValue,
             sharedText,
-            inputRef
+            inputRef,
+            optionsRef,
+            selectedObjectRef
         };
     }
 });

frontend/src/components/right/ConditionInput.vue

@@ -18,38 +18,13 @@
   </div>
 </template>
 
-
-
 <script lang="ts">
 import { ConditionNode, ConditionTree, Operator, OperatorListItem } from 'app/src/types/Conditions';
 import { computed, defineComponent, provide, reactive, ref, watchEffect } from 'vue';
 import ConditionEditor from '../ConditionEditor/ConditionEditor.vue';
+import { IActionProperty } from 'src/types/ActionTypes';
+import {  } from 'src/types/';
 
-type Props = {
-  props?: {
-    name: string;
-    modelValue?: {
-      app: {
-        id: string;
-        name: string;
-      },
-      fields: {
-        type: string;
-        label: string;
-        code: string;
-      }[]
-    }
-  }
-};
-
-type InputConfg = {
-  canInput: boolean;
-  buttonsConfig: {
-    label: string;
-    color: string;
-    type: string;
-  }[]
-};
 
 
 export default defineComponent({
@@ -60,7 +35,7 @@ export default defineComponent({
   },
   props: {
     context: {
-      type: Array<Props>,
+      type: Array<IActionProperty>,
       default: '',
     },
     displayName: {
@@ -115,7 +90,7 @@ export default defineComponent({
   },
 
   setup(props, { emit }) {
-    const source = props.context.find(element => element?.props?.name === 'sources')
+    const source = props.context.find(element => element.props.name === 'sources')
 
     if (source) {
       if (props.sourceType === 'field') {

frontend/src/components/right/FieldInput.vue

@@ -15,8 +15,15 @@
         <q-icon name="search" class="cursor-pointer" color="primary" @click="showDg" />
       </template>
     </q-field>
-    <show-dialog v-model:visible="show" name="フィールド一覧" @close="closeDg" widht="400px">
+    <show-dialog v-model:visible="show" name="フィールド一覧" @close="closeDg" min-width="400px">
-      <field-select ref="appDg" name="フィールド" :type="selectType" :appId="store.appInfo?.appId" :fieldTypes="fieldTypes"></field-select>
+      <template v-slot:toolbar>
+            <q-input dense debounce="300" v-model="filter" placeholder="検索" clearable>
+                <template v-slot:before>
+                    <q-icon name="search" />
+                </template>
+            </q-input>
+        </template>
+      <field-select ref="appDg" name="フィールド" :type="selectType" :appId="store.appInfo?.appId" :fieldTypes="fieldTypes" :filter="filter"></field-select>
     </show-dialog>
   </div>
 </template>
@@ -99,7 +106,8 @@ export default defineComponent({
       showDg,
       closeDg,
       selectedField,
-      isSelected
+      isSelected,
+      filter:ref(''),
     };
   }
 });

frontend/src/types/ComponentTypes.ts

@@ -0,0 +1,50 @@
+
+export interface IApp {
+  id: string,
+  name: string
+}
+
+export interface IField {
+  label?:string;
+  code:string;
+  type?:string;
+  required?:boolean;
+  options?:string;
+
+}
+/**
+ * 選択されたフィールド
+ */
+export interface ISelectedField extends IField{
+  objectType:'Field'|'RefField';
+}
+
+export interface IAppFields {
+  app?: IApp,
+  name?:string;
+  fields: IField[]
+}
+
+
+/**
+ * 条件式の入力ボタンの属性定義
+ */
+export interface IButtonConfig{
+    label: string;
+    color: string;
+    type: 'FieldAdd' | 'VariableAdd' | 'FunctionAdd';
+};
+/**
+ * 条件入力項目の属性
+ */
+export interface IDynamicInputConfig{
+  canInput: boolean;
+  buttonsConfig: IButtonConfig[];
+}
+/**
+ * 条件式入力項目の属性
+ */
+export interface ICoditionConfig{
+  left:IDynamicInputConfig,
+  right:IDynamicInputConfig
+}