Change App Selection Component

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

@@ -1,42 +1,42 @@
 <template>
-  <q-list separator>
+  <div
-    <q-virtual-scroll
+    class="row"
-      ref="virtualListRef"
+    style="
-      style="max-height: 10em"
+      border-radius: 2px;
-      :items="list"
+      box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset,
-      separator
+        rgba(0, 0, 0, 0.3) 0px 0px 0px 1px;
-      v-slot="{ item, index }"
+    "
-    >
+  >
-      <q-item clickable v-ripple :key="index" :active="index === activeIndex">
+    <q-icon
-        <q-item-section>{{ item }}</q-item-section>
+      class="self-center q-ma-sm"
-      </q-item>
+      name="widgets"
-    </q-virtual-scroll>
+      color="grey-9"
-  </q-list>
+      style="font-size: 2em"
+    />
+
+    <div class="col-7 self-center ellipsis">
+      {{ actName }}
+    </div>
+
+    <div class="self-center">
+      <q-btn
+        outline
+        dense
+        label="変 更"
+        padding="none sm"
+        color="primary"
+      ></q-btn>
+    </div>
+  </div>
 </template>
 
 <script>
-import { onMounted, ref } from 'vue';
+import { computed } from 'vue';
-
-const list = [];
-
-for (let i = 0; i < 100; i++) {
-  list.push(`勤怠管理 - ${i}`);
-}
 
 export default {
-  setup() {
+  props: ['actName'],
-    const activeIndex = ref(4);
+  setup(props) {
-    const virtualListRef = ref(null);
+    const actName = computed(() => props.actName);
-
-    onMounted(() => {
-      virtualListRef.value.scrollTo(activeIndex.value);
-    });
-
-    return {
-      list,
-      activeIndex,
-      virtualListRef,
-    };
   },
 };
 </script>

frontend/src/pages/FlowEditorPage.vue

@@ -13,10 +13,11 @@
         </q-breadcrumbs>
         <q-separator vertical class="q-mr-xs" />
         <q-btn
-          outline
+          unelevated
           class="q-py-sm"
           padding="none md none sm"
-          color="primary"
+          color="blue-1"
+          text-color="primary"
           size="md"
           @click="drawerLeft = !drawerLeft"
           label="変 更"
@@ -61,25 +62,11 @@
 
         <div class="q-mt-lg q-pa-sm">
           <q-card-section>
-            <p class="text-h6 q-pl-md">アクション選択</p>
+            <div class="flex-center">
-            <div>
+              <div class="row q-pl-md">
-              <q-btn
+                <p class="text-h6">アクション選択</p>
-                label="アクション選択"
+              </div>
-                color="primary"
+              <ItemSelector :actName="actName" />
-                @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>
@@ -114,61 +101,11 @@
 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 { 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[];
-}
-
-const props = withDefaults(defineProps<FlowEditorPageProps>(), {
-  actName: '勤怠管理 - 4',
-  flowNames: () => ['レコードを追加画面', '保存をクリックした時'],
-});
-const actName = computed(() => props.actName);
-const flowNames = computed(() => props.flowNames);
 
+const actName = ref('勤怠管理 - 4');
+const flowNames = ref(['レコードを追加画面', '保存をクリックした時']);
 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">
+<style lang="sass"></style>
-.ItemSelector
-  border: 0.15em solid rgba(#999, .4)
-  border-radius: 0.4em
-</style>