Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • maspect/amiv-admintool
  • emustafa/amiv-admintool
  • dvruette/amiv-admintool
  • amiv/amiv-admintool
4 results
Show changes
Hide whitespace changes
Inline Side-by-side
src/views/itemView.js
View file @ 4348854c
import m from 'mithril';
import { Toolbar, Dialog, Button } from 'polythene-mithril';
import { IconButton, Toolbar, Dialog, Button } from 'polythene-mithril';
import { ButtonCSS } from 'polythene-css';
import { colors } from '../style';
import { loadingScreen } from '../layout';
import { icons } from './elements';
ButtonCSS.addStyle('.itemView-edit-button', {
color_light_background: colors.light_blue,
......@@ -50,25 +51,36 @@ export default class ItemView {
});
}
layout(children) {
layout(children, buttons = []) {
if (!this.controller || !this.controller.data) return m(loadingScreen);
// update the reference to the controller data, as this may be refreshed in between
// update the data reference
this.data = this.controller.data;
return m('div', [
m(Toolbar, m('div.pe-button-row', [
m(Button, {
element: 'div',
className: 'itemView-edit-button',
label: `Edit ${this.resource.charAt(0).toUpperCase()}${this.resource.slice(1, -1)}`,
events: { onclick: () => { this.controller.changeModus('edit'); } },
}),
m(Button, {
label: `Delete ${this.resource.charAt(0).toUpperCase()}${this.resource.slice(1, -1)}`,
className: 'itemView-delete-button',
border: true,
events: { onclick: () => this.delete() },
m(Toolbar, [
this.data._links.self.methods.indexOf('PATCH') > -1 && m('div', {
style: { width: 'calc(100% - 48px)' },
}, m('div.pe-button-row', [
m(Button, {
element: 'div',
className: 'itemView-edit-button',
label: `Edit ${this.resource.charAt(0).toUpperCase()}${this.resource.slice(1, -1)}`,
events: { onclick: () => { this.controller.changeModus('edit'); } },
}),
m(Button, {
label: `Delete ${this.resource.charAt(0).toUpperCase()}${this.resource.slice(1, -1)}`,
className: 'itemView-delete-button',
border: true,
events: { onclick: () => this.delete() },
}),
...buttons,
])),
m(IconButton, {
style: { 'margin-left': 'auto', 'margin-right': '0px' },
icon: { svg: { content: m.trust(icons.clear) } },
events: { onclick: () => { this.controller.cancel(); } },
}),
])),
]),
m('div', {
style: { height: 'calc(100vh - 130px)', 'overflow-y': 'scroll' },
}, children),
......
src/views/selectList.js deleted 100644 → 0
View file @ e34850bd
import m from 'mithril';
import Stream from 'mithril/stream';
import {
List, ListTile, Search, IconButton, Button, Toolbar,
ToolbarTitle,
} from 'polythene-mithril';
import infinite from 'mithril-infinite';
import { icons, BackButton, ClearButton, SearchIcon } from './elements';
class SearchField {
oninit() {
this.value = Stream('');
this.setInputState = Stream();
// const clear = () => setInputState()({ value: '', focus: false});
this.clear = () => this.value('');
this.leave = () => this.value('');
}
view({ state, attrs }) {
// incoming value and focus added for result list example:
const value = attrs.value !== undefined ? attrs.value : state.value();
return m(Search, Object.assign(
{},
{
textfield: {
label: 'type here',
onChange: (newState) => {
state.value(newState.value);
state.setInputState(newState.setInputState);
// onChange callback added for result list example:
if (attrs.onChange) attrs.onChange(newState, state.setInputState);
},
value,
defaultValue: attrs.defaultValue,
},
buttons: {
focus: {
before: m(BackButton, { leave: state.leave }),
},
focus_dirty: {
before: m(BackButton, { leave: state.leave }),
after: m(ClearButton, { clear: state.clear }),
},
dirty: {
before: m(BackButton, { leave: state.leave }),
after: m(ClearButton, { clear: state.clear }),
},
},
},
attrs,
));
}
}
export default class SelectList {
constructor({ attrs: { listTileAttrs, onSelect = false } }) {
this.showList = false;
this.searchValue = '';
this.listTileAttrs = listTileAttrs;
this.onSelect = onSelect;
// initialize the Selection
this.selected = null;
}
onupdate({ attrs: { selection = null } }) {
// make it possible to change the selection from outside, e.g. to set the field to an
// existing group moderator
if (selection) this.selected = selection;
}
item() {
return (data) => {
const attrs = {
compactFront: true,
hoverable: true,
className: 'themed-list-tile',
events: {
onclick: () => {
if (this.onSelect) { this.onSelect(data); }
this.selected = data;
this.showList = false;
},
},
};
// Overwrite default attrs
Object.assign(attrs, this.listTileAttrs(data));
return m(ListTile, attrs);
};
}
view({
attrs: {
controller,
onSubmit = false,
onCancel = false,
selectedText,
},
}) {
return m('div', [
m(Toolbar, { compact: true, style: { background: 'rgb(78, 242, 167)' } }, this.selected ? [
m(IconButton, {
icon: { svg: m.trust(icons.clear) },
ink: false,
events: {
onclick: () => {
if (this.onSelect) { this.onSelect(null); }
this.selected = null;
},
},
}),
m(ToolbarTitle, { text: selectedText(this.selected) }),
onSubmit ? m(Button, {
label: 'Submit',
className: 'blue-button',
events: {
onclick: () => {
onSubmit(this.selected);
this.selected = null;
controller.setSearch('');
controller.refresh();
},
},
}) : '',
] : [
m(SearchField, Object.assign({}, {
style: { background: 'rgb(78, 242, 167)' },
onChange: ({ value, focus }) => {
// onChange is called either if the value or focus fo the SearchField
// changes.
// At value change we want to update the search
// at focus changt we hie the list of results. As focus change also
// happens while clicking on an item in the list of results, the list
// is hidden after a short Timeout that has to be sufficiently long
// to register the onclick of the listitem. Can be a problem for different
// OS and browsers.
if (focus) {
this.showList = true;
} else if (!focus) {
// don't close the list immidiately, as 'out of focus' could
// also mean that the user is clicking on a list item
setTimeout(() => { this.showList = false; m.redraw(); }, 500);
}
if (value !== this.searchValue) {
// if we always update the search value, this would also happen
// immidiately in the moment where we click on the listitem.
// Then, the list get's updated before the click is registered.
// So, we make sure this state change is due to value change and
// not due to focus change.
this.searchValue = value;
controller.debouncedSearch(value);
}
},
})),
onCancel ? m(Button, {
label: 'cancel',
className: 'blue-button',
events: { onclick: onCancel },
}) : '',
]),
(this.showList && !this.selected) ? m(List, {
style: { height: '400px', 'background-color': 'white' },
tiles: m(infinite, controller.infiniteScrollParams(this.item())),
}) : '',
]);
}
}
src/views/selectOption.js deleted 100644 → 0
View file @ e34850bd
import m from 'mithril';
import '@material/select/dist/mdc.select.css';
import '@material/select/dist/mdc.select';
import stream from 'mithril/stream';
import { Menu, List, ListTile } from 'polythene-mithril';
/**
* form element to select from multiple options.
*
* Copied from
* https://github.com/ArthurClemens/polythene/blob/master/docs/components/mithril/menu.md
*
* @class SelectOptions (name)
*/
export class SelectOptions {
oninit({ name }) {
this.isOpen = stream(false);
this.selectedIndex = stream(0);
// target has to be a unique ID, therefore we take the name of the assigned value
this.target = name;
}
view({ attrs: { name, options, onChange } }) {
const isOpen = this.isOpen();
const selectedIndex = this.selectedIndex();
return m('div', { style: { position: 'relative' } }, [
m(Menu, {
target: `#${this.target}`,
show: isOpen,
hideDelay: 0.240,
didHide: () => this.isOpen(false),
size: 5,
content: m(List, {
tiles: options.map((setting, index) =>
m(ListTile, {
title: setting,
ink: true,
hoverable: true,
events: {
onclick: () => {
this.selectedIndex(index);
onChange(name, options[index]);
},
},
})),
}),
}),
m(ListTile, {
id: this.target,
title: options[selectedIndex],
events: { onclick: () => this.isOpen(true) },
}),
]);
}
}
export class MDCSelect {
view({ attrs: { options, name, onchange = () => {}, ...kwargs } }) {
return m('div.mdc-select', { style: { height: '41px' } }, [
m('select.mdc-select__native-control', {
style: { 'padding-top': '10px' },
onchange: ({ target: { value } }) => { onchange(value); },
...kwargs,
}, options.map(option => m('option', { value: option }, option))),
m('label.mdc-floating-label', ''),
m('div.mdc-line-ripple'),
]);
}
}
src/views/tableView.js
View file @ 4348854c
import m from 'mithril';
import infinite from 'mithril-infinite';
import { List, ListTile, Toolbar, Search, Button } from 'polythene-mithril';
import { List, ListTile, Toolbar, Search, Button, Icon } from 'polythene-mithril';
import 'polythene-css';
import { styler } from 'polythene-core-css';
import { FilterChip, icons } from './elements';
const tableStyles = [
{
'.tabletool': {
display: 'grid',
height: '100%',
'grid-template-rows': '48px calc(100% - 78px)',
'background-color': 'white',
},
'.toolbar': {
'grid-row': 1,
display: 'flex',
},
'.scrollTable': {
'grid-row': 2,
},
'.tableTile': {
padding: '10px',
'border-bottom': '1px solid rgba(0, 0, 0, 0.12)',
......@@ -40,19 +32,46 @@ export default class TableView {
* Works with embedded resources, i.e. if you add
* { embedded: { event: 1 } } to a list of eventsignups,
* you can display event.title_de as a table key
* - filters: list of list of objects, each inner list is a group of mutual exclusive
* filters.
* A filter can have properties 'name', 'query' and optionally 'selected' for
* the initial selection state.
*/
constructor({
attrs: {
keys,
titles,
tileContent,
filters = null,
clickOnRows = (data) => { m.route.set(`/${data._links.self.href}`); },
clickOnTitles = (controller, title) => { controller.setSort([[title, 1]]); },
},
}) {
this.search = '';
this.tableKeys = keys;
this.tableKeys = keys || [];
this.tableTitles = titles;
this.tileContent = tileContent;
this.clickOnRows = clickOnRows;
this.clickOnTitles = clickOnTitles;
this.searchValue = '';
// make a copy of filters so we can toggle the selected status
this.filters = filters ? filters.map(
filterGroup => filterGroup.map(filter => Object.assign({}, filter)),
) : null;
}
/*
* initFilterIdxs lets you specify the filters that are active at initialization.
* They are specified as index to the nexted filterGroups array.
*/
oninit({ attrs: { controller, initFilterIdxs = [] } }) {
if (this.filters) {
initFilterIdxs.forEach((filterIdx) => {
this.filters[filterIdx[0]][filterIdx[1]].selected = true;
});
// update filters in controller
controller.setFilter(this.getSelectedFilterQuery());
}
}
getItemData(data) {
......@@ -85,15 +104,46 @@ export default class TableView {
}
getSelectedFilterQuery() {
// produce a list of queries from the filters that are currently selected
const selectedFilters = [].concat(...this.filters.map(filterGroup => filterGroup.filter(
filter => filter.selected === true,
).map(filter => filter.query)));
// now merge all queries into one new object
return Object.assign({}, ...selectedFilters);
}
// Display an arrow at the table title that allows sorting
arrowOrNot(controller, title) {
const titleText = title.width ? title.text : title;
if (!controller.sort) return false;
let i;
for (i = 0; i < this.tableTitles.length; i += 1) {
const tableTitlei = this.tableTitles[i].width
? this.tableTitles[i].text : this.tableTitles[i];
if (tableTitlei === titleText) break;
}
return this.tableKeys[i] === controller.sort[0][0];
}
view({
attrs: {
controller,
titles,
onAdd = false,
buttons = [],
tableHeight = false,
},
}) {
return m('div.tabletool', [
return m('div.tabletool', {
style: {
display: 'grid',
height: '100%',
'grid-template-rows': this.filters
? '48px 40px calc(100% - 120px)' : '48px calc(100% - 80px)',
'background-color': 'white',
},
}, [
m(Toolbar, {
className: 'toolbar',
compact: true,
......@@ -111,6 +161,16 @@ export default class TableView {
},
fullWidth: false,
}),
...buttons.map(b => m(Button, {
className: 'blue-button',
style: {
'margin-right': '5px',
},
events: {
onclick: b.onclick,
},
label: b.text,
})),
onAdd ? m(Button, {
className: 'blue-button',
borders: true,
......@@ -119,20 +179,68 @@ export default class TableView {
}) : '',
],
}),
// please beare with this code, it is the only way possible to track the selection
// status of all the filters of the same group and make sure that they are really
// mutually exclusive (that way when you click on one filter in the group, the other
// ones in this group will be deselected)
this.filters && m('div', {
style: {
height: '50px',
'overflow-x': 'auto',
'overflow-y': 'hidden',
'white-space': 'nowrap',
padding: '0px 5px',
},
}, [].concat(['Filters: '], ...[...this.filters.keys()].map(
filterGroupIdx => [...this.filters[filterGroupIdx].keys()].map((filterIdx) => {
const thisFilter = this.filters[filterGroupIdx][filterIdx];
return m(FilterChip, {
selected: thisFilter.selected,
onclick: () => {
if (!thisFilter.selected) {
// set all filters in this group to false
[...this.filters[filterGroupIdx].keys()].forEach((i) => {
this.filters[filterGroupIdx][i].selected = false;
});
// now set this filter to selected
this.filters[filterGroupIdx][filterIdx].selected = true;
} else {
this.filters[filterGroupIdx][filterIdx].selected = false;
}
// update filters in controller
controller.setFilter(this.getSelectedFilterQuery());
},
}, thisFilter.name);
}),
))),
m(List, {
className: 'scrollTable',
style: tableHeight ? { height: tableHeight } : {},
style: {
'grid-row': this.filters ? 3 : 2,
...tableHeight ? { height: tableHeight } : {},
},
tiles: [
m(ListTile, {
className: 'tableTile',
hoverable: this.clickOnTitles,
content: m(
'div',
{ style: { width: '100%', display: 'flex' } },
// Either titles is a list of titles that are distributed equally,
// or it is a list of objects with text and width
titles.map(title => m('div', {
style: { width: title.width || `${98 / this.tableKeys.length}%` },
}, title.width ? title.text : title)),
titles.map((title, i) => m(
'div', {
onclick: () => {
if (this.clickOnTitles && this.tableKeys[i]) {
this.clickOnTitles(controller, this.tableKeys[i]);
}
},
style: { width: title.width || `${98 / this.tableKeys.length}%` },
},
[title.width ? title.text : title,
this.arrowOrNot(controller, title)
? m(Icon, { svg: { content: m.trust(icons.sortingArrow) } }) : ''],
)),
),
}),
m(infinite, controller.infiniteScrollParams(this.item())),
......@@ -141,4 +249,3 @@ export default class TableView {
]);
}
}
webpack.config.dev.js
View file @ 4348854c
// Start with prod config
const config = require('./webpack.config.prod.js');
// Replace development with production config
const webpack = require('webpack');
const CompressionPlugin = require('compression-webpack-plugin');
// Start with dev config
const config = require('./webpack.config.js');
// Remove local server and code map
config.devServer = undefined;
//config.devtool = '';
config.mode = 'production';
config.optimization = {
usedExports: true,
sideEffects: true,
splitChunks: {
chunks: 'async', // TODO possibly set to all
automaticNameDelimiter: '-',
name: true,
},
};
// Add optimization plugins
config.plugins.push(
new CompressionPlugin({
algorithm: 'gzip',
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.8,
}),
);
// Replace local with development server config
config.resolve.alias.networkConfig = `${__dirname}/src/networkConfig.dev.json`;
module.exports = config;
webpack.config.js
View file @ 4348854c
......@@ -38,26 +38,33 @@ const config = {
rules: [
{
test: /\.js$/,
enforce: "pre",
enforce: 'pre',
exclude: /node_modules/,
loader: 'eslint-loader',
options: {
emitWarning: true // don't fail the build for linting errors
}
emitWarning: true, // don't fail the build for linting errors
},
},
{
test: /\.js$/, // Check for all js files
include: [
path.resolve(__dirname, './src'),
path.resolve(__dirname, 'node_modules/@material'),
path.resolve(__dirname, 'node_modules/amiv-web-ui-components'),
],
use: [{
loader: 'babel-loader',
options: {
presets: ['env'],
plugins: ['transform-object-rest-spread'],
use: [
{
loader: 'babel-loader',
options: {
//presets: [['@babel/preset-env', { targets: 'last 2 years' }]],
presets: ['@babel/preset-env'],
plugins: [
'@babel/plugin-proposal-object-rest-spread',
//'@babel/plugin-syntax-dynamic-import',
],
},
},
}],
],
},
{
test: /\.(png|jpe?g|gif|svg)$/,
......
webpack.config.local.js 0 → 100644
View file @ 4348854c
const webpack = require('webpack');
const CompressionPlugin = require('compression-webpack-plugin');
// Start with dev config
const config = require('./webpack.config.js');
// Remove development server and code map
config.devServer = undefined;
config.devtool = '';
config.mode = 'production';
config.optimization = {
usedExports: true,
sideEffects: true,
splitChunks: {
chunks: 'async', // TODO possibly set to all
automaticNameDelimiter: '-',
name: true,
},
};
// Add optimization plugins
config.plugins.push(
new CompressionPlugin({
algorithm: 'gzip',
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.8,
}),
);
// Replace development with production config
config.resolve.alias.networkConfig = `${__dirname}/src/networkConfig.local.json`;
module.exports = config;
webpack.config.prod.js
View file @ 4348854c
......@@ -7,22 +7,31 @@ const config = require('./webpack.config.js');
// Remove development server and code map
config.devServer = undefined;
config.devtool = '';
config.mode = 'production';
config.optimization = {
usedExports: true,
sideEffects: true,
splitChunks: {
chunks: 'async', // TODO possibly set to all
automaticNameDelimiter: '-',
name: true,
},
};
// Add optimization plugins
config.plugins = [
new webpack.optimize.UglifyJsPlugin(),
new webpack.optimize.AggressiveMergingPlugin(),
config.plugins.push(
new CompressionPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.8,
}),
];
);
// Replace development with production config
config.resolve.alias.networkConfig = `${__dirname}/src/networkConfig.prod.json`;
module.exports = config;
webpack.config.staging.js 0 → 100644
View file @ 4348854c
const webpack = require('webpack');
const CompressionPlugin = require('compression-webpack-plugin');
// Start with dev config
const config = require('./webpack.config.js');
// Remove local server and code map
config.devServer = undefined;
//config.devtool = '';
config.mode = 'production';
config.optimization = {
usedExports: true,
sideEffects: true,
splitChunks: {
chunks: 'async', // TODO possibly set to all
automaticNameDelimiter: '-',
name: true,
},
};
// Add optimization plugins
config.plugins.push(
new CompressionPlugin({
algorithm: 'gzip',
test: /\.js$|\.css$|\.html$/,
threshold: 10240,
minRatio: 0.8,
}),
);
// Replace local with staging server config
config.resolve.alias.networkConfig = `${__dirname}/src/networkConfig.staging.json`;
module.exports = config;