From 2c8970c8b9c4006bcee2ce3918a9c00430149eac Mon Sep 17 00:00:00 2001
From: Stuart Laverick <appsol@users.noreply.github.com>
Date: Thu, 17 Jun 2021 11:58:43 +0100
Subject: [PATCH] Added Organisation categories to create and show views (#22)

---
 src/components/CkOrganisationDetails.vue    |  49 ++++
 src/views/organisations/Create.vue          | 107 ++++++--
 src/views/services/Create.vue               | 278 ++++++++++----------
 src/views/services/forms/EligibilityTab.vue | 134 +++++-----
 4 files changed, 340 insertions(+), 228 deletions(-)

diff --git a/src/components/CkOrganisationDetails.vue b/src/components/CkOrganisationDetails.vue
index 2f52c38e..8ebc230d 100644
--- a/src/components/CkOrganisationDetails.vue
+++ b/src/components/CkOrganisationDetails.vue
@@ -50,19 +50,58 @@
           </gov-list>
         </gov-table-cell>
       </gov-table-row>
+      <gov-table-row>
+        <gov-table-header scope="row" top>Taxonomies</gov-table-header>
+        <gov-table-cell break>
+          <gov-grid-row
+            v-for="rootTaxonomy in taxonomies"
+            :key="rootTaxonomy.id"
+          >
+            <gov-grid-column width="two-thirds">
+              <gov-heading size="m">{{ rootTaxonomy.name }}</gov-heading>
+              <ck-taxonomy-list
+                :taxonomies="rootTaxonomy.children"
+                :filteredTaxonomyIds="organisationTaxonomyIds"
+              />
+            </gov-grid-column>
+          </gov-grid-row>
+        </gov-table-cell>
+      </gov-table-row>
     </template>
   </gov-table>
 </template>
 
 <script>
+import http from "@/http";
+import CkTaxonomyList from "@/components/Ck/CkTaxonomyList.vue";
+
 export default {
   name: "CkOrganisationDetails",
+
+  components: {
+    CkTaxonomyList
+  },
+
   props: {
     organisation: {
       type: Object,
       required: true
     }
   },
+
+  data() {
+    return {
+      loading: false,
+      taxonomies: []
+    };
+  },
+
+  computed: {
+    organisationTaxonomyIds() {
+      return this.organisation.category_taxonomies.map(taxonomy => taxonomy.id);
+    }
+  },
+
   methods: {
     humanReadableSocialMedia(type) {
       switch (type) {
@@ -77,7 +116,17 @@ export default {
         case "other":
           return "Other";
       }
+    },
+    async fetchTaxonomies() {
+      this.loading = true;
+      const { data: taxonomies } = await http.get("/taxonomies/categories");
+      this.taxonomies = taxonomies.data;
+      this.loading = false;
     }
+  },
+
+  created() {
+    this.fetchTaxonomies();
   }
 };
 </script>
diff --git a/src/views/organisations/Create.vue b/src/views/organisations/Create.vue
index df18f36f..ec5c8f5f 100644
--- a/src/views/organisations/Create.vue
+++ b/src/views/organisations/Create.vue
@@ -7,26 +7,74 @@
     >
     <gov-main-wrapper>
       <gov-grid-row>
-        <gov-grid-column width="one-half">
+        <gov-grid-column width="full">
           <gov-heading size="xl">Organisations</gov-heading>
           <gov-heading size="m">Add organisation</gov-heading>
-          <gov-body
-            >General details about the organisation. To be found when searching
-            or linked from a service page.</gov-body
-          >
 
-          <organisation-form
-            :errors="form.$errors"
-            :name.sync="form.name"
-            :slug.sync="form.slug"
-            :description.sync="form.description"
-            :url.sync="form.url"
-            :email.sync="form.email"
-            :phone.sync="form.phone"
-            :social_medias.sync="form.social_medias"
-            @update:logo_file_id="form.logo_file_id = $event"
-            @clear="form.$errors.clear($event)"
-          />
+          <gov-error-summary v-if="form.$errors.any()" title="Check for errors">
+            <gov-list>
+              <li
+                v-for="(error, field) in form.$errors.all()"
+                :key="field"
+                v-text="error[0]"
+              />
+            </gov-list>
+          </gov-error-summary>
+
+          <gov-tabs @tab-changed="onTabChange" :tabs="tabs" no-router>
+            <organisation-tab title="Details" :active="isTabActive('details')">
+              <template v-slot:intro
+                >General details about the organisation. To be found when
+                searching or linked from a service page.</template
+              >
+
+              <organisation-form
+                :errors="form.$errors"
+                :name.sync="form.name"
+                :slug.sync="form.slug"
+                :description.sync="form.description"
+                :url.sync="form.url"
+                :email.sync="form.email"
+                :phone.sync="form.phone"
+                :social_medias.sync="form.social_medias"
+                @update:logo_file_id="form.logo_file_id = $event"
+                @clear="form.$errors.clear($event)"
+              />
+            </organisation-tab>
+
+            <organisation-tab
+              title="Taxonomies"
+              :active="isTabActive('taxonomies')"
+            >
+              <template v-slot:intro>
+                <gov-body>
+                  These are a list of ‘tags’ that are applied to an
+                  organisation. These tags help the organisation be found in
+                  categories and keyword searches.
+                </gov-body>
+                <gov-body>
+                  On creation of a new organisation, the admin team will select
+                  the tags that they feel represent the organisation.
+                </gov-body>
+              </template>
+              <gov-form-group
+                :invalid="form.$errors.has('category_taxonomies')"
+              >
+                <ck-taxonomy-input
+                  root="categories"
+                  :value.sync="form.category_taxonomies"
+                  @input="$emit('update:category_taxonomies', $event)"
+                  :error="form.$errors.get('category_taxonomies')"
+                  @clear="form.$errors.clear($event)"
+                />
+                <gov-error-message
+                  v-if="form.$errors.has('category_taxonomies')"
+                  v-text="form.$errors.get('category_taxonomies')"
+                  :for="category_taxonomies"
+                />
+              </gov-form-group>
+            </organisation-tab>
+          </gov-tabs>
 
           <gov-section-break size="l" />
 
@@ -43,11 +91,13 @@
 
 <script>
 import Form from "@/classes/Form";
-import OrganisationForm from "@/views/organisations/forms/OrganisationForm";
+import OrganisationTab from "./OrganisationTab";
+import OrganisationForm from "./forms/OrganisationForm";
+import CkTaxonomyInput from "@/components/Ck/CkTaxonomyInput";
 
 export default {
   name: "CreateOrganisation",
-  components: { OrganisationForm },
+  components: { OrganisationForm, OrganisationTab, CkTaxonomyInput },
   data() {
     return {
       form: new Form({
@@ -58,8 +108,13 @@ export default {
         email: "",
         phone: "",
         logo_file_id: null,
-        social_medias: []
-      })
+        social_medias: [],
+        category_taxonomies: []
+      }),
+      tabs: [
+        { id: "details", heading: "Details", active: true },
+        { id: "taxonomies", heading: "Taxonomies", active: false }
+      ]
     };
   },
   watch: {
@@ -75,6 +130,16 @@ export default {
         name: "organisations-show",
         params: { organisation: organisationId }
       });
+    },
+    onTabChange({ index }) {
+      this.tabs.forEach(tab => (tab.active = false));
+      const tabId = this.tabs[index].id;
+      this.tabs.find(tab => tab.id === tabId).active = true;
+    },
+    isTabActive(id) {
+      const tab = this.tabs.find(tab => tab.id === id);
+
+      return tab === undefined ? false : tab.active;
     }
   }
 };
