Merge pull request #1173 from apinf/feature/add-api-logo

Feature/add api logo

Author: Ville Jyrkkä

apis/client/api_backends/edit/form/editApiBackendForm.html

@@ -5,6 +5,8 @@ <h1>{{_ "apiBackends_Edit_API_Title"}}</h1>
     {{>showHelp 'api_name'}}
     {{> afQuickField name='name'}}
     <span class="help-block">{{_ "apiBackends_Title_Help"}}</span>
+    <legend>Upload logo</legend>
+    {{> uploadApiLogo apiBackend=apiBackend }}
     <legend>{{_ "apiBackends_Backend_Title"}}</legend>
     <span class="help-block">{{_ "apiBackends_Backend_Help"}}</span>
     {{> afQuickField name='backend_protocol' options="allowed"}}

apis/client/api_backends/view_api_backend/heading/heading.html

@@ -9,6 +9,7 @@
       {{> apiBackendsUsageInstructionsButton }}
     </div>
     <h1 class="page-title">
+      {{> viewApiLogo }}
       {{ apiBackend.name }}
       {{> viewApiBackendStatus apiBackend=apiBackend width="0.4"  }}
     </h1>

apis/collection/backend.js

@@ -33,6 +33,10 @@ Schemas.ApiBackendsSchema = new SimpleSchema({
     type: String,
     optional: true
   },
+  apiLogoFileId: {
+    type: String,
+    optional: true
+  },
   documentation_link: {
     type: String,
     optional: true,

apis/logo/collection/collection.js

@@ -0,0 +1,13 @@
+const ApiLogo = new FileCollection('ApiLogo', {
+  resumable: true,   // Enable built-in resumable.js upload support
+  http: [
+    { method: 'get',
+     path: '/md5/:md5',  // this will be at route "/gridfs/ApiLogos/:md5"
+     lookup: function (params, query) {  // uses express style url params
+       return { md5: params.md5 };       // a query mapping url to ApiLogos
+     }
+    }
+  ]
+});
+
+export { ApiLogo };

apis/logo/collection/server/permissions.js

@@ -0,0 +1,16 @@
+import { ApiLogo } from '/apis/logo/collection/collection';
+
+ApiLogo.allow({
+  insert: function(userId, file) {
+    return Roles.userIsInRole(userId, ['admin','manager']);
+  },
+  remove: function(userId, file) {
+    return Roles.userIsInRole(userId, ['admin','manager']);
+  },
+  read: function(userId, file) {
+    return true;
+  },
+  write: function(userId, file, fields) {
+    return true;
+  }
+});

apis/logo/server/publications.js

@@ -0,0 +1,9 @@
+import { ApiLogo } from '/apis/logo/collection/collection';
+
+Meteor.publish('allApiLogo', function() {
+  return ApiLogo.find({
+    'metadata._Resumable': {
+      $exists: false
+    }
+  });
+});

apis/logo/upload/client/resumable.js

@@ -0,0 +1,39 @@
+import { ApiLogo } from '/apis/logo/collection/collection';
+import { fileNameEndsWith } from '/lib/helperFunctions/fileNameEndsWith';
+
+Meteor.startup( function() {
+  ApiLogo.resumable.on('fileAdded', function(file) {
+    return ApiLogo.insert({
+      _id: file.uniqueIdentifier,
+      filename: file.fileName,
+      contentType: file.file.type
+    }, function(err, apiLogoFile) {
+      if (err) {
+        console.warn("File creation failed!", err);
+        return;
+      }
+
+      const acceptedExtensions = ["jpg", "jpeg", "png", "gif"];
+
+      if (fileNameEndsWith(file.file.name, acceptedExtensions)) {
+
+        // Get the id from API logo file object
+        const apiLogoFileId = file.uniqueIdentifier;
+
+        // Get apibackend id
+        const apiBackend = Session.get('currentApiBackend');
+
+        // Update logo id field
+        ApiBackends.update(apiBackend._id, {$set: { apiLogoFileId }});
+
+        sAlert.success('Logo successfully uploaded!');
+
+        return ApiLogo.resumable.upload();
+      } else {
+
+        sAlert.error('Only .jpg, .jpeg, .png, .gif are accepted.');
+      }
+
+    });
+  });
+});

apis/logo/upload/client/upload.css

@@ -0,0 +1,3 @@
+.api-logo-file {
+  margin-bottom: 1em;
+}

apis/logo/upload/client/upload.html

@@ -0,0 +1,19 @@
+<template name="uploadApiLogo">
+  <div class="api-logo-file">
+    {{#unless uploadedApiLogoFile }}
+    {{> uploadApiLogoButton }}
+    {{else}}
+    <ul class="list-group">
+      <li class="list-group-item">
+        <span class="glyphicon glyphicon-file"></span>
+        {{ uploadedApiLogoFile.filename }}
+        <span class="pull-right">
+          <a class="btn btn-xs btn-danger delete-apiLogo">
+            <span class="glyphicon glyphicon-trash"></span>
+          </a>
+        </span>
+      </li>
+    </ul>
+    {{/unless}}
+  </div>
+</template>

apis/logo/upload/client/upload.js

@@ -0,0 +1,76 @@
+import { ApiLogo } from '/apis/logo/collection/collection';
+
+Template.uploadApiLogo.onCreated(function() {
+  const instance = this;
+
+  // Subscribe to API logo
+  instance.subscribe('allApiLogo');
+
+  instance.autorun(function () {
+    const apiBackend = ApiBackends.findOne(instance.data.apiBackend._id);
+    // Save apibackend id
+    Session.set('currentApiBackend', apiBackend);
+  });
+});
+
+Template.uploadApiLogo.events({
+  'click .delete-apiLogo': function(event, instance) {
+
+    // Show confirmation dialog to user
+    const confirmation = confirm('Are you sure you want to delete this logo?');
+
+    // Check if user clicked "OK"
+    if (confirmation === true) {
+
+      // Get currentApiBackend documentationFileId
+      const apiLogoFileId = this.apiBackend.apiLogoFileId;
+
+      // Convert to Mongo ObjectID
+      const objectId = new Mongo.Collection.ObjectID(apiLogoFileId);
+
+      // Remove API logo object
+      ApiLogo.remove(objectId);
+
+      // Remove API logo file id field
+      ApiBackends.update(instance.data.apiBackend._id, {$unset: { apiLogoFileId: "" }});
+
+      sAlert.success('Logo successfully deleted!');
+
+    }
+  }
+});
+
+Template.uploadApiLogo.helpers({
+  uploadedLogoLink: function() {
+
+    const currentApiLogoFileId = this.apiBackend.apiLogoFileId;
+
+    // Convert to Mongo ObjectID
+    const objectId = new Mongo.Collection.ObjectID(currentApiLogoFileId);
+
+    // Get API logo file Object
+    const currentApiLogoFile = ApiLogo.findOne(objectId);
+
+    // Check if API logo file is available
+    if (currentApiLogoFile) {
+      // Get API logo file URL
+      return Meteor.absoluteUrl().slice(0, -1) + ApiLogo.baseURL + "/md5/" + currentApiLogoFile.md5;
+    }
+  },
+  uploadedApiLogoFile: function() {
+    const currentApiBackend = Session.get('currentApiBackend');
+
+    const currentApiLogoFileId = currentApiBackend.apiLogoFileId;
+
+    // Convert to Mongo ObjectID
+    const objectId = new Mongo.Collection.ObjectID(currentApiLogoFileId);
+
+    // Get API logo file Object
+    const currentApiLogoFile = ApiLogo.findOne(objectId);
+
+    // Check if API logo file is available
+    if (currentApiLogoFile) {
+      return currentApiLogoFile;
+    }
+  }
+});