Ensure we display that a Dojo is inactive (#252)

* Ensure we display that a Dojo is inactive

* Linting

* Bump cp-translations

Author: Wardormeur

package.json

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

src/dojos/cd-dojo-details.vue

@@ -31,7 +31,7 @@
           <a v-if="dojoDetails.googleGroup" class="cd-dojo-details__social-media-icon fa fa-2x fa-google cd-dojo-details__google-group sm-icon" aria-hidden="true" :href="dojoDetails.googleGroup"></a>
         </info-column-section>
       </info-column>
-      <div class="cd-dojo-details__main_content">
+      <div class="cd-dojo-details__main_content" v-if="isActive">
         <dropdown v-if="isDojoAdmin || isTicketingAdmin" class="cd-dojo-details__settings-dropdown" icon="gear" align="right">
           <li v-if="isDojoAdmin"><a :href="`/dashboard/edit-dojo/${dojoDetails.id}`"><i class="fa fa-pencil"></i>{{ $t('Edit Dojo') }}</a></li>
           <li v-if="isDojoAdmin"><a :href="`/dashboard/my-dojos/${dojoDetails.id}/users`"><i class="fa fa-users"></i>{{ $t('Manage Users') }}</a></li>
@@ -87,6 +87,10 @@
           </div>
         </section>
       </div>
+      <div class="cd-dojo-details__main_content" v-else>
+        <h2>{{ $t('This Dojo is now inactive.') }}</h2>
+        <h3 v-html="$t('Click {openLink}here{closeLink} to look for an active Dojo.',{ openLink: `<a href='/find'>`, closeLink: '</a>' })"></h3>
+      </div>
     </div>
   </div>
 </template>
@@ -210,6 +214,9 @@
       isTicketingAdmin() {
         return this.isCDFAdmin || UsersDojosUtil.hasPermission(this.usersDojos, 'ticketing-admin');
       },
+      isActive() {
+        return !this.dojoDetails.deleted && this.dojoDetails.stage !== 4;
+      },
     },
     methods: {
       async loadDojoDetails() {

test/unit/specs/dojos/cd-dojo-details.spec.js

@@ -122,6 +122,42 @@ describe('Dojo details component', () => {
     });
   });
 
+  describe('computed.isActive', () => {
+    it('should return true', () => {
+      // ARRANGE
+      const vm = vueUnitHelper(DojoDetailsWithMocks);
+      vm.dojoDetails = {
+        stage: 1,
+        deleted: 0,
+      };
+
+      // ASSERT
+      expect(vm.isActive).to.be.true;
+    });
+    it('should return false if the dojo is deleted', () => {
+      // ARRANGE
+      const vm = vueUnitHelper(DojoDetailsWithMocks);
+      vm.dojoDetails = {
+        stage: 1,
+        deleted: 1,
+      };
+
+      // ASSERT
+      expect(vm.isActive).to.be.false;
+    });
+    it('should return false if the stage is inactive', () => {
+      // ARRANGE
+      const vm = vueUnitHelper(DojoDetailsWithMocks);
+      vm.dojoDetails = {
+        stage: 4,
+        deleted: 0,
+      };
+
+      // ASSERT
+      expect(vm.isActive).to.be.false;
+    });
+  });
+
   describe('computed.urlSlug', () => {
     it('should build the urlSlug from path parameters', () => {
       // ARRANGE

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].128:
-  version "1.0.128"
-  resolved "https://registry.yarnpkg.com/cp-translations/-/cp-translations-1.0.128.tgz#2f7c5f09997e44a0137e976263e3a1779d747e07"
-  integrity sha512-gpIIvn9sjSyGpWPwYoFwMZQSKdaZuFY7y3F/72W0nwW9LJOFbK1yN8q2je3udYAtVHNOX0XlHuLQpRAo8yCx2A==
+[email protected].130:
+  version "1.0.130"
+  resolved "https://registry.yarnpkg.com/cp-translations/-/cp-translations-1.0.130.tgz#0b0063ba53e398d56005de30b58bc216f8c03f18"
+  integrity sha512-nRdYKAjo5BZXs0iJtyubgdlZEDaD8rt1XPfzFjv6Z2lllszhcoOiW0LyF+VPAJBvbh8rlQceUQXdMlhgAXwf6w==
 
 crc32-stream@^2.0.0:
   version "2.0.0"