add FlowEditorPage

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

@@ -0,0 +1,73 @@
+<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/ItemSelector.vue

@@ -0,0 +1,36 @@
+<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>
+</template>
+
+<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>