Skip to content

feat/AB#80252_Allow-frontend-to-reload-when-admin-updates/create-a-form #2184

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: beta
Choose a base branch
from
Open

feat/AB#80252_Allow-frontend-to-reload-when-admin-updates/create-a-form #2184

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
501ccaf
feat/AB#80252_Allow-frontend-to-reload-when-admin-updates/create-a-form
GuilhermeGabriel Dec 16, 2023
4fe40ad
fix: wait for the server to be ready again
GuilhermeGabriel Dec 19, 2023
937928b
fix: lint
GuilhermeGabriel Dec 19, 2023
29d8edc
fix: new approach
GuilhermeGabriel Dec 19, 2023
7edc7f4
fix: lint
GuilhermeGabriel Dec 19, 2023
27c8411
fix: remove old code
GuilhermeGabriel Dec 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions apps/back-office/src/app/application/pages/add-page/add-page.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,6 +202,7 @@ export class AddPageComponent extends UnsubscribeComponent implements OnInit {
);

this.onSubmit();
window.location.reload();
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@GuilhermeGabriel
that won't work
you need to wait for the server to be ready again to do that

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, I tried a new approach!

}
},
error: (err) => {
Expand Down
53 changes: 49 additions & 4 deletions apps/back-office/src/app/dashboard/pages/form-builder/form-builder.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
EDIT_FORM_STATUS,
EDIT_FORM_STRUCTURE,
} from './graphql/mutations';
import { GET_SHORT_FORM_BY_ID } from './graphql/queries';
import { GET_SHORT_FORM_BY_ID, GET_QUERY_TYPES } from './graphql/queries';
import { Dialog } from '@angular/cdk/dialog';
import {
AuthService,
Expand All @@ -19,8 +19,9 @@ import {
EditFormMutationResponse,
SnackbarSpinnerComponent,
} from '@oort-front/shared';

import { SpinnerComponent } from '@oort-front/ui';
import { Observable } from 'rxjs';
import { Observable, firstValueFrom } from 'rxjs';
import { map } from 'rxjs/operators';
import { TranslateService } from '@ngx-translate/core';
import { SnackbarService } from '@oort-front/ui';
Expand All @@ -29,6 +30,7 @@ import { isEqual } from 'lodash';
import { GraphQLError } from 'graphql';
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';
import { QueryBuilderService } from '@oort-front/shared';

/** Default snackbar config for after request complete */
const REQUEST_SNACKBAR_CONF = {
Expand Down Expand Up @@ -90,6 +92,7 @@ export class FormBuilderComponent implements OnInit {
* @param translate Angular translate service
* @param breadcrumbService Shared breadcrumb service
* @param overlay Angular overlay service
* @param queryBuilder Query builder service
*/
constructor(
private apollo: Apollo,
Expand All @@ -101,7 +104,8 @@ export class FormBuilderComponent implements OnInit {
private confirmService: ConfirmService,
private translate: TranslateService,
private breadcrumbService: BreadcrumbService,
private overlay: Overlay
private overlay: Overlay,
private queryBuilder: QueryBuilderService
) {}

/**
Expand Down Expand Up @@ -308,9 +312,50 @@ export class FormBuilderComponent implements OnInit {
loadingSnackbarRef.instance.dismiss();
this.snackBar.openSnackBar(err.message, { error: true });
},
complete: () => {
complete: async () => {
// Detach the current set overlay
overlayRef.detach();

// Wait for backend connection to be established
const checkBackendConnectionWithGetQueryTypes =
async (): Promise<boolean> => {
let isConnected = true;

try {
const result = await firstValueFrom(
this.apollo.query({
query: GET_QUERY_TYPES,
})
);

const { data, errors, networkStatus } = result;

if (errors || networkStatus !== 7) {
isConnected = false;
} else {
// Set available types in query builder
this.queryBuilder.setAvailableTypes(
(data as any).__schema.types
);
}
} catch (err) {
isConnected = false;
}

return isConnected;
};

// Wait for backend connection to be established
await new Promise((resolve) => setTimeout(resolve, 3000));
const waitForBackendConnection = async () => {
while (
(await checkBackendConnectionWithGetQueryTypes()) === false
) {
await new Promise((resolve) => setTimeout(resolve, 1000));
}
};

await waitForBackendConnection();
},
});
}
Expand Down
118 changes: 118 additions & 0 deletions apps/back-office/src/app/dashboard/pages/form-builder/graphql/queries.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,3 +38,121 @@ export const GET_SHORT_FORM_BY_ID = gql`
}
}
`;

/** Graphql request for getting query types */
export const GET_QUERY_TYPES = gql`
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@GuilhermeGabriel
I don't like this approach
you're duplicating a query we already see in another service, for a call that will be done only once, so for me it doesn't make sense

you should prefer, for example, build a subject in the query-builder, and, when you detect a change in the subject, you refetch the data

so you can, in the form builder service, just emit an event to the query builder service

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@AntoineRelief do you think a websocket solution would be overkill?

query GetQueryTypes {
__schema {
types {
name
kind
fields {
name
args {
name
type {
name
kind
inputFields {
name
type {
name
kind
}
}
}
}
type {
name
kind
fields {
name
args {
name
type {
name
kind
inputFields {
name
type {
name
kind
}
}
}
}
type {
name
kind
ofType {
name
fields {
name
type {
name
kind
ofType {
name
}
}
}
}
}
}
ofType {
name
fields {
name
type {
name
kind
ofType {
name
}
}
}
}
}
}
}
queryType {
name
kind
fields {
name
args {
name
type {
name
kind
inputFields {
name
type {
name
kind
}
}
}
}
type {
name
kind
ofType {
name
fields {
name
type {
name
kind
ofType {
name
}
}
}
}
}
}
}
}
}
`;
1 change: 1 addition & 0 deletions libs/shared/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ export * from './lib/services/context/context.service';
export * from './lib/services/data-template/data-template.service';
export * from './lib/services/editor/editor.service';
export * from './lib/services/rest/rest.service';
export * from './lib/services/query-builder/query-builder.service';

// === DIRECTIVES ===
export * from './lib/directives/skeleton/public-api';
Expand Down
9 changes: 9 additions & 0 deletions libs/shared/src/lib/services/query-builder/query-builder.service.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,15 @@ export class QueryBuilderService {
});
}

/**
* Sets available queries.
*
* @param types Available types.
*/
public setAvailableTypes(types: any[]) {
this.availableTypes.next(types);
}

/**
* Gets list of fields from a type.
*
Expand Down