Compare commits
22 Commits
feature/bu
...
plugin-inf
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
3540becf6f | ||
|
|
63099eda8b | ||
|
|
65d89b0462 | ||
|
|
c6ded099fa | ||
|
|
c072233593 | ||
|
|
4e296c1555 | ||
| 016fcaab29 | |||
|
|
bebc1ec9fa | ||
|
|
f71c3d2123 | ||
|
|
d79ce8d06b | ||
|
|
fc9c3a5e81 | ||
|
|
6df72a1ae3 | ||
|
|
372dbe50f7 | ||
|
|
68fde6d490 | ||
|
|
c398dee21e | ||
|
|
f2ab310b6d | ||
|
|
ca0f24465b | ||
|
|
3cc4b65460 | ||
|
|
a6cf95b76d | ||
|
|
484ab9fdae | ||
|
|
78bba2502f | ||
|
|
c78b3cb5c0 |
File diff suppressed because one or more lines are too long
@@ -217,9 +217,7 @@ def deoployappfromkintone(app:str,revision:str,c:config.KINTONE_ENV):
|
||||
data = {"apps":[{"app":app,"revision":revision}],"revert": False}
|
||||
r = httpx.post(url,headers=headers,data=json.dumps(data))
|
||||
return r.json
|
||||
|
||||
# 既定項目に含めるアプリのフィールドのみ取得する
|
||||
# スペース、枠線、ラベルを含まない
|
||||
|
||||
def getfieldsfromkintone(app:str,c:config.KINTONE_ENV):
|
||||
headers={config.API_V1_AUTH_KEY:c.API_V1_AUTH_VALUE}
|
||||
params = {"app":app}
|
||||
@@ -227,44 +225,6 @@ def getfieldsfromkintone(app:str,c:config.KINTONE_ENV):
|
||||
r = httpx.get(url,headers=headers,params=params)
|
||||
return r.json()
|
||||
|
||||
# フォームに配置するフィールドのみ取得する
|
||||
# スペース、枠線、ラベルも含める
|
||||
def getformfromkintone(app:str,c:config.KINTONE_ENV):
|
||||
headers={config.API_V1_AUTH_KEY:c.API_V1_AUTH_VALUE}
|
||||
params = {"app":app}
|
||||
url = f"{c.BASE_URL}{config.API_V1_STR}/form.json"
|
||||
r = httpx.get(url,headers=headers,params=params)
|
||||
return r.json()
|
||||
|
||||
|
||||
def merge_kintone_fields(fields_response: dict, form_response: dict) -> dict:
|
||||
fields_properties = fields_response.get('properties', {})
|
||||
form_properties = form_response.get('properties', [])
|
||||
|
||||
merged_properties = {k: v for k, v in fields_properties.items()}
|
||||
|
||||
for index, form_field in enumerate(form_properties):
|
||||
code = form_field.get('code')
|
||||
if code:
|
||||
if code and code not in merged_properties:
|
||||
merged_properties[code] = form_field
|
||||
else:
|
||||
element_id = form_field.get('elementId')
|
||||
if element_id:
|
||||
key = element_id
|
||||
form_field['code']=element_id
|
||||
form_field['label']=form_field.get('type')
|
||||
# else:
|
||||
# key = f"{form_field.get('type')}_{index}"
|
||||
merged_properties[key] = form_field
|
||||
|
||||
merged_response = {
|
||||
'revision': fields_response.get('revision', ''),
|
||||
'properties': merged_properties
|
||||
}
|
||||
|
||||
return merged_response
|
||||
|
||||
def analysefields(excel,kintone):
|
||||
updatefields={}
|
||||
addfields={}
|
||||
@@ -522,15 +482,6 @@ async def appfields(request:Request,app:str,env = Depends(getkintoneenv)):
|
||||
except Exception as e:
|
||||
raise APIException('kintone:appfields',request.url._url, f"Error occurred while get app fileds({env.DOMAIN_NAM}->{app}):",e)
|
||||
|
||||
@r.get("/allfields")
|
||||
async def allfields(request:Request,app:str,env = Depends(getkintoneenv)):
|
||||
try:
|
||||
field_resp = getfieldsfromkintone(app,env)
|
||||
form_resp = getformfromkintone(app,env)
|
||||
return merge_kintone_fields(field_resp,form_resp)
|
||||
except Exception as e:
|
||||
raise APIException('kintone:allfields',request.url._url, f"Error occurred while get form fileds({env.DOMAIN_NAM}->{app}):",e)
|
||||
|
||||
@r.get("/appprocess")
|
||||
async def appprocess(request:Request,app:str,env = Depends(getkintoneenv)):
|
||||
try:
|
||||
|
||||
@@ -20,7 +20,7 @@ KINTONE_FIELD_TYPE=["GROUP","GROUP_SELECT","CHECK_BOX","SUBTABLE","DROP_DOWN","U
|
||||
KINTONE_FIELD_PROPERTY=['label','code','type','required','unique','maxValue','minValue','maxLength','minLength','defaultValue','defaultNowValue','options','expression','hideExpression','digit','protocol','displayScale','unit','unitPosition']
|
||||
|
||||
class KINTONE_ENV:
|
||||
|
||||
|
||||
BASE_URL = ""
|
||||
|
||||
API_V1_AUTH_VALUE = ""
|
||||
|
||||
@@ -24,8 +24,4 @@ python -m venv env
|
||||
```bash
|
||||
pip install -r requirements.txt
|
||||
|
||||
```
|
||||
4. backend 起動
|
||||
```bash
|
||||
uvicorn app.main:app --reload
|
||||
```
|
||||
```
|
||||
@@ -1,2 +1,3 @@
|
||||
KAB_BACKEND_URL="https://kab-backend.azurewebsites.net/"
|
||||
#KAB_BACKEND_URL="http://127.0.0.1:8000/"
|
||||
|
||||
|
||||
152
frontend/src/components/AppFieldSelectBox.vue
Normal file
152
frontend/src/components/AppFieldSelectBox.vue
Normal file
@@ -0,0 +1,152 @@
|
||||
<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="selField?.app && !showSelectApp">{{ selField.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 && selField.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="selField.app?.id" not_page :filter="fieldFilter"
|
||||
:selFields="selField.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>
|
||||
|
||||
<AppSelectBox ref="appDlg" name="アプリ" type="single" :filter="filter"
|
||||
:updateExternalSelectAppInfo="updateExternalSelectAppInfo"></AppSelectBox>
|
||||
</show-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, watchEffect, computed ,reactive} from 'vue';
|
||||
import ShowDialog from './ShowDialog.vue';
|
||||
import FieldSelect from './FieldSelect.vue';
|
||||
import { useFlowEditorStore } from 'stores/flowEditor';
|
||||
import AppSelectBox from './AppSelectBox.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,
|
||||
AppSelectBox,
|
||||
},
|
||||
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 selField = reactive(props.selectedField);
|
||||
console.log(props.selectedField);
|
||||
|
||||
const store = useFlowEditorStore();
|
||||
|
||||
const isSelected = computed(() => {
|
||||
return selField !== null && typeof selField === 'object' && ('app' in selField)
|
||||
});
|
||||
|
||||
|
||||
const closeAppDlg = (val: string) => {
|
||||
if (val == 'OK') {
|
||||
selField.app = appDlg.value.selected[0];
|
||||
selField.fields = [];
|
||||
showSelectApp.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const closeFieldDialog = (val: string) => {
|
||||
if (val == 'OK') {
|
||||
selField.fields = fieldDlg.value.selected;
|
||||
}
|
||||
};
|
||||
const updateExternalSelectAppInfo = (newAppinfo: IApp) => {
|
||||
selField.app = newAppinfo
|
||||
}
|
||||
|
||||
const updateItems = (newFields: IField[]) => {
|
||||
selField.fields = newFields
|
||||
}
|
||||
|
||||
watchEffect(() => {
|
||||
emit('update:modelValue', selField);
|
||||
});
|
||||
|
||||
return {
|
||||
appDlg,
|
||||
fieldDlg,
|
||||
closeAppDlg,
|
||||
closeFieldDialog,
|
||||
showSelectApp,
|
||||
isSelected,
|
||||
updateExternalSelectAppInfo,
|
||||
filter: ref(),
|
||||
updateItems,
|
||||
fieldFilter: ref(),
|
||||
selField
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -21,7 +21,7 @@ import { ref, onMounted, reactive, watchEffect } from 'vue'
|
||||
import { api } from 'boot/axios';
|
||||
|
||||
export default {
|
||||
name: 'AppSelect',
|
||||
name: 'AppSelectBox',
|
||||
props: {
|
||||
name: String,
|
||||
type: String,
|
||||
@@ -113,7 +113,7 @@ import { finished } from 'stream';
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent,ref,reactive, computed } from 'vue';
|
||||
import { defineComponent,ref,reactive, computed, inject } from 'vue';
|
||||
import { INode,ConditionTree,GroupNode,ConditionNode, LogicalOperator,Operator,NodeType } from '../../types/Conditions';
|
||||
import ConditionObject from './ConditionObject.vue';
|
||||
export default defineComponent( {
|
||||
@@ -143,12 +143,9 @@ export default defineComponent( {
|
||||
return opts;
|
||||
});
|
||||
|
||||
const operator = inject('Operator')
|
||||
const operators =computed(()=>{
|
||||
const opts=[];
|
||||
for(const op in Operator){
|
||||
opts.push(Operator[op as keyof typeof Operator]);
|
||||
}
|
||||
return opts;
|
||||
return operator ? operator : Object.values(Operator);
|
||||
});
|
||||
const tree = reactive(props.conditionTree);
|
||||
|
||||
|
||||
@@ -11,7 +11,6 @@
|
||||
import { ref, onMounted, reactive, watchEffect } from 'vue'
|
||||
import { api } from 'boot/axios';
|
||||
|
||||
|
||||
export default {
|
||||
name: 'fieldSelect',
|
||||
props: {
|
||||
@@ -29,9 +28,8 @@ export default {
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
},
|
||||
fieldTypes:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
updateSelects: {
|
||||
type: Function
|
||||
},
|
||||
filter: String,
|
||||
},
|
||||
@@ -45,26 +43,29 @@ export default {
|
||||
const pageSetting = ref({
|
||||
sortBy: 'desc',
|
||||
descending: false,
|
||||
page: 1,
|
||||
page: 2,
|
||||
rowsPerPage: props.not_page ? 0 : 5
|
||||
// rowsNumber: xx if getting data from a server
|
||||
});
|
||||
const rows = reactive([]);
|
||||
const selected = ref(props.selectedFields && props.selectedFields.length>0?props.selectedFields:[]);
|
||||
|
||||
watchEffect(() => {
|
||||
props.updateSelects(selected);
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
const url = props.fieldTypes.includes('SPACER')?'api/v1/allfields':'api/v1/appfields';
|
||||
const res = await api.get(url, {
|
||||
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];
|
||||
if(props.fieldTypes.length===0 || props.fieldTypes.includes(fld.type)){
|
||||
rows.push({ name: fld.code, ...fld });
|
||||
}
|
||||
// rows.push({name:fields[key].label,code:fields[key].code,type:fields[key].type});
|
||||
rows.push({ name: fld.label, ...fld });
|
||||
});
|
||||
isLoaded.value = true;
|
||||
});
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
<AppSelect ref="appDg" name="アプリ" type="single" :filter="filter"></AppSelect>
|
||||
<AppSelectBox ref="appDg" name="アプリ" type="single" :filter="filter"></AppSelectBox>
|
||||
</ShowDialog>
|
||||
</template>
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
import { defineComponent,ref } from 'vue';
|
||||
import {AppInfo} from '../../types/ActionTypes'
|
||||
import ShowDialog from '../../components/ShowDialog.vue';
|
||||
import AppSelect from '../../components/AppSelect.vue';
|
||||
import AppSelectBox from '../../components/AppSelectBox.vue';
|
||||
import { useFlowEditorStore } from 'stores/flowEditor';
|
||||
import { useAuthStore } from 'src/stores/useAuthStore';
|
||||
export default defineComponent({
|
||||
@@ -47,7 +47,7 @@ export default defineComponent({
|
||||
"appSelected"
|
||||
],
|
||||
components:{
|
||||
AppSelect,
|
||||
AppSelectBox,
|
||||
ShowDialog
|
||||
},
|
||||
setup(props, context) {
|
||||
|
||||
@@ -3,11 +3,11 @@
|
||||
<q-tree :nodes="store.eventTree.screens" node-key="eventId" children-key="events" no-connectors
|
||||
v-model:expanded="store.expandedScreen" :dense="true" :ref="tree">
|
||||
<template v-slot:header-EVENT="prop">
|
||||
<div :ref="prop.node.eventId" class="row col items-center no-wrap event-node" @click="onSelected(prop.node)">
|
||||
<div :ref="prop.node.eventId" class="row col items-center no-wrap event-node">
|
||||
<q-icon v-if="prop.node.eventId" name="play_circle" :color="prop.node.hasFlow ? 'green' : 'grey'" size="16px"
|
||||
class="q-mr-sm">
|
||||
</q-icon>
|
||||
<div class="no-wrap"
|
||||
<div class="no-wrap" @click="onSelected(prop.node)"
|
||||
:class="selectedEvent && prop.node.eventId === selectedEvent.eventId ? 'selected-node' : ''">{{
|
||||
prop.node.label }}</div>
|
||||
<q-space></q-space>
|
||||
@@ -15,21 +15,25 @@
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:header-CHANGE="prop">
|
||||
<div class="row col items-start no-wrap event-node">
|
||||
<div class="no-wrap"
|
||||
:class="selectedEvent && prop.node.eventId === selectedEvent.eventId ? 'selected-node' : ''"
|
||||
>{{ prop.node.label }}</div>
|
||||
<div class="row col items-center no-wrap event-node">
|
||||
<div class="no-wrap">{{ prop.node.label }}</div>
|
||||
<q-space></q-space>
|
||||
<q-icon name="add_circle" color="primary" size="16px" class="q-mr-sm"
|
||||
@click="addChangeEvent(prop.node)"></q-icon>
|
||||
</div>
|
||||
</template>
|
||||
<template v-slot:header-DELETABLE="prop">
|
||||
<div class="row col items-start event-node" @click="onSelected(prop.node)">
|
||||
<q-icon v-if="prop.node.eventId" name="play_circle" :color="prop.node.hasFlow ? 'green' : 'grey'" size="16px" class="q-mr-sm" />
|
||||
<div class="no-wrap" :class="selectedEvent && prop.node.eventId === selectedEvent.eventId ? 'selected-node' : ''" >{{ prop.node.label }}</div>
|
||||
<q-space></q-space>
|
||||
<q-icon name="delete_forever" color="negative" size="16px" @click="deleteEvent(prop.node)"></q-icon>
|
||||
<div class="row col items-center event-node">
|
||||
<div class="row col items-center" @click="onSelected(prop.node)">
|
||||
<q-icon v-if="prop.node.eventId" name="play_circle" :color="prop.node.hasFlow ? 'green' : 'grey'" size="16px"
|
||||
class="q-mr-sm">
|
||||
</q-icon>
|
||||
<div>{{ prop.node.label }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<q-btn class="q-mr-sm delete-btn" flat fab-mini icon="delete_forever" padding="none" color="negative"
|
||||
@click="deleteEvent(prop.node)"></q-btn>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</q-tree>
|
||||
|
||||
@@ -18,119 +18,68 @@
|
||||
<q-separator />
|
||||
<q-card-section class="q-pa-none q-ma-none">
|
||||
<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>
|
||||
<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>
|
||||
</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>
|
||||
<!-- <q-separator /> -->
|
||||
</q-card-section>
|
||||
<q-card-section class="q-px-none q-py-xs" v-if="selectedField.fields && selectedField.fields.length===0">
|
||||
<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>
|
||||
<!-- <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="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 && selectedField.app">{{ 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"
|
||||
:appId="selectedField.app?.id" not_page :filter="fieldFilter" :selectedFields="selectedField.fields" :fieldTypes="fieldTypes"></field-select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="min-width: 45vw;" v-else>
|
||||
</div>
|
||||
|
||||
</show-dialog>
|
||||
|
||||
<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" ></AppSelect>
|
||||
<AppFieldSelectBox v-model:selectedField="selectedField" :selectType="selectType" />
|
||||
</show-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, watchEffect, computed } from 'vue';
|
||||
import { defineComponent, ref, watchEffect } from 'vue';
|
||||
import AppFieldSelectBox from '../AppFieldSelectBox.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
|
||||
|
||||
export interface IApp {
|
||||
id: string,
|
||||
name: string
|
||||
}
|
||||
interface IField {
|
||||
export interface IField {
|
||||
name: string,
|
||||
code: string,
|
||||
type: string
|
||||
}
|
||||
|
||||
interface IAppFields{
|
||||
app?:IApp,
|
||||
fields:IField[]
|
||||
export interface IAppFields {
|
||||
app?: IApp,
|
||||
fields: IField[]
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
inheritAttrs:false,
|
||||
inheritAttrs: false,
|
||||
name: 'AppFieldSelect',
|
||||
components: {
|
||||
ShowDialog,
|
||||
FieldSelect,
|
||||
AppSelect,
|
||||
AppFieldSelectBox
|
||||
},
|
||||
props: {
|
||||
displayName: {
|
||||
@@ -149,59 +98,30 @@ export default defineComponent({
|
||||
type: Object,
|
||||
default: null
|
||||
},
|
||||
selectType:{
|
||||
type:String,
|
||||
default:'single'
|
||||
},
|
||||
fieldTypes:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
selectType: {
|
||||
type: String,
|
||||
default: 'single'
|
||||
}
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const appDlg = ref();
|
||||
const fieldDlg = ref();
|
||||
const show = ref(false);
|
||||
const showSelectApp = ref(false);
|
||||
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 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 isSelected = computed(() => {
|
||||
return selectedField.value !== null && typeof selectedField.value === 'object' && ('app' in selectedField.value)
|
||||
});
|
||||
|
||||
const showDg = () => {
|
||||
show.value = true;
|
||||
};
|
||||
|
||||
const clear = () => {
|
||||
selectedField.value ={
|
||||
fields:[]
|
||||
} ;
|
||||
selectedField.value = {
|
||||
fields: []
|
||||
};
|
||||
}
|
||||
|
||||
const closeAppDlg = (val: string) => {
|
||||
if (val == 'OK') {
|
||||
selectedField.value.app = appDlg.value.selected[0];
|
||||
selectedField.value.fields=[];
|
||||
showSelectApp.value=false;
|
||||
}
|
||||
};
|
||||
|
||||
const closeFieldDialog=(val:string)=>{
|
||||
if (val == 'OK') {
|
||||
selectedField.value.fields = fieldDlg.value.selected;
|
||||
}
|
||||
};
|
||||
|
||||
const removeField=(index:number)=>{
|
||||
selectedField.value.fields.splice(index,1);
|
||||
const removeField = (index: number) => {
|
||||
selectedField.value.fields.splice(index, 1);
|
||||
}
|
||||
watchEffect(() => {
|
||||
emit('update:modelValue', selectedField.value);
|
||||
@@ -209,19 +129,11 @@ export default defineComponent({
|
||||
|
||||
return {
|
||||
store,
|
||||
appDlg,
|
||||
fieldDlg,
|
||||
show,
|
||||
showDg,
|
||||
closeAppDlg,
|
||||
closeFieldDialog,
|
||||
showDg: () => { show.value = true },
|
||||
selectedField,
|
||||
showSelectApp,
|
||||
isSelected,
|
||||
filter: ref(),
|
||||
clear,
|
||||
fieldFilter: ref(),
|
||||
removeField
|
||||
removeField,
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
93
frontend/src/components/right/AppSelect.vue
Normal file
93
frontend/src/components/right/AppSelect.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div>
|
||||
<q-field :label="displayName" labelColor="primary" stack-label>
|
||||
<template v-slot:control>
|
||||
<q-card flat class="full-width">
|
||||
<q-card-actions vertical>
|
||||
<q-btn color="grey-3" text-color="black" @click="() => { dgIsShow = true }">アプリ選択</q-btn>
|
||||
</q-card-actions>
|
||||
<q-card-section class="text-caption">
|
||||
<div v-if="selectedField.app.name">
|
||||
{{ selectedField.app.name }}
|
||||
</div>
|
||||
<div v-else>{{ placeholder }}</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</template>
|
||||
</q-field>
|
||||
</div>
|
||||
|
||||
<ShowDialog v-model:visible="dgIsShow" 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>
|
||||
<q-icon name="search" />
|
||||
</template>
|
||||
</q-input>
|
||||
</template>
|
||||
<AppSelectBox ref="appDg" name="アプリ" type="single" :filter="filter"></AppSelectBox>
|
||||
</ShowDialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent, reactive, ref, watchEffect } from 'vue';
|
||||
import ShowDialog from '../ShowDialog.vue';
|
||||
import AppSelectBox from '../AppSelectBox.vue';
|
||||
|
||||
|
||||
export default defineComponent({
|
||||
inheritAttrs: false,
|
||||
name: 'AppSelect',
|
||||
components: {
|
||||
ShowDialog,
|
||||
AppSelectBox
|
||||
},
|
||||
props: {
|
||||
context: {
|
||||
type: Array<Props>,
|
||||
default: '',
|
||||
},
|
||||
displayName: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const appDg = ref()
|
||||
const dgIsShow = ref(false)
|
||||
const selectedField = props.modelValue && props.modelValue.app ? props.modelValue : reactive({app:{}});
|
||||
const closeDg = (state: string) => {
|
||||
dgIsShow.value = false;
|
||||
if (state == 'OK') {
|
||||
selectedField.app = appDg.value.selected[0];
|
||||
}
|
||||
};
|
||||
|
||||
console.log(selectedField);
|
||||
|
||||
watchEffect(() => {
|
||||
emit('update:modelValue', selectedField);
|
||||
});
|
||||
|
||||
return {
|
||||
filter: ref(''),
|
||||
dgIsShow,
|
||||
appDg,
|
||||
closeDg,
|
||||
selectedField
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -4,7 +4,8 @@
|
||||
<template v-slot:control>
|
||||
<q-card flat class="full-width">
|
||||
<q-card-actions vertical>
|
||||
<q-btn color="grey-3" text-color="black" @click="showDg()">クリックで設定:{{ isSetted ? '設定済み' : '未設定' }}</q-btn>
|
||||
<q-btn color="grey-3" text-color="black" :disable="btnDisable" @click="showDg()">クリックで設定:{{ isSetted ?
|
||||
'設定済み' : '未設定' }}</q-btn>
|
||||
</q-card-actions>
|
||||
<q-card-section class="text-caption">
|
||||
<div v-if="!isSetted">{{ placeholder }}</div>
|
||||
@@ -20,7 +21,7 @@
|
||||
|
||||
|
||||
<script lang="ts">
|
||||
import { ConditionNode, ConditionTree, Operator } from 'app/src/types/Conditions';
|
||||
import { ConditionNode, ConditionTree, Operator, OperatorListItem } from 'app/src/types/Conditions';
|
||||
import { computed, defineComponent, provide, reactive, ref, watchEffect } from 'vue';
|
||||
import ConditionEditor from '../ConditionEditor/ConditionEditor.vue';
|
||||
|
||||
@@ -28,6 +29,10 @@ type Props = {
|
||||
props?: {
|
||||
name: string;
|
||||
modelValue?: {
|
||||
app: {
|
||||
id: string;
|
||||
name: string;
|
||||
},
|
||||
fields: {
|
||||
type: string;
|
||||
label: string;
|
||||
@@ -72,28 +77,51 @@ export default defineComponent({
|
||||
sourceType: {
|
||||
type: String,
|
||||
default: 'field'
|
||||
},
|
||||
onlySourceSelect: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
operatorList: {
|
||||
type: Array,
|
||||
}
|
||||
},
|
||||
|
||||
setup(props, { emit }) {
|
||||
const source = props.context.find(element => element?.props?.name === 'sources')
|
||||
|
||||
|
||||
if (source) {
|
||||
if(props.sourceType === 'field'){
|
||||
provide('sourceFields', computed( () => source.props?.modelValue?.fields ?? []));
|
||||
} else if(props.sourceType === 'app'){
|
||||
console.log('sourceApp', source.props?.modelValue);
|
||||
provide('sourceApp', computed( () => source.props?.modelValue?.app?.id));
|
||||
if (props.sourceType === 'field') {
|
||||
provide('sourceFields', computed(() => source.props?.modelValue?.fields ?? []));
|
||||
} else if (props.sourceType === 'app') {
|
||||
provide('sourceApp', computed(() => source.props?.modelValue?.app?.id));
|
||||
}
|
||||
}
|
||||
|
||||
provide('Operator', props.operatorList);
|
||||
|
||||
const btnDisable = computed(() => {
|
||||
const onlySourceSelect = props.onlySourceSelect;
|
||||
|
||||
if (!onlySourceSelect) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (props.sourceType === 'field') {
|
||||
return source?.props?.modelValue?.fields?.length ?? 0 > 0;
|
||||
} else if (props.sourceType === 'app') {
|
||||
return source?.props?.modelValue?.app?.id ? false : true
|
||||
}
|
||||
return true;
|
||||
})
|
||||
|
||||
const appDg = ref();
|
||||
const show = ref(false);
|
||||
const tree = reactive(new ConditionTree());
|
||||
if (props.modelValue && props.modelValue !== '') {
|
||||
tree.fromJson(props.modelValue);
|
||||
} else {
|
||||
const newNode = new ConditionNode({}, Operator.Equal, '', tree.root);
|
||||
const newNode = new ConditionNode({}, (props.operatorList && props.operatorList.length > 0) ? props.operatorList[0] as OperatorListItem : Operator.Equal, '', tree.root);
|
||||
tree.addNode(tree.root, newNode);
|
||||
}
|
||||
|
||||
@@ -109,13 +137,15 @@ export default defineComponent({
|
||||
|
||||
const onClosed = (val: string) => {
|
||||
if (val == 'OK') {
|
||||
const conditionJson = tree.toJson();
|
||||
isSetted.value = true;
|
||||
tree.setQuery(tree.buildConditionQueryString(tree.root));
|
||||
const conditionJson = tree.toJson();
|
||||
emit('update:modelValue', conditionJson);
|
||||
}
|
||||
};
|
||||
|
||||
watchEffect(() => {
|
||||
tree.setQuery(tree.buildConditionQueryString(tree.root));
|
||||
const conditionJson = tree.toJson();
|
||||
emit('update:modelValue', conditionJson);
|
||||
});
|
||||
@@ -127,7 +157,8 @@ export default defineComponent({
|
||||
showDg,
|
||||
onClosed,
|
||||
tree,
|
||||
conditionString
|
||||
conditionString,
|
||||
btnDisable
|
||||
};
|
||||
}
|
||||
});
|
||||
|
||||
202
frontend/src/components/right/DataMapping.vue
Normal file
202
frontend/src/components/right/DataMapping.vue
Normal file
@@ -0,0 +1,202 @@
|
||||
<template>
|
||||
<div>
|
||||
<q-field :label="displayName" labelColor="primary" stack-label>
|
||||
<template v-slot:control>
|
||||
<q-card flat class="full-width">
|
||||
<q-card-actions vertical>
|
||||
<q-btn color="grey-3" text-color="black" :disable="btnDisable"
|
||||
@click="() => { dgIsShow = true }">クリックで設定</q-btn>
|
||||
</q-card-actions>
|
||||
<q-card-section class="text-caption">
|
||||
<div v-if="mappingObjectsInputDisplay && mappingObjectsInputDisplay.length > 0">
|
||||
<div v-for="(item) in mappingObjectsInputDisplay" :key="item">{{ item }}</div>
|
||||
</div>
|
||||
<div v-else>{{ placeholder }}</div>
|
||||
</q-card-section>
|
||||
</q-card>
|
||||
</template>
|
||||
</q-field>
|
||||
<show-dialog v-model:visible="dgIsShow" name="データマッピング" @close="closeDg" min-width="50vw" min-height="60vh">
|
||||
|
||||
<div class="q-mx-md">
|
||||
<div class="row q-col-gutter-x-xs flex-center">
|
||||
<div class="col-5">
|
||||
<div class="q-mx-xs">From</div>
|
||||
</div>
|
||||
<div class="col-1">
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<div class="q-mx-xs">To</div>
|
||||
</div>
|
||||
<div class="col-1"><q-btn flat round dense icon="add" size="sm" @click="addMappingObject" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="q-my-sm" v-for="(item, index) in mappingProps" :key="item.id">
|
||||
<div class="row q-col-gutter-x-xs flex-center">
|
||||
<div class="col-5">
|
||||
<ConditionObject v-model="item.from" />
|
||||
</div>
|
||||
<div class="col-1">
|
||||
</div>
|
||||
<div class="col-5">
|
||||
<q-field v-model="item.vName" type="text" outlined dense>
|
||||
<template v-slot:append>
|
||||
<q-icon name="search" class="cursor-pointer"
|
||||
@click="() => { mappingProps[index].to.isDialogVisible = true }" />
|
||||
</template>
|
||||
<template v-slot:control>
|
||||
<div class="self-center full-width no-outline" tabindex="0"
|
||||
v-if="item.to.app?.name && item.to.fields?.length > 0 && item.to.fields[0].label">
|
||||
{{ `${item.to.app?.name} : ${item.to.fields[0].label}` }}
|
||||
</div>
|
||||
</template>
|
||||
</q-field>
|
||||
</div>
|
||||
<div class="col-1">
|
||||
<q-btn flat round dense icon="delete" size="sm" @click="() => deleteMappingObject(index)" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<show-dialog v-model:visible="mappingProps[index].to.isDialogVisible" name="フィールド一覧"
|
||||
@close="closeToDg" ref="fieldDlg">
|
||||
<FieldSelect v-if="onlySourceSelect" ref="fieldDlg" name="フィールド" :appId="sourceAppId" not_page
|
||||
:selectedFields="mappingProps[index].to.fields"
|
||||
:updateSelects="(fields) => { mappingProps[index].to.fields = fields; mappingProps[index].to.app = sourceApp }">
|
||||
</FieldSelect>
|
||||
<AppFieldSelectBox v-else v-model:selectedField="mappingProps[index].to" />
|
||||
</show-dialog>
|
||||
</div>
|
||||
</div>
|
||||
</show-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { v4 as uuidv4 } from 'uuid';
|
||||
import { computed, defineComponent, reactive, ref, watchEffect } from 'vue';
|
||||
import ConditionObject from '../ConditionEditor/ConditionObject.vue';
|
||||
import ShowDialog from '../ShowDialog.vue';
|
||||
import AppFieldSelectBox from '../AppFieldSelectBox.vue';
|
||||
import FieldSelect from '../FieldSelect.vue';
|
||||
import IAppFields from './AppFieldSelect.vue';
|
||||
|
||||
type Props = {
|
||||
props?: {
|
||||
name: string;
|
||||
modelValue?: {
|
||||
app: {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
type ValueType = {
|
||||
id: string;
|
||||
from: object;
|
||||
to: typeof IAppFields & {
|
||||
isDialogVisible: boolean;
|
||||
};
|
||||
}
|
||||
|
||||
const defaultMappingProp = () => ({ id: uuidv4(), to: { app: {}, fields: [], isDialogVisible: false } });
|
||||
|
||||
export default defineComponent({
|
||||
name: 'DataMapping',
|
||||
inheritAttrs: false,
|
||||
components: {
|
||||
ShowDialog,
|
||||
ConditionObject,
|
||||
AppFieldSelectBox,
|
||||
FieldSelect
|
||||
},
|
||||
props: {
|
||||
context: {
|
||||
type: Array<Props>,
|
||||
default: '',
|
||||
},
|
||||
displayName: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
modelValue: {
|
||||
type: Object as () => ValueType[],
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
onlySourceSelect: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
|
||||
setup(props, { emit }) {
|
||||
const closeDg = () => {
|
||||
emit('update:modelValue', mappingProps
|
||||
);
|
||||
}
|
||||
|
||||
const closeToDg = () => {
|
||||
emit('update:modelValue', mappingProps
|
||||
);
|
||||
}
|
||||
|
||||
const mappingProps: ValueType[] = props.modelValue
|
||||
? props.modelValue
|
||||
: reactive([defaultMappingProp()]);
|
||||
|
||||
|
||||
const deleteMappingObject = (index: number) => mappingProps.length === 1
|
||||
? mappingProps.splice(0, mappingProps.length, defaultMappingProp())
|
||||
: mappingProps.splice(index, 1);
|
||||
|
||||
const mappingObjectsInputDisplay = computed(() =>
|
||||
mappingProps ?
|
||||
mappingProps
|
||||
.filter(item => item.from?.name && item.to.fields?.length > 0)
|
||||
.map(item => {
|
||||
const name = typeof item.from?.name === 'string'
|
||||
? item.from.name
|
||||
: item.from?.name.name;
|
||||
return `[${name}] - (${item.to.app?.name} : ${item.to.fields[0].label})`;
|
||||
})
|
||||
: []
|
||||
);
|
||||
|
||||
const source = props.context.find(element => element?.props?.name === 'sources')
|
||||
|
||||
const sourceApp = computed(() => source?.props?.modelValue?.app);
|
||||
|
||||
const sourceAppId = computed(() => sourceApp.value?.id);
|
||||
|
||||
const btnDisable = computed(() => props.onlySourceSelect ? !(source?.props?.modelValue?.app?.id) : false);
|
||||
|
||||
//集計処理方法
|
||||
|
||||
watchEffect(() => {
|
||||
emit('update:modelValue', mappingProps);
|
||||
});
|
||||
return {
|
||||
uuidv4,
|
||||
dgIsShow: ref(false),
|
||||
closeDg,
|
||||
toDgIsShow: ref(false),
|
||||
closeToDg,
|
||||
mappingProps,
|
||||
addMappingObject: () => mappingProps.push(defaultMappingProp()),
|
||||
deleteMappingObject,
|
||||
mappingObjectsInputDisplay,
|
||||
sourceApp,
|
||||
sourceAppId,
|
||||
btnDisable
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="scss"></style>
|
||||
@@ -61,12 +61,12 @@ export default defineComponent({
|
||||
if(store.eventTree.findEventById(addEventId)){
|
||||
return;
|
||||
}
|
||||
customEvents.events.push({
|
||||
eventId: addEventId,
|
||||
label: displayName,
|
||||
parentId: customButtonId,
|
||||
header: 'DELETABLE'
|
||||
});
|
||||
customEvents.events.push(
|
||||
new kintoneEvent(
|
||||
displayName,
|
||||
addEventId,
|
||||
customButtonId)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -7,6 +7,9 @@
|
||||
{{ selectedField.name }}
|
||||
</q-chip>
|
||||
</template>
|
||||
<!-- <template v-slot:hint v-if="isSelected">
|
||||
<div> 項目コード:<q-chip size="sm" outline color="secondary" text-color="white">{{selectedField.code}}</q-chip></div>
|
||||
</template> -->
|
||||
<template v-slot:hint v-if="!isSelected">
|
||||
{{ placeholder }}
|
||||
</template>
|
||||
@@ -16,7 +19,7 @@
|
||||
</template>
|
||||
</q-field>
|
||||
<show-dialog v-model:visible="show" name="フィールド一覧" @close="closeDg" widht="400px">
|
||||
<field-select ref="appDg" name="フィールド" :type="selectType" :appId="store.appInfo?.appId" :fieldTypes="fieldTypes"></field-select>
|
||||
<field-select ref="appDg" name="フィールド" type="single" :appId="store.appInfo?.appId"></field-select>
|
||||
</show-dialog>
|
||||
</div>
|
||||
</template>
|
||||
@@ -51,14 +54,6 @@ export default defineComponent({
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
selectType:{
|
||||
type:String,
|
||||
default:'single'
|
||||
},
|
||||
fieldTypes:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
},
|
||||
hint: {
|
||||
type: String,
|
||||
default: '',
|
||||
|
||||
@@ -33,10 +33,6 @@ export default defineComponent({
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
fieldTypes:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
},
|
||||
hint: {
|
||||
type: String,
|
||||
default: '',
|
||||
|
||||
@@ -22,6 +22,8 @@ import EventSetter from '../right/EventSetter.vue';
|
||||
import ColorPicker from './ColorPicker.vue';
|
||||
import NumInput from './NumInput.vue';
|
||||
import DataProcessing from './DataProcessing.vue';
|
||||
import DataMapping from './DataMapping.vue';
|
||||
import AppSelect from './AppSelect.vue';
|
||||
import { IActionNode,IActionProperty,IProp } from 'src/types/ActionTypes';
|
||||
|
||||
export default defineComponent({
|
||||
@@ -37,7 +39,9 @@ export default defineComponent({
|
||||
EventSetter,
|
||||
ColorPicker,
|
||||
NumInput,
|
||||
DataProcessing
|
||||
DataProcessing,
|
||||
DataMapping,
|
||||
AppSelect
|
||||
},
|
||||
props: {
|
||||
nodeProps: {
|
||||
|
||||
@@ -29,7 +29,7 @@ export default defineComponent({
|
||||
default:'',
|
||||
},
|
||||
modelValue: {
|
||||
type: [Array,String],
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
<q-btn :label="model+'選択'" color="primary" @click="showDg()" />
|
||||
<show-dialog v-model:visible="show" :name="model" @close="closeDg" width="400px">
|
||||
<template v-if="model=='アプリ'">
|
||||
<app-select ref="appDg" :name="model" type="single"></app-select>
|
||||
<app-select-box ref="appDg" :name="model" type="single"></app-select-box>
|
||||
</template>
|
||||
<template v-if="model=='フィールド'">
|
||||
<field-select ref="appDg" :name="model" type="multiple" :appId="1"></field-select>
|
||||
@@ -42,7 +42,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import ShowDialog from 'components/ShowDialog.vue';
|
||||
import AppSelect from 'components/AppSelect.vue';
|
||||
import AppSelectBox from 'components/AppSelectBox.vue';
|
||||
import FieldSelect from 'components/FieldSelect.vue';
|
||||
import ActionSelect from 'components/ActionSelect.vue';
|
||||
import { ref } from 'vue'
|
||||
|
||||
@@ -113,19 +113,19 @@ export const useFlowEditorStore = defineStore('flowEditor', {
|
||||
},
|
||||
|
||||
|
||||
async deleteEvent(event: IKintoneEvent) {
|
||||
deleteEvent(event: IKintoneEvent) {
|
||||
const store = useFlowEditorStore();
|
||||
if (event.flowData) {
|
||||
const flow = event.flowData;
|
||||
if (flow.id !== '') {
|
||||
await flowCtrl.DeleteFlow(flow.id)
|
||||
if (this.flows) {
|
||||
this.flows = this.flows.filter((f) => f.id !== flow.id);
|
||||
}
|
||||
if (flow.id === '') {
|
||||
return;
|
||||
}
|
||||
flowCtrl.DeleteFlow(flow.id)
|
||||
eventTree.deleteEvent(event, store);
|
||||
}
|
||||
else {
|
||||
if(this.flows){
|
||||
this.flows = this.flows.filter((f) => f.id !== flow.id);
|
||||
}
|
||||
} else {
|
||||
eventTree.deleteEvent(event, store);
|
||||
}
|
||||
},
|
||||
|
||||
@@ -74,6 +74,11 @@ export class GroupNode implements INode {
|
||||
|
||||
}
|
||||
|
||||
export type OperatorListItem = {
|
||||
label: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
// 条件式ノード
|
||||
export class ConditionNode implements INode {
|
||||
index: number;
|
||||
@@ -83,13 +88,13 @@ export class ConditionNode implements INode {
|
||||
return this.parent.logicalOperator;
|
||||
};
|
||||
object: any; // 比較元
|
||||
operator: Operator; // 比較子
|
||||
operator: Operator | OperatorListItem; // 比較子
|
||||
value: any;
|
||||
get header():string{
|
||||
return 'generic';
|
||||
}
|
||||
|
||||
constructor(object: any, operator: Operator, value: any, parent: GroupNode) {
|
||||
constructor(object: any, operator: Operator | OperatorListItem, value: any, parent: GroupNode) {
|
||||
this.index=0;
|
||||
this.type = NodeType.Condition;
|
||||
this.object = object;
|
||||
@@ -113,10 +118,12 @@ export class ConditionNode implements INode {
|
||||
export class ConditionTree {
|
||||
root: GroupNode;
|
||||
maxIndex:number;
|
||||
queryString:string;
|
||||
|
||||
constructor() {
|
||||
this.maxIndex=0;
|
||||
this.root = new GroupNode(LogicalOperator.AND, null);
|
||||
this.queryString='';
|
||||
}
|
||||
|
||||
// ノード追加
|
||||
@@ -198,12 +205,49 @@ export class ConditionTree {
|
||||
if(value && typeof value ==='object' && ('label' in value)){
|
||||
value =condNode.value.label;
|
||||
}
|
||||
return `${typeof condNode.object.name === 'object' ? condNode.object.name.name : condNode.object.name} ${condNode.operator} '${value}'`;
|
||||
return `${typeof condNode.object.name === 'object' ? condNode.object.name.name : condNode.object.name} ${typeof condNode.operator === 'object' ? condNode.operator.label : condNode.operator} '${value}'`;
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
buildConditionQueryString(node:INode){
|
||||
if (node.type !== NodeType.Condition) {
|
||||
let conditionString = '';
|
||||
if(node.type !== NodeType.Root){
|
||||
conditionString = '(';
|
||||
}
|
||||
|
||||
const groupNode = node as GroupNode;
|
||||
for (let i = 0; i < groupNode.children.length; i++) {
|
||||
const childConditionString = this.buildConditionQueryString(groupNode.children[i]);
|
||||
if (childConditionString !== '') {
|
||||
conditionString += childConditionString;
|
||||
if (i < groupNode.children.length - 1) {
|
||||
conditionString += ` ${groupNode.logicalOperator.toLowerCase()} `;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if(node.type !== NodeType.Root){
|
||||
conditionString += ')';
|
||||
}
|
||||
return conditionString;
|
||||
} else {
|
||||
const condNode=node as ConditionNode;
|
||||
if (condNode.object && condNode.operator ) {
|
||||
let value=condNode.value;
|
||||
if(value && typeof value ==='object' && ('label' in value)){
|
||||
value =condNode.value.label;
|
||||
}
|
||||
return `${condNode.object.code} ${typeof condNode.operator === 'object' ? condNode.operator.value : condNode.operator} "${value}"`;
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param node ノード移動
|
||||
@@ -325,7 +369,7 @@ export class ConditionTree {
|
||||
}
|
||||
|
||||
toJson():string{
|
||||
return JSON.stringify(this.root, (key, value) => {
|
||||
return JSON.stringify({queryString :this.queryString, ...this.root}, (key, value) => {
|
||||
if (key === 'parent') {
|
||||
return value ? value.type : null;
|
||||
}
|
||||
@@ -333,4 +377,7 @@ export class ConditionTree {
|
||||
});
|
||||
}
|
||||
|
||||
setQuery(queryString:string){
|
||||
this.queryString=queryString;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -95,7 +95,10 @@ export class KintoneEventManager {
|
||||
const lastIndex = eventId.lastIndexOf('.');
|
||||
const groupId = eventId.substring(0, lastIndex);
|
||||
const eventNode = this.findEventById(groupId);
|
||||
if (eventNode && (eventNode.header === 'EVENTGROUP' || eventNode.header === 'CHANGE')) {
|
||||
if (
|
||||
eventNode &&
|
||||
(eventNode.header === 'EVENTGROUP' || eventNode.header === 'CHANGE')
|
||||
) {
|
||||
const groupEvent = eventNode as kintoneEventGroup;
|
||||
|
||||
const newEvent = {
|
||||
|
||||
6
node_modules/.package-lock.json
generated
vendored
6
node_modules/.package-lock.json
generated
vendored
@@ -1,6 +0,0 @@
|
||||
{
|
||||
"name": "App Builder for kintone",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {}
|
||||
}
|
||||
10
node_modules/.yarn-integrity
generated
vendored
10
node_modules/.yarn-integrity
generated
vendored
@@ -1,10 +0,0 @@
|
||||
{
|
||||
"systemParams": "win32-x64-115",
|
||||
"modulesFolders": [],
|
||||
"flags": [],
|
||||
"linkedModules": [],
|
||||
"topLevelPatterns": [],
|
||||
"lockfileEntries": {},
|
||||
"files": [],
|
||||
"artifacts": {}
|
||||
}
|
||||
2
plugin/kintone-addins/.env.dev
Normal file
2
plugin/kintone-addins/.env.dev
Normal file
@@ -0,0 +1,2 @@
|
||||
VITE_SOURCE_MAP = inline
|
||||
VITE_PORT = 4173
|
||||
2
plugin/kintone-addins/.env.production
Normal file
2
plugin/kintone-addins/.env.production
Normal file
@@ -0,0 +1,2 @@
|
||||
VITE_SOURCE_MAP = false
|
||||
VITE_PORT = 4173
|
||||
16
plugin/kintone-addins/package-lock.json
generated
16
plugin/kintone-addins/package-lock.json
generated
@@ -8,8 +8,7 @@
|
||||
"name": "kintone-addins",
|
||||
"version": "0.0.0",
|
||||
"dependencies": {
|
||||
"jquery": "^3.7.1",
|
||||
"yarn": "^1.22.22"
|
||||
"jquery": "^3.7.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/jquery": "^3.5.24",
|
||||
@@ -796,19 +795,6 @@
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/yarn": {
|
||||
"version": "1.22.22",
|
||||
"resolved": "https://registry.npmjs.org/yarn/-/yarn-1.22.22.tgz",
|
||||
"integrity": "sha512-prL3kGtyG7o9Z9Sv8IPfBNrWTDmXB4Qbes8A9rEzt6wkJV8mUvoirjU0Mp3GGAU06Y0XQyA3/2/RQFVuK7MTfg==",
|
||||
"hasInstallScript": true,
|
||||
"bin": {
|
||||
"yarn": "bin/yarn.js",
|
||||
"yarnpkg": "bin/yarn.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,25 +4,30 @@
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "tsc && set \"SOURCE_MAP=true\" && vite build && vite preview",
|
||||
"build": "tsc && vite build && xcopy dist\\*.js ..\\..\\backend\\Temp\\ /E /I /Y",
|
||||
"build:linux": "tsc && vite build && cp -ur dist/*.js ../../backend/Temp",
|
||||
"build:dev": "tsc && set \"SOURCE_MAP=true\" && vite build && xcopy dist\\*.js ..\\..\\backend\\Temp\\ /E /I /Y",
|
||||
"preview": "vite preview",
|
||||
"ngrok": "ngrok http http://localhost:4173/",
|
||||
"vite": "vite dev"
|
||||
"dev": "run-p watch server ngrok",
|
||||
"watch": "vite build --watch --mode dev",
|
||||
"server": "vite dev --mode dev",
|
||||
"ngrok": "ngrok http 4173",
|
||||
"build": "run-s b:production copy:windows",
|
||||
"build:dev": "run-s b:dev copy:windows",
|
||||
"build:linux": "run-s b:production copy:linux",
|
||||
"build:linux-dev": "run-s b:dev copy:linux",
|
||||
"b:production": "vite build --mode production",
|
||||
"b:dev": "vite build --mode dev",
|
||||
"copy:windows": "xcopy dist\\*.js ..\\..\\backend\\Temp\\ /E /I /Y",
|
||||
"copy:linux": "cp -ur dist/*.js ../../backend/Temp"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/jquery": "^3.5.24",
|
||||
"@types/node": "^20.8.9",
|
||||
"npm-run-all2": "^6.2.0",
|
||||
"sass": "^1.69.5",
|
||||
"typescript": "^5.0.2",
|
||||
"vite": "^4.4.5",
|
||||
"vite-plugin-checker": "^0.6.4"
|
||||
"vite-plugin-checker": "^0.6.4",
|
||||
"vite-plugin-lib-inject-css": "^2.1.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"jquery": "^3.7.1",
|
||||
"vite-plugin-css-injected-by-js": "^3.5.1",
|
||||
"yarn": "^1.22.22"
|
||||
"jquery": "^3.7.1"
|
||||
}
|
||||
}
|
||||
|
||||
24
plugin/kintone-addins/src/actions/auto-numbering.css
Normal file
24
plugin/kintone-addins/src/actions/auto-numbering.css
Normal file
@@ -0,0 +1,24 @@
|
||||
.alc-button-normal {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
padding: 0 16px;
|
||||
margin-left: 16px;
|
||||
margin-top: 8px;
|
||||
min-width: 100px;
|
||||
outline: none;
|
||||
border: 1px solid #e3e7e8;
|
||||
background-color: #f7f9fa;
|
||||
box-shadow: 1px 1px 1px #fff inset;
|
||||
color: #3498db;
|
||||
text-align: center;
|
||||
line-height: 32px;
|
||||
}
|
||||
.alc-button-normal:hover {
|
||||
background-color: #c8d6dd;
|
||||
box-shadow: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.alc-button-normal:active {
|
||||
color: #f7f9fa;
|
||||
background-color: #54b8eb;
|
||||
}
|
||||
@@ -2,6 +2,7 @@
|
||||
import { actionAddins } from ".";
|
||||
import { IField, IAction,IActionResult, IActionNode, IActionProperty, IContext } from "../types/ActionTypes";
|
||||
import { Formatter } from "../util/format";
|
||||
import "./auto-numbering.css";
|
||||
|
||||
declare global {
|
||||
interface Window { $format: any; }
|
||||
|
||||
@@ -1,24 +0,0 @@
|
||||
.alc-button-normal {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
padding: 0 16px;
|
||||
margin-left: 16px;
|
||||
margin-top: 8px;
|
||||
min-width: 100px;
|
||||
outline: none;
|
||||
border: 1px solid #e3e7e8;
|
||||
background-color: #f7f9fa;
|
||||
box-shadow: 1px 1px 1px #fff inset;
|
||||
color: #3498db;
|
||||
text-align: center;
|
||||
line-height: 32px;
|
||||
}
|
||||
.alc-button-normal:hover {
|
||||
background-color: #c8d6dd;
|
||||
box-shadow: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.alc-button-normal:active {
|
||||
color: #f7f9fa;
|
||||
background-color: #54b8eb;
|
||||
}
|
||||
@@ -10,18 +10,12 @@ import "./button-add.css";
|
||||
interface IButtonAddProps {
|
||||
//ボタン表示名
|
||||
buttonName: string;
|
||||
space?:ISpace;
|
||||
//配置位置
|
||||
position: string;
|
||||
//イベント名
|
||||
eventName:string
|
||||
}
|
||||
|
||||
interface ISpace{
|
||||
type:string,
|
||||
elementId:string
|
||||
}
|
||||
|
||||
export class ButtonAddAction implements IAction {
|
||||
name: string;
|
||||
actionProps: IActionProperty[];
|
||||
@@ -55,19 +49,20 @@ export class ButtonAddAction implements IAction {
|
||||
}
|
||||
this.props = actionNode.ActionValue as IButtonAddProps;
|
||||
//ボタンを配置する
|
||||
let buttonSpace;
|
||||
if(this.props.space && this.props.space.elementId){
|
||||
buttonSpace = kintone.app.record.getSpaceElement(this.props.space.elementId);
|
||||
}else{
|
||||
buttonSpace = kintone.app.record.getHeaderMenuSpaceElement();
|
||||
const menuSpace = kintone.app.record.getHeaderMenuSpaceElement();
|
||||
if(!menuSpace) return result;
|
||||
if($("style#alc-button-add").length===0){
|
||||
const css=`
|
||||
`;
|
||||
const style = $("<style id='alc-button-add'>/<style>");
|
||||
style.text(css);
|
||||
$("head").append(style);
|
||||
}
|
||||
if(!buttonSpace) return result;
|
||||
|
||||
const button =$(`<button id='${this.props.eventName}' class='alc-button-normal' >${this.props.buttonName}</button>`);
|
||||
if(this.props.position==="一番左に追加する"){
|
||||
$(buttonSpace).prepend(button);
|
||||
$(menuSpace).prepend(button);
|
||||
}else{
|
||||
$(buttonSpace).append(button);
|
||||
$(menuSpace).append(button);
|
||||
}
|
||||
const clickEventName = `${event.type}.customButtonClick.${this.props.eventName}`;
|
||||
button.on("click",()=>{
|
||||
|
||||
@@ -1,75 +0,0 @@
|
||||
import { actionAddins } from ".";
|
||||
import { IAction,IActionResult, IActionNode, IActionProperty, IField} from "../types/ActionTypes";
|
||||
/**
|
||||
* アクションの属性定義
|
||||
*/
|
||||
interface IStrCountCheckProps{
|
||||
field:IField;//チェックするフィールドの対象
|
||||
message:string;//エラーメッセージ
|
||||
maxLength:number;//
|
||||
}
|
||||
/**
|
||||
* 正規表現チェックアクション
|
||||
*/
|
||||
export class StrCountCheckAciton implements IAction{
|
||||
name: string;
|
||||
actionProps: IActionProperty[];
|
||||
props:IStrCountCheckProps;
|
||||
constructor(){
|
||||
this.name="文字数チェック";
|
||||
this.actionProps=[];
|
||||
this.props={
|
||||
field:{code:''},
|
||||
message:'',
|
||||
maxLength:0
|
||||
}
|
||||
//アクションを登録する
|
||||
this.register();
|
||||
}
|
||||
/**
|
||||
* アクションの実行を呼び出す
|
||||
* @param actionNode
|
||||
* @param event
|
||||
* @returns
|
||||
*/
|
||||
async process(actionNode:IActionNode,event:any):Promise<IActionResult> {
|
||||
let result={
|
||||
canNext:true,
|
||||
result:false
|
||||
};
|
||||
try{
|
||||
//属性設定を取得する
|
||||
this.actionProps=actionNode.actionProps;
|
||||
if (!('field' in actionNode.ActionValue) && !('message' in actionNode.ActionValue) && !('strExpression'in actionNode.ActionValue)) {
|
||||
return result
|
||||
}
|
||||
|
||||
this.props = actionNode.ActionValue as IStrCountCheckProps;
|
||||
//条件式の計算結果を取得
|
||||
const record = event.record;
|
||||
const value = record[this.props.field.code].value;
|
||||
const maxLength = this.props.maxLength;
|
||||
if(value === undefined || value === '' ){
|
||||
return result;
|
||||
}else if(maxLength < value.length){
|
||||
record[this.props.field.code].error = this.props.message;
|
||||
}else{
|
||||
result= {
|
||||
canNext:true,
|
||||
result:true
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}catch(error){
|
||||
event.error=error;
|
||||
console.error(error);
|
||||
result.canNext=false;
|
||||
return result;
|
||||
}
|
||||
};
|
||||
register(): void {
|
||||
actionAddins[this.name]=this;
|
||||
}
|
||||
|
||||
}
|
||||
new StrCountCheckAciton();
|
||||
182
plugin/kintone-addins/src/actions/data-mapping.ts
Normal file
182
plugin/kintone-addins/src/actions/data-mapping.ts
Normal file
@@ -0,0 +1,182 @@
|
||||
import {
|
||||
IAction,
|
||||
IActionResult,
|
||||
IActionNode,
|
||||
IActionProperty,
|
||||
IContext,
|
||||
} from "../types/ActionTypes";
|
||||
import { actionAddins } from ".";
|
||||
|
||||
export type IApp = {
|
||||
id: string;
|
||||
name: string;
|
||||
};
|
||||
export type IField = {
|
||||
name: string;
|
||||
code: string;
|
||||
type: string;
|
||||
};
|
||||
|
||||
export type IAppFields = {
|
||||
app?: IApp;
|
||||
fields: IField[];
|
||||
};
|
||||
|
||||
type ValueType = {
|
||||
id: string;
|
||||
from: {
|
||||
objectType: "variable" | "field";
|
||||
name: { name: string };
|
||||
code: string;
|
||||
};
|
||||
to: IAppFields & {
|
||||
isDialogVisible: boolean;
|
||||
};
|
||||
};
|
||||
|
||||
type Props = { app: IApp; field: ValueType[] };
|
||||
|
||||
export class DataMappingAction implements IAction {
|
||||
name: string;
|
||||
actionProps: IActionProperty[];
|
||||
dataMappingProps: Props;
|
||||
constructor() {
|
||||
this.name = "DataMapping";
|
||||
this.actionProps = [];
|
||||
this.dataMappingProps = {} as Props;
|
||||
this.register();
|
||||
}
|
||||
|
||||
async process(
|
||||
prop: IActionNode,
|
||||
event: any,
|
||||
context: IContext
|
||||
): Promise<IActionResult> {
|
||||
this.initActionProps(prop);
|
||||
this.initTypedActionProps();
|
||||
let result = {
|
||||
canNext: true,
|
||||
result: "",
|
||||
} as IActionResult;
|
||||
try {
|
||||
for (const item of this.dataMappingProps.field) {
|
||||
if (item.from.objectType === "variable") {
|
||||
if (
|
||||
item.from.name.name &&
|
||||
item.to.app &&
|
||||
item.to.fields &&
|
||||
item.to.fields.length > 0
|
||||
) {
|
||||
const value = getValueByPath(
|
||||
context.variables,
|
||||
item.from.name.name
|
||||
);
|
||||
if (value) {
|
||||
await kintone.api(
|
||||
kintone.api.url("/k/v1/record.json", true),
|
||||
"POST",
|
||||
{
|
||||
app: item.to.app.id,
|
||||
record: {
|
||||
[item.to.fields[0].code]: {
|
||||
value: value,
|
||||
},
|
||||
},
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
} else if (item.from.objectType === "field") {
|
||||
if (
|
||||
item.from.code &&
|
||||
item.to.app &&
|
||||
item.to.fields &&
|
||||
item.to.fields.length > 0
|
||||
) {
|
||||
const value = await selectData(
|
||||
item.to.app.id,
|
||||
item.to.fields[0].code
|
||||
);
|
||||
if (value && value.type === context.record[item.from.code].type) {
|
||||
await kintone.api(
|
||||
kintone.api.url("/k/v1/records.json", true),
|
||||
"POST",
|
||||
{
|
||||
app: item.to.app.id,
|
||||
records: value.value.map((v) => ({
|
||||
[item.to.fields[0].code]: {
|
||||
value: v,
|
||||
},
|
||||
})),
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("DataMappingAction error", error);
|
||||
result.canNext = false;
|
||||
}
|
||||
console.log("dataMappingProps", this.dataMappingProps);
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
private initActionProps(nodes: IActionNode) {
|
||||
this.actionProps = nodes.actionProps;
|
||||
}
|
||||
private initTypedActionProps() {
|
||||
for (const action of this.actionProps) {
|
||||
if (action.component === "DataMapping") {
|
||||
this.dataMappingProps.field = action.props.modelValue as ValueType[];
|
||||
} else if (action.component === "AppSelect") {
|
||||
this.dataMappingProps.app = action.props.modelValue.app as IApp;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
register(): void {
|
||||
actionAddins[this.name] = this;
|
||||
}
|
||||
}
|
||||
|
||||
new DataMappingAction();
|
||||
|
||||
const getValueByPath = (obj: any, path: string) => {
|
||||
return path.split(".").reduce((o, k) => (o || {})[k], obj);
|
||||
};
|
||||
|
||||
type Resp = { records: RespRecordType[] };
|
||||
|
||||
type RespRecordType = {
|
||||
[key: string]: {
|
||||
type: string;
|
||||
value: any;
|
||||
};
|
||||
};
|
||||
|
||||
type Result = {
|
||||
type: string;
|
||||
value: any[];
|
||||
};
|
||||
|
||||
const selectData = async (appid: string, field: string): Promise<Result> => {
|
||||
return kintone
|
||||
.api(kintone.api.url("/k/v1/records", true), "GET", {
|
||||
app: appid ?? kintone.app.getId(),
|
||||
fields: [field],
|
||||
})
|
||||
.then((resp: Resp) => {
|
||||
const result: Result = { type: "", value: [] };
|
||||
resp.records.forEach((element) => {
|
||||
for (const [key, value] of Object.entries(element)) {
|
||||
if (result.type === "") {
|
||||
result.type = value.type;
|
||||
}
|
||||
result.value.push(value.value);
|
||||
}
|
||||
});
|
||||
return result;
|
||||
});
|
||||
};
|
||||
280
plugin/kintone-addins/src/actions/data-processing.ts
Normal file
280
plugin/kintone-addins/src/actions/data-processing.ts
Normal file
@@ -0,0 +1,280 @@
|
||||
import {
|
||||
IAction,
|
||||
IActionResult,
|
||||
IActionNode,
|
||||
IActionProperty,
|
||||
IContext,
|
||||
} from "../types/ActionTypes";
|
||||
import { actionAddins } from ".";
|
||||
|
||||
|
||||
type DataProcessingProps = {
|
||||
app: {
|
||||
id: string;
|
||||
name: string;
|
||||
};
|
||||
conditionsQuery: string;
|
||||
propcessing: {
|
||||
varRootName: string;
|
||||
fields: Field[];
|
||||
};
|
||||
};
|
||||
|
||||
type Field = {
|
||||
name: string;
|
||||
code: string;
|
||||
type: string;
|
||||
varName: string;
|
||||
operator: string;
|
||||
};
|
||||
|
||||
export class DataProcessingAction implements IAction {
|
||||
name: string;
|
||||
actionProps: IActionProperty[];
|
||||
dataProcessingProps: DataProcessingProps | null;
|
||||
constructor() {
|
||||
this.name = "データ処理";
|
||||
this.actionProps = [];
|
||||
this.dataProcessingProps = null;
|
||||
this.register();
|
||||
}
|
||||
|
||||
async process(
|
||||
nodes: IActionNode,event: any,context: IContext
|
||||
): Promise<IActionResult> {
|
||||
this.initActionProps(nodes);
|
||||
this.initTypedActionProps();
|
||||
let result = {
|
||||
canNext: true,
|
||||
result: "",
|
||||
} as IActionResult;
|
||||
try {
|
||||
if (!this.dataProcessingProps) {
|
||||
return result;
|
||||
}
|
||||
|
||||
const data = await selectData(this.dataProcessingProps.conditionsQuery);
|
||||
console.log("data ", data);
|
||||
|
||||
context.variables[this.dataProcessingProps.propcessing.varRootName] =
|
||||
this.dataProcessingProps.propcessing.fields.reduce((acc, f) => {
|
||||
const v = calc(f, data);
|
||||
if (v) {
|
||||
acc[f.varName] = calc(f, data);
|
||||
}
|
||||
return acc;
|
||||
}, {} as Var);
|
||||
|
||||
console.log("context ", context);
|
||||
return result;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
event.error=error;
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
||||
register(): void {
|
||||
actionAddins[this.name] = this;
|
||||
}
|
||||
|
||||
private initActionProps(nodes: IActionNode) {
|
||||
this.actionProps = nodes.actionProps;
|
||||
}
|
||||
|
||||
private initTypedActionProps() {
|
||||
this.dataProcessingProps = {
|
||||
app: {
|
||||
id: "",
|
||||
name: "",
|
||||
},
|
||||
conditionsQuery: "",
|
||||
propcessing: {
|
||||
varRootName: "",
|
||||
fields: [],
|
||||
},
|
||||
};
|
||||
for (const action of this.actionProps) {
|
||||
if (action.component === "AppFieldSelect") {
|
||||
this.dataProcessingProps.app.id = action.props.modelValue.app.id;
|
||||
this.dataProcessingProps.app.name = action.props.modelValue.app.name;
|
||||
} else if (action.component === "DataProcessing") {
|
||||
this.dataProcessingProps.propcessing.varRootName =
|
||||
action.props.modelValue.name;
|
||||
for (const f of action.props.modelValue.vars) {
|
||||
this.dataProcessingProps.propcessing.fields.push({
|
||||
name: f.field.name,
|
||||
code: f.field.code,
|
||||
type: f.field.type,
|
||||
varName: f.vName,
|
||||
operator: f.logicalOperator.operator,
|
||||
});
|
||||
}
|
||||
} else if (action.component === "ConditionInput") {
|
||||
this.dataProcessingProps.conditionsQuery = JSON.parse(
|
||||
action.props.modelValue
|
||||
).queryString;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
new DataProcessingAction();
|
||||
|
||||
const selectData = async (query?: string) => {
|
||||
return kintone
|
||||
.api(kintone.api.url("/k/v1/records", true), "GET", {
|
||||
app: kintone.app.getId(),
|
||||
query: query,
|
||||
})
|
||||
.then((resp: Resp) => {
|
||||
const result: Result = {};
|
||||
resp.records.forEach((element) => {
|
||||
for (const [key, value] of Object.entries(element)) {
|
||||
if (!result[key]) {
|
||||
result[key] = { type: value.type, value: [] };
|
||||
}
|
||||
result[key].value.push(value.value);
|
||||
}
|
||||
});
|
||||
return result;
|
||||
});
|
||||
};
|
||||
|
||||
type Resp = { records: RespRecordType[] };
|
||||
|
||||
type RespRecordType = {
|
||||
[key: string]: {
|
||||
type: string;
|
||||
value: any;
|
||||
};
|
||||
};
|
||||
|
||||
type Result = {
|
||||
[key: string]: {
|
||||
type: string;
|
||||
value: any[];
|
||||
};
|
||||
};
|
||||
|
||||
type Var = {
|
||||
[key: string]: any;
|
||||
};
|
||||
|
||||
const ERROR_TYPE = "ERROR_TYPE";
|
||||
|
||||
const calc = (field: Field, result: Result) => {
|
||||
const type = typeCheck(field.type);
|
||||
if (!type) {
|
||||
return ERROR_TYPE;
|
||||
}
|
||||
|
||||
const fun =
|
||||
calcFunc[`${type}_${Operator[field.operator as keyof typeof Operator]}`];
|
||||
if (!fun) {
|
||||
return ERROR_TYPE;
|
||||
}
|
||||
const values = result[field.code].value;
|
||||
if (!values) {
|
||||
return null;
|
||||
}
|
||||
return fun(values);
|
||||
};
|
||||
|
||||
const typeCheck = (type: string) => {
|
||||
switch (type) {
|
||||
case "RECORD_NUMBER":
|
||||
case "NUMBER":
|
||||
return CalcType.NUMBER;
|
||||
case "SINGLE_LINE_TEXT":
|
||||
case "MULTI_LINE_TEXT":
|
||||
case "RICH_TEXT":
|
||||
return CalcType.STRING;
|
||||
case "DATE":
|
||||
return CalcType.DATE;
|
||||
case "TIME":
|
||||
return CalcType.TIME;
|
||||
case "DATETIME":
|
||||
case "UPDATED_TIME":
|
||||
return CalcType.DATETIME;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
enum Operator {
|
||||
SUM = "SUM",
|
||||
AVG = "AVG",
|
||||
MAX = "MAX",
|
||||
MIN = "MIN",
|
||||
COUNT = "COUNT",
|
||||
FIRST = "FIRST"
|
||||
}
|
||||
|
||||
enum CalcType {
|
||||
NUMBER = "number",
|
||||
STRING = "string",
|
||||
DATE = "date",
|
||||
TIME = "time",
|
||||
DATETIME = "datetime",
|
||||
}
|
||||
|
||||
const calcFunc: Record<string, (value: string[]) => string | null> = {
|
||||
[`${CalcType.NUMBER}_${Operator.COUNT}`]: (value: string[]) =>
|
||||
value.length.toString(),
|
||||
[`${CalcType.STRING}_${Operator.COUNT}`]: (value: string[]) =>
|
||||
value.length.toString(),
|
||||
[`${CalcType.DATE}_${Operator.COUNT}`]: (value: string[]) =>
|
||||
value.length.toString(),
|
||||
[`${CalcType.TIME}_${Operator.COUNT}`]: (value: string[]) =>
|
||||
value.length.toString(),
|
||||
[`${CalcType.DATETIME}_${Operator.COUNT}`]: (value: string[]) =>
|
||||
value.length.toString(),
|
||||
|
||||
[`${CalcType.NUMBER}_${Operator.SUM}`]: (value: string[]) =>
|
||||
value.reduce((acc, v) => acc + Number(v), 0).toString(),
|
||||
[`${CalcType.NUMBER}_${Operator.AVG}`]: (value: string[]) =>
|
||||
(value.reduce((acc, v) => acc + Number(v), 0) / value.length).toString(),
|
||||
[`${CalcType.NUMBER}_${Operator.MAX}`]: (value: string[]) =>
|
||||
Math.max(...value.map(Number)).toString(),
|
||||
[`${CalcType.NUMBER}_${Operator.MIN}`]: (value: string[]) =>
|
||||
Math.min(...value.map(Number)).toString(),
|
||||
|
||||
[`${CalcType.STRING}_${Operator.SUM}`]: (value: string[]) => value.join(" "),
|
||||
|
||||
[`${CalcType.DATE}_${Operator.MAX}`]: (value: string[]) =>
|
||||
value.reduce((maxDate, currentDate) =>
|
||||
maxDate > currentDate ? maxDate : currentDate
|
||||
),
|
||||
|
||||
[`${CalcType.DATE}_${Operator.MIN}`]: (value: string[]) =>
|
||||
value.reduce((minDate, currentDate) =>
|
||||
minDate < currentDate ? minDate : currentDate
|
||||
),
|
||||
|
||||
[`${CalcType.TIME}_${Operator.MAX}`]: (value: string[]) =>
|
||||
value.reduce((maxTime, currentTime) =>
|
||||
maxTime > currentTime ? maxTime : currentTime
|
||||
),
|
||||
[`${CalcType.TIME}_${Operator.MIN}`]: (value: string[]) =>
|
||||
value.reduce((minTime, currentTime) =>
|
||||
minTime < currentTime ? minTime : currentTime
|
||||
),
|
||||
|
||||
[`${CalcType.DATETIME}_${Operator.MAX}`]: (value: string[]) =>
|
||||
value.reduce((maxDateTime, currentDateTime) =>
|
||||
new Date(maxDateTime) > new Date(currentDateTime)
|
||||
? maxDateTime
|
||||
: currentDateTime
|
||||
),
|
||||
|
||||
[`${CalcType.DATETIME}_${Operator.MIN}`]: (value: string[]) =>
|
||||
value.reduce((minDateTime, currentDateTime) =>
|
||||
new Date(minDateTime) < new Date(currentDateTime)
|
||||
? minDateTime
|
||||
: currentDateTime
|
||||
),
|
||||
[`${CalcType.STRING}_${Operator.FIRST}`]:(value: string[])=>{
|
||||
return value[0];
|
||||
}
|
||||
};
|
||||
@@ -1,66 +0,0 @@
|
||||
import { actionAddins } from ".";
|
||||
import { IAction, IActionResult, IActionNode, IActionProperty, IField ,IContext} from "../types/ActionTypes";
|
||||
/**
|
||||
* アクションの属性定義
|
||||
*/
|
||||
interface IDatetimeGetterProps {
|
||||
/**変数の名前 */
|
||||
verName:string;
|
||||
}
|
||||
/**
|
||||
* 現在日時を取得するアクション
|
||||
*/
|
||||
export class DatetimeGetterAction implements IAction {
|
||||
name: string;
|
||||
actionProps: IActionProperty[];
|
||||
props: IDatetimeGetterProps;
|
||||
constructor() {
|
||||
this.name = "現在日時";
|
||||
this.actionProps = [];
|
||||
this.props = {
|
||||
verName:''
|
||||
}
|
||||
this.register();
|
||||
}
|
||||
/**
|
||||
* アクションの実行を呼び出す
|
||||
* @param actionNode
|
||||
* @param event
|
||||
* @returns
|
||||
*/
|
||||
async process(actionNode: IActionNode, event: any,context:IContext): Promise<IActionResult> {
|
||||
let result = {
|
||||
canNext: true,
|
||||
result: false
|
||||
};
|
||||
|
||||
try {
|
||||
//属性設定を取得する
|
||||
this.actionProps = actionNode.actionProps;
|
||||
|
||||
if (!('verName' in actionNode.ActionValue) ) {
|
||||
return result
|
||||
}
|
||||
this.props = actionNode.ActionValue as IDatetimeGetterProps;
|
||||
|
||||
let today = new Date();
|
||||
|
||||
if(this.props.verName){
|
||||
context.variables[this.props.verName]=today.toISOString();
|
||||
}
|
||||
|
||||
return result;
|
||||
|
||||
} catch (error) {
|
||||
event.error = error;
|
||||
console.error(error);
|
||||
result.canNext = false;
|
||||
return result;
|
||||
}
|
||||
};
|
||||
register(): void {
|
||||
actionAddins[this.name] = this;
|
||||
}
|
||||
|
||||
}
|
||||
new DatetimeGetterAction();
|
||||
@@ -56,8 +56,8 @@ export class FieldShownAction implements IAction{
|
||||
}
|
||||
}
|
||||
result= {
|
||||
canNext:true,
|
||||
result:true
|
||||
canNext:true,
|
||||
result:true
|
||||
}
|
||||
return result;
|
||||
}catch(error){
|
||||
@@ -69,9 +69,9 @@ export class FieldShownAction implements IAction{
|
||||
|
||||
}
|
||||
/**
|
||||
*
|
||||
*
|
||||
* @param context 条件式を実行する
|
||||
* @returns
|
||||
* @returns
|
||||
*/
|
||||
getConditionResult(context:any):boolean{
|
||||
const tree =this.getCondition(this.props.condition);
|
||||
@@ -84,7 +84,7 @@ export class FieldShownAction implements IAction{
|
||||
|
||||
/**
|
||||
* @param condition 条件式ツリーを取得する
|
||||
* @returns
|
||||
* @returns
|
||||
*/
|
||||
getCondition(condition:string):ConditionTree|null{
|
||||
try{
|
||||
@@ -93,7 +93,7 @@ export class FieldShownAction implements IAction{
|
||||
if(tree.getConditions(tree.root).length>0){
|
||||
return tree;
|
||||
}else{
|
||||
return null;
|
||||
return null;
|
||||
}
|
||||
}catch(error){
|
||||
return null;
|
||||
@@ -103,5 +103,6 @@ export class FieldShownAction implements IAction{
|
||||
register(): void {
|
||||
actionAddins[this.name]=this;
|
||||
}
|
||||
|
||||
}
|
||||
new FieldShownAction();
|
||||
@@ -1,507 +0,0 @@
|
||||
|
||||
|
||||
import { actionAddins } from ".";
|
||||
import { IAction,IActionResult, IActionNode, IActionProperty, IField, IContext } from "../types/ActionTypes";
|
||||
import { ConditionTree } from '../types/Conditions';
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* アクションの属性定義
|
||||
*/
|
||||
interface IInsertValueProps{
|
||||
field:IField;
|
||||
condition:string;
|
||||
value:string;
|
||||
show:string;
|
||||
}
|
||||
/**
|
||||
*
|
||||
*/
|
||||
export class InsertValueAction implements IAction{
|
||||
name: string;
|
||||
actionProps: IActionProperty[];
|
||||
props:IInsertValueProps;
|
||||
constructor(){
|
||||
this.name="値を挿入する";// DBに登録したアクション名
|
||||
this.actionProps=[];
|
||||
//プロパティ属性の初期化
|
||||
this.props={
|
||||
field:{code:''},
|
||||
condition:'',
|
||||
value:'',
|
||||
show:''
|
||||
}
|
||||
//アクションを登録する
|
||||
this.register();
|
||||
}
|
||||
|
||||
/**
|
||||
* 空白文字を空白文字が非対応のフィールドに挿入しようとしていないか、必須項目フィールドに挿入しようとしていないかチェックする
|
||||
* @param {string} inputValue - 挿入する値
|
||||
* @return {boolean} -入力値が有効な日付形式の場合はtrueを返し、そうでない場合は例外を発生させる
|
||||
*/
|
||||
checkInputBlank(fieldType :string | undefined,inputValue :string,fieldCode :string,fieldRequired :boolean | undefined,event :any): boolean{
|
||||
//正規表現チェック
|
||||
let blankCheck= inputValue.match(/^(\s| )+?$/);//半角スペース・タブ文字・改行・改ページ・全角スペース
|
||||
|
||||
if(blankCheck !== null){
|
||||
//空白文字を空白文字が非対応のフィールドに挿入しようとしている場合、例外を発生させる
|
||||
if(fieldType === "NUMBER" || fieldType === "DATE" || fieldType === "DATETIME" || fieldType === "TIME" || fieldType === "USER_SELECT"
|
||||
|| fieldType === "ORGANIZATION_SELECT" || fieldType === "GROUP_SELECT" || fieldType === "RADIO_BUTTON" || fieldType === "DROP_DOWN" || fieldType === "CHECK_BOX" || fieldType === "MULTI_SELECT"){
|
||||
event.record[fieldCode]['error'] = "「"+fieldCode+"」"+"フィールドには、空白文字は挿入できません。"; //レコードにエラーを表示
|
||||
throw new Error("「"+fieldCode+"」"+"フィールドには、空白文字は挿入できません。「値を挿入する」コンポーネントの処理を中断しました。");
|
||||
|
||||
//空白文字を必須項目フィールドに挿入しようとしている場合、例外を発生させる
|
||||
}else if(fieldRequired){
|
||||
event.record[fieldCode]['error'] = "「"+fieldCode+"」"+"フィールドは必須項目のため、空白文字は挿入できません。"; //レコードにエラーを表示
|
||||
throw new Error("「"+fieldCode+"」"+"フィールドは必須項目のため、空白文字は挿入できません。「値を挿入する」コンポーネントの処理を中断しました。");
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* 入力値が半角数字かチェックする関数
|
||||
* @param {string} inputValue - 挿入する値
|
||||
* @return {boolean} -入力値が有効な数値の場合はtrueを返し、そうでない場合は例外を発生させる
|
||||
*/
|
||||
checkInputNumber(inputValue :string,fieldCode :string,event :any): boolean{
|
||||
let inputNumberValue = Number(inputValue);//数値型に変換
|
||||
|
||||
//有限数かどうか判定s
|
||||
if(!isFinite(inputNumberValue)){
|
||||
event.record[fieldCode]['error'] = "「"+fieldCode+"」"+"フィールドに入れようとした値は、無効な日付形式です。"; //レコードにエラーを表示
|
||||
throw new Error("「"+fieldCode+"」"+"フィールドに入れようとした値は、有効な数値ではありません。「値を挿入する」コンポーネントの処理を中断しました。");
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
/** 入力値が有効な日付形式かチェックする関数
|
||||
* @param {string} inputValue - 挿入する値
|
||||
* @return {boolean} -入力値が有効な日付形式の場合はtrueを返し、そうでない場合は例外を発生させる
|
||||
*/
|
||||
checkInputDate(inputValue :string,fieldCode :string,event :any): boolean{
|
||||
//正規表現チェック
|
||||
let twoDigitMonthDay = inputValue.match(/(\d{4})-(\d{2})-(\d{2})$/);//4桁の数字-2桁の数字-2桁の数字
|
||||
let singleDigitMonthDay = inputValue.match(/(\d{4})-(\d{1})-(\d{1})$/);//4桁の数字-1桁の数字-2桁の数字
|
||||
let singleDigitMonth = inputValue.match(/(\d{4})-(\d{1})-(\d{2})$/);//4桁の数字-1桁の数字-2桁の数字
|
||||
let singleDigitDay = inputValue.match(/(\d{4})-(\d{2})-(\d{1})$/);//4桁の数字-2桁の数字-1桁の数字
|
||||
let dateTime = inputValue.match(/(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}).000Z/);//時刻入りのUTCの日付形式
|
||||
let date;
|
||||
//date型に変換
|
||||
date = new Date(inputValue);
|
||||
|
||||
//date型変換できたか確認
|
||||
if(date !== undefined && !isNaN(date.getDate())){
|
||||
//正規表現チェック確認
|
||||
if(twoDigitMonthDay === null && singleDigitMonth === null && singleDigitDay === null && singleDigitMonthDay === null && dateTime === null){
|
||||
event.record[fieldCode]['error'] = "「"+fieldCode+"」"+"フィールドに入れようとした値は、無効な日付形式です。"; //レコードにエラーを表示
|
||||
throw new Error("「"+fieldCode+"」"+"フィールドに入れようとした値は、無効な日付形式です。「値を挿入する」コンポーネントの処理を中断しました。");
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
/** 入力値が有効な時刻形式かチェックする関数
|
||||
* @param {string} inputValue - 挿入する値
|
||||
* @return {boolean} -入力値が有効な日付形式の場合はtrueを返し、そうでない場合は例外を発生させる
|
||||
*/
|
||||
checkInputTime(inputValue :string,fieldCode :string,event :any): boolean{
|
||||
//正規表現チェック
|
||||
let timeFormat =inputValue.match(/^([0-9]|1[0-9]|2[0-3]):[0-5][0-9]$/);
|
||||
|
||||
//正規表現チェック確認
|
||||
if(timeFormat === null){
|
||||
event.record[fieldCode]['error'] = "「"+fieldCode+"」"+"フィールドに入れようとした値は、無効な時刻形式です。"; //レコードにエラーを表示
|
||||
throw new Error("「"+fieldCode+"」"+"フィールドに入れようとした値は、無効な時刻形式です。「値を挿入する」コンポーネントの処理を中断しました。");
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* 入力値のフィールドタイプがDATETIMEであれば、時刻ありの日付形式変換し、DATEであれば時刻なしの日付形式変換する関数
|
||||
* @param {string} inputValue -挿入する値
|
||||
* @param {string} fieldType -フィールドタイプ
|
||||
* @return {string} -入力値が日付形式に変換できた場合は文字列を返し、そうでない場合は例外を発生させる
|
||||
*/
|
||||
changeDateFormat(inputValue :string, fieldType :string,fieldCode :string,event :any): string{
|
||||
let dateTime;
|
||||
let date;
|
||||
|
||||
//挿入する値をdate型に変換
|
||||
date = new Date(inputValue);
|
||||
//date型変換できたか確認
|
||||
if(date !== undefined && !isNaN(date.getDate())){
|
||||
|
||||
//日時フィールドの場合、時刻ありの日付形式変換
|
||||
if(fieldType === "DATETIME"){
|
||||
dateTime =date.toISOString();
|
||||
return dateTime;
|
||||
}
|
||||
|
||||
//日付フィールドの場合、時刻なしの日付形式変換
|
||||
let dateArray=inputValue.match(/(\d{4})-(\d{1,2})-(\d{1,2})$/);//4桁の数字-1~2桁の数字-1~2桁の数字
|
||||
if(dateArray !== null){
|
||||
let yearIndex = 1;
|
||||
let monthIndex = 2;
|
||||
let dayIndex = 3;
|
||||
let dateFormatted=`${dateArray[yearIndex]}-${dateArray[monthIndex]}-${dateArray[dayIndex]}`
|
||||
return dateFormatted;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
event.record[fieldCode]['error'] = "「"+fieldCode+"」"+"フィールドに入れようとした値は、無効な日付形式です。"; //レコードにエラーを表示
|
||||
throw new Error("「"+fieldCode+"」"+"フィールドに入れようとした値は、無効な日付形式です。「値を挿入する」コンポーネントの処理を中断しました。");
|
||||
}
|
||||
|
||||
/**
|
||||
* 入力値がフィールドタイプ(ラジオボタン・ドロップダウン・複数選択・ドロップダウン)の選択肢に存在する値かチェックする関数
|
||||
* @param {string} inputValue - 挿入する値
|
||||
* @return {boolean} -入力値が有効な値の場合はtrueを返し、そうでない場合は例外を発生させる
|
||||
*/
|
||||
checkInputOption(inputValue :string,fieldOptions :string | undefined,fieldCode :string,event :any): boolean {
|
||||
|
||||
//入力値が選択肢に存在する値かチェックし、存在したらtrueを返す
|
||||
if(fieldOptions !== undefined){
|
||||
let options = Object.keys(fieldOptions);
|
||||
for(var optionsIndex in options){
|
||||
if(options[optionsIndex] === inputValue){
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
event.record[fieldCode]['error']="「"+fieldCode+"」"+"には、存在しない値を挿入しようとしたため、処理を中断しました。";
|
||||
throw new Error("「"+fieldCode+"」"+"には、存在しない値を挿入しようとしたため、処理を中断しました。「値を挿入する」コンポーネントの処理を中断しました。");
|
||||
}
|
||||
|
||||
/**
|
||||
* 入力値がフィールドタイプ(ユーザー選択)で、ユーザー情報に存在する値かチェックする関数
|
||||
* @param {string} inputValue - 挿入する値
|
||||
* @return {string | boolean} 入力値が登録されているユーザー情報から見つかった場合、trueを返し、見つからなかった場合、falseを返す
|
||||
*/
|
||||
async setInputUser(inputValue :string): Promise<string | boolean>{
|
||||
|
||||
//ユーザー名を格納する変数
|
||||
let usersName;
|
||||
const usersInfoColumnIndex=0;
|
||||
|
||||
try{
|
||||
//APIでユーザー情報を取得する
|
||||
const resp =await kintone.api(kintone.api.url('/v1/users', true), 'GET', {codes:[inputValue ]})
|
||||
|
||||
//入力されたログイン名(メールアドレス)がユーザー情報に登録されている場合、そのユーザー名を取得する
|
||||
if (resp.users[usersInfoColumnIndex].code === inputValue) {
|
||||
usersName=resp.users[usersInfoColumnIndex].name;
|
||||
}
|
||||
|
||||
//ユーザー名が取得できた場合、ログイン名とユーザー名をフィールドにセットする
|
||||
if(usersName === undefined){
|
||||
throw new Error();
|
||||
}
|
||||
}catch{
|
||||
return false;
|
||||
}
|
||||
|
||||
return usersName;
|
||||
}
|
||||
|
||||
/**
|
||||
* 入力値がフィールドタイプ(組織選択)で、組織情報に存在する値かチェックする関数
|
||||
* @param {string} inputValue - 挿入する値
|
||||
* @return {string | boolean} 入力値が登録されている組織情報から見つかった場合、trueを返し、見つからなかった場合、falseを返す
|
||||
*/
|
||||
async setInputOrganization(inputValue :string): Promise<string | boolean>{
|
||||
|
||||
//組織名を格納する変数
|
||||
let organizationName;
|
||||
const organizationsInfoColumnIndex=0;
|
||||
|
||||
try{
|
||||
//APIで組織情報を取得する
|
||||
const resp =await kintone.api(kintone.api.url('/v1/organizations.json', true), 'GET', {codes:[inputValue ]})
|
||||
|
||||
//入力された組織コードが組織情報に登録されている場合、その組織名を取得する
|
||||
if (resp.organizations[organizationsInfoColumnIndex].code === inputValue) {
|
||||
organizationName=resp.organizations[organizationsInfoColumnIndex].name;
|
||||
}
|
||||
|
||||
//組織名が取得できた場合、組織コードと組織名をフィールドにセットする
|
||||
if(organizationName === undefined){
|
||||
throw new Error();
|
||||
}
|
||||
}catch{
|
||||
return false;
|
||||
}
|
||||
|
||||
return organizationName;
|
||||
}
|
||||
|
||||
/**
|
||||
* 入力値がフィールドタイプ(グループ選択)で、グループ情報に存在する値かチェックする関数
|
||||
* @param {string} inputValue - 挿入する値
|
||||
* @return {string | boolean} 入力値が登録されているグループ情報から見つかった場合、trueを返し、見つからなかった場合、falseを返す
|
||||
*/
|
||||
async setInputGroup(inputValue :string): Promise<string | boolean>{
|
||||
|
||||
//グループ名を格納する変数
|
||||
let groupsName;
|
||||
const groupsInfoColumnIndex=0;
|
||||
|
||||
try{
|
||||
//APIでグループ情報を取得する
|
||||
const resp =await kintone.api(kintone.api.url('/v1/groups.json', true), 'GET', {codes:[inputValue ]})
|
||||
|
||||
//入力されたグループコードがグループ情報に登録されている場合、そのグループ名を取得する
|
||||
if (resp.groups[groupsInfoColumnIndex].code === inputValue) {
|
||||
groupsName=resp.groups[groupsInfoColumnIndex].name;
|
||||
}
|
||||
|
||||
//グループ名が取得できた場合、グループコードとグループ名をフィールドにセットする
|
||||
if(groupsName === undefined){
|
||||
throw new Error();
|
||||
}
|
||||
}catch{
|
||||
return false;
|
||||
}
|
||||
|
||||
return groupsName;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* アクションの実行を呼び出す
|
||||
* @param actionNode
|
||||
* @param event
|
||||
* @returns
|
||||
*/
|
||||
async process(actionNode:IActionNode,event:any,context:IContext):Promise<IActionResult> {
|
||||
|
||||
let result={
|
||||
canNext:true,
|
||||
result:false
|
||||
};
|
||||
try{
|
||||
//属性設定を取得する
|
||||
this.actionProps = actionNode.actionProps;
|
||||
if (!('field' in actionNode.ActionValue) && !('value' in actionNode.ActionValue)) {
|
||||
return result
|
||||
}
|
||||
|
||||
const fieldColumnIndex=1;
|
||||
const valueColumnIndex=3;
|
||||
|
||||
//プロパティで選択されたフィールド
|
||||
const field=this.actionProps[fieldColumnIndex].props.modelValue.type;
|
||||
//プロパティの挿入する値
|
||||
const value=this.actionProps[valueColumnIndex].props.modelValue;
|
||||
|
||||
//条件式の結果を取得
|
||||
const conditionResult = this.getConditionResult(context);
|
||||
if(!conditionResult){
|
||||
return result;
|
||||
}
|
||||
|
||||
//プロパティの値を挿入するフィールドが未選択の場合、例外を発生させる
|
||||
if(field === null){
|
||||
throw new Error("「値を挿入する」コンポーネントで、値を挿入するフィールドが指定されていなかったため、処理が中断されました。");
|
||||
}
|
||||
|
||||
//プロパティの値を挿入するフィールドが非対応フィールドの場合、例外を発生させる
|
||||
//添付ファイル・テーブル・カテゴリー・ステータス・作成者・更新者・作業者・リビジョン番号・レコード番号・レコードID・計算・作成日時・更新日時フィールドが選択されている場合、例外を発生させる
|
||||
if(field === "FILE" || field === "SUBTABLE" || field === "CATEGORY" || field === "STATUS"
|
||||
|| field === "STATUS_ASSIGNEE" || field === "CREATOR" || field === "MODIFIER" || field === "__REVISION__"
|
||||
|| field === "RECORD_NUMBER"|| field === "__ID__" || field ==="CALC" || field === "CREATED_TIME" || field === "UPDATED_TIME" ){
|
||||
throw new Error("「値を挿入する」コンポーネントで、選択されたフィールドは、値を挿入するコンポーネントでは非対応のフィールドのため、処理を中断しました。");
|
||||
}
|
||||
|
||||
//プロパティの挿入する値が未入力の場合、例外を発生させる
|
||||
if(value === ""){
|
||||
throw new Error("「値を挿入する」コンポーネントで、フィールドに挿入する値が指定されていなかったため、処理が中断されました。");
|
||||
}
|
||||
|
||||
//既定のプロパティのインターフェースへ変換する
|
||||
this.props = actionNode.ActionValue as IInsertValueProps;
|
||||
|
||||
//挿入する値を取得
|
||||
let fieldValue = this.props.value;
|
||||
//フィールドの種類を取得
|
||||
const fieldType = this.props.field.type;
|
||||
//フィールドが必須項目なのか取得
|
||||
const fieldRequired=this.props.field.required;
|
||||
//挿入するフィールドのコードを取得
|
||||
const fieldCode=this.props.field.code;
|
||||
//挿入する値の形式(手入力か変数)を取得
|
||||
const insertValueType=this.props.show;
|
||||
//ラジオボタン・チェックボックス・複数選択・ドロップダウンの選択肢を取得
|
||||
let fieldOptions =this.props.field.options;
|
||||
//変数の値を格納する
|
||||
let variableValue;
|
||||
|
||||
//変数の場合、値が取得できるかチェック
|
||||
if(insertValueType === "変数" && conditionResult){
|
||||
variableValue = context.variables[fieldValue];
|
||||
|
||||
if(variableValue === undefined){
|
||||
throw new Error("「"+fieldCode+"」"+"フィールドに入れようとした変数は、無効な入力形式です。");
|
||||
}
|
||||
fieldValue = variableValue;
|
||||
}
|
||||
|
||||
//入力値チェック後、形式変換、型変換した値を格納する変数
|
||||
let correctFormattedValue;
|
||||
//入力値チェック後、形式変換、型変換した値を格納する配列
|
||||
let correctValues :string[] = [];
|
||||
//入力エラー(空白文字の混入)がないことをチェック
|
||||
let notInputError=this.checkInputBlank(fieldType,fieldValue,fieldCode,fieldRequired,event);
|
||||
|
||||
//条件式の結果がtrue、入力エラー(空白文字の混入)がない場合、挿入する値をフィールドタイプ別にチェックする
|
||||
if(conditionResult && notInputError){
|
||||
|
||||
//文字列型のフィールドに挿入しようとしている値が適切の場合、correctFormattedValueに代入する
|
||||
if(fieldType === "SINGLE_LINE_TEXT" || fieldType === "MULTI_LINE_TEXT" || fieldType === "RICH_TEXT" || fieldType === "LINK" ){
|
||||
correctFormattedValue = fieldValue;
|
||||
|
||||
//数値型のフィールドに挿入しようとしている値が適切の場合、数値型に型変換してcorrectFormattedValueに代入する
|
||||
}else if(fieldType === "NUMBER" ){
|
||||
if(this.checkInputNumber(fieldValue,fieldCode,event)){//入力値チェック
|
||||
correctFormattedValue = Number(fieldValue);//型変換
|
||||
}
|
||||
|
||||
//日付・日時型のフィールドに挿入しようとしている値が適切の場合、指定の日付・日時に形式変換してcorrectFormattedValueに代入する
|
||||
}else if(fieldType === "DATE" || fieldType === "DATETIME" ){
|
||||
if(this.checkInputDate(fieldValue,fieldCode,event)){//入力値チェック
|
||||
let formattedDate = this.changeDateFormat(fieldValue,fieldType,fieldCode,event)
|
||||
if(formattedDate){
|
||||
correctFormattedValue = formattedDate
|
||||
}
|
||||
}
|
||||
|
||||
//時刻フィールドに挿入しようとしている値が適切の場合、correctFormattedValueに代入する
|
||||
}else if(fieldType === "TIME"){
|
||||
if(this.checkInputTime(fieldValue,fieldCode,event)){//入力値チェック
|
||||
correctFormattedValue = fieldValue;
|
||||
}
|
||||
|
||||
//ラジオボタン・ドロップダウンのフィールドの選択肢と入力値が一致した場合、correctFormattedValueに代入する
|
||||
}else if(fieldType === "RADIO_BUTTON" || fieldType === "DROP_DOWN"){
|
||||
if(this.checkInputOption(fieldValue,fieldOptions,fieldCode,event)){//入力値チェック
|
||||
correctFormattedValue = fieldValue;
|
||||
}
|
||||
|
||||
//チェックボックス・複数選択のフィールドの選択肢と入力値が一致した場合、correctValuesの配列に代入する
|
||||
}else if(fieldType === "CHECK_BOX" || fieldType === "MULTI_SELECT" ){
|
||||
if(this.checkInputOption(fieldValue,fieldOptions,fieldCode,event)){//入力値チェック
|
||||
correctValues[0] = fieldValue;
|
||||
}
|
||||
|
||||
//ユーザー情報フィードに挿入しようとした値が適切な場合、correctFormattedValueに代入する
|
||||
}else if(fieldType === "USER_SELECT"){
|
||||
//挿入する値がユーザー情報から見つかれば、ユーザー名を格納
|
||||
let users=await this.setInputUser(fieldValue);
|
||||
|
||||
//ユーザー名が格納できている場合、ログイン名とユーザー名をcorrectFormattedValueに代入する
|
||||
if(!users){
|
||||
event.record[fieldCode]['error']="ユーザー選択に、挿入しようとしたユーザー情報は見つかりませんでした。「値を挿入する」コンポーネントの処理を中断しました。";
|
||||
throw new Error("ユーザー選択に、挿入しようとしたユーザー情報は見つかりませんでした。「値を挿入する」コンポーネントの処理を中断しました。");
|
||||
}else{
|
||||
correctFormattedValue=[{ code: fieldValue, name: users }];
|
||||
}
|
||||
|
||||
//組織情報フィードに挿入しようとした値が適切な場合、correctFormattedValueに代入する
|
||||
}else if(fieldType === "ORGANIZATION_SELECT"){
|
||||
//挿入する値が組織情報から見つかれば、組織名を格納
|
||||
let organizations=await this.setInputOrganization(fieldValue);
|
||||
|
||||
//組織名が格納できている場合、組織コードと組織名をcorrectFormattedValueに代入する
|
||||
if(!organizations){
|
||||
event.record[fieldCode]['error']="組織選択フィールドに、挿入しようとした組織情報は見つかりませんでした。「値を挿入する」コンポーネントの処理を中断しました。";
|
||||
throw new Error("組織選択フィールドに、挿入しようとした組織情報は見つかりませんでした。「値を挿入する」コンポーネントの処理を中断しました。");
|
||||
}else{
|
||||
correctFormattedValue=[{ code: fieldValue, name: organizations}];
|
||||
}
|
||||
|
||||
//グループ情報フィードに挿入しようとした値が適切な場合、correctFormattedValueに代入する
|
||||
}else if(fieldType === "GROUP_SELECT"){
|
||||
//挿入する値がグループ情報から見つかれば、グループ名を格納
|
||||
let groups=await this.setInputGroup(fieldValue);
|
||||
|
||||
//グループ名が格納できている場合、グループコードとグループ名をcorrectFormattedValueに代入する
|
||||
if(!groups){
|
||||
event.record[fieldCode]['error']="グループ選択フィールドに、挿入しようとしたグループ情報は見つかりませんでした。「値を挿入する」コンポーネントの処理を中断しました。";
|
||||
throw new Error("グループ選択フィールドに、挿入しようとしたグループ情報は見つかりませんでした。「値を挿入する」コンポーネントの処理を中断しました。");
|
||||
}else{
|
||||
correctFormattedValue=[{ code: fieldValue, name: groups}];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//条件式の結果がtrueかつ挿入する値が変換できた場合、フィールド(ラジオボタン・ドロップダウン・チェックボックス・複数選択・文字列一行・文字列複数行・リッチエディタ・数値・日付・日時・時刻)にセット
|
||||
if(conditionResult && (correctFormattedValue || correctValues)){
|
||||
//条件式の結果がtureかつ、値を正しい形式に変換できた場合、フィールドに値をセットする
|
||||
if(correctFormattedValue){
|
||||
event.record[fieldCode].value = correctFormattedValue;
|
||||
//条件式の結果がtureかつ、値を正しい形式(配列)に変換できた場合、フィールドに値(配列)をセットする
|
||||
}else if(correctValues.length > 0){
|
||||
event.record[fieldCode].value = correctValues;
|
||||
}
|
||||
}
|
||||
|
||||
result= {
|
||||
canNext:true,
|
||||
result:true
|
||||
}
|
||||
return result;
|
||||
}catch(error:any){
|
||||
event.record;
|
||||
event.error=error.message;
|
||||
console.error(error);
|
||||
result.canNext=true;//次のノードは処理を続ける
|
||||
return result;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param context 条件式を実行する
|
||||
* @returns
|
||||
*/
|
||||
getConditionResult(context:any):boolean{
|
||||
//プロパティ`condition`から条件ツリーを取得する
|
||||
const tree =this.getCondition(this.props.condition);
|
||||
if(!tree){
|
||||
//条件を設定されていません
|
||||
return true;
|
||||
}
|
||||
return tree.evaluate(tree.root,context);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param condition 条件式ツリーを取得する
|
||||
* @returns
|
||||
*/
|
||||
getCondition(condition:string):ConditionTree|null{
|
||||
try{
|
||||
const tree = new ConditionTree();
|
||||
tree.fromJson(condition);
|
||||
if(tree.getConditions(tree.root).length>0){
|
||||
return tree;
|
||||
}else{
|
||||
return null;
|
||||
}
|
||||
}catch(error){
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
register(): void {
|
||||
actionAddins[this.name]=this;
|
||||
}
|
||||
|
||||
}
|
||||
new InsertValueAction();
|
||||
@@ -1,80 +0,0 @@
|
||||
import { actionAddins } from ".";
|
||||
import { IAction, IActionResult, IActionNode, IActionProperty, IField } from "../types/ActionTypes";
|
||||
/**
|
||||
* アクションの属性定義
|
||||
*/
|
||||
interface IMailCheckProps {
|
||||
field: IField;//チェックするフィールドの対象
|
||||
message: string;//エラーメッセージ
|
||||
emailCheck:string;
|
||||
}
|
||||
/**
|
||||
* メールアドレスチェックアクション
|
||||
*/
|
||||
export class MailCheckAction implements IAction {
|
||||
name: string;
|
||||
actionProps: IActionProperty[];
|
||||
props: IMailCheckProps;
|
||||
constructor() {
|
||||
this.name = "メールアドレスチェック";
|
||||
this.actionProps = [];
|
||||
this.props = {
|
||||
field: { code: '' },
|
||||
message: '',
|
||||
emailCheck:''
|
||||
}
|
||||
//アクションを登録する
|
||||
this.register();
|
||||
}
|
||||
/**
|
||||
* アクションの実行を呼び出す
|
||||
* @param actionNode
|
||||
* @param event
|
||||
* @returns
|
||||
*/
|
||||
async process(actionNode: IActionNode, event: any): Promise<IActionResult> {
|
||||
let result = {
|
||||
canNext: true,
|
||||
result: false
|
||||
};
|
||||
|
||||
try {
|
||||
//属性設定を取得する
|
||||
this.actionProps = actionNode.actionProps;
|
||||
|
||||
if (!('field' in actionNode.ActionValue) && !('message' in actionNode.ActionValue) && !('emailCheck' in actionNode.ActionValue)) {
|
||||
return result
|
||||
}
|
||||
this.props = actionNode.ActionValue as IMailCheckProps;
|
||||
//条件式の計算結果を取得
|
||||
const record = event.record;
|
||||
const value = record[this.props.field.code].value;
|
||||
|
||||
if (this.props.emailCheck === '厳格') {
|
||||
if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value)) {
|
||||
record[this.props.field.code].error = this.props.message;
|
||||
}
|
||||
} else if (this.props.emailCheck === 'ゆるめ') {
|
||||
if (!/^[^@]+@[^@]+$/.test(value)) {
|
||||
record[this.props.field.code].error = this.props.message;
|
||||
}
|
||||
} else {
|
||||
result = {
|
||||
canNext: true,
|
||||
result: true
|
||||
}
|
||||
}
|
||||
return result;
|
||||
} catch (error) {
|
||||
event.error = error;
|
||||
console.error(error);
|
||||
result.canNext = false;
|
||||
return result;
|
||||
}
|
||||
};
|
||||
register(): void {
|
||||
actionAddins[this.name] = this;
|
||||
}
|
||||
|
||||
}
|
||||
new MailCheckAction();
|
||||
@@ -1,72 +0,0 @@
|
||||
import { actionAddins } from ".";
|
||||
import { IAction,IActionResult, IActionNode, IActionProperty, IField} from "../types/ActionTypes";
|
||||
/**
|
||||
* アクションの属性定義
|
||||
*/
|
||||
interface IRegularCheckProps{
|
||||
field:IField;//チェックするフィールドの対象
|
||||
message:string;//エラーメッセージ
|
||||
regExpression:string;//正規表現式
|
||||
}
|
||||
/**
|
||||
* 正規表現チェックアクション
|
||||
*/
|
||||
export class RegularCheckAction implements IAction{
|
||||
name: string;
|
||||
actionProps: IActionProperty[];
|
||||
props:IRegularCheckProps;
|
||||
constructor(){
|
||||
this.name="正規表現チェック";
|
||||
this.actionProps=[];
|
||||
this.props={
|
||||
field:{code:''},
|
||||
message:'',
|
||||
regExpression:''
|
||||
}
|
||||
//アクションを登録する
|
||||
this.register();
|
||||
}
|
||||
/**
|
||||
* アクションの実行を呼び出す
|
||||
* @param actionNode
|
||||
* @param event
|
||||
* @returns
|
||||
*/
|
||||
async process(actionNode:IActionNode,event:any):Promise<IActionResult> {
|
||||
let result={
|
||||
canNext:true,
|
||||
result:false
|
||||
};
|
||||
try{
|
||||
//属性設定を取得する
|
||||
this.actionProps=actionNode.actionProps;
|
||||
if (!('field' in actionNode.ActionValue) && !('message' in actionNode.ActionValue) && !('regExpression'in actionNode.ActionValue)) {
|
||||
return result
|
||||
}
|
||||
this.props = actionNode.ActionValue as IRegularCheckProps;
|
||||
//条件式の計算結果を取得
|
||||
const record = event.record;
|
||||
const value = record[this.props.field.code].value;
|
||||
const regex = new RegExp(this.props.regExpression);
|
||||
if(!regex.test(value)){
|
||||
record[this.props.field.code].error=this.props.message;
|
||||
}else{
|
||||
result= {
|
||||
canNext:true,
|
||||
result:true
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}catch(error){
|
||||
event.error=error;
|
||||
console.error(error);
|
||||
result.canNext=false;
|
||||
return result;
|
||||
}
|
||||
};
|
||||
register(): void {
|
||||
actionAddins[this.name]=this;
|
||||
}
|
||||
|
||||
}
|
||||
new RegularCheckAction();
|
||||
@@ -1,211 +0,0 @@
|
||||
import { actionAddins } from ".";
|
||||
import { IField, IAction,IActionResult, IActionNode, IActionProperty } from "../types/ActionTypes";
|
||||
import { Formatter } from "../util/format";
|
||||
|
||||
//右UI画面propertyのname:型:
|
||||
interface IStringJoinProps{
|
||||
//保存先フィールド
|
||||
saveField:IField;
|
||||
//結合元フィールド1
|
||||
joinField1:IField;
|
||||
//結合元フィールド2
|
||||
joinField2:IField;
|
||||
//区切り文字
|
||||
delimiter:string;
|
||||
}
|
||||
|
||||
//IActionインタフェースを実装する新しいクラスActionを作成:
|
||||
export class StringJoinAction implements IAction{
|
||||
name: string;
|
||||
//importから導入顕示定義
|
||||
actionProps: IActionProperty[];
|
||||
//上方のinterface Propsから、props受ける属性を定義:
|
||||
props:IStringJoinProps;
|
||||
//関数定義に必要な類名を構築:
|
||||
constructor(){
|
||||
//pgAdminDBに登録したアクション名(name/subtitle)一致する必要がある:
|
||||
this.name="文字結合";
|
||||
this.actionProps=[];
|
||||
this.register();
|
||||
//プロパティ属性初期化:
|
||||
this.props={
|
||||
saveField:{code:''},
|
||||
joinField1:{code:''},
|
||||
joinField2:{code:''},
|
||||
delimiter:''
|
||||
}
|
||||
//リセット上記登録表:
|
||||
this.register();
|
||||
}
|
||||
/**
|
||||
* アクションの処理を実装する
|
||||
* @param actionNode アクションノード
|
||||
* @param event Kintoneのイベント
|
||||
* @param context コンテキスト(レコード、変数情報を持っている)
|
||||
* @returns
|
||||
*/
|
||||
//非同期処理ある関数下のある属性:
|
||||
async process(actionNode:IActionNode,event:any):Promise<IActionResult> {
|
||||
let result={
|
||||
//後継処理不可:
|
||||
canNext:false,
|
||||
result:false
|
||||
};
|
||||
try{
|
||||
//属性設定を取得する:
|
||||
this.actionProps=actionNode.actionProps;
|
||||
//プロパティ設定のデータ型は必要な情報含めますか?全部不存在時return:
|
||||
if (!('saveField' in actionNode.ActionValue) && !('joinField1' in actionNode.ActionValue) && !('joinField2' in actionNode.ActionValue)) {
|
||||
return result
|
||||
}
|
||||
|
||||
//既定のプロパティのインタフェースへ変換:
|
||||
this.props = actionNode.ActionValue as IStringJoinProps;
|
||||
const record = event.record;
|
||||
|
||||
//kintoneフィールドタイプ取得:
|
||||
const joinField1type=this.props.joinField1.type;
|
||||
const joinField2type=this.props.joinField2.type;
|
||||
const saveFieldtype=this.props.saveField.type;
|
||||
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
// //保存先フィールドは文字列フィールドではない場合、エラー発生:
|
||||
if(!(saveFieldtype==='SINGLE_LINE_TEXT'||saveFieldtype==='MULTI_LINE_TEXT'||saveFieldtype==='RICH_TEXT')){
|
||||
event.error='[エラーメッセージ]:結合保存先対応不可。結合しません';
|
||||
if (event.type.includes('success')){
|
||||
window.alert("[windows alert]:"+event.error);
|
||||
}
|
||||
result = {
|
||||
canNext: false,
|
||||
result: false
|
||||
}
|
||||
return result;
|
||||
}
|
||||
//////////////////////////////////////////////////////////////////////////////////////////
|
||||
//値取得方法定義:
|
||||
function getValue(value:string,type:string|undefined,fieldCode:string,event:any){
|
||||
if(event.record[fieldCode]?.value===undefined||event.record[fieldCode]?.value===null){
|
||||
event.record[fieldCode].value='';
|
||||
}
|
||||
//作成者、更新者:
|
||||
if(type==='CREATOR'||type==='MODIFIER'){
|
||||
value = event.record[fieldCode]?.value.name;
|
||||
//日時、作成日時、更新日時:
|
||||
}else if(type==='DATETIME'||type==='CREATED_TIME'||type==='UPDATED_TIME'){
|
||||
if(event.record[fieldCode]?.value!==undefined && event.record[fieldCode]?.value!==''){
|
||||
value = Formatter.dateFormat(new Date(event.record[fieldCode]?.value),'yyyy-MM-dd HH:mm');
|
||||
}else{
|
||||
value=event.record[fieldCode]?.value;
|
||||
}
|
||||
//ユーザ選択、組織選択、グループ選択、添付ファイル名、作業者、カテゴリー:
|
||||
}else if(type==='USER_SELECT'||type==='ORGANIZATION_SELECT'||type==='GROUP_SELECT'||type==='FILE'||type==='STATUS_ASSIGNEE'){
|
||||
if(event.record[fieldCode]?.value===undefined || event.record[fieldCode]?.value===''){
|
||||
value = event.record[fieldCode]?.value;
|
||||
}else{
|
||||
const mototext=event.record[fieldCode]?.value;
|
||||
let arr=[];
|
||||
for(let i=0;i<mototext.length;i++){
|
||||
arr.push(mototext[i].name);
|
||||
}
|
||||
//配列要素を,で連結して文字列を作成:
|
||||
value=arr.join();
|
||||
}
|
||||
//カテゴリー、チェックボックス、複数選択:
|
||||
}else if(type==='CATEGORY'||type==='CHECK_BOX'||type==='MULTI_SELECT'){
|
||||
if(event.record[fieldCode]?.value===undefined || event.record[fieldCode]?.value===''){
|
||||
value = event.record[fieldCode]?.value;
|
||||
}else{
|
||||
const mototext=event.record[fieldCode]?.value;
|
||||
let arr=[];
|
||||
for(let i=0;i<mototext.length;i++){
|
||||
arr.push(mototext[i]);
|
||||
}
|
||||
//配列要素を,で連結して文字列を作成:
|
||||
value=arr.join();
|
||||
}
|
||||
//詳細画面プロセス実行後のステータス:
|
||||
}else if(type==='STATUS'&&event.type.includes('process')){
|
||||
value = event.nextStatus.value;
|
||||
}else{
|
||||
value = event.record[fieldCode]?.value;
|
||||
}
|
||||
if (value===undefined || value===null){
|
||||
value='';
|
||||
}
|
||||
return value;
|
||||
}
|
||||
//////////////////////////////////////////////////////////////////////
|
||||
//値取得方法呼出:
|
||||
let joinValue1:string='';
|
||||
joinValue1=getValue(joinValue1,joinField1type,this.props.joinField1.code,event);
|
||||
/////////////////////////////////////////////////////////////////////////////////////
|
||||
let joinValue2:string='';
|
||||
joinValue2=getValue(joinValue2,joinField2type,this.props.joinField2.code,event);
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
const conString = this.props.delimiter;
|
||||
let saveValue:string='';
|
||||
//前後結合元が空白なら区切り文字も空白にする(例:1-8の8無いなら1。1-8の1無いなら8。1空白8の8無いなら1。結合元全部空白なら全部空白):
|
||||
if(joinValue1===''&&joinValue2===''){
|
||||
saveValue='';
|
||||
}else if(joinValue1===''&&joinValue2!==''){
|
||||
saveValue=joinValue2;
|
||||
}else if(joinValue2===''&&joinValue1!==''){
|
||||
saveValue=joinValue1;
|
||||
}else if(joinValue1!==''&&joinValue2!==''){
|
||||
saveValue=`${joinValue1}${conString}${joinValue2}`
|
||||
}
|
||||
////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
//新規/更新/一覧保存成功後の以外のeventでPUT使用しない:
|
||||
if (!event.type.includes('success')){
|
||||
//保存先フィールドに値セット:
|
||||
record[this.props.saveField.code].value=saveValue;
|
||||
window.alert("文字結合行いました。"+this.props.joinField1.name+":"+joinValue1+","+this.props.joinField2.name+":"+joinValue2+"。");
|
||||
}else{
|
||||
const params={
|
||||
"app":event.appId,
|
||||
"id":event.recordId,
|
||||
"record":{[this.props.saveField.code]:{"value":saveValue}}
|
||||
};
|
||||
return await kintone.api(kintone.api.url('/k/v1/record',true),'PUT',params).then((resp) => {
|
||||
//kintone保存先フィールド存在確認:
|
||||
record[this.props.saveField.code].value=saveValue;
|
||||
if (event.type.includes('index')){
|
||||
window.alert("文字結合行いました。"+this.props.joinField1.name+":"+joinValue1+","+this.props.joinField2.name+":"+joinValue2+"。一覧画面更新成功後自動リロードしません。必要に応じて手動リロードください。");
|
||||
}else{
|
||||
window.alert("文字結合行いました。"+this.props.joinField1.name+":"+joinValue1+","+this.props.joinField2.name+":"+joinValue2+"。");
|
||||
}
|
||||
//一覧画面更新成功後リロード:
|
||||
// if (event.type.includes('index')){
|
||||
// event.url = location.href.endsWith('/') || location.href.endsWith('&') ?
|
||||
// location.href.slice(0, -1) :
|
||||
// location.href + (location.href.includes('?') ? '&' : '/');
|
||||
// }
|
||||
}).catch((error) => {
|
||||
event.error = 'エラーが発生しました。結合しません。システム管理者へお問合せください';
|
||||
window.alert(event.error+"error message:"+error);
|
||||
return event;
|
||||
});
|
||||
}
|
||||
//////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
result= {
|
||||
canNext:true,
|
||||
result:true
|
||||
}
|
||||
return result;
|
||||
}catch(error){;
|
||||
if (event.type.includes('success')){
|
||||
window.alert("[windows alert]:処理中異常が発生しました。結合しません。システム担当者へお問合せください。errorメッセージ:"+error)
|
||||
}
|
||||
event.error="[エラーメッセージ]:処理中異常が発生しました。結合しません。システム担当者へお問合せください。errorメッセージ:"+error;
|
||||
return {
|
||||
canNext:false,
|
||||
result:false
|
||||
}
|
||||
}
|
||||
}
|
||||
///////////////////////////////////////////////////////////////////////////////////////////////
|
||||
register(): void {
|
||||
actionAddins[this.name]=this;
|
||||
}
|
||||
}
|
||||
new StringJoinAction();
|
||||
@@ -1,102 +0,0 @@
|
||||
import { actionAddins } from ".";
|
||||
import { IAction,IActionResult, IActionNode, IActionProperty, IField, IContext } from "../types/ActionTypes";
|
||||
|
||||
//クラス名を設計書に揃える
|
||||
/**
|
||||
* アクションの属性定義
|
||||
*/
|
||||
interface FullWidthProps{
|
||||
//checkOption:Array<string>,
|
||||
field:IField
|
||||
}
|
||||
/**
|
||||
* 全角チェックアクション
|
||||
*/
|
||||
export class FullWidthAction implements IAction{
|
||||
name: string;
|
||||
actionProps: IActionProperty[];
|
||||
props:FullWidthProps;
|
||||
constructor(){
|
||||
this.name="全角チェック"; /* pgadminのnameと同様 */
|
||||
this.actionProps=[];
|
||||
this.props={
|
||||
//checkOption:[],
|
||||
field:{code:''}
|
||||
}
|
||||
//アクションを登録する
|
||||
this.register();
|
||||
}
|
||||
/**
|
||||
* アクションの実行を呼び出す
|
||||
* @param actionNode
|
||||
* @param event
|
||||
* @returns
|
||||
*/
|
||||
async process(actionNode:IActionNode,event:any,context:IContext):Promise<IActionResult> {
|
||||
let result={
|
||||
canNext:true,
|
||||
result:false
|
||||
};
|
||||
try{
|
||||
//属性設定を取得する
|
||||
this.actionProps=actionNode.actionProps;
|
||||
if (!('field' in actionNode.ActionValue) ) {
|
||||
return result
|
||||
}
|
||||
this.props = actionNode.ActionValue as FullWidthProps;
|
||||
//条件式の計算結果を取得
|
||||
const record = event.record;
|
||||
const value = record[this.props.field.code]?.value;
|
||||
//条件分岐
|
||||
//未入力時は何も処理をせず終了
|
||||
if(value===undefined || value===''){
|
||||
return result;
|
||||
}
|
||||
//半角が含まれていた場合resultがfalse
|
||||
if(!this.containsFullWidthChars(value)){
|
||||
//エラー時に出力される文字設定
|
||||
record[this.props.field.code].error="半角が含まれています";
|
||||
//次の処理を中止する値設定
|
||||
result.canNext=false;
|
||||
return result;
|
||||
}
|
||||
//resultプロパティ指定
|
||||
result= {
|
||||
canNext:true,
|
||||
result:true
|
||||
}
|
||||
return result;
|
||||
//例外処理
|
||||
}catch(error){
|
||||
event.error=error;
|
||||
console.error(error);
|
||||
result.canNext=false;
|
||||
return result;
|
||||
}
|
||||
}
|
||||
//全て全角の文字列の場合はtrue、そうでない場合はfalse
|
||||
containsFullWidthChars(text: string): boolean {
|
||||
//半角英数字カナを除外
|
||||
const checkRegex="^[^\x01-\x7E\uFF61-\uFF9F]+$";
|
||||
//正規表現オブジェクト生成
|
||||
const fullWidthRegex = new RegExp(checkRegex);
|
||||
|
||||
//正規表現チェック
|
||||
return fullWidthRegex.test(text);
|
||||
|
||||
//全角を表すUnicodeの全角正規表現(参照先URL)
|
||||
// \u3000-\u303F:句読点・記号
|
||||
// \u3040-\u309F:すべてのひらがな
|
||||
// \u30A0-\u30FF:すべてのカタカナ
|
||||
// \u4E00-\u9FAF:すべての漢字
|
||||
// \uFF00-\uFFEF:全角英数字と半角カタカナ
|
||||
// \u3400-\u4DBF:CJK統合漢字拡張
|
||||
//const fullWidthRegex = /[/^[\u3000-\u303F\u3040-\u309F\u30A0-\u30FF\uFF00-\uFFEF\u4E00-\u9FAF\u3400-\u4DBF]+$/g;
|
||||
|
||||
}
|
||||
//戻り値を持たないためvoid型
|
||||
register(): void {
|
||||
actionAddins[this.name]=this;
|
||||
}
|
||||
}
|
||||
new FullWidthAction();
|
||||
@@ -1,68 +0,0 @@
|
||||
import { actionAddins } from ".";
|
||||
import { IAction,IActionResult, IActionNode, IActionProperty, IField, IContext} from "../types/ActionTypes";
|
||||
/**
|
||||
* アクションの属性定義
|
||||
*/
|
||||
interface IGetValueProps{
|
||||
field:IField;//チェックするフィールドの対象
|
||||
verName:string;
|
||||
}
|
||||
/**
|
||||
* 正規表現チェックアクション
|
||||
*/
|
||||
export class GetValueAciton implements IAction{
|
||||
name: string;
|
||||
actionProps: IActionProperty[];
|
||||
props:IGetValueProps;
|
||||
constructor(){
|
||||
this.name="値を取得する";
|
||||
this.actionProps=[];
|
||||
this.props={
|
||||
field:{code:''},
|
||||
verName:''
|
||||
}
|
||||
//アクションを登録する
|
||||
this.register();
|
||||
}
|
||||
/**
|
||||
* アクションの実行を呼び出す
|
||||
* @param actionNode
|
||||
* @param event
|
||||
* @returns
|
||||
*/
|
||||
async process(actionNode:IActionNode,event:any,context:IContext):Promise<IActionResult> {
|
||||
let result={
|
||||
canNext:true,
|
||||
result:false
|
||||
};
|
||||
try{
|
||||
//属性設定を取得する
|
||||
this.actionProps=actionNode.actionProps;
|
||||
if (!('field' in actionNode.ActionValue) && !('verName' in actionNode.ActionValue)) {
|
||||
return result
|
||||
}
|
||||
|
||||
this.props = actionNode.ActionValue as IGetValueProps;
|
||||
//条件式の計算結果を取得
|
||||
const record = event.record;
|
||||
const value = record[this.props.field.code].value;
|
||||
context.variables[this.props.verName] = value;
|
||||
result = {
|
||||
canNext:true,
|
||||
result:true
|
||||
}
|
||||
|
||||
return result;
|
||||
}catch(error){
|
||||
event.error=error;
|
||||
console.error(error);
|
||||
result.canNext=false;
|
||||
return result;
|
||||
}
|
||||
};
|
||||
register(): void {
|
||||
actionAddins[this.name]=this;
|
||||
}
|
||||
|
||||
}
|
||||
new GetValueAciton();
|
||||
@@ -1,3 +1,9 @@
|
||||
// export const sum = (a: number, b: number) => {
|
||||
// if ('development' === process.env.NODE_ENV) {
|
||||
// console.log('boop');
|
||||
// }
|
||||
// return a + b;
|
||||
// };
|
||||
import $ from 'jquery';
|
||||
import { ActionProcess } from './types/action-process';
|
||||
import { ActionFlow } from './types/ActionTypes';
|
||||
|
||||
@@ -89,8 +89,6 @@ export interface IField{
|
||||
name?:string;
|
||||
code:string;
|
||||
type?:string;
|
||||
required?:boolean;
|
||||
options?:string;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -6,14 +6,8 @@ import '../actions/field-shown';
|
||||
import '../actions/error-show';
|
||||
import '../actions/button-add';
|
||||
import '../actions/condition-action';
|
||||
import '../actions/regular-check';
|
||||
import '../actions/mail-check';
|
||||
import '../actions/counter-check';
|
||||
import '../actions/datetime-getter';
|
||||
import '../actions/insert-value';
|
||||
import '../actions/value-getter';
|
||||
import '../actions/string-join';
|
||||
import '../actions/validation fullwidth';
|
||||
import '../actions/data-processing';
|
||||
import '../actions/data-mapping';
|
||||
import { ActionFlow,IActionFlow, IActionResult,IContext } from "./ActionTypes";
|
||||
|
||||
export class ActionProcess{
|
||||
@@ -47,7 +41,7 @@ export class ActionProcess{
|
||||
result = await action.process(nextAction,this.event,this.context);
|
||||
}
|
||||
let nextInput = '';
|
||||
//outputPoints一㝤以上㝮場坈〝次㝮InputPoint㝯戻り値を設定㝙る
|
||||
//outputPoints一つ以上の場合、次のInputPointは戻り値を設定する
|
||||
if(nextAction.outputPoints && nextAction.outputPoints.length>1){
|
||||
nextInput = result.result||'';
|
||||
}
|
||||
|
||||
@@ -1,26 +1,32 @@
|
||||
// vite.config.js
|
||||
import { defineConfig } from "vite";
|
||||
import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
|
||||
import { defineConfig, loadEnv } from "vite";
|
||||
import checker from "vite-plugin-checker";
|
||||
import { libInjectCss } from 'vite-plugin-lib-inject-css';
|
||||
|
||||
const sourcemap = process.env.SOURCE_MAP === "true";
|
||||
export default ({ mode }) => {
|
||||
process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
checker({
|
||||
typescript: true,
|
||||
}),
|
||||
cssInjectedByJsPlugin(),
|
||||
],
|
||||
build: {
|
||||
cssCodeSplit: false,
|
||||
rollupOptions: {
|
||||
input: "src/index.ts", // entry file
|
||||
output: {
|
||||
entryFileNames: "alc_runtime.js",
|
||||
// assetFileNames:'alc_kintone_style.css'
|
||||
return defineConfig({
|
||||
plugins: [
|
||||
checker({
|
||||
typescript: true,
|
||||
}),
|
||||
libInjectCss(),
|
||||
],
|
||||
build: {
|
||||
cssCodeSplit: false,
|
||||
rollupOptions: {
|
||||
input: "src/index.ts", // entry file
|
||||
output: {
|
||||
entryFileNames: "alc_runtime.js",
|
||||
// assetFileNames:'alc_kintone_style.css'
|
||||
},
|
||||
},
|
||||
sourcemap: process.env.VITE_SOURCE_MAP,
|
||||
},
|
||||
sourcemap: sourcemap,
|
||||
},
|
||||
});
|
||||
server: {
|
||||
port: process.env.VITE_PORT,
|
||||
// open: "/dist/alc_runtime.js",
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
73
sample2.json
73
sample2.json
@@ -1,22 +1,55 @@
|
||||
[
|
||||
{
|
||||
"component": "FieldInput",
|
||||
"props": {
|
||||
"displayName": "フィールド",
|
||||
"modelValue": {},
|
||||
"name": "field",
|
||||
"placeholder": "対象項目を選択してください"
|
||||
{
|
||||
"component": "InputText",
|
||||
"props": {
|
||||
"displayName": "文字入力",
|
||||
"modelValue": "",
|
||||
"name": "str",
|
||||
"placeholder": "文字を入力してください",
|
||||
"maxLength":"20",
|
||||
"hint":"文字列入力<br>入力ルール指定可能。ルールの設定例:[val=>!!val||'必須入力です']",
|
||||
"rules":"[val=>!!val||'必須入力です']"
|
||||
}
|
||||
},
|
||||
{
|
||||
"component": "AppFieldSelect",
|
||||
"props": {
|
||||
"displayName": "フィールド選択(複数)",
|
||||
"modelValue": {},
|
||||
"name": "selectFields",
|
||||
"placeholder": "アプリ選択後、フィールドを選んでください",
|
||||
"selectType":"multiple"
|
||||
}
|
||||
},
|
||||
{
|
||||
"component": "AppFieldSelect",
|
||||
"props": {
|
||||
"displayName": "フィールド選択(単一)",
|
||||
"modelValue": {},
|
||||
"name": "selectField",
|
||||
"placeholder": "アプリ選択後、フィールドを選んでください",
|
||||
"selectType":"single"
|
||||
}
|
||||
},
|
||||
{
|
||||
"component": "ColorPicker",
|
||||
"props": {
|
||||
"displayName": "色選択",
|
||||
"modelValue": "",
|
||||
"name": "color",
|
||||
"placeholder": "カラーを選択してください"
|
||||
}
|
||||
},
|
||||
{
|
||||
"component": "NumInput",
|
||||
"props": {
|
||||
"displayName": "数値入力フィールド",
|
||||
"modelValue": "",
|
||||
"name": "num",
|
||||
"max":100,
|
||||
"min":0,
|
||||
"placeholder": "数値を入力してください",
|
||||
"rules":"[val=>!!val ||'数値を入力してください',val=>val<=100 && val>=1 || '1-100の範囲内の数値を入力してください']"
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"component": "SelectBox",
|
||||
"props": {
|
||||
"displayName": "チェックする全角文字",
|
||||
"modelValue": null,
|
||||
"name": "options",
|
||||
"placeholder": "チェックしたい全角文字を選択する",
|
||||
"selectType":"multiple",
|
||||
"options":["全角記号および句読点","ひらがな","カタカナ","全角英数字","常用漢字","拡張漢字"]
|
||||
}
|
||||
}
|
||||
]
|
||||
]
|
||||
Reference in New Issue
Block a user