Skip to content

Commit

Permalink
temp
Browse files Browse the repository at this point in the history
  • Loading branch information
DavidResende0 committed Jan 10, 2024
1 parent 213955a commit a78716b
Show file tree
Hide file tree
Showing 5 changed files with 143 additions and 105 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ const ValidateProviderCredentials = ({ ...props }) => {
const url = providerId ? `/api/providers/${providerId}` : '/api/providers';
const resource = pick(fields, fieldNames);

console.log(resource);
const updatedResource = trimFieldValue(resource);

API.post(url, { action: 'verify_credentials', resource: updatedResource }).then(({ results: [result] = [], ...single }) => {
Expand Down
71 changes: 31 additions & 40 deletions app/javascript/components/settings-replication-form/helper.js
Original file line number Diff line number Diff line change
@@ -1,43 +1,34 @@
import React from 'react';
import { useFieldApi, useFormApi } from '@@ddf';
import { Button } from 'carbon-components-react';
import MiqDataTable from '../miq-data-table';
// Creates the rows for the 'subscriptions-table' component
export const createRows = (subscriptions) => {
const rows = [];

export const SubscriptionsTableComponent = (props) => {
const {
rows, onCellClick, addButtonLabel, onButtonClick,
} = useFieldApi(props);
const formOptions = useFormApi();
subscriptions.forEach((value, index) => {
rows.push({
id: index.toString(),
dbname: { text: value.dbname },
host: { text: value.host },
user: { text: value.user },
password: { text: value.password },
port: { text: value.port },
backlog: { text: value.backlog ? value.backlog : '' },
status: { text: value.status ? value.status : '' },
provider_region: { text: value.provider_region || value.provider_region === 0 ? value.provider_region : '' },
edit: {
is_button: true,
text: __('Update'),
kind: 'tertiary',
size: 'md',
callback: 'editSubscription',
},
delete: {
is_button: true,
text: __('Delete'),
kind: 'danger',
size: 'md',
callback: 'deleteSubscription',
},
});
});

return (
<div className="subscriptions-table">
<Button
kind="primary"
className="subscription-add bx--btn bx--btn--primary pull-right"
type="button"
variant="contained"
onClick={() => onButtonClick(formOptions)}
>
{addButtonLabel}
</Button>

<MiqDataTable
headers={[
{ key: 'dbname', header: __('Database') },
{ key: 'host', header: __('Host') },
{ key: 'user', header: __('Username') },
{ key: 'password', header: __('Password') },
{ key: 'port', header: __('Port') },
{ key: 'backlog', header: __('Backlog') },
{ key: 'status', header: __('Status') },
{ key: 'provider_region', header: __('Region') },
{ key: 'edit', header: __('Edit') },
{ key: 'delete', header: __('Delete') },
]}
rows={rows}
size="md"
onCellClick={(selectedRow, cellType) => onCellClick(selectedRow, cellType, formOptions)}
/>
</div>
);
return rows;
};
76 changes: 53 additions & 23 deletions app/javascript/components/settings-replication-form/index.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import PropTypes from 'prop-types';

import MiqFormRenderer from '@@ddf';
import createSchema from './settings-replication-form.schema';
import { SubscriptionsTableComponent } from './helper';
import { SubscriptionsTableComponent } from './subscriptions-table';
import ValidateSubscription from './validate-subscription';
import miqRedirectBack from '../../helpers/miq-redirect-back';
import mapper from '../../forms/mappers/componentMapper';
Expand Down Expand Up @@ -51,29 +51,58 @@ const SettingsReplicationForm = ({ pglogicalReplicationFormId }) => {

const onSubmit = (values) => {
if (form.type === 'subscription') {
const newSubscriptions = [];

newSubscriptions.push({
dbname: values.dbname,
host: values.host,
user: values.user,
password: values.password,
port: values.port,
});
if (form.action === 'add') {
const newSubscriptions = [];

setState((state) => ({
...state,
initialValues: {
replication_type: state.initialValues.replication_type,
subscriptions: state.initialValues.subscriptions,
},
subscriptions: subscriptions.concat(newSubscriptions),
form: {
type: 'replication',
className: 'replication_form',
action: 'edit',
},
}));
newSubscriptions.push({
dbname: values.dbname,
host: values.host,
user: values.user,
password: values.password,
port: values.port,
});

setState((state) => ({
...state,
initialValues: {
replication_type: state.initialValues.replication_type,
subscriptions: state.initialValues.subscriptions,
},
subscriptions: subscriptions.concat(newSubscriptions),
form: {
type: 'replication',
className: 'replication_form',
action: 'edit',
},
}));
} else if (form.action === 'edit') {
let modifiedSubscriptions = [];
modifiedSubscriptions = modifiedSubscriptions.concat(subscriptions);

const editedSub = {
dbname: values.dbname,
host: values.host,
password: values.password,
port: values.port,
user: values.user,
};

modifiedSubscriptions[initialValues.subId] = editedSub;

setState((state) => ({
...state,
initialValues: {
replication_type: state.initialValues.replication_type,
subscriptions: state.initialValues.subscriptions,
},
subscriptions: modifiedSubscriptions,
form: {
type: 'replication',
className: 'replication_form',
action: 'edit',
},
}));
}
} else {
// Redirect to Settings -> Tasks

Expand Down Expand Up @@ -111,6 +140,7 @@ const SettingsReplicationForm = ({ pglogicalReplicationFormId }) => {
onCancel={onCancel}
canReset
buttonsLabels={{ submitLabel }}
clearOnUnmount={form.type !== 'replication'}
/>
);
};
Expand Down
Original file line number Diff line number Diff line change
@@ -1,49 +1,20 @@
/* eslint-disable camelcase */
import { componentTypes, validatorTypes } from '@@ddf';
import { createRows } from './helper';

const createSchema = (initialValues, subscriptions, form, replicationHelperText, setState) => {
// Creates the rows for the 'subscriptions-table' component
const createRows = () => {
const rows = [];

subscriptions.forEach((value, index) => {
rows.push({
id: index.toString(),
dbname: { text: value.dbname },
host: { text: value.host },
user: { text: value.user },
password: { text: value.password },
port: { text: value.port },
backlog: { text: value.backlog ? value.backlog : '' },
status: { text: value.status ? value.status : '' },
provider_region: { text: value.provider_region || value.provider_region === 0 ? value.provider_region : '' },
edit: {
is_button: true,
text: __('Update'),
kind: 'tertiary',
size: 'md',
callback: 'editSubscription',
},
delete: {
is_button: true,
text: __('Delete'),
kind: 'danger',
size: 'md',
callback: 'deleteSubscription',
},
});
});

return rows;
};

const deleteSubscription = (selectedRow, cellType, formOptions) => {
subscriptions.splice(selectedRow.id, 1);

setState((state) => ({
...state,
subscriptions,
}));

console.log(formOptions.getFieldState('subscriptions-table'));
console.log(formOptions.getRegisteredFields());
console.log(formOptions.getState());
console.log(formOptions.schema);
};

const editSubscription = (selectedRow) => {
Expand All @@ -56,6 +27,7 @@ const createSchema = (initialValues, subscriptions, form, replicationHelperText,
user: selectedRow.cells[2].value,
password: selectedRow.cells[3].value,
port: selectedRow.cells[4].value,
subId: selectedRow.id,
},
form: {
type: 'subscription',
Expand Down Expand Up @@ -118,7 +90,7 @@ const createSchema = (initialValues, subscriptions, form, replicationHelperText,
component: 'subscriptions-table',
name: 'subscriptions-table',
id: 'subscriptions-table',
rows: createRows(),
rows: createRows(subscriptions),
onCellClick: (selectedRow, cellType, formOptions) => {
switch (selectedRow.callbackAction) {
case 'editSubscription':
Expand All @@ -133,11 +105,10 @@ const createSchema = (initialValues, subscriptions, form, replicationHelperText,
},
addButtonLabel: __('Add Subscription'),
onButtonClick: (formOptions) => {
formOptions.change('dbname', '');
formOptions.change('host', '');
formOptions.change('user', '');
formOptions.change('password', '');
formOptions.change('port', '');
console.log(formOptions.getRegisteredFields());
console.log(formOptions.getState());
console.log(formOptions.schema);

setState((state) => ({
...state,
initialValues: {
Expand All @@ -150,6 +121,10 @@ const createSchema = (initialValues, subscriptions, form, replicationHelperText,
action: 'add',
},
}));

console.log(formOptions.getRegisteredFields());
console.log(formOptions.getState());
console.log(formOptions.schema);
},
}],
},
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import React from 'react';
import { useFieldApi, useFormApi } from '@@ddf';
import { Button } from 'carbon-components-react';
import MiqDataTable from '../miq-data-table';

export const SubscriptionsTableComponent = (props) => {
const {
rows, onCellClick, addButtonLabel, onButtonClick,
} = useFieldApi(props);
const formOptions = useFormApi();

return (
<div className="subscriptions-table">
<Button
kind="primary"
className="subscription-add bx--btn bx--btn--primary pull-right"
type="button"
variant="contained"
onClick={() => onButtonClick(formOptions)}
>
{addButtonLabel}
</Button>

<MiqDataTable
headers={[
{ key: 'dbname', header: __('Database') },
{ key: 'host', header: __('Host') },
{ key: 'user', header: __('Username') },
{ key: 'password', header: __('Password') },
{ key: 'port', header: __('Port') },
{ key: 'backlog', header: __('Backlog') },
{ key: 'status', header: __('Status') },
{ key: 'provider_region', header: __('Region') },
{ key: 'edit', header: __('Edit') },
{ key: 'delete', header: __('Delete') },
]}
rows={rows}
size="md"
onCellClick={(selectedRow, cellType) => onCellClick(selectedRow, cellType, formOptions)}
/>
</div>
);
};

0 comments on commit a78716b

Please sign in to comment.