alicorn-dev/KintoneAppBuilder
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
maxiaozhe@alicorns.co.jp
2024-04-25 09:46:34 +09:00
parent 1a48fb5b20
commit 0de33f04bc
6 changed files with 106 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
backend/app/core/security.py
View File

@@ -9,7 +9,7 @@ pwd_context = CryptContext(schemes=["bcrypt"], deprecated="auto")
SECRET_KEY = "alicorns" SECRET_KEY = "alicorns"
ALGORITHM = "HS256" ALGORITHM = "HS256"
ACCESS_TOKEN_EXPIRE_MINUTES = 30 ACCESS_TOKEN_EXPIRE_MINUTES = 2880
def get_password_hash(password: str) -> str: def get_password_hash(password: str) -> str:
@@ -25,7 +25,7 @@ def create_access_token(*, data: dict, expires_delta: timedelta = None):
if expires_delta: if expires_delta:
expire = datetime.utcnow() + expires_delta expire = datetime.utcnow() + expires_delta
else: else:
expire = datetime.utcnow() + timedelta(minutes=2880) expire = datetime.utcnow() + timedelta(minutes=ACCESS_TOKEN_EXPIRE_MINUTES)
to_encode.update({"exp": expire}) to_encode.update({"exp": expire})
encoded_jwt = jwt.encode(to_encode, SECRET_KEY, algorithm=ALGORITHM) encoded_jwt = jwt.encode(to_encode, SECRET_KEY, algorithm=ALGORITHM)
return encoded_jwt return encoded_jwt

12
frontend/src/components/AppSelect.vue
View File

