階層化ドロップダウンの不具合修正、実装完了

frontend/src/components/right/CascadingDropDown.vue

@@ -4,7 +4,7 @@
       <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-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">
@@ -17,7 +17,23 @@
     </q-field>
   </div>
 
-  <ShowDialog v-model:visible="dgIsShow" name="設定ドロップダウンメニュー" @close="closeDg" min-width="50vw" min-height="20vh" disableBtn>
+  <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>
@@ -52,8 +68,12 @@ export default defineComponent({
   },
   setup(props, { emit }) {
     const dgIsShow = ref(false);
-    const data = ref(props.modelValue);
-
+    // 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;
     };
@@ -63,17 +83,51 @@ export default defineComponent({
       dgIsShow.value = false
       emit('update:modelValue', data.value);
     }
-    
-    watchEffect(() => {
-      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>
+</script>