From 0de33f04bcefa895614b589f244068d854b65ef1 Mon Sep 17 00:00:00 2001
From: "maxiaozhe@alicorns.co.jp" <maxiaozhe@alicorns.co.jp>
Date: Thu, 25 Apr 2024 09:46:34 +0900
Subject: [PATCH] =?UTF-8?q?=E3=82=A2=E3=83=97=E3=83=AA=E3=81=8B=E3=82=89?=
 =?UTF-8?q?=E3=83=95=E3=82=A3=E3=83=BC=E3=83=AB=E3=83=89=E9=81=B8=E6=8A=9E?=
 =?UTF-8?q?UI=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/app/core/security.py                  |   4 +-
 frontend/src/components/AppSelect.vue         |  12 +-
 frontend/src/components/FieldSelect.vue       |  26 ++--
 frontend/src/components/left/AppSelector.vue  |   2 +-
 .../src/components/right/AppFieldSelect.vue   | 138 ++++++++++--------
 frontend/src/components/right/FieldInput.vue  |  17 +--
 6 files changed, 106 insertions(+), 93 deletions(-)

diff --git a/backend/app/core/security.py b/backend/app/core/security.py
index 098fe34..6465002 100644
--- 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
diff --git a/frontend/src/components/AppSelect.vue b/frontend/src/components/AppSelect.vue
index 946558a..261a7e6 100644
--- 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(() => {
@@ -99,4 +97,4 @@ export default {
   min-height: 300px;
   min-width: 400px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/components/FieldSelect.vue b/frontend/src/components/FieldSelect.vue
index 773870a..0567d89 100644
--- a/frontend/src/components/FieldSelect.vue
+++ b/frontend/src/components/FieldSelect.vue
@@ -3,12 +3,12 @@
     <div v-if="!isLoaded" class="spinner flex flex-center">
       <q-spinner color="primary" size="3em" />
     </div>
-    <q-table flat bordered v-else row-key="name" :selection="type" v-model:selected="selected" :columns="columns"
+    <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, 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 () => {
diff --git a/frontend/src/components/left/AppSelector.vue b/frontend/src/components/left/AppSelector.vue
index 173b0fb..86a3bba 100644
--- 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>
diff --git a/frontend/src/components/right/AppFieldSelect.vue b/frontend/src/components/right/AppFieldSelect.vue
index 1f8c846..a6545d6 100644
--- 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>
+                    <!-- <div v-else class="row q-mt-lg">
+                    </div> -->
                 </div>
+                <!-- <q-separator /> -->
             </q-card-section>
-
-            <!-- <q-separator /> -->
-
-            <q-card-section class="q-px-none q-py-xs">
+            <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>
+     </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,51 +177,57 @@ 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
         };
     }
 });
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/components/right/FieldInput.vue b/frontend/src/components/right/FieldInput.vue
index 716310d..9be0622 100644
--- a/frontend/src/components/right/FieldInput.vue
+++ b/frontend/src/components/right/FieldInput.vue
@@ -12,16 +12,16 @@
       <template v-slot:hint v-if="!isSelected">
         {{ placeholder }}
       </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">
       <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';
@@ -60,7 +60,7 @@
           default: null
         },
       },
-    
+
       setup(props, { emit }) {
         const appDg = ref();
         const show = ref(false);
@@ -69,21 +69,21 @@
         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,
@@ -96,4 +96,3 @@
       }
     });
     </script>
-    
\ No newline at end of file