@@ -17,7 +17,7 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { ref, onMounted, reactive, watch } from 'vue' import { ref, onMounted, reactive, watchEffect } from 'vue'
import { api } from 'boot/axios'; import { api } from 'boot/axios';
export default { export default {
@@ -41,11 +41,9 @@ export default {
const rows: any[] = reactive([]); const rows: any[] = reactive([]);
const selected = ref([]) const selected = ref([])
const updateExternalSelectAppInfo = props.updateExternalSelectAppInfo watchEffect(()=>{
if (selected.value && selected.value[0] && props.updateExternalSelectAppInfo) {
watch(selected, (newValue, oldValue) => { props.updateExternalSelectAppInfo(selected.value[0])
if (newValue && newValue[0] && updateExternalSelectAppInfo) {
updateExternalSelectAppInfo(newValue[0])
} }
}); });
onMounted(() => { onMounted(() => {
@@ -99,4 +97,4 @@ export default {
min-height: 300px; min-height: 300px;
min-width: 400px; min-width: 400px;
} }
</style> </style>

26
frontend/src/components/FieldSelect.vue
View File

@@ -3,12 +3,12 @@
<div v-if="!isLoaded" class="spinner flex flex-center"> <div v-if="!isLoaded" class="spinner flex flex-center">
<q-spinner color="primary" size="3em" /> <q-spinner color="primary" size="3em" />
</div> </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;"/> :rows="rows" :pagination="pageSetting" :filter="filter" style="max-height: 55vh;"/>
</div> </div>
</template> </template>
<script> <script>
import { ref, onMounted, reactive, watch } from 'vue' import { ref, onMounted, reactive, watchEffect } from 'vue'
import { api } from 'boot/axios'; import { api } from 'boot/axios';
export default { export default {
@@ -24,6 +24,10 @@ export default {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
selectedFields:{
type:Array,
default:()=>[]
},
updateSelects: { updateSelects: {
type: Function type: Function
}, },
@@ -36,24 +40,18 @@ export default {
{ name: 'code', label: 'フィールドコード', align: 'left', field: 'code', sortable: true }, { name: 'code', label: 'フィールドコード', align: 'left', field: 'code', sortable: true },
{ name: 'type', label: 'フィールドタイプ', align: 'left', field: 'type', sortable: true } { name: 'type', label: 'フィールドタイプ', align: 'left', field: 'type', sortable: true }
] ]
const not_page = props.not_page
const pageSetting = ref({ const pageSetting = ref({
sortBy: 'desc', sortBy: 'desc',
descending: false, descending: false,
page: 2, page: 2,
rowsPerPage: not_page ? 0 : 5 rowsPerPage: props.not_page ? 0 : 5
// rowsNumber: xx if getting data from a server // rowsNumber: xx if getting data from a server
}) });
const filter = props.filter const rows = reactive([]);
const rows = reactive([]) const selected = ref(props.selectedFields && props.selectedFields.length>0?props.selectedFields:[]);
const selected = ref([])
const updateSelects = props.updateSelects
watch(selected, (newValue, oldValue) => {
if (newValue && newValue[0] && updateSelects) { watchEffect(() => {
console.log(newValue); props.updateSelects(selected);
updateSelects(newValue)
}
}); });
onMounted(async () => { onMounted(async () => {

2
frontend/src/components/left/AppSelector.vue
View File

@@ -22,7 +22,7 @@
></q-btn> ></q-btn>
</div> </div>
</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> <template v-slot:toolbar>
<q-input dense debounce="300" v-model="filter" placeholder="検索" clearable> <q-input dense debounce="300" v-model="filter" placeholder="検索" clearable>
<template v-slot:before> <template v-slot:before>

138
frontend/src/components/right/AppFieldSelect.vue
View File

@@ -2,7 +2,6 @@
<div class="q-my-md"> <div class="q-my-md">
<q-card flat> <q-card flat>
<q-card-section class="q-pa-none q-my-sm q-mr-md"> <q-card-section class="q-pa-none q-my-sm q-mr-md">
<!-- <div class=" q-my-none ">App Field Select</div> --> <!-- <div class=" q-my-none ">App Field Select</div> -->
<div class="row q-mb-xs"> <div class="row q-mb-xs">
@@ -10,54 +9,53 @@
</div> </div>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<div class="q-mb-xs">{{ selectAppInfo?.name || 'アプリ未選択' }}</div> <div class="q-mb-xs">{{ selectedField.app?.name || '未選択' }}</div>
</div> </div>
<div class="col-1"> <div class="col-1">
<q-btn round flat size="sm" color="primary" icon="search" @click="showDg" /> <q-btn round flat size="sm" color="primary" icon="search" @click="showDg" />
</div> </div>
</div> </div>
</q-card-section> </q-card-section>
<q-separator />
<q-card-section class="q-pa-none q-ma-none"> <q-card-section class="q-pa-none q-ma-none">
<div style="">
<div class="" style="border: 1px solid rgba(0, 0, 0, 0.12)"> <div v-if="selectedField.fields && selectedField.fields.length > 0 ">
<div v-if="items.length !== 0 && !show"> <q-list bordered>
<q-virtual-scroll style="max-height: 160px;" :items="selectedField.fields" separator v-slot="{ item, index }">
<q-virtual-scroll style="max-height: 150px;" :items="items" separator v-slot="{ item, index }"> <q-item :key="index" dense clickable >
<q-item :key="index" dense>
<q-item-section> <q-item-section>
<q-item-label> <q-item-label>
{{ item.label }} {{ item.label }}
</q-item-label> </q-item-label>
</q-item-section> </q-item-section>
<q-item-section side>
<q-btn round flat size="sm" icon="clear" @click="removeField(index)" />
</q-item-section>
</q-item> </q-item>
</q-virtual-scroll> </q-virtual-scroll>
</q-list>
</div> </div>
<div v-else class="row q-mt-lg"> <!-- <div v-else class="row q-mt-lg">
</div> </div> -->
</div> </div>
<!-- <q-separator /> -->
</q-card-section> </q-card-section>
<q-card-section class="q-px-none q-py-xs" v-if="selectedField.fields && selectedField.fields.length===0">
<!-- <q-separator /> -->
<q-card-section class="q-px-none q-py-xs">
<div class="row"> <div class="row">
<div class="text-grey text-caption <div class="text-grey text-caption"> {{ $props.placeholder }}</div>
"> {{ $props.placeholder }}</div>
<!-- <q-btn flat color="grey" label="clear" @click="clear" /> --> <!-- <q-btn flat color="grey" label="clear" @click="clear" /> -->
</div> </div>
</q-card-section> </q-card-section>
</q-card> </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-mx-md q-mb-lg">
<div class="q-mb-xs q-ml-md text-primary">アプリ選択</div> <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 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 /> <q-space />
<div> <div>
<q-btn outline dense label="選 択" padding="none sm" color="primary" @click="() => { <q-btn outline dense label="選 択" padding="none sm" color="primary" @click="() => {
@@ -67,7 +65,7 @@
</div> </div>
</div> </div>
<div v-if="!showSelectApp && selectAppInfo?.name"> <div v-if="!showSelectApp && selectedField.app?.name">
<div> <div>
<div class="row q-mb-md"> <div class="row q-mb-md">
<!-- <div class="col"> --> <!-- <div class="col"> -->
@@ -76,23 +74,25 @@
<q-space /> <q-space />
<!-- <div class="col"> --> <!-- <div class="col"> -->
<div class="q-mr-md"> <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> </div>
<div class="row"> <div class="row">
<field-select ref="appDg" name="フィールド" type="multiple" :updateSelects="updateItems" <field-select ref="fieldDlg" name="フィールド" type="multiple" :updateSelects="updateItems"
:appId="selectAppInfo?.id" not_page :filter="fieldFilter"></field-select> :appId="selectedField.app?.id" not_page :filter="fieldFilter" :selectedFields="selectedField.fields"></field-select>
</div> </div>
</div> </div>
</div> </div>
<div style="min-width: 45vw;" v-else> <div style="min-width: 45vw;" v-else>
</div> </div>
</show-dialog> </show-dialog>
<show-dialog v-model:visible="showSelectApp" name="アプリ選択" @close="closeDg"> <show-dialog v-model:visible="showSelectApp" name="アプリ選択" @close="closeAppDlg">
<template v-slot:toolbar> <template v-slot:toolbar>
<q-input dense debounce="300" v-model="filter" placeholder="検索" clearable> <q-input dense debounce="300" v-model="filter" placeholder="検索" clearable>
<template v-slot:before> <template v-slot:before>
@@ -101,8 +101,8 @@
</q-input> </q-input>
</template> </template>
<AppSelect ref="appDg" name="アプリ" type="single" :filter="filter" <AppSelect ref="appDlg" name="アプリ" type="single" :filter="filter"
:updateExternalSelectAppInfo=updateExternalSelectAppInfo></AppSelect> :updateExternalSelectAppInfo="updateExternalSelectAppInfo"></AppSelect>
</show-dialog> </show-dialog>
</template> </template>
@@ -112,15 +112,21 @@ import ShowDialog from '../ShowDialog.vue';
import FieldSelect from '../FieldSelect.vue'; import FieldSelect from '../FieldSelect.vue';
import { useFlowEditorStore } from 'stores/flowEditor'; import { useFlowEditorStore } from 'stores/flowEditor';
import AppSelect from '../AppSelect.vue'; import AppSelect from '../AppSelect.vue';
interface IApp{
id:string,
name:string
}
interface IField { interface IField {
name: string, name: string,
code: string, code: string,
type: string type: string
} }
interface ISelectFieldItem {
id: string | number, interface IAppFields{
name: string | null app?:IApp,
fields:IField[]
} }
export default defineComponent({ export default defineComponent({
name: 'FieldInput', name: 'FieldInput',
components: { components: {
@@ -149,15 +155,21 @@ export default defineComponent({
}, },
setup(props, { emit }) { setup(props, { emit }) {
const appDg = ref(); const appDlg = ref();
const fieldDlg = ref();
const show = ref(false); const show = ref(false);
const showSelectApp = ref(false); const showSelectApp = ref(false);
const items = ref<ISelectFieldItem[]>([]); const selectedField = ref<IAppFields>({
const selectedField = ref(props.modelValue); app:undefined,
fields:[]
});
if(props.modelValue && "app" in props.modelValue && "fields" in props.modelValue){
selectedField.value=props.modelValue as IAppFields;
}
const store = useFlowEditorStore(); const store = useFlowEditorStore();
const selectAppInfo = ref()
const isSelected = computed(() => { 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 = () => { const showDg = () => {
@@ -165,51 +177,57 @@ export default defineComponent({
}; };
const clear = () => { const clear = () => {
selectAppInfo.value = undefined selectedField.value ={
items.value = [] fields:[]
} ;
} }
const closeDg = (val: string) => { const closeAppDlg = (val: string) => {
if (val == 'OK') { 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) => { const updateItems = (newFields:IField[]) => {
items.value = newItems // selectedField.value.fields = newFields
} }
// for (let i = 0; i < 10000; i++) { const removeField=(index:number)=>{
// items.value.push({ selectedField.value.fields.splice(index,1);
// id: i, }
// name: 'name ' + i
// })
// }
watchEffect(() => { watchEffect(() => {
emit('update:modelValue', selectedField.value); emit('update:modelValue', selectedField.value);
}); });
return { return {
store, store,
appDg, appDlg,
fieldDlg,
show, show,
showDg, showDg,
closeDg, closeAppDlg,
closeFieldDialog,
selectedField, selectedField,
showSelectApp, showSelectApp,
isSelected, isSelected,
items,
filter: ref(),
updateExternalSelectAppInfo, updateExternalSelectAppInfo,
selectAppInfo, filter: ref(),
updateItems, updateItems,
clear, clear,
fieldFilter: ref() fieldFilter: ref(),
removeField
}; };
} }
}); });
</script> </script>

17
frontend/src/components/right/FieldInput.vue
View File

@@ -12,16 +12,16 @@
<template v-slot:hint v-if="!isSelected"> <template v-slot:hint v-if="!isSelected">
{{ placeholder }} {{ placeholder }}
</template> </template>
<template v-slot:append> <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> </template>
</q-field> </q-field>
<show-dialog v-model:visible="show" name="フィールド一覧" @close="closeDg" widht="400px"> <show-dialog v-model:visible="show" name="フィールド一覧" @close="closeDg" widht="400px">
<field-select ref="appDg" name="フィールド" type="single" :appId="store.appInfo?.appId"></field-select> <field-select ref="appDg" name="フィールド" type="single" :appId="store.appInfo?.appId"></field-select>
</show-dialog> </show-dialog>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, ref ,watchEffect,computed} from 'vue'; import { defineComponent, ref ,watchEffect,computed} from 'vue';
import ShowDialog from '../ShowDialog.vue'; import ShowDialog from '../ShowDialog.vue';
@@ -60,7 +60,7 @@
default: null default: null
}, },
}, },
setup(props, { emit }) { setup(props, { emit }) {
const appDg = ref(); const appDg = ref();
const show = ref(false); const show = ref(false);
@@ -69,21 +69,21 @@
const isSelected = computed(()=>{ const isSelected = computed(()=>{
return selectedField.value!==null && typeof selectedField.value === 'object' && ('name' in selectedField.value) return selectedField.value!==null && typeof selectedField.value === 'object' && ('name' in selectedField.value)
}); });
const showDg = () => { const showDg = () => {
show.value = true; show.value = true;
}; };
const closeDg = (val:string) => { const closeDg = (val:string) => {
if (val == 'OK') { if (val == 'OK') {
selectedField.value = appDg.value.selected[0]; selectedField.value = appDg.value.selected[0];
} }
}; };
watchEffect(() => { watchEffect(() => {
emit('update:modelValue', selectedField.value); emit('update:modelValue', selectedField.value);
}); });
return { return {
store, store,
appDg, appDg,
@@ -96,4 +96,3 @@
} }
}); });
</script> </script>