変数設定を追加

2024-02-21 16:28:43 +09:00
parent 08e857884b
commit 4102ff5522
14 changed files with 336 additions and 158 deletions
--- a/frontend/src/components/ConditionEditor/ConditionObject.vue
+++ b/frontend/src/components/ConditionEditor/ConditionObject.vue
@@ -1,30 +1,34 @@
 <template>
-  <q-field v-model="selectedField" labelColor="primary" class="condition-object"
+  <q-field v-model="selectedObject" labelColor="primary" class="condition-object"
          :clearable="isSelected" stack-label  :dense="true" :outlined="true" >
    <template v-slot:control >
-      <q-chip  color="primary" text-color="white"  v-if="isSelected" :dense="true" class="selected-obj">
-        {{ selectedField.name }}
+      <q-chip  color="primary" text-color="white" v-if="isSelected && selectedObject.objectType==='field'" :dense="true" class="selected-obj">
+        {{ selectedObject.name }}
+      </q-chip>
+      <q-chip  color="info" text-color="white" v-if="isSelected && selectedObject.objectType==='variable'" :dense="true" class="selected-obj">
+        {{ selectedObject.name }}
      </q-chip>
    </template>
   <template v-slot:append>
    <q-icon name="search" class="cursor-pointer"  @click="showDg"/>
    </template>
  </q-field>
-  <show-dialog v-model:visible="show" name="フィールド一覧" @close="closeDg" widht="400px">
-    <condition-objects ref="appDg" name="フィールド" type="single" :appId="store.appInfo?.appId"></condition-objects>
+  <show-dialog v-model:visible="show" name="条件設定項目一覧" @close="closeDg" width="600px">
+    <condition-objects ref="appDg" name="フィールド" type="single" :appId="store.appInfo?.appId" :vars="vars"></condition-objects>
  </show-dialog>
  </template>

  <script lang="ts">
-  import { defineComponent, ref ,watchEffect,computed} from 'vue';
+  import { defineComponent, reactive, ref ,watchEffect,computed} from 'vue';
  import ShowDialog from '../ShowDialog.vue';
  import ConditionObjects from '../ConditionObjects.vue';
  import { useFlowEditorStore } from '../../stores/flowEditor';
