moved vn-log to salix components + css changes and renamed worker-log to log

This commit is contained in:
Carlos Jimenez Ruiz 2021-05-18 13:22:40 +02:00
parent bf05296b84
commit c0e2ff12da
10 changed files with 178 additions and 192 deletions

View File

@ -15,3 +15,4 @@ import './topbar/topbar';
import './user-popover'; import './user-popover';
import './upload-photo'; import './upload-photo';
import './bank-entity'; import './bank-entity';
import './log';

View File

@ -0,0 +1,93 @@
<vn-crud-model vn-id="model" url="{{$ctrl.url}}" filter="$ctrl.filter" link="{originFk: $ctrl.originId}"
data="$ctrl.logs" limit="20" auto-load="true">
</vn-crud-model>
<vn-data-viewer model="model" class="vn-w-xl">
<vn-card>
<vn-table model="model">
<vn-thead>
<vn-tr>
<vn-th field="creationDate">Date</vn-th>
<vn-th field="userFk" class="expendable" shrink>Author</vn-th>
<vn-th field="changedModel" class="expendable" shrink>Model</vn-th>
<vn-th field="action" class="expendable" shrink>Action</vn-th>
<vn-th field="changedModelValue" class="expendable">Name</vn-th>
<vn-th expand>Before</vn-th>
<vn-th expand>After</vn-th>
</vn-tr>
</vn-thead>
<vn-tbody>
<vn-tr ng-repeat="log in $ctrl.logs">
<vn-td expand>
{{::log.creationDate | date:'dd/MM/yyyy HH:mm'}}
<div class="changes">
<div>
<span translate class="label">Changed by</span><span class="label">: </span>
<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>
</div>
<div>
<span translate class="label">Model</span><span class="label">: </span>
<span translate class="value">{{::log.changedModel | dashIfEmpty}}</span>
</div>
<div>
<span translate class="label">Action</span><span class="label">: </span>
<span translate class="value">{{::$ctrl.actionsText[log.action] | dashIfEmpty}}</span>
</div>
<div>
<span translate class="label">Name</span><span class="label">: </span>
<span translate class="value">{{::log.changedModelValue | dashIfEmpty}}</span>
</div>
</div>
</vn-td>
<vn-td class="expendable">
<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 class="expendable">
{{::log.changedModel}}
</vn-td>
<vn-td translate class="expendable">
{{::$ctrl.actionsText[log.action]}}
</vn-td>
<vn-td class="expendable" expand>
{{::log.changedModelValue}}
</vn-td>
<vn-td expand class="before">
<vn-one ng-repeat="old in log.oldProperties">
<div>
<span translate class="label alignSpan">{{::old.key}}</span><span
class="label alignSpan">: </span>
<span translate class="value no-ellipsize" vn-tooltip="{{::old.value | dashIfEmpty}}">
{{::old.value | dashIfEmpty}}
</span>
</div>
</vn-one>
</vn-td>
<vn-td expand class="after">
<vn-one ng-repeat="new in log.newProperties" ng-if="!log.description" id="newInstance">
<div>
<span translate class="label alignSpan">{{::new.key}}</span><span
class="label alignSpan">: </span>
<span translate class="value no-ellipsize" vn-tooltip="{{::new.value | dashIfEmpty}}">
{{::new.value | dashIfEmpty}}
</span>
</div>
</vn-one>
<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-card>
</vn-data-viewer>
<vn-worker-descriptor-popover vn-id="workerDescriptor">
</vn-worker-descriptor-popover>

View File

@ -0,0 +1,75 @@
import ngModule from '../../module';
import Section from '../section';
import './style.scss';
export default class Controller extends Section {
constructor($element, $) {
super($element, $);
this.actionsText = {
'insert': 'Creates',
'update': 'Updates',
'delete': 'Deletes',
'select': 'Views'
}; ``;
this.filter = {
include: [{
relation: 'user',
scope: {
fields: ['name'],
include: {
relation: 'worker',
scope: {
fields: ['id']
}
}
},
}],
};
}
get logs() {
return this._logs;
}
set logs(value) {
this._logs = value;
if (this.logs) {
this.logs.forEach(log => {
log.oldProperties = this.getInstance(log.oldInstance);
log.newProperties = this.getInstance(log.newInstance);
});
}
}
getInstance(instance) {
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');
properties.push({key: property, value: instance[property]});
});
return properties;
}
return null;
}
showWorkerDescriptor(event, workerId) {
if (!workerId) return;
this.$.workerDescriptor.show(event.target, workerId);
}
}
ngModule.vnComponent('vnLog', {
controller: Controller,
template: require('./index.html'),
bindings: {
model: '<',
originId: '<',
url: '@'
}
});

View File

