ダイアログに検索追加

frontend/src/components/ActionSelect.vue

@@ -3,13 +3,15 @@
     <div v-if="!isLoaded" class="spinner flex flex-center">
       <q-spinner  color="primary" size="3em" />
     </div>
-    <q-table v-else  row-key="name" :selection="type" v-model:selected="selected" :columns="columns" :rows="rows"
+    <q-table v-else  row-key="index" :selection="type" v-model:selected="selected" :columns="columns" :rows="rows"
     class="action-table"
     flat bordered
     virtual-scroll
     :pagination="pagination"
     :rows-per-page-options="[0]"
-    />
+    :filter="filter"
+    >
+    </q-table>
   </div>
 </template>
 <script>
@@ -20,9 +22,10 @@ export default {
   name: 'actionSelect',
   props: {
     name: String,
-    type: String
+    type: String,
+    filter:String
   },
-  setup() {
+  setup(props) {
     const isLoaded=ref(false);
     const columns = [
     { name: 'name', required: true,label: 'アクション名',align: 'left',field: 'name',sortable: true},
@@ -32,9 +35,9 @@ export default {
     const rows = reactive([])
     onMounted(async () => {
         const res =await api.get('api/actions');
-        res.data.forEach((item) =>
+        res.data.forEach((item,index) =>
         {
-          rows.push({name:item.name,desc:item.title,outputPoints:item.outputpoints,property:item.property});
+          rows.push({index,name:item.name,desc:item.title,outputPoints:item.outputpoints,property:item.property});
         });
         isLoaded.value=true;
       });
@@ -54,5 +57,6 @@ export default {
 <style lang="scss">
 .action-table{
   height: 100%;
+  max-height: 540px;
 }
 </style>

frontend/src/components/AppSelect.vue

@@ -3,7 +3,19 @@
     <div v-if="!isLoaded" class="spinner flex flex-center">
       <q-spinner  color="primary" size="3em" />
     </div>
-    <q-table v-else :selection="type" v-model:selected="selected" :columns="columns" :rows="rows" >
+    <q-table v-else
+      class="app-table"
+      :selection="type"
+      row-key="id"
+      v-model:selected="selected"
+      flat bordered
+      virtual-scroll
+      :columns="columns"
+      :rows="rows"
+      :pagination="pagination"
+      :rows-per-page-options="[0]"
+      :filter="filter"
+    >
       <template v-slot:body-cell-description="props">
           <q-td :props="props">
               <q-scroll-area  class="description-cell">
@@ -23,7 +35,8 @@ export default {
   name: 'AppSelect',
   props: {
     name: String,
-    type: String
+    type: String,
+    filter:String
   },
   setup() {
   const columns = [
@@ -63,7 +76,10 @@ export default {
       columns,
       rows,
       selected: ref([]),
-      isLoaded
+      isLoaded,
+      pagination:ref({
+        rowsPerPage:10
+      })
     }
   },
 
@@ -81,4 +97,8 @@ export default {
   min-height: 300px;
   min-width: 400px;
 }
+.app-table{
+  height: 100%;
+  max-height: 600px;
+}
 </style>

frontend/src/components/ConditionEditor/ConditionEditor.vue

@@ -1,5 +1,5 @@
 <template>
-  <show-dialog v-model:visible="showflg" name="条件エディタ" @close="closeDg" width="60vw" height="60vh">
+  <show-dialog v-model:visible="showflg" name="条件エディタ" @close="closeDg" min-width="60vw" min-height="60vh">
     <template v-slot:toolbar>
       <q-btn flat round dense icon="more_vert" >
       <q-menu  auto-close anchor="bottom start">

frontend/src/components/ConditionEditor/ConditionObject.vue

@@ -14,7 +14,14 @@
     </template>
   </q-field>
   <show-dialog v-model:visible="show" name="条件設定項目一覧" @close="closeDg" width="600px">
-    <condition-objects ref="appDg" name="フィールド" type="single" :appId="store.appInfo?.appId" :vars="vars"></condition-objects>
+    <template v-slot:toolbar>
+        <q-input  dense debounce="200" v-model="filter" placeholder="検索" clearable>
+          <template v-slot:before>
+            <q-icon name="search" />
+          </template>
+        </q-input>
+      </template>
+    <condition-objects ref="appDg" name="フィールド" type="single" :filter="filter" :appId="store.appInfo?.appId" :vars="vars"></condition-objects>
   </show-dialog>
   </template>
 
@@ -48,7 +55,7 @@
       if(store.currentFlow!==undefined && store.activeNode!==undefined ){
         vars =store.currentFlow.getVarNames(store.activeNode);
       }
-
+      const filter=ref('');
       const showDg = () => {
         show.value = true;
       };
@@ -71,7 +78,8 @@
         closeDg,
         selectedObject,
         vars:reactive(vars),
-        isSelected
+        isSelected,
+        filter
       };
     }
   });

frontend/src/components/ConditionObjects.vue

@@ -19,7 +19,7 @@
 
         <q-tab-panels v-model="tab" animated>
           <q-tab-panel name="fields">
-              <field-list v-model="selected" type="single" :appId="appId"></field-list>
+              <field-list v-model="selected" type="single" :filter="filter" :appId="appId"></field-list>
             </q-tab-panel>
 
           <q-tab-panel name="vars" >
@@ -44,7 +44,8 @@ export default {
     name: String,
     type: String,
     appId: Number,
-    vars: Array
+    vars: Array,
+    filter:String
   },
   setup(props) {
 

frontend/src/components/FieldList.vue

@@ -3,6 +3,7 @@
     <q-table flat bordered :loading="!isLoaded" row-key="name" :selection="type"
     :selected="modelValue"
     @update:selected="$emit('update:modelValue', $event)"
+    :filter="filter"
     :columns="columns" :rows="rows" />
   </div>
 </template>
@@ -16,7 +17,8 @@ export default {
     name: String,
     type: String,
     appId: Number,
-    modelValue:Array
+    modelValue:Array,
+    filter:String
    },
    emits:[
    'update:modelValue'

frontend/src/components/ShowDialog.vue

@@ -1,7 +1,7 @@
 <template>
   <!-- <div class="q-pa-md q-gutter-sm" > -->
     <q-dialog :model-value="visible" persistent bordered>
-      <q-card :style="{minWidth : width}" >
+      <q-card :style="cardStyle" >
         <q-toolbar class="bg-grey-4">
           <q-toolbar-title>{{ name }}</q-toolbar-title>
           <q-space></q-space>
@@ -11,7 +11,7 @@
         <q-card-section>
           <!-- <div class="text-h6">{{ name }}</div> -->
         </q-card-section>
-        <q-card-section class="q-pt-none" :style="{...(height? {minHeight:height}:{}) }">
+        <q-card-section class="q-pt-none" :style="sectionStyle">
          <slot></slot>
         </q-card-section>
         <q-card-actions align="right" class="text-primary">
@@ -23,14 +23,16 @@
   <!-- </div> -->
 </template>
 <script>
-
+import {computed} from 'vue'
 export default {
   name: 'ShowDialog',
   props: {
     name:String,
     visible: Boolean,
     width:String,
-    height:String
+    height:String,
+    minWidth:String,
+    minHeight:String
   },
   emits: [
     'close'
@@ -41,8 +43,20 @@ export default {
       context.emit('close', val);
     }
 
+    const cardStyle = computed(() => ({
+      minWidth: props.minWidth,
+      width: props.width
+    }));
+
+    const sectionStyle = computed(() => ({
+      height: props.height,
+      minHeight: props.minHeight
+    }));
+
     return {
-      CloseDialogue
+      CloseDialogue,
+      cardStyle,
+      sectionStyle
     }
   },
 }

frontend/src/components/left/AppSelector.vue

@@ -22,8 +22,15 @@
       ></q-btn>
     </div>
   </div>
-  <ShowDialog v-model:visible="showSelectApp" name="アプリ選択" @close="closeDg" width="600px" >
+  <ShowDialog v-model:visible="showSelectApp" name="アプリ選択" @close="closeDg" min-width="680px" min-height="600px" height="600px">
-      <AppSelect ref="appDg" name="アプリ" type="single"></AppSelect>
+    <template v-slot:toolbar>
+        <q-input  dense debounce="300" v-model="filter" placeholder="検索" clearable>
+          <template v-slot:before>
+            <q-icon name="search" />
+          </template>
+        </q-input>
+      </template>
+      <AppSelect ref="appDg" name="アプリ" type="single" :filter="filter"></AppSelect>
   </ShowDialog>
 </template>
 
@@ -73,7 +80,8 @@ export default defineComponent({
       showSelectApp,
       showAppDialog,
       closeDg,
-      appDg
+      appDg,
+      filter:ref('')
     }
   }
 });

frontend/src/css/app.scss

@@ -1 +1,25 @@
 // app global css in SCSS form
+::-webkit-scrollbar {
+  height: 12px;
+  width: 14px;
+  background: transparent;
+  z-index: 12;
+  overflow: visible;
+}
+
+::-webkit-scrollbar-thumb {
+  width: 10px;
+  background-color: #c1c1c1;
+  border-radius: 10px;
+  z-index: 12;
+  border: 4px solid rgba(0, 0, 0, 0);
+  background-clip: padding-box;
+  transition: background-color .32s ease-in-out;
+  margin: 4px;
+  min-height: 32px;
+  min-width: 32px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #c1c1c1;
+}

frontend/src/pages/FlowChart.vue

@@ -33,8 +33,15 @@
       </div>
       <PropertyPanel :actionNode="store.activeNode" v-model:drawerRight="drawerRight"></PropertyPanel>
     </q-layout>
-    <ShowDialog v-model:visible="showAddAction" name="アクション" @close="closeDg" width="350px">
+    <ShowDialog v-model:visible="showAddAction" name="アクション" @close="closeDg" min-width="500px" min-height="500px">
-      <action-select ref="appDg" name="model" type="single"></action-select>
+      <template v-slot:toolbar>
+        <q-input  dense debounce="200" v-model="filter" placeholder="検索" clearable>
+          <template v-slot:before>
+            <q-icon name="search" />
+          </template>
+        </q-input>
+      </template>
+      <action-select ref="appDg" name="model" :filter="filter"  type="single"></action-select>
     </ShowDialog>
 
   </q-page>
@@ -70,6 +77,7 @@ const prevNodeIfo = ref({
 // const refFlow = ref<ActionFlow|null>(null);
 const showAddAction = ref(false);
 const drawerRight = ref(false);
+const filter=ref("");
 const model = ref("");
 const addActionNode = (action: IActionNode) => {
   // refFlow.value?.actionNodes.push(action);