Remove unnecessary components, add an action bar.

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

@@ -1,73 +0,0 @@
-<template>
-  <div class="q-py-md">
-    <q-list>
-      <q-expansion-item
-        group="somegroup"
-        label="レコードを追加画面"
-        default-opened
-      >
-        <q-card-section>
-          <q-checkbox v-model="setting.v1" label="追加画面表示した時" />
-          <q-checkbox v-model="setting.v2" label="保存をクリックした時" />
-          <q-checkbox v-model="setting.v3" label="保存成功した時" />
-        </q-card-section>
-      </q-expansion-item>
-
-      <q-expansion-item group="somegroup" label="レコード編集画面">
-        <q-card>
-          <q-card-section>
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem,
-            eius reprehenderit eos corrupti commodi magni quaerat ex numquam,
-            dolorum officiis modi facere maiores architecto suscipit iste
-            eveniet doloribus ullam aliquid.
-          </q-card-section>
-        </q-card>
-      </q-expansion-item>
-
-      <q-expansion-item group="somegroup" label="レコード詳細画面">
-        <q-card>
-          <q-card-section>
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem,
-            eius reprehenderit eos corrupti commodi magni quaerat ex numquam,
-            dolorum officiis modi facere maiores architecto suscipit iste
-            eveniet doloribus ullam aliquid.
-          </q-card-section>
-        </q-card>
-      </q-expansion-item>
-
-      <q-expansion-item group="somegroup" label="レコード一覧画面">
-        <q-card class="bg-teal-2">
-          <q-card-section>
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem,
-            eius reprehenderit eos corrupti commodi magni quaerat ex numquam,
-            dolorum officiis modi facere maiores architecto suscipit iste
-            eveniet doloribus ullam aliquid.
-          </q-card-section>
-        </q-card>
-      </q-expansion-item>
-    </q-list>
-
-
-  </div>
-  <q-btn @click="clear" label="clear"/>
-</template>
-
-<script setup lang="ts">
-import { ref, Ref } from 'vue';
-interface Setting {
-  v1: boolean;
-  v2: boolean;
-  v3: boolean;
-}
-const setting: Ref<Setting> = ref({
-  v1: true,
-  v2: true,
-  v3: false,
-});
-
-let clear = () => {
-  setting.value.v1 = false
-  setting.value.v2 = false
-  setting.value.v3 = false
-}
-</script>

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

@@ -1,12 +1,13 @@
 <template>
   <div class="q-py-md">
-    <q-tree :nodes="LeftDataBus.root" node-key="label">
-      <!-- <template #header-rg="p">
-        <ControlPanelTreeRadio
-          :node="p.node"
-          :dataBus="LeftDataBus"
-        ></ControlPanelTreeRadio>
-      </template> -->
+    <q-tree
+      no-connectors
+      selected-color="primary"
+      default-expand-all
+      :nodes="LeftDataBus.root"
+      v-model:selected="selected"
+      node-key="label"
+    >
     </q-tree>
   </div>
 </template>
@@ -16,9 +17,10 @@ import {
   LeftDataBus,
   setControlPanelE,
 } from 'components/flowEditor/left/DataBus';
-import ControlPanelTreeRadio from './ControlPanelTreeRadio.vue';
+import { ref } from 'vue';
 
 // 应该在page中用网络请求获取值并初始化组件
 // 然后在page中执行setControlPane设置databus
+const selected = ref('追加画面表示した時');
 setControlPanelE();
 </script>

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

@@ -1,23 +0,0 @@
-<template>
-  <q-radio v-model="model" :val="node.value" :label="node.label" />
-</template>
-<script setup lang="ts">
-import { computed } from 'vue';
-import { LeftData, ControlPanelData } from 'components/flowEditor/left/DataBus';
-
-const props = defineProps(['node', 'dataBus']);
-
-const node = computed(() => props.node as ControlPanelData);
-
-const model = computed({
-  get() {
-    return (props.dataBus as LeftData).data?.get(node.value.group ?? 'n');
-  },
-  set(newValue) {
-    (props.dataBus as LeftData).data?.set(
-      node.value.group ?? 'n',
-      newValue ?? ''
-    );
-  },
-});
-</script>

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

@@ -1,32 +1,42 @@
 <template>
