Replace ItemSelector with ActionSelec

frontend/src/pages/FlowEditorPage.vue

@@ -61,8 +61,26 @@
 
         <div class="q-mt-lg q-pa-sm">
           <q-card-section>
-            <p class="text-h6 q-pl-md">ページ選択</p>
-            <ItemSelector />
+            <p class="text-h6 q-pl-md">アクション選択</p>
+            <div>
+              <q-btn
+                label="アクション選択"
+                color="primary"
+                @click="showDg()"
+                v-if="addshow"
+              />
+              <show-dialog
+                v-model:visible="show"
+                name="アクション"
+                @close="closeDg"
+              >
+                <action-select
+                  ref="appDg"
+                  name="アクション"
+                  type="single"
+                ></action-select>
+              </show-dialog>
+            </div>
           </q-card-section>
         </div>
         <q-separator />
@@ -97,6 +115,14 @@ import FlowChartTest from 'pages/FlowChartTest.vue';
 import ControlPanel from 'components/flowEditor/left/ControlPanelC.vue';
 import ItemSelector from 'components/flowEditor/left/ItemSelector.vue';
 import { computed, ref } from 'vue';
+
+import ShowDialog from 'components/ShowDialog.vue';
+import ActionSelect from 'components/ActionSelect.vue';
+
+const show = ref(false);
+const addshow = ref(true);
+const appDg = ref();
+
 interface FlowEditorPageProps {
   actName: string;
   flowNames: string[];
@@ -110,6 +136,35 @@ const actName = computed(() => props.actName);
 const flowNames = computed(() => props.flowNames);
 
 const drawerLeft = ref(false);
+
+
+const showDg = () => {
+  show.value = true;
+};
+
+const closeDg = (val: string) => {
+  if (val == 'OK') {
+    //alert(JSON.stringify(appDg.value.selected[0].content));
+    let oDiv1 = document.getElementById('action');
+    let oDiv2 = document.createElement('div');
+    oDiv2.setAttribute('class', 'action');
+    if (oDiv1 !== null) {
+      oDiv2.innerHTML = appDg.value.selected[0].content;
+      oDiv1?.append(oDiv2);
+      // let oAdd = oDiv2.getElementsByClassName('next')[0];
+      // oAdd.addEventListener('mouseenter', mouseenter);
+      // oAdd.addEventListener('mouseleave', mouseleave);
+      // let oDel = oDiv2.getElementsByClassName('del')[0];
+      // oDel.addEventListener('click', clickdel);
+    }
+
+    if (document.getElementsByClassName('action').length > 0) {
+      addshow.value = false;
+    }
+  };
+};
+
+
 </script>
 
 <style lang="sass">