add right drawer

document/Kintone機能整理.drawio

@@ -1,10 +0,0 @@
-<mxfile host="65bd71144e">
-    <diagram id="UMFNb7zEleFpzTH4EAp9" name="ページ1">
-        <mxGraphModel dx="1202" dy="612" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
-            <root>
-                <mxCell id="0"/>
-                <mxCell id="1" parent="0"/>
-            </root>
-        </mxGraphModel>
-    </diagram>
-</mxfile>

frontend/src/components/ActionSelect.vue

@@ -20,8 +20,8 @@ export default {
   { name: 'content', label: '内容', field: 'content', sortable: true }
   ]
   const rows = reactive([])
-    onMounted( () => {
+    onMounted(async () => {
-        api.get('http://127.0.0.1:8000/api/kintone/1').then(res =>{
+        await api.get('http://127.0.0.1:8000/api/kintone/2').then(res =>{
          res.data.forEach((item) =>
         {
           rows.push({name:item.name,desc:item.desc,content:item.content});

frontend/src/components/ActionSetting.vue

@@ -0,0 +1,83 @@
+<template>
+  <div id="action1">
+        <q-card class="my-card">
+          <q-card-section class="bg-primary text-white">
+            <div class="text-h6">Our Changing Planet</div>
+            <div class="text-subtitle2">by John Doe</div>
+          </q-card-section>
+          <q-separator />
+          <q-card-actions align="right">
+            <q-btn flat>設定</q-btn>
+            <q-btn class="del" flat @click="clickdel">削除</q-btn>
+          </q-card-actions>
+        </q-card>
+        <div class="next" style="display: table;width: 100%;height:40px;" @mouseenter="showAdd = true" @mouseleave="()=>{if(!showMenu) showAdd = false;}">
+          <div aria-hidden="false" style="display: table-row;">
+            <div
+              style="display: table-cell;background: url(&quot;data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iNDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEzIDMwIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAyMCA0MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiA8c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDpub25lO3N0cm9rZTojNUI1QjVDO3N0cm9rZS13aWR0aDoyO3N0cm9rZS1taXRlcmxpbWl0OjEwO30NCgkuc3Qxe2ZpbGw6IzVCNUI1Qzt9PC9zdHlsZT4NCiA8cmVjdCB4PSI5IiB3aWR0aD0iMiIgaGVpZ2h0PSIzNy45NzQiIGZpbGw9IiM1MTUxNTEiIHN0cm9rZS13aWR0aD0iNC41MDYyIi8+DQogPHBvbHlnb24gdHJhbnNmb3JtPSJtYXRyaXgoMS4xNzg1IDAgMCAxLjE3ODUgLS42MDY5MiAyMy41NDQpIiBwb2ludHM9IjEuOTI4IDQuMDY1IDguOTk5IDExLjEzNiAxNi4wNzIgNC4wNjUgMTcuNDg2IDUuNDc5IDguOTk5IDEzLjk2NCAwLjUxNSA1LjQ3OSIgZmlsbD0iIzUxNTE1MSIvPg0KPC9zdmc+DQo=&quot;) center center no-repeat;">
+            </div>
+          </div>
+          <div v-if="showAdd" style="display:table-row;height:inherit;position:absolute;left:50%;">
+            <div style="display:table-cell;">
+              <q-btn round size="xs" color="primary" label="+">
+                <q-menu v-model="showMenu">
+                  <q-list style="min-width: 100px">
+                    <q-item clickable v-close-popup>
+                      <q-item-section @click="clickadd">New tab</q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-menu>
+              </q-btn>
+            </div>
+          </div>
+        </div>
+      </div>
+</template>
+<script lang="ts">
+import { ref,watch } from 'vue'
+export default {
+  emits: [
+    'addaction'
+  ],
+  setup(props,context) {
+    const showAdd = ref(false)
+    const showMenu = ref(false)
+
+    watch(showMenu,(newVal) =>{
+       console.log('3');
+       if(!newVal)
+       {
+        showAdd.value = false;
+       }
+      });
+
+    const clickadd = () => {
+      console.log('3');
+      context.emit('addaction');
+      //let oDiv1 = pdiv;
+      // let oDiv1 = document.getElementById('action1');
+      // let oDiv2 = document.createElement('div');
+      // if (oDiv1 !== null) {
+      //   oDiv2.innerHTML = oDiv1?.innerHTML;
+      //   oDiv1?.after(oDiv2);
+      //   let oAdd = oDiv2.getElementsByClassName('next')[0];
+      //   oAdd.addEventListener('mouseenter', mouseenter);
+      //   oAdd.addEventListener('mouseleave', mouseleave);
+      //   let oDel = oDiv2.getElementsByClassName('del')[0];
+      //   oDel.addEventListener('click', clickdel);
+      // }
+    };
+    const clickdel = (event: Event) => {
+      let oBtn = event.target as Element;
+      oBtn.parentElement?.parentElement?.parentElement?.parentElement?.remove();
+    };
+    // window.clickadd = clickadd;
+    // window.clickdel = clickdel;
+    // window.mouseenter = mouseenter;
+    // window.mouseleave = mouseleave;
+
+    return {clickadd, clickdel, showAdd,  showMenu }
+  }
+
+}
+</script>

frontend/src/components/right/ActionProperty.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <div v-for="(item, index) in componentData" :key="index">
+      <component :is="item.component" v-bind="item.props" v-model="item.props.modelValue"></component>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import InputText from '../right/InputText.vue';
+import SelectBox from '../right/SelectBox.vue';
+import DatePicker from '../right/DatePicker.vue';
+import FieldInput from '../right/FieldInput.vue';
+
+export default defineComponent({
+  name: 'ActionProperty',
+  components: {
+    InputText,
+    SelectBox,
+    DatePicker,
+    FieldInput
+  },
+  props: {
+    jsonData: {
+      type: Object,
+      required: true,
+    },
+    jsonValue:{
+      type: Object,
+      required: false,
+    }
+  },
+  computed: {
+      componentData() {
+      return this.jsonData.elements.map((element: any) => {
+        if(this.jsonValue != undefined )
+        {
+          if(this.jsonValue.hasOwnProperty(element.props.name))
+          {
+            element.props.modelValue = this.jsonValue[element.props.name];
+          }
+          else
+          {
+            element.props.modelValue = '';
+          }
+
+        }
+        return {
+          component: element.component,
+          props: element.props,
+        };
+      });
+    },
+  },
+});
+</script>

frontend/src/components/right/DatePicker.vue

@@ -0,0 +1,45 @@
+<template>
+
+  <q-input v-model="selectedDate" :label="placeholder" mask="date" :rules="['date']">
+    <template v-slot:append>
+      <q-icon name="event" class="cursor-pointer">
+        <q-popup-proxy cover transition-show="scale" transition-hide="scale">
+          <q-date v-model="selectedDate">
+            <div class="row items-center justify-end">
+              <q-btn v-close-popup label="Close" color="primary" flat />
+            </div>
+          </q-date>
+        </q-popup-proxy>
+      </q-icon>
+    </template>
+  </q-input>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref ,watchEffect} from 'vue';
+
+export default defineComponent({
+  name: 'DatePicker',
+  props: {
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    modelValue: {
+      type: String,
+      default: '',
+    },
+  },
+  setup(props, { emit }) {
+    const selectedDate = ref(props.modelValue);
+
+    watchEffect(() => {
+      emit('update:modelValue', selectedDate.value);
+    });
+
+    return {
+      selectedDate
+    };
+  }
+});
+</script>

frontend/src/components/right/FieldInput.vue

@@ -0,0 +1,62 @@
+<template>
+<q-input v-model="selectedField" :label="placeholder">
+        <template v-slot:append>
+          <q-icon name="search" class="cursor-pointer"  @click="showDg"/>
+        </template>
+</q-input>
+<show-dialog v-model:visible="show" name="フィールド一覧" @close="closeDg">
+  <field-select ref="appDg" name="フィールド" type="single" :appId="1"></field-select>
+</show-dialog>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref ,watchEffect} from 'vue';
+import ShowDialog from '../ShowDialog.vue';
+import FieldSelect from '../FieldSelect.vue';
+
+export default defineComponent({
+  name: 'FieldInput',
+  components: {
+    ShowDialog,
+    FieldSelect,
+  },
+  props: {
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    modelValue: {
+      type: String,
+      default: '',
+    },
+  },
+
+  setup(props, { emit }) {
+    const appDg = ref();
+    const show = ref(false);
+    const selectedField = ref(props.modelValue);
+
+    const showDg = () => {
+      show.value = true;
+    };
+
+    const closeDg = (val:string) => {
+      if (val == 'OK') {
+        selectedField.value = appDg.value.selected[0].name;
+      }
+    };
+
+    watchEffect(() => {
+      emit('update:modelValue', selectedField.value);
+    });
+
+    return {
+      appDg,
+      show,
+      showDg,
+      closeDg,
+      selectedField,
+    };
+  }
+});
+</script>

frontend/src/components/right/InputText.vue

@@ -0,0 +1,33 @@
+<template>
+  <q-input :label="placeholder"  v-model="inputValue"/>
+</template>
+
+<script lang="ts">
+import { defineComponent,ref,watchEffect } from 'vue';
+
+export default defineComponent({
+  name: 'InputText',
+  props: {
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    modelValue: {
+      type: String,
+      default: '',
+    },
+  },
+
+  setup(props, { emit }) {
+    const inputValue = ref(props.modelValue);
+
+    watchEffect(() => {
+      emit('update:modelValue', inputValue.value);
+    });
+
+    return {
+      inputValue,
+    };
+  },
+});
+</script>

frontend/src/components/right/SelectBox.vue

@@ -0,0 +1,36 @@
+<template>
+  <q-select v-model="selectedValue" :label="placeholder" :options="options"/>
+</template>
+
+<script lang="ts">
+import { defineComponent,ref,watchEffect } from 'vue';
+
+export default defineComponent({
+  name: 'SelectBox',
+  props: {
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    options: {
+      type: Array,
+      required: true,
+    },
+    modelValue: {
+      type: String,
+      default: '',
+    },
+  },
+  setup(props, { emit }) {
+    const selectedValue = ref(props.modelValue);
+
+    watchEffect(() => {
+      emit('update:modelValue', selectedValue.value);
+    });
+
+    return {
+      selectedValue
+    };
+  },
+});
+</script>

frontend/src/pages/testFlow.vue

@@ -0,0 +1,96 @@
+<template>
+ <div class="q-pa-md q-gutter-sm">
+    <q-btn label="プロパティ" icon="keyboard_arrow_right" color="primary" @click="open('right')" />
+    <!-- <q-btn label="Readプロパティ" icon="keyboard_arrow_right" color="primary" @click="write('right')" /> -->
+
+    <q-dialog v-model="dialog" :position="position">
+      <q-card class="column full-height" style="width: 300px">
+        <q-card-section>
+          <div class="text-h6">プロパティ</div>
+        </q-card-section>
+
+
+        <q-card-section class="col q-pt-none">
+          <ActionProperty :jsonData="jsonData" :jsonValue="jsonValue"/>
+        </q-card-section>
+
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn flat label="Save" v-close-popup  @click="save"/>
+          <q-btn flat label="Cancel" v-close-popup />
+        </q-card-actions>
+      </q-card>
+    </q-dialog>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref,onMounted } from 'vue'
+import ActionProperty from 'components/right/ActionProperty.vue';
+    const dialog = ref(false)
+    const position = ref('top')
+
+    const jsonData = {
+        elements: [
+          {
+            component: 'InputText',
+            props: {
+              name:'1',
+              placeholder: 'Enter some text',
+              modelValue: '',
+            },
+          },
+          {
+            component: 'SelectBox',
+            props: {
+              name:'2',
+              placeholder: 'Choose an option',
+              modelValue: '',
+              options: [
+                'option1',
+                'option2',
+                'option3'
+              ],
+            },
+          },
+          {
+            component: 'DatePicker',
+            props: {
+              name:'3',
+              placeholder: 'Choose a date',
+              modelValue: '',
+            },
+          },
+          {
+            component: 'FieldInput',
+            props: {
+              name:'4',
+              placeholder: 'Choose a field',
+              modelValue: '',
+            },
+          },
+        ]
+      };
+
+      let jsonValue = {
+        1:'abc',
+        2:'option2',
+        3:'2023/09/04',
+        4:'6666'
+      };
+
+    const open =  (pos:string) => {
+      position.value = pos
+      dialog.value = true
+    };
+
+    const save = async () =>{
+
+      jsonData.elements.forEach(property => {
+        if(jsonValue != undefined)
+        {
+          jsonValue[property.props.name] = property.props.modelValue;
+        }
+      });
+      console.log(jsonValue);
+
+    }
+</script>

frontend/src/pages/testQursar.vue

@@ -1,13 +1,88 @@
 <template>
-  <div>
+  <q-page>
 
-  </div>
+    <div class="q-pa-md column content-center items-center">
+      <div>
+        <q-btn label="アクション選択" color="primary" @click="showDg()" v-if="addshow" />
+        <show-dialog v-model:visible="show" name="アクション" @close="closeDg">
+          <action-select ref="appDg" name="アクション" type="single"></action-select>
+        </show-dialog>
+      </div>
+      <div id="action"></div>
+    </div>
+  </q-page>
 </template>
-<script>
+<script setup lang="ts">
-export default {
+import { ref } from 'vue';
+import ShowDialog from 'components/ShowDialog.vue';
+import ActionSelect from 'components/ActionSelect.vue';
+
+const show = ref(false);
+const addshow = ref(true);
+const appDg = ref();
+
+const showDg = () => {
+  show.value = true;
+};
+
+const closeDg = (val: string) => {
+  if (val == 'OK') {
+    //alert(JSON.stringify(appDg.value.selected[0].content));
+    let oDiv1 = document.getElementById('action');
+    let oDiv2 = document.createElement('div');
+    oDiv2.setAttribute('class', 'action');
+    if (oDiv1 !== null) {
+      oDiv2.innerHTML = appDg.value.selected[0].content;
+      oDiv1?.append(oDiv2);
+      // let oAdd = oDiv2.getElementsByClassName('next')[0];
+      // oAdd.addEventListener('mouseenter', mouseenter);
+      // oAdd.addEventListener('mouseleave', mouseleave);
+      // let oDel = oDiv2.getElementsByClassName('del')[0];
+      // oDel.addEventListener('click', clickdel);
+    }
+
+    if (document.getElementsByClassName('action').length > 0) {
+      addshow.value = false;
+    }
+  };
+};
+
+const mouseenter = (event: Event) => {
+  console.log('1');
+  let oAdd = "<div style='display: table-cell;'><button type='button' onclick='clickadd(this.parentElement.parentElement.parentElement.parentElement)'>+</button></div>";
+  let oDiv1 = event.target as Element
+  let oDivs = oDiv1?.getElementsByClassName('add');
+  if (oDivs.length === 0) {
+    let oDiv2 = document.createElement('div');
+    oDiv2.className = "add";
+    oDiv2.setAttribute("style", "display:table-row;height:inherit;position: absolute;left:calc(50% - 19px);");
+    oDiv2.innerHTML = oAdd;
+    oDiv1?.append(oDiv2);
+  }
+};
+
+const mouseleave = (event: Event) => {
+  console.log('2');
+  let oDiv2 = (event.target as Element)?.parentElement?.getElementsByClassName('add');
+  oDiv2[0]?.remove();
+
+};
+
+const clickadd = (pdiv: Element) => {
+  console.log('3');
+  show.value = true;
+};
+
+const clickdel = (pdiv: Element) => {
+  pdiv.remove();
+  if (document.getElementsByClassName('action').length == 0) {
+    addshow.value = true;
+  }
+};
+
+window.clickadd = clickadd;
+window.clickdel = clickdel;
+window.mouseenter = mouseenter;
+window.mouseleave = mouseleave;
 
-}
 </script>
-<style lang="scss">
-
-</style>

frontend/src/pages/testRight.vue

@@ -0,0 +1,101 @@
+<template>
+ <div class="q-pa-md q-gutter-sm">
+    <q-btn label="プロパティ" icon="keyboard_arrow_right" color="primary" @click="drawerRight = !drawerRight"  />
+    <!-- <q-btn label="Readプロパティ" icon="keyboard_arrow_right" color="primary" @click="write('right')" /> -->
+    <q-drawer
+        side="right"
+        v-model="drawerRight"
+        show-if-above
+        bordered
+        :width="301"
+        :breakpoint="500"
+        class="bg-grey-3"
+      >
+       <q-card class="column full-height" style="width: 300px">
+        <q-card-section>
+          <div class="text-h6">プロパティ</div>
+        </q-card-section>
+
+
+        <q-card-section class="col q-pt-none">
+          <ActionProperty :jsonData="jsonData" :jsonValue="jsonValue" v-if="drawerRight"/>
+        </q-card-section>
+
+        <q-card-actions align="right" class="bg-white text-teal">
+          <q-btn flat label="Save"  @click="save"/>
+          <q-btn flat label="Cancel" @click="cancel" />
+        </q-card-actions>
+      </q-card>
+  </q-drawer>
+  </div>
+</template>
+<script setup lang="ts">
+import { reactive, ref } from 'vue'
+import ActionProperty from 'components/right/ActionProperty.vue';
+      const drawerRight = ref(false);
+      const jsonData = {
+        elements: [
+          {
+            component: 'InputText',
+            props: {
+              name:'1',
+              placeholder: 'Enter some text',
+              modelValue: '',
+            },
+          },
+          {
+            component: 'SelectBox',
+            props: {
+              name:'2',
+              placeholder: 'Choose an option',
+              modelValue: '',
+              options: [
+                'option1',
+                'option2',
+                'option3'
+              ],
+            },
+          },
+          {
+            component: 'DatePicker',
+            props: {
+              name:'3',
+              placeholder: 'Choose a date',
+              modelValue: '',
+            },
+          },
+          {
+            component: 'FieldInput',
+            props: {
+              name:'4',
+              placeholder: 'Choose a field',
+              modelValue: '',
+            },
+          },
+        ]
+      };
+
+      let jsonValue = {
+        1:'abc',
+        2:'option2',
+        3:'2023/09/04',
+        4:'6666'
+      };
+
+    const cancel = async() =>{
+      drawerRight.value = false;
+    }
+
+    const save = async () =>{
+
+      jsonData.elements.forEach(property => {
+        if(jsonValue != undefined)
+        {
+          jsonValue[property.props.name] = property.props.modelValue;
+        }
+      });
+      console.log(jsonValue);
+      drawerRight.value=false;
+
+    }
+</script>

frontend/src/router/routes.ts

@@ -11,6 +11,22 @@ const routes: RouteRecordRaw[] = [
     component: () => import('layouts/MainLayout.vue'),
     children: [{ path: '', component: () => import('pages/RuleEditor.vue') }],
   },
+  {
+    path: '/test/',
+    component: () => import('layouts/MainLayout.vue'),
+    children: [{ path: '', component: () => import('pages/testQursar.vue') }],
+  },
+  ,
+  {
+    path: '/flow/',
+    component: () => import('layouts/MainLayout.vue'),
+    children: [{ path: '', component: () => import('pages/testFlow.vue') }],
+  },
+  {
+    path: '/right/',
+    component: () => import('layouts/MainLayout.vue'),
+    children: [{ path: '', component: () => import('pages/testRight.vue') }],
+  },
 
   // Always leave this as last one,
   // but you can also remove it