Merged PR 98: 階層化ドロップダウンの実装完了

階層化ドロップダウンの実装完了しました。 Related work items: #227
2024-09-24 01:31:02 +00:00
parent 138ede6191 f30ffaa137
commit ae67ec8751
15 changed files with 1059 additions and 60 deletions
--- a/frontend/src/components/CascadingDropDownBox.vue
+++ b/frontend/src/components/CascadingDropDownBox.vue
@@ -0,0 +1,271 @@
+<template>
+  <div>
+    <q-stepper v-model="step" ref="stepper" color="primary" animated flat>
+      <q-step :name="1" title="データソースの設定" icon="app_registration" :done="step > 1">
+        <div class="row justify-between items-center">
+          <div>アプリの選択 :</div>
+          <div>
+            <a v-if="data.sourceApp?.name" class="q-mr-xs"
+              :href="data.sourceApp ? `${authStore.currentDomain.kintoneUrl}/k/${data.sourceApp.id}` : ''"
+              target="_blank" title="Kiontoneへ">
+              {{ data.sourceApp?.name }}
+            </a>
+            <div v-else class="text-red">APPを選択してください</div>
+            <q-btn v-if="data.sourceApp?.name" flat color="grey" icon="clear" size="sm" padding="none"
+              @click="clearSelectedApp" />
+          </div>
+          <q-btn outline dense label="変更" padding="xs sm" color="primary" @click="showAppDialog" />
+        </div>
+
+        <!-- フィールド設定部分 -->
+        <template v-if="data.sourceApp?.name">
+          <q-separator class="q-mt-md" />
+          <div class="q-my-md row justify-between items-center">
+            データ階層を設定する :
+            <q-btn icon="add" size="sm" padding="xs" outline color="primary" @click="addRow" />
+          </div>
+          <q-virtual-scroll style="max-height: 13.5rem;" :items="data.fieldList" separator v-slot="{ item, index }">
+            <div class="row justify-between items-center q-my-md">
+              <div>{{ index + 1 }}階層 :</div>
+              <div>{{ item.source?.name }}</div>
+              <q-btn-group outline>
+                <q-btn outline dense label="変更" padding="xs sm" color="primary"
+                  @click="() => showFieldDialog(item, 'source')" />
+                <q-btn outline dense label="削除" padding="xs sm" color="primary" @click="() => delRow(index)" />
+              </q-btn-group>
+            </div>
+          </q-virtual-scroll>
+        </template>
+
+        <!-- アプリ選択ダイアログ -->
+        <ShowDialog v-model:visible="data.sourceApp.showSelectApp" name="アプリ選択" @close="closeAppDialog" min-width="50vw"
+          min-height="50vh">
+          <template v-slot:toolbar>
+            <q-input dense debounce="300" v-model="data.sourceApp.appFilter" placeholder="検索" clearable>
+              <template v-slot:before>
+                <q-icon name="search" />
+              </template>
+            </q-input>
+          </template>
+          <AppSelectBox ref="appDg" name="アプリ" type="single" :filter="data.sourceApp.appFilter" />
+        </ShowDialog>
+      </q-step>
+
+      <q-step :name="2" title="ドロップダウンフィールドの設定" icon="multiple_stop"  :done="step > 2">
+        <div class="row q-pa-sm q-col-gutter-x-sm flex-center">
+          <div class="col-grow row q-col-gutter-x-sm">
+            <div class="col-6">データソース</div>
+            <div class="col-6">ドロップダウンフィールド</div>
+          </div>
+          <div class="col-auto">
+            <div style="width: 88px; height: 1px;"></div>
+          </div>
+        </div>
+        <div v-for="(item) in data.fieldList" :key="item.id" class="row q-pa-sm q-col-gutter-x-sm flex-center">
+          <div class="col-grow row q-col-gutter-x-sm">
+
+            <div class="col-6">{{ item.source.name }}</div>
+            <div class="col-6">{{ item.dropDown?.name }}</div>
+          </div>
+          <div class="col-auto">
+            <div class="row justify-end">
+              <q-btn-group outline>
+                <q-btn outline dense label="設定" padding="xs sm" color="primary"
+                  @click="() => showFieldDialog(item, 'dropDown')" />
+                <q-btn outline dense label="クリア" padding="xs sm" color="primary"
+                  @click="() => item.dropDown = undefined" />
+              </q-btn-group>
+            </div>
+          </div>
+        </div>
+      </q-step>
+
+      <!-- ステップナビゲーション -->
+      <template v-slot:navigation>
+        <q-stepper-navigation>
+          <div class="row justify-end q-mt-md">
+            <q-btn v-if="step > 1" flat color="primary" @click="$refs.stepper.previous()" label="戻る" class="q-ml-sm" />
+            <q-btn @click="stepperNext" color="primary" :label="step === 2 ? '保存' : '次へ'"
+              :disable="nextBtnCheck()" />
+          </div>
+        </q-stepper-navigation>
+      </template>
+    </q-stepper>
+
+    <!-- フィールド選択ダイアログ -->
+    <template v-for="(item, index) in data.fieldList" :key="`dg${item.id}`">
+      <show-dialog v-model:visible="item.sourceDg.show" name="フィールド一覧" min-width="400px">
+        <template v-slot:toolbar>
+          <q-input dense debounce="300" v-model="item.sourceDg.filter" placeholder="検索" clearable>
+            <template v-slot:before>
+              <q-icon name="search" />
+            </template>
+          </q-input>
+        </template>
+        <FieldSelect name="フィールド" :appId="data.sourceApp.id" :selectedFields="item.source"
+          :filter="item.sourceDg.filter" :updateSelectFields="(f) => updateSelectField(f, item, index, 'source')"
+          :blackListLabel="blackListLabel" />
+      </show-dialog>
+
+      <show-dialog v-model:visible="item.dropDownDg.show" name="フィールド一覧" min-width="400px">
+        <template v-slot:toolbar>
+          <q-input dense debounce="300" v-model="item.dropDownDg.filter" placeholder="検索" clearable>
+            <template v-slot:before>
+              <q-icon name="search" />
+            </template>
+          </q-input>
+        </template>
+        <FieldSelect name="フィールド" :appId="data.dropDownApp.id" :selectedFields="item.source"
+          :filter="item.dropDownDg.filter" :updateSelectFields="(f) => updateSelectField(f, item, index, 'dropDown')"
+          :blackListLabel="blackListLabel" />
+      </show-dialog>
+    </template>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, ref, watchEffect,watch } from 'vue';
+import ShowDialog from './ShowDialog.vue';
+import AppSelectBox from './AppSelectBox.vue';
+import FieldSelect from './FieldSelect.vue';
+import { useAuthStore } from 'src/stores/useAuthStore';
+import { useFlowEditorStore } from 'src/stores/flowEditor';
+import { v4 as uuidv4 } from 'uuid';
+import { useQuasar } from 'quasar';
+
+export default defineComponent({
+  name: 'CascadingDropDownBox',
+  inheritAttrs: false,
+  components: { ShowDialog, AppSelectBox, FieldSelect },
+  props: {
+    modelValue: {
+      type: Object,
+      default: () => ({})
+    },
+    finishDialogHandler: Function,
+  },
+  emits: ['update:modelValue'],
+  setup(props, { emit }) {
+    const authStore = useAuthStore();
+    const flowStore = useFlowEditorStore();
+    const $q = useQuasar();
+    const appDg = ref();
+    const stepper = ref();
+    const step = ref(1);
+
+    const data =ref(props.modelValue);
+    // const data = ref({
+    //   sourceApp: props.modelValue.sourceApp ?? { appFilter: '', showSelectApp: false },
+    //   dropDownApp: props.modelValue.dropDownApp,
+    //   fieldList: props.modelValue.fieldList ?? [],
+    // });
+
+    // アプリ関連の関数
+    const showAppDialog = () => data.value.sourceApp.showSelectApp = true;
+
+    const clearSelectedApp = () => {
+      data.value.sourceApp = { appFilter: '', showSelectApp: false };
+      data.value.fieldList = [];
+    };
+
+    const closeAppDialog = (val: 'OK' | 'Cancel') => {
+      data.value.sourceApp.showSelectApp = false;
+      const selected = appDg.value?.selected[0];
+      if (val === 'OK' && selected) {
+        if (flowStore.appInfo?.appId === selected.id) {
+          $q.notify({
+            type: 'negative',
+            caption: "エラー",
+            message: 'データソースを現在のアプリにすることはできません。'
+          });
+        } else if (selected.id !== data.value.sourceApp.id) {
+          clearSelectedApp();
+          Object.assign(data.value.sourceApp, { id: selected.id, name: selected.name });
+        }
+      }
+    };
+
+    // フィールド関連の関数
+    const defaultRow = () => ({
+      id: uuidv4(),
+      source: undefined,
+      dropDown: undefined,
+      sourceDg: { show: false, filter: '' },
+      dropDownDg: { show: false, filter: '' },
+    });
+
+    const addRow = () => data.value.fieldList.push(defaultRow());
+    const delRow = (index: number) => data.value.fieldList.splice(index, 1);
+
+    const showFieldDialog = (item: any, keyName: string) => item[`${keyName}Dg`].show = true;
+
+    const updateSelectField = (f: any, item: any, index: number, keyName: 'source' | 'dropDown') => {
+      const [selected] = f.value;
+      const isDuplicate = data.value.fieldList.some((field, idx) =>
+        idx !== index && (field[keyName]?.code === selected.code || field[keyName]?.label === selected.label)
+      );
+
+      if (isDuplicate) {
+        $q.notify({
+          type: 'negative',
+          caption: "エラー",
+          message: '重複したフィールドは選択できません'
+        });
+      } else {
+        item[keyName] = selected;
+      }
+    };
+
+    // ステッパー関連の関数
+    const nextBtnCheck = () => {
+      const s = step.value
+      if (s === 1) {
+        return !(data.value.sourceApp?.id && data.value.fieldList?.length > 0 && data.value.fieldList?.every(f => f.source?.name));
+      } else if (s === 2) {
+        return !data.value.fieldList?.every(f => f.dropDown?.name);
+      }
+      return true;
+    };
+
+    const stepperNext = () => {
+      if (step.value === 2) {
+        props.finishDialogHandler?.(data.value);
+      } else {
+        data.value.dropDownApp = { name: flowStore.appInfo?.name, id: flowStore.appInfo?.appId };
+        stepper.value?.next();
+      }
+    };
+
+    // // データ変更の監視
+    // watchEffect(() =>{
+    //   emit('update:modelValue', data.value);
+    // });
+
+    return {
+      // 状態と参照
+      authStore,
+      step,
+      stepper,
+      appDg,
+      data,
+      // アプリ関連の関数
+      showAppDialog,
+      closeAppDialog,
+      clearSelectedApp,
+
+      // フィールド関連の関数
+      addRow,
+      delRow,
+      showFieldDialog,
+      updateSelectField,
+
+      // ステッパー関連の関数
+      nextBtnCheck,
+      stepperNext,
+
+      // 定数
+      blackListLabel: ['レコード番号', '作業者', '更新者', '更新日時', '作成日時', '作成者', 'カテゴリー', 'ステータス'],
+    };
+  }
+});
+</script>
--- a/frontend/src/components/FieldSelect.vue
+++ b/frontend/src/components/FieldSelect.vue
@@ -37,6 +37,10 @@ export default {
    updateSelectFields: {
      type: Function
    },
+    blackListLabel: {
+      type:Array,
+      default:()=>[]
+    }
  },
  setup(props) {
    const isLoaded = ref(false);
@@ -62,16 +66,25 @@ export default {
          app: props.appId
        }
      });