diff --git a/src/views/services/Create.vue b/src/views/services/Create.vue
index cccac63d..8666b820 100644
--- a/src/views/services/Create.vue
+++ b/src/views/services/Create.vue
@@ -179,150 +179,150 @@
 </template>
 
 <script>
-  import Form from '@/classes/Form';
-  import DetailsTab from '@/views/services/forms/DetailsTab';
-  import DescriptionTab from '@/views/services/forms/DescriptionTab';
-  import AdditionalInfoTab from '@/views/services/forms/AdditionalInfoTab';
-  import UsefulInfoTab from '@/views/services/forms/UsefulInfoTab';
-  import EligibilityTab from '@/views/services/forms/EligibilityTab';
-  import ReferralTab from '@/views/services/forms/ReferralTab';
-  import TaxonomiesTab from '@/views/services/forms/TaxonomiesTab';
+import Form from "@/classes/Form";
+import DetailsTab from "@/views/services/forms/DetailsTab";
+import DescriptionTab from "@/views/services/forms/DescriptionTab";
+import AdditionalInfoTab from "@/views/services/forms/AdditionalInfoTab";
+import UsefulInfoTab from "@/views/services/forms/UsefulInfoTab";
+import EligibilityTab from "@/views/services/forms/EligibilityTab";
+import ReferralTab from "@/views/services/forms/ReferralTab";
+import TaxonomiesTab from "@/views/services/forms/TaxonomiesTab";
 
