条件エディタ追加

frontend/src/pages/FlowChart.vue

@@ -92,6 +92,9 @@ const addActionNode=(action:IActionNode)=>{
 }
 
 const addNode=(node:IActionNode,inputPoint:string)=>{
+  if(drawerRight.value){
+    drawerRight.value=false;
+  }
   showAddAction.value=true;
   prevNodeIfo.value.prevNode=node;
   prevNodeIfo.value.inputPoint=inputPoint;
@@ -112,19 +115,28 @@ const onNodeEdit=(node:IActionNode)=>{
 
 const onDeleteNode=(node:IActionNode)=>{
   if(!store.currentFlow) return;
+  //右パネルが開いている場合、自動閉じる
+  if(drawerRight.value && state.activeNode.id===node.id){
+    drawerRight.value=false;
+  }
   store.currentFlow?.removeNode(node);
 }
 
 const onDeleteAllNextNodes=(node:IActionNode)=>{
   if(!store.currentFlow) return;
+  //右パネルが開いている場合、自動閉じる
+  if(drawerRight.value){
+    drawerRight.value=false;
+  }
   store.currentFlow?.removeAllNext(node.id);
 }
 const closeDg=(val :any)=>{
   console.log("Dialog closed->",val);
   if (val == 'OK') {
       const data  = appDg.value.selected[0];
-      const actionProps=JSON.parse(data.content);
-      const action = new ActionNode(data.name,data.desc,"",[],actionProps);
+      const actionProps=JSON.parse(data.property);
+      const outputPoint =JSON.parse(data.outputPoints);
+      const action = new ActionNode(data.name,data.desc,"",outputPoint,actionProps);
       store.currentFlow?.addNode(action, prevNodeIfo.value.prevNode,prevNodeIfo.value.inputPoint);
   }
 }

frontend/src/pages/conditionPage.vue

@@ -1,14 +1,35 @@
 <template>
   <q-page>
     <div class="flowchart">
-      <node-condition></node-condition>
+      <q-btn @click="showCondition()" class="q-mt-md" color="primary" icon="mdi-plus">条件エディタ表示</q-btn>
     </div>
-
+    <condition-editor v-model:show="show" v-model:conditionTree="tree"></condition-editor>
+    <p>{{conditionString}}</p>
   </q-page>
 </template>
 
 <script setup lang="ts">
-import NodeCondition from 'src/components/main/NodeCondition.vue';
+import {ref,reactive,computed} from 'vue';
+import ConditionEditor from '../components/ConditionEditor/ConditionEditor.vue';
+import { useFlowEditorStore } from 'stores/flowEditor';
+import { ConditionTree,GroupNode,ConditionNode,LogicalOperator,Operator } from 'app/src/types/Conditions';
+
+const store = useFlowEditorStore();
+const tree = reactive(new ConditionTree());
+const newNode = new ConditionNode(LogicalOperator.AND,{},Operator.Equal,'',tree.root);
+tree.addNode(tree.root,newNode);
+
+const show =ref(false);
+const showCondition=()=>{
+  show.value=true;
+}
+const conditionString = computed(()=>{
+    return tree.buildConditionString(tree.root);
+  });
+store.setApp({
+  appId:'146',
+  name:'トリトン管理部日報'
+});
 </script>
 
 <style lang="scss">