From 8d4ab48b89ca405682f7ea7b4ed5654e9d9b01cc Mon Sep 17 00:00:00 2001
From: xue jiahao <xuejiahao@alicorns.co.jp>
Date: Mon, 27 Jan 2025 17:41:02 +0800
Subject: [PATCH] conditons (FROM_TODAY)

---
 .../src/components/Config.vue                 |  18 +-
 .../basic/PluginTableConditionRow.vue         |   8 +-
 .../basic/conditions/TableConditionValue.vue  |   5 +-
 .../TableConditionValueDateTime.vue           | 196 ++++++++++++++----
 .../my-kintone-plugin/src/css/config.css      |  21 ++
 vue-project/my-kintone-plugin/vite.config.ts  |   6 +-
 6 files changed, 197 insertions(+), 57 deletions(-)

diff --git a/vue-project/my-kintone-plugin/src/components/Config.vue b/vue-project/my-kintone-plugin/src/components/Config.vue
index 53608cf..c68e512 100644
--- a/vue-project/my-kintone-plugin/src/components/Config.vue
+++ b/vue-project/my-kintone-plugin/src/components/Config.vue
@@ -12,13 +12,20 @@
 
   <plugin-row class="footer-row border">
     <kuc-button text="キャンセル" type="normal" @click="cancel" />
-    <kuc-button text="保存する" class="save-btn" type="submit" @click="save" />
+    <kuc-button :disabled="!canSave" text="保存する" class="save-btn" type="submit" @click="save" />
   </plugin-row>
 
   <kuc-spinner :container="mainArea" ref="spinner"></kuc-spinner>
 </template>
 <script setup lang="ts">
-import { createEmptyJoinTable, loadApps, loadAppFieldsAndLayout, EMPTY_OPTION, getEmptyOnCondition, getMeta } from '@/js/helper';
+import {
+  createEmptyJoinTable,
+  loadApps,
+  loadAppFieldsAndLayout,
+  EMPTY_OPTION,
+  getEmptyOnCondition,
+  getMeta,
+} from '@/js/helper';
 import { isType, type OneOf, type Properties } from '@/js/kintone-rest-api-client';
 import type { CachedData, FieldsInfo, JoinTable, SavedData } from '@/types/model';
 import type { Spinner } from 'kintone-ui-component';
@@ -27,6 +34,7 @@ import { onMounted, watch, provide, reactive, ref, shallowRef, nextTick } from '
 
 const props = defineProps<{ pluginId: string }>();
 const loading = ref(false);
