Add license expiration date to UI

src/components/DatePanel/index.js

@@ -0,0 +1,25 @@
+/*
+ *
+ * Copyright 2018 Odysseus Data Services, inc.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Company: Odysseus Data Services, Inc.
+ * Product Owner/Architecture: Gregory Klebanov
+ * Authors: Pavel Grafkin, Alexander Saltykov, Vitaly Koulakov, Anton Gackovka, Alexandr Ryabokon, Mikhail Mironov
+ * Created: July 25, 2017
+ *
+ */
+
+import DatePanel from './presenter';
+
+export default DatePanel;

src/components/DatePanel/presenter.jsx

@@ -0,0 +1,96 @@
+/*
+ *
+ * Copyright 2018 Odysseus Data Services, inc.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Company: Odysseus Data Services, Inc.
+ * Product Owner/Architecture: Gregory Klebanov
+ * Authors: Pavel Grafkin, Alexander Saltykov, Vitaly Koulakov, Anton Gackovka, Alexandr Ryabokon, Mikhail Mironov
+ * Created: July 25, 2017
+ *
+ */
+
+import React, { Component, PropTypes } from "react";
+import BEMHelper from "services/BemHelper";
+import { Datepicker } from "arachne-ui-components";
+import * as moment from "moment";
+
+require("./style.scss");
+
+// NOTE: Datepicker requires DateInput to be a class
+/**
+ * @param {any} options.className
+ * @param {string} options.value        Value passed by datepicker.
+ * @param {string} options.displayValue Value passed by parent component.
+ * @param {function} options.onClick    Function that should be called to open datepicker.
+ */
+class DateInput extends Component {
+  render() {
+    const classes = new BEMHelper("study-date-input");
+    const { className, displayValue, onClick } = this.props;
+
+    // NOTE:
+    // We should be able to render custom caption (e.g., 'Empty'),
+    // that's why we cannot use value passed by datepicker which is always a date
+    return (
+      <span {...classes({ extra: className })} onClick={onClick}>
+        <span {...classes("ico")}>
+          <span {...classes({ element: "icon", extra: `${className}--disabled` })}>date_range</span>
+        </span>
+        <span {...classes("value")}>{displayValue}</span>
+      </span>
+    );
+  }
+}
+
+DateInput.propTypes = {
+  className: PropTypes.any,
+  displayValue: PropTypes.string.isRequired,
+  onClick: PropTypes.func,
+};
+
+function DatePanel({ title, selected, dateFormat, minDate, maxDate, isEditable, onChange, className }) {
+  const classes = new BEMHelper("study-date-panel");
+  const displayDate = selected ? moment(selected).format(dateFormat) : "Empty";
+
+  return (
+    <div {...classes({ extra: className })}>
+      <span {...classes("title")}>{title}</span>
+      {isEditable ? (
+        <Datepicker
+          {...classes("picker")}
+          selected={selected || moment()}
+          customInput={<DateInput displayValue={displayDate} />}
+          minDate={minDate}
+          maxDate={maxDate}
+          onChange={onChange}
+        />
+      ) : (
+        <DateInput displayValue={displayDate} />
+      )}
+    </div>
+  );
+}
+
+DatePanel.propTypes = {
+  dateFormat: PropTypes.string.isRequired,
+  isEditable: PropTypes.bool.isRequired,
+  maxDate: PropTypes.any,
+  minDate: PropTypes.any,
+  onChange: PropTypes.func,
+  selected: PropTypes.any,
+  title: PropTypes.string.isRequired,
+  className: PropTypes.string,
+};
+
+export default DatePanel;

src/components/DatePanel/style.scss