@ -31,6 +31,12 @@ vn-log {
text-overflow: ellipsis; text-overflow: ellipsis;
display: inline-block; display: inline-block;
} }
.no-ellipsize,
[no-ellipsize] {
text-overflow: '';
white-space: normal;
overflow: auto;
}
.alignSpan { .alignSpan {
overflow: hidden; overflow: hidden;
display: inline-block; display: inline-block;

View File

@ -13,7 +13,6 @@ import './department';
import './calendar'; import './calendar';
import './time-control'; import './time-control';
import './log'; import './log';
import './worker-log';
import './dms/index'; import './dms/index';
import './dms/create'; import './dms/create';
import './dms/edit'; import './dms/edit';

View File

@ -1,113 +1 @@
<vn-crud-model <vn-log url="WorkerLogs" origin-id="$ctrl.$params.id"></vn-log>
vn-id="model"
url="{{$ctrl.url}}"
filter="$ctrl.filter"
link="{originFk: $ctrl.originId}"
data="$ctrl.logs"
limit="20"
auto-load="true">
</vn-crud-model>
<vn-data-viewer
model="model"
class="vn-w-xl">
<vn-card>
<vn-table model="model">
<vn-thead>
<vn-tr>
<vn-th field="creationDate">Date</vn-th>
<vn-th field="userFk" class="expendable" shrink>Author</vn-th>
<vn-th field="changedModel" class="expendable" shrink>Model</vn-th>
<vn-th field="action" class="expendable" shrink>Action</vn-th>
<vn-th field="changedModelValue" class="expendable">Name</vn-th>
<vn-th expand>Before</vn-th>
<vn-th expand>After</vn-th>
</vn-tr>
</vn-thead>
<vn-tbody>
<vn-tr ng-repeat="log in $ctrl.logs">
<vn-td expand>
{{::log.creationDate | date:'dd/MM/yyyy HH:mm'}}
<div class="changes">
<div>
<span translate class="label">Changed by</span><span class="label">: </span>
<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>
</div>
<div>
<span translate class="label">Model</span><span class="label">: </span>
<span translate class="value">{{::log.changedModel | dashIfEmpty}}</span>
</div>
<div>
<span translate class="label">Action</span><span class="label">: </span>
<span translate class="value">{{::$ctrl.actionsText[log.action] | dashIfEmpty}}</span>
</div>
<div>
<span translate class="label">Name</span><span class="label">: </span>
<span translate class="value">{{::log.changedModelValue | dashIfEmpty}}</span>
</div>
</div>
</vn-td>
<vn-td class="expendable">
<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 class="expendable">
{{::log.changedModel}}
</vn-td>
<vn-td translate class="expendable">
{{::$ctrl.actionsText[log.action]}}
</vn-td>
<vn-td class="expendable" expand>
{{::log.changedModelValue}}
</vn-td>
<vn-td expand class="before">
<vn-one ng-repeat="old in log.oldProperties">
<div>
<span translate class="label alignSpan">{{::old.key}}</span><span class="label alignSpan">: </span>
<span
translate
class="value ellipsis"
vn-tooltip="{{::old.value | dashIfEmpty}}">
{{::old.value | dashIfEmpty}}
</span>
</div>
</vn-one>
</vn-td>
<vn-td expand class="after">
<vn-one
ng-repeat="new in log.newProperties"
ng-if="!log.description"
id="newInstance">
<div>
<span translate class="label alignSpan">{{::new.key}}</span><span class="label alignSpan">: </span>
<span
translate
class="value ellipsis"
vn-tooltip="{{::new.value | dashIfEmpty}}">
{{::new.value | dashIfEmpty}}
</span>
</div>
</vn-one>
<vn-one
ng-if="!log.newProperties"
id="description">
<div>
<span>{{::log.description}}</span>
</div>
</vn-one>
</vn-td>
</vn-tr>
</vn-tbody>
</vn-table>
<vn-pagination model="model"></vn-pagination>
</vn-card>
</vn-data-viewer>
<vn-worker-descriptor-popover
vn-id="workerDescriptor">
</vn-worker-descriptor-popover>

View File

@ -1,75 +1,7 @@
import ngModule from '../module'; import ngModule from '../module';
import Section from 'salix/components/section'; import Section from 'salix/components/section';
import './style.scss';
export default class Controller extends Section { ngModule.vnComponent('vnWorkerLog', {
constructor($element, $) {
super($element, $);
this.actionsText = {
'insert': 'Creates',
'update': 'Updates',
'delete': 'Deletes',
'select': 'Views'
};
this.filter = {
include: [{
relation: 'user',
scope: {
fields: ['name'],
include: {
relation: 'worker',
scope: {
fields: ['id']
}
}
},
}],
};
}
get logs() {
return this._logs;
}
set logs(value) {
this._logs = value;
if (this.logs) {
this.logs.forEach(log => {
log.oldProperties = this.getInstance(log.oldInstance);
log.newProperties = this.getInstance(log.newInstance);
});
}
}
getInstance(instance) {
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');
properties.push({key: property, value: instance[property]});
});
return properties;
}
return null;
}
showWorkerDescriptor(event, workerId) {
if (!workerId) return;
this.$.workerDescriptor.show(event.target, workerId);
}
}
ngModule.vnComponent('vnLog', {
controller: Controller,
template: require('./index.html'), template: require('./index.html'),
bindings: { controller: Section,
model: '<',
originId: '<',
url: '@'
}
}); });

View File

@ -1 +0,0 @@
<vn-log url="WorkerLogs" origin-id="$ctrl.$params.id"></vn-log>

View File

@ -1,7 +0,0 @@
import ngModule from '../module';
import Section from 'salix/components/section';
ngModule.vnComponent('vnWorkerLog', {
template: require('./index.html'),
controller: Section,
});