Refactored webUI

Author: binon

LearningHub.Nhs.WebUI/Controllers/ResourceController.cs

@@ -119,8 +119,8 @@ public async Task<IActionResult> Index(int resourceReferenceId, bool? acceptSens
             this.ViewBag.MediaActivityPlayingEventIntervalSeconds = this.Settings.MediaActivityPlayingEventIntervalSeconds;
             this.ViewBag.KeepUserSessionAliveIntervalSeconds = Convert.ToInt32(this.Settings.KeepUserSessionAliveIntervalMins) * 60000;
             this.ViewBag.SupportUrl = this.Settings.SupportUrls.SupportForm;
-            var learnResourceAVFlag = Task.Run(() => this.featureManager.IsEnabledAsync(FeatureFlags.LearnAudioVideoResource)).Result;
-            this.ViewBag.LearnResourceAVFlag = learnResourceAVFlag;
+            var displayAVResourceFlag = Task.Run(() => this.featureManager.IsEnabledAsync(FeatureFlags.DisplayAudioVideoResource)).Result;
+            this.ViewBag.DisplayAVResourceFlag = displayAVResourceFlag;
 
             if (resourceReferenceId == 0)
             {
@@ -532,11 +532,11 @@ public IActionResult GetAVUnavailableView()
         public bool GetContributeResourceAVFlag() => this.featureManager.IsEnabledAsync(FeatureFlags.ContributeAudioVideoResource).Result;
 
         /// <summary>
-        /// The GetLearnAVResourceFlag.
+        /// The GetDisplayAVResourceFlag.
         /// </summary>
-        /// <returns> Return Learn AV Resource Flag.</returns>
-        [Route("Resource/GetLearnAVResourceFlag")]
-        [HttpGet("GetLearnAVResourceFlag")]
-        public bool GetLearnAVResourceFlag() => this.featureManager.IsEnabledAsync(FeatureFlags.LearnAudioVideoResource).Result;
+        /// <returns> Return Display AV Resource Flag.</returns>
+        [Route("Resource/GetDisplayAVResourceFlag")]
+        [HttpGet("GetDisplayAVResourceFlag")]
+        public bool GetDisplayAVResourceFlag() => this.featureManager.IsEnabledAsync(FeatureFlags.DisplayAudioVideoResource).Result;
     }
 }

LearningHub.Nhs.WebUI/Helpers/FeatureFlags.cs

@@ -15,8 +15,8 @@ public static class FeatureFlags
         public const string ContributeAudioVideoResource = "ContributeAudioVideoResource";
 
         /// <summary>
-        /// The LearnAudioVideoResource.
+        /// The DisplayAudioVideoResource.
         /// </summary>
-        public const string LearnAudioVideoResource = "LearnAudioVideoResource";
+        public const string DisplayAudioVideoResource = "DisplayAudioVideoResource";
     }
 }

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

