Merge commit 'a6cf95b76d56841e7a5d545c8f0835e44cf4dafc' into feature-data-mapping

frontend/src/components/AppFieldSelectBox.vue

@@ -50,8 +50,8 @@
             </q-input>
         </template>
 
-        <AppSelect ref="appDlg" name="アプリ" type="single" :filter="filter"
+        <AppSelectBox ref="appDlg" name="アプリ" type="single" :filter="filter"
-            :updateExternalSelectAppInfo="updateExternalSelectAppInfo"></AppSelect>
+            :updateExternalSelectAppInfo="updateExternalSelectAppInfo"></AppSelectBox>
     </show-dialog>
 </template>
 
@@ -60,7 +60,7 @@ 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';
+import AppSelectBox from './AppSelectBox.vue';
 interface IApp {
     id: string,
     name: string
@@ -82,7 +82,7 @@ export default defineComponent({
     components: {
         ShowDialog,
         FieldSelect,
-        AppSelect,
+        AppSelectBox,
     },
     props: {
         selectedField: {

frontend/src/components/AppSelectBox.vue

@@ -21,7 +21,7 @@ import { ref, onMounted, reactive, watchEffect } from 'vue'
 import { api } from 'boot/axios';
 
 export default {
-  name: 'AppSelect',
+  name: 'AppSelectBox',
   props: {
     name: String,
     type: String,

frontend/src/components/left/AppSelector.vue

@@ -30,7 +30,7 @@
           </template>
         </q-input>
       </template>
-      <AppSelect ref="appDg" name="アプリ" type="single" :filter="filter"></AppSelect>
+      <AppSelectBox ref="appDg" name="アプリ" type="single" :filter="filter"></AppSelectBox>
   </ShowDialog>
 </template>
 
@@ -38,7 +38,7 @@
 import { defineComponent,ref } from 'vue';
 import {AppInfo} from '../../types/ActionTypes'
 import ShowDialog from '../../components/ShowDialog.vue';
-import AppSelect from '../../components/AppSelect.vue';
+import AppSelectBox from '../../components/AppSelectBox.vue';
 import { useFlowEditorStore } from 'stores/flowEditor';
 import { useAuthStore } from 'src/stores/useAuthStore';
 export default defineComponent({
@@ -47,7 +47,7 @@ export default defineComponent({
     "appSelected"
   ],
   components:{
-    AppSelect,
+    AppSelectBox,
     ShowDialog
   },
   setup(props, context) {

frontend/src/components/right/AppSelect.vue

@@ -0,0 +1,98 @@
+<template>
+    <div>
+        <q-field :label="displayName" labelColor="primary" stack-label>
+            <template v-slot:control>
+                <q-card flat class="full-width">
+                    <q-card-actions vertical>
+                        <q-btn color="grey-3" text-color="black"
+                            @click="() => { dgIsShow = true }">APP SELECT</q-btn>
+                    </q-card-actions>
+                    <q-card-section class="text-caption">
+                        <div v-if="selectedField">
+                            {{ selectedField.name }}
+                        </div>
+                        <div v-else>{{ placeholder }}</div>
+                    </q-card-section>
+                </q-card>
+            </template>
+        </q-field>
+    </div>
+
+    <ShowDialog v-model:visible="dgIsShow" name="アプリ選択" @close="closeDg" min-width="50vw" min-height="50vh">
+        <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>
+        <AppSelectBox ref="appDg" name="アプリ" type="single" :filter="filter"></AppSelectBox>
+    </ShowDialog>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref, watchEffect } from 'vue';
+import ShowDialog from '../ShowDialog.vue';
+import AppSelectBox from '../AppSelectBox.vue';
+
+
+export default defineComponent({
+    inheritAttrs: false,
+    name: 'AppSelect',
+    components: {
+        ShowDialog,
+        AppSelectBox
+    },
+    props: {
+        context: {
+            type: Array<Props>,
+            default: '',
+        },
+        displayName: {
+            type: String,
+            default: '',
+        },
+        name: {
+            type: String,
+            default: '',
+        },
+        placeholder: {
+            type: String,
+            default: '',
+        },
+        modelValue: {
+            type: Object,
+            default: null
+        }
+    },
+    setup(props, { emit }) {
+        const appDg = ref()
+        const dgIsShow = ref(false)
+        const selectedField = ref()
+        const closeDg = (state: string) => {
+            dgIsShow.value = false;
+            if (state == 'OK') {
+                selectedField.value = appDg.value.selected[0];
+            }
+        };
+
+        
+
+        // console.log(props);
+        
+        
+
+        watchEffect(() => {
+            emit('update:modelValue', { app: selectedField.value });
+        });
+
+        return {
+            filter: ref(''),
+            dgIsShow,
+            appDg,
+            closeDg,
+            selectedField
+        };
+    }
+});
+</script>

frontend/src/components/right/PropertyList.vue

@@ -23,6 +23,7 @@ import ColorPicker from './ColorPicker.vue';
 import NumInput from './NumInput.vue';
 import DataProcessing from './DataProcessing.vue';
 import DataMapping from './DataMapping.vue';
+import AppSelect from './AppSelect.vue';
 import { IActionNode,IActionProperty,IProp } from 'src/types/ActionTypes';
 
 export default defineComponent({
@@ -39,7 +40,8 @@ export default defineComponent({
     ColorPicker,
     NumInput,
     DataProcessing,
-    DataMapping
+    DataMapping,
+    AppSelect
   },
   props: {
     nodeProps: {

frontend/src/pages/RuleEditor.vue

@@ -24,7 +24,7 @@
           <q-btn :label="model+'選択'" color="primary" @click="showDg()" />
           <show-dialog v-model:visible="show" :name="model" @close="closeDg" width="400px">
             <template v-if="model=='アプリ'">
-              <app-select ref="appDg" :name="model" type="single"></app-select>
+              <app-select-box ref="appDg" :name="model" type="single"></app-select-box>
             </template>
             <template v-if="model=='フィールド'">
               <field-select ref="appDg" :name="model" type="multiple" :appId="1"></field-select>
@@ -42,7 +42,7 @@
 
 <script setup lang="ts">
 import ShowDialog from 'components/ShowDialog.vue';
-import AppSelect from 'components/AppSelect.vue';
+import AppSelectBox from 'components/AppSelectBox.vue';
 import FieldSelect from 'components/FieldSelect.vue';
 import ActionSelect from 'components/ActionSelect.vue';
 import { ref } from 'vue'