条件式比較バグ修正

2024-02-16 14:09:43 +09:00
parent 2b9b772b39
commit c0db2d230b
9 changed files with 314 additions and 129 deletions
--- a/frontend/.env
+++ b/frontend/.env
@@ -1,3 +1,3 @@
-KAB_BACKEND_URL="https://kab-backend.azurewebsites.net/"
-#KAB_BACKEND_URL="http://127.0.0.1:8000/"
+#KAB_BACKEND_URL="https://kab-backend.azurewebsites.net/"
+KAB_BACKEND_URL="http://127.0.0.1:8000/"

--- a/frontend/src/components/main/NodeItem.vue
+++ b/frontend/src/components/main/NodeItem.vue
@@ -8,6 +8,10 @@
          <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" @click="copyFlow">
+                    <q-item-section avatar><q-icon name="content_copy" ></q-icon></q-item-section>
+                    <q-item-section >コピーする</q-item-section>
+                  </q-item>
                  <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>
@@ -81,6 +85,7 @@ export default defineComponent({
    "nodeEdit",
    "deleteNode",
    "deleteAllNextNodes",
+    "copyFlow"
  ],
  setup(props, context) {
    const hasBranch = computed(() => props.actionNode.outputPoints.length > 0);
@@ -146,6 +151,9 @@ export default defineComponent({
      const prop = node.actionProps.find((prop) => prop.props.name === "verName");
      return prop?.props.modelValue;
    };
+    const copyFlow=()=>{
+      context.emit('copyFlow', props.actionNode);
+    }
    return {
      node: props.actionNode,
      isRoot: props.actionNode.isRoot,
@@ -157,6 +165,7 @@ export default defineComponent({
      onEditNode,
      onDeleteNode,
      onDeleteAllNode,
+      copyFlow,
      varName
    }
  }
--- a/frontend/src/pages/FlowChart.vue
+++ b/frontend/src/pages/FlowChart.vue
@@ -1,63 +1,47 @@
 <template>
  <q-page>
-    <q-layout
-      container
-      class="absolute-full shadow-2 rounded-borders"
-    >
+    <q-layout container class="absolute-full shadow-2 rounded-borders">
      <div class="q-pa-sm q-gutter-sm  ">
-        <q-drawer
-        side="left"
-        :overlay="true"
-        bordered
-        v-model="drawerLeft"
-        :show-if-above="false"
-        elevated
-        >
-            <div class="flex-center fixed-top app-selector" >
-                <AppSelector  />
-            </div>
+        <q-drawer side="left" :overlay="true" bordered v-model="drawerLeft" :show-if-above="false" elevated>
+          <div class="flex-center fixed-top app-selector">
+            <AppSelector />
+          </div>

-            <div class="flex-center absolute-full" style="padding-top:65px;padding-left:15px;padding-right:15px;">
-              <q-scroll-area class="fit" :horizontal-thumb-style="{ opacity: '0' }">
-                <EventTree />
-              </q-scroll-area>
-            </div>
+          <div class="flex-center absolute-full" style="padding-top:65px;padding-left:15px;padding-right:15px;">
+            <q-scroll-area class="fit" :horizontal-thumb-style="{ opacity: '0' }">
+              <EventTree />
+            </q-scroll-area>
+          </div>

-            <div class="flex-center fixed-bottom bg-grey-3 q-pa-md row ">
-              <q-btn color="secondary" glossy label="デプロイ"  @click="onDeploy" icon="sync" :loading="deployLoading" />
-              <q-space></q-space>
-              <q-btn color="primary" label="保存" @click="onSaveFlow" icon="save" :loading="saveLoading"/>
-            </div>
+          <div class="flex-center fixed-bottom bg-grey-3 q-pa-md row ">
+            <q-btn color="secondary" glossy label="デプロイ" @click="onDeploy" icon="sync" :loading="deployLoading" />
+            <q-space></q-space>
+            <q-btn color="primary" label="保存" @click="onSaveFlow" icon="save" :loading="saveLoading" />
+          </div>
        </q-drawer>
      </div>
      <div class="q-pa-md q-gutter-sm">
        <div class="flowchart" v-if="store.currentFlow">
-          <node-item v-for="(node,) in store.currentFlow.actionNodes" :key="node.id"
-          :isSelected="node===state.activeNode" :actionNode="node"
-          @addNode="addNode"
-          @nodeSelected="onNodeSelected"
-          @nodeEdit="onNodeEdit"
-          @deleteNode="onDeleteNode"
-          @deleteAllNextNodes="onDeleteAllNextNodes"
-          ></node-item>
+          <node-item v-for="(node,) in store.currentFlow.actionNodes" :key="node.id" :isSelected="node === state.activeNode"
+            :actionNode="node" @addNode="addNode" @nodeSelected="onNodeSelected" @nodeEdit="onNodeEdit"
+            @deleteNode="onDeleteNode" @deleteAllNextNodes="onDeleteAllNextNodes" @copyFlow="onCopyFlow"></node-item>
        </div>
      </div>
      <PropertyPanel :actionNode="state.activeNode" v-model:drawerRight="drawerRight"></PropertyPanel>
    </q-layout>
    <ShowDialog v-model:visible="showAddAction" name="アクション" @close="closeDg" width="350px">
-        <action-select ref="appDg" name="model" type="single"></action-select>
+      <action-select ref="appDg" name="model" type="single"></action-select>
    </ShowDialog>

  </q-page>
-
 </template>

 <script setup lang="ts">
-import {ref,reactive,computed,onMounted} from 'vue';
-import {IActionNode, ActionNode, IActionFlow, ActionFlow,RootAction, IActionProperty } from 'src/types/ActionTypes';
+import { ref, reactive, computed, onMounted } from 'vue';
+import { IActionNode, ActionNode, IActionFlow, ActionFlow, RootAction, IActionProperty } from 'src/types/ActionTypes';
 import { storeToRefs } from 'pinia';
 import { useFlowEditorStore } from 'stores/flowEditor';
-import { authStore, useAuthStore } from 'stores/useAuthStore';
+import { useAuthStore } from 'stores/useAuthStore';

 import NodeItem from 'src/components/main/NodeItem.vue';
 import ShowDialog from 'components/ShowDialog.vue';
@@ -65,161 +49,177 @@ import ActionSelect from 'components/ActionSelect.vue';
 import PropertyPanel from 'components/right/PropertyPanel.vue';
 import AppSelector from 'components/left/AppSelector.vue';
 import EventTree from 'components/left/EventTree.vue';
-import {FlowCtrl } from '../control/flowctrl';
+import { FlowCtrl } from '../control/flowctrl';
 import { useQuasar } from 'quasar';
 const deployLoading = ref(false);
 const saveLoading = ref(false);
 const drawerLeft = ref(false);
-const $q=useQuasar();
+const $q = useQuasar();
 const store = useFlowEditorStore();
-const authStore =useAuthStore();
+const authStore = useAuthStore();
 // ref関数を使ってtemplateとバインド
-const state=reactive({
-  activeNode:{
-    id:""
+const state = reactive({
+  activeNode: {
+    id: ""
  },
 })
 const appDg = ref();
-const prevNodeIfo=ref({
-  prevNode:{} as IActionNode,
-  inputPoint:""
+const prevNodeIfo = ref({
+  prevNode: {} as IActionNode,
+  inputPoint: ""
 });
 // const refFlow = ref<ActionFlow|null>(null);
-const showAddAction=ref(false);
-const drawerRight=ref(false);
-const model=ref("");
-const addActionNode=(action:IActionNode)=>{
+const showAddAction = ref(false);
+const drawerRight = ref(false);
+const model = ref("");
+const addActionNode = (action: IActionNode) => {
  // refFlow.value?.actionNodes.push(action);
- store.currentFlow?.actionNodes.push(action);
+  store.currentFlow?.actionNodes.push(action);
 }

-const addNode=(node:IActionNode,inputPoint:string)=>{
-  if(drawerRight.value){
-    drawerRight.value=false;
+const addNode = (node: IActionNode, inputPoint: string) => {
+  if (drawerRight.value) {
+    drawerRight.value = false;
  }
-  showAddAction.value=true;
-  prevNodeIfo.value.prevNode=node;
-  prevNodeIfo.value.inputPoint=inputPoint;
+  showAddAction.value = true;
+  prevNodeIfo.value.prevNode = node;
+  prevNodeIfo.value.inputPoint = inputPoint;
 }

-const onNodeSelected=(node:IActionNode)=>{
+const onNodeSelected = (node: IActionNode) => {
  //右パネルが開いている場合、自動閉じる
-  if(drawerRight.value && state.activeNode.id!==node.id){
-    drawerRight.value=false;
+  if (drawerRight.value && state.activeNode.id !== node.id) {
+    drawerRight.value = false;
  }
  state.activeNode = node;
 }

-const onNodeEdit=(node:IActionNode)=>{
+const onNodeEdit = (node: IActionNode) => {
  state.activeNode = node;
-  drawerRight.value=true;
+  drawerRight.value = true;
 }

-const onDeleteNode=(node:IActionNode)=>{
-  if(!store.currentFlow) return;
+const onDeleteNode = (node: IActionNode) => {
+  if (!store.currentFlow) return;
  //右パネルが開いている場合、自動閉じる
-  if(drawerRight.value && state.activeNode.id===node.id){
-    drawerRight.value=false;
+  if (drawerRight.value && state.activeNode.id === node.id) {
+    drawerRight.value = false;
  }
  store.currentFlow?.removeNode(node);
 }

-const onDeleteAllNextNodes=(node:IActionNode)=>{
-  if(!store.currentFlow) return;
+const onDeleteAllNextNodes = (node: IActionNode) => {
+  if (!store.currentFlow) return;
  //右パネルが開いている場合、自動閉じる
-  if(drawerRight.value){
-    drawerRight.value=false;
+  if (drawerRight.value) {
+    drawerRight.value = false;
  }
  store.currentFlow?.removeAllNext(node.id);
 }
-const closeDg=(val :any)=>{
-  console.log("Dialog closed->",val);
+const closeDg = (val: any) => {
+  console.log("Dialog closed->", val);
  if (val == 'OK') {
-      const data  = appDg.value.selected[0];
-      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);
+    const data = appDg.value.selected[0];
+    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);
  }
 }
+/*
+ *フローのデータをコピーする
+ */
+const onCopyFlow = () => {
+  if (navigator.clipboard) {
+    const jsonData =JSON.stringify(store.currentFlow) ;
+    navigator.clipboard.writeText(jsonData).then(() => {
+      console.log('Text successfully copied to clipboard');
+    },
+      (err) => {
+        console.error('Error in copying text: ', err);
+      });
+  } else {
+    console.log('Clipboard API not available');
+  }
+};
 /**
 * デプロイ
 */
-const onDeploy= async ()=>{
-  if(store.appInfo===undefined || store.flows?.length===0){
+const onDeploy = async () => {
+  if (store.appInfo === undefined || store.flows?.length === 0) {
    $q.notify({
      type: 'negative',
-      caption:"エラー",
+      caption: "エラー",
      message: `設定されたフローがありません。`
    });
    return;
  }
-  try{
-    deployLoading.value=true;
+  try {
+    deployLoading.value = true;
    await store.deploy();
-    deployLoading.value=false;
+    deployLoading.value = false;
    $q.notify({
      type: 'positive',
-      caption:"通知",
+      caption: "通知",
      message: `デプロイを成功しました。`
    });
-  }catch(error){
+  } catch (error) {
    console.error(error);
-    deployLoading.value=false;
+    deployLoading.value = false;
    $q.notify({
      type: 'negative',
-      caption:"エラー",
+      caption: "エラー",
      message: `デプロイが失敗しました。`
    })
  }
  return;
 }

-const onSaveFlow = async ()=>{
+const onSaveFlow = async () => {
  const targetFlow = store.selectedFlow;
-  if(targetFlow===undefined){
+  if (targetFlow === undefined) {
    $q.notify({
      type: 'negative',
-      caption:"エラー",
+      caption: "エラー",
      message: `編集中のフローがありません。`
    });
    return;
  }
-  try{
-    saveLoading.value=true;
+  try {
+    saveLoading.value = true;
    await store.saveFlow(targetFlow);
-    saveLoading.value=false;
+    saveLoading.value = false;
    $q.notify({
      type: 'positive',
-      caption:"通知",
+      caption: "通知",
      message: `${targetFlow.getRoot()?.subTitle}のフロー設定を保存しました。`
    });
-  }catch(error){
+  } catch (error) {
    console.error(error);
-    saveLoading.value=false;
+    saveLoading.value = false;
    $q.notify({
      type: 'negative',
-      caption:"エラー",
+      caption: "エラー",
      message: `${targetFlow.getRoot()?.subTitle}のフローの設定の保存が失敗しました。`
    })
  }

 }

-const fetchData = async ()=>{
-  drawerLeft.value=true;
-  if(store.appInfo===undefined) return;
+const fetchData = async () => {
+  drawerLeft.value = true;
+  if (store.appInfo === undefined) return;
  const flowCtrl = new FlowCtrl();
  const actionFlows = await flowCtrl.getFlows(store.appInfo?.appId);
-  if(actionFlows && actionFlows.length>0){
+  if (actionFlows && actionFlows.length > 0) {
    store.setFlows(actionFlows);
  }
-  if(actionFlows && actionFlows.length==1){
+  if (actionFlows && actionFlows.length == 1) {
    store.selectFlow(actionFlows[0]);
  }
-  const root =actionFlows[0].getRoot();
-  if(root){
-    state.activeNode=root;
+  const root = actionFlows[0].getRoot();
+  if (root) {
+    state.activeNode = root;
  }
 }

@@ -230,20 +230,21 @@ onMounted(() => {
 </script>

 <style lang="scss">
-  .app-selector{
-    padding:15px;
-    z-index: 999;
-  }
+.app-selector {
+  padding: 15px;
+  z-index: 999;
+}

-  .flowchart{
-    padding-top: 10px;
-  }
-  .flow-toolbar{
+.flowchart {
+  padding-top: 10px;
+}
+
+.flow-toolbar {
  opacity: 50%;
-  }
+}

-  .event-tree .q-drawer {
-    top:50px;
-    z-index: 999;
-  }
+.event-tree .q-drawer {
+  top: 50px;
+  z-index: 999;
+}
 </style>