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

finish UI

Browse Source
This commit is contained in:
薛家豪
2025-01-17 12:41:05 +08:00
parent e65d53f794
commit 8bd3c0a3a3
24 changed files with 952 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
vue-project/my-kintone-plugin/src/components/Config.vue
View File

@@ -1,53 +1,63 @@
<template>
<h2 class="settings-heading">Settings for data fetch pluging</h2>
<p class="kintoneplugin-desc">This message is displayed on the app page after the app has been updated.</p>
<form class="js-submit-settings">
<p class="kintoneplugin-row">
<label for="message">
Message:
<input v-model="data.message" type="text" class="js-text-message kintoneplugin-input-text" />
</label>
</p>
<p class="kintoneplugin-row">
<kuc-button text="Cancel" type="normal" @click="cancel" />
<kuc-button text="Save" type="submit" @click="save" />
</p>
</form>
<h2 class="settings-heading">{{ $t('config.title') }}</h2>
<p class="kintoneplugin-desc">{{ $t('config.desc') }}</p>
<plugin-row class="header-row border">
<plugin-input v-model="data.buttonName" label="集約ボタン名" />
</plugin-row>
<div v-if="!loading">
<plugin-table-area :table="mainTable" :key="mainTable.id" />
<plugin-table-area v-for="joinTable in otherTables" :table="joinTable" :key="joinTable.id" />
</div>
<plugin-row class="footer-row border">
<kuc-button text="キャンセル" type="normal" @click="cancel" />
<kuc-button text="保存する" class="save-btn" type="submit" @click="save" />
</plugin-row>
</template>
<script setup lang="ts">
import { onMounted, reactive } from 'vue';
import { createEmptyJoinTable } from '@/js/helper';
import type { JoinTable, SavedData } from '@/types/model';
import { computed, onMounted, watch, provide, reactive, ref } from 'vue';
const props = defineProps<{ pluginId: string }>();
const data: {
message: string;
} = reactive({
message: '',
const loading = ref(true);
const data: SavedData = reactive({
buttonName: '',
joinTables: [] as JoinTable[],
});
provide('savedData', data);
onMounted(async () => {
const savedData = kintone.plugin.app.getConfig(props.pluginId);
data.message = JSON.parse(savedData.message);
data.buttonName = savedData?.buttonName || '集約';
data.joinTables = savedData ? JSON.parse(savedData.joinTables) : [createEmptyJoinTable(), createEmptyJoinTable(1)];
loading.value = false;
});
const mainTable = computed(() => data.joinTables[0]);
const otherTables = computed(() => data.joinTables.slice(1));
watch(
() => data.joinTables.length,
(newLength) => {
if (newLength === 1) {
data.joinTables[0].onConditions = [];
}
},
);
function save() {
kintone.plugin.app.setConfig(
{ message: JSON.stringify(data.message) },
// () => {
// alert("The plug-in settings have been saved. Please update the app!");
// window.location.href = "../../flow?app=" + kintone.app.getId();
// }
);
kintone.plugin.app.setConfig({
buttonName: data.buttonName,
joinTables: JSON.stringify(data.joinTables || []),
});
}
function cancel() {
window.location.href = `../../${kintone.app.getId()}/plugin/`;
}
</script>
<style scoped>
.settings-heading {
padding: 1em 0;
}
.kintoneplugin-input-text {
width: 20em;
}
</style>

24
vue-project/my-kintone-plugin/src/components/basic/PluginDropdown.vue Normal file
View File

@@ -0,0 +1,24 @@
<template>
<div class="kintoneplugin-input-container flex-row">
<plugin-label v-if="label" :label="label" />
<kuc-dropdown className="kuc-text-input" :items="items" :value="modelValue" @change="updateValue" />
</div>
</template>
<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';
const props = defineProps<{
label: string;
items: kintone.fieldTypes.DropDown['Item'][];
modelValue: string;
}>();
const emit = defineEmits<{
(e: 'update:modelValue', value: string): void;
}>();
const updateValue = (event: kintone.Event) => {
emit('update:modelValue', event.detail.value);
};
</script>

23
vue-project/my-kintone-plugin/src/components/basic/PluginInput.vue Normal file
View File

@@ -0,0 +1,23 @@
<template>
<div class="kintoneplugin-input-container flex-row">
<plugin-label v-if="label" :label="label" />
<kuc-text className="kuc-text-input" :value="modelValue" @change="updateValue" />
</div>
</template>
<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';
const props = defineProps<{
label: string;
modelValue: string;
}>();
const emit = defineEmits<{
(e: 'update:modelValue', value: string): void;
}>();
const updateValue = (event: kintone.Event) => {
emit('update:modelValue', event.detail.value);
};
</script>

11
vue-project/my-kintone-plugin/src/components/basic/PluginLabel.vue Normal file
View File

@@ -0,0 +1,11 @@
<template>
<div class="kintoneplugin-label">{{ label }}</div>
</template>
<script setup lang="ts">
import { defineProps } from 'vue';
const props = defineProps<{
label: string;
}>();
</script>

7
vue-project/my-kintone-plugin/src/components/basic/PluginRow.vue Normal file
View File

@@ -0,0 +1,7 @@
<template>
<div class="kintoneplugin-row">
<slot></slot>
</div>
</template>
<script setup lang="ts"></script>

23
vue-project/my-kintone-plugin/src/components/basic/PluginTableActionIcon.vue Normal file
View File

@@ -0,0 +1,23 @@
<template>
<button :class="['kuc-action-button', isAdd ? 'add' : 'remove']" :title="title">
<svg fill="none" width="18" height="18" viewBox="0 0 16 16" aria-hidden="true">
<path :d="dPath" fill-rule="evenodd" clip-rule="evenodd" :fill="fillPath"></path>
</svg>
</button>
</template>
<script setup lang="ts">
import { computed } from 'vue';
const props = defineProps<{ isAdd: boolean; title: string }>();
const dAdd =
'M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM12.0355 8.49997V7.49997H8.50008V3.96454H7.50008V7.49997H3.96443V8.49997H7.50008V12.0356H8.50008V8.49997H12.0355Z';
const fillAdd = '#3498db';
const dRemove =
'M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM12.0355 7.49997V8.49997L3.96443 8.49997V7.49997H12.0355Z';
const fillRemove = '#b5b5b5';
const dPath = computed(() => (props.isAdd ? dAdd : dRemove));
const fillPath = computed(() => (props.isAdd ? fillAdd : fillRemove));
</script>

33
vue-project/my-kintone-plugin/src/components/basic/PluginTableActionIconGroup.vue Normal file
View File

@@ -0,0 +1,33 @@
<template>
<div>
<plugin-table-action-icon v-if="canAdd" :is-add="true" title="Add Row" @click="onClick('add')" />
<plugin-table-action-icon v-if="canDelete" :is-add="false" title="Delete this row" @click="onClick('remove')" />
</div>
</template>
<script setup lang="ts">
import { createEmptyJoinTable } from '@/js/helper';
import type { SavedData } from '@/types/model';
import { defineProps, withDefaults, inject } from 'vue';
const props = withDefaults(
defineProps<{
canAdd?: boolean;
canDelete?: boolean;
tableId: number;
}>(),
{
canAdd: true,
canDelete: true,
},
);
const savedData = inject<SavedData>('savedData') as SavedData;
const onClick = (type: 'add' | 'remove') => {
if (type === 'add') {
savedData.joinTables.push(createEmptyJoinTable());
} else if (savedData.joinTables.length > 1) {
savedData.joinTables = savedData.joinTables.filter((t) => t.id !== props.tableId);
}
};
</script>

68
vue-project/my-kintone-plugin/src/components/basic/PluginTableArea.vue Normal file
View File

@@ -0,0 +1,68 @@
<template>
<plugin-row class="table-area flex-row border">
<div class="table-main-area ">
<plugin-row>
<plugin-dropdown label="取得元アプリ" :items="apps" v-model="table.app" />
</plugin-row>
<plugin-row>
<plugin-dropdown label="テーブル" :items="tables" v-model="table.table" />
</plugin-row>
<plugin-row class="flex-row" v-if="isJoinConditionShown(table)">
<plugin-label label="連結条件" />
<plugin-table-connect-row connector="=" v-model="table.onConditions" />
</plugin-row>
<plugin-row class="flex-row">
<plugin-label label="取得フィールド" />
<plugin-table-connect-row connector="→" v-model="table.fieldsMapping" />
</plugin-row>
<plugin-row class="flex-row">
<plugin-label label="絞込条件" />
<plugin-table-condition-row v-model="table.whereConditions" />
</plugin-row>
</div>
<div class="table-action-area">
<plugin-table-action-icon-group :can-delete="savedData.joinTables.length > 1" :table-id="table.id" />
</div>
</plugin-row>
</template>
<script setup lang="ts">
import type { JoinTable, SavedData } from '@/types/model';
import { inject } from 'vue';
const savedData = inject<SavedData>('savedData') as SavedData;
const props = defineProps<{ table: JoinTable }>();
const apps = [
{
label: '-------',
value: '',
},
{
label: 'lable 1',
value: 'value 1',
},
{
label: 'lable 2',
value: 'value 2',
},
];
const tables = [
{
label: '-------',
value: '-------',
},
{
label: 'tables 1',
value: 'tables 1',
},
{
label: 'tables 2',
value: 'tables 2',
},
];
const isJoinConditionShown = (table: JoinTable) => {
return savedData.joinTables[0].id !== table.id;
};
</script>

79
vue-project/my-kintone-plugin/src/components/basic/PluginTableConditionRow.vue Normal file
View File

@@ -0,0 +1,79 @@
<template>
<kuc-table :class-name.camel="['plugin-kuc-table']" :columns="columns" :data="modelValue" @change="changeRow"/>
</template>
<script setup lang="ts">
import type { WhereCondition } from '@/types/model';
import { defineProps, defineEmits } from 'vue';
import { Dropdown } from 'kintone-ui-component/lib/dropdown';
const props = defineProps<{
modelValue: WhereCondition[];
}>();
const renderDropdown = (cellData: string) => {
const dropdown = new Dropdown({
items: [
{ label: 'John Brown', value: 'john' },
{ label: 'Steven Gerard', value: 'steven' },
],
value: cellData,
});
return dropdown;
};
const renderCondition = (cellData: string) => {
const dropdown = new Dropdown({
items: [
{ label: 'John Brown', value: 'john' },
{ label: 'Steven Gerard', value: 'steven' },
],
value: cellData,
});
return dropdown;
};
const renderDynamicData = (cellData: string) => {
const dropdown = new Dropdown({
items: [
{ label: 'John Brown', value: 'john' },
{ label: 'Steven Gerard', value: 'steven' },
],
value: cellData,
});
return dropdown;
};
const columns = [
{
title: '取得元アプリのフィールド',
field: 'field',
render: renderDropdown,
},
{
title: '',
field: 'condition',
render: renderCondition,
},
{
title: '',
field: 'data',
render: renderDynamicData,
},
];
const leftFields = [] as kintone.fieldTypes.DropDown['Item'][];
const rightFields = [] as kintone.fieldTypes.DropDown['Item'][];
const emit = defineEmits<{
(e: 'update:modelValue', value: FieldsJoinMapping[]): void;
}>();
const changeRow = (item: FieldsJoinMapping, key: keyof FieldsJoinMapping, value: string) => {
};
const changeField = (item: FieldsJoinMapping, key: keyof FieldsJoinMapping, value: string) => {
item[key] = value;
emit('update:modelValue', props.modelValue);
};
</script>

61
vue-project/my-kintone-plugin/src/components/basic/PluginTableConnectRow.vue Normal file
View File

@@ -0,0 +1,61 @@
<template>
<kuc-table :class-name.camel="['plugin-kuc-table']" :columns="columns" :data="modelValue" @change="changeRow"/>
</template>
<script setup lang="ts">
import type { FieldsJoinMapping } from '@/types/model';
import { defineProps, defineEmits } from 'vue';
import { Dropdown } from 'kintone-ui-component/lib/dropdown';
const props = defineProps<{
connector: string;
modelValue: FieldsJoinMapping[];
}>();
const renderDropdown = (cellData: string) => {
const dropdown = new Dropdown({
items: [
{ label: 'John Brown', value: 'john' },
{ label: 'Steven Gerard', value: 'steven' },
],
value: cellData,
});
return dropdown;
};
const renderConnector = () => {
return props.connector;
};
const columns = [
{
title: '取得元アプリのフィールド',
field: 'leftField',
render: renderDropdown,
},
{
title: '',
field: 'connector',
render: renderConnector,
},
{
title: 'このアプリのフィールド',
field: 'rightField',
render: renderDropdown,
},
];
const leftFields = [] as kintone.fieldTypes.DropDown['Item'][];
const rightFields = [] as kintone.fieldTypes.DropDown['Item'][];
const emit = defineEmits<{
(e: 'update:modelValue', value: FieldsJoinMapping[]): void;
}>();
const changeRow = (item: FieldsJoinMapping, key: keyof FieldsJoinMapping, value: string) => {
};
const changeField = (item: FieldsJoinMapping, key: keyof FieldsJoinMapping, value: string) => {
item[key] = value;
emit('update:modelValue', props.modelValue);
};
</script>