Feature/dojo events ics (#248)

* Add link to download ics

* Hide the link if there are no future events

* Fix linting

* Fix unit test

* Remove trace of the zoneName

* Remove Beta now that I'm fairly sure time will work

* Rework the UI
Add unit tests & e2e tests

* Add message describing the action taken while clicking the copy button

* Add ga tracking

* Update cp-translations

* Add yarn lock

Author: Wardormeur

cypress/integration/dojos/dojo-details_spec.js

@@ -0,0 +1,19 @@
+import page from '../../pages/dojo-details';
+
+describe('Dojos details', () => {
+  beforeEach(() => {
+    cy.server();
+    cy.route('/api/2.0/users/instance', 'fx:parentLoggedIn').as('loggedIn');
+  });
+
+  it('should display the calendar', () => {
+    cy.visit('/dojos/ie/dublin/dublin-ninja-kids');
+    cy.wait('@loggedIn');
+    cy.get(page.column.calendarLink).should('be.visible');
+    cy.get(page.column.calendarLink).should('have.text', 'Add to your calendar');
+    cy.get(page.column.calendarLink).click();
+    cy.get(page.column.calendarInput).should('be.visible');
+    cy.get(page.column.calendarCopyBtn).should('be.visible');
+    cy.get(page.column.calendarOpenBtn).should('be.visible');
+  });
+});

cypress/pages/dojo-details.js

@@ -1,3 +1,9 @@
 export default {
   name: '.cd-dojo-details__name',
+  column: {
+    calendarLink: '.cd-info-column-section.cd-dojo-details__left-column-section .cd-ics-link summary',
+    calendarInput: '.cd-info-column-section.cd-dojo-details__left-column-section .cd-ics-link input',
+    calendarCopyBtn: '.cd-info-column-section.cd-dojo-details__left-column-section .cd-ics-link button',
+    calendarOpenBtn: '.cd-info-column-section.cd-dojo-details__left-column-section .cd-ics-link a',
+  },
 };

package.json

@@ -22,7 +22,7 @@
   "dependencies": {
     "@coderdojo/cd-common": "1.1.11",
     "bootstrap": "^3.4.1",
-    "cp-translations": "1.0.126",
+    "cp-translations": "1.0.127",
     "font-awesome": "^4.7.0",
     "handlebars": "^4.1.0",
     "js-cookie": "^2.1.4",

src/dojos/cd-dojo-details.vue

@@ -13,6 +13,7 @@
       <info-column class="cd-dojo-details__left-column">
         <info-column-section class="cd-dojo-details__left-column-section" icon="clock-o" :header="$t('Time')">
           {{ buildDojoFrequency(dojoDetails) }}
+          <ics-link :dojo-id="dojoDetails.id"/>
         </info-column-section>
         <info-column-section class="cd-dojo-details__left-column-section" icon="map-marker" :header="$t('Location')">
           {{ address }}
@@ -96,6 +97,7 @@
   import InfoColumn from '@/common/cd-info-column';
   import Dropdown from '@/common/cd-dropdown';
   import InfoColumnSection from '@/common/cd-info-column-section';
+  import IcsLink from '@/events/cd-ics-link';
   import cdUrlFormatter from '@/common/filters/cd-url-formatter';
   import UserService from '@/users/service';
   import UsersDojosService from '@/usersDojos/service';
@@ -117,6 +119,7 @@
       eventsList,
       InfoColumn,
       InfoColumnSection,
+      IcsLink,
       Dropdown,
       StaticMap,
     },

src/events/cd-event-list.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="cd-event-list" >
-    <div class="cd-event-list__heading" >{{ $t('Upcoming Events') }}</div>
+    <div class="cd-event-list__heading" >
+      <h4>{{ $t('Upcoming Events') }}</h4>
+    </div>
     <div v-if="!hasFutureEvents" class="cd-event-list__event">
       <div class="cd-event-list__no-events">
         <div class="cd-event-list__no-events-header" v-if="!hasPastEvents">
@@ -164,12 +166,17 @@
 
   .cd-event-list {
      &__heading {
-      color: #000;
-      font-size: @font-size-large;
-      margin: 0 0 16px 0;
-      font-weight: bold;
+      display: flex;
+      justify-content: space-between;
       border-bottom: 1px solid #bebebe;
-      padding-bottom: 8px;
+      margin-bottom: 16px;
+      h4 {
+        color: #000;
+        font-size: @font-size-large;
+        margin: 0 0 8px 0;
+        font-weight: bold;
+        line-height: 1;
+      }
     }
     &__event {
       border-style: solid;

src/events/cd-ics-link.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="cd-ics-link">
+    <details class="input-group">
+      <summary ref="summary">{{ $t('Add to your calendar') }}</summary>
+      <input type="text" name="httpUrl" :value="httpUrl" ref="httpUrl" class="form-control"/>
+      <div class="input-group-append btn-group">
+        <button name="copy" class="btn btn-default" v-ga-track-click="'ics-clipboard'" @click="toClipboard"><i class="fa fa-copy"></i></button>
+        <a :href="webcalUrl" class="btn btn-default" name="open" role="button" v-ga-track-click="'ics-webcal'"><i class="fa fa-external-link"></i></a>
+      </div>
+      <p :class="[copied ? 'cd-ics-link__copy-label--hidden' : 'cd-ics-link__copy-label']">{{ $t('iCalendar feed copied!') }}</p>
+    </details>
+  </div>
+</template>
+<script>
+  import moment from 'moment';
+
+  export default {
+    name: 'IcsLink',
+    props: ['dojoId'],
+    data() {
+      return {
+        copied: false,
+      };
+    },
+    methods: {
+      toggleCopy() {
+        this.copied = true;
+        setTimeout(() => {
+          this.copied = false;
+        }, 2000);
+      },
+      toClipboard() {
+        this.$refs.httpUrl.focus();
+        this.$refs.httpUrl.select();
+        // Clipboard API requires permission, this doesn't :O
+        document.execCommand('copy');
+        this.toggleCopy();
+      },
+    },
+    computed: {
+      currentDomain() {
+        return window.origin;
+      },
+      host() {
+        return window.location.host;
+      },
+      webcalUrl() {
+        return `webcal://${this.host}${this.url}`;
+      },
+      httpUrl() {
+        return `${this.currentDomain}${this.url}`;
+      },
+      url() {
+        const afterDate = moment().unix();
+        const utcOffset = moment().utcOffset();
+        return `/api/3.0/dojos/${this.dojoId}/events.ics?query[status]=published&query[afterDate]=${afterDate}&query[utcOffset]=${utcOffset}`;
+      },
+    },
+  };
+</script>
+<style scoped lang="less">
+  .cd-ics-link {
+    input {
+      max-width: 170px;
+      border-right-width: 0px;
+    }
+    .btn-group {
+      .btn:first-child {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+    &__copy-label {
+      transition: opacity 1s ease-out;
+      opacity: 0;
+      overflow: hidden;
+      position: relative;
+      &--hidden {
+        opacity: 1;
+      }
+    }
+  }
+</style>

test/unit/specs/events/cd-ics-link.spec.js

@@ -0,0 +1,69 @@
+import vueUnitHelper from 'vue-unit-helper';
+import IcsLink from '@/events/cd-ics-link';
+import TimeShift from 'timeshift-js';
+
+describe('ICS link component', () => {
+  let sandbox;
+  before(() => {
+    sandbox = sinon.sandbox.create();
+  });
+  describe('computed', () => {
+    describe('url', () => {
+      it('should return the url to recover the dojo events', () => {
+        const vm = vueUnitHelper(IcsLink);
+        Date = TimeShift.Date; // eslint-disable-line no-global-assign
+        TimeShift.setTimezoneOffset(-120); // UTC+2 (Italy, summer time)
+        TimeShift.setTime(1501079400000); // 2017-07-26 16:30:00 GMT+02:00
+        vm.dojoId = 1;
+
+        expect(vm.url).to.match(/\/api\/3\.0\/dojos\/1\/events\.ics\?query\[status\]=published&query\[afterDate\]=1501079400&query\[utcOffset\]=120/);
+      });
+    });
+    describe('httpUrl', () => {
+      it('should return the full url to recover the dojo events', () => {
+        const vm = vueUnitHelper(IcsLink);
+        vm.url = '/banana';
+        expect(vm.httpUrl).to.match(/http:\/\/localhost:(\d)+\/banana/);
+      });
+    });
+    describe('webcalUrl', () => {
+      it('should return the full url to load using webcal', () => {
+        const vm = vueUnitHelper(IcsLink);
+        vm.url = '/banana';
+        expect(vm.webcalUrl).to.match(/webcal:\/\/localhost:(\d)+\/banana/);
+      });
+    });
+  });
+  describe('methods', () => {
+    describe('toClipboard', () => {
+      it('should focus the input field and copy its content', () => {
+        const vm = vueUnitHelper(IcsLink);
+        vm.$refs = {
+          httpUrl: {
+            focus: sandbox.stub(),
+            select: sandbox.stub(),
+          },
+        };
+        vm.toggleCopy = sandbox.stub();
+        const spy = sandbox.spy(document, 'execCommand');
+        vm.toClipboard();
+        expect(vm.$refs.httpUrl.focus).to.have.been.calledOnce;
+        expect(vm.$refs.httpUrl.select).to.have.been.calledOnce;
+        expect(spy).to.have.been.calledWith('copy');
+        expect(vm.toggleCopy).to.have.been.calledOnce;
+      });
+    });
+    describe('toggleCopy', () => {
+      it('should switch copy over a 2 second period', (done) => {
+        const vm = vueUnitHelper(IcsLink);
+        vm.copied = false;
+        vm.toggleCopy();
+        expect(vm.copied).to.be.true;
+        setTimeout(() => {
+          expect(vm.copied).to.be.false;
+          done();
+        }, 2000);
+      }).timeout(3000);
+    });
+  });
+});

yarn.lock

@@ -1988,10 +1988,10 @@ cosmiconfig@^2.1.0, cosmiconfig@^2.1.1:
     parse-json "^2.2.0"
     require-from-string "^1.1.0"
 
-[email protected].126:
-  version "1.0.126"
-  resolved "https://registry.yarnpkg.com/cp-translations/-/cp-translations-1.0.126.tgz#1f3be1afa4838a854701ad7c893ad3b9cf18680d"
-  integrity sha512-OL1g2z+7qniZC+tawAgOir8qyiJkmYCcDALiFIB+hG+GJAzOY/Bm9KmtMqhf7ZesCCDqyyCdJ18m6vvBsVLEuQ==
+[email protected].127:
+  version "1.0.127"
+  resolved "https://registry.yarnpkg.com/cp-translations/-/cp-translations-1.0.127.tgz#098101b97e42a060bf4bbbbeaa3ca320fc25f86b"
+  integrity sha512-ytwYky4bg36D9gIPPkz5IXKp6w20umBtaMp05E+DTKgDaNgO0rEZZQQ1oLLlF0cAyKssk6zkr0EG4ab8vDv+Dg==
 
 crc32-stream@^2.0.0:
   version "2.0.0"