アプリからフィールド選択UI追加

2024-04-25 09:46:34 +09:00
parent 1a48fb5b20
commit 0de33f04bc
6 changed files with 106 additions and 93 deletions
--- a/backend/app/core/security.py
+++ b/backend/app/core/security.py
@@ -9,7 +9,7 @@ pwd_context = CryptContext(schemes=["bcrypt"], deprecated="auto")

 SECRET_KEY = "alicorns"
 ALGORITHM = "HS256"
-ACCESS_TOKEN_EXPIRE_MINUTES = 30
+ACCESS_TOKEN_EXPIRE_MINUTES = 2880


 def get_password_hash(password: str) -> str:
@@ -25,7 +25,7 @@ def create_access_token(*, data: dict, expires_delta: timedelta = None):
    if expires_delta:
        expire = datetime.utcnow() + expires_delta
    else:
-        expire = datetime.utcnow() + timedelta(minutes=2880)
+        expire = datetime.utcnow() + timedelta(minutes=ACCESS_TOKEN_EXPIRE_MINUTES)
    to_encode.update({"exp": expire})
    encoded_jwt = jwt.encode(to_encode, SECRET_KEY, algorithm=ALGORITHM)
    return encoded_jwt
--- a/frontend/src/components/AppSelect.vue
+++ b/frontend/src/components/AppSelect.vue
@@ -17,7 +17,7 @@
  </div>
 </template>
 <script lang="ts">
