conditons (FROM_TODAY)

2025-01-27 17:41:02 +08:00
parent dfcb522951
commit 8d4ab48b89
6 changed files with 197 additions and 57 deletions
--- 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) => {
--- 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>
--- 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(() => {
--- 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' },
--- 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;
 }
--- 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',
  }
 })