Merge branch 'codingweekendfs18' of gitlab.ethz.ch:amiv/amiv-admintool into codingweekendfs18

src/config.json

@@ -90,8 +90,6 @@
             "user.firstname",
             "email"
         ],
-        "searchKeys": [
-            "email"
-        ]
+        "searchKeys": []
     }
 }

src/eventTool.js

@@ -164,14 +164,3 @@ export class EventModal {
     ]);
   }
 }
-
-export class EventTable {
-  view() {
-    return m(TableView, {
-      resource: 'events',
-      keys: config.tableKeys,
-      titles: config.tableKeys.map(key => config.keyDescriptors[key] || key),
-      onAdd: () => { m.route.set('/newevent'); },
-    });
-  }
-}

src/events/eventModal.js

+import m from 'mithril';
+import viewEvent from './viewEvent';
+import newEvent from './newEvent';
+
+export default class EventModal {
+  constructor() {
+    this.edit = false;
+  }
+
+  view() {
+    if (this.edit) {
+      return m(newEvent);
+    }
+    return m(viewEvent, { onEdit: () => { this.edit = true; } });
+  }
+}

src/events/eventWithExport.js

@@ -35,7 +35,7 @@ export default class eventWithExport extends EditView {
             required: true,
             floatingLabel: true,
             dense: true,
-            onChange : (newState) => {this.title_en = this.title_en;},
+            onChange : (newState) => {this.title_en = newState.value; console.log(this.title_en);},
             value: this.title_en,
         });
         const fieldDescriptionEn = m(TextField, { 
@@ -45,23 +45,30 @@ export default class eventWithExport extends EditView {
             dense: true, 
             multiLine: true, 
             rows: 6,
-            onChange : (newState) => {this.fieldDescriptionEn = this.fieldDescriptionEn;},
+            onChange : (newState) => {this.fieldDescriptionEn = newState.value; console.log(this.fieldDescriptionEn);},
             value: this.fieldDescriptionEn,
         });
+
         // Needs administrator (Kulturi).
         const fieldLocation = m(TextField, {
             label: 'Location:',
             floatingLabel: true,
             required: true,
-            onChange : (newState) => {this.fieldLocation = this.fieldLocation;},
+            onChange : (newState) => {this.fieldLocation = newState.value; console.log(this.fieldLocation);},
             value: this.fieldLocation,
         });
+        
+        // Bottom.
         const buttonMaker = m(Button, {
-        label: "Submit Request!",
-        onClick: () => alert("You did not finish the editing of the fields.")
+            // console.log(JSON.stringify(this.keyDescriptors)),
+            label: "Submit Request!",
+            onClick: () => alert("You did not finish the editing of the fields.")
         });
 
-        return m('div', [
+        // Return!
+        return m('div', {
+            style: { height: '100%', 'overflow-y': 'scroll'}
+            }, [
             m('h1', 'For the event creator:', fieldTitleEn  , fieldDescriptionEn, 'For the AMIV administrator:', fieldLocation),
             m('div.footer', buttonMaker),
         ]);

src/events/newEvent.js

 import m from 'mithril';
-import { TextField, Button, Checkbox, RadioGroup, IconButton, SVG } from 'polythene-mithril';
+import { Button, Checkbox, RadioGroup, IconButton, SVG, TextField } from 'polythene-mithril';
+import { styler } from 'polythene-core-css';
 import EditView from '../views/editView';
-import { icons } from '../views/elements';
+import { icons, textInput, datetimeInput } from '../views/elements';
+
+const style = [
+  {
+    '.mywrapper': {
+      padding: '10px',
+    },
+  },
+];
+styler.add('event-add', style);
 
 export default class newEvent extends EditView {
   constructor(vnode) {
-    super(vnode, 'events');
+    super(vnode, 'events', {});
     this.currentpage = 1;
+    this.data = {};
   }
-
   addOne() {
     this.currentpage = this.currentpage + 1;
-    if (this.currentpage === 4) {
-      this.currentpage = 3;
+    if (this.currentpage === 5) {
+      this.currentpage = 4;
     }
   }
 
@@ -23,167 +33,75 @@ export default class newEvent extends EditView {
     }
   }
 
-  view(vnode) {
+  view() {
     if (!this.currentpage) return '';
-    // German and English Information
-    const fieldTitleEn = m(TextField, {
-      label: 'Event Title [EN]',
-      required: true,
-      floatingLabel: true,
-      dense: true,
-      onChange: (newState) => { this.title_en = newState.value; console.log(this.title_en); },
-      value: vnode.state.title_en,
-    });
-
-    const fieldCatchphraseEn = m(TextField, {
-      label: 'Catchphrase [EN]',
-      floatingLabel: true,
-      dense: true,
-      help: 'Fun description to make your event look more interesting than it is',
-      focusHelp: true,
-    });
-
-    const fieldDescriptionEn = m(TextField, {
-      label: 'Description [EN]',
-      required: true,
-      floatingLabel: true,
-      dense: true,
-      multiLine: true,
-      rows: 6,
-    });
-
-    const fieldTitleDe = m(TextField, {
-      label: 'Event Title [DE]',
-      floatingLabel: true,
-      dense: true,
-    });
-
-    const fieldCatchphraseDe = m(TextField, {
-      label: 'Catchphrase [DE]',
-      floatingLabel: true,
-      dense: true,
-      help: 'Fun description to make your event look more interesting than it is',
-      focusHelp: true,
-    });
-
-    const fieldDescriptionDe = m(TextField, {
-      label: 'Description [DE]',
-      floatingLabel: true,
-      dense: true,
-      multiLine: true,
-      rows: 6,
-    });
-
-    // Start of relevant data
-
-    const fieldPrice = m(TextField, {
-      label: 'Price:',
-      type: 'number',
-      help: 'In Rappen/Cents',
-      focusHelp: true,
-      floatingLabel: true,
-      required: true,
-    });
-    const fieldStartDate = m(TextField, {
-      label: 'Event Start[Date and Time]:',
-      help: 'Format: 01.01.1970-18:00',
-      focusHelp: true,
-      floatingLabel: true,
-      required: true,
-    });
-    const fieldEndDate = m(TextField, {
-      label: 'Event End[Date and Time]:',
-      help: 'Format: 01.01.1970-1800',
-      focusHelp: true,
-      floatingLabel: true,
-      required: true,
-    });
-    const fieldStartRegDate = m(TextField, {
-      label: 'Registration Start[Date and Time]:',
-      help: 'Format: 01.01.1970-18:00',
-      focusHelp: true,
-      floatingLabel: true,
-      required: true,
-    });
-    const fieldEndRegDate = m(TextField, {
-      label: 'Registration End[Date and Time]:',
-      help: 'Format: 01.01.1970-1800',
-      focusHelp: true,
-      floatingLabel: true,
-      required: true,
-    });
-    const fieldLocation = m(TextField, {
-      label: 'Location:',
-      floatingLabel: true,
-      required: true,
-    });
-    const fieldNumberOfParticipants = m(TextField, {
-      label: 'Number of open spots:',
-      type: 'number',
-      floatingLabel: true,
-      required: true,
-    });
-
-    // Everything above is working fine atm. (13:35)
-
-    const fieldAdvStart = m(TextField, {
-      label: 'Registration Start[Date and Time]:',
-      type: 'datetime',
-      help: 'Format: 01.01.1970-18:00',
-      focusHelp: true,
-      floatingLabel: true,
-      required: true,
-    });
-    const fieldAdvEnd = m(TextField, {
-      label: 'Registration End[Date and Time]:',
-      help: 'Format: 01.01.1970-1800',
-      focusHelp: true,
-      floatingLabel: true,
-      required: true,
-    });
 
-    const buttonBannerUp = m(Button, {
-      label: 'Select Banner File',
-      events: {
-        onclick: () => console.log('click'),
+    const firstTableInputs = {
+      title_en: {
+        label: 'English Event Title',
       },
-    });
-
-    const buttonInfoUp = m(Button, {
-      label: 'Select Infoscreen File',
-      events: {
-        onclick: () => console.log('click'),
+      catchphrase_en: {
+        label: 'English Catchphrase',
       },
-    });
-
-    const buttonPosterUp = m(Button, {
-      label: 'Select Poster File',
-      events: {
-        onclick: () => console.log('click'),
+      description_en: {
+        label: 'English Description',
+        multiLine: true,
+        rows: 5,
       },
-    });
+      title_de: {
+        label: 'German Event Title',
+      },
+      catchphrase_de: {
+        label: 'German Catchphrase',
+      },
+      description_de: {
+        label: 'German Description',
+        multiLine: true,
+        rows: 5,
+      },
+    };
 
-    const buttonThumbUp = m(Button, {
-      label: 'Select Thumbnail File',
-      events: {
-        onclick: () => console.log('click'),
+    const thirdTableInputs = {
+      spots: {
+        label: 'Number of Spots',
+        help: '0 for open event',
+        focusHelp: true,
       },
-    });
+      price: {
+        label: 'Price',
+      },
+      time_register_start: {
+        label: 'Start of Registration',
+      },
+      time_register_end: {
+        label: 'End of Registration',
+      },
+    };
 
-    const buttonUploadAll = m(Button, {
-      label: 'Upload',
-      events: {
-        onclick: () => console.log('click'),
+    const forthTableInputs = {
+      time_advertising_start: {
+        label: 'Start of Advertisement',
+        type: 'datetime',
+        required: true,
       },
-    });
+      time_advertising_end: {
+        label: 'End of Advertisement',
+        required: true,
+      },
+      priority: {
+        label: 'Priority',
+      },
+    };
 
     const iconRight = m(
-      IconButton, { events: { onclick: () => { this.addOne(); } } },
+      IconButton,
+      { events: { onclick: () => { this.addOne(); } } },
       m(SVG, m.trust(icons.ArrowRight)),
     );
 
     const iconLeft = m(
-      IconButton, { events: { onclick: () => { this.subOne(); } } },
+      IconButton,
+      { events: { onclick: () => { this.subOne(); } } },
       m(SVG, m.trust(icons.ArrowLeft)),
     );
 
@@ -209,6 +127,12 @@ export default class newEvent extends EditView {
       defaultChecked: false,
       label: 'Allow non AMIV Members?',
       value: '100',
+      onChange: (state) => {
+        this.allow_email_signup = state.checked;
+        this.data.allow_email_signup = state.checked;
+        console.log(this.data); // Temp proof of concept.
+      },
+      checked: this.allow_email_signup,
     });
 
     const radioButtonSelectionMode = m(RadioGroup, {
@@ -223,26 +147,78 @@ export default class newEvent extends EditView {
           label: 'Selection made by organizer',
         },
       ],
+      onChange: (state) => {
+        this.selection_strategy = state.value;
+        this.data.selection_strategy = state.value;
+        console.log(this.data); // Temp proof of concept.
+      },
+      value: this.selection_strategy,
     });
 
-    function layoutWith(page) {
-      return m('div', page);
-    }
+    const title = [
+      'Create an Event', 'When and Where?', 'Signups', 'Advertisement',
+    ][this.currentpage - 1];
+
     // checks currentPage and selects the fitting page
-    if (this.currentpage === 1) {
-      return layoutWith(m('h1', 'Event description:', iconLeft, iconRight, m('br'), fieldTitleEn, fieldCatchphraseEn, fieldDescriptionEn, fieldTitleDe, fieldCatchphraseDe, fieldDescriptionDe));
-    } else if (this.currentpage === 2) {
-      return layoutWith(m(
-        'h1', 'Critical Information:', iconLeft, iconRight, m('br'), fieldStartDate, fieldEndDate, fieldStartRegDate,
-        fieldEndRegDate, fieldLocation, fieldPrice, fieldNumberOfParticipants,
-      ));
-    } else if (this.currentpage === 3) {
-      return layoutWith(m(
-        'h1', 'Advertise Information', iconLeft, iconRight, m('br'), fieldAdvStart, fieldAdvEnd, checkboxWebsite,
-        checkboxAnnounce, checkboxInfoScreen, buttonBannerUp, buttonInfoUp, buttonPosterUp,
-        buttonThumbUp, m('br'), buttonUploadAll, m('br'), checkboxAllowMail, radioButtonSelectionMode,
-      ));
-    }
-    return layoutWith(m(''));
+    return m('div.mywrapper', [
+      m('h1', title),
+      m('br'),
+      iconLeft,
+      iconRight,
+      m('br'),
+      m('div', {
+        style: {
+          display: (this.currentpage === 1) ? 'block' : 'none',
+        },
+      }, Object.keys(firstTableInputs).map((key) => {
+        const attrs = firstTableInputs[key];
+        const attributes = Object.assign({}, attrs);
+        attributes.name = key;
+        attributes.floatingLabel = true;
+        return m(textInput, this.bind(attributes));
+      })),
+      m('div', {
+        style: {
+          display: (this.currentpage === 2) ? 'block' : 'none',
+        },
+      }, [
+        m(datetimeInput, this.bind({
+          name: 'time_start',
+          label: 'Event Start Time',
+        })),
+        m(datetimeInput, this.bind({
+          name: 'time_end',
+          label: 'Event End Time',
+        })),
+        m(textInput, this.bind({
+          name: 'location',
+          label: 'Location',
+          floatingLabel: true,
+        })),
+        radioButtonSelectionMode, checkboxAllowMail,
+      ]),
+      m('div', {
+        style: {
+          display: (this.currentpage === 3) ? 'block' : 'none',
+        },
+      }, Object.keys(thirdTableInputs).map((key) => {
+        const attrs = thirdTableInputs[key];
+        const attributes = Object.assign({}, attrs);
+        attributes.name = key;
+        attributes.floatingLabel = true;
+        return m(textInput, this.bind(attributes));
+      })),
+      m('div', {
+        style: {
+          display: (this.currentpage === 4) ? 'block' : 'none',
+        },
+      }, Object.keys(forthTableInputs).map((key) => {
+        const attrs = forthTableInputs[key];
+        const attributes = Object.assign({}, attrs);
+        attributes.name = key;
+        attributes.floatingLabel = true;
+        return m(textInput, this.bind(attributes));
+      })),
+    ]);
   }
 }

src/index.js

@@ -5,16 +5,13 @@ import { UserModal, UserTable, NewUser } from './userTool';
 import { MembershipView } from './membershipTool';
 import EventTable from './events/table';
 import newEvent from './events/newEvent';
-import viewEvent from './events/viewEvent';
+import EventModal from './events/eventModal';
 import eventDraft from './events/eventDraft';
 import eventWithExport from './events/eventWithExport';
 import Layout from './layout';
-// import AnnounceTool from './announceTool';
 import './style';
 
-const main = document.createElement('div');
-document.body.appendChild(main);
-const root = main;
+const root = document.body;
 
 
 function layoutWith(view) {
@@ -31,7 +28,7 @@ m.route(root, '/users', {
   '/newuser': layoutWith(NewUser),
   '/groupmemberships/:id': layoutWith(MembershipView),
   '/events': layoutWith(EventTable),
-  '/events/:id': layoutWith(viewEvent),
+  '/events/:id': layoutWith(EventModal),
   '/newevent': layoutWith(newEvent),
   '/draftevent': layoutWith(eventDraft),
   '/eventwithexport': layoutWith(eventWithExport),

src/listcontroller.js

@@ -2,10 +2,16 @@ import Stream from 'mithril/stream';
 import { ResourceHandler } from './auth';
 
 export default class DatalistController {
-  constructor(resource, query = {}, searchKeys = false) {
-    this.handler = new ResourceHandler(resource, searchKeys);
+  constructor(resource, query = {}, searchKeys = false, onlineSearch = true) {
+    this.onlineSearch = onlineSearch;
+    if (onlineSearch) {
+      this.handler = new ResourceHandler(resource, searchKeys);
+    } else {
+      this.handler = new ResourceHandler(resource, false);
+      this.clientSearchKeys = searchKeys || [];
+    }
     this.query = query || {};
-    this.items = [];
+    this.search = null;
     // state pointer that is counted up every time the table is refreshed so
     // we can tell infinite scroll that the data-version has changed.
     this.stateCounter = Stream(0);
@@ -27,25 +33,66 @@ export default class DatalistController {
   getPageData(pageNum) {
     // for some reason this is called before the object is instantiated.
     // check this and return nothing
-    const query = {};
-    Object.keys(this.query).forEach((key) => { query[key] = this.query[key]; });
+    const query = Object.assign({}, this.query);
     query.max_results = 10;
     query.page = pageNum;
 
     return new Promise((resolve, reject) => {
       this.handler.get(query).then((data) => {
-        resolve(data._items);
+        // If onlineSearch is false, we filter the page-results at the client
+        // because the API would not understand the search pattern, e.g. for
+        // embedded keys like user.firstname
+        if (!this.onlineSearch && this.clientSearchKeys.length > 0 && this.search) {
+          const response = [];
+          // We go through all response items and will add them to response if
+          // they match the query.
+          data._items.forEach((item) => {
+            // Try every search Key seperately, such that any match with any
+            // key is sufficient
+            this.clientSearchKeys.some((key) => {
+              if (key.match(/.*\..*/)) {
+                // traverse the key, this is a key pointing to a sub-object
+                let intermediateObject = Object.assign({}, item);
+                key.split('.').forEach((subKey) => {
+                  intermediateObject = intermediateObject[subKey];
+                });
+                if (intermediateObject.includes(this.search)) {
+                  response.push(item);
+                  // return true to end the search of this object, it is already
+                  // matched
+                  return true;
+                }
+              } else if (item[key] && item[key].includes(this.search)) {
+                response.push(item);
+                // return true to end the search of this object, it is already
+                // matched
+                return true;
+              }
+              return false;
+            });
+          });
+          resolve(response);
+        } else {
+          resolve(data._items);
+        }
       });
     });
   }
 
   setSearch(search) {
-    this.query.search = search;
-    this.refresh();
+    if (this.onlineSearch) {
+      this.search = search;
+      this.query.search = search;
+      this.refresh();
+    } else if (this.clientSearchKeys.length > 0) {
+      this.search = search;
+      this.refresh();
+    }
   }
 
   setQuery(query) {
     this.query = query;
+    this.query.search = this.search;
     this.refresh();
   }
 }

src/views/editView.js

@@ -29,6 +29,7 @@ export default class EditView extends ItemView {
   constructor(vnode, resource, embedded, valid = true) {
     super(resource, embedded);
     this.changed = false;
+    this.resource = resource;
 
     // state for validation
     this.valid = valid;
@@ -38,6 +39,7 @@ export default class EditView extends ItemView {
       allErrors: true,
     });
     this.errors = {};
+    this.data = {};
 
     // callback when edit is finished
     this.callback = vnode.attrs.onfinish;
@@ -55,6 +57,15 @@ export default class EditView extends ItemView {
     m.request(`${apiUrl}docs/api-docs`).then((schema) => {
       const objectSchema = schema.definitions[
         objectNameForResource[this.resource]];
+      console.log(objectSchema);
+      // filter out any field that is of type media and replace with type
+      // object
+      Object.keys(objectSchema.properties).forEach((property) => {
+        if (objectSchema.properties[property].type === 'media' ||
+            objectSchema.properties[property].type === 'json_schema_object') {
+          objectSchema.properties[property].type = 'object';
+        }
+      });
       this.ajv.addSchema(objectSchema, 'schema');
     });
   }
@@ -65,10 +76,12 @@ export default class EditView extends ItemView {
     if (!this.errors[attrs.name]) this.errors[attrs.name] = [];
 
     const boundFormelement = {
-      onchange: (e) => {
+      onChange: (name, value) => {
         this.changed = true;
         // bind changed data
-        this.data[e.target.name] = e.target.value;
+        this.data[name] = value;
+
+        console.log(this.data);
 
         // validate against schema
         const validate = this.ajv.getSchema('schema');

src/views/elements.js

@@ -2,12 +2,14 @@ import m from 'mithril';
 import { IconButton, TextField } from 'polythene-mithril';
 
 export class textInput {
-  constructor({ attrs: { getErrors } }) {
+  constructor({ attrs: { getErrors, name, label } }) {
     // Link the error-getting function from the binding
     this.getErrors = () => [];
+    this.name = name;
     if (getErrors) {
       this.getErrors = getErrors;
     }
+    this.value = '';
   }
 
   view({ attrs }) {
@@ -15,12 +17,92 @@ export class textInput {
     const errors = this.getErrors();
 
     const attributes = Object.assign({}, attrs);
-    attributes.valid = errors.length > 0;
+    attributes.valid = errors.length === 0;
     attributes.error = errors.join(', ');
+    attributes.onChange = ({ value }) => {
+      if (value !== this.value) {
+        this.value = value;
+        attrs.onChange(this.name, value);
+      }
+    };
     return m(TextField, attributes);
   }
 }
 
+export class datetimeInput {
+  constructor({ attrs: { getErrors, name, onChange } }) {
+    // Link the error-getting function from the binding
+    this.getErrors = () => [];
+    this.name = name;
+    if (getErrors) {
+      this.getErrors = getErrors;
+    }
+    this.value = '';
+    this.date = null;
+    this.time = null;
+    this.onChangeCallback = onChange;
+  }
+
+  onChange() {
+    if (this.date && this.time) {
+      const date = new Date(this.date);
+      const h_m = this.time.split(':');
+      date.setHours(h_m[0]);
+      date.setMinutes(h_m[1]);
+      if (this.onChangeCallback) {
+        this.onChangeCallback(this.name, date.toISOString());
+      }
+    }
+  }
+
+  view({ attrs: { label } }) {
+    // set display-settings accoridng to error-state
+    const errors = this.getErrors();
+
+    const date = {
+      type: 'date',
+      style: {
+        width: '150px',
+        float: 'left',
+      },
+      onChange: ({ value }) => {
+        if (value !== this.date) {
+          this.date = value;
+          this.onChange();
+        }
+      },
+      valid: errors.length === 0,
+      error: errors.join(', '),
+    };
+
+    const time = {
+      type: 'time',
+      style: {
+        width: '100px',
+      },
+      onChange: ({ value }) => {
+        if (value !== this.time) {
+          this.time = value;
+          this.onChange();
+        }
+      },
+      valid: errors.length === 0,
+    };
+    return m('div', [
+      m(TextField, {
+        label,
+        disabled: true,
+        style: {
+          width: '200px',
+          float: 'left',
+        },
+      }),
+      m(TextField, date),
+      m(TextField, time),
+    ]);
+  }
+}
+
 export class selectGroup {
   view(vnode) {
     return m('div.form-group', { class: vnode.attrs.classes }, [
@@ -53,6 +135,7 @@ export const icons = {
   iconUsersSVG: '<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M3 5v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2H5c-1.11 0-2 .9-2 2zm12 4c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3zm-9 8c0-2 4-3.1 6-3.1s6 1.1 6 3.1v1H6v-1z"/><path d="M0 0h24v24H0z" fill="none"/></svg>',
   iconEventSVG: '<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M9 11H7v2h2v-2zm4 0h-2v2h2v-2zm4 0h-2v2h2v-2zm2-7h-1V2h-2v2H8V2H6v2H5c-1.11 0-1.99.9-1.99 2L3 20c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11z"/><path d="M0 0h24v24H0z" fill="none"/></svg>',
   ArrowLeft: '<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z"/><path d="M0-.5h24v24H0z" fill="none"/></svg>',
+  iconCheckedSVG: '<svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>',
 };
 
 export const BackButton = {