From a6cf95b76d56841e7a5d545c8f0835e44cf4dafc Mon Sep 17 00:00:00 2001
From: Mouriya <mouriya@bu.edu>
Date: Mon, 27 May 2024 18:45:34 +0900
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E3=81=97=E3=81=84=E3=82=A2=E3=83=97?=
 =?UTF-8?q?=E3=83=AA=E9=81=B8=E6=8A=9E=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC?=
 =?UTF-8?q?=E3=83=8D=E3=83=B3=E3=83=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/right/AppSelect.vue   | 98 +++++++++++++++++++
 .../src/components/right/PropertyList.vue     |  4 +-
 2 files changed, 101 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/components/right/AppSelect.vue

diff --git a/frontend/src/components/right/AppSelect.vue b/frontend/src/components/right/AppSelect.vue
new file mode 100644
index 0000000..7a8d5fe
--- /dev/null
+++ b/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>
diff --git a/frontend/src/components/right/PropertyList.vue b/frontend/src/components/right/PropertyList.vue
index a08141a..6519313 100644
--- a/frontend/src/components/right/PropertyList.vue
+++ b/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: {