extend new layout to jobs

src/index.js

@@ -8,9 +8,8 @@ import EventTable from './events/table';
 import EventItem from './events/item';
 import eventDraft from './events/eventDraft';
 import eventWithExport from './events/eventWithExport';
-import newJob from './jobs/newJob';
-import jobTable from './jobs/jobTable';
-import jobModal from './jobs/jobModal';
+import JobTable from './jobs/table';
+import JobItem from './jobs/item';
 import Layout from './layout';
 import './style';
 
@@ -39,10 +38,9 @@ m.route(root, '/users', {
   '/groups/:id': layoutWith(GroupItem),
   '/newgroup': layoutWith(GroupItem),
   '/oauthcallback': OauthRedirect,
-  '/joboffers': layoutWith(jobTable),
-  '/newjoboffer': layoutWith(newJob),
-  '/joboffers/:id': layoutWith(jobModal),
-  // '/announce': layoutWith(AnnounceTool),
+  '/joboffers': layoutWith(JobTable),
+  '/newjoboffer': layoutWith(JobItem),
+  '/joboffers/:id': layoutWith(JobItem),
 });
 
 m.route.prefix('');

src/jobs/newJob.js → src/jobs/editJob.js

 import m from 'mithril';
-import { RaisedButton } from 'polythene-mithril';
-import { EditView } from '../views/editView';
+import EditView from '../views/editView';
 
 
 export default class newJob extends EditView {
-  constructor(vnode) {
-    super(vnode, 'joboffers', {});
-  }
-
   view() {
-    const submitButton = m(RaisedButton, {
-      disabled: !this.valid,
-      label: 'Submit',
-      events: {
-        onclick: () => { this.submit(); },
-      },
-    });
-
-    return m('div.maincontainer', [
+    return this.layout([
       m('h3', 'Add a New Job Offer'),
       ...this.renderPage({
         title_de: { type: 'text', label: 'German Title' },
       }),
-      m('br'),
-      submitButton,
     ]);
   }
 }

src/jobs/item.js

+import m from 'mithril';
+import viewJob from './viewJob';
+import editJob from './editJob';
+import ItemController from '../itemcontroller';
+
+export default class jobModal {
+  constructor() {
+    this.controller = new ItemController('joboffers');
+  }
+
+  view() {
+    if (!this.controller || !this.controller.data) return '';
+    if (this.controller.modus !== 'view') return m(editJob, { controller: this.controller });
+    return m(viewJob, { controller: this.controller });
+  }
+}

src/jobs/jobModal.js

-import m from 'mithril';
-import viewJob from './viewJob';
-import newJob from './newJob';
-
-export default class jobModal {
-  constructor() {
-    this.edit = false;
-  }
-
-  view() {
-    if (this.edit) {
-      return m(newJob);
-    }
-    return m(viewJob, { onEdit: () => { this.edit = true; } });
-  }
-}

src/jobs/jobTable.js → src/jobs/table.js

@@ -34,7 +34,7 @@ export default class JobTable {
         { text: 'Company', width: '21em' },
         { text: 'End', width: '9em' },
       ],
-      onAdd: () => { m.route.set('/newjob'); },
+      onAdd: () => { m.route.set('/newjoboffer'); },
     });
   }
 }

src/jobs/viewJob.js

 import m from 'mithril';
-import { RaisedButton } from 'polythene-mithril';
-import { styler } from 'polythene-core-css';
 import { apiUrl } from 'networkConfig';
 import ItemView from '../views/itemView';
 import { dateFormatter } from '../utils';
 import { Property } from '../views/elements';
 
-const viewLayout = [
-  {
-    '.propertyLangIndicator': {
-      width: '30px',
-      height: '20px',
-      float: 'left',
-      'background-color': 'rgb(031,045,084)',
-      'border-radius': '10px',
-      'text-align': 'center',
-      'line-height': '20px',
-      color: 'rgb(255,255,255)',
-      'margin-right': '10px',
-      'font-size': '11px',
-    },
-    '.jobViewLeft': {
-      'grid-column': 1,
-    },
-    '.jobViewRight': {
-      'grid-column': 2,
-    },
-    '.jobViewRight h4': {
-      'margin-top': '0px',
-    },
-  },
-];
-styler.add('jobView', viewLayout);
-
-
 // small helper class to display both German and English content together, dependent
 // on which content is available.
 class DuoLangProperty {
@@ -56,18 +26,8 @@ class DuoLangProperty {
 }
 
 export default class viewJob extends ItemView {
-  constructor() {
-    super('joboffers');
-  }
-
-  view({ attrs: { onEdit } }) {
-    if (!this.data) return '';
-
-    return m('div', {
-      style: { height: '100%', 'overflow-y': 'scroll', padding: '10px' },
-    }, [
-      m(RaisedButton, { label: 'Edit Joboffer', events: { onclick: onEdit } }),
-      // this div is the title line
+  view() {
+    return this.layout([
       m('div', [
         // company logo if existing
         this.data.img_thumbnail ? m('img', {