条件エディタ追加

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">