fix bug

vue-project/my-kintone-plugin/components.d.ts

@@ -20,5 +20,6 @@ declare module 'vue' {
     TableCombobox: typeof import('./src/components/basic/TableCombobox.vue')['default']
     TableCondition: typeof import('./src/components/basic/conditions/TableCondition.vue')['default']
     TableConditionValue: typeof import('./src/components/basic/conditions/TableConditionValue.vue')['default']
+    TableConditionValueDateTime: typeof import('./src/components/basic/conditions/TableConditionValueDateTime.vue')['default']
   }
 }

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

@@ -59,7 +59,7 @@ const columns = reactive([
     render: (cellData: string, rowData: WhereCondition) => {
       const container = document.createElement('div');
       const vnode = h(TableCondition, {
-        modelValue: (search(props.modelValue, rowData.id) as WhereCondition)?.condition || '',
+        modelValue: computed(() => (search(props.modelValue, rowData.id) as WhereCondition)?.condition || ''),
         selectedAppData,
         id: rowData.id,
         whereConditions: props.modelValue,
@@ -80,7 +80,7 @@ const columns = reactive([
     render: (cellData: string, rowData: WhereCondition) => {
       const container = document.createElement('div');
       const vnode = h(TableConditionValue, {
-        modelValue: (search(props.modelValue, rowData.id) as WhereCondition)?.data || '',
+        modelValue: computed(() => (search(props.modelValue, rowData.id) as WhereCondition)?.data || ''),
         selectedAppData,
         id: rowData.id,
         whereConditions: props.modelValue,

vue-project/my-kintone-plugin/src/components/basic/conditions/TableCondition.vue

@@ -14,10 +14,10 @@ import { search } from '@/js/helper';
 import type { CachedSelectedAppData, WhereCondition } from '@/types/model';
 import type { KucEvent } from '@/types/my-kintone';
 import type { ComboboxChangeEventDetail } from 'kintone-ui-component';
-import { defineProps, defineEmits, computed, watch, ref } from 'vue';
+import { defineProps, defineEmits, computed, watch, ref, type Ref } from 'vue';
 
 const props = defineProps<{
-  modelValue: string;
+  modelValue: Ref<string>;
   selectedAppData: CachedSelectedAppData;
   whereConditions: WhereCondition[];
   id: string;
@@ -33,14 +33,16 @@ const items = computed(() =>
   ),
 );
 
-const value = ref(props.modelValue);
+const value = ref(props.modelValue.value);
 
 watch(
   () => items,
   () => {
+    if (whereCondition.value?.condition === '') {
       const option = items.value?.[0] || { value: '' };
       value.value = option.value;
       updateValue({ detail: option });
+    }
   },
   { deep: true },
 );

vue-project/my-kintone-plugin/src/components/basic/conditions/TableConditionValue.vue

@@ -1,28 +1,29 @@
 <template>
   <kuc-text
-    v-if="type == 'kuc-text'"
+    v-if="type === 'kuc-text'"
-    :value="modelValue"
+    :value="modelValue.value"
     @change="updateValue"
     :disabled="selectedAppData.loading == undefined ? false : selectedAppData.loading"
   />
   <kuc-combobox
-    v-else-if="type == 'kuc-combobox'"
+    v-else-if="type === 'kuc-combobox'"
-    :value="modelValue"
+    :value="modelValue.value"
     @change="updateValue"
     :disabled="selectedAppData.loading == undefined ? false : selectedAppData.loading"
   />
   <kuc-time-picker
-    v-else-if="type == 'kuc-time'"
+    v-else-if="type === 'kuc-time'"
-    :value="modelValue"
+    :value="modelValue.value"
     @change="updateValue"
     :disabled="selectedAppData.loading == undefined ? false : selectedAppData.loading"
   />
-  <!-- <table-condition-value-date-time
+  <table-condition-value-date-time
-    v-else-if="type == 'time'|type == 'date"
+    v-else-if="type === 'time' || type == 'date'"
-    :value="modelValue"
+    :time="type == 'time'"
+    :value="modelValue.value"
     @change="updateValue"
     :disabled="selectedAppData.loading == undefined ? false : selectedAppData.loading"
-  /> -->
+  />
 </template>
 
 <script setup lang="ts">
@@ -31,10 +32,10 @@ import { getFieldObj, search } from '@/js/helper';
 import type { CachedSelectedAppData, WhereCondition } from '@/types/model';
 import type { KucEvent } from '@/types/my-kintone';
 import type { ComboboxChangeEventDetail, TextInputEventDetail } from 'kintone-ui-component';
-import { defineProps, defineEmits, computed } from 'vue';
+import { defineProps, defineEmits, computed, type Ref } from 'vue';
 
 const props = defineProps<{
-  modelValue: string;
+  modelValue: Ref<string>;
   selectedAppData: CachedSelectedAppData;
   whereConditions: WhereCondition[];
   id: string;
@@ -44,7 +45,8 @@ const whereCondition = computed(() => search(props.whereConditions, props.id) as
 
 const type = computed(() => {
   const field = getFieldObj(whereCondition.value?.field || '', props.selectedAppData.appFields, '');
-  return getComponent(whereCondition.value?.condition || '', field);
+  const type = getComponent(whereCondition.value?.condition || '', field)
+  return type;
 });
 
 type EmitData = {

vue-project/my-kintone-plugin/src/components/basic/conditions/TableConditionValueDateTime.vue

@@ -0,0 +1,113 @@
+<template>
+  <div>
+    <kuc-combobox :value="optionValue" :items="options" @change="updateValue" :disabled="disabled" />
+
+    <div v-if="!optionValue">
+      <kuc-datetime-picker v-if="time" :value="dateTimeValue" @change="updateValue" :disabled="disabled" />
+      <kuc-date-picker v-else :value="dateTimeValue" @change="updateValue" :disabled="disabled" />
+    </div>
+    <kuc-combobox
+      v-else-if="isWeek"
+      :items="weekOptions"
+      :value="inputValue"
+      @change="updateValue"
+      :disabled="disabled"
+    />
+    <kuc-combobox
+      v-else-if="isMonth"
+      :items="monthOptions"
+      :value="inputValue"
+      @change="updateValue"
+      :disabled="disabled"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getComponent, getDateFuncList } from '@/js/conditions';
+import { getFieldObj, search } from '@/js/helper';
+import type { CachedSelectedAppData, WhereCondition } from '@/types/model';
+import type { KucEvent } from '@/types/my-kintone';
+import type { ComboboxChangeEventDetail, TextInputEventDetail } from 'kintone-ui-component';
+import { defineProps, defineEmits, computed, ref, watch } from 'vue';
+
+const props = defineProps<{
+  value: string;
+  time: boolean;
+  disabled: boolean;
+}>();
+
+// const regex = /^(?<func>\w+)\((?<val>.+)\)$|^(?<val>\d+)$/;
+const dateTimeValue = ref('');
+const inputValue = ref('');
+const optionValue = ref('');
+
+const isWeek = computed(() => optionValue.value?.indexOf('WEEK') >= 0);
+const isMonth = computed(() => optionValue.value?.indexOf('MONTH') >= 0);
+const isFromToday = computed(() => optionValue.value?.indexOf('FROM_TODAY') >= 0);
+
+watch(
+  () => props.value,
+  () => {
+    // const match = props.value.match(regex);
+    // const func = match?.groups?.func || '';
+    // optionValue.value = func;
+
+    // const value = match?.groups?.val || '';
+    // inputValue.value = '';
+    // dateTimeValue.value = '';
+
+    // if (!optionValue.value) {
+    //   dateTimeValue.value = value;
+    // } else if (isWeek.value || isMonth.value) {
+    //   inputValue.value = value;
+    // } else if (isFromToday.value) {
+    //   // inputValue.value = value;
+    //   // dateTimeValue.value = func;
+    // }
+  },
+  { immediate: true },
+);
+
+const options = computed(() => {
+  return getDateFuncList(props.time).map((item) => {
+    return { label: typeof item.label === 'function' ? item.label(props.time) : item.label, value: item.value };
+  });
+});
+
+const emit = defineEmits<{
+  (e: 'change', data: KucEvent<{ value: string }>): void;
+}>();
+
+const updateValue = (event: KucEvent<ComboboxChangeEventDetail>) => {
+  emit('change', { detail: { value: buildResult() } });
+};
+
+function buildResult() {
+  return '';
+}
+
+const fromOptions = [
+  { label: '日', value: 'DAYS' },
+  { label: '周', value: 'WEEKS' },
+  { label: '月', value: 'MONTHS' },
+  { label: '年', value: 'YEARS' },
+];
+
+const weekOptions = [
+  { label: 'すべての曜日', value: '' },
+  { label: '日', value: 'SUNDAY' },
+  { label: '月', value: 'MONDAY' },
+  { label: '火', value: 'TUESDAY' },
+  { label: '水', value: 'WEDNESDAY' },
+  { label: '木', value: 'THURSDAY' },
+  { label: '金', value: 'FRIDAY' },
+  { label: '土', value: 'SATURDAY' },
+];
+
+const monthOptions = [{ label: 'すべて', value: '' }];
+for (let i = 1; i <= 31; i++) {
+  monthOptions.push({ label: i.toString() + '日', value: i.toString() });
+}
+monthOptions.push({ label: '末日', value: 'LAST' });
+</script>

vue-project/my-kintone-plugin/src/js/conditions.ts

@@ -5,35 +5,35 @@ import { getFieldObj } from './helper';
 // conditionValue = '' | 'eq' | 'ne'
 // conditionItem  = { value: 'eq', label: '=（等しい）', type: 'input', func: (a: string, b: string) => a === b }
 //                = conditionMap[conditionValue]
-export type ConditionValue = ""| "="
+export type ConditionValue = '' | '=' | '!=' | '>=' | '<=' | '<' | '>' | 'like' | 'not like' | 'in' | 'not in';
-| "!="
-| ">="
-| "<="
-| "<"
-| ">"
-| "like"
-| "not like"
-| "in"
-| "not in";
 
 type ConditionItem = {
   value: ConditionValue;
   label: string | ((field: OneOf) => string);
-  type: ComponentType; // | ((field: OneOf) => ComponentType);
+  type: ComponentType | ((field: OneOf) => ComponentType);
 };
 
 export const conditionList: ConditionItem[] = [
-  { value: '=', label: '=（等しい）', type: 'input' },
+  { value: '=', label: '=（等しい）', type: (field) => dateTimeComponent[field.type] || 'input' },
-  { value: '!=', label: '≠ （等しくない）', type: 'input' },
+  { value: '!=', label: '≠ （等しくない）', type: (field) => dateTimeComponent[field.type] || 'input' },
-  { value: '<=', label: (field) => isDateTimeType(field) ? '≦ （以前）' : '≦ （以下）', type: 'input' },
+  {
+    value: '<=',
+    label: (field) => (isDateTimeType(field) ? '≦ （以前）' : '≦ （以下）'),
+    type: (field) => dateTimeComponent[field.type] || 'input',
+  },
   { value: '<', label: '< （より前）', type: 'input' },
+  {
+    value: '>=',
+    label: (field) => (isDateTimeType(field) ? '≧ （以降）' : '≧ （以上）'),
+    type: (field) => dateTimeComponent[field.type] || 'input',
+  },
   { value: '>', label: '> （より後）', type: 'input' },
-  { value: '>=', label: (field) => isDateTimeType(field) ? '≧ （以降）' : '≧ （以上）', type: 'input' },
   { value: 'like', label: '次のキーワードを含む', type: 'input' },
   { value: 'not like', label: '次のキーワードを含まない', type: 'input' },  
   { value: 'in', label: '次のいずれかを含む', type: 'input' },
   { value: 'not in', label: '次のいずれも含まない', type: 'input' },
 ];
+
 // search from conditionList
 // conditionItem = conditionMap[conditionValue]
 export const conditionMap: Record<ConditionValue, ConditionItem> = conditionList.reduce(
@@ -45,7 +45,7 @@ export const conditionMap: Record<ConditionValue, ConditionItem> = conditionList
 );
 
 type FieldConditions = Partial<Record<FieldType, ConditionValue[]>>;
-const textCondition: ConditionValue[] = ['=', '!=', 'in', 'like','not like'];
+const textCondition: ConditionValue[] = ['=', '!=', 'in', 'like', 'not like'];
 const numberCondition: ConditionValue[] = ['=', '!=', '<=', '>='];
 const timeCondition: ConditionValue[] = ['=', '!=', '<=', '>=', '<', '>'];
 const containsCondition: ConditionValue[] = ['in', 'not in'];
@@ -83,7 +83,7 @@ export const getAvailableCondition = (fieldCode: string, fieldsInfo: FieldsInfo,
   if (!fieldObj) return;
   const conditions = fieldConditions[fieldObj.type] || textCondition; // TODO a fallback here
   return conditions.map((condition) => {
-    const res = {...conditionMap[condition]}
+    const res = { ...conditionMap[condition] };
     res.label = typeof res.label === 'function' ? res.label(fieldObj) : res.label;
     return res;
   });
@@ -99,19 +99,53 @@ const component = {
 
 export const isDateTimeType = (field: OneOf) => {
   return field.type in dateTimeComponent;
-}
+};
 
 const dateTimeComponent: Partial<Record<FieldType, ComponentType>> = {
   TIME: 'time',
-  DATE: 'date',
+  // DATE: 'date',
-  DATETIME: 'datetime',
+  // DATETIME: 'datetime',
-  CREATED_TIME: 'datetime',
+  // CREATED_TIME: 'datetime',
-  UPDATED_TIME: 'datetime',
+  // UPDATED_TIME: 'datetime',
-}
+};
 
 export type ComponentType = keyof typeof component;
 export const getComponent = (value: ConditionValue, fieldObj: OneOf) => {
-  if (!value) return;
+  if (!value || !fieldObj) return;
   const condition = conditionMap[value].type;
   return component[typeof condition === 'function' ? condition(fieldObj) : condition];
 };
+
+type DateFuncItem = {
+  value: string;
+  label: string | ((isTime: boolean) => string);
+  condition?: 'datetime' | 'date';
+  key: DateFuncKey;
+};
+
+export type DateFuncKey = '' | 'FROM_TODAY' | 'NOW' | 'TODAY' | 'THIS_WEEK' | 'THIS_MONTH';
+
+export const dateFuncList: DateFuncItem[] = [
+  { key: '', value: '%s', label: (isTime) => (isTime ? '日時を指定' : '日付を指定') },
+  { key: 'FROM_TODAY', value: 'FROM_TODAY(%s)', label: '今日から' },
+  { key: 'NOW', value: 'NOW()', label: '当時刻', condition: 'datetime' },
+  { key: 'TODAY', value: 'TODAY()', label: '今日' },
+  { key: 'THIS_WEEK', value: 'THIS_WEEK(%s)', label: '今週' },
+  { key: 'THIS_MONTH', value: 'THIS_MONTH(%s)', label: '今月' },
+];
+
+// search from dateFuncList
+// DateFuncItem = dateFuncMap[DateFuncKey]
+export const dateFuncMap: Record<DateFuncKey, DateFuncItem> = dateFuncList.reduce(
+  (map, item) => {
+    map[item.key] = item;
+    return map;
+  },
+  {} as Record<DateFuncKey, DateFuncItem>,
+);
+
+export const getDateFuncList = (hasTime: boolean) => {
+  return dateFuncList.filter((item) => {
+    return item.condition ? item.condition === (hasTime ? 'datetime' : 'date') : true;
+  });
+};