-      let fields = res.data.properties;
-      Object.keys(fields).forEach((key,index) => {
-        const fld = fields[key];
-        if(props.fieldTypes.length===0 || props.fieldTypes.includes(fld.type)){
-          rows.push({id:index, name: fld.label || fld.code, ...fld });
-        }else if(props.fieldTypes.includes("lookup") && ("lookup" in fld)){
-          rows.push({id:index, name: fld.label || fld.code, ...fld });
+      let fields = Object.values(res.data.properties);
+      for (const index in fields) {
+        const fld = fields[index]
+        if(props.blackListLabel.length > 0){
+          if(!props.blackListLabel.find(blackListItem => blackListItem === fld.label)){
+            if(props.fieldTypes.length===0 || props.fieldTypes.includes(fld.type)){
+              rows.push({id:index, name: fld.label || fld.code, ...fld });
+            }else if(props.fieldTypes.includes("lookup") && ("lookup" in fld)){
+              rows.push({id:index, name: fld.label || fld.code, ...fld });
+            }
+          }
+        } else {
+          if(props.fieldTypes.length===0 || props.fieldTypes.includes(fld.type)){
+            rows.push({id:index, name: fld.label || fld.code, ...fld });
+          }else if(props.fieldTypes.includes("lookup") && ("lookup" in fld)){
+            rows.push({id:index, name: fld.label || fld.code, ...fld });
+          }
        }
-
-      });
+      }
      isLoaded.value = true;
    });

