Handle custom row click - vue.js

<v-data-table
:headers="headers"
:items="medications"
#click:row="detail"
class="elevation-23"
>
This is how I have included #click:row in the v-data-table. With this when the row is clicked the detail function is called. But I have some columns in the row which is used to edit and delete option. When that is clicked I want some other functions to be called which I have defined.
But when I click that edit or delete options the details function is being called.
How can I stop #click:row to call detail function when the Actions column is clicked.

To prevent click event to propagate to parent row, you should use .stop modifier in child (action buttons):
<v-btn #click.stop="edit">Edit</v-btn>

Related

How to send an event to a element in a relative position of the current element

I have a list of elements with the class .node-display, when one is clicked it becomes an input. I want to capture the down or up arrow keyups to click the very next .node-display in the list (relative to the current element).
In the below example, pressing down should click on item 5, and pressing up would click on item 3.
1
2
3
4 (Currently selected)
5
6
My best guess is something like this.
<input
_="on keyup[key is 'ArrowDown'] send click to the first .node-display end"
>
Does anyone know how I'd actually write this expression?
You probably want to put the behavior on the parent ul so you don't have to repeat it on every input.
Something like this:
<ul _="on keydown[key is 'ArrowDown'] from <input/> in me
set nextSibling to it's parentElement's nextElementSibling
if nextSibling
set nextInput to the first <input/> in nextSibling
call nextInput.focus()
halt
end
on keydown[key is 'ArrowUp'] from <input/> in me
set previousSibiling to it's parentElement's previousElementSibling
if previousSibiling
set previousInput to first <input/> in previousSibiling
call previousInput.focus()
halt
end
">
<li><input/></li>
<li><input/></li>
<li><input/></li>
<li><input/></li>
</ul>
Some notes on this code:
I am using the from from in the event handler, which puts the element that the event came from into the it symbol
I am using the keydown event so we can cancel the event with the halt command, to avoid the down and up keys changing the caret position
I am using the halt command to stop the event from propogating
I used focus rather than click as a proof of concept

Window action without having so select any record

First and for reference, what I call a window action is an action on the top of a tree view.
Example below:
Problem: if I select no record, Odoo tells me that I have to select record.
Question: I would like the action to be called even if there is no record selected: Is that possible?
Example: the action for instance will start a popup wizard, if a selection of record is done this selection will be preloaded, if no record is selected I will process myself the data preloaded.
The following context in the window action will allow it to be triggered even if no record is selected:
context="{'sidebar_without_id':True}"
Instead of Action menu you can put your own button inside control panel (e.g. beside create,import button)

Vue - How to display the clicked item and the previous/next item of an array

I have two elements in two rows next to each other:
I have entered them all in an array of objects and called them through props to display them in the left one.
Now what I want to do is when I click on any channel from the left item, it shows in the right with the first item before it and after it in the array, so I am going to use $emit with #clicked function to get an event to call it on the app.vue. But I don't know what to do after to get it displayed.
I feel I should create a new component but I'm at a loss about the elements within.
Edit: Sorry I forgot to mention, the picture is the design not the result of my code, I could only create the left one "list of stations" and have a problem doing the right part based on a click of the left part
You can indeed create 2 components. 1 component having a list of all the stations. another component displaying the details of the radio station.
The moment you click a station in the list, it sends an event and updates a property in the vue.app. This could for example be called selectedStation.
your component that shows the detail of the radiostation just receives a prop with the details of the station.

Close pop-up window after row selecting

I created a TableView with some data from database table. This view opens in a pop-up window.
When I select any row from the pop-up, my selected value is saved into some global variable.
How can I close the pop-up window after the row is selected? How to redirect to the view from where the pop-up was triggered?
Make this:
Create on_close event and put its name into lc_close var
Assign it to your table view click and to popup like this
<htmlb:tableView>
....
onRowSelection = "ON_CLOSE" >
</htmlb:tableView>
gr_pop_up->set_on_close_event( iv_event_name = lc_close iv_view = me ).
gr_pop_up->open( ).
Make in popup outbound plug named EXIT
Fire this plug inside itself recursively
method OP_EXIT.
me->fire_outbound_plug( iv_outbound_plug = 'EXIT' ).
endmethod.
This will close your popup.
You can save your value in a data base table or in a Singelton-Object.
What type of pop-up are you using? POPUP_TO_CONFIRM? Or a DynPro?
If it's the Function Module POPUP_TO_CONFIRM then just implement your logic based on a if statement checking the attribute "answer" of the FM.
If it's a DynPro then you need to add logic on the closing event. In a PAI Module.

Selecting the correct "Add" button

I have a field that has a "+" Add button in case you want to add more lines. I want to add 2-3 lines with it, then to click on the "+" button from a newly created line to create 2-3 more. The problem is that all buttons are declared the same:
<button class="ng-scope" ng-if="formData.order_request_status == STATUSES['OPEN']" ng-click="addImportMaterial()" style="margin-left: 3px;" type="button">+</button>
I have written the following xpath:
//button[#ng-click='addImportMaterial()']
but this selects all plus buttons and I want only the third one to be pressed. Any ideas? Thanks!
You should try using xpath with index then as below :-
I want only the third one to be pressed
(//button[#ng-click='addImportMaterial()'])[3]
So, (Assuming your using java) use above xpath to locate third button and click as :-
driver.findElement(By.xpath("(//button[#ng-click='addImportMaterial()'])[3]")).click()
Since you will be getting a List of buttons, to press the third one you just have to do buttons.get(2).click();