Merge pull request #339 from Digipalvelutehdas/feature/organization-logo-upload

Add Logo Upload on Organization Settings

Author: marla-singer

core/lib/i18n/en.i18n.json

@@ -414,6 +414,8 @@
   "organizationRemoveManagers_description": "Are you sure you want to remove this user as a manager?",
   "organizationRemoveManagers_removeButton": "Remove",
   "organizationRemoveManagers_title": "Remove user as a manager",
+  "organizationSettings_uploadLogo_heading": "Upload logo",
+  "organizationSettings_uploadLogoText": "You can upload a logo for your organization. The logo will appear in the catalogue and on the single organization profile.",
   "organizationSettingsDelete_buttonText_delete": "Delete",
   "organizationSettingsDelete_text_information": "The organization information will be removed and this action cannot be undone.",
   "organizationSettingsDelete_title": "Delete the Organization profile",
@@ -824,6 +826,9 @@
   "uploadApiLogoButton": "Upload logo",
   "uploadApiLogo_confirm_delete": "Are you sure you want to delete this logo?",
   "uploadApiLogo_successfully_deleted": "Logo successfully deleted!",
+  "uploadOrganizationLogoButton": "Upload logo",
+  "uploadOrganizationLogo_confirm_delete": "Are you sure you want to delete this logo?",
+  "uploadOrganizationLogo_successfully_deleted": "Logo successfully deleted!",
   "uploadProjectLogoButton_uploadButton_uploadLogo": "Upload Logo",
   "uploadCoverPhoto_confirm_delete": "Cover photo area will show primary branding color after photo has been deleted. The image will be removed from the collection.",
   "uploadCoverPhoto_acceptedExtensions": "Only .jpg, .jpeg, .png and .gif file formats are allowed.",

organizations/client/profile/settings/settings.html

@@ -10,6 +10,14 @@ <h3 class="panel-title">
                 </h3>
               </div>
               <div class="panel-body">
+                <h3>
+                  {{_ "organizationSettings_uploadLogo_heading" }}
+                </h3>
+                <p>
+                  {{_ "organizationSettings_uploadLogoText" }}
+                </p>
+                {{> uploadOrganizationLogo organization=organization }}
+                <hr class="panel-hr" />
                 {{> addOrganizationManagerForm organization=organization }}
                 {{> organizationManagersList organization=organization }}
               </div>

organizations/logo/client/resumable.js …izations/logo/client/upload/resumable.jsorganizations/logo/client/resumable.js renamed to organizations/logo/client/upload/resumable.js organizations/logo/client/resumable.js renamed to organizations/logo/client/upload/resumable.js

@@ -0,0 +1,7 @@
+.organization-logo-file {
+  margin-bottom: 1em;
+}
+
+.organization-logo-file .fa {
+  vertical-align: 0;
+}

organizations/logo/client/upload/upload.css

@@ -0,0 +1,19 @@
+<template name="uploadOrganizationLogo">
+  <div class="organization-logo-file">
+    {{# unless uploadedOrganizationLogoFile }}
+      {{> uploadOrganizationLogoButton }}
+    {{ else }}
+    <ul class="list-group">
+      <li class="list-group-item">
+        <i class="fa fa-file-text-o" aria-hidden="true"></i>
+        {{ uploadedOrganizationLogoFile.filename }}
+        <span class="pull-right">
+          <a class="btn btn-xs btn-danger delete-organizationLogo">
+            <i class="fa fa-trash-o fa-lg" aria-hidden="true"></i>
+          </a>
+        </span>
+      </li>
+    </ul>
+    {{/ unless }}
+  </div>
+</template>

organizations/logo/client/upload/upload.html

@@ -0,0 +1,65 @@
+/* eslint-env browser */
+import { Template } from 'meteor/templating';
+import { TAPi18n } from 'meteor/tap:i18n';
+import { Mongo } from 'meteor/mongo';
+import { sAlert } from 'meteor/juliancwirko:s-alert';
+
+import OrganizationLogo from '/organizations/logo/collection/collection';
+import Organizations from '../../../collection';
+
+Template.uploadOrganizationLogo.onCreated(function () {
+  const instance = this;
+
+  // Subscribe to Organization logo
+  instance.subscribe('allOrganizationLogo');
+});
+
+Template.uploadOrganizationLogo.helpers({
+  uploadedOrganizationLogoFile () {
+    const organizationLogoFileId = Organizations.findOne().organizationLogoFileId;
+
+    let organizationLogoFile;
+
+    if (organizationLogoFileId) {
+      // Convert to Mongo ObjectID
+      const objectId = new Mongo.Collection.ObjectID(organizationLogoFileId);
+
+      // Get Organization logo file Object
+      organizationLogoFile = OrganizationLogo.findOne(objectId);
+    }
+    return organizationLogoFile;
+  },
+});
+
+Template.uploadOrganizationLogo.events({
+  'click .delete-organizationLogo': function (event, templateInstance) {
+    // Show confirmation dialog to user
+    // eslint-disable-next-line no-alert
+    const confirmation = confirm(TAPi18n.__('uploadOrganizationLogo_confirm_delete'));
+
+    const organization = templateInstance.data.organization;
+
+    // Check if user clicked "OK"
+    if (confirmation === true) {
+      // Get organizationLogoFileId from organization
+      const organizationLogoFileId = organization.organizationLogoFileId;
+
+      // Convert to Mongo ObjectID
+      const objectId = new Mongo.Collection.ObjectID(organizationLogoFileId);
+
+      // Remove Organization logo object
+      OrganizationLogo.remove(objectId);
+
+      // Remove Organization logo file id field
+      Organizations.update(organization._id, {
+        $unset: { organizationLogoFileId: '' },
+      });
+
+      // Get deletion success message
+      const message = TAPi18n.__('uploadOrganizationLogo_successfully_deleted');
+
+      sAlert.success(message);
+    }
+  },
+});
+

organizations/logo/client/upload/upload.js

@@ -0,0 +1,5 @@
+<template name="uploadOrganizationLogoButton">
+  <button class="btn btn-primary fileBrowse">
+    {{_ "uploadOrganizationLogoButton" }}
+  </button>
+</template>

organizations/logo/client/upload/uploadButton/uploadButton.html

@@ -0,0 +1,8 @@
+import { Template } from 'meteor/templating';
+import OrganizationLogo from '/organizations/logo/collection/collection';
+import $ from 'jquery';
+
+Template.uploadOrganizationLogoButton.onRendered(() => {
+  // Assign resumable browse to element
+  OrganizationLogo.resumable.assignBrowse($('.fileBrowse'));
+});