|
@@ -1,41 +1,50 @@
|
|
|
const app = require('../../app')
|
|
const app = require('../../app')
|
|
|
-const {editIcon, createIcon, deleteIcon} = require('../../assets')
|
|
|
|
|
|
|
+const {editIcon, createIcon, deleteIcon, viewIcon} = require('../../assets')
|
|
|
|
|
|
|
|
/**
|
|
/**
|
|
|
* @param {CrudPagesOptions} opts
|
|
* @param {CrudPagesOptions} opts
|
|
|
*/
|
|
*/
|
|
|
const list = (opts) => {
|
|
const list = (opts) => {
|
|
|
- const hideCriteria = column => column.routeParam ? `ctrl.$routeParams.${column.routeParam} !== '${opts.paramAll}'` : 'false'
|
|
|
|
|
|
|
+ const hideCriteria = column => column.routeParam ? `$ctrl.$routeParams.${column.routeParam} !== '${opts.paramAll}'` : 'false'
|
|
|
|
|
|
|
|
const defaultHeader = column =>
|
|
const defaultHeader = column =>
|
|
|
html`<th ng-hide="${hideCriteria(column)}" md-column>${column.titleName}</th>`
|
|
html`<th ng-hide="${hideCriteria(column)}" md-column>${column.titleName}</th>`
|
|
|
const defaultCell = column => {
|
|
const defaultCell = column => {
|
|
|
if (column.type === 'autocomplete') {
|
|
if (column.type === 'autocomplete') {
|
|
|
- return html`<td ng-hide="${hideCriteria(column)}" md-cell>{{${raw(opts.camelName)}.${raw(column.camelName)} && (ctrl.autocomplete.${raw(column.camelName)}.lookup[${raw(opts.camelName)}.${raw(column.camelName)}] || ctrl.autocomplete.${raw(column.camelName)}.load(${raw(opts.camelName)}.${raw(column.camelName)}))}}</td>`
|
|
|
|
|
|
|
+ return html`<td ng-hide="${hideCriteria(column)}" md-cell>{{${raw(opts.camelName)}.${raw(column.camelName)} && ($ctrl.autocomplete.${raw(column.camelName)}.lookup[${raw(opts.camelName)}.${raw(column.camelName)}] || $ctrl.autocomplete.${raw(column.camelName)}.load(${raw(opts.camelName)}.${raw(column.camelName)}))}}</td>`
|
|
|
} else {
|
|
} else {
|
|
|
return html`<td ng-hide="${hideCriteria(column)}" md-cell>{{${raw(opts.camelName)}.${raw(column.camelName)}}}</td>`
|
|
return html`<td ng-hide="${hideCriteria(column)}" md-cell>{{${raw(opts.camelName)}.${raw(column.camelName)}}}</td>`
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
const template = html`
|
|
const template = html`
|
|
|
- <app-user-area>
|
|
|
|
|
- <h1>${opts.titlePlural}</h1>
|
|
|
|
|
|
|
+ <app-user-area title-text="${opts.titles && opts.titles.details ? `{{$ctrl.titleFn($ctrl)}}` : opts.titlePlural}">
|
|
|
<md-table-container>
|
|
<md-table-container>
|
|
|
- <table md-table md-row-select md-auto-select ng-model="ctrl.selected" md-progress="ctrl.promise">
|
|
|
|
|
- <thead md-head md-order="query.order" md-on-reorder="ctrl.getRecords">
|
|
|
|
|
|
|
+ <table md-table md-row-select md-auto-select ng-model="$ctrl.selected" md-progress="$ctrl.promise">
|
|
|
|
|
+ <thead md-head md-order="query.order" md-on-reorder="$ctrl.getRecords">
|
|
|
<tr md-row>
|
|
<tr md-row>
|
|
|
${opts.columns.filter(c => c.inList).map(c => c.header || defaultHeader(c))}
|
|
${opts.columns.filter(c => c.inList).map(c => c.header || defaultHeader(c))}
|
|
|
<th md-column>Actions</th>
|
|
<th md-column>Actions</th>
|
|
|
</tr>
|
|
</tr>
|
|
|
</thead>
|
|
</thead>
|
|
|
<tbody md-body>
|
|
<tbody md-body>
|
|
|
- <tr md-row md-select="${opts.camelName}" md-select-id="name" md-auto-select ng-repeat="${raw(opts.camelName)} in ctrl.data track by ${raw(opts.camelName)}.id">
|
|
|
|
|
|
|
+ <tr md-row md-select="${opts.camelName}" md-select-id="name" md-auto-select ng-repeat="${raw(opts.camelName)} in $ctrl.data track by ${raw(opts.camelName)}.id">
|
|
|
${opts.columns.filter(c => c.inList).map(c => c.cell || defaultCell(c))}
|
|
${opts.columns.filter(c => c.inList).map(c => c.cell || defaultCell(c))}
|
|
|
<td md-cell>
|
|
<td md-cell>
|
|
|
- <md-button ng-href="{{::ctrl.appPrefix}}/{{${raw(opts.camelName)}.id}}">
|
|
|
|
|
|
|
+ <md-button
|
|
|
|
|
+ ng-if="$ctrl.api.claims.${opts.constantName}_UPDATE"
|
|
|
|
|
+ ng-href="{{::$ctrl.appPrefix}}/{{${raw(opts.camelName)}.id}}">
|
|
|
<md-icon md-svg-icon="${editIcon}"></md-icon>
|
|
<md-icon md-svg-icon="${editIcon}"></md-icon>
|
|
|
Edit
|
|
Edit
|
|
|
</md-button>
|
|
</md-button>
|
|
|
- <md-button ng-click="ctrl.delete(${raw(opts.camelName)})">
|
|
|
|
|
|
|
+ <md-button
|
|
|
|
|
+ ng-if="!$ctrl.api.claims.${opts.constantName}_UPDATE"
|
|
|
|
|
+ ng-href="{{::$ctrl.appPrefix}}/{{${raw(opts.camelName)}.id}}">
|
|
|
|
|
+ <md-icon md-svg-icon="${viewIcon}"></md-icon>
|
|
|
|
|
+ View
|
|
|
|
|
+ </md-button>
|
|
|
|
|
+ <md-button
|
|
|
|
|
+ ng-if="!$ctrl.api.claims.${opts.constantName}_DELETE"
|
|
|
|
|
+ ng-click="$ctrl.delete(${raw(opts.camelName)})">
|
|
|
<md-icon md-svg-src="${deleteIcon}"></md-icon>
|
|
<md-icon md-svg-src="${deleteIcon}"></md-icon>
|
|
|
Delete
|
|
Delete
|
|
|
</md-button>
|
|
</md-button>
|
|
@@ -46,7 +55,9 @@ const list = (opts) => {
|
|
|
</table>
|
|
</table>
|
|
|
</md-table-container>
|
|
</md-table-container>
|
|
|
<div layout="row" layout-align="end">
|
|
<div layout="row" layout-align="end">
|
|
|
- <md-button class="md-fab" aria-label="Add ${opts.titleName}" ng-href="{{::ctrl.appPrefix}}/new">
|
|
|
|
|
|
|
+ <md-button
|
|
|
|
|
+ ng-if="$ctrl.api.claims.${opts.constantName}_CREATE"
|
|
|
|
|
+ class="md-fab" aria-label="Add ${opts.titleName}" ng-href="{{::$ctrl.appPrefix}}/new">
|
|
|
<md-icon md-svg-src="${createIcon}"></md-icon>
|
|
<md-icon md-svg-src="${createIcon}"></md-icon>
|
|
|
</md-button>
|
|
</md-button>
|
|
|
</div>
|
|
</div>
|
|
@@ -55,8 +66,9 @@ const list = (opts) => {
|
|
|
console.log(`crud: app${opts.pascalPlural}Page`)
|
|
console.log(`crud: app${opts.pascalPlural}Page`)
|
|
|
app.component(`app${opts.pascalPlural}Page`, {
|
|
app.component(`app${opts.pascalPlural}Page`, {
|
|
|
template,
|
|
template,
|
|
|
- controllerAs: 'ctrl',
|
|
|
|
|
controller: function(api, $mdToast, $routeParams, util, $interpolate, $scope) {
|
|
controller: function(api, $mdToast, $routeParams, util, $interpolate, $scope) {
|
|
|
|
|
+ this.api = api
|
|
|
|
|
+ this.titleFn = opts.titles && opts.titles.list
|
|
|
this.$routeParams = $routeParams
|
|
this.$routeParams = $routeParams
|
|
|
this.apiPrefix = util.fillPath(opts.apiPrefix, $routeParams)
|
|
this.apiPrefix = util.fillPath(opts.apiPrefix, $routeParams)
|
|
|
this.appPrefix = util.fillPath(opts.appPrefix, $routeParams)
|
|
this.appPrefix = util.fillPath(opts.appPrefix, $routeParams)
|