Merge branch 'dt' into daitian

# Conflicts:
#	frontend/src/router/routes.ts

frontend/src/components/ActionSelect.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="q-pa-md">
+    <q-table :title="name+'一覧'" row-key="name" :selection="type" v-model:selected="selected" :columns="columns" :rows="rows" />
+  </div>
+</template>
+<script>
+import { ref,onMounted,reactive } from 'vue'
+import { api } from 'boot/axios';
+
+export default {
+  name: 'actionSelect',
+  props: {
+    name: String,
+    type: String
+  },
+  setup() {
+  const columns = [
+  { name: 'name', required: true,label: 'アクション名',align: 'left',field: 'name',sortable: true},
+  { name: 'desc', align: 'left', label: '説明', field: 'desc', sortable: true },
+  { name: 'content', label: '内容', field: 'content', sortable: true }
+  ]
+  const rows = reactive([])
+    onMounted(async () => {
+        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});
+        }
+        )
+      });
+      });
+    return {
+      columns,
+      rows,
+      selected: ref([]),
+    }
+  },
+
+}
+</script>

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/AppSelect.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="q-pa-md">
+    <q-table :title="name+'一覧'" :selection="type" v-model:selected="selected" :columns="columns" :rows="rows" />
+  </div>
+</template>
+<script>
+import { ref,onMounted,reactive } from 'vue'
+import { api } from 'boot/axios';
+
+export default {
+  name: 'appSelect',
+  props: {
+    name: String,
+    type: String
+  },
+  setup() {
+  const columns = [
+  { name: 'id', required: true,label: 'アプリID',align: 'left',field: 'id',sortable: true},
+  { name: 'name', align: 'center', label: 'アプリ名', field: 'name', sortable: true },
+  { name: 'creator', label: '作成者', field: 'creator', sortable: true },
+  { name: 'createdate', label: '作成日時', field: 'createdate' }
+  ]
+  const rows = reactive([])
+    onMounted( () => {
+        api.get('allapps').then(res =>{
+         res.data.apps.forEach((item) =>
+        {
+          rows.push({id:item.appId,name:item.name,creator:item.creator.name,createdate:item.createdAt});
+        }
+        )
+      });
+      });
+    return {
+      columns,
+      rows,
+      selected: ref([]),
+    }
+  },
+
+}
+</script>

frontend/src/components/FieldSelect.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="q-pa-md">
+    <q-table :title="name+'一覧'"  row-key="name"  :selection="type" v-model:selected="selected" :columns="columns" :rows="rows" />
+  </div>
+</template>
+<script>
+import { ref,onMounted,reactive } from 'vue'
+import { api } from 'boot/axios';
+
+export default {
+  name: 'fieldSelect',
+  props: {
+    name: String,
+    type: String,
+    appId:Number
+  },
+  setup(props) {
+  const columns = [
+  { name: 'name', required: true,label: 'フィールド名',align: 'left',field: row=>row.name,sortable: true},
+  { name: 'code', label: 'フィールドコード', align: 'left',field: 'code', sortable: true },
+  { name: 'type', label: 'フィールドタイプ', align: 'left',field: 'type', sortable: true }
+  ]
+  const rows = reactive([])
+    onMounted( () => {
+        api.get('appfields', {
+              params:{
+                app: props.appId
+              }
+          }).then(res =>{
+         let fields = res.data.properties;
+         console.log(fields);
+         Object.keys(fields).forEach((key) =>
+        {
+          rows.push({name:fields[key].label,code:fields[key].code,type:fields[key].type});
+        }
+        )
+      });
+      });
+    return {
+      columns,
+      rows,
+      selected: ref([]),
+    }
+  },
+
+}
+</script>

frontend/src/components/ShowDialog.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="q-pa-md q-gutter-sm">
+    <q-dialog :model-value="visible" persistent>
+      <q-card style="min-width: 350px">
+        <q-card-section>
+          <div class="text-h6">{{ name }}選択</div>
+        </q-card-section>
+
+        <q-card-section class="q-pt-none">
+         <slot></slot>
+        </q-card-section>
+        <q-card-actions 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>
+      </q-card>
+    </q-dialog>
+  </div>
+</template>
+<script>
+
+export default {
+  name: 'showDialog',
+  props: {
+    name:String,
+    visible: Boolean,
+  },
+  emits: [
+    'close'
+  ],
+  setup(props, context) {
+    const CloseDialogue = (val) => {
+      context.emit('update:visible', false);
+      context.emit('close', val);
+    }
+
+    return {
+      CloseDialogue
+    }
+  },
+}
+</script>

