From 371e2ee0730e065864e68493546856a03fdb15d5 Mon Sep 17 00:00:00 2001
From: Mouriya <mouriya@bu.edu>
Date: Mon, 13 May 2024 06:56:03 +0900
Subject: [PATCH 1/7] add vueuse dependencies

---
 frontend/package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/package.json b/frontend/package.json
index 5016fbf..3343684 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,8 +17,9 @@
   },
   "dependencies": {
     "@quasar/extras": "^1.16.4",
+    "@vueuse/core": "^10.9.0",
     "axios": "^1.4.0",
-    "pinia": "^2.1.6",
+    "pinia": "^2.1.7",
     "quasar": "^2.6.0",
     "uuid": "^9.0.0",
     "vue": "^3.0.0",

From 64d2cadd826ec41a91e486f58cdd9c8fa39e5920 Mon Sep 17 00:00:00 2001
From: Mouriya <mouriya@bu.edu>
Date: Mon, 13 May 2024 06:56:44 +0900
Subject: [PATCH 2/7] =?UTF-8?q?2=E3=81=A4=E3=81=AE=E3=83=87=E3=83=BC?=
 =?UTF-8?q?=E3=82=BF=E8=A8=88=E7=AE=97=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC?=
 =?UTF-8?q?=E3=83=8D=E3=83=B3=E3=83=88=E3=82=92=E8=BF=BD=E5=8A=A0=E3=81=99?=
 =?UTF-8?q?=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/ConditionObjects.vue  |  11 +-
 frontend/src/components/FieldList.vue         |  60 +++---
 .../src/components/right/AppFieldSelect.vue   |   8 +-
 .../src/components/right/ConditionInput.vue   | 185 ++++++++++--------
 .../src/components/right/DataProcessing.vue   |  95 +++++++++
 .../src/components/right/PropertyList.vue     |   8 +-
 6 files changed, 247 insertions(+), 120 deletions(-)
 create mode 100644 frontend/src/components/right/DataProcessing.vue

diff --git a/frontend/src/components/ConditionObjects.vue b/frontend/src/components/ConditionObjects.vue
index 3719bab..9939b08 100644
--- a/frontend/src/components/ConditionObjects.vue
+++ b/frontend/src/components/ConditionObjects.vue
@@ -19,7 +19,7 @@
 
         <q-tab-panels v-model="tab" animated>
           <q-tab-panel name="fields">
-              <field-list v-model="selected" type="single" :filter="filter" :appId="appId"></field-list>
+              <field-list v-model="selected" type="single" :filter="filter" :appId="appId" :fields="sourceFields"></field-list>
             </q-tab-panel>
 
           <q-tab-panel name="vars" >
@@ -30,7 +30,7 @@
 </div>
 </template>
 <script lang="ts">
-import { ref, onMounted, reactive } from 'vue'
+import { ref, onMounted, reactive, inject } from 'vue'
 import FieldList from './FieldList.vue';
 import VariableList from './VariableList.vue';
 
@@ -48,10 +48,13 @@ export default {
     filter:String
   },
   setup(props) {
-
+    const selected = ref([]);
+    console.log(selected);
+    
     return {
+      sourceFields : inject('sourceFields'),
       tab: ref('fields'),
-      selected: ref([])
+      selected
     }
   },
 
diff --git a/frontend/src/components/FieldList.vue b/frontend/src/components/FieldList.vue
index 2d72fab..e3078e1 100644
--- a/frontend/src/components/FieldList.vue
+++ b/frontend/src/components/FieldList.vue
@@ -1,51 +1,51 @@
 <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" />
+    <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" />
   </div>
 </template>
-<script>
-import { ref, onMounted, reactive } from 'vue'
+<script lang="ts">
+import { useAsyncState } from '@vueuse/core';
 import { api } from 'boot/axios';
+import { computed } from 'vue';
 
 export default {
   name: 'FieldList',
   props: {
+    fields: Array,
     name: String,
     type: String,
     appId: Number,
-    modelValue:Array,
-    filter:String
-   },
-   emits:[
-   'update:modelValue'
-   ],
+    modelValue: Array,
+    filter: String
+  },
+  emits: [
+    'update:modelValue'
+  ],
   setup(props) {
-    const isLoaded = ref(false);
+    // const rows = ref([]);
+    // const isLoaded = ref(false);
     const columns = [
-      { name: 'name', required: true, label: 'フィールド名', align: 'left', field: row => row.name, sortable: true },
+      { name: 'name', required: true, label: 'フィールド名', align: 'left', field: 'name', sortable: true },
       { name: 'code', label: 'フィールドコード', align: 'left', field: 'code', sortable: true },
       { name: 'type', label: 'フィールドタイプ', align: 'left', field: 'type', sortable: true }
     ]
-    const rows = reactive([]);
-    onMounted(async () => {
-      const res = await api.get('api/v1/appfields', {
-        params: {
-          app: props.appId
-        }
-      });
-      let fields = res.data.properties;
-      console.log(fields);
-      Object.keys(fields).forEach((key) => {
-        const fld = fields[key];
-        rows.push({ name: fld.label, objectType: 'field', ...fld });
-      });
-      isLoaded.value = true;
-    });
 
+    const { state : rows, isReady: isLoaded, isLoading } = useAsyncState((args) => {
+      if (props.fields) {
+        return props.fields.map(f => ({ name: f.label, objectType: 'field', ...f }));
+      } else {
+        return api.get('api/v1/appfields', {
+          params: {
+            app: props.appId
+          }
+        }).then(res => {
+          console.log(res);
+          return Object.values(res.data.properties).map(f => ({ name: f.label, objectType: 'field', ...f }));
+        });
+      }
+    }, [{ name: '', objectType: '', type: '', code: '', label: '' }])
+   
     return {
       columns,
       rows,
diff --git a/frontend/src/components/right/AppFieldSelect.vue b/frontend/src/components/right/AppFieldSelect.vue
index 3c16c73..45961ff 100644
--- a/frontend/src/components/right/AppFieldSelect.vue
+++ b/frontend/src/components/right/AppFieldSelect.vue
@@ -23,9 +23,9 @@
                         <q-virtual-scroll style="max-height: 160px;" :items="selectedField.fields" separator v-slot="{ item, index }">
                             <q-item :key="index" dense clickable >
                                 <q-item-section>
-                                    <q-item-label>
-                                        {{ item.label }}
-                                    </q-item-label>
+                                        <q-item-label>
+                                            {{ item.label }}
+                                        </q-item-label>
                                 </q-item-section>
                                 <q-item-section side>
                                     <q-btn round flat size="sm" icon="clear" @click="removeField(index)" />
@@ -128,7 +128,7 @@ interface IAppFields{
 
 export default defineComponent({
     inheritAttrs:false,
-    name: 'FieldInput',
+    name: 'AppFieldSelect',
     components: {
         ShowDialog,
         FieldSelect,
diff --git a/frontend/src/components/right/ConditionInput.vue b/frontend/src/components/right/ConditionInput.vue
index 2b5d552..bc44fa4 100644
--- a/frontend/src/components/right/ConditionInput.vue
+++ b/frontend/src/components/right/ConditionInput.vue
@@ -1,12 +1,12 @@
 <template>
   <div v-bind="$attrs">
-    <q-field v-model="tree" :label="displayName" labelColor="primary" stack-label >
-      <template v-slot:control >
+    <q-field v-model="tree" :label="displayName" labelColor="primary" stack-label>
+      <template v-slot:control>
         <q-card flat class="full-width">
           <q-card-actions vertical>
-            <q-btn color="grey-3" text-color="black" @click="showDg()">クリックで設定：{{ isSetted?'設定済み':'未設定' }}</q-btn>
+            <q-btn color="grey-3" text-color="black" @click="showDg()">クリックで設定：{{ isSetted ? '設定済み' : '未設定' }}</q-btn>
           </q-card-actions>
-          <q-card-section class="text-caption" >
+          <q-card-section class="text-caption">
             <div v-if="!isSetted">{{ placeholder }}</div>
             <div v-else>{{ conditionString }}</div>
           </q-card-section>
@@ -17,82 +17,109 @@
   </div>
 </template>
 
-  <script lang="ts">
-  import { defineComponent, ref ,watchEffect,computed,reactive} from 'vue';
-  import { ConditionTree,GroupNode,ConditionNode,LogicalOperator,Operator } from 'app/src/types/Conditions';
-  import ConditionEditor from '../ConditionEditor/ConditionEditor.vue'
-  export default defineComponent({
-    name: 'FieldInput',
-    inheritAttrs:false,
-    components: {
-      ConditionEditor
-    },
-    props: {
-      displayName:{
-        type: String,
-        default: '',
-      },
-      name:{
-        type: String,
-        default: '',
-      },
-      placeholder: {
-        type: String,
-        default: '',
-      },
-      hint:{
-        type: String,
-        default: '',
-      },
-      modelValue: {
-        type: String,
-        default: null
-      },
-    },
 
-    setup(props, { emit }) {
-      const appDg = ref();
-      const show = ref(false);
-      const tree = reactive(new ConditionTree());
-      if(props.modelValue && props.modelValue!==''){
-        tree.fromJson(props.modelValue);
-      }else{
-        const newNode = new ConditionNode({},Operator.Equal,'',tree.root);
-        tree.addNode(tree.root,newNode);
-      }
 
-      const isSetted=ref(props.modelValue && props.modelValue!=='');
+<script lang="ts">
+import { ConditionNode, ConditionTree, Operator } from 'app/src/types/Conditions';
+import { computed, defineComponent, provide, reactive, ref, watchEffect } from 'vue';
+import ConditionEditor from '../ConditionEditor/ConditionEditor.vue';
 
-      const conditionString = computed(()=>{
-          return tree.buildConditionString(tree.root);
-      });
-
-      const showDg = () => {
-        show.value = true;
-      };
-
-      const onClosed = (val:string) => {
-        if (val == 'OK') {
-          const conditionJson = tree.toJson();
-          isSetted.value=true;
-          emit('update:modelValue', conditionJson);
-        }
-      };
-
-      watchEffect(() => {
-        const conditionJson = tree.toJson();
-        emit('update:modelValue', conditionJson);
-      });
-
-      return {
-        appDg,
-        isSetted,
-        show,
-        showDg,
-        onClosed,
-        tree,
-        conditionString
-      };
+type Props = {
+  props?: {
+    name: string;
+    modelValue?: {
+      fields: {
+        type: string;
+        label: string;
+        code: string;
+      }[]
     }
-  });
-  </script>
+  }
+};
+
+
+export default defineComponent({
+  name: 'FieldInput',
+  inheritAttrs: false,
+  components: {
+    ConditionEditor
+  },
+  props: {
+    context: {
+      type: Array<Props>,
+      default: '',
+    },
+    displayName: {
+      type: String,
+      default: '',
+    },
+    name: {
+      type: String,
+      default: '',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    hint: {
+      type: String,
+      default: '',
+    },
+    modelValue: {
+      type: String,
+      default: null
+    },
+  },
+
+  setup(props, { emit }) {
+    const source = props.context.find(element => element?.props?.name === 'sources')
+    
+    if (source) {
+      provide('sourceFields', computed( () => source.props?.modelValue?.fields ?? []));
+    }
+
+    const appDg = ref();
+    const show = ref(false);
+    const tree = reactive(new ConditionTree());
+    if (props.modelValue && props.modelValue !== '') {
+      tree.fromJson(props.modelValue);
+    } else {
+      const newNode = new ConditionNode({}, Operator.Equal, '', tree.root);
+      tree.addNode(tree.root, newNode);
+    }
+
+    const isSetted = ref(props.modelValue && props.modelValue !== '');
+
+    const conditionString = computed(() => {
+      return tree.buildConditionString(tree.root);
+    });
+
+    const showDg = () => {
+      show.value = true;
+    };
+
+    const onClosed = (val: string) => {
+      if (val == 'OK') {
+        const conditionJson = tree.toJson();
+        isSetted.value = true;
+        emit('update:modelValue', conditionJson);
+      }
+    };
+
+    watchEffect(() => {
+      const conditionJson = tree.toJson();
+      emit('update:modelValue', conditionJson);
+    });
+
+    return {
+      appDg,
+      isSetted,
+      show,
+      showDg,
+      onClosed,
+      tree,
+      conditionString
+    };
+  }
+});
+</script>
diff --git a/frontend/src/components/right/DataProcessing.vue b/frontend/src/components/right/DataProcessing.vue
new file mode 100644
index 0000000..87ceb24
--- /dev/null
+++ b/frontend/src/components/right/DataProcessing.vue
@@ -0,0 +1,95 @@
+<template>
+    <q-input v-model="value" type="text" :label="displayName" label-color="primary">
+        <q-tooltip persistent no-parent-event v-model="tooltipEnable" anchor="center left" self="center right">
+            <div style="max-width: 24vw; ">
+                <div v-if="p">
+                    <div class="row">字段名称:</div>
+                    <div class="row q-col-gutter-x-xs q-col-gutter-y-sm">
+                        <div class="col-4" style="min-width: 8vw;"
+                            v-for="(item, index) in sources?.props?.modelValue?.fields" :key="index">
+                            <div style="pointer-events: auto;">{{ item.type }}</div>
+                            <div><i>{{ item.label }}</i></div>
+                        </div>
+                    </div>
+                    <div class="row q-mt-md">示例:</div>
+                    <div class="row" style="pointer-events: auto;"> {{ p }}</div>
+                </div>
+                <div v-else>
+                    请先选择计算来源
+                </div>
+            </div>
+        </q-tooltip>
+        <template v-slot:append>
+            <q-btn round size="sm" padding="xs" color="secondary" icon="school"
+                @click="() => tooltipEnable = !tooltipEnable" />
+        </template>
+
+    </q-input>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from 'vue';
+
+type Props = {
+    props?: {
+        name: string;
+        modelValue?: {
+            fields: {
+                type: string;
+                label: string;
+                code: string;
+            }[]
+        }
+    }
+};
+
+export default defineComponent({
+    name: 'DataProcessing',
+    inheritAttrs: false,
+    props: {
+        context: {
+            type: Array<Props>,
+            default: '',
+        },
+        displayName: {
+            type: String,
+            default: '',
+        },
+        name: {
+            type: String,
+            default: '',
+        },
+        modelValue: {
+            type: String,
+            default: '',
+        },
+    },
+
+    setup(props, { emit }) {
+        const value = ref(' ');
+        const tooltipEnable = ref(false);
+        const sources = props.context.find(element => element?.props?.name === 'sources');
+
+        const p = computed(() => {
+            const fields = sources?.props?.modelValue?.fields
+            if (!fields || fields.length === 0) {
+                return '';
+            } else if (fields.length === 1) {
+                return fields[0].type;
+            } else if (fields.length === 2) {
+                return fields.map(field => field.type).join('+');
+            } else {
+                return `(${fields[0].type} + ${fields[1].type}) * ${fields[2].type}`;
+            }
+        });
+
+        return {
+            sources,
+            p,
+            value,
+            tooltipEnable,
+        };
+    },
+});
+</script>
+<style lang="scss"></style>
\ No newline at end of file
diff --git a/frontend/src/components/right/PropertyList.vue b/frontend/src/components/right/PropertyList.vue
index 1c7357c..f19bf98 100644
--- a/frontend/src/components/right/PropertyList.vue
+++ b/frontend/src/components/right/PropertyList.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div v-for="(item, index) in properties" :key="index" >
-      <component :is="item.component" v-bind="item.props"  :connectProps="connectProps(item.props)" v-model="item.props.modelValue"></component>
+      <component :is="item.component" v-bind="item.props" :context="properties"  :connectProps="connectProps(item.props)" v-model="item.props.modelValue"></component>
     </div>
   </div>
 </template>
@@ -21,6 +21,7 @@ import ConditionInput from '../right/ConditionInput.vue';
 import EventSetter from '../right/EventSetter.vue';
 import ColorPicker from './ColorPicker.vue';
 import NumInput from './NumInput.vue';
+import DataProcessing from './DataProcessing.vue';
 import { IActionNode,IActionProperty,IProp } from 'src/types/ActionTypes';
 
 export default defineComponent({
@@ -35,7 +36,8 @@ export default defineComponent({
     ConditionInput,
     EventSetter,
     ColorPicker,
-    NumInput
+    NumInput,
+    DataProcessing
   },
   props: {
     nodeProps: {
@@ -50,7 +52,7 @@ export default defineComponent({
   setup(props, context) {
     const properties=ref(props.nodeProps);
     const connectProps=(props:IProp)=>{
-       const connProps:any={};
+       const connProps:any={context:properties};
        if(props && "connectProps" in props && props.connectProps!=undefined){
           for(let connProp of props.connectProps){
             let targetProp = properties.value.find((prop)=>prop.props.name===connProp.propName);

From 61ac281134779ddac85f1618b2a9cadbeec1cdf0 Mon Sep 17 00:00:00 2001
From: Mouriya <mouriya@bu.edu>
Date: Fri, 17 May 2024 14:41:15 +0900
Subject: [PATCH 3/7] =?UTF-8?q?verName=E3=81=AE=E3=83=A9=E3=83=83=E3=83=94?=
 =?UTF-8?q?=E3=83=B3=E3=82=B0=E3=83=BB=E3=82=AA=E3=83=96=E3=82=B8=E3=82=A7?=
 =?UTF-8?q?=E3=82=AF=E3=83=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/main/NodeItem.vue   |  2 +-
 frontend/src/components/right/InputText.vue | 52 ++++++++++++++-------
 2 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/main/NodeItem.vue b/frontend/src/components/main/NodeItem.vue
index 6474a18..0e4cb8b 100644
--- a/frontend/src/components/main/NodeItem.vue
+++ b/frontend/src/components/main/NodeItem.vue
@@ -205,7 +205,7 @@ export default defineComponent({
      */
     const varName =(node:IActionNode)=>{
       const prop = node.actionProps.find((prop) => prop.props.name === "verName");
-      return prop?.props.modelValue;
+      return prop?.props.modelValue.name;
     };
     const copyFlow=()=>{
       context.emit('copyFlow', props.actionNode);
diff --git a/frontend/src/components/right/InputText.vue b/frontend/src/components/right/InputText.vue
index a14e06d..b47a379 100644
--- a/frontend/src/components/right/InputText.vue
+++ b/frontend/src/components/right/InputText.vue
@@ -1,10 +1,7 @@
 <template>
   <div v-bind="$attrs">
-    <q-input :label="displayName" v-model="inputValue" label-color="primary"
-    :placeholder="placeholder" stack-label
-    :rules="rulesExp"
-    :maxlength="maxLength"
-    >
+    <q-input :label="displayName" v-model="inputValue" label-color="primary" :placeholder="placeholder" stack-label
+      :rules="rulesExp" :maxlength="maxLength">
       <template v-slot:append v-if="hint !== ''">
         <q-icon name="help" size="22px" color="blue-8">
           <q-tooltip class="bg-yellow-2 text-black shadow-4" anchor="bottom right">
@@ -18,7 +15,7 @@
 
 <script lang="ts">
 import { kMaxLength } from 'buffer';
-import { defineComponent, ref, watchEffect } from 'vue';
+import { defineComponent, ref, watchEffect, computed } from 'vue';
 
 export default defineComponent({
   name: 'InputText',
@@ -40,27 +37,50 @@ export default defineComponent({
       type: String,
       default: '',
     },
-    maxLength:{
+    maxLength: {
       type: Number,
-      default:undefined
+      default: undefined
     },
     //例：[val=>!!val ||'入力してください']
-    rules:{
-      type:String,
-      default:undefined
+    rules: {
+      type: String,
+      default: undefined
     },
     modelValue: {
-      type: String,
+      // type: Any,
       default: '',
     },
   },
 
   setup(props, { emit }) {
-    const inputValue = ref(props.modelValue);
-    const rulesExp = props.rules===undefined?null : eval(props.rules);
-    watchEffect(() => {
-      emit('update:modelValue', inputValue.value);
+    const inputValue = computed({
+      get: () => {
+        if (props.modelValue !== null && typeof props.modelValue === 'object' && 'name' in props.modelValue) {
+          return props.modelValue.name;
+        } else {
+          return props.modelValue;
+        }
+      },
+      set: (val) => {
+        if (props.name === 'verName') {
+          // return props.modelValue.name;
+          emit('update:modelValue', { name: val });
+        } else {
+          emit('update:modelValue', val);
+        }
+      },
     });
+    // const inputValue = ref(props.modelValue);
+    const rulesExp = props.rules === undefined ? null : eval(props.rules);
+
+    // const finalValue = computed(() => {
+    // return props.name !== 'verName' ? inputValue.value : {
+    // name: inputValue.value,
+    // };
+    // });
+    // watchEffect(() => {
+    //   emit('update:modelValue', finalValue);
+    // });
 
     return {
       inputValue,

From cf4209333d418981fc41c9de2fb804c4bbc26163 Mon Sep 17 00:00:00 2001
From: Mouriya <mouriya@bu.edu>
Date: Fri, 17 May 2024 23:32:14 +0900
Subject: [PATCH 4/7] =?UTF-8?q?=E3=83=87=E3=83=BC=E3=82=BF=E5=87=A6?=
 =?UTF-8?q?=E7=90=86=E6=9B=B8=E3=81=8D=E8=BE=BC=E3=81=BF=E5=AE=8C=E4=BA=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ConditionEditor/ConditionObject.vue       |   6 +-
 .../ConditionEditor/NodeCondition.vue         |   6 +-
 frontend/src/components/VariableList.vue      |  56 ++++--
 .../src/components/right/DataProcessing.vue   | 185 +++++++++++++-----
 frontend/src/types/ActionTypes.ts             |  17 +-
 5 files changed, 197 insertions(+), 73 deletions(-)

diff --git a/frontend/src/components/ConditionEditor/ConditionObject.vue b/frontend/src/components/ConditionEditor/ConditionObject.vue
index aa22dfa..01b40c4 100644
--- a/frontend/src/components/ConditionEditor/ConditionObject.vue
+++ b/frontend/src/components/ConditionEditor/ConditionObject.vue
@@ -6,7 +6,7 @@
         {{ selectedObject.name }}
       </q-chip>
       <q-chip  color="info" text-color="white" v-if="isSelected && selectedObject.objectType==='variable'" :dense="true" class="selected-obj">
-        {{ selectedObject.name }}
+        {{ selectedObject.name.name }}
       </q-chip>
     </template>
    <template v-slot:append>
@@ -88,9 +88,9 @@
 .condition-object{
   min-width: 200px;
   max-height: 40px;
-  padding: 2px;
+  margin: 0 2px;
 }
 .selected-obj{
-  margin: 0px;
+  margin: 0 2px;
 }
 </style>
diff --git a/frontend/src/components/ConditionEditor/NodeCondition.vue b/frontend/src/components/ConditionEditor/NodeCondition.vue
index c684992..943fdab 100644
--- a/frontend/src/components/ConditionEditor/NodeCondition.vue
+++ b/frontend/src/components/ConditionEditor/NodeCondition.vue
@@ -66,7 +66,7 @@
           </div>
           <!-- condition -->
           <div @click.stop @keypress.stop v-else >
-            <div class="row no-wrap items-center">
+            <div class="row no-wrap items-center q-my-xs">
               <ConditionObject v-bind="prop.node" v-model="prop.node.object" class="col-4"></ConditionObject>
               <q-select v-model="prop.node.operator" :options="operators"  class="operator" :outlined="true" :dense="true"></q-select>
               <q-input v-if="!prop.node.object || !('options' in prop.node.object)"
@@ -257,12 +257,12 @@ export default defineComponent( {
 .condition-value{
   min-width: 200px;
   max-height: 40px;
-  padding: 2px;
+  margin: 0 2px;
 }
 .operator{
   min-width: 150px;
   max-height: 40px;
-  padding: 2px;
+  margin: 0 2px;
   text-align: center;
   font-size: 12pt;
 }
diff --git a/frontend/src/components/VariableList.vue b/frontend/src/components/VariableList.vue
index a8d9c3a..f967b86 100644
--- a/frontend/src/components/VariableList.vue
+++ b/frontend/src/components/VariableList.vue
@@ -1,43 +1,57 @@
 <template>
   <div class="q-pa-md">
-    <q-table flat bordered row-key="name" :selection="type"
-    :selected="modelValue"
-    @update:selected="$emit('update:modelValue', $event)"
-    :columns="columns" :rows="rows" />
+    <q-table flat bordered row-key="name" :selection="type" :selected="modelValue"
+      @update:selected="$emit('update:modelValue', $event)" :columns="columns" :rows="rows" />
   </div>
 </template>
 <script lang="ts">
-import { ref, reactive, PropType, compile } from 'vue';
-import {IActionNode,IActionVariable} from '../types/ActionTypes';
+import { PropType, reactive } from 'vue';
+import { IActionVariable } from '../types/ActionTypes';
 
 export default {
   name: 'VariableList',
   props: {
     name: String,
     type: String,
-    vars:{
-      type:Array as PropType<IActionVariable[]>,
-      reqired:true,
-      default:()=>[]
+    vars: {
+      type: Array as PropType<IActionVariable[]>,
+      reqired: true,
+      default: () => []
     },
-    modelValue:Array
+    modelValue: Array
   },
-  emits:[
-   'update:modelValue'
-   ],
+  emits: [
+    'update:modelValue'
+  ],
   setup(props) {
-     const columns= [
-    { name: 'actionName', label: 'アクション名',align: 'left',field: 'actionName',sortable: true},
-    { name: 'displayName', label: '変数表示名', align: 'left',field: 'displayName', sortable: true },
-    { name: 'name', label: '変数名', align: 'left',field: 'name',required: true, sortable: true }
+    const variableName = (field) => {
+      const name = field.name;
+      return name.name;
+    }
+    const columns = [
+      { name: 'actionName', label: 'アクション名', align: 'left', field: 'actionName', sortable: true },
+      { name: 'displayName', label: '変数表示名', align: 'left', field: 'displayName', sortable: true },
+      { name: 'name', label: '変数名', align: 'left', field: variableName, required: true, sortable: true }
     ];
-    const rows= props.vars.map((v)=>{
-      return {objectType:'variable',...v};
+
+    const rows = props.vars.flatMap((v) => {
+      if (v.name.vars && v.name.vars.length > 0) {
+        return v.name.vars
+          .filter(o => o.vName && o.logicalOperator && o.field)
+          .map(o => ({
+            objectType: 'variable',
+            name: { name: `${v.name.name}.${o.vName}` },
+            actionName: v.name.actionName,
+            displayName: v.name.displayName
+          }));
+      } else {
+        return [{ objectType: 'variable', ...v }];
+      }
     });
 
     return {
       columns,
-      rows:reactive(rows)
+      rows: reactive(rows)
     }
   }
 }
diff --git a/frontend/src/components/right/DataProcessing.vue b/frontend/src/components/right/DataProcessing.vue
index 87ceb24..9fe3f4f 100644
--- a/frontend/src/components/right/DataProcessing.vue
+++ b/frontend/src/components/right/DataProcessing.vue
@@ -1,34 +1,66 @@
 <template>
-    <q-input v-model="value" type="text" :label="displayName" label-color="primary">
-        <q-tooltip persistent no-parent-event v-model="tooltipEnable" anchor="center left" self="center right">
-            <div style="max-width: 24vw; ">
-                <div v-if="p">
-                    <div class="row">字段名称:</div>
-                    <div class="row q-col-gutter-x-xs q-col-gutter-y-sm">
-                        <div class="col-4" style="min-width: 8vw;"
-                            v-for="(item, index) in sources?.props?.modelValue?.fields" :key="index">
-                            <div style="pointer-events: auto;">{{ item.type }}</div>
-                            <div><i>{{ item.label }}</i></div>
+    <div>
+        <q-field :label="displayName" labelColor="primary" stack-label>
+            <template v-slot:control>
+                <q-card flat class="full-width">
+                    <q-card-actions vertical>
+                        <q-btn color="grey-3" text-color="black" @click="() => { dgIsShow = true }">クリックで設定</q-btn>
+                    </q-card-actions>
+                    <q-card-section class="text-caption">
+                        <div v-for="(item) in processingObjectsInputDisplay" :key="item">{{ item }}</div>
+                    </q-card-section>
+                </q-card>
+            </template>
+        </q-field>
+        <show-dialog v-model:visible="dgIsShow" name="条件エディタ" @close="closeDg" min-width="60vw" min-height="60vh">
+            <div class="q-mx-md q-mb-md">
+                <q-input v-model="processingProps.name" type="text" label-color="primary" label="変数名を入力してください"
+                    placeholder="varName" />
+            </div>
+
+            <div class="q-mx-md">
+                <div class="row q-col-gutter-x-xs flex-center">
+                    <div class="col-5">
+                        <div class="q-mx-xs">数据源</div>
+                    </div>
+                    <div class="col-2">
+                        <div class="q-mx-xs">运算符</div>
+                    </div>
+                    <div class="col-4">
+                        <div class="q-mx-xs">目标变量</div>
+                    </div>
+                    <div class="col-1"><q-btn flat round dense icon="add" size="sm" @click="addProcessingObject" />
+                    </div>
+                </div>
+                <div class="q-my-sm" v-for="(item, index) in processingObjects" :key="item.id">
+                    <div class="row q-col-gutter-x-xs flex-center">
+                        <div class="col-5">
+                            <ConditionObject v-model="item.field" />
+                        </div>
+                        <div class="col-2">
+                            <q-select v-model="item.logicalOperator" :options="logicalOperators" outlined
+                                dense></q-select>
+                        </div>
+                        <div class="col-4">
+                            <q-input v-model="item.vName" type="text" label="Label" outlined dense />
+                        </div>
+                        <div class="col-1">
+                            <q-btn flat round dense icon="delete" size="sm"
+                                @click="() => deleteProcessingObject(index)" />
+
                         </div>
                     </div>
-                    <div class="row q-mt-md">示例:</div>
-                    <div class="row" style="pointer-events: auto;"> {{ p }}</div>
-                </div>
-                <div v-else>
-                    请先选择计算来源
                 </div>
             </div>
-        </q-tooltip>
-        <template v-slot:append>
-            <q-btn round size="sm" padding="xs" color="secondary" icon="school"
-                @click="() => tooltipEnable = !tooltipEnable" />
-        </template>
-
-    </q-input>
+        </show-dialog>
+    </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref } from 'vue';
+import { v4 as uuidv4 } from 'uuid';
+import { computed, defineComponent, provide, reactive, ref, watchEffect } from 'vue';
+import ConditionObject from '../ConditionEditor/ConditionObject.vue';
+import ShowDialog from '../ShowDialog.vue';
 
 type Props = {
     props?: {
@@ -39,13 +71,40 @@ type Props = {
                 label: string;
                 code: string;
             }[]
-        }
+        } | string
     }
 };
 
+type ProcessingObjectType = {
+    field?: {
+        name: string | {
+            name: string;
+        };
+        objectType: string;
+        type: string;
+        code: string;
+        label: string;
+        noLabel: boolean;
+    };
+    logicalOperator?: string;
+    vName?: string;
+    id: string;
+}
+
+type ValueType = {
+    name: string;
+    actionName: string,
+    displayName: string,
+    vars: ProcessingObjectType[];
+}
+
 export default defineComponent({
     name: 'DataProcessing',
     inheritAttrs: false,
+    components: {
+        ShowDialog,
+        ConditionObject,
+    },
     props: {
         context: {
             type: Array<Props>,
@@ -60,34 +119,70 @@ export default defineComponent({
             default: '',
         },
         modelValue: {
-            type: String,
-            default: '',
+            type: Object as () => ValueType,
         },
     },
 
     setup(props, { emit }) {
-        const value = ref(' ');
-        const tooltipEnable = ref(false);
-        const sources = props.context.find(element => element?.props?.name === 'sources');
+        const source = props.context.find(element => element?.props?.name === 'sources')
 
-        const p = computed(() => {
-            const fields = sources?.props?.modelValue?.fields
-            if (!fields || fields.length === 0) {
-                return '';
-            } else if (fields.length === 1) {
-                return fields[0].type;
-            } else if (fields.length === 2) {
-                return fields.map(field => field.type).join('+');
-            } else {
-                return `(${fields[0].type} + ${fields[1].type}) * ${fields[2].type}`;
-            }
+        if (source) {
+            provide('sourceFields', computed(() => {
+                const modelValue = source.props?.modelValue;
+                if (modelValue && typeof modelValue !== 'string') {
+                    return modelValue.fields;
+                }
+                return null;
+            }));
+        }
+
+        const actionName = props.context.find(element => element?.props?.name === 'displayName')
+
+        const processingProps: ValueType = props.modelValue && props.modelValue.vars
+            ? props.modelValue
+            : reactive({
+                name: '',
+                actionName: actionName?.props?.modelValue as string,
+                displayName: '結果（戻り値）',
+                vars: [{ id: uuidv4() }]
+            });
+
+        const closeDg = () => {
+            emit('update:modelValue', processingProps
+            );
+        }
+
+        const processingObjects = processingProps.vars;
+
+        const deleteProcessingObject = (index: number) => processingObjects.length === 1
+            ? processingObjects.splice(0, processingObjects.length, { id: uuidv4() })
+            : processingObjects.splice(index, 1);
+        const processingObjectsInputDisplay = computed(() =>
+            processingObjects ?
+                processingObjects
+                    .filter(item => item.field && item.logicalOperator && item.vName)
+                    .map(item => {
+                        const name = typeof item.field?.name === 'string'
+                            ? item.field.name
+                            : item.field?.name.name;
+                        return `${processingProps.name}.${item.vName} = ${item.logicalOperator}(${name})`
+                    })
+                : ''
+        );
+
+        watchEffect(() => {
+            emit('update:modelValue', processingProps);
         });
-
         return {
-            sources,
-            p,
-            value,
-            tooltipEnable,
+            uuidv4,
+            dgIsShow: ref(false),
+            closeDg,
+            processingObjects,
+            processingProps,
+            addProcessingObject: () => processingObjects.push({ id: uuidv4() }),
+            deleteProcessingObject,
+            logicalOperators: reactive(['MAX', 'SUM']),
+            processingObjectsInputDisplay,
         };
     },
 });
diff --git a/frontend/src/types/ActionTypes.ts b/frontend/src/types/ActionTypes.ts
index 8d71ea4..dc48c71 100644
--- a/frontend/src/types/ActionTypes.ts
+++ b/frontend/src/types/ActionTypes.ts
@@ -45,7 +45,16 @@ export interface IActionProperty {
 export interface IActionVariable{
   actionName:string;
   displayName:string;
-  name:string;
+  name: {
+    name:string;
+    actionName:string;
+    displayName:string;
+    vars : {
+      vName:string;
+      logicalOperator:string;
+      field: object;
+    }[]
+  };
 }
 /**
  * アクションタイプ定義
@@ -448,6 +457,12 @@ export class ActionFlow implements IActionFlow {
   getPrevVarNames(prevNode:IActionNode):IActionVariable[]{
     let varNames:IActionVariable[]=[];
     if(prevNode.varName!==undefined && prevNode.varName.modelValue){
+
+      if(prevNode.varName.modelValue ==='object'){
+        console.log(prevNode);
+        
+      }
+
       varNames.unshift({
         actionName:prevNode.name,
         displayName:prevNode.varName.displayName,

From 7fb3d08ccbf1fba0bfeca48c8254c9821f58cf73 Mon Sep 17 00:00:00 2001
From: Mouriya <mouriya@bu.edu>
Date: Mon, 20 May 2024 03:38:27 +0900
Subject: [PATCH 5/7] =?UTF-8?q?=E7=B4=B0=E9=83=A8=E3=81=AE=E5=95=8F?=
 =?UTF-8?q?=E9=A1=8C=E3=81=AE=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/VariableList.vue | 4 +++-
 frontend/src/types/Conditions.ts         | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/VariableList.vue b/frontend/src/components/VariableList.vue
index f967b86..d790203 100644
--- a/frontend/src/components/VariableList.vue
+++ b/frontend/src/components/VariableList.vue
@@ -1,12 +1,13 @@
 <template>
   <div class="q-pa-md">
-    <q-table flat bordered row-key="name" :selection="type" :selected="modelValue"
+    <q-table flat bordered row-key="id" :selection="type" :selected="modelValue"
       @update:selected="$emit('update:modelValue', $event)" :columns="columns" :rows="rows" />
   </div>
 </template>
 <script lang="ts">
 import { PropType, reactive } from 'vue';
 import { IActionVariable } from '../types/ActionTypes';
+import { v4 as uuidv4 } from 'uuid';
 
 export default {
   name: 'VariableList',
@@ -39,6 +40,7 @@ export default {
         return v.name.vars
           .filter(o => o.vName && o.logicalOperator && o.field)
           .map(o => ({
+            id: uuidv4(),
             objectType: 'variable',
             name: { name: `${v.name.name}.${o.vName}` },
             actionName: v.name.actionName,
diff --git a/frontend/src/types/Conditions.ts b/frontend/src/types/Conditions.ts
index a99c3a4..5aecfff 100644
--- a/frontend/src/types/Conditions.ts
+++ b/frontend/src/types/Conditions.ts
@@ -198,7 +198,7 @@ export class ConditionTree {
         if(value && typeof value ==='object' && ('label' in value)){
             value =condNode.value.label;
         }
-        return `${condNode.object.name} ${condNode.operator} '${value}'`;
+        return `${typeof condNode.object.name === 'object' ? condNode.object.name.name : condNode.object.name} ${condNode.operator} '${value}'`;
       } else {
         return '';
       }

From 53aadfcaaa5a8bec829dd99e214b3c98aa2807de Mon Sep 17 00:00:00 2001
From: "maxiaozhe@alicorns.co.jp" <maxiaozhe@alicorns.co.jp>
Date: Fri, 24 May 2024 09:20:19 +0900
Subject: [PATCH 6/7] =?UTF-8?q?feat:=E3=83=87=E3=83=BC=E3=82=BF=E9=9B=86?=
 =?UTF-8?q?=E8=A8=88=E5=87=A6=E7=90=86=E4=BD=9C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/index.html                           |   1 -
 frontend/src/boot/error-handler.ts            |   1 +
 .../ConditionEditor/ConditionEditor.vue       |   2 +-
 .../ConditionEditor/ConditionObject.vue       |   4 +-
 frontend/src/components/ShowDialog.vue        |   2 +-
 .../src/components/right/DataProcessing.vue   | 347 ++++++++++--------
 frontend/src/components/right/SelectBox.vue   |  20 +-
 7 files changed, 212 insertions(+), 165 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 43d25b2..b50159a 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -2,7 +2,6 @@
 <html lang="ja-jp">
   <head>
     <title><%= productName %></title>
-
     <meta charset="utf-8">
     <meta name="description" content="<%= productDescription %>">
     <meta name="format-detection" content="telephone=no">
diff --git a/frontend/src/boot/error-handler.ts b/frontend/src/boot/error-handler.ts
index 57253da..93be80b 100644
--- a/frontend/src/boot/error-handler.ts
+++ b/frontend/src/boot/error-handler.ts
@@ -4,6 +4,7 @@ import { Router } from 'vue-router';
 import { App } from 'vue';
 
 export default boot(({ app, router }: { app: App<Element>; router: Router }) => {
+  document.documentElement.lang="ja-JP";
   app.config.errorHandler = (err: any, instance: any, info: string) => {
     if (err.response && err.response.status === 401) {
       // 認証エラーの場合再ログインする
diff --git a/frontend/src/components/ConditionEditor/ConditionEditor.vue b/frontend/src/components/ConditionEditor/ConditionEditor.vue
index ef47543..eef9401 100644
--- a/frontend/src/components/ConditionEditor/ConditionEditor.vue
+++ b/frontend/src/components/ConditionEditor/ConditionEditor.vue
@@ -1,5 +1,5 @@
 <template>
-  <show-dialog v-model:visible="showflg" name="条件エディタ" @close="closeDg" min-width="60vw" min-height="60vh">
+  <show-dialog v-model:visible="showflg" name="条件エディタ" @close="closeDg" min-width="50vw" min-height="60vh">
     <template v-slot:toolbar>
       <q-btn flat round dense icon="more_vert" >
       <q-menu  auto-close anchor="bottom start">
diff --git a/frontend/src/components/ConditionEditor/ConditionObject.vue b/frontend/src/components/ConditionEditor/ConditionObject.vue
index 01b40c4..2097f5a 100644
--- a/frontend/src/components/ConditionEditor/ConditionObject.vue
+++ b/frontend/src/components/ConditionEditor/ConditionObject.vue
@@ -13,14 +13,14 @@
     <q-icon name="search" class="cursor-pointer"  @click="showDg"/>
     </template>
   </q-field>
-  <show-dialog v-model:visible="show" name="条件設定項目一覧" @close="closeDg" width="600px">
+  <show-dialog v-model:visible="show" name="設定項目一覧" @close="closeDg" min-width="400px">
     <template v-slot:toolbar>
         <q-input  dense debounce="200" v-model="filter" placeholder="検索" clearable>
           <template v-slot:before>
             <q-icon name="search" />
           </template>
         </q-input>
-      </template>
+    </template>
     <condition-objects ref="appDg" name="フィールド" type="single" :filter="filter" :appId="store.appInfo?.appId" :vars="vars"></condition-objects>
   </show-dialog>
   </template>
diff --git a/frontend/src/components/ShowDialog.vue b/frontend/src/components/ShowDialog.vue
index 650fdb3..bb20e89 100644
--- a/frontend/src/components/ShowDialog.vue
+++ b/frontend/src/components/ShowDialog.vue
@@ -1,7 +1,7 @@
 <template>
   <!-- <div class="q-pa-md q-gutter-sm" > -->
     <q-dialog :model-value="visible" persistent bordered >
-      <q-card :style="cardStyle"  style=" min-width: 40vw; max-width: 80vw; max-height: 95vh;">
+      <q-card style="min-width: 40vw; max-width: 80vw; max-height: 95vh;" :style="cardStyle">
         <q-toolbar class="bg-grey-4">
           <q-toolbar-title>{{ name }}</q-toolbar-title>
           <q-space></q-space>
diff --git a/frontend/src/components/right/DataProcessing.vue b/frontend/src/components/right/DataProcessing.vue
index 9fe3f4f..9aa554b 100644
--- a/frontend/src/components/right/DataProcessing.vue
+++ b/frontend/src/components/right/DataProcessing.vue
@@ -1,59 +1,60 @@
 <template>
-    <div>
-        <q-field :label="displayName" labelColor="primary" stack-label>
-            <template v-slot:control>
-                <q-card flat class="full-width">
-                    <q-card-actions vertical>
-                        <q-btn color="grey-3" text-color="black" @click="() => { dgIsShow = true }">クリックで設定</q-btn>
-                    </q-card-actions>
-                    <q-card-section class="text-caption">
-                        <div v-for="(item) in processingObjectsInputDisplay" :key="item">{{ item }}</div>
-                    </q-card-section>
-                </q-card>
-            </template>
-        </q-field>
-        <show-dialog v-model:visible="dgIsShow" name="条件エディタ" @close="closeDg" min-width="60vw" min-height="60vh">
-            <div class="q-mx-md q-mb-md">
-                <q-input v-model="processingProps.name" type="text" label-color="primary" label="変数名を入力してください"
-                    placeholder="varName" />
+  <div>
+    <q-field :label="displayName" labelColor="primary" stack-label>
+      <template v-slot:control>
+        <q-card flat class="full-width">
+          <q-card-actions vertical>
+            <q-btn color="grey-3" text-color="black" @click="() => { dgIsShow = true }">クリックで設定</q-btn>
+          </q-card-actions>
+          <q-card-section class="text-caption">
+            <div v-if="processingObjectsInputDisplay && processingObjectsInputDisplay.length>0">
+              <div v-for="(item) in processingObjectsInputDisplay" :key="item">{{ item }}</div>
             </div>
+            <div v-else>{{ placeholder }}</div>
+          </q-card-section>
+        </q-card>
+      </template>
+    </q-field>
+    <show-dialog v-model:visible="dgIsShow" name="集計処理" @close="closeDg" min-width="50vw" min-height="60vh">
+      <div class="q-mx-md q-mb-md">
+        <q-input v-model="processingProps.name" type="text" label-color="primary" label="集計結果の変数名"
+          placeholder="集計結果を格納する変数名を入力してください" stack-label />
+      </div>
 
-            <div class="q-mx-md">
-                <div class="row q-col-gutter-x-xs flex-center">
-                    <div class="col-5">
-                        <div class="q-mx-xs">数据源</div>
-                    </div>
-                    <div class="col-2">
-                        <div class="q-mx-xs">运算符</div>
-                    </div>
-                    <div class="col-4">
-                        <div class="q-mx-xs">目标变量</div>
-                    </div>
-                    <div class="col-1"><q-btn flat round dense icon="add" size="sm" @click="addProcessingObject" />
-                    </div>
-                </div>
-                <div class="q-my-sm" v-for="(item, index) in processingObjects" :key="item.id">
-                    <div class="row q-col-gutter-x-xs flex-center">
-                        <div class="col-5">
-                            <ConditionObject v-model="item.field" />
-                        </div>
-                        <div class="col-2">
-                            <q-select v-model="item.logicalOperator" :options="logicalOperators" outlined
-                                dense></q-select>
-                        </div>
-                        <div class="col-4">
-                            <q-input v-model="item.vName" type="text" label="Label" outlined dense />
-                        </div>
-                        <div class="col-1">
-                            <q-btn flat round dense icon="delete" size="sm"
-                                @click="() => deleteProcessingObject(index)" />
-
-                        </div>
-                    </div>
-                </div>
+      <div class="q-mx-md">
+        <div class="row q-col-gutter-x-xs flex-center">
+          <div class="col-5">
+            <div class="q-mx-xs">データソース</div>
+          </div>
+          <div class="col-2">
+            <div class="q-mx-xs">集計計算</div>
+          </div>
+          <div class="col-4">
+            <div class="q-mx-xs">集計結果変数名</div>
+          </div>
+          <div class="col-1"><q-btn flat round dense icon="add" size="sm" @click="addProcessingObject" />
+          </div>
+        </div>
+        <div class="q-my-sm" v-for="(item, index) in processingObjects" :key="item.id">
+          <div class="row q-col-gutter-x-xs flex-center">
+            <div class="col-5">
+              <ConditionObject v-model="item.field" />
             </div>
-        </show-dialog>
-    </div>
+            <div class="col-2">
+              <q-select v-model="item.logicalOperator" :options="logicalOperators"  outlined dense></q-select>
+            </div>
+            <div class="col-4">
+              <q-input v-model="item.vName" type="text"  outlined dense />
+            </div>
+            <div class="col-1">
+              <q-btn flat round dense icon="delete" size="sm" @click="() => deleteProcessingObject(index)" />
+
+            </div>
+          </div>
+        </div>
+      </div>
+    </show-dialog>
+  </div>
 </template>
 
 <script lang="ts">
@@ -63,128 +64,166 @@ import ConditionObject from '../ConditionEditor/ConditionObject.vue';
 import ShowDialog from '../ShowDialog.vue';
 
 type Props = {
-    props?: {
-        name: string;
-        modelValue?: {
-            fields: {
-                type: string;
-                label: string;
-                code: string;
-            }[]
-        } | string
-    }
+  props?: {
+    name: string;
+    modelValue?: {
+      fields: {
+        type: string;
+        label: string;
+        code: string;
+      }[]
+    } | string
+  }
 };
 
 type ProcessingObjectType = {
-    field?: {
-        name: string | {
-            name: string;
-        };
-        objectType: string;
-        type: string;
-        code: string;
-        label: string;
-        noLabel: boolean;
+  field?: {
+    name: string | {
+      name: string;
     };
-    logicalOperator?: string;
-    vName?: string;
-    id: string;
+    objectType: string;
+    type: string;
+    code: string;
+    label: string;
+    noLabel: boolean;
+  };
+  logicalOperator?: string;
+  vName?: string;
+  id: string;
 }
 
 type ValueType = {
-    name: string;
-    actionName: string,
-    displayName: string,
-    vars: ProcessingObjectType[];
+  name: string;
+  actionName: string,
+  displayName: string,
+  vars: ProcessingObjectType[];
 }
 
 export default defineComponent({
-    name: 'DataProcessing',
-    inheritAttrs: false,
-    components: {
-        ShowDialog,
-        ConditionObject,
+  name: 'DataProcessing',
+  inheritAttrs: false,
+  components: {
+    ShowDialog,
+    ConditionObject,
+  },
+  props: {
+    context: {
+      type: Array<Props>,
+      default: '',
     },
-    props: {
-        context: {
-            type: Array<Props>,
-            default: '',
-        },
-        displayName: {
-            type: String,
-            default: '',
-        },
-        name: {
-            type: String,
-            default: '',
-        },
-        modelValue: {
-            type: Object as () => ValueType,
-        },
+    displayName: {
+      type: String,
+      default: '',
     },
+    name: {
+      type: String,
+      default: '',
+    },
+    modelValue: {
+      type: Object as () => ValueType,
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+  },
 
-    setup(props, { emit }) {
-        const source = props.context.find(element => element?.props?.name === 'sources')
+  setup(props, { emit }) {
+    const source = props.context.find(element => element?.props?.name === 'sources')
 
-        if (source) {
-            provide('sourceFields', computed(() => {
-                const modelValue = source.props?.modelValue;
-                if (modelValue && typeof modelValue !== 'string') {
-                    return modelValue.fields;
-                }
-                return null;
-            }));
+    if (source) {
+      provide('sourceFields', computed(() => {
+        const modelValue = source.props?.modelValue;
+        if (modelValue && typeof modelValue !== 'string') {
+          return modelValue.fields;
         }
+        return null;
+      }));
+    }
 
-        const actionName = props.context.find(element => element?.props?.name === 'displayName')
+    const actionName = props.context.find(element => element?.props?.name === 'displayName')
 
-        const processingProps: ValueType = props.modelValue && props.modelValue.vars
-            ? props.modelValue
-            : reactive({
-                name: '',
-                actionName: actionName?.props?.modelValue as string,
-                displayName: '結果（戻り値）',
-                vars: [{ id: uuidv4() }]
-            });
+    const processingProps: ValueType = props.modelValue && props.modelValue.vars
+      ? props.modelValue
+      : reactive({
+        name: '',
+        actionName: actionName?.props?.modelValue as string,
+        displayName: '結果（戻り値）',
+        vars: [{ id: uuidv4() }]
+      });
 
-        const closeDg = () => {
-            emit('update:modelValue', processingProps
-            );
-        }
+    const closeDg = () => {
+      emit('update:modelValue', processingProps
+      );
+    }
 
-        const processingObjects = processingProps.vars;
+    const processingObjects = processingProps.vars;
 
-        const deleteProcessingObject = (index: number) => processingObjects.length === 1
-            ? processingObjects.splice(0, processingObjects.length, { id: uuidv4() })
-            : processingObjects.splice(index, 1);
-        const processingObjectsInputDisplay = computed(() =>
-            processingObjects ?
-                processingObjects
-                    .filter(item => item.field && item.logicalOperator && item.vName)
-                    .map(item => {
-                        const name = typeof item.field?.name === 'string'
-                            ? item.field.name
-                            : item.field?.name.name;
-                        return `${processingProps.name}.${item.vName} = ${item.logicalOperator}(${name})`
-                    })
-                : ''
-        );
+    const deleteProcessingObject = (index: number) => processingObjects.length === 1
+      ? processingObjects.splice(0, processingObjects.length, { id: uuidv4() })
+      : processingObjects.splice(index, 1);
 
-        watchEffect(() => {
-            emit('update:modelValue', processingProps);
-        });
-        return {
-            uuidv4,
-            dgIsShow: ref(false),
-            closeDg,
-            processingObjects,
-            processingProps,
-            addProcessingObject: () => processingObjects.push({ id: uuidv4() }),
-            deleteProcessingObject,
-            logicalOperators: reactive(['MAX', 'SUM']),
-            processingObjectsInputDisplay,
-        };
-    },
+    const processingObjectsInputDisplay = computed(() =>
+      processingObjects ?
+        processingObjects
+          .filter(item => item.field && item.logicalOperator && item.vName)
+          .map(item => {
+            const name = typeof item.field?.name === 'string'
+              ? item.field.name
+              : item.field?.name.name;
+            return item.logicalOperator.operator!==''?
+                     `${processingProps.name}.${item.vName} = ${item.logicalOperator.operator}(${name})`
+                    :`${processingProps.name}.${item.vName} = ${name}`
+          })
+        : []
+    );
+    //集計処理方法
+    const logicalOperators = ref([
+      {
+        "operator": "",
+        "label": "なし"
+      },
+      {
+        "operator": "SUM",
+        "label": "合計"
+      },
+      {
+        "operator": "AVG",
+        "label": "平均"
+      },
+      {
+        "operator": "MAX",
+        "label": "最大値"
+      },
+      {
+        "operator": "MIN",
+        "label": "最小値"
+      },
+      {
+        "operator": "COUNT",
+        "label": "カウント"
+      },
+      {
+        "operator": "FIRST",
+        "label": "最初の値"
+      }
+    ]);
+
+    watchEffect(() => {
+      emit('update:modelValue', processingProps);
+    });
+    return {
+      uuidv4,
+      dgIsShow: ref(false),
+      closeDg,
+      processingObjects,
+      processingProps,
+      addProcessingObject: () => processingObjects.push({ id: uuidv4() }),
+      deleteProcessingObject,
+      logicalOperators,
+      processingObjectsInputDisplay,
+    };
+  },
 });
 </script>
-<style lang="scss"></style>
\ No newline at end of file
+<style lang="scss"></style>
diff --git a/frontend/src/components/right/SelectBox.vue b/frontend/src/components/right/SelectBox.vue
index 70f991c..21b4738 100644
--- a/frontend/src/components/right/SelectBox.vue
+++ b/frontend/src/components/right/SelectBox.vue
@@ -1,11 +1,12 @@
 <template>
   <div v-bind="$attrs">
-  <q-select v-model="selectedValue" :label="displayName" :options="options"/>
+  <q-select v-model="selectedValue" :use-chips="multiple" :label="displayName" label-color="primary" :options="options" stack-label
+  :multiple="multiple"/>
 </div>
 </template>
 
 <script lang="ts">
-import { defineComponent,ref,watchEffect } from 'vue';
+import { defineComponent,ref,watchEffect,computed } from 'vue';
 
 export default defineComponent({
   name: 'SelectBox',
@@ -23,20 +24,27 @@ export default defineComponent({
       type: Array,
       required: true,
     },
+    selectType:{
+      type:String,
+      default:'',
+    },
     modelValue: {
-      type: String,
-      default: '',
+      type: Object,
+      default: null,
     },
   },
   setup(props, { emit }) {
     const selectedValue = ref(props.modelValue);
-
+    const multiple = computed(()=>{
+      return props.selectType==='multiple'
+    });
     watchEffect(() => {
       emit('update:modelValue', selectedValue.value);
     });
 
     return {
-      selectedValue
+      selectedValue,
+      multiple
     };
   },
 });

From c3b560dbc9c005cca705200d33bc3ea738b33ce4 Mon Sep 17 00:00:00 2001
From: Mouriya <mouriya@bu.edu>
Date: Sat, 25 May 2024 04:15:09 +0900
Subject: [PATCH 7/7] =?UTF-8?q?=E6=9D=A1=E4=BB=B6=E4=BB=98=E3=81=8D?=
 =?UTF-8?q?=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88?=
 =?UTF-8?q?=E3=81=AF'source'=E3=81=A7appid=E3=82=92=E5=8F=97=E3=81=91?=
 =?UTF-8?q?=E5=8F=96=E3=82=8B=E3=81=93=E3=81=A8=E3=81=8C=E3=81=A7=E3=81=8D?=
 =?UTF-8?q?=E3=82=8B=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/ConditionObjects.vue     |  3 ++-
 frontend/src/components/right/ConditionInput.vue | 11 ++++++++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ConditionObjects.vue b/frontend/src/components/ConditionObjects.vue
index 9939b08..90b2f4f 100644
--- a/frontend/src/components/ConditionObjects.vue
+++ b/frontend/src/components/ConditionObjects.vue
@@ -19,7 +19,7 @@
 
         <q-tab-panels v-model="tab" animated>
           <q-tab-panel name="fields">
-              <field-list v-model="selected" type="single" :filter="filter" :appId="appId" :fields="sourceFields"></field-list>
+              <field-list v-model="selected" type="single" :filter="filter" :appId="sourceApp ? sourceApp :appId " :fields="sourceFields"></field-list>
             </q-tab-panel>
 
           <q-tab-panel name="vars" >
@@ -53,6 +53,7 @@ export default {
     
     return {
       sourceFields : inject('sourceFields'),
+      sourceApp : inject('sourceApp'),
       tab: ref('fields'),
       selected
     }
diff --git a/frontend/src/components/right/ConditionInput.vue b/frontend/src/components/right/ConditionInput.vue
index bc44fa4..966339a 100644
--- a/frontend/src/components/right/ConditionInput.vue
+++ b/frontend/src/components/right/ConditionInput.vue
@@ -69,13 +69,22 @@ export default defineComponent({
       type: String,
       default: null
     },
+    sourceType: {
+      type: String,
+      default: 'field'
+    }
   },
 
   setup(props, { emit }) {
     const source = props.context.find(element => element?.props?.name === 'sources')
     
     if (source) {
-      provide('sourceFields', computed( () => source.props?.modelValue?.fields ?? []));
+      if(props.sourceType === 'field'){
+        provide('sourceFields', computed( () => source.props?.modelValue?.fields ?? []));
+      } else if(props.sourceType === 'app'){
+        console.log('sourceApp', source.props?.modelValue);
+        provide('sourceApp', computed( () => source.props?.modelValue?.app?.id));
+      }
     }
 
     const appDg = ref();