* [pve-devel] [PATCH widget-toolkit 1/5] webhook edit: improve layout and component hierarchy
2024-11-12 14:41 [pve-devel] [PATCH widget-toolkit 0/5] improve webhook edit window Dominik Csapak
@ 2024-11-12 14:41 ` Dominik Csapak
2024-11-12 14:41 ` [pve-devel] [PATCH widget-toolkit 2/5] webhook edit: make items config not static Dominik Csapak
` (4 subsequent siblings)
5 siblings, 0 replies; 7+ messages in thread
From: Dominik Csapak @ 2024-11-12 14:41 UTC (permalink / raw)
To: pve-devel
* instead of manually setting margin/paddings and the fieldLabel, just
use a FieldContainer instead of Container. That implements the
Ext.form.Labelable mixin, which correctly positions the label. This
also has the effect that the labels are now styled correctly.
* modify the margins to get a consistent spacing between fields
* reverse the order of grid/button, to be consistent with our other
grids with this input pattern
* make the label of the textarea a proper fieldLabel with a
FieldContainer, which gets rid of the ':' in the gettext and
styles the label correctly.
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
src/panel/WebhookEditPanel.js | 46 ++++++++++++-----------------------
1 file changed, 15 insertions(+), 31 deletions(-)
diff --git a/src/panel/WebhookEditPanel.js b/src/panel/WebhookEditPanel.js
index 0a39f3c..b440d7f 100644
--- a/src/panel/WebhookEditPanel.js
+++ b/src/panel/WebhookEditPanel.js
@@ -36,15 +36,12 @@ Ext.define('Proxmox.panel.WebhookEditPanel', {
columnB: [
{
+ xtype: 'fieldcontainer',
+ fieldLabel: gettext('Method/URL'),
layout: 'hbox',
border: false,
margin: '0 0 5 0',
items: [
- {
- xtype: 'displayfield',
- value: gettext('Method/URL:'),
- width: 125,
- },
{
xtype: 'proxmoxKVComboBox',
name: 'method',
@@ -77,6 +74,7 @@ Ext.define('Proxmox.panel.WebhookEditPanel', {
cbind: {
isCreate: '{isCreate}',
},
+ margin: '0 0 10 0',
},
{
xtype: 'textarea',
@@ -87,7 +85,7 @@ Ext.define('Proxmox.panel.WebhookEditPanel', {
fieldStyle: {
'font-family': 'monospace',
},
- margin: '15 0 0 0',
+ margin: '0 0 5 0',
},
{
xtype: 'pmxWebhookKeyValueList',
@@ -97,6 +95,7 @@ Ext.define('Proxmox.panel.WebhookEditPanel', {
cbind: {
isCreate: '{isCreate}',
},
+ margin: '0 0 10 0',
},
{
xtype: 'proxmoxtextfield',
@@ -159,7 +158,7 @@ Ext.define('Proxmox.panel.WebhookEditPanel', {
});
Ext.define('Proxmox.form.WebhookKeyValueList', {
- extend: 'Ext.container.Container',
+ extend: 'Ext.form.FieldContainer',
alias: 'widget.pmxWebhookKeyValueList',
mixins: [
@@ -319,33 +318,13 @@ Ext.define('Proxmox.form.WebhookKeyValueList', {
},
},
- margin: '10 0 5 0',
-
items: [
- {
- layout: 'hbox',
- border: false,
- items: [
- {
- xtype: 'displayfield',
- width: 125,
- },
- {
- xtype: 'button',
- text: gettext('Add'),
- iconCls: 'fa fa-plus-circle',
- handler: 'addLine',
- margin: '0 5 5 0',
- },
- ],
- },
{
xtype: 'grid',
reference: 'grid',
minHeight: 100,
maxHeight: 100,
scrollable: 'vertical',
- margin: '0 0 0 125',
viewConfig: {
deferEmptyText: false,
@@ -358,6 +337,13 @@ Ext.define('Proxmox.form.WebhookKeyValueList', {
},
},
},
+ margin: '5 0 5 0',
+ },
+ {
+ xtype: 'button',
+ text: gettext('Add'),
+ iconCls: 'fa fa-plus-circle',
+ handler: 'addLine',
},
],
@@ -365,12 +351,10 @@ Ext.define('Proxmox.form.WebhookKeyValueList', {
let me = this;
for (const [key, value] of Object.entries(me.gridConfig ?? {})) {
- me.items[1][key] = value;
+ me.items[0][key] = value;
}
- me.items[0].items[0].value = me.fieldLabel + ':';
-
- me.items[1].columns = [
+ me.items[0].columns = [
{
header: me.fieldTtitle,
dataIndex: 'headerName',
--
2.39.5
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
^ permalink raw reply [flat|nested] 7+ messages in thread* [pve-devel] [PATCH widget-toolkit 2/5] webhook edit: make items config not static
2024-11-12 14:41 [pve-devel] [PATCH widget-toolkit 0/5] improve webhook edit window Dominik Csapak
2024-11-12 14:41 ` [pve-devel] [PATCH widget-toolkit 1/5] webhook edit: improve layout and component hierarchy Dominik Csapak
@ 2024-11-12 14:41 ` Dominik Csapak
2024-11-12 14:41 ` [pve-devel] [PATCH widget-toolkit 3/5] webhook edit: use type in add button text Dominik Csapak
` (3 subsequent siblings)
5 siblings, 0 replies; 7+ messages in thread
From: Dominik Csapak @ 2024-11-12 14:41 UTC (permalink / raw)
To: pve-devel
modifying static elements from the class, like done here with e.g.
me.items[0][key] = value;
is dangerous, since it directly modifies the class definition of those
arrays/objects.
Instead move the definition in initComponent, which uses a fresh
declaration each time the component is initialized.
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
src/panel/WebhookEditPanel.js | 143 +++++++++++++++++-----------------
1 file changed, 73 insertions(+), 70 deletions(-)
diff --git a/src/panel/WebhookEditPanel.js b/src/panel/WebhookEditPanel.js
index b440d7f..fcc5b06 100644
--- a/src/panel/WebhookEditPanel.js
+++ b/src/panel/WebhookEditPanel.js
@@ -318,90 +318,93 @@ Ext.define('Proxmox.form.WebhookKeyValueList', {
},
},
- items: [
- {
- xtype: 'grid',
- reference: 'grid',
- minHeight: 100,
- maxHeight: 100,
- scrollable: 'vertical',
-
- viewConfig: {
- deferEmptyText: false,
- },
-
- store: {
- listeners: {
- update: function() {
- this.commitChanges();
- },
- },
- },
- margin: '5 0 5 0',
- },
- {
- xtype: 'button',
- text: gettext('Add'),
- iconCls: 'fa fa-plus-circle',
- handler: 'addLine',
- },
- ],
-
initComponent: function() {
let me = this;
- for (const [key, value] of Object.entries(me.gridConfig ?? {})) {
- me.items[0][key] = value;
- }
-
- me.items[0].columns = [
+ let items = [
{
- header: me.fieldTtitle,
- dataIndex: 'headerName',
- xtype: 'widgetcolumn',
- widget: {
- xtype: 'textfield',
- isFormField: false,
- maskRe: me.maskRe,
- allowBlank: false,
- queryMode: 'local',
+ xtype: 'grid',
+ reference: 'grid',
+ minHeight: 100,
+ maxHeight: 100,
+ scrollable: 'vertical',
+
+ viewConfig: {
+ deferEmptyText: false,
+ },
+
+ store: {
listeners: {
- change: 'itemChange',
+ update: function() {
+ this.commitChanges();
+ },
},
},
- flex: 1,
- },
- {
- header: me.fieldTtitle,
- dataIndex: 'headerValue',
- xtype: 'widgetcolumn',
- widget: {
- xtype: 'proxmoxtextfield',
- inputType: me.maskValues ? 'password' : 'text',
- isFormField: false,
- maskRe: me.maskRe,
- queryMode: 'local',
- listeners: {
- change: 'itemChange',
+ margin: '5 0 5 0',
+ columns: [
+ {
+ header: me.fieldTtitle,
+ dataIndex: 'headerName',
+ xtype: 'widgetcolumn',
+ widget: {
+ xtype: 'textfield',
+ isFormField: false,
+ maskRe: me.maskRe,
+ allowBlank: false,
+ queryMode: 'local',
+ listeners: {
+ change: 'itemChange',
+ },
+ },
+ flex: 1,
},
- allowBlank: !me.isCreate && me.maskValues,
-
- bind: {
- emptyText: '{record.emptyText}',
+ {
+ header: me.fieldTtitle,
+ dataIndex: 'headerValue',
+ xtype: 'widgetcolumn',
+ widget: {
+ xtype: 'proxmoxtextfield',
+ inputType: me.maskValues ? 'password' : 'text',
+ isFormField: false,
+ maskRe: me.maskRe,
+ queryMode: 'local',
+ listeners: {
+ change: 'itemChange',
+ },
+ allowBlank: !me.isCreate && me.maskValues,
+
+ bind: {
+ emptyText: '{record.emptyText}',
+ },
+ },
+ flex: 1,
},
- },
- flex: 1,
+ {
+ xtype: 'widgetcolumn',
+ width: 40,
+ widget: {
+ xtype: 'button',
+ iconCls: 'fa fa-trash-o',
+ },
+ },
+ ],
},
{
- xtype: 'widgetcolumn',
- width: 40,
- widget: {
- xtype: 'button',
- iconCls: 'fa fa-trash-o',
- },
+ xtype: 'button',
+ text: gettext('Add'),
+ iconCls: 'fa fa-plus-circle',
+ handler: 'addLine',
},
];
+ for (const [key, value] of Object.entries(me.gridConfig ?? {})) {
+ items[0][key] = value;
+ }
+
+ Ext.apply(me, {
+ items,
+ });
+
me.callParent();
me.initField();
},
--
2.39.5
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
^ permalink raw reply [flat|nested] 7+ messages in thread* [pve-devel] [PATCH widget-toolkit 3/5] webhook edit: use type in add button text
2024-11-12 14:41 [pve-devel] [PATCH widget-toolkit 0/5] improve webhook edit window Dominik Csapak
2024-11-12 14:41 ` [pve-devel] [PATCH widget-toolkit 1/5] webhook edit: improve layout and component hierarchy Dominik Csapak
2024-11-12 14:41 ` [pve-devel] [PATCH widget-toolkit 2/5] webhook edit: make items config not static Dominik Csapak
@ 2024-11-12 14:41 ` Dominik Csapak
2024-11-12 14:41 ` [pve-devel] [PATCH widget-toolkit 4/5] webhook edit: add emptytext to key-value fields Dominik Csapak
` (2 subsequent siblings)
5 siblings, 0 replies; 7+ messages in thread
From: Dominik Csapak @ 2024-11-12 14:41 UTC (permalink / raw)
To: pve-devel
so one can more easily see what gets added.
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
src/panel/WebhookEditPanel.js | 7 ++++++-
1 file changed, 6 insertions(+), 1 deletion(-)
diff --git a/src/panel/WebhookEditPanel.js b/src/panel/WebhookEditPanel.js
index fcc5b06..8b76d0a 100644
--- a/src/panel/WebhookEditPanel.js
+++ b/src/panel/WebhookEditPanel.js
@@ -70,6 +70,7 @@ Ext.define('Proxmox.panel.WebhookEditPanel', {
xtype: 'pmxWebhookKeyValueList',
name: 'header',
fieldLabel: gettext('Headers'),
+ subject: gettext('Header'),
maskValues: false,
cbind: {
isCreate: '{isCreate}',
@@ -91,6 +92,7 @@ Ext.define('Proxmox.panel.WebhookEditPanel', {
xtype: 'pmxWebhookKeyValueList',
name: 'secret',
fieldLabel: gettext('Secrets'),
+ subject: gettext('Secret'),
maskValues: true,
cbind: {
isCreate: '{isCreate}',
@@ -168,6 +170,9 @@ Ext.define('Proxmox.form.WebhookKeyValueList', {
// override for column header
fieldTitle: gettext('Item'),
+ // the text for a single element, used for the add button
+ subject: undefined,
+
// will be applied to the textfields
maskRe: undefined,
@@ -391,7 +396,7 @@ Ext.define('Proxmox.form.WebhookKeyValueList', {
},
{
xtype: 'button',
- text: gettext('Add'),
+ text: me.subject ? Ext.String.format(gettext('Add {0}'), me.subject) : gettext('Add'),
iconCls: 'fa fa-plus-circle',
handler: 'addLine',
},
--
2.39.5
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
^ permalink raw reply [flat|nested] 7+ messages in thread* [pve-devel] [PATCH widget-toolkit 4/5] webhook edit: add emptytext to key-value fields
2024-11-12 14:41 [pve-devel] [PATCH widget-toolkit 0/5] improve webhook edit window Dominik Csapak
` (2 preceding siblings ...)
2024-11-12 14:41 ` [pve-devel] [PATCH widget-toolkit 3/5] webhook edit: use type in add button text Dominik Csapak
@ 2024-11-12 14:41 ` Dominik Csapak
2024-11-12 14:41 ` [pve-devel] [PATCH widget-toolkit 5/5] webhook edit: display validity for added key/value fields Dominik Csapak
2024-11-12 17:04 ` [pve-devel] applied-series: [PATCH widget-toolkit 0/5] improve webhook edit window Thomas Lamprecht
5 siblings, 0 replies; 7+ messages in thread
From: Dominik Csapak @ 2024-11-12 14:41 UTC (permalink / raw)
To: pve-devel
namely 'Key' and 'Value'
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
src/panel/WebhookEditPanel.js | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/src/panel/WebhookEditPanel.js b/src/panel/WebhookEditPanel.js
index 8b76d0a..69a38f5 100644
--- a/src/panel/WebhookEditPanel.js
+++ b/src/panel/WebhookEditPanel.js
@@ -282,7 +282,7 @@ Ext.define('Proxmox.form.WebhookKeyValueList', {
me.lookup('grid').getStore().add({
headerName: '',
headerValue: '',
- emptyText: '',
+ emptyText: gettext('Value'),
newValue: true,
});
},
@@ -357,6 +357,7 @@ Ext.define('Proxmox.form.WebhookKeyValueList', {
maskRe: me.maskRe,
allowBlank: false,
queryMode: 'local',
+ emptyText: gettext('Key'),
listeners: {
change: 'itemChange',
},
--
2.39.5
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
^ permalink raw reply [flat|nested] 7+ messages in thread* [pve-devel] [PATCH widget-toolkit 5/5] webhook edit: display validity for added key/value fields
2024-11-12 14:41 [pve-devel] [PATCH widget-toolkit 0/5] improve webhook edit window Dominik Csapak
` (3 preceding siblings ...)
2024-11-12 14:41 ` [pve-devel] [PATCH widget-toolkit 4/5] webhook edit: add emptytext to key-value fields Dominik Csapak
@ 2024-11-12 14:41 ` Dominik Csapak
2024-11-12 17:04 ` [pve-devel] applied-series: [PATCH widget-toolkit 0/5] improve webhook edit window Thomas Lamprecht
5 siblings, 0 replies; 7+ messages in thread
From: Dominik Csapak @ 2024-11-12 14:41 UTC (permalink / raw)
To: pve-devel
by calling 'isValid()' once the widget is attached to the grid
Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
---
src/panel/WebhookEditPanel.js | 6 ++++++
1 file changed, 6 insertions(+)
diff --git a/src/panel/WebhookEditPanel.js b/src/panel/WebhookEditPanel.js
index 69a38f5..ca99333 100644
--- a/src/panel/WebhookEditPanel.js
+++ b/src/panel/WebhookEditPanel.js
@@ -362,6 +362,9 @@ Ext.define('Proxmox.form.WebhookKeyValueList', {
change: 'itemChange',
},
},
+ onWidgetAttach: function(_col, widget) {
+ widget.isValid();
+ },
flex: 1,
},
{
@@ -383,6 +386,9 @@ Ext.define('Proxmox.form.WebhookKeyValueList', {
emptyText: '{record.emptyText}',
},
},
+ onWidgetAttach: function(_col, widget) {
+ widget.isValid();
+ },
flex: 1,
},
{
--
2.39.5
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
^ permalink raw reply [flat|nested] 7+ messages in thread* [pve-devel] applied-series: [PATCH widget-toolkit 0/5] improve webhook edit window
2024-11-12 14:41 [pve-devel] [PATCH widget-toolkit 0/5] improve webhook edit window Dominik Csapak
` (4 preceding siblings ...)
2024-11-12 14:41 ` [pve-devel] [PATCH widget-toolkit 5/5] webhook edit: display validity for added key/value fields Dominik Csapak
@ 2024-11-12 17:04 ` Thomas Lamprecht
5 siblings, 0 replies; 7+ messages in thread
From: Thomas Lamprecht @ 2024-11-12 17:04 UTC (permalink / raw)
To: Proxmox VE development discussion, Dominik Csapak
Am 12.11.24 um 15:41 schrieb Dominik Csapak:
> by implementing Thomas suggestions from here:
> https://lore.proxmox.com/pve-devel/f592fea7-e0a5-4858-af48-b0b2ed57bc50@proxmox.com/
>
> Dominik Csapak (5):
> webhook edit: improve layout and component hierarchy
> webhook edit: make items config not static
> webhook edit: use type in add button text
> webhook edit: add emptytext to key-value fields
> webhook edit: display validity for added key/value fields
>
> src/panel/WebhookEditPanel.js | 185 +++++++++++++++++-----------------
> 1 file changed, 92 insertions(+), 93 deletions(-)
>
applied series, many thanks!
_______________________________________________
pve-devel mailing list
pve-devel@lists.proxmox.com
https://lists.proxmox.com/cgi-bin/mailman/listinfo/pve-devel
^ permalink raw reply [flat|nested] 7+ messages in thread