I have created a custom dropdown for trumbowyg following this guide, but am stuck on how to really insert a text when a dropdown button is clicked.
$('.editor').trumbowyg({
btnsDef: {
tagSelect: {
fn: () => {
// how to insert test to cursor's position?
},
text: 'Name Tag',
hasIcon: false
},
detailsType: {
dropdown: [
'tagSelect',
],
title: 'Client Tag',
hasIcon: false
}
},
btns: [
['detailsType']
]
})
I did this by using the plugin "mention".
Using that plugin it's as simple as this:
$('#editorid').trumbowyg({
plugins: {
mention: {
source: [
{ mergetag: '[RECIPIENT_NAME]', name: 'Full name of the recipient' },
{ mergetag: '[RECIPIENT_NAME_FIRST]', name: 'First name of the recipient' },
{ mergetag: '[SENDER_NAME]', name: 'Name of sender' },
{ mergetag: '[SENDER_MAIL]', name: 'Sender email' },
{ mergetag: '[SIGNATURE]', name: 'Senders mailsignature' }
],
formatDropdownItem: function (item) {
return item.name + ' ' + item.mergetag;
},
formatResult: function (item) {
return item.mergetag;
}
}
}
});
More info here: https://alex-d.github.io/Trumbowyg/demos/plugins/mention.html
Related
Suppose that you have a JSON file that contains data like this:
[
{
name: 'Data Groups',
},
{
name: 'Transaction start Filter',
},
{
name: 'Filter',
},
{
name: 'Graph, Tables',
},
{
name: 'Trending with filters',
},
{
name: 'Graph, area & Pie',
},
]
How to read it using cypress and print the name one by one using cypress?
You can do something like this:
var arr = [
{
name: 'Data Groups',
},
{
name: 'Transaction start Filter',
},
{
name: 'Filter',
},
{
name: 'Graph, Tables',
},
{
name: 'Trending with filters',
},
{
name: 'Graph, area & Pie',
},
]
for (var index in arr) {
cy.log(arr[index].name)
}
Test Runner Screenshot:
If you want to read from a JSON file which is present somewhere in your repo you can:
//If the file is in fixtures folder
cy.fixture('data.json').then((data) => {
for (var index in data) {
cy.log(data[index].name)
}
})
//If the file is somewhere else in repo
cy.fixture('path to file/data.json').then((data) => {
for (var index in data) {
cy.log(data[index].name)
}
})
If this is your test data, you can iterate over the array and dynamically create a test case for each object in the array:
[
{
"name": "Data Groups"
},
{
"name": "Transaction start Filter",
},
{
"name": "Filter",
},
{
"name": "Graph, Tables",
},
{
"name": "Trending with filters",
},
{
"name": "Graph, area & Pie",
}
].forEach(data => {
it(`Test ${JSON.stringify(data)}`, () => {
cy
.log(data.name);
});
});
And the result from test runner:
Just beware that you left out one bracket, so your data is not a valid JSON.
Using kendo grid edit event I want to disable field name and id during Edit mode. I manage to disable id by following this example here. But went I try to disable name seem it not working, any thought how to do this?
WORKING DEMO IN DOJO
$("#grid").kendoGrid({
columns: [
{ field: "id" },
{ field: "name" },
{ field: "age" },
{ command: "edit" }
],
dataSource: {
data: [
{ id: 1, name: "Jane Doe", age: 30 },
{ id: 2, name: "John Doe", age: 33 }
],
schema: {
model: {
id: "id",
fields: {
"id": { type: "number" },
"name": { type: "string" }
}
}
}
},
editable: "inline",
toolbar:["create"],
edit: function(e) {
if (!e.model.isNew()) {
var numeric = e.container.find("input[name=id]").data("kendoNumericTextBox");
numeric.enable(false);
//var x = e.container.find("input[name=name]").data("kendoTextBox");
//x.enable(false);
//$("input[name=name]").prop("disabled", true).addClass("k-state-disabled");
//$("input[name=name]").editable = false;
}
}
});
by using editable function i created this
function isEditable(e){
var dataSource = $("#grid").data("kendoGrid").dataSource;
return (e.id == null || e.id == '');
}
and add this into the grid > column
columns: [
{ field: "id", editable: isEditable },
{ field: "name", editable: isEditable },
{ field: "age" },
{ command: "edit" }
],
Full working demo is here
i am working on vuetify drawer, when i click each drawer it navigates to another page, so i
thought that would be cool if i add some children's to each of them, but after that when i click
on each children item it navigates into wrong pages.
drawer code before adding children's ... the one that works fine
data: () => ({
items: [
{
icon: 'mdi-view-dashboard',
title: 'Dashboard',
to: '/',
},
{
icon: 'mdi-account',
title: 'First',
},
{
icon: 'mdi-account',
title: 'Second',
to: '/pages/mesebo',
},
],
}),
computed: {
...mapState(['barColor', 'barImage']),
drawer: {
get () {
return this.$store.state.drawer
},
set (val) {
this.$store.commit('SET_DRAWER', val)
},
},
computedItems () {
return this.items.map(this.mapItem)
},
profile () {
return {
avatar: true,
title: this.$t('avatar'),
}
},
},
methods: {
mapItem (item) {
return {
...item,
children: item.children ? item.children.map(this.mapItem) : undefined,
title: this.$t(item.title),
}
},
},
router code
export default new Router({
mode: 'hash',
base: process.env.BASE_URL,
routes: [
{
path: '/',
component: () => import('#/views/dashboard/Index'),
children: [
// Dashboard
{
name: 'Dashboard',
path: '',
component: () => import('#/views/dashboard/Dashboard'),
},
// Pages
{
name: 'First',
path: 'pages/burea',
component: () => import('#/views/dashboard/pages/Bureau'),
},
{
name: 'Second',
path: 'pages/mesebo',
component: () => import('#/views/dashboard/pages/Mesebo'),
},
],
},
],
})
drawer code after adding children
data: () => ({
items: [
{
icon: 'mdi-view-dashboard',
title: 'Dashboard',
to: '/',
},
{
icon: 'mdi-account',
title: 'First',
children: [
{
title: 'sub-first',
to: '/pages/bureau',
},
],
},
{
icon: 'mdi-account',
title: 'Second',
to: '/pages/mesebo',
children: [
{
title: 'sub-second',
to: '/pages/mesebo',
},
],
},
],
})
computed: {
...mapState(['barColor', 'barImage']),
drawer: {
get () {
return this.$store.state.drawer
},
set (val) {
this.$store.commit('SET_DRAWER', val)
},
},
computedItems () {
return this.items.map(this.mapItem)
},
profile () {
return {
avatar: true,
title: this.$t('avatar'),
}
},
},
methods: {
mapItem (item) {
return {
...item,
children: item.children ? item.children.map(this.mapItem) : undefined,
title: this.$t(item.title),
}
},
},
drawer view before adding children
drawer view after adding children
i did not change the router.js file, the only thing that i have done is taking the "to: '/pages/bureau'" from where it was before into children, but as you look in the screen shot it is going in to another
undefined link, the template i am using is. https://demos.creative-tim.com/vuetify-material-dashboard/
what you have to do is, add atribute 'groups' and assign it the folder for your
components, in this case your group will be 'pages' and your 'to' attribute will
be '/bureau' so
on your drawer change this
{
icon: 'mdi-account',
title: 'First',
children: [
{
title: 'sub-first',
to: '/pages/bureau',
},
],
},
into this
{
icon: 'mdi-account',
title: 'First',
group: 'pages',
children: [
{
title: 'sub-first',
to: '/bureau',
},
],
},
I recently made the switch with Vuelidate from Vee-Validate a few weeks ago for all our apps and have been loving its flexibility so far; however, I've run across an issue that I'm not quite sure how to solve...
I've added the (primitive) example, using my real data here:
https://jsfiddle.net/80cuuagp/18/
From the fiddle:
new Vue({
el: "#app",
data() {
return {
questions: [
{
message: '1. Do you expect to conduct cash transactions for this account? ',
value: false,
conditionalFields: [
{
title: 'Cash In',
fields: [
{ label: 'Total Amount', value: '' },
{ label: 'Frequency', value: '' }
]
},
{
title: 'Cash Out',
fields: [
{ label: 'Total Amount', value: '' },
{ label: 'Frequency', value: '' }
]
}
]
},
{
message: '2. Will Electronic (ACH) transactions be processed on the account (excluding card transactions)?',
value: false,
conditionalFields: [
{
title: 'Electronic Deposits',
fields: [
{ label: 'Total Amount', value: '' },
{ label: 'Frequency', value: '' }
]
},
{
title: 'Electronic Withdrawals',
fields: [
{ label: 'Total Amount', value: '' },
{ label: 'Frequency', value: '' }
]
}
]
},
{
message: '3. Will Domestic Wires be sent or received from the account?',
value: false,
conditionalFields: [
{
fields: [
{ label: 'Frequency of Incoming Wires', value: '' }
]
},
{
fields: [
{ label: 'Frequency of Outgoing Wires', value: '' },
]
}
]
},
{
message: '4. Will International Wires be sent or received from the account?',
value: false,
conditionalFields: [
{
fields: [
{ label: 'Frequency of Incoming Wires', value: '' }
]
},
{
fields: [
{ label: 'Frequency of Outgoing Wires', value: '' },
]
}
]
},
{
message: '5. Will Monetary Instruments (CC/MO) be issued from the account?',
value: false,
conditionalFields: [
{
fields: [
{ label: 'Total Amount', value: '' }
]
}
]
}
]
}
},
validations: {
questions: {
$each: {
conditionalFields: {
$each: {
fields: {
$each: {
value: { required }
}
}
}
}
}
}
}
})
The problem is - I'm conditionally rendering fields based on the user's input. If he or she selects "Yes" to any of the questions, a secondary fieldset will appear below it and ask for input. These fields are only required if yes is selected and they appear on the DOM (and will also have different validations, which I'm not sure how to address, either without hard-coding everything). I've tried looping through the data by making validations a function, but even though it seems to compile, it's not dynamically adding any validations based on the question[index].value being set to true.
I feel like there has to be a simple way to do this, but I'm definitely overthinking it at this point. Any help would be greatly appreciated!
Thanks!
My CKEDITOR plugin needs to create <select size="15"><option ...></select>, but the size attribute is not directly supported by the creation mechanism. I have tried various ways of adding the size attribute after creation, but so far no joy. Here is what I have; the select is created but it does not get the size attribute.
CKEDITOR.dialog.add('macrosDialog', function(editor) {
return {
// Basic properties of the dialog window: title, minimum size.
title: 'Cadenza Macros',
resizable: CKEDITOR.DIALOG_RESIZE_BOTH,
minWidth: 400,
minHeight: 200,
// Dialog window contents definition.
contents: [
{
// Definition of the Basic Settings dialog tab (page).
id: 'tab-basic',
label: 'Basic Settings',
// The tab contents.
elements: [
{
type: 'select',
id: 'groups',
name: 'groups',
label: 'Groups',
style: "height: 300",
items: [ [ 'Core Scala' ], [ 'Create Courses with Micronautics Cadenza' ], [ 'Java / Scala Interoperability' ], [ 'Play Framework' ] ],
'default': 'Play Framework'
},
{
// Text input field for the macro title (explanation).
type: 'text',
id: 'macroComment',
label: 'Comment',
validate: CKEDITOR.dialog.validate.notEmpty("Explanation field cannot be empty")
}
]
}
],
onLoad: function(e) {
var groups = editor.document.getElement("groups");
groups.setAttribute("size", 15);
//$("#groups").setAttr("size", 15);
},
onChange: function(e) {
alert('Group: ' + this.getValue());
},
// This method is invoked once a user clicks the OK button, confirming the dialog.
onOk: function() {
// The context of this function is the dialog object itself.
// http://docs.ckeditor.com/#!/api/CKEDITOR.dialog
var dialog = this;
// Creates a new <abbr> element.
var abbr = editor.document.createElement('abbr');
// Set element attribute and text, by getting the defined field values.
abbr.setAttribute('title', dialog.getValueOf('tab-basic', 'title'));
abbr.setText(dialog.getValueOf('tab-basic', 'abbr'));
// Finally, inserts the element at the editor caret position.
editor.insertElement(abbr);
}
};
});
I used the html element to insert whatever I wanted:
contents: [
{
id: 'macrosDialog',
label: 'Basic Settings',
// The tab contents.
elements: [
{
type: 'hbox',
id: 'lists',
//style: "vertical-align: top",
widths: [ '25%', '25%', '25%', '25%' ],
children: [
{
type: 'html',
id: 'groups',
name: 'groups',
html: '<select size="15"></select>'
},{
type: 'html',
id: 'courses',
name: 'courses',
html: '<select size="15"></select>'
},{
type: 'html',
id: 'sections',
name: 'sections',
html: '<select size="15"></select>'
},{
type: 'html',
id: 'lectures',
name: 'lectures',
html: '<select size="15"></select>'
},
],
onLoad: function(data) {
var dialog = this.getDialog();
var groups = dialog.getContentElement('macrosDialog', 'lists', 'groups');
console.log(groups);
var courses = dialog.getContentElement('macrosDialog', 'lists', 'courses');
console.log(courses);
var sections = dialog.getContentElement('macrosDialog', 'lists', 'sections');
console.log(sections);
var lectures = dialog.getContentElement('macrosDialog', 'lists', 'lectures');
console.log(lectures);
}
}
]
}
]