flow editor assembly and modification

frontend/src/components/flowEditor/left/ControlPanelC.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="q-py-md">
     <q-tree :nodes="LeftDataBus.root" node-key="label">
-      <template #header-rg="p">
+      <!-- <template #header-rg="p">
         <ControlPanelTreeRadio
           :node="p.node"
           :dataBus="LeftDataBus"
         ></ControlPanelTreeRadio>
-      </template>
+      </template> -->
     </q-tree>
   </div>
 </template>

frontend/src/components/flowEditor/left/ItemSelector.vue

@@ -26,11 +26,7 @@
 <script setup>
 import { ref } from 'vue';
 
-const title = ref('勤怠管理')
+
 </script>
 
-<style lang="sass">
-.ItemSelector
-  border: 0.15em solid rgba(#999, .4)
-  border-radius: 0.4em
-</style>
+

frontend/src/pages/FlowEditorPage.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-page>
+  <div>
     <div class="q-pa-md">
       <div class="q-gutter-sm row items-start">
         <q-breadcrumbs>
@@ -7,31 +7,84 @@
           <q-breadcrumbs-el :label="title" icon="rule" />
         </q-breadcrumbs>
       </div>
-      <div class="q-pa-md">
-        <div class="row">
-          <div class="col-2 column">
-            <ItemSelector />
-            <div class="col-auto"><ControlPanel /></div>
-          </div>
-          <!-- <div class="col">
+    </div>
+    <q-layout
+      container
+      style="height: 91.5dvb"
+      class="shadow-2 rounded-borders"
+    >
+      <q-drawer side="left" overlay bordered v-model="drawerLeft">
+        <div class="q-pa-sm fixed-right">
+          <q-btn
+            flat
+            round
+            color="primary"
+            icon="close"
+            @click="drawerLeft = !drawerLeft"
+          />
+        </div>
+        <div class="q-mt-md q-pa-sm">
+          <ControlPanel />
+        </div>
+      </q-drawer>
 
-          </div> -->
+      <div class="q-mt-lg q-mx-lg">
+        <div class="row">
+          <div class="col-2">
+            <div class="ItemSelector q-pa-sm">
+              <div class="row">
+                <div class="col-auto">
+                  <q-icon name="widgets" color="primary" size="2.5em" />
+                </div>
+                <div class="col flex">
+                  <div class="q-pa-sm flex" style="align-items: center">
+                    {{ actName }}
+                  </div>
+                </div>
+                <div class="col-auto flex">
+                  <div class="flex" style="align-items: center">
+                    <q-btn
+                      class="q-px-sm"
+                      color="white"
+                      size="sm"
+                      text-color="black"
+                      @click="drawerLeft = !drawerLeft"
+                      label="変 更"
+                      dense
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col"><FlowChartTest /></div>
         </div>
       </div>
-    </div>
-  </q-page>
+    </q-layout>
+  </div>
 </template>
 
 <script setup lang="ts">
+import FlowChartTest from 'pages/FlowChartTest.vue';
 import ItemSelector from 'components/flowEditor/left/ItemSelector.vue';
 import ControlPanel from 'components/flowEditor/left/ControlPanelC.vue';
+import { computed, ref } from 'vue';
 interface FlowEditorPageProps {
   title: string;
+  actName: string;
 }
 
 const props = withDefaults(defineProps<FlowEditorPageProps>(), {
   title: 'FlowEditor',
+  actName: '勤怠管理',
 });
+const actName = computed(() => props.actName);
+
+const drawerLeft = ref(false);
 </script>
 
-<style lang="sass"></style>
+<style lang="sass">
+.ItemSelector
+  border: 0.15em solid rgba(#999, .4)
+  border-radius: 0.4em
+</style>