+const canSave = ref(true);
 const data: SavedData = reactive({
   buttonName: '',
   joinTables: [createEmptyJoinTable()],
@@ -38,6 +46,9 @@ const cachedData: CachedData = reactive({
 });
 
 provide('savedData', data);
+provide('canSave', (data: boolean) => {
+  canSave.value = data;
+});
 provide('cachedData', cachedData);
 
 const mainArea = shallowRef<HTMLElement | null>(null);
@@ -65,6 +76,7 @@ watch(loading, (load) => {
 watch(
   () => data.joinTables.length,
   (newLength) => {
+    console.log(data.joinTables);
     if (newLength === 1) {
       data.joinTables[0].onConditions = [getEmptyOnCondition()];
     }
@@ -75,7 +87,7 @@ function save() {
   const currentAppMeta = cachedData.currentAppFields.fields;
   const convertJoinTables = JSON.parse(JSON.stringify(data.joinTables)) as JoinTable<OneOf | string>[];
   convertJoinTables.forEach((item) => {
-    const meta = getMeta(item.meta as Properties, item.table,true);
+    const meta = getMeta(item.meta as Properties, item.table, true);
 
     // Process onConditions
     item.onConditions.forEach((condition) => {
diff --git a/vue-project/my-kintone-plugin/src/components/basic/PluginTableConditionRow.vue b/vue-project/my-kintone-plugin/src/components/basic/PluginTableConditionRow.vue
index beee2f7..2cbe201 100644
--- a/vue-project/my-kintone-plugin/src/components/basic/PluginTableConditionRow.vue
+++ b/vue-project/my-kintone-plugin/src/components/basic/PluginTableConditionRow.vue
@@ -1,5 +1,5 @@
 <template>
-  <kuc-table className='plugin-kuc-table condition-table' :columns="columns" :data="modelValue"  @change="tableChanged"/>
+  <kuc-table className='plugin-kuc-table condition-table' :columns="columns" :data="modelValue" />
 </template>
 
 <script setup lang="ts">
@@ -19,6 +19,8 @@ const cachedData = inject<CachedData>('cachedData') as CachedData;
 const selectedAppData = inject<CachedSelectedAppData>('selectedAppData') as CachedSelectedAppData;
 // const table = computed(() => selectedAppData.table.table);
 
+const canSave = inject<(canSave: boolean) => void>('canSave') as (canSave: boolean) => void;
+
 const columns = reactive([
   {
     title: '取得元アプリのフィールド',
@@ -79,6 +81,7 @@ const columns = reactive([
       const vnode = h(TableConditionValue, {
         modelValue: computed(() => (search(props.modelValue, rowData.id) as WhereCondition)?.data || ''),
         selectedAppData,
+        canSave,
         id: rowData.id,
         whereConditions: props.modelValue,
         'onUpdate:modelValue': ({obj, value}) => {
@@ -91,7 +94,4 @@ const columns = reactive([
   },
 ]);
 
-function tableChanged(e) {
-  console.log(e);
-}
 </script>
diff --git a/vue-project/my-kintone-plugin/src/components/basic/conditions/TableConditionValue.vue b/vue-project/my-kintone-plugin/src/components/basic/conditions/TableConditionValue.vue
index 283b1d6..cc8e627 100644
--- a/vue-project/my-kintone-plugin/src/components/basic/conditions/TableConditionValue.vue
+++ b/vue-project/my-kintone-plugin/src/components/basic/conditions/TableConditionValue.vue
@@ -32,15 +32,18 @@ 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, type Ref } from 'vue';
+import { defineProps, defineEmits, computed, type Ref, inject, provide } from 'vue';
 
 const props = defineProps<{
   modelValue: Ref<string>;
   selectedAppData: CachedSelectedAppData;
   whereConditions: WhereCondition[];
   id: string;
+  canSave: (canSave: boolean) => void;
 }>();
 
+provide('canSave', props.canSave);
+
 const whereCondition = computed(() => search(props.whereConditions, props.id) as WhereCondition | undefined);
 
 const type = computed(() => {
diff --git a/vue-project/my-kintone-plugin/src/components/basic/conditions/TableConditionValueDateTime.vue b/vue-project/my-kintone-plugin/src/components/basic/conditions/TableConditionValueDateTime.vue
index 576c231..2f3bc4e 100644
--- a/vue-project/my-kintone-plugin/src/components/basic/conditions/TableConditionValueDateTime.vue
+++ b/vue-project/my-kintone-plugin/src/components/basic/conditions/TableConditionValueDateTime.vue
@@ -1,7 +1,7 @@
 <template>
-  <div style="display: flex">
+  <div style="display: flex; position: relative">
     <kuc-combobox
-      :value="optionValue"
+      :value="funcValue"
       :items="options"
       @change.stop="updateFuncValue"
       :disabled="disabled"
@@ -9,26 +9,50 @@
       :key="time"
     />
 
-    <template v-if="isInput">
-      <kuc-datetime-picker v-if="time" :value="dateTimeValue" @change.stop="updateValue" :disabled="disabled" />
-      <kuc-date-picker v-else :value="dateTimeValue" @change.stop="updateValue" :disabled="disabled" />
+    <template v-if="isInput()">
+      <kuc-datetime-picker v-if="time" :value="inputValue" @change.stop="updateValue" :disabled="disabled" />
+      <kuc-date-picker v-else :value="inputValue" @change.stop="updateValue" :disabled="disabled" />
     </template>
     <kuc-combobox
-      v-else-if="isWeek"
+      v-else-if="isWeek()"
       :items="weekOptions"
-      :value="inputValue"
+      :value="selectValue"
       @change.stop="updateValue"
       :disabled="disabled"
       :className="weekClassName"
     />
     <kuc-combobox
-      v-else-if="isMonth"
+      v-else-if="isMonth()"
       :items="monthOptions"
-      :value="inputValue"
+      :value="selectValue"
       @change.stop="updateValue"
       :disabled="disabled"
       :className="monthClassName"
     />
+
+    <template v-if="isFromToday()">
+      <kuc-text
+        :error="fromTodayError"
+        :value="inputValue"
+        @change.stop="updateFromTodayValue"
+        :disabled="disabled"
+        :className="fromTodayError ? 'from-today-input input error' : 'from-today-input input'"
+      />
+      <kuc-combobox
+        :items="fromOptions"
+        :value="selectValue"
+        @change.stop="updateFromTodaySelectValue"
+        :disabled="disabled"
+        className="from-today-input"
+      />
+      <kuc-combobox
+        :items="additionOptions"
+        :value="additionSelectValue"
+        @change.stop="updateFromTodayAdditionValue"
+        :disabled="disabled"
+        className="from-today-input addition"
+      />
+    </template>
   </div>
 </template>
 
@@ -38,7 +62,7 @@ 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';
+import { defineProps, defineEmits, computed, ref, watch, inject, type Ref } from 'vue';
 
 const props = defineProps<{
   value: string;
@@ -46,30 +70,43 @@ const props = defineProps<{
   disabled: boolean;
 }>();
 
-const dateTimeValue = ref('');
-const inputValue = ref('');
-const optionValue = ref('');
+const canSave = inject<(canSave: boolean) => void>('canSave');
+
+const inputValue = ref('');
+const selectValue = ref('');
+const additionSelectValue = ref('');
+const funcValue = ref('');
+
+const fromTodayError = ref('');
+
+watch(
+  () => fromTodayError.value,
+  () => {
+    canSave?.(!fromTodayError.value);
+  },
+);
+
+const isInput = (func = funcValue.value) => func === dateFuncMap[''].value;
+const isWeek = (func = funcValue.value) => func.includes('WEEK');
+const isMonth = (func = funcValue.value) => func.includes('MONTH');
+const isFromToday = (func = funcValue.value) => func.includes('FROM_TODAY');
 
-const isInput = computed(() => optionValue.value === dateFuncMap[''].value);
-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);
 const weekClassName = computed(() => {
-  if (isWeek.value) {
-    return inputValue.value === DEFAULT_WEEK_MONTH ? 'week-all-combobox' : 'week-combobox';
+  if (isWeek()) {
+    return selectValue.value === DEFAULT_WEEK_MONTH ? 'week-all-combobox' : 'week-combobox';
   }
   return '';
 });
 const monthClassName = computed(() => {
-  if (isMonth.value) {
-    return inputValue.value === DEFAULT_WEEK_MONTH ? 'month-all-combobox' : 'month-combobox';
+  if (isMonth()) {
+    return selectValue.value === DEFAULT_WEEK_MONTH ? 'month-all-combobox' : 'month-combobox';
   }
   return '';
 });
 const shortConditionClass = computed(() => {
-  return optionValue.value !== dateFuncMap[''].value &&
-    optionValue.value !== dateFuncMap['FROM_TODAY'].value &&
-    optionValue.value !== dateFuncMap['NOW'].value
+  return funcValue.value !== dateFuncMap[''].value &&
+    funcValue.value !== dateFuncMap['FROM_TODAY'].value &&
+    funcValue.value !== dateFuncMap['NOW'].value
     ? 'short datetime-condition-combobox'
     : 'datetime-condition-combobox';
 });
@@ -78,34 +115,35 @@ const regex = /^(?<func>\w+)\((?<val>.*)\)$/;
 
 watch(
   () => props.value,
-  () => {
+  (current, before) => {
     if (props.value === '') {
       // select default one when empty
-      optionValue.value = dateFuncMap[''].value;
+      funcValue.value = dateFuncMap[''].value;
+      selectValue.value = '';
       inputValue.value = '';
-      dateTimeValue.value = '';
       return;
     }
 
-    console.log(props.value, props.value.match(regex));
     const match = props.value.match(regex);
 
-    optionValue.value = dateFuncMap[(match?.groups?.func || '') as DateFuncKey].value;
+    funcValue.value = dateFuncMap[(match?.groups?.func || '') as DateFuncKey].value;
 
-    const value = match?.groups?.val || (props.value.includes("%") ? '' : props.value);
+    const value = match?.groups?.val || (props.value.includes('%') ? '' : props.value);
 
-    inputValue.value = '';
-    dateTimeValue.value = '';
-
-    if (isInput.value) {
-      dateTimeValue.value = value;
-    } else if (isWeek.value || isMonth.value) {
-      inputValue.value = value || DEFAULT_WEEK_MONTH;
-    } else if (isFromToday.value) {
-      // inputValue.value = value;
-      // dateTimeValue.value = func;
+    // TODO set values is this method but isFromToday
+    if (isInput()) {
+      inputValue.value = value;
+      selectValue.value = '';
+    } else if (isWeek() || isMonth()) {
+      inputValue.value = '';
+      selectValue.value = value || DEFAULT_WEEK_MONTH;
+    } else if (isFromToday() && !(before && isFromToday(before))) {
+      // only called when load page
+      const split = value.split(', ');
+      inputValue.value = split[0].replace('-', '');
+      selectValue.value = split[1] || fromOptions[0].value;
+      additionSelectValue.value = split[0] ? (split[0].startsWith('-') ? '-' : '+') : '+';
     }
-    console.log(optionValue.value, dateTimeValue.value, inputValue.value);
   },
   { immediate: true },
 );
@@ -125,15 +163,76 @@ const updateValue = (event: KucEvent<ComboboxChangeEventDetail>) => {
 };
 
 const updateFuncValue = (event: KucEvent<ComboboxChangeEventDetail>) => {
+  selectValue.value = '';
   inputValue.value = '';
-  dateTimeValue.value = '';
   emit('change', { detail: { value: buildResult({ func: event.detail.value }) } });
 };
 
-function buildResult({ func = optionValue.value, value }: { func?: string; value?: string }) {
-  let val = value || dateTimeValue.value;
-  if (isWeek.value || isMonth.value) {
-    val = value || inputValue.value;
+const updateFromTodayValue = (event: KucEvent<ComboboxChangeEventDetail>) => {
+  const value = buildFromTodayResult({ value: event.detail.value });
+  if (!value) return;
+  inputValue.value = event.detail.value as string;
+  emit('change', { detail: { value } });
+};
+
+const updateFromTodaySelectValue = (event: KucEvent<ComboboxChangeEventDetail>) => {
+  const value = buildFromTodayResult({ select: event.detail.value });
+  if (!value) return;
+  selectValue.value = event.detail.value as string;
+  emit('change', { detail: { value } });
+};
+
+const updateFromTodayAdditionValue = (event: KucEvent<ComboboxChangeEventDetail>) => {
+  const value = buildFromTodayResult({ addition: event.detail.value });
+  if (!value) return;
+  additionSelectValue.value = event.detail.value as string;
+  emit('change', { detail: { value } });
+};
+
+type FromTodayParam = {
+  value?: string;
+  select?: string;
+  addition?: string;
+};
+
+function buildFromTodayResult({
+  value = inputValue.value || '0',
+  select = selectValue.value || 'DAYS',
+  addition = additionSelectValue.value || '-',
+}: FromTodayParam) {
+  if (value?.match(/^-?[0-9]+$/)) {
+    fromTodayError.value = '';
+    let res = value;
+    if (value && value !== '0') {
+      if (addition === '-') {
+        if (!value.startsWith('-')) {
+          res = '-' + res;
+        } else {
+          res = res.replace('-', '');
+        }
+      } else if (addition === '+') {
+        if (value.startsWith('-')) {
+          res = res.replace('-', '');
+        }
+      }
+    }
+    return funcValue.value.replace('%s', select).replace('%d', res);
+  } else if (!fromTodayError.value) {
+    inputValue.value = value || '';
+    fromTodayError.value = '整数値を指定してください。';
+    return;
+  }
+}
+
+type Param = {
+  func?: string;
+  value?: string;
+};
+
+function buildResult({ func = funcValue.value, value }: Param) {
+  let val = value || inputValue.value;
+  if (isWeek(func) || isMonth(func)) {
+    val = value || selectValue.value;
     val = val === DEFAULT_WEEK_MONTH ? '' : val;
   }
   return func.replace('%s', val || '');
@@ -148,6 +247,11 @@ const fromOptions = [
   { label: '年', value: 'YEARS' },
 ];
 
+const additionOptions = [
+  { label: '前', value: '-' },
+  { label: '後', value: '+' },
+];
+
 const weekOptions = [
   { label: 'すべての曜日', value: '_' },
   { label: '日', value: 'SUNDAY' },
diff --git a/vue-project/my-kintone-plugin/src/css/config.css b/vue-project/my-kintone-plugin/src/css/config.css
index 7fd6387..26562ef 100644
--- a/vue-project/my-kintone-plugin/src/css/config.css
+++ b/vue-project/my-kintone-plugin/src/css/config.css
@@ -185,4 +185,25 @@
 }
 .month-combobox {
   --kuc-combobox-toggle-width: 86px;
+}
+.from-today-input {
+  --kuc-text-input-width: 80px;
+  --kuc-combobox-toggle-width: 80px;
+}
+.from-today-input.input {
+  --kuc-text-input-width: 60px;
+  --kuc-combobox-toggle-width: 60px;
+}
+
+/* .from-today-input error */
+.condition-table.plugin-kuc-table > table > tbody > tr > td {
+  vertical-align: top;
+}
+.from-today-input.input div[class^="kuc-base-error"] {
+  position: absolute;
+  left: 0;
+  right: 0;
+}
+.from-today-input.input.error {
+  margin-bottom: 20px;
 }
\ No newline at end of file
diff --git a/vue-project/my-kintone-plugin/vite.config.ts b/vue-project/my-kintone-plugin/vite.config.ts
index 7717992..f6bd38b 100644
--- a/vue-project/my-kintone-plugin/vite.config.ts
+++ b/vue-project/my-kintone-plugin/vite.config.ts
@@ -1,8 +1,8 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import copy from "rollup-plugin-copy";
-import path from 'path';
-import fs from 'fs';
+import * as path from 'path';
+import * as fs from 'fs';
 import Components from 'unplugin-vue-components/vite';
 
 function replaceKucTagsPlugin() {
@@ -80,6 +80,6 @@ export default defineConfig({
         assetFileNames: 'src/[ext]/[name].[ext]',
       },
     },
-    sourcemap:false,
+    sourcemap: 'inline',
   }
 })