Merge Rc changes into ivory

LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/Contribute.vue

@@ -432,7 +432,7 @@
                 return this.resourceDetails.resourceLicenceId > 0;
             },
             locationTabComplete(): boolean {
-                return this.resourceDetails.resourceCatalogueId > 0;
+                return this.resourceDetails.resourceCatalogueId > 1;
             },
             certificateTabComplete(): boolean {
                 return this.resourceDetails.certificateEnabled !== null;

LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeAssessmentSettings.vue

@@ -74,9 +74,7 @@
                                 <ckeditorwithhint v-on:blur="setEndGuidance"
                                                   v-on:inputValidity="setGuidanceValidity"
                                                   :maxLength="1000"
-                                                  :initialValue="endGuidance"
-                                                  :for="guidance"
-                                                  :id="guidance"/>
+                                                  :initialValue="endGuidance"/>
                             </div>
                             <div class="tip">
                                 <h3>Tip</h3>

LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeLocationTab.vue

@@ -7,33 +7,57 @@
 
             <!-- The following heading has an id to allow the CatalogueSelector component to reference this (using aria-labelledby) -->
             <h3 id="primary-catalogue-heading" class="nhsuk-heading-m mt-5 mb-10">Primary catalogue</h3>
-            
+
             <div class="contribute-location-tab-catalogue-block">
-                <CatalogueView v-if="resourceDetails.resourceCatalogueId > 0"
-                               v-bind:catalogue="savedCatalogue"
-                               v-on:change-click="showSelector"
-                               v-bind:selection-in-progress="selectionInProgress"
-                               v-bind:allow-change="allowCatalogueChange"/>
-                <div class="contribute-location-tab-divider" v-if="isDividerVisible"></div>
-                <CatalogueSelector v-if="selectionInProgress"
-                                   v-bind:resource-details="resourceDetails"
-                                   v-bind:user-catalogues="userCatalogues"
-                                   v-on:save="hideSelector"/>
+                <!-- When catalogue has a value -->
+                <template v-if="savedCatalogue">
+                    <CatalogueView v-if="resourceDetails.resourceCatalogueId >= 0"
+                                   :catalogue="savedCatalogue"
+                                   @change-click="showSelector"
+                                   :selection-in-progress="selectionInProgress"
+                                   :allow-change="allowCatalogueChange"
+                                   :resourceCatalogueId=resourceDetails.resourceCatalogueId />
+                    <div class="contribute-location-tab-divider"
+                         v-if="isDividerVisible"></div>
+                    <CatalogueSelector v-if="selectionInProgress"
+                                       :resource-details="resourceDetails"
+                                       :user-catalogues="userCatalogues"
+                                       @save="hideSelector"
+                                       :resourceCatalogueId=resourceDetails.resourceCatalogueId />
+                </template>
+
+                <!-- When catalogue has no value -->
+                <div v-else>                 
+                    <CatalogueView :catalogue="savedCatalogue"
+                                   @change-click="showSelector"
+                                   :selection-in-progress="selectionInProgress"
+                                   :allow-change="allowCatalogueChange"
+                                   :resourceCatalogueId="0" />
+                    <div class="contribute-location-tab-divider"
+                         v-if="isDividerVisible"></div>
+                    <CatalogueSelector v-if="selectionInProgress"
+                                       :resource-details="resourceDetails"
+                                       :user-catalogues="userCatalogues"
+                                       @save="hideSelector"
+                                       :resourceCatalogueId="0" />
+                </div>
             </div>
+
+
+
         </div>
     </div>
 </template>
-
 <script lang="ts">
     import Vue, { PropOptions } from 'vue';
 
     import DescriptionEditor from "./components/DescriptionEditor.vue";
     import CatalogueSelector from "./components/CatalogueSelector.vue";
     import CatalogueView from "./components/CatalogueView.vue";
-    
+
     import { CatalogueModel } from "../models/catalogueModel";
     import { ContributeResourceDetailModel } from '../models/contribute/contributeResourceModel';
-    
+
     export default Vue.extend({
         props: {
             resourceDetails: { type: Object } as PropOptions<ContributeResourceDetailModel>,
@@ -57,24 +81,29 @@
                 if (this.resourceDetails.resourceCatalogueId > 0) {
                     return this.userCatalogues.find(c => c.nodeId == this.resourceDetails.resourceCatalogueId);
                 }
+
                 return new CatalogueModel({ nodeId: 0 });
             },
             resourceDescription(): string {
-                return this.resourceDetails.description;
+                return this.resourceDetails.description; 
             },
             isDividerVisible(): boolean {
-                return this.resourceDetails.resourceCatalogueId > 0 && this.selectionInProgress;
+                return this.resourceDetails.resourceCatalogueId >= 0 && this.selectionInProgress;
             },
             allowCatalogueChange(): boolean {
                 return (this.resourceDetails.resourceCatalogueId === this.resourceDetails.nodeId) || // allow if user is contributing into the catalogue root
-                    !Boolean(this.$route.query.initialCreate);                                       // or if the user is editing an existing draft (initialCreate=false)
-            }
+                    !Boolean(this.$route.query.initialCreate);
+                // allow if user is contributing into the catalogue root // or if the user is editing an existing draft (initialCreate=false)
+            },
+            onChangeClick() {
+                this.$emit('change-click');
+            },
         },
         methods: {
-            hideSelector(){
+            hideSelector() {
                 this.selectionInProgress = false;
             },
-            showSelector(){
+            showSelector() {
                 this.selectionInProgress = true;
             }
         },
@@ -86,7 +115,7 @@
 
     .contribute-location-tab {
         min-height: 571px;
-        
+
         &-catalogue-block {
             background-color: $nhsuk-white;
         }

LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/CatalogueSelector.vue

@@ -1,26 +1,36 @@
 <template>
     <div class="catalogue-selector p-24">
         <div class="mb-3">Select a catalogue to add this resource to.</div>
-
-        <CatalogueSelectorAccordion/>
-
-        <div class="form-group">
-            <select class="form-control nhsuk-input" aria-labelledby="primary-catalogue-heading" id="catalogue" v-model="selectedCatalogue" @change="catalogueChange">
-                <option disabled v-bind:value="{ nodeId: 0 }">Please choose...</option>
-                <option v-for="catalogue in userCatalogues" :value="catalogue">
-                    {{getCatalogueName(catalogue)}}
-                </option>
-            </select>
+
+        <CatalogueSelectorAccordion />
+        <div v-if="resourceCatalogueId > 0">
+            <div class="form-group">
+                <select class="form-control nhsuk-input" aria-labelledby="primary-catalogue-heading" id="catalogue" v-model="selectedCatalogue" @change="catalogueChange">
+                    <option disabled v-bind:value="{ nodeId: 0 }">Please choose...</option>
+                    <option v-for="catalogue in userCatalogues" :value="catalogue">
+                        {{getCatalogueName(catalogue)}}
+                    </option>
+                </select>
+            </div>
+            <div class="warning-content" v-if="selectedCatalogue.hidden">
+                <span>
+                    You have selected a hidden catalogue. If you publish this resource, learners will only be able
+                    to access it when the catalogue is made available by Learning Hub platform administrators.
+                </span>
+            </div>
+            <Button color="green" size="thin" class="save-button mt-20" v-on:click="savePrimaryCatalogue" v-bind:disabled="!selectedCatalogueIsValid">Save</Button>
         </div>
-
-        <div class="warning-content" v-if="selectedCatalogue.hidden">
-            <span>
-                You have selected a hidden catalogue. If you publish this resource, learners will only be able
-                to access it when the catalogue is made available by Learning Hub platform administrators.
-            </span>
+        <div v-else>
+            <div class="form-group">
+                <select class="form-control nhsuk-input" aria-labelledby="primary-catalogue-heading" id="catalogue" v-model="selectedCatalogue" @change="catalogueChange">
+                    <option disabled v-bind:value="{ nodeId: 0 }">Please choose...</option>
+                    <option v-for="catalogue in userCatalogues" :value="catalogue">
+                        {{getCatalogueName(catalogue)}}
+                    </option>
+                </select>
+            </div>
+            <Button color="green" size="thin" class="save-button mt-20" v-on:click="savePrimaryCatalogue" >Save</Button>
         </div>
-
-        <Button color="green" size="thin" class="save-button mt-20" v-on:click="savePrimaryCatalogue" v-bind:disabled="!selectedCatalogueIsValid">Save</Button>
     </div>
 </template>
 
@@ -29,14 +39,19 @@
 
     import Button from "../../globalcomponents/Button.vue";
     import CatalogueSelectorAccordion from "./CatalogueSelectorAccordion.vue"
-    
+
     import { CatalogueModel } from "../../models/catalogueModel";
     import { ContributeResourceDetailModel } from "../../models/contribute/contributeResourceModel";
-    
+
     export default Vue.extend({
         props: {
             resourceDetails: { type: Object } as PropOptions<ContributeResourceDetailModel>,
             userCatalogues: { type: Array } as PropOptions<CatalogueModel[]>,
+            resourceCatalogueId: {
+                type: Number,
+                required: false,
+                default: null
+            }
         },
         components: {
             Button,
@@ -49,13 +64,16 @@
         },
         computed: {
             selectedCatalogueIsValid(): boolean {
-                return this.selectedCatalogue.nodeId > 0;
-            },           
+                return (this.selectedCatalogue.nodeId > 0 || this.resourceCatalogueId === 0);
+            },
         },
         created() {
             if (this.resourceDetails.resourceCatalogueId > 0) {
                 this.selectedCatalogue = this.userCatalogues.find(c => c.nodeId == this.resourceDetails.resourceCatalogueId);
             }
+            else {
+                this.selectedCatalogue = new CatalogueModel({ nodeId: 0 });
+            }
         },
         methods: {
             getCatalogueName(catalogue: CatalogueModel) {
@@ -74,21 +92,23 @@
                 this.$emit('save');
             }
         },
-        
+
     })
 </script>
 
 <style lang="scss">
     @use '../../../../Styles/abstracts/all' as *;
-    
+
     .catalogue-selector {
         background-color: $nhsuk-white;
     }
+
     button.save-button {
         font-size: 19px;
         padding: 8px 20px;
         min-width: unset
     }
+
     select.form-control {
         border: 2px solid $nhsuk-grey;
         height: 40px !important;

LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/CatalogueView.vue

@@ -1,45 +1,49 @@
 <template>
     <div class="p-24 d-flex align-items-center justify-content-between">
-        <div class="d-flex align-items-center justify-content-between">
+        <div class="d-flex align-items-center justify-content-between" v-if="resourceCatalogueId > 0">
             <picture v-if="!logoErrorOnLoad">
-                <img class="logo" 
-                     v-bind:src="`/api/catalogue/download-image/${catalogue.badgeUrl}`" 
-                     v-bind:alt="`Logo for ${catalogue.name} Catalogue`" 
+                <img class="logo"
+                     v-bind:src="`/api/catalogue/download-image/${catalogue.badgeUrl}`"
+                     v-bind:alt="`Logo for ${catalogue.name} Catalogue`"
                      @error="errorLoadingLogo">
             </picture>
             <div class="ml-15">{{catalogue.name}}</div>
         </div>
+        <div v-else>
+            <p>No catalogue available.</p>
+        </div>
         <a href="#" class="change-text-button accessible-link" v-if="!selectionInProgress && allowChange" v-on:click.prevent="onChangeClick">Change</a>
     </div>
 </template>
-
 <script lang="ts">
-import Vue, { PropOptions } from 'vue';
-
-import { CatalogueModel } from "../../models/catalogueModel";
-
-export default Vue.extend({
-    props: {
-        catalogue: { type: Object } as PropOptions<CatalogueModel>,
-        selectionInProgress: Boolean,
-        allowChange: Boolean
-    },
-    data() {
-      return {
-          logoErrorOnLoad: false,
-      }
-    },
-    methods: {
-        onChangeClick() {
-            this.$emit('change-click');
+    import Vue, { PropOptions } from 'vue';
+    import { CatalogueModel } from "../../models/catalogueModel";
+    export default Vue.extend({
+        props: {
+            catalogue: { type: Object } as PropOptions<CatalogueModel>,
+            selectionInProgress: Boolean,
+            allowChange: Boolean,
+            resourceCatalogueId: {
+                type: Number,
+                required: false,
+                default: null
+            }
         },
-        errorLoadingLogo() {
-            this.logoErrorOnLoad = true;
+        data() {
+            return {
+                logoErrorOnLoad: false,
+            }
+        },
+        methods: {
+            onChangeClick() {
+                this.$emit('change-click');
+            },
+            errorLoadingLogo() {
+                this.logoErrorOnLoad = true;
+            }
         }
-    }
-})
+    })
 </script>
-
 <style lang="scss" scoped>
     @use '../../../../Styles/abstracts/all' as *;
 
@@ -50,4 +54,4 @@ export default Vue.extend({
             max-height: 60px;
         }
     }
-</style>
+</style>

LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/CatalogueSelect.vue

@@ -26,7 +26,7 @@
                                 A catalogue is a curated set of resources that has its own web page.
                             </p>
                             <p>
-                                You can contribute a resource as an editor of a catalogue. 
+                                You can contribute a resource as an editor of a catalogue.
                             </p>
                             <p>
                                 You can manage all resources that you have contributed in the My contributions area.
@@ -45,9 +45,11 @@
                     </option>
                 </select>
             </div>
-            <div v-if="selectedCatalogue.hidden" class="highlighted-info">
-                You have selected a hidden catalogue.
-                If you publish this resource, learners will only be able to access it when the catalogue is made available by Learning Hub platform administrators.
+            <div  v-if="value > 1">
+                <div v-if="selectedCatalogue.hidden" class="highlighted-info">
+                    You have selected a hidden catalogue.
+                    If you publish this resource, learners will only be able to access it when the catalogue is made available by Learning Hub platform administrators.
+                </div>
             </div>
         </div>
     </div>
@@ -87,9 +89,12 @@
             },
         },
         created() {
-            if (this.value > 0) {
+            if (this.value > 1) {
                 this.selectedCatalogue = this.userCatalogues.find(c => c.nodeId == this.value);
             }
+            else {
+                this.selectedCatalogue = new CatalogueModel({ nodeId: 0 });
+            }
         }
     })
 

LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentCommon.vue

@@ -314,11 +314,11 @@
                 return this.$store.state.userProviders;
             },
             resourceCatalogueCount(): number {
-                if (!this.$store.state.userCatalogues) {
+                if (!this.$store.state.userCatalogues) {              
                     return 0;
                 } else {
                     return this.$store.state.userCatalogues.length;
-                }
+                }     
             },
             userIsAuthor(): boolean {
                 return this.authors.filter(a => a.isContributor).length > 0;