AppFieldSelectコンポーネントは、パブリック部分をAppFieldSelectBoxとして抽出する。

2024-05-25 07:01:38 +09:00
parent c3b560dbc9
commit c78b3cb5c0
2 changed files with 196 additions and 140 deletions
--- a/frontend/src/components/AppFieldSelectBox.vue
+++ b/frontend/src/components/AppFieldSelectBox.vue
@@ -0,0 +1,151 @@
+<template>
+
+    <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="selectedField?.app && !showSelectApp">{{ selectedField.app?.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 && selectedField.app?.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 dense debounce="300" v-model="fieldFilter" placeholder="フィールド検索" clearable>
+                        <template v-slot:before>
+                            <q-icon name="search" />
+                        </template>
+                    </q-input>
+                </div>
+            </div>
+            <div class="row">
+                <field-select ref="fieldDlg" name="フィールド" :type="selectType" :updateSelects="updateItems"
+                    :appId="selectedField.app?.id" not_page :filter="fieldFilter"
+                    :selectedFields="selectedField.fields"></field-select>
+            </div>
+        </div>
+    </div>
+    <div style="min-width: 45vw;" v-else>
+    </div>
+
+
+    <show-dialog v-model:visible="showSelectApp" name="アプリ選択" @close="closeAppDlg">
+        <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="appDlg" 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 IApp {
+    id: string,
+    name: string
+}
+interface IField {
+    name: string,
+    code: string,
+    type: string
+}
+
+interface IAppFields {
+    app?: IApp,
+    fields: IField[]
+}
+
+export default defineComponent({
+    inheritAttrs: false,
+    name: 'AppFieldSelectBox',
+    components: {
+        ShowDialog,
+        FieldSelect,
+        AppSelect,
+    },
+    props: {
+        selectedField: {
+            type: Object,
+            required: true
+        },
+        selectType: {
+            type: String,
+            default: 'single'
+        },
+
+    },
+    setup(props, { emit }) {
+        const appDlg = ref();
+        const fieldDlg = ref();
+        const showSelectApp = ref(false);
+        const selectedField = props.selectedField;
+        console.log(props.selectedField);
+        
+        const store = useFlowEditorStore();
+
+        const isSelected = computed(() => {
+            return selectedField !== null && typeof selectedField === 'object' && ('app' in selectedField)
+        });
+
+
+        const closeAppDlg = (val: string) => {
+            if (val == 'OK') {
+                selectedField.app = appDlg.value.selected[0];
+                selectedField.fields = [];
+                showSelectApp.value = false;
+            }
+        };
+
+        const closeFieldDialog = (val: string) => {
+            if (val == 'OK') {
+                selectedField.fields = fieldDlg.value.selected;
+            }
+        };
+        const updateExternalSelectAppInfo = (newAppinfo: IApp) => {
+            selectedField.app = newAppinfo
+        }
+
+        const updateItems = (newFields: IField[]) => {
+            selectedField.fields = newFields
+        }
+
+        watchEffect(() => {
+            emit('update:modelValue', selectedField);
+        });
+
+        return {
+            appDlg,
+            fieldDlg,
+            closeAppDlg,
+            closeFieldDialog,
+            showSelectApp,
+            isSelected,
+            updateExternalSelectAppInfo,
+            filter: ref(),
+            updateItems,
+            fieldFilter: ref(),
+        };
+    }
+});
+</script>