aboutsummaryrefslogtreecommitdiffstats
path: root/ui/imports/ui/components/clique-type
diff options
context:
space:
mode:
Diffstat (limited to 'ui/imports/ui/components/clique-type')
-rw-r--r--ui/imports/ui/components/clique-type/clique-type.html100
-rw-r--r--ui/imports/ui/components/clique-type/clique-type.js371
-rw-r--r--ui/imports/ui/components/clique-type/clique-type.styl54
3 files changed, 525 insertions, 0 deletions
diff --git a/ui/imports/ui/components/clique-type/clique-type.html b/ui/imports/ui/components/clique-type/clique-type.html
new file mode 100644
index 0000000..318fb38
--- /dev/null
+++ b/ui/imports/ui/components/clique-type/clique-type.html
@@ -0,0 +1,100 @@
+<!--
+########################################################################################
+# Copyright (c) 2017 Koren Lev (Cisco Systems), Yaron Yogev (Cisco Systems) and others #
+# #
+# All rights reserved. This program and the accompanying materials #
+# are made available under the terms of the Apache License, Version 2.0 #
+# which accompanies this distribution, and is available at #
+# http://www.apache.org/licenses/LICENSE-2.0 #
+########################################################################################
+ -->
+<template name="CliqueType">
+ <div class="os-clique-type cards white">
+ {{#if notificationsExists}}
+ <div class="sm-notification-panel alert alert-danger">
+ {{#each note in notifications }}
+ <div>{{ note }}</div>
+ {{/each }}
+ </div>
+ {{/if}}
+
+ <h3>{{ getState 'pageHeader' }}</h3>
+
+ <div class="sm-form-container">
+ <form role="form" class="sm-item-form form-horizontal">
+
+ <div class="sm-field-group-id cl-field-group">
+ <label class="cl-field-label">Id</label>
+ <input name="id"
+ disabled="disabled"
+ value="{{ getModelField '_id' }}"
+ class="sm-input-id cl-input" type="text" placeholder="Id" />
+ <div class="cl-field-id">Id</div>
+ </div>
+
+ <div class="sm-field-group-env cl-field-group">
+ <label class="cl-field-label">Environment</label>
+ <select name="env" class="sm-input-env cl-input"
+ {{ getAttrDisabled }} >
+ <option value="" selected disabled hidden></option>
+ {{#each env in envsList }}
+ <option value="{{ env.name }}"
+ {{ getAttrSelected env.name (getModelField 'environment') }}
+ >{{ env.name }}</option>
+ {{/each }}
+ </select>
+ <div class="cl-field-desc">Environment</div>
+ </div>
+
+ <div class="sm-field-group-focal-point-type cl-field-group">
+ <label class="cl-field-label">Focal Point Type</label>
+ <select name="focalPointType" class="sm-input-focal-point-type cl-input"
+ {{ getAttrDisabled }} >
+ {{#each objectType in objectTypesList }}
+ <option value="{{ objectType.value }}"
+ {{ getAttrSelected objectType.value (getModelField 'focal_point_type') }}
+ >{{ objectType.label }}</option>
+ {{/each }}
+ </select>
+ <div class="cl-field-desc">Focal Point Type</div>
+ </div>
+
+ <div class="sm-field-group-link-types cl-field-group">
+ <label class="cl-field-label">Link Types</label>
+ {{#if (getModelField 'link_types') }}
+ {{>SelectableOrderedInput (argsLinkTypesInput linkTypesList (getModelField 'link_types')) }}
+ {{/if }}
+ <div class="cl-field-desc">Link Types</div>
+ </div>
+
+ <div class="sm-field-group-name cl-field-group">
+ <label class="cl-field-label">Name</label>
+ <input name="name"
+ {{ getAttrDisabled }}
+ value="{{ getModelField 'name' }}"
+ class="sm-input-name cl-input"
+ type="text"
+ placeholder="Name" />
+ <div class="cl-field-desc">Name</div>
+ </div>
+
+ {{#if isUpdateableAction }}
+ <button type="submit"
+ class="js-submit-button mdl-button mdl-js-button mdl-button--raised
+ mdl-js-ripple-effect mdl-button--colored"
+ >{{ actionLabel }}</button>
+ {{/if }}
+
+ </form>
+
+ {{#if (getState 'isMessage') }}
+ <div class="js-message-panel alert {{#if (getState 'isError')}}alert-danger{{/if}}
+ {{#if (getState 'isSuccess')}}alert-success{{/if}}"
+ role="alert">
+ {{ getState 'message' }}
+ </div>
+ {{/if }}
+
+ </div>
+ </div>
+</template>
diff --git a/ui/imports/ui/components/clique-type/clique-type.js b/ui/imports/ui/components/clique-type/clique-type.js
new file mode 100644
index 0000000..31efc88
--- /dev/null
+++ b/ui/imports/ui/components/clique-type/clique-type.js
@@ -0,0 +1,371 @@
+/////////////////////////////////////////////////////////////////////////////////////////
+// Copyright (c) 2017 Koren Lev (Cisco Systems), Yaron Yogev (Cisco Systems) and others /
+// /
+// All rights reserved. This program and the accompanying materials /
+// are made available under the terms of the Apache License, Version 2.0 /
+// which accompanies this distribution, and is available at /
+// http://www.apache.org/licenses/LICENSE-2.0 /
+/////////////////////////////////////////////////////////////////////////////////////////
+/*
+ * Template Component: CliqueType
+ */
+
+//import { Meteor } from 'meteor/meteor';
+import * as R from 'ramda';
+import { Template } from 'meteor/templating';
+import { ReactiveDict } from 'meteor/reactive-dict';
+import { SimpleSchema } from 'meteor/aldeed:simple-schema';
+//import { Constants } from '/imports/api/constants/constants';
+import { CliqueTypes } from '/imports/api/clique-types/clique-types';
+import { Environments } from '/imports/api/environments/environments';
+import { Constants } from '/imports/api/constants/constants';
+import { LinkTypes } from '/imports/api/link-types/link-types';
+import { insert, update, remove } from '/imports/api/clique-types/methods';
+import { parseReqId } from '/imports/lib/utilities';
+
+import '/imports/ui/components/selectable-ordered-input/selectable-ordered-input';
+
+import './clique-type.html';
+
+/*
+ * Lifecycles
+ */
+
+Template.CliqueType.onCreated(function() {
+ let instance = this;
+ instance.state = new ReactiveDict();
+ instance.state.setDefault({
+ id: null,
+ //env: null,
+ action: 'insert',
+ isError: false,
+ isSuccess: false,
+ isMessage: false,
+ message: null,
+ disabled: false,
+ notifications: {},
+ model: {},
+ pageHeader: 'Clique Type'
+ });
+
+ instance.autorun(function () {
+ let controller = Iron.controller();
+ let params = controller.getParams();
+ let query = params.query;
+
+ new SimpleSchema({
+ action: { type: String, allowedValues: ['insert', 'view', 'update', 'remove'] },
+ env: { type: String, optional: true },
+ id: { type: String, optional: true }
+ }).validate(query);
+
+ switch (query.action) {
+ case 'insert':
+ initInsertView(instance, query);
+ break;
+
+ case 'view':
+ initViewView(instance, query);
+ break;
+
+ case 'update':
+ initUpdateView(instance, query);
+ break;
+
+ case 'remove':
+ initRemoveView(instance, query);
+ break;
+
+ default:
+ throw 'unimplemented action';
+ }
+ });
+});
+
+/*
+Template.CliqueType.rendered = function() {
+};
+*/
+
+/*
+ * Events
+ */
+
+Template.CliqueType.events({
+ 'submit .sm-item-form': function(event, instance) {
+ event.preventDefault();
+
+ let _id = instance.state.get('id');
+ let env = instance.$('.sm-input-env')[0].value;
+ let focalPointType = instance.$('.sm-input-focal-point-type')[0].value;
+ let linkTypes = R.path(['link_types'], instance.state.get('model'));
+ let name = instance.$('.sm-input-name')[0].value;
+
+ submitItem(instance,
+ _id,
+ env,
+ focalPointType,
+ linkTypes,
+ name
+ );
+ }
+});
+
+/*
+ * Helpers
+ */
+
+Template.CliqueType.helpers({
+ isUpdateableAction() {
+ let instance = Template.instance();
+ let action = instance.state.get('action');
+
+ return R.contains(action, ['insert', 'update', 'remove']);
+ },
+
+ getState: function (key) {
+ let instance = Template.instance();
+ return instance.state.get(key);
+ },
+
+ objectTypesList: function () {
+ return R.ifElse(R.isNil, R.always([]), R.prop('data')
+ )(Constants.findOne({ name: 'object_types_for_links' }));
+ },
+
+ linkTypesList: function () {
+ return LinkTypes.find({});
+ },
+
+ envsList: function () {
+ return Environments.find({});
+ },
+
+ getAttrDisabled: function () {
+ let instance = Template.instance();
+ let result = {};
+ let action = instance.state.get('action');
+
+ if (R.contains(action, ['view', 'remove'])) {
+ result = R.assoc('disabled', true, result);
+ }
+
+ return result;
+ },
+
+ getModel: function () {
+ let instance = Template.instance();
+ return instance.state.get('model');
+ },
+
+ getModelField: function (fieldName) {
+ let instance = Template.instance();
+ return R.path([fieldName], instance.state.get('model'));
+ },
+
+ getAttrSelected: function (optionValue, modelValue) {
+ let result = {};
+
+ if (optionValue === modelValue) {
+ result = R.assoc('selected', 'selected', result);
+ }
+
+ return result;
+ },
+
+ getAttrSelectedMultiple: function (optionValue, modelValues) {
+ let result = {};
+
+ if (R.isNil(modelValues)) { return result; }
+
+ if (R.contains(optionValue, modelValues)) {
+ result = R.assoc('selected', 'selected', result);
+ }
+
+ return result;
+ },
+
+ actionLabel: function () {
+ let instance = Template.instance();
+ let action = instance.state.get('action');
+ return calcActionLabel(action);
+ },
+
+ argsLinkTypesInput: function (linkTypesList, chosenLinkTypes) {
+ let instance = Template.instance();
+
+ let options = R.map((linkType) => {
+ return { value: linkType.type, label: linkType.type };
+ }, linkTypesList);
+
+ let product = R.map((linkTypeVal) => {
+ return { value: linkTypeVal, label: linkTypeVal };
+ }, chosenLinkTypes);
+
+ return {
+ choices: options,
+ product: product,
+ onProductChange: function (product) {
+ let model = instance.state.get('model');
+ let link_types = R.map(R.prop('value'), product);
+ model = R.assoc('link_types', link_types, model);
+ instance.state.set('model', model);
+ },
+ };
+ },
+}); // end: helpers
+
+function initInsertView(instance, query) {
+ instance.state.set('action', query.action);
+ instance.state.set('env', query.env);
+ instance.state.set('model', CliqueTypes.schema.clean({
+ environment: instance.state.get('env')
+ }));
+
+ subscribeToOptionsData(instance);
+ instance.subscribe('constants');
+ //instance.subscribe('link_types?env', query.env);
+}
+
+function initViewView(instance, query) {
+ let reqId = parseReqId(query.id);
+
+ instance.state.set('action', query.action);
+ instance.state.set('env', query.env);
+ instance.state.set('id', reqId);
+
+ subscribeToOptionsData(instance);
+ instance.subscribe('constants');
+ instance.subscribe('clique_types?_id', reqId.id);
+
+ CliqueTypes.find({ _id: reqId.id }).forEach((model) => {
+ instance.state.set('model', model);
+ });
+
+}
+
+function initUpdateView(instance, query) {
+ let reqId = parseReqId(query.id);
+
+ instance.state.set('action', query.action);
+ instance.state.set('env', query.env);
+ instance.state.set('id', reqId);
+
+ subscribeToOptionsData(instance);
+ instance.subscribe('constants');
+ instance.subscribe('clique_types?_id', reqId.id);
+
+ CliqueTypes.find({ _id: reqId.id }).forEach((model) => {
+ instance.state.set('model', model);
+ });
+}
+
+function initRemoveView(instance, query) {
+ initViewView(instance, query);
+}
+
+function subscribeToOptionsData(instance) {
+ instance.subscribe('environments_config');
+ instance.subscribe('link_types');
+}
+
+function submitItem(
+ instance,
+ id,
+ env,
+ focal_point_type,
+ link_types,
+ name
+ ) {
+
+ let action = instance.state.get('action');
+
+ instance.state.set('isError', false);
+ instance.state.set('isSuccess', false);
+ instance.state.set('isMessage', false);
+ instance.state.set('message', null);
+
+ switch (action) {
+ case 'insert':
+ insert.call({
+ environment: env,
+ focal_point_type: focal_point_type,
+ link_types: link_types,
+ name: name
+ }, processActionResult.bind(null, instance));
+ break;
+
+ case 'update':
+ update.call({
+ _id: id.id,
+ environment: env,
+ focal_point_type: focal_point_type,
+ link_types: link_types,
+ name: name
+ }, processActionResult.bind(null, instance));
+ break;
+
+ case 'remove':
+ remove.call({
+ _id: id.id
+ }, processActionResult.bind(null, instance));
+ break;
+
+ default:
+ // todo
+ break;
+ }
+}
+
+function processActionResult(instance, error) {
+ let action = instance.state.get('action');
+
+ if (error) {
+ instance.state.set('isError', true);
+ instance.state.set('isSuccess', false);
+ instance.state.set('isMessage', true);
+
+ if (typeof error === 'string') {
+ instance.state.set('message', error);
+ } else {
+ instance.state.set('message', error.message);
+ }
+
+ return;
+ }
+
+ instance.state.set('isError', false);
+ instance.state.set('isSuccess', true);
+ instance.state.set('isMessage', true);
+
+ switch (action) {
+ case 'insert':
+ instance.state.set('message', 'Record had been added successfully');
+ instance.state.set('disabled', true);
+ break;
+
+ case 'remove':
+ instance.state.set('message', 'Record had been removed successfully');
+ instance.state.set('disabled', true);
+ break;
+
+ case 'update':
+ instance.state.set('message', 'Record had been updated successfully');
+ break;
+ }
+
+ Router.go('/clique-types-list');
+}
+
+function calcActionLabel(action) {
+ switch (action) {
+ case 'insert':
+ return 'Add';
+ case 'remove':
+ return 'Remove';
+ case 'update':
+ return 'Update';
+ default:
+ return 'Submit';
+ }
+}
diff --git a/ui/imports/ui/components/clique-type/clique-type.styl b/ui/imports/ui/components/clique-type/clique-type.styl
new file mode 100644
index 0000000..11c42df
--- /dev/null
+++ b/ui/imports/ui/components/clique-type/clique-type.styl
@@ -0,0 +1,54 @@
+.os-clique-type
+ margin: 20px;
+
+ .cl-field-group
+ display: flex;
+ flex-flow: row nowrap;
+ align-items: center;
+ padding: 5px 0;
+
+ .cl-field-label
+ width: 120px;
+ margin: 0 5px;
+
+ >.cl-input
+ display: block;
+ width: 100%;
+ min-height: 34px;
+ padding: 6px 12px;
+ font-size: 14px;
+ line-height: 1.42857143;
+ color: #555;
+ background-color: #fff;
+ background-image: none;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+ width: 400px;
+ margin: 0 5px;
+
+ .cl-field-desc
+ margin: 0 5px;
+
+ .js-message-panel
+ margin-top: 20px;
+
+ .sm-field-group-link-types
+ .os-selectable-ordered-input
+ width: 400px;
+
+ .cl-input
+ display: block;
+ width: 100%;
+ min-height: 34px;
+ padding: 6px 12px;
+ font-size: 14px;
+ line-height: 1.42857143;
+ color: #555;
+ background-color: #fff;
+ background-image: none;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+ //width: 400px;
+ margin: 0 5px;