@@ -67,7 +67,6 @@
             getContributeResAVResourceFlag() {
                  resourceData.getContributeAVResourceFlag().then(response => {
                  this.contributeResourceAVFlag = response;
-                 debugger;
                 });
              },
             getResourceTypeDescription(resourceType: ResourceType): string {

LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/contributeResourceContainer.ts

@@ -1,10 +1,16 @@
 import Vue from 'vue';
 import Vuelidate from 'vuelidate';
 import { ContributeResourceRouter } from './contributeResourceRouter';
+import store from '../contribute/contributeState';
 
 Vue.use(Vuelidate as any);
 
 new Vue({
     el: '#contributecontainer',
     router: ContributeResourceRouter,
+    store,
+    created() {
+        this.$store.commit('populateContributeAVResourceFlag'); 
+        this.$store.commit('populateAVUnavailableView'); 
+    }
 });

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

@@ -295,6 +295,23 @@
                             </transition>
                         </div>
 
+                        <div v-if="avUnavailableMessage">
+                            <transition name="modal">
+                                <div class="modal-mask">
+                                    <div class="modal-wrapper">
+                                        <div class="modal-dialog">
+                                            <div class="modal-content">
+                                                <div v-html="audioVideoUnavailableView"></div>
+                                                <div class="modal-footer modal-footer--buttons">
+                                                    <button type="button" class="nhsuk-button nhsuk-button--secondary" @click="cancelAVUnavailModal">Cancel</button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </transition>
+                        </div>
+
                         <div v-if="invalidFileTypeError">
                             <transition name="modal">
                                 <div class="modal-mask">
@@ -472,6 +489,7 @@
                 flags: [] as FlagModel[],
                 displayType: '' as string,
                 commonContentKey: 0,
+                avUnavailableMessage: false,
                 // Some of the Content components have local state
                 // which isn't in the vuex store.
                 // This means those fields are validated using an
@@ -589,7 +607,13 @@
             },
             hierarchyEditLoaded(): boolean {
                 return this.$store.state.hierarchyEditLoaded;
-            }
+            },
+            contributeResourceAVFlag(): boolean {
+                return this.$store.state.contributeAVResourceFlag;
+            },
+            audioVideoUnavailableView(): string {
+                return this.$store.state.getAVUnavailableView;
+            },
         },
         async created() {
             if (this.$store.state.currentUserName == '') {
@@ -779,6 +803,9 @@
             cancelChangeFile() {
                 this.fileTypeChangeWarning = false;
             },
+            cancelAVUnavailModal() {
+                this.avUnavailableMessage = false;
+            },
             processChangeFile() {
                 this.fileTypeChangeWarning = false;
                 this.acceptUploadedFile();
@@ -879,7 +906,7 @@
                         if (this.selectedResourceType != ResourceType.UNDEFINED) {
                             let fileExtension = this.uploadingFile.name.split(".").pop();
                             let resourceType: ResourceType = ResourceType.GENERICFILE;
-                            if (fileExtension.toLowerCase() == 'zip' && this.selectedResourceType == ResourceType.SCORM) {
+                           if (fileExtension.toLowerCase() == 'zip' && this.selectedResourceType == ResourceType.SCORM) {
                                 resourceType = ResourceType.SCORM;
                             } else if (fileExtension.toLowerCase() == 'zip' && this.selectedResourceType == ResourceType.HTML) {
                                 resourceType = ResourceType.HTML;
@@ -890,6 +917,10 @@
                                     resourceType = fileType.defaultResourceTypeId;
                                 }
                             }
+                            if ((resourceType == 2 || resourceType == 7) && !this.contributeResourceAVFlag) {
+                                this.avUnavailableMessage = true;
+                                return;
+                            }
                             if (resourceType != this.selectedResourceType && this.isFileAlreadyUploaded) {
                                 if (this.previousVersionExists) {
                                     this.invalidFileTypeError = true;

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

@@ -5,7 +5,10 @@
                 <h3>Uploaded file</h3>
             </div>
         </div>
-        <div class="row">
+        <div v-if="!contributeResourceAVFlag">
+            <div v-html="audioVideoUnavailableView"></div>
+        </div>
+        <div v-else class="row">
             <file-panel :file-id="localVideoDetail.file.fileId" :file-description="localVideoDetail.file.fileName" :file-size="localVideoDetail.file.fileSizeKb" @changefile="changeFile"></file-panel>
         </div>
 
@@ -116,7 +119,13 @@
             },
             fileUpdated(): ResourceFileModel {
                 return this.$store.state.fileUpdated;
-            }
+            },
+            contributeResourceAVFlag(): boolean {
+                return this.$store.state.contributeAVResourceFlag;
+            },
+            audioVideoUnavailableView(): string {
+                return this.$store.state.getAVUnavailableView;
+            },
         },
         created() {
             this.setInitialValues();

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

@@ -5,6 +5,10 @@
                 You can upload a file from your computer or other storage drive you are connected to.
                 Maximum file size {{ contributeSettings.fileUploadSettings.fileUploadSizeLimitText }}
             </p>
+            <div v-if="!contributeResourceAVFlag">
+                <div v-html="audioVideoUnavailableView"></div>
+            </div>
+
             <div class="p-4 uploadInnerBox">
                 <div class="upload-btn-wrapper nhsuk-u-font-size-16">
                     <label for="fileUpload" class="nhsuk-button nhsuk-button--secondary">Choose file</label> No file chosen
@@ -38,6 +42,12 @@
             fileAccept(): string {
                 return this.$store.state.resourceDetail.resourceType == ResourceType.HTML ? '.zip,.rar,.7zip' : ''
             },
+            contributeResourceAVFlag(): boolean {
+                return this.$store.state.contributeAVResourceFlag;
+            },
+            audioVideoUnavailableView(): string {
+                return this.$store.state.getAVUnavailableView;
+            },
         },
     });
 </script>

LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/contributeState.ts

@@ -248,8 +248,8 @@ const mutations = {
     async populateContributeAVResourceFlag(state: State) {
         state.contributeAVResourceFlag = await resourceData.getContributeAVResourceFlag();
     },
-    async populatLearnResourceAVFlag(state: State) {
-        state.learnAVResourceFlag = await resourceData.getLearnAVResourceFlag();
+    async populateDisplayAVResourceFlag(state: State) {
+        state.learnAVResourceFlag = await resourceData.getDisplayAVResourceFlag();
     },
     async populateAVUnavailableView(state: State) {
         state.getAVUnavailableView = await resourceData.getAVUnavailableView();

LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/contributecontainer.ts

@@ -23,6 +23,8 @@ new Vue({
     },
     created() {
         this.$store.commit('populateContributeSettings');
+        this.$store.commit('populateContributeAVResourceFlag');
+        this.$store.commit('populateAVUnavailableView'); 
         if (this.$route.params.rvId) {
             this.$store.commit('populateResource', this.$route.params.rvId);
         }

LearningHub.Nhs.WebUI/Scripts/vuesrc/data/resource.ts

@@ -513,13 +513,13 @@ const getContributeAVResourceFlag = async function (): Promise<boolean> {
         });
 };
 
-const getLearnAVResourceFlag = async function (): Promise<boolean> {
-    return await AxiosWrapper.axios.get<boolean>('/Resource/GetLearnAVResourceFlag')
+const getDisplayAVResourceFlag = async function (): Promise<boolean> {
+    return await AxiosWrapper.axios.get<boolean>('/Resource/GetDisplayAVResourceFlag')
         .then(response => {
             return response.data;
         })
         .catch(e => {
-            console.log('GetLearnAVResourceFlag:' + e);
+            console.log('GetDisplayAVResourceFlag:' + e);
             throw e;
         });
 };
@@ -574,6 +574,6 @@ export const resourceData = {
     duplicateBlocks,
     getMyContributions,
     getContributeAVResourceFlag,
-    getLearnAVResourceFlag,
+    getDisplayAVResourceFlag,
     getAVUnavailableView
 };