-  <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">{{title}}</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"
-            label="変 更"
-            dense
-          />
-        </div>
-      </div>
-    </div>
-  </div>
+  <q-list separator>
+    <q-virtual-scroll
+      ref="virtualListRef"
+      style="max-height: 10em"
+      :items="list"
+      separator
+      v-slot="{ item, index }"
+    >
+      <q-item clickable v-ripple :key="index" :active="index === activeIndex">
+        <q-item-section>{{ item }}</q-item-section>
+      </q-item>
+    </q-virtual-scroll>
+  </q-list>
 </template>
 
-<script setup>
-import { ref } from 'vue';
+<script>
+import { onMounted, ref } from 'vue';
 
+const list = [];
 
+for (let i = 0; i < 100; i++) {
+  list.push(`勤怠管理 - ${i}`);
+}
+
+export default {
+  setup() {
+    const activeIndex = ref(4);
+    const virtualListRef = ref(null);
+
+    onMounted(() => {
+      virtualListRef.value.scrollTo(activeIndex.value);
+    });
+
+    return {
+      list,
+      activeIndex,
+      virtualListRef,
+    };
+  },
+};
 </script>
-
-

frontend/src/pages/FlowEditorPage.vue

@@ -1,11 +1,46 @@
 <template>
   <div>
-    <div class="q-pa-md">
-      <div class="q-gutter-sm row items-start">
-        <q-breadcrumbs>
-          <q-breadcrumbs-el icon="home" to="/" />
-          <q-breadcrumbs-el :label="title" icon="rule" />
+    <div class="q-ma-md">
+      <div class="q-gutter-xs row items-start">
+        <q-breadcrumbs class="q-pt-xs q-mr-sm">
+          <q-breadcrumbs-el icon="home" />
+          <q-breadcrumbs-el :label="actName" />
+          <q-breadcrumbs-el
+            v-for="flowName in flowNames"
+            :key="flowName"
+            :label="flowName"
+          />
         </q-breadcrumbs>
+        <q-separator vertical class="q-mr-xs" />
+        <q-btn
+          flat
+          class="q-py-sm"
+          padding="none"
+          color="primary"
+          size="md"
+          @click="drawerLeft = !drawerLeft"
+          label="変 更"
+          icon="expand_more"
+          dense
+        />
+
+        <q-space />
+        <q-btn
+          class="q-px-sm q-mr-sm"
+          color="white"
+          size="sm"
+          text-color="black"
+          label="キャンセル"
+          dense
+        />
+
+        <q-btn
+          class="q-px-sm"
+          color="primary"
+          size="sm"
+          label="保存する"
+          dense
+        />
       </div>
     </div>
     <q-layout
@@ -23,62 +58,56 @@
             @click="drawerLeft = !drawerLeft"
           />
         </div>
-        <div class="q-mt-md q-pa-sm">
-          <ControlPanel />
+
+        <div class="q-mt-lg q-pa-sm">
+          <q-card-section>
+            <p class="text-h6 q-pl-md">ページ選択</p>
+            <ItemSelector />
+          </q-card-section>
         </div>
+        <q-separator />
+        <div class="q-mt-md q-pa-sm">
+          <q-card-section>
+            <p class="text-h6 q-pl-md q-mb-none">フロー選択</p>
+            <ControlPanel />
+          </q-card-section>
+        </div>
+        <q-separator />
+        <q-card-actions align="right">
+          <div class="q-pa-sm">
+            <q-btn
+              flat
+              color="primary"
+              size="md"
+              @click="drawerLeft = !drawerLeft"
+              label="ジャンプ"
+              dense
+            />
+          </div>
+        </q-card-actions>
       </q-drawer>
 
-      <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>
+      <FlowChartTest />
     </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 ItemSelector from 'components/flowEditor/left/ItemSelector.vue';
 import { computed, ref } from 'vue';
 interface FlowEditorPageProps {
-  title: string;
   actName: string;
+  flowNames: string[];
 }
 
 const props = withDefaults(defineProps<FlowEditorPageProps>(), {
-  title: 'FlowEditor',
-  actName: '勤怠管理',
+  actName: '勤怠管理 - 4',
+  flowNames: () => ['レコードを追加画面', '保存をクリックした時'],
 });
 const actName = computed(() => props.actName);
+const flowNames = computed(() => props.flowNames);
 
 const drawerLeft = ref(false);
 </script>