frontend/src/pages/RuleEditor.vue

@@ -9,41 +9,67 @@
       </div>
       <div style="min-height: 100vh;">
         <div class="q-pa-md">
-            <q-btn-dropdown
-              split
-              color="primary"
-              label="ルール新規作成"
-              size="lg"
-            >
-              <q-list>
-                <q-item
-                    v-for="action in actions"
-                    clickable v-close-popup
-                    @click="onItemClick"
-                    :key="action"
-                  >
-                  <q-item-section>
-                    <q-item-label>{{ action }}</q-item-label>
-                  </q-item-section>
-                </q-item>
-              </q-list>
-            </q-btn-dropdown>
+          <q-btn-dropdown split color="primary" label="ルール新規作成" size="lg">
+            <q-list>
+              <q-item v-for="action in actions" clickable v-close-popup @click="onItemClick" :key="action">
+                <q-item-section>
+                  <q-item-label>{{ action }}</q-item-label>
+                </q-item-section>
+              </q-item>
+            </q-list>
+          </q-btn-dropdown>
+        </div>
+        <div class="q-pa-md">
+          <q-select v-model="model" :options="options" label="Standard"/>
+          <q-btn :label="model+'選択'" color="primary" @click="showDg()" />
+          <show-dialog v-model:visible="show" :name="model" @close="closeDg">
+            <template v-if="model=='アプリ'">
+              <app-select ref="appDg" :name="model" type="single"></app-select>
+            </template>
+            <template v-if="model=='フィールド'">
+              <field-select ref="appDg" :name="model" type="multiple" :appId="1"></field-select>
+            </template>
+            <template v-if="model=='アクション'">
+              <action-select ref="appDg" :name="model" type="single"></action-select>
+            </template>
+          </show-dialog>
         </div>
       </div>
+
     </div>
   </q-page>
 </template>
 
 <script setup lang="ts">
+import ShowDialog from 'components/ShowDialog.vue';
+import AppSelect from 'components/AppSelect.vue';
+import FieldSelect from 'components/FieldSelect.vue';
+import ActionSelect from 'components/ActionSelect.vue';
+import { ref } from 'vue'
+let show = ref(false);
+let appDg = ref();
+let model = ref('アプリ');
+let options = ['アプリ','フィールド','アクション']
+const showDg = () => {
+  show.value = true;
+};
+
+
+const closeDg = (val:string) => {
+  if (val == 'OK') {
+      alert(JSON.stringify(appDg.value.selected))
+  }
+
+};
 interface Props {
   title: string;
-  actions:string[];
+  actions: string[];
 }
 const props = withDefaults(defineProps<Props>(), {
-  title:"ルールエディター",
-  actions:()=>["フィールド制御","一覧画面","その他"]
+  title: "ルールエディター",
+  actions: () => ["フィールド制御", "一覧画面", "その他"]
 });
-function onItemClick(evt: Event){
-    return;
+function onItemClick(evt: Event) {
+  return;
 }
 </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>
-export default {
+<script setup lang="ts">
+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/router/routes.ts

@@ -9,16 +9,13 @@ const routes: RouteRecordRaw[] = [
       { path: 'ruleEditor', component: () => import('pages/RuleEditor.vue') },
       { path: 'flowEditor', component: () => import('pages/FlowEditorPage.vue') }
     ],
+    children: [{ path: '', component: () => import('pages/IndexPage.vue') }],
+  },
+  {
+    path: '/test/',
+    children: [{ path: '', component: () => import('pages/testQursar.vue') }],
+    component: () => import('layouts/MainLayout.vue'),
   },
-  // {
-  //   path: '/ruleEditor/',
-  //   component: () => import('layouts/MainLayout.vue'),
-  //   children: [{ path: '', component: () => import('pages/RuleEditor.vue') }],
-  // },
-  // {
-  //   path: '/flowEditor/',
-  //   component: () => import('layouts/FlowEditorPage.vue'),
-  // },
 
   // Always leave this as last one,
   // but you can also remove it