プロパティ属性設定連動実装

frontend/src/components/Rules.ts

@@ -1,9 +0,0 @@
-export interface Rule{
-  id:number;
-  name:string;
-  condtion:CondtionTree
-}
-
-export interface CondtionTree{
-  
-}

frontend/src/components/main/NodeItem.vue

@@ -1,18 +1,24 @@
 <template>
-  <div class="row justify-center" :style="{ marginLeft: node.inputPoint !== '' ? '240px' : '' }" @click="onNodeClick">
+  <div class="row justify-center" :style="{ marginLeft: node.inputPoint !== '' ? '240px' : '' }" >
     <div class="row">
-      <q-card class="action-node" :class="nodeStyle" :square="false" >
+      <q-card class="action-node" :class="nodeStyle" :square="false" @click="onNodeClick" >
         <q-toolbar class="col" >
           <div class="text-subtitle2">{{ node.subTitle }}</div>
           <q-space></q-space>
-          <q-btn flat round dense icon="more_horiz" >
+          <q-btn flat round dense icon="more_horiz" size="sm" >
             <q-menu  auto-close anchor="top right">
                 <q-list>
-                  <q-item clickable v-if="!isRoot">
+                  <q-item clickable v-if="!isRoot" @click="onEditNode">
+                    <q-item-section avatar><q-icon name="edit" ></q-icon></q-item-section>
+                    <q-item-section >編集する</q-item-section>
+                  </q-item>
+                  <q-item clickable v-if="!isRoot"  @click="onDeleteNode">
+                    <q-item-section avatar><q-icon name="delete" ></q-icon></q-item-section>
                     <q-item-section>削除する</q-item-section>
                   </q-item>
-                  <q-item clickable>
-                    <q-item-section>以下すべて削除する</q-item-section>
+                  <q-item clickable @click="onDeleteAllNode">
+                    <q-item-section avatar><q-icon name="delete_sweep" ></q-icon></q-item-section>
+                    <q-item-section >以下すべて削除する</q-item-section>
                   </q-item>
                 </q-list>
               </q-menu>
@@ -67,7 +73,10 @@ export default defineComponent({
   },
   emits: [
     'addNode',
-    "nodeSelected"
+    "nodeSelected",
+    "nodeEdit",
+    "deleteNode",
+    "deleteAllNextNodes",
   ],
   setup(props, context) {
     const hasBranch = computed(() => props.actionNode.outputPoints.length > 0);
@@ -83,13 +92,13 @@ export default defineComponent({
         return Direction.Default;
       }
       if (point === props.actionNode.outputPoints[0]) {
-        if (props.actionNode.nextNodes.get(point)) {
+        if (props.actionNode.nextNodeIds.get(point)) {
           return Direction.Left;
         } else {
           return Direction.LeftNotNext;
         }
       } else {
-        if (props.actionNode.nextNodes.get(point)) {
+        if (props.actionNode.nextNodeIds.get(point)) {
           return Direction.Right;
         } else {
           return Direction.RightNotNext;
@@ -109,6 +118,23 @@ export default defineComponent({
     const onNodeClick = () => {
       context.emit('nodeSelected', props.actionNode);
     }
+
+    const onEditNode=()=>{
+      context.emit('nodeEdit', props.actionNode);
+    }
+    /**
+     * ノードを削除する
+     */
+    const onDeleteNode=()=>{
+      context.emit('deleteNode', props.actionNode);
+    }
+
+    /**
+     * ノードの以下すべて削除する
+     */
+     const onDeleteAllNode=()=>{
+      context.emit('deleteAllNextNodes', props.actionNode);
+    }
     return {
       node: props.actionNode,
       isRoot: props.actionNode.isRoot,
@@ -116,7 +142,10 @@ export default defineComponent({
       nodeStyle,
       getMode,
       addNode,
-      onNodeClick
+      onNodeClick,
+      onEditNode,
+      onDeleteNode,
+      onDeleteAllNode
     }
   }
 });
@@ -152,6 +181,6 @@ export default defineComponent({
 }
 
 .selected{
-  background-color: $light-blue-1;
+  background-color: $yellow-1;
 }
 </style>

frontend/src/components/right/PropertyList.vue

@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <div v-for="(item, index) in properties" :key="index">
+      <component :is="item.component" v-bind="item.props" v-model="item.props.modelValue"></component>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+/**
+ * プロパティ属性設定生成する
+ */
+import { PropType, defineComponent,ref } from 'vue';
+import InputText from '../right/InputText.vue';
+import SelectBox from '../right/SelectBox.vue';
+import DatePicker from '../right/DatePicker.vue';
+import FieldInput from '../right/FieldInput.vue';
+import { IActionNode,IActionProperty } from 'src/types/ActionTypes';
+
+export default defineComponent({
+  name: 'PropertyList',
+  components: {
+    InputText,
+    SelectBox,
+    DatePicker,
+    FieldInput
+  },
+  props: {
+    nodeProps: {
+      type: Object as PropType<Array<IActionProperty>>,
+      required: true,
+    },
+    jsonValue:{
+      type: Object,
+      required: false,
+    }
+  },
+  setup(props, context) {
+    const properties=ref(props.nodeProps)
+    return {
+      properties
+    }
+  }
+});
+</script>

frontend/src/components/right/PropertyPanel.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="q-pa-md q-gutter-sm">
+    <q-drawer
+         side="right"
+         :show-if-above="false"
+         bordered
+         :width="301"
+         :breakpoint="500"
+         class="bg-grey-3"
+         :model-value="showPanel"
+         elevated
+         overlay
+       >
+        <q-card class="column full-height" style="width: 300px">
+         <q-card-section>
+           <div class="text-h6">プロパティ</div>
+         </q-card-section>
+         <q-card-section class="col q-pt-none">
+           <property-list :node-props="actionProps" v-if="showPanel" ></property-list>
+         </q-card-section>
+
+         <q-card-actions align="right" class="bg-white text-teal">
+           <q-btn flat label="Save"  @click="save"/>
+           <q-btn flat label="Cancel" @click="cancel" />
+         </q-card-actions>
+       </q-card>
+   </q-drawer>
+   </div>
+ </template>
+ <script lang="ts">
+ import { reactive, ref,defineComponent, defineProps,PropType ,watchEffect} from 'vue'
+ import PropertyList from 'components/right/PropertyList.vue';
+import { IActionNode } from 'src/types/ActionTypes';
+ export default defineComponent({
+  name: 'PropertyPanel',
+  components: {
+    PropertyList
+  },
+  props: {
+    actionNode:{
+      type:Object as PropType<IActionNode>,
+      required:true
+    },
+    drawerRight:{
+      type:Boolean,
+      required:true
+    }
+  },
+  emits: [
+    "update:drawerRight"
+  ],
+  setup(props,{emit}) {
+    const showPanel =ref(props.drawerRight);
+    const actionProps =ref(props.actionNode.actionProps);
+    watchEffect(() => {
+      showPanel.value = props.drawerRight;
+      actionProps.value= props.actionNode.actionProps;
+    });
+
+    const cancel = async() =>{
+      showPanel.value = false;
+      emit("update:drawerRight",false )
+    }
+
+    const save = async () =>{
+      showPanel.value=false;
+      emit("update:drawerRight",false )
+    }
+
+    return {
+      cancel,
+      save,
+      actionProps,
+      showPanel
+    }
+  }
+});
+ </script>
+ <style lang="scss">
+</style>