Merge commit '26a685b872daa65a069ad8c39ef4b973c8e25022' into feature-data-mapping

frontend/src/components/FieldSelect.vue

@@ -11,6 +11,7 @@
 import { ref, onMounted, reactive, watchEffect } from 'vue'
 import { api } from 'boot/axios';
 
+
 export default {
   name: 'fieldSelect',
   props: {
@@ -28,8 +29,9 @@ export default {
       type:Array,
       default:()=>[]
     },
-    updateSelects: {
-      type: Function
+    fieldTypes:{
+      type:Array,
+      default:()=>[]
     },
     filter: String,
   },
@@ -43,29 +45,26 @@ export default {
     const pageSetting = ref({
       sortBy: 'desc',
       descending: false,
-      page: 2,
+      page: 1,
       rowsPerPage: props.not_page ? 0 : 5
       // rowsNumber: xx if getting data from a server
     });
     const rows = reactive([]);
     const selected = ref(props.selectedFields && props.selectedFields.length>0?props.selectedFields:[]);
 
-    watchEffect(() => {
-        props.updateSelects(selected);
-    });
-
     onMounted(async () => {
-      const res = await api.get('api/v1/appfields', {
+      const url = props.fieldTypes.includes('SPACER')?'api/v1/allfields':'api/v1/appfields';
+      const res = await api.get(url, {
         params: {
           app: props.appId
         }
       });
       let fields = res.data.properties;
-      console.log(fields);
       Object.keys(fields).forEach((key) => {
         const fld = fields[key];
-        // rows.push({name:fields[key].label,code:fields[key].code,type:fields[key].type});
-        rows.push({ name: fld.label, ...fld });
+        if(props.fieldTypes.length===0 || props.fieldTypes.includes(fld.type)){
+          rows.push({ name: fld.label || fld.code, ...fld });
+        }
       });
       isLoaded.value = true;
     });

frontend/src/components/left/EventTree.vue

@@ -3,11 +3,11 @@
   <q-tree :nodes="store.eventTree.screens" node-key="eventId" children-key="events" no-connectors
     v-model:expanded="store.expandedScreen" :dense="true" :ref="tree">
     <template v-slot:header-EVENT="prop">
-      <div :ref="prop.node.eventId" class="row col items-center no-wrap event-node">
+      <div :ref="prop.node.eventId" class="row col items-center no-wrap event-node" @click="onSelected(prop.node)">
         <q-icon v-if="prop.node.eventId" name="play_circle" :color="prop.node.hasFlow ? 'green' : 'grey'" size="16px"
           class="q-mr-sm">
         </q-icon>
-        <div class="no-wrap" @click="onSelected(prop.node)"
+        <div class="no-wrap"
           :class="selectedEvent && prop.node.eventId === selectedEvent.eventId ? 'selected-node' : ''">{{
             prop.node.label }}</div>
         <q-space></q-space>
@@ -15,25 +15,21 @@
       </div>
     </template>
     <template v-slot:header-CHANGE="prop">
-      <div class="row col items-center no-wrap event-node">
-        <div class="no-wrap">{{ prop.node.label }}</div>
+      <div class="row col items-start no-wrap event-node">
+        <div class="no-wrap"
+        :class="selectedEvent && prop.node.eventId === selectedEvent.eventId ? 'selected-node' : ''"
+        >{{ prop.node.label }}</div>
         <q-space></q-space>
         <q-icon name="add_circle" color="primary" size="16px" class="q-mr-sm"
           @click="addChangeEvent(prop.node)"></q-icon>
       </div>
     </template>
     <template v-slot:header-DELETABLE="prop">
-      <div class="row col items-center event-node">
-        <div class="row col items-center" @click="onSelected(prop.node)">
-          <q-icon v-if="prop.node.eventId" name="play_circle" :color="prop.node.hasFlow ? 'green' : 'grey'" size="16px"
-            class="q-mr-sm">
-          </q-icon>
-          <div>{{ prop.node.label }}</div>
-        </div>
-        <div>
-          <q-btn class="q-mr-sm delete-btn" flat fab-mini icon="delete_forever" padding="none" color="negative"
-            @click="deleteEvent(prop.node)"></q-btn>
-        </div>
+      <div class="row col items-start event-node" @click="onSelected(prop.node)">
+          <q-icon v-if="prop.node.eventId" name="play_circle" :color="prop.node.hasFlow ? 'green' : 'grey'" size="16px" class="q-mr-sm" />
+          <div class="no-wrap" :class="selectedEvent && prop.node.eventId === selectedEvent.eventId ? 'selected-node' : ''" >{{ prop.node.label }}</div>
+          <q-space></q-space>
+          <q-icon  name="delete_forever"  color="negative" size="16px" @click="deleteEvent(prop.node)"></q-icon>
       </div>
     </template>
   </q-tree>

frontend/src/components/right/EventSetter.vue

@@ -61,12 +61,12 @@ export default defineComponent({
         if(store.eventTree.findEventById(addEventId)){
           return;
         }
-        customEvents.events.push(
-          new kintoneEvent(
-            displayName,
-            addEventId,
-            customButtonId)
-        );
+        customEvents.events.push({
+          eventId: addEventId,
+          label: displayName,
+          parentId: customButtonId,
+          header: 'DELETABLE'
+        });
       }
     }
 

frontend/src/components/right/FieldInput.vue

@@ -7,9 +7,6 @@
           {{ selectedField.name }}
         </q-chip>
       </template>
-      <!-- <template v-slot:hint v-if="isSelected">
-        <div> 項目コード：<q-chip  size="sm" outline color="secondary" text-color="white">{{selectedField.code}}</q-chip></div>
-      </template> -->
       <template v-slot:hint v-if="!isSelected">
         {{ placeholder }}
       </template>
@@ -19,7 +16,7 @@
       </template>
     </q-field>
     <show-dialog v-model:visible="show" name="フィールド一覧" @close="closeDg" widht="400px">
-      <field-select ref="appDg" name="フィールド" type="single" :appId="store.appInfo?.appId"></field-select>
+      <field-select ref="appDg" name="フィールド" :type="selectType" :appId="store.appInfo?.appId" :fieldTypes="fieldTypes"></field-select>
     </show-dialog>
   </div>
 </template>
@@ -54,6 +51,14 @@ export default defineComponent({
       type: String,
       default: '',
     },
+    selectType:{
+        type:String,
+        default:'single'
+    },
+    fieldTypes:{
+      type:Array,
+      default:()=>[]
+    },
     hint: {
       type: String,
       default: '',

frontend/src/components/right/InputText.vue

@@ -33,6 +33,10 @@ export default defineComponent({
       type: String,
       default: '',
     },
+    fieldTypes:{
+      type:Array,
+      default:()=>[]
+    },
     hint: {
       type: String,
       default: '',

frontend/src/components/right/SelectBox.vue

@@ -29,7 +29,7 @@ export default defineComponent({
       default:'',
     },
     modelValue: {
-      type: Object,
+      type: [Array,String],
       default: null,
     },
   },

frontend/src/stores/flowEditor.ts

@@ -113,19 +113,19 @@ export const useFlowEditorStore = defineStore('flowEditor', {
     },
 
 
-    deleteEvent(event: IKintoneEvent) {
+    async deleteEvent(event: IKintoneEvent) {
       const store = useFlowEditorStore();
       if (event.flowData) {
         const flow = event.flowData;
-        if (flow.id === '') {
-          return;
+        if (flow.id !== '') {
+          await flowCtrl.DeleteFlow(flow.id)
+          if (this.flows) {
+            this.flows = this.flows.filter((f) => f.id !== flow.id);
+          }
         }
-        flowCtrl.DeleteFlow(flow.id)
         eventTree.deleteEvent(event, store);
-        if(this.flows){
-          this.flows = this.flows.filter((f) => f.id !== flow.id);
-        }
-      } else {
+      }
+      else {
         eventTree.deleteEvent(event, store);
       }
     },

frontend/src/types/KintoneEvents.ts

@@ -95,10 +95,7 @@ export class KintoneEventManager {
           const lastIndex = eventId.lastIndexOf('.');
           const groupId = eventId.substring(0, lastIndex);
           const eventNode = this.findEventById(groupId);
-          if (
-            eventNode &&
-            (eventNode.header === 'EVENTGROUP' || eventNode.header === 'CHANGE')
-          ) {
+          if (eventNode && (eventNode.header === 'EVENTGROUP' || eventNode.header === 'CHANGE')) {
             const groupEvent = eventNode as kintoneEventGroup;
 
             const newEvent = {