--- a/frontend/src/components/ShowDialog.vue
+++ b/frontend/src/components/ShowDialog.vue
@@ -11,7 +11,7 @@
        <q-card-section class="q-mt-md" :style="sectionStyle">
         <slot></slot>
        </q-card-section>
-        <q-card-actions align="right" class="text-primary">
+        <q-card-actions v-if="!disableBtn" align="right" class="text-primary">
          <q-btn flat label="確定" v-close-popup @click="CloseDialogue('OK')" />
          <q-btn flat label="キャンセル" v-close-popup @click="CloseDialogue('Cancel')" />
        </q-card-actions>
@@ -29,7 +29,11 @@ export default {
    width:String,
    height:String,
    minWidth:String,
-    minHeight:String
+    minHeight:String,
+    disableBtn:{
+      type: Boolean,
+      default: false
+    }
  },
  emits: [
    'close'
--- a/frontend/src/components/right/CascadingDropDown.vue
+++ b/frontend/src/components/right/CascadingDropDown.vue
@@ -0,0 +1,133 @@
+<template>
+  <div v-bind="$attrs">
+    <q-field :label="displayName" labelColor="primary" stack-label lazy-rules="ondemand" ref="fieldRef">
+      <template v-slot:control>
+        <q-card flat class="full-width">
+          <q-card-actions vertical>
+            <q-btn color="grey-3" text-color="black" @click="() => { dgIsShow = true }">クリックで設定</q-btn>
+          </q-card-actions>
+          <q-card-section class="text-caption">
+            <div v-if="data.dropDownApp?.name">
+              {{ `${data.sourceApp?.name} -> ${data.dropDownApp?.name}` }}
+            </div>
+            <div v-else>{{ placeholder }}</div>
+          </q-card-section>
+        </q-card>
+      </template>
+    </q-field>
+  </div>
+
+  <ShowDialog v-model:visible="dgIsShow" name="ドロップダウン階層化設定" @close="closeDg" min-width="50vw" min-height="20vh" disableBtn>
+    <template v-slot:toolbar>
+      <q-btn flat round dense icon="more_vert" >
+      <q-menu  auto-close anchor="bottom start">
+        <q-list>
+          <q-item clickable @click="copySetting()">
+            <q-item-section avatar><q-icon name="content_copy" ></q-icon></q-item-section>
+            <q-item-section >コピー</q-item-section>
+          </q-item>
+          <q-item clickable @click="pasteSetting()">
+            <q-item-section avatar><q-icon name="content_paste" ></q-icon></q-item-section>
+            <q-item-section >貼り付け</q-item-section>
+          </q-item>
+        </q-list>
+      </q-menu>
+      </q-btn>
+    </template>
+    <div class="q-mb-md q-ml-md q-mr-md">
+      <CascadingDropDownBox v-model:model-value="data" :finishDialogHandler="finishDialogHandler" />
+    </div>
+  </ShowDialog>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, watchEffect } from 'vue';
+import ShowDialog from '../ShowDialog.vue';
+import CascadingDropDownBox from '../CascadingDropDownBox.vue';
+
+export default defineComponent({
+  inheritAttrs: false,
+  name: 'CascadingDropDown',
+  components: {
+    ShowDialog,
+    CascadingDropDownBox
+  },
+  props: {
+    displayName: {
+      type: String,
+      default: '',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    modelValue: {
+      type: Object,
+      default: () => { ({}) }
+    },
+  },
+  setup(props, { emit }) {
+    const dgIsShow = ref(false);
+    // const data = ref(props.modelValue);
+    const data = ref({
+      sourceApp: props.modelValue.sourceApp ?? { appFilter: '', showSelectApp: false },
+      dropDownApp: props.modelValue.dropDownApp,
+      fieldList: props.modelValue.fieldList ?? [],
+    });
+    const closeDg = (state: string) => {
+      dgIsShow.value = false;
+    };
+
+    const finishDialogHandler = (boxData) => {
+      data.value = boxData
+      dgIsShow.value = false
+      emit('update:modelValue', data.value);
+    }
+
+     //設定をコピーする
+     const copySetting=()=>{
+        if (navigator.clipboard) {
+          const jsonData= JSON.stringify(data.value);
+          navigator.clipboard.writeText(jsonData).then(() => {
+              console.log('Text successfully copied to clipboard');
+          },
+          (err) => {
+            console.error('Error in copying text: ', err);
+          });
+        } else {
+          console.log('Clipboard API not available');
+        }
+      };
+      //設定を貼り付ける
+      const pasteSetting=async ()=>{
+        try {
+          const text = await navigator.clipboard.readText();
+          console.log('Text from clipboard:', text);
+          const jsonData=JSON.parse(text);
+          if('sourceApp' in jsonData && 'dropDownApp' in jsonData && 'fieldList' in jsonData){
+            const {sourceApp,dropDownApp, fieldList}=jsonData;
+            data.value.sourceApp=sourceApp;
+            data.value.dropDownApp=dropDownApp;
+            data.value.fieldList=fieldList;
+          }
+        } catch (err) {
+          console.error('Failed to read text from clipboard: ', err);
+          throw err;
+        }
+      }
+
+    // watchEffect(() => {
+    //   emit('update:modelValue', data.value);
+    // });
+
+    return {
+      dgIsShow,
+      closeDg,
+      data,
+      finishDialogHandler,
+      copySetting,
+      pasteSetting
+    };
+  }
+});
+</script>
--- a/frontend/src/components/right/PropertyList.vue
+++ b/frontend/src/components/right/PropertyList.vue
@@ -24,6 +24,7 @@ import NumInput from './NumInput.vue';
 import DataProcessing from './DataProcessing.vue';
 import DataMapping from './DataMapping.vue';
 import AppSelect from './AppSelect.vue';
+import CascadingDropDown from './CascadingDropDown.vue';
 import { IActionNode,IActionProperty,IProp } from 'src/types/ActionTypes';

 export default defineComponent({
@@ -41,7 +42,8 @@ export default defineComponent({
    NumInput,
    DataProcessing,
    DataMapping,
-    AppSelect
+    AppSelect,
+    CascadingDropDown
  },
  props: {
    nodeProps: {