Skip to content
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

Fix/ description observation and manage nested json "type" array #393

Open
wants to merge 2 commits into
base: dev
Choose a base branch
from
Open

Fix/ description observation and manage nested json "type" array #393

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
39b1536
feat: add logic to manage nested array
andriacap Mar 19, 2024
b030b4a
fix: show description for observations
andriacap Mar 20, 2024
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
15 changes: 15 additions & 0 deletions frontend/src/app/programs/base/detail/detail.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,3 +37,18 @@ h5.card-title {
height: 225px;
object-fit: contain;
}

.expandable-row {
cursor: pointer !important;
background-color: #f7f7f7; /* Light gray background */
}

.expandable-row:hover {
cursor: pointer !important;
background-color: lightblue !important; /* Darker gray background on hover */
}

.expanded {
cursor: pointer !important;
background-color: lightblue !important; /* Darker gray background on hover */
}
135 changes: 88 additions & 47 deletions frontend/src/app/programs/base/detail/detail.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,57 +95,98 @@ <h2 class="my-2">Photos</h2>
</div>
</div>
</div>
<div *ngIf="module === 'sites'">
<div *ngIf="attributes.length > 0" class="row">
<h2 class="my-4">Description</h2>
</div>
<!-- {{ attributes|json }} -->
<!-- <span *ngIf="site">{{ site.properties.visits|json }}</span> -->
<div *ngFor="let a of attributes" class="row bg-light my-3">
<h5>
<i class="fa fa-calendar"></i>
{{ a.date | date: 'longDate' }} par {{ a.author }}
<i class="fa fa-edit text-primary" ngbTooltip="Editer" (click)="editSiteVisit(a);"
*ngIf="a.author === username"></i>
&nbsp;
<!-- {{ a|json }} deleteSiteVisit(a.id)-->
<i class="fa fa-trash text-danger" ngbTooltip="Supprimer" (click)="openDelVisitModal(a.id)"
*ngIf="a.author === username"></i>
</h5>
<table class="table table-striped table-sm table-hover">
<tbody>
<ng-container *ngIf="a.data; else noData">
<tr *ngFor="let d of a.data" class="d-flex">
<td class="col-4">{{ d.name }}</td>
<td class="col-8">{{ d.value }}</td>
</tr>
</ng-container>
<ng-template #noData>
<tr class="d-flex">
<td class="col-8">Aucune donnée</td>
</tr>
</ng-template>
</tbody>
</table>
<div *ngIf="module === 'sites'">
<div *ngIf="attributes.length > 0" class="row">
<h2 class="my-4">Description</h2>
</div>
<!-- {{ attributes|json }} -->
<!-- <span *ngIf="site">{{ site.properties.visits|json }}</span> -->
<div *ngFor="let a of attributes" class="row bg-light my-3">
<h5>
<i class="fa fa-calendar"></i>
{{ a.date | date: 'longDate' }} par {{ a.author }}
<i
class="fa fa-edit text-primary"
ngbTooltip="Editer"
(click)="editSiteVisit(a);"
*ngIf="a.author === username"
></i>
&nbsp;
<!-- {{ a|json }} deleteSiteVisit(a.id)-->
<i
class="fa fa-trash text-danger"
ngbTooltip="Supprimer"
(click)="openDelVisitModal(a.id)"
*ngIf="a.author === username"
></i>
</h5>
<table class="table table-striped table-sm table-hover">
<tbody>
<ng-container *ngIf="a.data; else noData">
<ng-container *ngFor="let d of a.data">
<tr class="d-flex" (click)="d.type === 'array' ? toggleCollapse(d) : null" [ngClass]="{'expandable-row': d.type === 'array', 'expanded': d.showDetails}">
<td [attr.colspan]="d.type === 'array' ? 2 : 1" class="col-4">{{ d.name }} <span *ngIf="d.type === 'array'">
<i class="fa fa-chevron-right" *ngIf="!d.showDetails"></i>
<i class="fa fa-chevron-down" *ngIf="d.showDetails"></i>

</span></td>
<td class="col-8">
<span *ngIf="!d.showDetails && d.type != 'array'">{{d.value}}</span>
</td>
</tr>
<ng-container *ngIf="d.type === 'array'">
<ng-container *ngFor="let r of d.value">
<tr *ngIf="d.showDetails" class="additional-content expanded-row">
<td colspan="2" [innerHTML]="r">
</td>
</tr>
</ng-container>
</ng-container>
</ng-container>
</ng-container>
<ng-template #noData>
<tr class="d-flex">
<td class="col-8">Aucune donnée</td>
</tr>
</ng-template>
</tbody>
</table>
</div>
</div>
</div>

