ボタン配置改修

This commit is contained in:
2024-06-11 15:11:24 +09:00
parent 0e9b0ea693
commit 4ee72a8a75
4 changed files with 26 additions and 33 deletions

View File

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

View File

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

View File

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

View File

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