-  export default {
-    name: 'CreateService',
-    components: {
-      DetailsTab,
-      DescriptionTab,
-      AdditionalInfoTab,
-      UsefulInfoTab,
-      EligibilityTab,
-      ReferralTab,
-      TaxonomiesTab,
-    },
-    data() {
-      return {
-        form: new Form({
-          id: null,
-          organisation_id: null,
-          name: '',
-          slug: '',
-          type: 'service',
-          status: 'inactive',
-          intro: '',
-          description: '',
-          wait_time: null,
-          is_free: null,
-          fees_text: '',
-          fees_url: '',
-          testimonial: '',
-          video_embed: '',
-          url: '',
-          contact_name: '',
-          contact_phone: '',
-          contact_email: '',
-          show_referral_disclaimer: false,
-          referral_method: 'none',
-          referral_button_text: '',
-          referral_email: '',
-          referral_url: '',
-          criteria: {
-            age_group: '',
-            disability: '',
-            employment: '',
-            gender: '',
-            housing: '',
-            income: '',
-            language: '',
-            other: '',
-          },
-          useful_infos: [
-            {
-              title: '',
-              description: '',
-              order: 1,
-            },
-          ],
-          offerings: [],
-          social_medias: [],
-          gallery_items: [],
-          category_taxonomies: [],
-          eligibility_types: {
-            taxonomies: [],
-            custom: {},
-          },
-          logo_file_id: null,
-        }),
-        errors: {},
-        tabs: [
-          { id: 'details', heading: 'Details', active: true },
-          { id: 'additional-info', heading: 'Additional info', active: false },
-          { id: 'useful-info', heading: 'Good to know', active: false },
-          { id: 'eligibility', heading: 'Eligibility', active: false },
-          { id: 'taxonomies', heading: 'Taxonomies', active: false },
-          { id: 'description', heading: 'Description', active: false },
-          { id: 'referral', heading: 'Referral', active: false },
+export default {
+  name: "CreateService",
+  components: {
+    DetailsTab,
+    DescriptionTab,
+    AdditionalInfoTab,
+    UsefulInfoTab,
+    EligibilityTab,
+    ReferralTab,
+    TaxonomiesTab
+  },
+  data() {
+    return {
+      form: new Form({
+        id: null,
+        organisation_id: null,
+        name: "",
+        slug: "",
+        type: "service",
+        status: "inactive",
+        intro: "",
+        description: "",
+        wait_time: null,
+        is_free: null,
+        fees_text: "",
+        fees_url: "",
+        testimonial: "",
+        video_embed: "",
+        url: "",
+        contact_name: "",
+        contact_phone: "",
+        contact_email: "",
+        show_referral_disclaimer: false,
+        referral_method: "none",
+        referral_button_text: "",
+        referral_email: "",
+        referral_url: "",
+        criteria: {
+          age_group: "",
+          disability: "",
+          employment: "",
+          gender: "",
+          housing: "",
+          income: "",
+          language: "",
+          other: ""
+        },
+        useful_infos: [
+          {
+            title: "",
+            description: "",
+            order: 1
+          }
         ],
-      };
-    },
-    computed: {
-      allowedTabs() {
-        if (!this.auth.isGlobalAdmin) {
-          const taxonomiesTabIndex = this.tabs.findIndex(
-            (tab) => tab.id === 'taxonomies'
-          );
-          const tabs = this.tabs.slice();
-          tabs.splice(taxonomiesTabIndex, 1);
-
-          return tabs;
-        }
+        offerings: [],
+        social_medias: [],
+        gallery_items: [],
+        category_taxonomies: [],
+        eligibility_types: {
+          taxonomies: [],
+          custom: {}
+        },
+        logo_file_id: null
+      }),
+      errors: {},
+      tabs: [
+        { id: "details", heading: "Details", active: true },
+        { id: "additional-info", heading: "Additional info", active: false },
+        { id: "useful-info", heading: "Good to know", active: false },
+        { id: "eligibility", heading: "Eligibility", active: false },
+        { id: "taxonomies", heading: "Taxonomies", active: false },
+        { id: "description", heading: "Description", active: false },
+        { id: "referral", heading: "Referral", active: false }
+      ]
+    };
+  },
+  computed: {
+    allowedTabs() {
+      if (!this.auth.isGlobalAdmin) {
+        const taxonomiesTabIndex = this.tabs.findIndex(
+          tab => tab.id === "taxonomies"
+        );
+        const tabs = this.tabs.slice();
+        tabs.splice(taxonomiesTabIndex, 1);
 
-        return this.tabs;
-      },
-    },
-    methods: {
-      async onSubmit() {
-        const data = await this.form.post('/services', (config, data) => {
-          // Remove useful info if only item and empty.
-          if (
-            data.useful_infos.length === 1 &&
-            data.useful_infos[0].title === '' &&
-            data.useful_infos[0].description === ''
-          ) {
-            data.useful_infos = [];
-          }
-        });
-        const serviceId = data.data.id;
+        return tabs;
+      }
 
-        // Refetch the user as new permissions added for the new service.
-        await this.auth.fetchUser();
+      return this.tabs;
+    }
+  },
+  methods: {
+    async onSubmit() {
+      const data = await this.form.post("/services", (config, data) => {
+        // Remove useful info if only item and empty.
+        if (
+          data.useful_infos.length === 1 &&
+          data.useful_infos[0].title === "" &&
+          data.useful_infos[0].description === ""
+        ) {
+          data.useful_infos = [];
+        }
+      });
+      const serviceId = data.data.id;
 
-        this.$router.push({
-          name: 'services-post-create',
-          params: { service: serviceId },
-        });
-      },
-      onTabChange({ index }) {
-        this.tabs.forEach((tab) => (tab.active = false));
-        const tabId = this.allowedTabs[index].id;
-        this.tabs.find((tab) => tab.id === tabId).active = true;
-      },
-      onNext() {
-        const currentTabIndex = this.allowedTabs.findIndex(
-          (tab) => tab.active === true
-        );
-        this.tabs.forEach((tab) => (tab.active = false));
-        const newTabId = this.allowedTabs[currentTabIndex + 1].id;
-        this.tabs.find((tab) => tab.id === newTabId).active = true;
-        this.scrollToTop();
-      },
-      scrollToTop() {
-        document.getElementById('main-content').scrollIntoView();
-      },
-      isTabActive(id) {
-        const tab = this.allowedTabs.find((tab) => tab.id === id);
+      // Refetch the user as new permissions added for the new service.
+      await this.auth.fetchUser();
 
-        return tab === undefined ? false : tab.active;
-      },
+      this.$router.push({
+        name: "services-post-create",
+        params: { service: serviceId }
+      });
+    },
+    onTabChange({ index }) {
+      this.tabs.forEach(tab => (tab.active = false));
+      const tabId = this.allowedTabs[index].id;
+      this.tabs.find(tab => tab.id === tabId).active = true;
     },
-  };
+    onNext() {
+      const currentTabIndex = this.allowedTabs.findIndex(
+        tab => tab.active === true
+      );
+      this.tabs.forEach(tab => (tab.active = false));
+      const newTabId = this.allowedTabs[currentTabIndex + 1].id;
+      this.tabs.find(tab => tab.id === newTabId).active = true;
+      this.scrollToTop();
+    },
+    scrollToTop() {
+      document.getElementById("main-content").scrollIntoView();
+    },
+    isTabActive(id) {
+      const tab = this.allowedTabs.find(tab => tab.id === id);
+
+      return tab === undefined ? false : tab.active;
+    }
+  }
+};
 </script>
diff --git a/src/views/services/forms/EligibilityTab.vue b/src/views/services/forms/EligibilityTab.vue
index e764cd1e..1e1b816b 100644
--- a/src/views/services/forms/EligibilityTab.vue
+++ b/src/views/services/forms/EligibilityTab.vue
@@ -33,82 +33,80 @@
 </template>
 
 <script>
-  import http from '@/http';
-  import ServiceEligibilityInput from '../inputs/ServiceEligibilityInput';
+import http from "@/http";
+import ServiceEligibilityInput from "../inputs/ServiceEligibilityInput";
 
-  export default {
-    name: 'EligibilityTab',
-    components: { ServiceEligibilityInput },
+export default {
+  name: "EligibilityTab",
+  components: { ServiceEligibilityInput },
 
-    props: {
-      serviceEligibilityTypes: {
-        required: true,
-        type: Object,
-      },
-      type: {
-        required: true,
-        type: String,
-      },
-      errors: {
-        required: true,
-      },
+  props: {
+    serviceEligibilityTypes: {
+      required: true,
+      type: Object
     },
-
-    data() {
-      return {
-        loading: false,
-        eligibilityTypes: [],
-      };
+    type: {
+      required: true,
+      type: String
     },
+    errors: {
+      required: true
+    }
+  },
 
-    methods: {
-      async fetchServiceEligibilites() {
-        this.loading = true;
-        const { data: eligibilityTypes } = await http.get(
-          '/taxonomies/service-eligibilities'
-        );
-        this.eligibilityTypes = eligibilityTypes.data;
-        this.loading = false;
-      },
-      updateServiceEligibilityTaxonomies({ taxonomy, enabled }) {
-        const updatedServiceEligibilityTypes = {
-          ...this.serviceEligibilityTypes,
-        };
+  data() {
+    return {
+      loading: false,
+      eligibilityTypes: []
+    };
+  },
 
-        if (enabled) {
-          if (
-            !updatedServiceEligibilityTypes.taxonomies.includes(taxonomy.id)
-          ) {
-            updatedServiceEligibilityTypes.taxonomies.push(taxonomy.id);
-          }
-        } else if (
-          updatedServiceEligibilityTypes.taxonomies.includes(taxonomy.id)
-        ) {
-          const index = updatedServiceEligibilityTypes.taxonomies.indexOf(
-            taxonomy.id
-          );
-          updatedServiceEligibilityTypes.taxonomies.splice(index, 1);
-        }
+  methods: {
+    async fetchServiceEligibilites() {
+      this.loading = true;
+      const { data: eligibilityTypes } = await http.get(
+        "/taxonomies/service-eligibilities"
+      );
+      this.eligibilityTypes = eligibilityTypes.data;
+      this.loading = false;
+    },
+    updateServiceEligibilityTaxonomies({ taxonomy, enabled }) {
+      const updatedServiceEligibilityTypes = {
+        ...this.serviceEligibilityTypes
+      };
 
-        this.$emit(
-          'update:serviceEligibilityTypes',
-          updatedServiceEligibilityTypes
-        );
-      },
-      updateServiceEligibilityCustom({ customTaxonomy, customValue }) {
-        const updatedServiceEligibilityTypes = {
-          ...this.serviceEligibilityTypes,
-        };
-        updatedServiceEligibilityTypes.custom[customTaxonomy] = customValue;
-        this.$emit(
-          'update:serviceEligibilityTypes',
-          updatedServiceEligibilityTypes
+      if (enabled) {
+        if (!updatedServiceEligibilityTypes.taxonomies.includes(taxonomy.id)) {
+          updatedServiceEligibilityTypes.taxonomies.push(taxonomy.id);
+        }
+      } else if (
+        updatedServiceEligibilityTypes.taxonomies.includes(taxonomy.id)
+      ) {
+        const index = updatedServiceEligibilityTypes.taxonomies.indexOf(
+          taxonomy.id
         );
-      },
-    },
+        updatedServiceEligibilityTypes.taxonomies.splice(index, 1);
+      }
 
-    created() {
-      this.fetchServiceEligibilites();
+      this.$emit(
+        "update:serviceEligibilityTypes",
+        updatedServiceEligibilityTypes
+      );
     },
-  };
+    updateServiceEligibilityCustom({ customTaxonomy, customValue }) {
+      const updatedServiceEligibilityTypes = {
+        ...this.serviceEligibilityTypes
+      };
+      updatedServiceEligibilityTypes.custom[customTaxonomy] = customValue;
+      this.$emit(
+        "update:serviceEligibilityTypes",
+        updatedServiceEligibilityTypes
+      );
+    }
+  },
+
+  created() {
+    this.fetchServiceEligibilites();
+  }
+};
 </script>