+  import {IActionFlow,IActionNode,IActionVariable} from '../../types/ActionTypes';
  export default defineComponent({
    name: 'ConditionObject',
    components: {
      ShowDialog,
-      ConditionObjects,
+      ConditionObjects
    },
    props: {
      modelValue: {
@@ -35,11 +39,15 @@
    setup(props, { emit }) {
      const appDg = ref();
      const show = ref(false);
-      const selectedField = ref(props.modelValue);
+      const selectedObject = ref(props.modelValue);
      const store = useFlowEditorStore();
      const isSelected = computed(()=>{
-        return selectedField.value!==null && typeof selectedField.value === 'object' && ('name' in selectedField.value)
+        return selectedObject.value!==null && typeof selectedObject.value === 'object' && ('name' in selectedObject.value)
      });
+      let vars:IActionVariable[] =[];
+      if(store.currentFlow!==undefined && store.activeNode!==undefined ){
+        vars =store.currentFlow.getVarNames(store.activeNode);
+      }

      const showDg = () => {
        show.value = true;
@@ -47,12 +55,12 @@

      const closeDg = (val:string) => {
        if (val == 'OK') {
-          selectedField.value = appDg.value.selected[0];
+          selectedObject.value = appDg.value.selected[0];
        }
      };

      watchEffect(() => {
-        emit('update:modelValue', selectedField.value);
+        emit('update:modelValue', selectedObject.value);
      });

      return {
@@ -61,7 +69,8 @@
        show,
        showDg,
        closeDg,
-        selectedField,
+        selectedObject,
+        vars:reactive(vars),
        isSelected
      };
    }
--- a/frontend/src/components/ConditionEditor/NodeCondition.vue
+++ b/frontend/src/components/ConditionEditor/NodeCondition.vue
@@ -106,11 +106,7 @@
          </div>
      </template>
    </q-tree>
-    <!-- <q-btn @click="addCondition(tree.root)" class="q-mt-md" color="primary" icon="mdi-plus">Add Condition</q-btn> -->
-    <!-- <q-btn @click="getConditionString()" class="q-mt-md" color="primary" icon="mdi-plus">Show Condtion</q-btn>
-    <q-btn @click="getConditionJson()" class="q-mt-md" color="primary" icon="mdi-plus">Show Condtion data</q-btn>
-    <q-btn @click="LoadCondition()" class="q-mt-md" color="primary" icon="mdi-plus">Load Condition</q-btn> -->
-    <q-tooltip anchor="center middle" v-model="showingCondition" no-parent-event>
+   <q-tooltip anchor="center middle" v-model="showingCondition" no-parent-event>
 import { finished } from 'stream';
      {{ conditionString }}
    </q-tooltip>
--- a/frontend/src/components/ConditionObjects.vue
+++ b/frontend/src/components/ConditionObjects.vue
@@ -1,53 +1,57 @@
 <template>
-  <div class="q-pa-md">
-    <div v-if="!isLoaded" class="spinner flex flex-center">
-      <q-spinner  color="primary" size="3em" />
-    </div>
-    <q-table v-else  row-key="name"  :selection="type" v-model:selected="selected" :columns="columns" :rows="rows" />
-  </div>
+  <div class="q-gutter-y-md" style="max-width: 600px;">
+    <q-card >
+     <q-tabs
+          v-model="tab"
+          dense
+          class="text-grey"
+          active-color="white"
+          active-bg-color="primary"
+          indicator-color="primary"
+          align="justify"
+          narrow-indicator
+        >
+          <q-tab name="fields" label="フィールド"></q-tab>
+          <q-tab name="vars" label="変数"></q-tab>
+        </q-tabs>
+
+        <q-separator></q-separator>
+
+        <q-tab-panels v-model="tab" animated>
+          <q-tab-panel name="fields">
+              <field-list v-model="selected" type="single" :appId="appId"></field-list>
+            </q-tab-panel>
+
+          <q-tab-panel name="vars" >
+            <variable-list v-model="selected" type="single" :vars="vars"></variable-list>
+          </q-tab-panel>
+        </q-tab-panels>
+      </q-card>
+</div>
 </template>
-<script>
-import { ref,onMounted,reactive } from 'vue'
-import { api } from 'boot/axios';
+<script lang="ts">
+import { ref, onMounted, reactive } from 'vue'
+import FieldList from './FieldList.vue';
+import VariableList from './VariableList.vue';

 export default {
  name: 'ConditionObjects',
+  components:{
+    FieldList,
+    VariableList
+  },
  props: {
    name: String,
    type: String,
-    appId:Number
+    appId: Number,
+    vars: Array
  },
  setup(props) {
-    const isLoaded=ref(false);
-    const columns = [
-    { name: 'name', required: true,label: 'フィールド名',align: 'left',field: row=>row.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:fields[key].label,code:fields[key].code,type:fields[key].type});
-              rows.push({name:fld.label,objectType:'field',...fld});
-            });
-            isLoaded.value=true;
-        });

-      return {
-        columns,
-        rows,
-        selected: ref([]),
-        isLoaded
-      }
+    return {
+      tab: ref('fields'),
+      selected: ref([])
+    }
  },

 }
--- a/frontend/src/components/FieldList.vue
+++ b/frontend/src/components/FieldList.vue
@@ -0,0 +1,53 @@
+<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)" :columns="columns" :rows="rows" />
+  </div>
+</template>
+<script>
+import { ref, onMounted, reactive } from 'vue'
+import { api } from 'boot/axios';
+
+export default {
+  name: 'FieldList',
+  props: {
+    name: String,
+    type: String,
+    appId: Number,
+    modelValue:Array
+   },
+   emits:[
+   'update:modelValue'
+   ],
+  setup(props) {
+    const isLoaded = ref(false);
+    const columns = [
+      { name: 'name', required: true, label: 'フィールド名', align: 'left', field: row => row.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;
+    });
+
+    return {
+      columns,
+      rows,
+      // selected: ref([]),
+      isLoaded
+    }
+  },
+
+}
+</script>
--- a/frontend/src/components/VariableList.vue
+++ b/frontend/src/components/VariableList.vue
@@ -0,0 +1,44 @@
+<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" />
+  </div>
+</template>
+<script lang="ts">
+import { ref, reactive, PropType, compile } from 'vue';
+import {IActionNode,IActionVariable} from '../types/ActionTypes';
+
+export default {
+  name: 'VariableList',
+  props: {
+    name: String,
+    type: String,
+    vars:{
+      type:Array as PropType<IActionVariable[]>,
+      reqired:true,
+      default:()=>[]
+    },
+    modelValue:Array
+  },
+  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 rows= props.vars.map((v)=>{
+      return {objectType:'variable',...v};
+    });
+
+    return {
+      columns,
+      rows:reactive(rows)
+    }
+  }
+}
+</script>
--- a/frontend/src/components/right/PropertyPanel.vue
+++ b/frontend/src/components/right/PropertyPanel.vue
@@ -13,7 +13,7 @@
       >
        <q-card class="column full-height" style="width: 300px">
         <q-card-section>
-           <div class="text-h6">{{ actionNode.subTitle }}：設定</div>
+           <div class="text-h6">{{ actionNode?.subTitle }}：設定</div>
         </q-card-section>
         <q-card-section class="col q-pt-none">
           <property-list :node-props="actionProps" v-if="showPanel" ></property-list>
@@ -51,10 +51,10 @@ import { IActionNode } from 'src/types/ActionTypes';
  ],
  setup(props,{emit}) {
    const showPanel =ref(props.drawerRight);
-    const actionProps =ref(props.actionNode.actionProps);
+    const actionProps =ref(props.actionNode?.actionProps);
    watchEffect(() => {
      showPanel.value = props.drawerRight;
-      actionProps.value= props.actionNode.actionProps;
+      actionProps.value= props.actionNode?.actionProps;
    });

    const cancel = async() =>{