is there a way to make the bot edit the messages of an embed after selecting an option from a select menu?
Like if the message on the embed is: "Fruit",
If you choose Mango in the select menu, the embed's text would edit to "Mango".
If you choose Apple in the select menu, the embed's text would edit to "Apple".
And, for more information, the embed and the select menu is in the same message.
Yeah, for example if you use the interactionCreate event like so :
client.on('interactionCreate', async interaction =>{
// First we make sure it's the right select menu
if(interaction.customId !== "your_select_menu_id") return;
// ...
})
We can get the selected option using the values property which is an array and getting the first element.
let selected = interaction.values[0]
Then we simply edit the message's content to the selected variable
await interaction.message.edit({ content : selected })
Related
I have a reactive form and I am using Material Angular, with a tab group and the tab names comes from an array, I need to add the possibility of changing those tabs names for new ones. If a write a new title in the input I need to update the name of the tab label.
I’m getting the value from the input, but I can’t figure it out how to send it to the names of the tabs:
app.component.ts
this.newTitleArm = selection.formdata.titleTextArms;
console.log(this.newTitleArm);
STACKBLITZ
SCREENSHOT
Can you have a look at this Stackblits
Note that I have modified the submit method and have added
if(this.form.get('titleArms').value === 'changeArm'){
this.tabs[this.selected.value].name = this.form.get('titleTextArms').value;
}
Here I'm assigning the titleTextArms control value to selected tab name. You can get selected tab by this.tabs[this.selected.value]
Also added the if condition to check selection of radio button.
UPDATE:
since you have used tab names to create the text in the parent component.
In the submit method
need to do the tab name update before emitting the updateDataEvent.
submit(): void {
if (this.form.get('titleArms').value === 'changeArm') {
if (this.form.get('titleTextArms').value !== '') {
this.tabs[this.selected.value].name =
this.form.get('titleTextArms').value;
}
}
this.updateDataEvent.emit({
formdata: this.form.getRawValue(),
tabs: this.tabs,
});
}
The problem is that you are not updating the respective tab name anywhere, neither in your submit, nor in your updateData.
You submit the value, but you are not updating the tabs.
For example, in your submit method add this hard-coded update and then press the Save button:
this.tabs[0].name = "test";
Because now you updated the first tab's name, you should see the change.
How can I show programmatically the column PopupMenu in Ag-Grid?
PopupMenu Ag-Grid
With the gridApi you can hide it, but not show it
gridApi.hidePopupMenu()
I try also with the FilterInstance and the columnApi, but I haven't found anything that works
gridApi.getFilterInstance(colKey)
gridColumnApi?.getColumn(colKey) ...
Thanks
you can add a little workaround to open the filter popup:
// find the header menu button for the desired column
const colElement = document.querySelector("div[col-id='" + desiredColumn.getColId() + "'] > .ag-cell-label-container > .ag-header-cell-menu-button");
colElement.dispatchEvent(new Event("click")); // simulate a click on the menu button
// the next part ist to switch to the filter tab:
setTimeout(() => { // give the browser some time to render the menu
const tabElement = document.querySelectorAll("div.ag-tabs-header > .ag-tab")[1]; // select the filter tab
if (!tabElement.classList.contains("ag-tab-selected")) { // if the filter tab is not selected already
tabElement.dispatchEvent(new Event("click")); // click the filter tab
}
}, 10);
Basically, you locate the button in the DOM and execute a virtual click on it. It's not pretty but it works well, maybe we'll get an API for this in the future.
What you're wanting to do is to access getFilterInstance() of the Ag Grid API. Here's the relevant documentation: https://www.ag-grid.com/javascript-grid/filter-api/
Here's one way of accessing, and setting the filter using the getFilterInstance method
var FilterComponent = gridOptions.api.getFilterInstance('Status');
FilterComponent.selectNothing(); //Cleared all options
FilterComponent.selectValue('Approved') //added the option i wanted
FilterComponent.onFilterChanged();
Here's a related Stackoverflow question: how to pre-set column filter in ag-grid
Lets say I have the following html..
<select name="certificatesSelect"
ng-model="$ctrl.selectedCertificate"
ng-change="$ctrl.onSelectCertificate()"
ng-options="certificate as certificate.name for certificate in $ctrl.certificateDropdownOptions track by certificate.id">
<input id="certificate-upload-file-input"
type="file"
style="visibility: hidden"
accept=".der,.crt"/>
One of my options that are populated by ng-options is a "Browse..." option. When the user selects the 'Browse...' option from the select box, I want to be able to pull up the file upload window provided by the browser, i.e the same action as if the user clicked on the file type input box.
My initial attempt at this was something as follows where on my controller I had the onSelectCertificate function bound to change event of the select box.
onSelectCertificate() {
// if the selected option is the "Browse..." option
if (this.selectedCertificate.id === this.BROWSE_OPTION_ID) {
// find the input element and click on it
this.certificateFileInput = this.$element.find("input[type='file']");
this.$timeout(() => {
this.certificateFileInput.click();
}, 0);
}
}
However, this does not work. After some reading online, I believe this is because of a security concern where only a USER issued click event can trigger another click event through javascript. Therefore, the ng-change binding for the select box can not trigger my own click event through javascript. Now, my question is, are there any other ways to achieve this select box design?
Scenario is quite simple. I have edit view which comprises of select element with multiple selection. Select element looks as follows
<select class="selectpicker" multiple
ng-model="UserBeingEdited.UberTypes"
ng-options="uberType.Id as uberType.Name for uberType in UberTypes"></select>
</div>
If I press edit for specific user then showEditModal function is called and edit pop up shows up. User has his own UberTypes objects selected so I pick theirs Ids and assign to UserBeingEdited.UberTypes.
$scope.UserBeingEdited = { UberTypes: []};
$scope.showEditModal = function (user) {
for (var i = 0; i < user.UberTypes.length; i++) {
$scope.UserBeingEdited.UberTypes.push(user.UberTypes[i].Id);
}
$("#editUserModal").modal("show");
};
Unfortunately they are not selected, no matter what. Suprisingly, if I set values to property UserBeingEdited by the time of declaring then it works, items are selected.
$scope.UserBeingEdited = { UberTypes: [1,2]}; //this works
It seems like angular does not refresh selected items within UI.
EDIT:
I have two items: Uber1 and Uber2. Both items are selected but view does not reflect it. If I open drop down menu and select Uber2 it shows Uber1 selected, apparently Uber2 was selected and another click was treated as unselection. The same happens when I click Uber1 first, Uber2 shows as selected.
As above picture depicts, Uber2 is highlighted since I have just clicked it but it shows Uber1 as selected. Both were selected in User's UberTypes but view just simply does not mark them as selected.
http://jsfiddle.net/upusq8ah/7/
I use bootstrap-select.js for select element and presumably this library causes such an error since without including it, it works fine.
Solution
After a while of struggle, I accidentally ran into below workaround. You need to call refresh on selectPicker and this has to be delayed otherwise it will bring no effect.
setTimeout(function () {
$('.selectpicker').selectpicker('refresh');
}, 100);
$("#editUserModal").modal("show");
I'm trying to add a select box to a Backgrid.Grid in order to fire a function that will reset the state: {pageSize} to the value the user selects. But I can't figure out how or where to bind the events to the grid.
My understanding is that the element needs to be part of the view (which I believe is the Backgrid.Grid), so I added the select box to the footer of the grid and gave it an id and tried adding an events parameter and matching function to it, but it does nothing.
So, in my footer I have
select id="changePageSize"
And in the grid
events: {
'change #changePageSize' : 'changePageSize'
},
changePageSize: function(){ console.log('hooray!');}
I believe my approach is completely wrong at this point but can't find anything to direct me down the correct path.
What I ended up doing was adding the event listener and function to the backgrid-paginator extension.
Added the select box to the _.template('...
_.template('...<div class="page-size"><select name="pageSize" class="pageSize"><option...');
Under events I added:
'change select.pageSize' : 'changePageSize'
And then created the function:
changePageSize: function(e){
e.preventDefault();
this.collection.state.pageSize = Math.floor(e.currentTarget.value);
this.collection.reset();
},
It makes sense to make this function and its display optional and to also allow a developer to assign an array to generate custom option values. When I get time.
Regarding Duffy Dolan's answer: everything si great in your example, except if you are on let's say on third page and select to have all results only on one page, you get an error.
You just need to add:
this.collection.getPage(1); // it will always select first page