@@ -0,0 +1,58 @@
+/*
+ *
+ * Copyright 2018 Odysseus Data Services, inc.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Company: Odysseus Data Services, Inc.
+ * Product Owner/Architecture: Gregory Klebanov
+ * Authors: Pavel Grafkin, Alexander Saltykov, Vitaly Koulakov, Anton Gackovka, Alexandr Ryabokon, Mikhail Mironov
+ * Created: July 25, 2017
+ *
+ */
+
+@import "styles/vars-and-mixins.scss";
+
+.#{$namespace} {
+  &study-date-panel {
+    display: flex;
+    align-items: center;
+    background: $white;
+    border-radius: $block-border-radius;
+    padding: 12px 20px;
+    @include block-shadow();
+
+    &__title {
+      @include title();
+      margin-right: auto;
+    }
+
+    &__picker {
+      cursor: pointer;
+    }
+  }
+
+  &study-date-input {
+    &__icon {
+      @include material-icon();
+      margin-right: 1rem;
+    }
+    display: flex;
+    align-items: center;
+    &__ico {
+      color: $grey-placeholder;
+      margin-right: 7px;
+    }
+    &__value {
+    }
+  }
+}

src/modules/Admin/actions/licenses.ts

@@ -60,10 +60,11 @@ function create(userId: number, vocabularyV4Ids: Array<number>) {
 	});
 }
 
-function resolve(id: number, accepted: boolean) {
+function resolve(id: number, accepted: boolean, expiredDate: any) {
 	return services.licenseAccept.create({
 		id,
 		accepted,
+		expiredDate,
 	});
 }
 

src/modules/Admin/components/Licenses/components/ModalEditPermissions/container.ts

@@ -30,11 +30,14 @@ import { get, difference } from 'lodash';
 import presenter from './presenter';
 import selectors from './selectors';
 import { VocabularyOption, User, Vocabulary } from 'modules/Admin/components/Licenses/types';
+import * as moment from 'moment';
+import { commonDateFormat } from 'const/formats';
 
 interface IModalStateProps {
   vocabularies: Array<VocabularyOption>;
   initialValues: {
     vocabularies: Array<string>;
+    expiredDates: Array<string>;
   };
   user: User;
   pendingVocabularies: Array<Vocabulary>;
@@ -43,7 +46,7 @@ interface IModalDispatchProps {
   close: () => (dispatch: Function) => any;
   remove: (id: string) => (dispatch: Function) => any;
   loadLicenses: () => (dispatch: Function) => any;
-  resolveLicense: (id: number, allow: boolean) => (dispatch: Function) => any;
+  resolveLicense: (id: number, allow: boolean, expiredDate: any) => (dispatch: Function) => any;
 };
 interface IModalProps extends IModalStateProps, IModalDispatchProps {
   doSubmit: (vocabs: Array<VocabularyOption>) => Promise<any>;
@@ -58,6 +61,12 @@ class ModalEditPermissions extends Component<IModalProps, {}> {
 function mapStateToProps(state: any): IModalStateProps {
   const vocabularies = selectors.getVocabularies(state);
   const pendingVocabularies = selectors.getPendingVocabularies(state);
+  const expiredDates = []
+  pendingVocabularies.forEach((vocab) => {
+    expiredDates[vocab.licenseId] = vocab.expiredDate ? moment(vocab.expiredDate).format() : moment(new Date().setFullYear(new Date().getFullYear() + 2)).format()
+  })
+
+
   const user = get(state, 'modal.editPermission.data.user.name', {
     id: -1,
     name: 'Anonymous',
@@ -68,6 +77,7 @@ function mapStateToProps(state: any): IModalStateProps {
     vocabularies,
     initialValues: {
       vocabularies: vocabularies.map(v => v.value.toString()),
+      expiredDates: expiredDates
     },
     user,
     pendingVocabularies,
@@ -90,13 +100,13 @@ function mergeProps(
     ...stateProps,
     ...ownProps,
     ...dispatchProps,
-    doSubmit: ({ vocabularies = [], pendingVocabs = [] }) => {
+    doSubmit: ({ vocabularies = [], pendingVocabs = [], expiredDates = [] }) => {
       const promises = [];
       difference(stateProps.initialValues.vocabularies, vocabularies).forEach((licenseId) => {
         promises.push(dispatchProps.remove(licenseId));
       });
       pendingVocabs.forEach((isAllowed: boolean, licenseId: number) => {
-        promises.push(dispatchProps.resolveLicense(licenseId, isAllowed));
+        promises.push(dispatchProps.resolveLicense(licenseId, isAllowed, expiredDates[licenseId]));
       });
       const promise = Promise.all(promises);
       promise