Skip to content

Commit 3cd6c6c

Browse files
DavidResende0DavidResende0
committed
temp
1 parent 213955a commit 3cd6c6c

File tree

6 files changed

+216
-106
lines changed

6 files changed

+216
-106
lines changed

‎app/javascript/components/miq-data-table/index.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ const MiqDataTable = ({
8989
/** Function to render the header cells. */
9090
const renderHeaders = (getHeaderProps) => (headers.map((header) => {
9191
const { sortHeader, sortDirection } = headerSortingData(header);
92-
let isSortable = true;
92+
let isSortable = sortable;
9393
if (header.header.split('_')[0] === DefaultKey) {
9494
isSortable = false;
9595
}

‎app/javascript/components/provider-form/validate-provider-credentials.jsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ const ValidateProviderCredentials = ({ ...props }) => {
1313
const url = providerId ? `/api/providers/${providerId}` : '/api/providers';
1414
const resource = pick(fields, fieldNames);
1515

16-
console.log(resource);
1716
const updatedResource = trimFieldValue(resource);
1817

1918
API.post(url, { action: 'verify_credentials', resource: updatedResource }).then(({ results: [result] = [], ...single }) => {

‎app/javascript/components/settings-replication-form/helper.js

Lines changed: 31 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,34 @@
1-
import React from 'react';
2-
import { useFieldApi, useFormApi } from '@@ddf';
3-
import { Button } from 'carbon-components-react';
4-
import MiqDataTable from '../miq-data-table';
1+
// Creates the rows for the 'subscriptions-table' component
2+
export const createRows = (subscriptions) => {
3+
const rows = [];
54

6-
export const SubscriptionsTableComponent = (props) => {
7-
const {
8-
rows, onCellClick, addButtonLabel, onButtonClick,
9-
} = useFieldApi(props);
10-
const formOptions = useFormApi();
5+
subscriptions.forEach((value, index) => {
6+
rows.push({
7+
id: index.toString(),
8+
dbname: { text: value.dbname },
9+
host: { text: value.host },
10+
user: { text: value.user },
11+
password: { text: value.password },
12+
port: { text: value.port },
13+
backlog: { text: value.backlog ? value.backlog : '' },
14+
status: { text: value.status ? value.status : '' },
15+
provider_region: { text: value.provider_region || value.provider_region === 0 ? value.provider_region : '' },
16+
edit: {
17+
is_button: true,
18+
text: __('Update'),
19+
kind: 'tertiary',
20+
size: 'md',
21+
callback: 'editSubscription',
22+
},
23+
delete: {
24+
is_button: true,
25+
text: __('Delete'),
26+
kind: 'danger',
27+
size: 'md',
28+
callback: 'deleteSubscription',
29+
},
30+
});
31+
});
1132

12-
return (
13-
<div className="subscriptions-table">
14-
<Button
15-
kind="primary"
16-
className="subscription-add bx--btn bx--btn--primary pull-right"
17-
type="button"
18-
variant="contained"
19-
onClick={() => onButtonClick(formOptions)}
20-
>
21-
{addButtonLabel}
22-
</Button>
23-
24-
<MiqDataTable
25-
headers={[
26-
{ key: 'dbname', header: __('Database') },
27-
{ key: 'host', header: __('Host') },
28-
{ key: 'user', header: __('Username') },
29-
{ key: 'password', header: __('Password') },
30-
{ key: 'port', header: __('Port') },
31-
{ key: 'backlog', header: __('Backlog') },
32-
{ key: 'status', header: __('Status') },
33-
{ key: 'provider_region', header: __('Region') },
34-
{ key: 'edit', header: __('Edit') },
35-
{ key: 'delete', header: __('Delete') },
36-
]}
37-
rows={rows}
38-
size="md"
39-
onCellClick={(selectedRow, cellType) => onCellClick(selectedRow, cellType, formOptions)}
40-
/>
41-
</div>
42-
);
33+
return rows;
4334
};

‎app/javascript/components/settings-replication-form/index.jsx

Lines changed: 120 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@ import React, { useState, useEffect } from 'react';
22
import PropTypes from 'prop-types';
33

44
import MiqFormRenderer from '@@ddf';
5+
// import { Button } from 'carbon-components-react';
6+
// import MiqDataTable from '../miq-data-table';
57
import createSchema from './settings-replication-form.schema';
6-
import { SubscriptionsTableComponent } from './helper';
8+
import { SubscriptionsTableComponent } from './subscriptions-table';
79
import ValidateSubscription from './validate-subscription';
810
import miqRedirectBack from '../../helpers/miq-redirect-back';
911
import mapper from '../../forms/mappers/componentMapper';
@@ -51,29 +53,58 @@ const SettingsReplicationForm = ({ pglogicalReplicationFormId }) => {
5153

5254
const onSubmit = (values) => {
5355
if (form.type === 'subscription') {
54-
const newSubscriptions = [];
55-
56-
newSubscriptions.push({
57-
dbname: values.dbname,
58-
host: values.host,
59-
user: values.user,
60-
password: values.password,
61-
port: values.port,
62-
});
56+
if (form.action === 'add') {
57+
const newSubscriptions = [];
6358

64-
setState((state) => ({
65-
...state,
66-
initialValues: {
67-
replication_type: state.initialValues.replication_type,
68-
subscriptions: state.initialValues.subscriptions,
69-
},
70-
subscriptions: subscriptions.concat(newSubscriptions),
71-
form: {
72-
type: 'replication',
73-
className: 'replication_form',
74-
action: 'edit',
75-
},
76-
}));
59+
newSubscriptions.push({
60+
dbname: values.dbname,
61+
host: values.host,
62+
user: values.user,
63+
password: values.password,
64+
port: values.port,
65+
});
66+
67+
setState((state) => ({
68+
...state,
69+
initialValues: {
70+
replication_type: state.initialValues.replication_type,
71+
subscriptions: state.initialValues.subscriptions,
72+
},
73+
subscriptions: subscriptions.concat(newSubscriptions),
74+
form: {
75+
type: 'replication',
76+
className: 'replication_form',
77+
action: 'edit',
78+
},
79+
}));
80+
} else if (form.action === 'edit') {
81+
let modifiedSubscriptions = [];
82+
modifiedSubscriptions = modifiedSubscriptions.concat(subscriptions);
83+
84+
const editedSub = {
85+
dbname: values.dbname,
86+
host: values.host,
87+
password: values.password,
88+
port: values.port,
89+
user: values.user,
90+
};
91+
92+
modifiedSubscriptions[initialValues.subId] = editedSub;
93+
94+
setState((state) => ({
95+
...state,
96+
initialValues: {
97+
replication_type: state.initialValues.replication_type,
98+
subscriptions: state.initialValues.subscriptions,
99+
},
100+
subscriptions: modifiedSubscriptions,
101+
form: {
102+
type: 'replication',
103+
className: 'replication_form',
104+
action: 'edit',
105+
},
106+
}));
107+
}
77108
} else {
78109
// Redirect to Settings -> Tasks
79110

@@ -86,6 +117,17 @@ const SettingsReplicationForm = ({ pglogicalReplicationFormId }) => {
86117
}
87118
};
88119

120+
/* const onReset = () => {
121+
setEnforced(() => ({ ...initialValues.enforced }));
122+
setValues(() => ({ ...initialValues.values }));
123+
setDisabled(true);
124+
setChanged(true);
125+
setInvalid(() => ({ ...initialValues.invalid }));
126+
// eslint-disable-next-line no-return-assign
127+
Array.from(document.querySelectorAll('.quota-table-input')).forEach((input, index) => input.value = initialValues.values[index]);
128+
add_flash(__('All changes have been reset'), 'warn');
129+
}; */
130+
89131
const onCancel = () => {
90132
if (form.type === 'subscription') {
91133
setState((state) => ({
@@ -111,8 +153,63 @@ const SettingsReplicationForm = ({ pglogicalReplicationFormId }) => {
111153
onCancel={onCancel}
112154
canReset
113155
buttonsLabels={{ submitLabel }}
156+
clearOnUnmount={form.type !== 'replication'}
114157
/>
115158
);
159+
160+
/* if (form.type === 'subscription') {
161+
162+
} else {
163+
return !isLoading && (
164+
<div className="settings-replication-form">
165+
<div className="subscriptions-section">
166+
<div className="subscriptions-button" style={{ display: 'flex', flexDirection: 'row-reverse' }}>
167+
<Button
168+
kind="primary"
169+
className="subscription-add bx--btn bx--btn--primary pull-right"
170+
type="button"
171+
variant="contained"
172+
onClick={() => onButtonClick(formOptions)}
173+
>
174+
{addButtonLabel}
175+
</Button>
176+
</div>
177+
178+
<div className="subscriptions-table" style={{ display: 'grid', overflow: 'auto' }}>
179+
<MiqDataTable
180+
headers={[
181+
{ key: 'dbname', header: __('Database') },
182+
{ key: 'host', header: __('Host') },
183+
{ key: 'user', header: __('Username') },
184+
{ key: 'password', header: __('Password') },
185+
{ key: 'port', header: __('Port') },
186+
{ key: 'backlog', header: __('Backlog') },
187+
{ key: 'status', header: __('Status') },
188+
{ key: 'provider_region', header: __('Region') },
189+
{ key: 'edit', header: __('Edit') },
190+
{ key: 'delete', header: __('Delete') },
191+
]}
192+
rows={rows}
193+
size="md"
194+
sortable={false}
195+
onCellClick={(selectedRow, cellType) => onCellClick(selectedRow, cellType, formOptions)}
196+
/>
197+
</div>
198+
</div>
199+
<div className="bx--btn-set">
200+
<Button kind="primary" tabIndex={0} disabled={disabled} type="submit" onClick={onSubmit}>
201+
{submitLabel}
202+
</Button>
203+
<Button kind="secondary" style={{ marginLeft: '10px' }} tabIndex={0} disabled={changed} type="reset" onClick={onReset}>
204+
{__('Reset')}
205+
</Button>
206+
<Button kind="secondary" style={{ marginLeft: '10px' }} tabIndex={0} type="button" onClick={onCancel}>
207+
{__('Cancel')}
208+
</Button>
209+
</div>
210+
</div>
211+
);
212+
} */
116213
};
117214

118215
SettingsReplicationForm.propTypes = {

‎app/javascript/components/settings-replication-form/settings-replication-form.schema.js

Lines changed: 16 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,20 @@
11
/* eslint-disable camelcase */
22
import { componentTypes, validatorTypes } from '@@ddf';
3+
import { createRows } from './helper';
34

45
const createSchema = (initialValues, subscriptions, form, replicationHelperText, setState) => {
5-
// Creates the rows for the 'subscriptions-table' component
6-
const createRows = () => {
7-
const rows = [];
8-
9-
subscriptions.forEach((value, index) => {
10-
rows.push({
11-
id: index.toString(),
12-
dbname: { text: value.dbname },
13-
host: { text: value.host },
14-
user: { text: value.user },
15-
password: { text: value.password },
16-
port: { text: value.port },
17-
backlog: { text: value.backlog ? value.backlog : '' },
18-
status: { text: value.status ? value.status : '' },
19-
provider_region: { text: value.provider_region || value.provider_region === 0 ? value.provider_region : '' },
20-
edit: {
21-
is_button: true,
22-
text: __('Update'),
23-
kind: 'tertiary',
24-
size: 'md',
25-
callback: 'editSubscription',
26-
},
27-
delete: {
28-
is_button: true,
29-
text: __('Delete'),
30-
kind: 'danger',
31-
size: 'md',
32-
callback: 'deleteSubscription',
33-
},
34-
});
35-
});
36-
37-
return rows;
38-
};
39-
406
const deleteSubscription = (selectedRow, cellType, formOptions) => {
417
subscriptions.splice(selectedRow.id, 1);
428

439
setState((state) => ({
4410
...state,
4511
subscriptions,
4612
}));
13+
14+
console.log(formOptions.getFieldState('subscriptions-table'));
15+
console.log(formOptions.getRegisteredFields());
16+
console.log(formOptions.getState());
17+
console.log(formOptions.schema);
4718
};
4819

4920
const editSubscription = (selectedRow) => {
@@ -56,6 +27,7 @@ const createSchema = (initialValues, subscriptions, form, replicationHelperText,
5627
user: selectedRow.cells[2].value,
5728
password: selectedRow.cells[3].value,
5829
port: selectedRow.cells[4].value,
30+
subId: selectedRow.id,
5931
},
6032
form: {
6133
type: 'subscription',
@@ -118,7 +90,7 @@ const createSchema = (initialValues, subscriptions, form, replicationHelperText,
11890
component: 'subscriptions-table',
11991
name: 'subscriptions-table',
12092
id: 'subscriptions-table',
121-
rows: createRows(),
93+
rows: createRows(subscriptions),
12294
onCellClick: (selectedRow, cellType, formOptions) => {
12395
switch (selectedRow.callbackAction) {
12496
case 'editSubscription':
@@ -133,11 +105,10 @@ const createSchema = (initialValues, subscriptions, form, replicationHelperText,
133105
},
134106
addButtonLabel: __('Add Subscription'),
135107
onButtonClick: (formOptions) => {
136-
formOptions.change('dbname', '');
137-
formOptions.change('host', '');
138-
formOptions.change('user', '');
139-
formOptions.change('password', '');
140-
formOptions.change('port', '');
108+
console.log(formOptions.getRegisteredFields());
109+
console.log(formOptions.getState());
110+
console.log(formOptions.schema);
111+
141112
setState((state) => ({
142113
...state,
143114
initialValues: {
@@ -150,6 +121,10 @@ const createSchema = (initialValues, subscriptions, form, replicationHelperText,
150121
action: 'add',
151122
},
152123
}));
124+
125+
console.log(formOptions.getRegisteredFields());
126+
console.log(formOptions.getState());
127+
console.log(formOptions.schema);
153128
},
154129
}],
155130
},

0 commit comments

Comments
 (0)