<div *ngIf="module === 'observations'">
<div *ngIf="attributes.length > 0" class="row">
<h2 class="mt-4 mb-4">Description</h2>
</div>
<div class="row bg-light">
<table class="table table-striped">
<tbody>
<tr *ngFor="let d of attributes" class="d-flex">
<td class="col-4">{{ d.name }}</td>
<td class="col-8">{{ d.value }}</td>
</tr>
</tbody>
</table>
<div *ngIf="module === 'observations'">
<div *ngIf="attributes.length > 0" class="row">
<h2 class="mt-4 mb-4">Description</h2>
</div>
<div class="row bg-light">
<table class="table table-striped">
<tbody>
<ng-container *ngFor="let d of attributes">
<tr class="d-flex" (click)="d.type === 'array' ? toggleCollapse(d) : null" [ngClass]="{'expandable-row': d.type === 'array', 'expanded': d.showDetails}">
<td [attr.colspan]="d.type === 'array' ? 2 : 1" class="col-4">{{ d.name }} <span *ngIf="d.type === 'array'">
<i class="fa fa-chevron-right" *ngIf="!d.showDetails"></i>
<i class="fa fa-chevron-down" *ngIf="d.showDetails"></i>

</span></td>
<td class="col-8">
<span *ngIf="!d.showDetails && d.type != 'array'">{{d.value}}</span>
</td>
</tr>
<ng-container *ngIf="d.type === 'array'">
<ng-container *ngFor="let r of d.value">
<tr *ngIf="d.showDetails" class="additional-content expanded-row">
<td colspan="2" [innerHTML]="r">
</td>
</tr>
</ng-container>
</ng-container>
</ng-container>
</tbody>
</table>
</div>
</div>
</div>
</div>



<div class="modal fade" id="photoModal" tabindex="-1" role="dialog">
Expand Down
3 changes: 3 additions & 0 deletions frontend/src/app/programs/base/detail/detail.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,4 +27,7 @@ export abstract class BaseDetailComponent {
this.clickedPhoto = photo;
$('#photoModal').modal('show');
}
toggleCollapse(data: any): void {
data.showDetails = !data.showDetails;
}
}
114 changes: 101 additions & 13 deletions frontend/src/app/programs/observations/detail/detail.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,20 +61,10 @@ export class ObsDetailComponent

// prepare data
if (this.obs.properties.json_data) {
let data = this.obs.properties.json_data;
var that = this;
const data = this.obs.properties.json_data;
this.loadJsonSchema().subscribe((customform: any) => {
let schema = customform.json_schema.schema.properties;
let layout = customform.json_schema.layout;
for (const item of layout) {
let v = data[item.key];
if (v !== undefined) {
that.attributes.push({
name: schema[item.key].title,
value: v.toString(),
});
}
}
const schema = customform.json_schema.schema.properties;
this.attributes = this.formatData(data, schema);
});
}
});
Expand All @@ -85,4 +75,102 @@ export class ObsDetailComponent
`${this.URL}/programs/${this.program_id}/customform/`
);
}

flatObject(object: object): object {
const flatObjectKeys = Object.keys(object);
let flatObject = { ...object };

flatObjectKeys.forEach(key => {
if (
flatObject[key].type === 'object' &&
Object.prototype.hasOwnProperty.call(
flatObject[key],
'properties'
)
) {
flatObject = {
...flatObject[key].properties,
...flatObject,
};
delete flatObject[key];
}
});

return flatObject;
}

formatData(data: any, schema: any): any[] {
const formattedData: any[] = [];
this.flattenObject(data, schema, formattedData);
return formattedData;
}

flattenObject(
object: any,
schema: any,
formattedData: Array<{
name: string;
value: string | string[];
showDetails: boolean;
type: string;
}>
): void {
const flatSchema = this.flatObject(schema);
const flatObject = this.flatObject(object);

for (const key in flatObject) {
if (Object.prototype.hasOwnProperty.call(flatSchema, key)) {
const value = flatObject[key];
const propSchema = flatSchema[key];

if (Array.isArray(value)) {
const isArrayType = propSchema.type === 'array';
const listFormattedString = value.map(item =>
this.formatArrayItem(item, propSchema.items.properties)
);
formattedData.push({
name: propSchema.title,
value: listFormattedString,
showDetails: isArrayType,
type: propSchema.type,
});
} else if (typeof value === 'object') {
this.flattenObject(
value,
propSchema.items.properties,
formattedData
);
} else {
const propName = propSchema.title;
const isArrayType = propSchema.type === 'array';
formattedData.push({
name: propName,
value:
typeof value === 'boolean'
? value
? 'Oui'
: 'Non'
: value.toString(),
showDetails: isArrayType,
type: propSchema.type,
});
}
}
}
}

formatArrayItem(item: any, schema: any): string {
let formattedString = '';

for (const key in item) {
const nestedValue = item[key];
const nestedSchema = schema[key];

formattedString += `<p>${
nestedSchema.title
}: ${nestedValue.toString()}</p>`;
}

return formattedString;
}
}
Loading