-import { ref, onMounted, reactive, watch } from 'vue'
+import { ref, onMounted, reactive, watchEffect } from 'vue'
 import { api } from 'boot/axios';

 export default {
@@ -41,11 +41,9 @@ export default {
    const rows: any[] = reactive([]);
    const selected = ref([])

-    const updateExternalSelectAppInfo = props.updateExternalSelectAppInfo
-
-    watch(selected, (newValue, oldValue) => {
-      if (newValue && newValue[0] && updateExternalSelectAppInfo) {
-        updateExternalSelectAppInfo(newValue[0])
+    watchEffect(()=>{
+      if (selected.value && selected.value[0] && props.updateExternalSelectAppInfo) {
+        props.updateExternalSelectAppInfo(selected.value[0])
      }
    });
    onMounted(() => {
--- a/frontend/src/components/FieldSelect.vue
+++ b/frontend/src/components/FieldSelect.vue
@@ -8,7 +8,7 @@
  </div>
 </template>
 <script>
-import { ref, onMounted, reactive, watch } from 'vue'
+import { ref, onMounted, reactive, watchEffect } from 'vue'
 import { api } from 'boot/axios';

 export default {
@@ -24,6 +24,10 @@ export default {
      type: Boolean,
      default: false,
    },
+    selectedFields:{
+      type:Array,
+      default:()=>[]
+    },
    updateSelects: {
      type: Function
    },
@@ -36,24 +40,18 @@ export default {
      { 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
+      rowsPerPage: props.not_page ? 0 : 5
      // rowsNumber: xx if getting data from a server
-    })
-    const filter = props.filter
-    const rows = reactive([])
-    const selected = ref([])
-    const updateSelects = props.updateSelects
-    watch(selected, (newValue, oldValue) => {
+    });
+    const rows = reactive([]);
+    const selected = ref(props.selectedFields && props.selectedFields.length>0?props.selectedFields:[]);

-      if (newValue && newValue[0] && updateSelects) {
-        console.log(newValue);
-        updateSelects(newValue)
-      }
+    watchEffect(() => {
+        props.updateSelects(selected);
    });

    onMounted(async () => {
--- a/frontend/src/components/left/AppSelector.vue
+++ b/frontend/src/components/left/AppSelector.vue
@@ -22,7 +22,7 @@
      ></q-btn>
    </div>
  </div>
-  <ShowDialog v-model:visible="showSelectApp" name="アプリ選択" @close="closeDg" min-width="680px" min-height="600px" height="600px">
+  <ShowDialog v-model:visible="showSelectApp" 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>
--- a/frontend/src/components/right/AppFieldSelect.vue
+++ b/frontend/src/components/right/AppFieldSelect.vue
@@ -2,7 +2,6 @@

    <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">
@@ -10,54 +9,53 @@
                </div>
                <div class="row">
                    <div class="col">
-                        <div class="q-mb-xs">{{ selectAppInfo?.name || 'アプリ未選択' }}</div>
+                        <div class="q-mb-xs">{{ selectedField.app?.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-separator />
            <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>
+                <div style="">
+                    <div v-if="selectedField.fields && selectedField.fields.length > 0 ">
+                      <q-list bordered>
+                        <q-virtual-scroll style="max-height: 160px;" :items="selectedField.fields" separator v-slot="{ item, index }">
+                            <q-item :key="index" dense clickable >
                                <q-item-section>
                                    <q-item-label>
                                        {{ item.label }}
                                    </q-item-label>
                                </q-item-section>
+                                <q-item-section side>
+                                    <q-btn round flat size="sm" icon="clear" @click="removeField(index)" />
+                                </q-item-section>
                            </q-item>
                        </q-virtual-scroll>
+                      </q-list>
                    </div>
-                    <div v-else class="row q-mt-lg">
+                    <!-- <div v-else class="row q-mt-lg">
+                    </div> -->
                </div>
-                </div>
-            </q-card-section>
-
                <!-- <q-separator /> -->
-
-            <q-card-section class="q-px-none q-py-xs">
+            </q-card-section>
+            <q-card-section class="q-px-none q-py-xs" v-if="selectedField.fields && selectedField.fields.length===0">
                <div class="row">
-                    <div class="text-grey text-caption
-"> {{ $props.placeholder }}</div>
+                    <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">
+    <show-dialog v-model:visible="show" name="フィールド一覧" @close="closeFieldDialog" ref="fieldDlg">

        <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>
+                <div v-if="!showSelectApp && selectedField.app">{{ selectedField.app?.name }}</div>
                <q-space />
                <div>
                    <q-btn outline dense label="選 択" padding="none sm" color="primary" @click="() => {
@@ -67,7 +65,7 @@
            </div>
        </div>

-        <div v-if="!showSelectApp && selectAppInfo?.name">
+        <div v-if="!showSelectApp && selectedField.app?.name">
            <div>
                <div class="row q-mb-md">
                    <!-- <div class="col"> -->
@@ -76,23 +74,25 @@
                    <q-space />
                    <!-- <div class="col"> -->
                    <div class="q-mr-md">
-                        <q-input v-model="fieldFilter" type="text" label="フィールド検索" dense outlined />
+                      <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="appDg" name="フィールド" type="multiple" :updateSelects="updateItems"
-                        :appId="selectAppInfo?.id" not_page :filter="fieldFilter"></field-select>
+                    <field-select ref="fieldDlg" name="フィールド" type="multiple" :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>

-    <show-dialog v-model:visible="showSelectApp" name="アプリ選択" @close="closeDg">
+    <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>
@@ -101,8 +101,8 @@
            </q-input>
        </template>

-        <AppSelect ref="appDg" name="アプリ" type="single" :filter="filter"
-            :updateExternalSelectAppInfo=updateExternalSelectAppInfo></AppSelect>
+        <AppSelect ref="appDlg" name="アプリ" type="single" :filter="filter"
+            :updateExternalSelectAppInfo="updateExternalSelectAppInfo"></AppSelect>
    </show-dialog>
 </template>

@@ -112,15 +112,21 @@ 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 ISelectFieldItem {
-    id: string | number,
-    name: string | null
+
+interface IAppFields{
+   app?:IApp,
+   fields:IField[]
 }
+
 export default defineComponent({
    name: 'FieldInput',
    components: {
@@ -149,15 +155,21 @@ export default defineComponent({
    },

    setup(props, { emit }) {
-        const appDg = ref();
+        const appDlg = ref();
+        const fieldDlg = ref();
        const show = ref(false);
        const showSelectApp = ref(false);
-        const items = ref<ISelectFieldItem[]>([]);
-        const selectedField = ref(props.modelValue);
+       const selectedField = ref<IAppFields>({
+          app:undefined,
+          fields:[]
+       });
+       if(props.modelValue && "app" in props.modelValue && "fields" in props.modelValue){
+         selectedField.value=props.modelValue as IAppFields;
+       }
        const store = useFlowEditorStore();
-        const selectAppInfo = ref()
+
        const isSelected = computed(() => {
-            return selectedField.value !== null && typeof selectedField.value === 'object' && ('name' in selectedField.value)
+            return selectedField.value !== null && typeof selectedField.value === 'object' && ('app' in selectedField.value)
        });

        const showDg = () => {
@@ -165,50 +177,56 @@ export default defineComponent({
        };

        const clear = () => {
-            selectAppInfo.value = undefined
-            items.value = []
+            selectedField.value ={
+              fields:[]
+            } ;
        }

-        const closeDg = (val: string) => {
+        const closeAppDlg = (val: string) => {
            if (val == 'OK') {
-                selectedField.value = appDg.value.selected[0];
+                selectedField.value.app = appDlg.value.selected[0];
+                selectedField.value.fields=[];
+                showSelectApp.value=false;
            }
        };
-        const updateExternalSelectAppInfo = (newAppinfo) => {
-            selectAppInfo.value = newAppinfo
+
+        const closeFieldDialog=(val:string)=>{
+          if (val == 'OK') {
+                selectedField.value.fields = fieldDlg.value.selected;
+            }
+        };
+        const updateExternalSelectAppInfo = (newAppinfo:IApp) => {
+          // selectedField.value.app = newAppinfo
        }

-        const updateItems = (newItems) => {
-            items.value = newItems
+        const updateItems = (newFields:IField[]) => {
+          // selectedField.value.fields = newFields
        }

-        // for (let i = 0; i < 10000; i++) {
-        //     items.value.push({
-        //         id: i,
-        //         name: 'name ' + i
-        //     })
-        // }
-
+        const removeField=(index:number)=>{
+          selectedField.value.fields.splice(index,1);
+        }
        watchEffect(() => {
            emit('update:modelValue', selectedField.value);
        });

        return {
            store,
-            appDg,
+            appDlg,
+            fieldDlg,
            show,
            showDg,
-            closeDg,
+            closeAppDlg,
+            closeFieldDialog,
            selectedField,
            showSelectApp,
            isSelected,
-            items,
-            filter: ref(),
            updateExternalSelectAppInfo,
-            selectAppInfo,
+            filter: ref(),
            updateItems,
            clear,
-            fieldFilter: ref()
+            fieldFilter: ref(),
+            removeField
        };
    }
 });
--- a/frontend/src/components/right/FieldInput.vue
+++ b/frontend/src/components/right/FieldInput.vue
@@ -14,7 +14,7 @@
      </template>

      <template v-slot:append>
-      <q-icon name="search" class="cursor-pointer"  @click="showDg"/>
+      <q-icon name="search" class="cursor-pointer" color="primary" @click="showDg"/>
      </template>
    </q-field>
    <show-dialog v-model:visible="show" name="フィールド一覧" @close="closeDg" widht="400px">
@@ -96,4 +96,3 @@
      }
    });
    </script>
-