finish UI

vue-project/my-kintone-plugin/src/components/basic/PluginDropdown.vue

@@ -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>

vue-project/my-kintone-plugin/src/components/basic/PluginInput.vue

@@ -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>

vue-project/my-kintone-plugin/src/components/basic/PluginLabel.vue

@@ -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>

vue-project/my-kintone-plugin/src/components/basic/PluginRow.vue

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

vue-project/my-kintone-plugin/src/components/basic/PluginTableActionIcon.vue

@@ -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>

vue-project/my-kintone-plugin/src/components/basic/PluginTableActionIconGroup.vue

@@ -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>

vue-project/my-kintone-plugin/src/components/basic/PluginTableArea.vue

@@ -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>

vue-project/my-kintone-plugin/src/components/basic/PluginTableConditionRow.vue

@@ -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>

vue-project/my-kintone-plugin/src/components/basic/PluginTableConnectRow.vue

@@ -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>