update

frontend/src/components/ActionSelect.vue

@@ -56,7 +56,7 @@ export default {
 </script>
 <style lang="scss">
 .action-table{
-  height: 100%;
-  max-height: 540px;
+  min-height: 10vh;
+  max-height: 68vh;
 }
 </style>

frontend/src/components/AppSelect.vue

@@ -1,69 +1,70 @@
 <template>
-  <div class="q-pa-md" >
+  <div class="q-px-xs">
     <div v-if="!isLoaded" class="spinner flex flex-center">
-      <q-spinner  color="primary" size="3em" />
+      <q-spinner color="primary" size="3em" />
     </div>
-    <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"
-    >
+    <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" style="max-height: 65vh;">
       <template v-slot:body-cell-description="props">
-          <q-td :props="props">
-              <q-scroll-area  class="description-cell">
-                <div v-html="props.row.description" ></div>
-              </q-scroll-area>
-          </q-td>
+        <q-td :props="props">
+          <q-scroll-area class="description-cell">
+            <div v-html="props.row.description"></div>
+          </q-scroll-area>
+        </q-td>
       </template>
     </q-table>
   </div>
 </template>
 <script lang="ts">
-import { ref,onMounted,reactive } from 'vue'
+import { ref, onMounted, reactive, watch } from 'vue'
 import { api } from 'boot/axios';
-import { LeftDataBus } from './flowEditor/left/DataBus';
 
 export default {
   name: 'AppSelect',
   props: {
     name: String,
     type: String,
-    filter:String
+    filter: String,
+    updateExternalSelectAppInfo: {
+      type: Function
+    }
   },
-  setup() {
-  const columns = [
-  { name: 'id', required: true,label: 'ID',align: 'left',field: 'id',sortable: true},
-  { name: 'name', label: 'アプリ名', field: 'name', sortable: true,align:'left' },
-  { name: 'description', label: '概要', field: 'description',align:'left', sortable: false },
-  { name: 'createdate', label: '作成日時', field: 'createdate',align:'left'}
-  ]
-    const isLoaded=ref(false);
-    const rows :any[]= reactive([]);
-    onMounted( () => {
-        api.get('api/v1/allapps').then(res =>{
-          res.data.apps.forEach((item:any) =>
-              {
-                rows.push({
-                  id:item.appId,
-                  name:item.name,
-                  description:item.description,
-                  createdate:dateFormat(item.createdAt)});
-                });
-                isLoaded.value=true;
-              });
-      });
+  setup(props) {
+    const columns = [
+      { name: 'id', required: true, label: 'ID', align: 'left', field: 'id', sortable: true },
+      { name: 'name', label: 'アプリ名', field: 'name', sortable: true, align: 'left' },
+      { name: 'description', label: '概要', field: 'description', align: 'left', sortable: false },
+      { name: 'createdate', label: '作成日時', field: 'createdate', align: 'left' }
+    ]
+    const isLoaded = ref(false);
+    const rows: any[] = reactive([]);
+    const selected = ref([])
 
-    const dateFormat=(dateStr:string)=>{
+    const updateExternalSelectAppInfo = props.updateExternalSelectAppInfo
+
+    watch(selected, (newValue, oldValue) => {
+      if (newValue && newValue[0] && updateExternalSelectAppInfo) {
+        updateExternalSelectAppInfo(newValue[0])
+      }
+    });
+    onMounted(() => {
+      api.get('api/v1/allapps').then(res => {
+        res.data.apps.forEach((item: any) => {
+          rows.push({
+            id: item.appId,
+            name: item.name,
+            description: item.description,
+            createdate: dateFormat(item.createdAt)
+          });
+        });
+        isLoaded.value = true;
+      });
+    });
+
+    const dateFormat = (dateStr: string) => {
       const date = new Date(dateStr);
-      const pad = (num:number) => num.toString().padStart(2, '0');
+      const pad = (num: number) => num.toString().padStart(2, '0');
       const year = date.getFullYear();
       const month = pad(date.getMonth() + 1);
       const day = pad(date.getDate());
@@ -75,10 +76,10 @@ export default {
     return {
       columns,
       rows,
-      selected: ref([]),
+      selected,
       isLoaded,
-      pagination:ref({
-        rowsPerPage:10
+      pagination: ref({
+        rowsPerPage: 10
       })
     }
   },
@@ -86,19 +87,16 @@ export default {
 }
 </script>
 <style lang="scss">
-.description-cell{
+.description-cell {
   height: 60px;
   width: 300px;
   max-height: 60px;
   max-width: 300px;
   white-space: break-spaces;
 }
-.spinner{
+
+.spinner {
   min-height: 300px;
   min-width: 400px;
 }
-.app-table{
-  height: 100%;
-  max-height: 600px;
-}
-</style>
+</style>

frontend/src/components/FieldSelect.vue

@@ -1,53 +1,84 @@
 <template>
-  <div class="q-pa-md">
+  <div class="q-px-md" style=" min-width: 50vw; max-width: 85vw;">
     <div v-if="!isLoaded" class="spinner flex flex-center">
-      <q-spinner  color="primary" size="3em" />
+      <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 flat bordered v-else row-key="name" :selection="type" v-model:selected="selected" :columns="columns"
+      :rows="rows" :pagination="pageSetting" :filter="filter" style="max-height: 55vh;"/>
   </div>
 </template>
 <script>
-import { ref,onMounted,reactive } from 'vue'
+import { ref, onMounted, reactive, watch } from 'vue'
 import { api } from 'boot/axios';
 
 export default {
   name: 'fieldSelect',
   props: {
     name: String,
-    type: String,
-    appId:Number
+    type: {
+      type: String,
+      default: 'single'
+    },
+    appId: Number,
+    not_page: {
+      type: Boolean,
+      default: false,
+    },
+    updateSelects: {
+      type: Function
+    },
+    filter: String,
   },
   setup(props) {
-    const isLoaded=ref(false);
+    const isLoaded = ref(false);
     const columns = [
-    { name: 'name', required: true,label: 'フィールド名',align: 'left',field: row=>row.name,sortable: true},
-    { name: 'code', label: 'フィールドコード', align: 'left',field: 'code', sortable: true },
-    { name: 'type', label: 'フィールドタイプ', align: 'left',field: 'type', sortable: true }
+      { name: 'name', required: true, label: 'フィールド名', align: 'left', field: row => row.name, sortable: true },
+      { name: 'code', label: 'フィールドコード', align: 'left', field: 'code', sortable: true },
+      { name: 'type', label: 'フィールドタイプ', align: 'left', field: 'type', sortable: true }
     ]
+    const not_page = props.not_page
+    const pageSetting = ref({
+      sortBy: 'desc',
+      descending: false,
+      page: 2,
+      rowsPerPage: not_page ? 0 : 5
+      // rowsNumber: xx if getting data from a server
+    })
+    const filter = props.filter
     const rows = reactive([])
-      onMounted( async () => {
-          const res = await api.get('api/v1/appfields', {
-                params:{
-                  app: props.appId
-                }
-            });
-            let fields = res.data.properties;
-            console.log(fields);
-            Object.keys(fields).forEach((key) =>
-            {
-              const fld=fields[key];
-              // rows.push({name:fields[key].label,code:fields[key].code,type:fields[key].type});
-              rows.push({name:fld.label,...fld});
-            });
-            isLoaded.value=true;
-        });
+    const selected = ref([])
+    const updateSelects = props.updateSelects
+    watch(selected, (newValue, oldValue) => {
 
-      return {
-        columns,
-        rows,
-        selected: ref([]),
-        isLoaded
+      if (newValue && newValue[0] && updateSelects) {
+        console.log(newValue);
+        updateSelects(newValue)
       }
+    });
+
+    onMounted(async () => {
+      const res = await api.get('api/v1/appfields', {
+        params: {
+          app: props.appId
+        }
+      });
+      let fields = res.data.properties;
+      console.log(fields);
+      Object.keys(fields).forEach((key) => {
+        const fld = fields[key];
+        // rows.push({name:fields[key].label,code:fields[key].code,type:fields[key].type});
+        rows.push({ name: fld.label, ...fld });
+      });
+      isLoaded.value = true;
+    });
+
+    return {
+      columns,
+      rows,
+      selected,
+      isLoaded,
+      pageSetting
+    }
   },
 
 }

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="cardStyle" >
+    <q-dialog :model-value="visible" persistent bordered >
+      <q-card :style="cardStyle"  style=" min-width: 40vw; max-width: 80vw; max-height: 95vh;">
         <q-toolbar class="bg-grey-4">
           <q-toolbar-title>{{ name }}</q-toolbar-title>
           <q-space></q-space>
@@ -14,7 +14,7 @@
         <q-card-section class="q-pt-none" :style="sectionStyle">
          <slot></slot>
         </q-card-section>
-        <q-card-actions align="right" class="text-primary">
+        <q-card-actions align="right" class="text-primary q-mt-lg">
           <q-btn flat label="確定" v-close-popup @click="CloseDialogue('OK')" />
           <q-btn flat label="キャンセル" v-close-popup @click="CloseDialogue('Cancel')" />
         </q-card-actions>

frontend/src/components/right/AppFieldSelect.vue

@@ -0,0 +1,215 @@
+<template>
+
+    <div class="q-my-md">
+        <q-card flat>
+
+            <q-card-section class="q-pa-none q-my-sm q-mr-md">
+                <!-- <div class=" q-my-none ">App Field Select</div> -->
+                <div class="row q-mb-xs">
+                    <div class="text-primary q-mb-xs text-caption">{{ $props.displayName }}</div>
+                </div>
+                <div class="row">
+                    <div class="col">
+                        <div class="q-mb-xs">{{ selectAppInfo?.name || 'アプリ未選択' }}</div>
+                    </div>
+                    <div class="col-1">
+                        <q-btn round flat size="sm" color="primary" icon="search" @click="showDg" />
+                    </div>
+                </div>
+
+            </q-card-section>
+
+            <q-card-section class="q-pa-none q-ma-none">
+
+                <div class="" style="border: 1px solid rgba(0, 0, 0, 0.12)">
+                    <div v-if="items.length !== 0 && !show">
+
+                        <q-virtual-scroll style="max-height: 150px;" :items="items" separator v-slot="{ item, index }">
+                            <q-item :key="index" dense>
+                                <q-item-section>
+                                    <q-item-label>
+                                        {{ item.label }}
+                                    </q-item-label>
+                                </q-item-section>
+                            </q-item>
+                        </q-virtual-scroll>
+                    </div>
+                    <div v-else class="row q-mt-lg">
+                    </div>
+                </div>
+            </q-card-section>
+
+            <!-- <q-separator /> -->
+
+            <q-card-section class="q-px-none q-py-xs">
+                <div class="row">
+                    <div class="text-grey text-caption
+"> {{ $props.placeholder }}</div>
+                    <!-- <q-btn flat color="grey" label="clear" @click="clear" /> -->
+                </div>
+            </q-card-section>
+        </q-card>
+    </div>
+
+    <show-dialog v-model:visible="show" name="フィールド一覧" @close="closeDg">
+
+        <div class="q-mx-md q-mb-lg">
+            <div class="q-mb-xs q-ml-md text-primary">アプリ選択</div>
+
+            <div class="q-pa-md row" style="border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 4px;">
+                <div v-if="!showSelectApp && selectAppInfo">{{ selectAppInfo?.name }}</div>
+                <q-space />
+                <div>
+                    <q-btn outline dense label="選 択" padding="none sm" color="primary" @click="() => {
+                        showSelectApp = true;
+                    }"></q-btn>
+                </div>
+            </div>
+        </div>
+
+        <div v-if="!showSelectApp && selectAppInfo?.name">
+            <div>
+                <div class="row q-mb-md">
+                    <!-- <div class="col"> -->
+                    <div class="q-mb-xs q-ml-md text-primary">フィールド選択</div>
+                    <!-- </div> -->
+                    <q-space />
+                    <!-- <div class="col"> -->
+                    <div class="q-mr-md">
+                        <q-input v-model="fieldFilter" type="text" label="フィールド検索" dense outlined />
+                    </div>
+                </div>
+                <div class="row">
+                    <field-select ref="appDg" name="フィールド" type="multiple" :updateSelects="updateItems"
+                        :appId="selectAppInfo?.id" not_page :filter="fieldFilter"></field-select>
+                </div>
+            </div>
+
+
+        </div>
+        <div style="min-width: 45vw;" v-else>
+        </div>
+
+    </show-dialog>
+
+    <show-dialog v-model:visible="showSelectApp" name="アプリ選択" @close="closeDg">
+        <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"
+            :updateExternalSelectAppInfo=updateExternalSelectAppInfo></AppSelect>
+    </show-dialog>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, watchEffect, computed } from 'vue';
+import ShowDialog from '../ShowDialog.vue';
+import FieldSelect from '../FieldSelect.vue';
+import { useFlowEditorStore } from 'stores/flowEditor';
+import AppSelect from '../AppSelect.vue';
+interface IField {
+    name: string,
+    code: string,
+    type: string
+}
+interface ISelectFieldItem {
+    id: string | number,
+    name: string | null
+}
+export default defineComponent({
+    name: 'FieldInput',
+    components: {
+        ShowDialog,
+        FieldSelect,
+        AppSelect,
+    },
+    props: {
+        displayName: {
+            type: String,
+            default: '',
+        },
+        name: {
+            type: String,
+            default: '',
+        },
+        placeholder: {
+            type: String,
+            default: '',
+        },
+        modelValue: {
+            type: Object,
+            default: null
+        },
+
+    },
+
+    setup(props, { emit }) {
+        const appDg = ref();
+        const show = ref(false);
+        const showSelectApp = ref(false);
+        const items = ref<ISelectFieldItem[]>([]);
+        const selectedField = ref(props.modelValue);
+        const store = useFlowEditorStore();
+        const selectAppInfo = ref()
+        const isSelected = computed(() => {
+            return selectedField.value !== null && typeof selectedField.value === 'object' && ('name' in selectedField.value)
+        });
+
+        const showDg = () => {
+            show.value = true;
+        };
+
+        const clear = () => {
+            selectAppInfo.value = undefined
+            items.value = []
+        }
+
+        const closeDg = (val: string) => {
+            if (val == 'OK') {
+                selectedField.value = appDg.value.selected[0];
+            }
+        };
+        const updateExternalSelectAppInfo = (newAppinfo) => {
+            selectAppInfo.value = newAppinfo
+        }
+
+        const updateItems = (newItems) => {
+            items.value = newItems
+        }
+
+        // for (let i = 0; i < 10000; i++) {
+        //     items.value.push({
+        //         id: i,
+        //         name: 'name ' + i
+        //     })
+        // }
+
+        watchEffect(() => {
+            emit('update:modelValue', selectedField.value);
+        });
+
+        return {
+            store,
+            appDg,
+            show,
+            showDg,
+            closeDg,
+            selectedField,
+            showSelectApp,
+            isSelected,
+            items,
+            filter: ref(),
+            updateExternalSelectAppInfo,
+            selectAppInfo,
+            updateItems,
+            clear,
+            fieldFilter: ref()
+        };
+    }
+});
+</script>

frontend/src/components/right/FieldInput.vue

@@ -1,98 +1,99 @@
 <template>
-<q-field v-model="selectedField" :label="displayName" labelColor="primary"
-        :clearable="isSelected" stack-label :bottom-slots="!isSelected" >
-  <template v-slot:control >
-    <q-chip  color="primary" text-color="white"  v-if="isSelected">
-      {{ selectedField.name }}
-    </q-chip>
-  </template>
-  <!-- <template v-slot:hint v-if="isSelected">
-    <div> 項目コード：<q-chip  size="sm" outline color="secondary" text-color="white">{{selectedField.code}}</q-chip></div>
-  </template> -->
-  <template v-slot:hint v-if="!isSelected">
-    {{ placeholder }}
-  </template>
-
-  <template v-slot:append>
-  <q-icon name="search" class="cursor-pointer"  @click="showDg"/>
-  </template>
-</q-field>
-<show-dialog v-model:visible="show" name="フィールド一覧" @close="closeDg" widht="400px">
-  <field-select ref="appDg" name="フィールド" type="single" :appId="store.appInfo?.appId"></field-select>
-</show-dialog>
-</template>
-
-<script lang="ts">
-import { defineComponent, ref ,watchEffect,computed} from 'vue';
-import ShowDialog from '../ShowDialog.vue';
-import FieldSelect from '../FieldSelect.vue';
-import { useFlowEditorStore } from 'stores/flowEditor';
-interface IField{
-  name:string,
-  code:string,
-  type:string
-}
-export default defineComponent({
-  name: 'FieldInput',
-  components: {
-    ShowDialog,
-    FieldSelect,
-  },
-  props: {
-    displayName:{
-      type: String,
-      default: '',
-    },
-    name:{
-      type: String,
-      default: '',
-    },
-    placeholder: {
-      type: String,
-      default: '',
-    },
-    hint:{
-      type: String,
-      default: '',
-    },
-    modelValue: {
-      type: Object,
-      default: null
-    },
-  },
-
-  setup(props, { emit }) {
-    const appDg = ref();
-    const show = ref(false);
-    const selectedField = ref(props.modelValue);
-    const store = useFlowEditorStore();
-    const isSelected = computed(()=>{
-      return selectedField.value!==null && typeof selectedField.value === 'object' && ('name' in selectedField.value)
-    });
-
-    const showDg = () => {
-      show.value = true;
-    };
-
-    const closeDg = (val:string) => {
-      if (val == 'OK') {
-        selectedField.value = appDg.value.selected[0];
+    <q-field v-model="selectedField" :label="displayName" labelColor="primary"
+            :clearable="isSelected" stack-label :bottom-slots="!isSelected" >
+      <template v-slot:control >
+        <q-chip  color="primary" text-color="white"  v-if="isSelected">
+          {{ selectedField.name }}
+        </q-chip>
+      </template>
+      <!-- <template v-slot:hint v-if="isSelected">
+        <div> 項目コード：<q-chip  size="sm" outline color="secondary" text-color="white">{{selectedField.code}}</q-chip></div>
+      </template> -->
+      <template v-slot:hint v-if="!isSelected">
+        {{ placeholder }}
+      </template>
+    
+      <template v-slot:append>
+      <q-icon name="search" class="cursor-pointer"  @click="showDg"/>
+      </template>
+    </q-field>
+    <show-dialog v-model:visible="show" name="フィールド一覧" @close="closeDg" widht="400px">
+      <field-select ref="appDg" name="フィールド" type="single" :appId="store.appInfo?.appId"></field-select>
+    </show-dialog>
+    </template>
+    
+    <script lang="ts">
+    import { defineComponent, ref ,watchEffect,computed} from 'vue';
+    import ShowDialog from '../ShowDialog.vue';
+    import FieldSelect from '../FieldSelect.vue';
+    import { useFlowEditorStore } from 'stores/flowEditor';
+    interface IField{
+      name:string,
+      code:string,
+      type:string
+    }
+    export default defineComponent({
+      name: 'FieldInput',
+      components: {
+        ShowDialog,
+        FieldSelect,
+      },
+      props: {
+        displayName:{
+          type: String,
+          default: '',
+        },
+        name:{
+          type: String,
+          default: '',
+        },
+        placeholder: {
+          type: String,
+          default: '',
+        },
+        hint:{
+          type: String,
+          default: '',
+        },
+        modelValue: {
+          type: Object,
+          default: null
+        },
+      },
+    
+      setup(props, { emit }) {
+        const appDg = ref();
+        const show = ref(false);
+        const selectedField = ref(props.modelValue);
+        const store = useFlowEditorStore();
+        const isSelected = computed(()=>{
+          return selectedField.value!==null && typeof selectedField.value === 'object' && ('name' in selectedField.value)
+        });
+    
+        const showDg = () => {
+          show.value = true;
+        };
+    
+        const closeDg = (val:string) => {
+          if (val == 'OK') {
+            selectedField.value = appDg.value.selected[0];
+          }
+        };
+    
+        watchEffect(() => {
+          emit('update:modelValue', selectedField.value);
+        });
+    
+        return {
+          store,
+          appDg,
+          show,
+          showDg,
+          closeDg,
+          selectedField,
+          isSelected
+        };
       }
-    };
-
-    watchEffect(() => {
-      emit('update:modelValue', selectedField.value);
     });
-
-    return {
-      store,
-      appDg,
-      show,
-      showDg,
-      closeDg,
-      selectedField,
-      isSelected
-    };
-  }
-});
-</script>
+    </script>
+    

frontend/src/components/right/PropertyList.vue

@@ -15,6 +15,7 @@ import InputText from '../right/InputText.vue';
 import SelectBox from '../right/SelectBox.vue';
 import DatePicker from '../right/DatePicker.vue';
 import FieldInput from '../right/FieldInput.vue';
+import AppFieldSelect from './AppFieldSelect.vue';
 import MuiltInputText from '../right/MuiltInputText.vue';
 import ConditionInput from '../right/ConditionInput.vue';
 import EventSetter from '../right/EventSetter.vue';
@@ -27,6 +28,7 @@ export default defineComponent({
     SelectBox,
     DatePicker,
     FieldInput,
+    AppFieldSelect,
     MuiltInputText,
     ConditionInput,
     EventSetter

frontend/src/components/right/PropertyPanel.vue

@@ -11,7 +11,7 @@
          elevated
          overlay
        >
-        <q-card class="column full-height" style="width: 300px">
+        <q-card class="column" style="max-width: 300px;min-height: 100%">
          <q-card-section>
            <div class="text-h6">{{ actionNode?.subTitle }}：設定</div>
          </q-card-section>