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

update

Browse Source
This commit is contained in:
Mouriya
2024-04-22 22:05:39 +09:00
parent 99d3a01991
commit 1a48fb5b20
9 changed files with 436 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/ActionSelect.vue
View File

@@ -56,7 +56,7 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.action-table{ .action-table{
height: 100%; min-height: 10vh;
max-height: 540px; max-height: 68vh;
} }
</style> </style>

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

@@ -1,69 +1,70 @@
<template> <template>
<div class="q-pa-md" > <div class="q-px-xs">
<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 v-else <q-table v-else class="app-table" :selection="type" row-key="id" v-model:selected="selected" flat bordered
class="app-table" virtual-scroll :columns="columns" :rows="rows" :pagination="pagination" :rows-per-page-options="[0]"
:selection="type" :filter="filter" style="max-height: 65vh;">
row-key="id"
v-model:selected="selected"
flat bordered
virtual-scroll
:columns="columns"
:rows="rows"
:pagination="pagination"
:rows-per-page-options="[0]"
:filter="filter"
>
<template v-slot:body-cell-description="props"> <template v-slot:body-cell-description="props">
<q-td :props="props"> <q-td :props="props">
<q-scroll-area class="description-cell"> <q-scroll-area class="description-cell">
<div v-html="props.row.description" ></div> <div v-html="props.row.description"></div>
</q-scroll-area> </q-scroll-area>
</q-td> </q-td>
</template> </template>
</q-table> </q-table>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { ref,onMounted,reactive } from 'vue' import { ref, onMounted, reactive, watch } from 'vue'
import { api } from 'boot/axios'; import { api } from 'boot/axios';
import { LeftDataBus } from './flowEditor/left/DataBus';
export default { export default {
name: 'AppSelect', name: 'AppSelect',
props: { props: {
name: String, name: String,
type: String, type: String,
filter:String filter: String,
updateExternalSelectAppInfo: {
type: Function
}
}, },
setup() { setup(props) {
const columns = [ const columns = [
{ name: 'id', required: true,label: 'ID',align: 'left',field: 'id',sortable: true}, { name: 'id', required: true, label: 'ID', align: 'left', field: 'id', sortable: true },
{ name: 'name', label: 'アプリ名', field: 'name', sortable: true,align:'left' }, { name: 'name', label: 'アプリ名', field: 'name', sortable: true, align: 'left' },
{ name: 'description', label: '概要', field: 'description',align:'left', sortable: false }, { name: 'description', label: '概要', field: 'description', align: 'left', sortable: false },
{ name: 'createdate', label: '作成日時', field: 'createdate',align:'left'} { name: 'createdate', label: '作成日時', field: 'createdate', align: 'left' }
] ]
const isLoaded=ref(false); const isLoaded = ref(false);
const rows :any[]= reactive([]); const rows: any[] = reactive([]);
onMounted( () => { const selected = ref([])
api.get('api/v1/allapps').then(res =>{
res.data.apps.forEach((item:any) =>
{
rows.push({
id:item.appId,
name:item.name,
description:item.description,
createdate:dateFormat(item.createdAt)});
});
isLoaded.value=true;
});
});
const dateFormat=(dateStr:string)=>{ const updateExternalSelectAppInfo = props.updateExternalSelectAppInfo
watch(selected, (newValue, oldValue) => {
if (newValue && newValue[0] && updateExternalSelectAppInfo) {
updateExternalSelectAppInfo(newValue[0])
}
});
onMounted(() => {
api.get('api/v1/allapps').then(res => {
res.data.apps.forEach((item: any) => {
rows.push({
id: item.appId,
name: item.name,
description: item.description,
createdate: dateFormat(item.createdAt)
});
});
isLoaded.value = true;
});
});
const dateFormat = (dateStr: string) => {
const date = new Date(dateStr); const date = new Date(dateStr);
const pad = (num:number) => num.toString().padStart(2, '0'); const pad = (num: number) => num.toString().padStart(2, '0');
const year = date.getFullYear(); const year = date.getFullYear();
const month = pad(date.getMonth() + 1); const month = pad(date.getMonth() + 1);
const day = pad(date.getDate()); const day = pad(date.getDate());
@@ -75,10 +76,10 @@ export default {
return { return {
columns, columns,
rows, rows,
selected: ref([]), selected,
isLoaded, isLoaded,
pagination:ref({ pagination: ref({
rowsPerPage:10 rowsPerPage: 10
}) })
} }
}, },
@@ -86,19 +87,16 @@ export default {
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.description-cell{ .description-cell {
height: 60px; height: 60px;
width: 300px; width: 300px;
max-height: 60px; max-height: 60px;
max-width: 300px; max-width: 300px;
white-space: break-spaces; white-space: break-spaces;
} }
.spinner{
.spinner {
min-height: 300px; min-height: 300px;
min-width: 400px; min-width: 400px;
} }
.app-table{ </style>
height: 100%;
max-height: 600px;
}
</style>

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

@@ -1,53 +1,84 @@
<template> <template>
<div class="q-pa-md"> <div class="q-px-md" style=" min-width: 50vw; max-width: 85vw;">
<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 v-else row-key="name" :selection="type" v-model:selected="selected" :columns="columns" :rows="rows" /> <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> </div>
</template> </template>
<script> <script>
import { ref,onMounted,reactive } from 'vue' import { ref, onMounted, reactive, watch } from 'vue'
import { api } from 'boot/axios'; import { api } from 'boot/axios';
export default { export default {
name: 'fieldSelect', name: 'fieldSelect',
props: { props: {
name: String, name: String,
type: String, type: {
appId:Number type: String,
default: 'single'
},
appId: Number,
not_page: {
type: Boolean,
default: false,
},
updateSelects: {
type: Function
},
filter: String,
}, },
setup(props) { setup(props) {
const isLoaded=ref(false); const isLoaded = ref(false);
const columns = [ const columns = [
{ name: 'name', required: true,label: 'フィールド名',align: 'left',field: row=>row.name,sortable: true}, { name: 'name', required: true, label: 'フィールド名', align: 'left', field: row => row.name, sortable: true },
{ 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({
sortBy: 'desc',
descending: false,
page: 2,
rowsPerPage: not_page ? 0 : 5
// rowsNumber: xx if getting data from a server
})
const filter = props.filter
const rows = reactive([]) const rows = reactive([])
onMounted( async () => { const selected = ref([])
const res = await api.get('api/v1/appfields', { const updateSelects = props.updateSelects
params:{ watch(selected, (newValue, oldValue) => {
app: props.appId
}
});
let fields = res.data.properties;
console.log(fields);
Object.keys(fields).forEach((key) =>
{
const fld=fields[key];
// rows.push({name:fields[key].label,code:fields[key].code,type:fields[key].type});
rows.push({name:fld.label,...fld});
});
isLoaded.value=true;
});
return { if (newValue && newValue[0] && updateSelects) {
columns, console.log(newValue);
rows, updateSelects(newValue)
selected: ref([]),
isLoaded
} }
});
onMounted(async () => {
const res = await api.get('api/v1/appfields', {
params: {
app: props.appId
}
});
let fields = res.data.properties;
console.log(fields);
Object.keys(fields).forEach((key) => {
const fld = fields[key];
// rows.push({name:fields[key].label,code:fields[key].code,type:fields[key].type});
rows.push({ name: fld.label, ...fld });
});
isLoaded.value = true;
});
return {
columns,
rows,
selected,
isLoaded,
pageSetting
}
}, },
} }

6
frontend/src/components/ShowDialog.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<!-- <div class="q-pa-md q-gutter-sm" > --> <!-- <div class="q-pa-md q-gutter-sm" > -->
<q-dialog :model-value="visible" persistent bordered> <q-dialog :model-value="visible" persistent bordered >
<q-card :style="cardStyle" > <q-card :style="cardStyle" style=" min-width: 40vw; max-width: 80vw; max-height: 95vh;">
<q-toolbar class="bg-grey-4"> <q-toolbar class="bg-grey-4">
<q-toolbar-title>{{ name }}</q-toolbar-title> <q-toolbar-title>{{ name }}</q-toolbar-title>
<q-space></q-space> <q-space></q-space>
@@ -14,7 +14,7 @@
<q-card-section class="q-pt-none" :style="sectionStyle"> <q-card-section class="q-pt-none" :style="sectionStyle">
<slot></slot> <slot></slot>
</q-card-section> </q-card-section>
<q-card-actions align="right" class="text-primary"> <q-card-actions align="right" class="text-primary q-mt-lg">
<q-btn flat label="確定" v-close-popup @click="CloseDialogue('OK')" /> <q-btn flat label="確定" v-close-popup @click="CloseDialogue('OK')" />
<q-btn flat label="キャンセル" v-close-popup @click="CloseDialogue('Cancel')" /> <q-btn flat label="キャンセル" v-close-popup @click="CloseDialogue('Cancel')" />
</q-card-actions> </q-card-actions>

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

@@ -0,0 +1,215 @@
<template>
<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">
<div class="text-primary q-mb-xs text-caption">{{ $props.displayName }}</div>
</div>
<div class="row">
<div class="col">
<div class="q-mb-xs">{{ selectAppInfo?.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-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>
<q-item-section>
<q-item-label>
{{ item.label }}
</q-item-label>
</q-item-section>
</q-item>
</q-virtual-scroll>
</div>
<div v-else class="row q-mt-lg">
</div>
</div>
</q-card-section>
<!-- <q-separator /> -->
<q-card-section class="q-px-none q-py-xs">
<div class="row">
<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">
<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>
<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 && selectAppInfo?.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 v-model="fieldFilter" type="text" label="フィールド検索" dense outlined />
</div>
</div>
<div class="row">
<field-select ref="appDg" name="フィールド" type="multiple" :updateSelects="updateItems"
:appId="selectAppInfo?.id" not_page :filter="fieldFilter"></field-select>
</div>
</div>
</div>
<div style="min-width: 45vw;" v-else>
</div>
</show-dialog>
<show-dialog v-model:visible="showSelectApp" name="アプリ選択" @close="closeDg">
<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="appDg" 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 IField {
name: string,
code: string,
type: string
}
interface ISelectFieldItem {
id: string | number,
name: string | null
}
export default defineComponent({
name: 'FieldInput',
components: {
ShowDialog,
FieldSelect,
AppSelect,
},
props: {
displayName: {
type: String,
default: '',
},
name: {
type: String,
default: '',
},
placeholder: {
type: String,
default: '',
},
modelValue: {
type: Object,
default: null
},
},
setup(props, { emit }) {
const appDg = ref();
const show = ref(false);
const showSelectApp = ref(false);
const items = ref<ISelectFieldItem[]>([]);
const selectedField = ref(props.modelValue);
const store = useFlowEditorStore();
const selectAppInfo = ref()
const isSelected = computed(() => {
return selectedField.value !== null && typeof selectedField.value === 'object' && ('name' in selectedField.value)
});
const showDg = () => {
show.value = true;
};
const clear = () => {
selectAppInfo.value = undefined
items.value = []
}
const closeDg = (val: string) => {
if (val == 'OK') {
selectedField.value = appDg.value.selected[0];
}
};
const updateExternalSelectAppInfo = (newAppinfo) => {
selectAppInfo.value = newAppinfo
}
const updateItems = (newItems) => {
items.value = newItems
}
// for (let i = 0; i < 10000; i++) {
// items.value.push({
// id: i,
// name: 'name ' + i
// })
// }
watchEffect(() => {
emit('update:modelValue', selectedField.value);
});
return {
store,
appDg,
show,
showDg,
closeDg,
selectedField,
showSelectApp,
isSelected,
items,
filter: ref(),
updateExternalSelectAppInfo,
selectAppInfo,
updateItems,
clear,
fieldFilter: ref()
};
}
});
</script>

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

@@ -1,98 +1,99 @@
<template> <template>
<q-field v-model="selectedField" :label="displayName" labelColor="primary" <q-field v-model="selectedField" :label="displayName" labelColor="primary"
:clearable="isSelected" stack-label :bottom-slots="!isSelected" > :clearable="isSelected" stack-label :bottom-slots="!isSelected" >
<template v-slot:control > <template v-slot:control >
<q-chip color="primary" text-color="white" v-if="isSelected"> <q-chip color="primary" text-color="white" v-if="isSelected">
{{ selectedField.name }} {{ selectedField.name }}
</q-chip> </q-chip>
</template> </template>
<!-- <template v-slot:hint v-if="isSelected"> <!-- <template v-slot:hint v-if="isSelected">
<div> 項目コード：<q-chip size="sm" outline color="secondary" text-color="white">{{selectedField.code}}</q-chip></div> <div> 項目コード：<q-chip size="sm" outline color="secondary" text-color="white">{{selectedField.code}}</q-chip></div>
</template> --> </template> -->
<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" @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';
import FieldSelect from '../FieldSelect.vue'; import FieldSelect from '../FieldSelect.vue';
import { useFlowEditorStore } from 'stores/flowEditor'; import { useFlowEditorStore } from 'stores/flowEditor';
interface IField{ interface IField{
name:string, name:string,
code:string, code:string,
type:string type:string
} }
export default defineComponent({ export default defineComponent({
name: 'FieldInput', name: 'FieldInput',
components: { components: {
ShowDialog, ShowDialog,
FieldSelect, FieldSelect,
}, },
props: { props: {
displayName:{ displayName:{
type: String, type: String,
default: '', default: '',
}, },
name:{ name:{
type: String, type: String,
default: '', default: '',
}, },
placeholder: { placeholder: {
type: String, type: String,
default: '', default: '',
}, },
hint:{ hint:{
type: String, type: String,
default: '', default: '',
}, },
modelValue: { modelValue: {
type: Object, type: Object,
default: null default: null
}, },
}, },
setup(props, { emit }) { setup(props, { emit }) {
const appDg = ref(); const appDg = ref();
const show = ref(false); const show = ref(false);
const selectedField = ref(props.modelValue); const selectedField = ref(props.modelValue);
const store = useFlowEditorStore(); const store = useFlowEditorStore();
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(() => {
emit('update:modelValue', selectedField.value);
});
return {
store,
appDg,
show,
showDg,
closeDg,
selectedField,
isSelected
};
} }
};
watchEffect(() => {
emit('update:modelValue', selectedField.value);
}); });
</script>
return {
store,
appDg,
show,
showDg,
closeDg,
selectedField,
isSelected
};
}
});
</script>

0
frontend/src/components/right/MultiFieldInput.vue Normal file
View File

2
frontend/src/components/right/PropertyList.vue
View File

@@ -15,6 +15,7 @@ import InputText from '../right/InputText.vue';
import SelectBox from '../right/SelectBox.vue'; import SelectBox from '../right/SelectBox.vue';
import DatePicker from '../right/DatePicker.vue'; import DatePicker from '../right/DatePicker.vue';
import FieldInput from '../right/FieldInput.vue'; import FieldInput from '../right/FieldInput.vue';
import AppFieldSelect from './AppFieldSelect.vue';
import MuiltInputText from '../right/MuiltInputText.vue'; import MuiltInputText from '../right/MuiltInputText.vue';
import ConditionInput from '../right/ConditionInput.vue'; import ConditionInput from '../right/ConditionInput.vue';
import EventSetter from '../right/EventSetter.vue'; import EventSetter from '../right/EventSetter.vue';
@@ -27,6 +28,7 @@ export default defineComponent({
SelectBox, SelectBox,
DatePicker, DatePicker,
FieldInput, FieldInput,
AppFieldSelect,
MuiltInputText, MuiltInputText,
ConditionInput, ConditionInput,
EventSetter EventSetter

2
frontend/src/components/right/PropertyPanel.vue
View File

@@ -11,7 +11,7 @@
elevated elevated
overlay overlay
> >
<q-card class="column full-height" style="width: 300px"> <q-card class="column" style="max-width: 300px;min-height: 100%">
<q-card-section> <q-card-section>
<div class="text-h6">{{ actionNode?.subTitle }}：設定</div> <div class="text-h6">{{ actionNode?.subTitle }}：設定</div>
</q-card-section> </q-card-section>