refs #4866 refactor component instance-log
gitea/salix/pipeline/head This commit looks good Details

This commit is contained in:
Alexandre Riera 2022-12-23 15:10:35 +01:00
parent 57440d003d
commit 762e39f7be
4 changed files with 16 additions and 179 deletions

View File

@ -2,68 +2,11 @@
<vn-dialog <vn-dialog
vn-id="instanceLog"> vn-id="instanceLog">
<tpl-body> <tpl-body>
<vn-crud-model <vn-log
vn-id="model"
url="{{$ctrl.url}}" url="{{$ctrl.url}}"
filter="$ctrl.filter" origin-id="$ctrl.originId"
link="{originFk: $ctrl.originId}" changed-model="$ctrl.changedModel"
data="$ctrl.logs" changed-model-id="$ctrl.changedModelId">
limit="20" </vn-log>
auto-load="true">
</vn-crud-model>
<vn-data-viewer model="model">
<vn-table model="model">
<vn-thead>
<vn-tr>
<vn-th field="creationDate">Date</vn-th>
<vn-th field="userFk">User</vn-th>
<vn-th field="action">Action</vn-th>
<vn-th expand>Changes</vn-th>
</vn-tr>
</vn-thead>
<vn-tbody>
<vn-tr ng-repeat="log in $ctrl.logs">
<vn-td shrink-datetime>
{{::log.creationDate | date:'dd/MM/yyyy HH:mm'}}
</vn-td>
<vn-td>
<span ng-class="{'link': log.user.worker.id, 'value': !log.user.worker.id}"
ng-click="$ctrl.showWorkerDescriptor($event, log.user.worker.id)"
translate>{{::log.user.name || 'System' | translate}}
</span>
</vn-td>
<vn-td translate>
{{::$ctrl.actionsText[log.action]}}
</vn-td>
<vn-td expand>
<table class="attributes">
<thead>
<tr>
<th translate class="field">Field</th>
<th translate>Before</th>
<th translate>After</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="prop in ::log.props">
<td class="field">{{prop.name}}</td>
<td class="before" vn-tooltip="{{::$ctrl.formatValue(prop.old)}}">{{::$ctrl.formatValue(prop.old)}}</td>
<td class="after" vn-tooltip="{{::$ctrl.formatValue(prop.new)}}">{{::$ctrl.formatValue(prop.new)}}</td>
</tr>
</tbody>
</table>
<vn-one ng-if="!log.newProperties" id="description">
<div>
<span no-ellipsize>{{::log.description}}</span>
</div>
</vn-one>
</vn-td>
</vn-tr>
</vn-tbody>
</vn-table>
<vn-pagination model="model"></vn-pagination>
</vn-data-viewer>
</tpl-body> </tpl-body>
</vn-dialog> </vn-dialog>
<vn-worker-descriptor-popover vn-id="workerDescriptor">
</vn-worker-descriptor-popover>

View File

@ -1,96 +1,11 @@
import ngModule from '../../module'; import ngModule from '../../module';
import './style.scss';
import Section from '../section'; import Section from '../section';
import './style.scss';
export default class Controller extends Section { export default class Controller extends Section {
constructor($element, $) {
super($element, $);
this.actionsText = {
'insert': 'Creates',
'update': 'Updates',
'delete': 'Deletes',
'select': 'Views'
}; ``;
}
open() { open() {
this.filter = {
where:
{changedModel: this.changedModel,
changedModelId: this.changedModelId},
include: [{
relation: 'user',
scope: {
fields: ['name'],
include: {
relation: 'worker',
scope: {
fields: ['id']
}
}
},
}],
};
this.$.instanceLog.show(); this.$.instanceLog.show();
} }
get logs() {
return this._logs;
}
set logs(value) {
this._logs = value;
if (!this.logs) return;
const validations = window.validations;
for (const log of value) {
const locale = validations[log.changedModel] && validations[log.changedModel].locale
? validations[log.changedModel].locale : {};
log.oldProperties = this.getInstance(log.oldInstance, locale);
log.newProperties = this.getInstance(log.newInstance, locale);
let props = [].concat(log.oldProperties.map(p => p.key), log.newProperties.map(p => p.key));
props = [...new Set(props)];
log.props = [];
for (const prop of props) {
const matchOldProp = log.oldProperties.find(p => p.key === prop);
const matchNewProp = log.newProperties.find(p => p.key === prop);
log.props.push({
name: prop,
old: matchOldProp ? matchOldProp.value : null,
new: matchNewProp ? matchNewProp.value : null,
});
}
}
}
formatValue(value) {
switch (typeof value) {
case 'boolean':
return value ? '✓' : '✗';
default:
return value;
}
}
getInstance(instance, locale) {
const properties = [];
let validDate = /^(-?(?:[1-9][0-9]*)?[0-9]{4})-(1[0-2]|0[1-9])-(3[01]|0[1-9]|[12][0-9])T(2[0-3]|[01][0-9]):([0-5][0-9]):([0-5][0-9])(.[0-9]+)?(Z)?$/;
if (typeof instance == 'object' && instance != null) {
Object.keys(instance).forEach(property => {
if (validDate.test(instance[property]))
instance[property] = new Date(instance[property]).toLocaleString('es-ES');
const key = locale[property] || property;
properties.push({key, value: instance[property]});
});
return properties;
}
return null;
}
showWorkerDescriptor(event, workerId) {
if (!workerId) return;
this.$.workerDescriptor.show(event.target, workerId);
}
} }
ngModule.vnComponent('vnInstanceLog', { ngModule.vnComponent('vnInstanceLog', {
@ -99,8 +14,8 @@ ngModule.vnComponent('vnInstanceLog', {
bindings: { bindings: {
model: '<', model: '<',
originId: '<', originId: '<',
changedModel: '<',
changedModelId: '<', changedModelId: '<',
changedModel: '@',
url: '@' url: '@'
} }
}); });

View File

@ -1,15 +0,0 @@
Date: Fecha
Model: Modelo
Action: Acción
Author: Autor
Before: Antes
After: Despues
History: Historial
Name: Nombre
Creates: Crea
Updates: Actualiza
Deletes: Elimina
Views: Visualiza
System: Sistema
note: nota
Changes: Cambios

View File

@ -1,18 +1,12 @@
.vn-dialog .window { .vn-dialog {
width: max-content; & > .window:not(:has(.empty-rows)) {
vn-td { width:60%;
vertical-align: initial; vn-log {
} vn-card {
.attributes { visibility: hidden;
width: 100%; & > * {
tr { visibility: visible;
height: 10px; }
& > td {
width: 33%;
}
& > td.field,
& > th.field {
color: gray;
} }
} }
} }