From fa11301968a8e328477edba9256da0d23a08cc83 Mon Sep 17 00:00:00 2001
From: binon <Binon.Yesudhas@hee.nhs.uk>
Date: Thu, 18 Apr 2024 20:18:06 +0100
Subject: [PATCH 1/2] TD3828 - Configured Case and assessment to use AMS flag

---
 .../contribute-resource/ContributeBlock.vue   | 15 ++-
 .../ContributeCaseOrAssessmentContent.vue     | 91 ++++++++++++++++---
 .../content-tab/ChooseContentBlockOption.vue  | 26 +++++-
 .../content-tab/ContributeMediaBlock.vue      | 27 +++++-
 .../Scripts/vuesrc/contribute/Content.vue     | 12 ++-
 .../Scripts/vuesrc/helpers/fileUpload.ts      | 12 ++-
 .../blocks/mediaTypeEnum.ts                   |  1 +
 7 files changed, 156 insertions(+), 28 deletions(-)

diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeBlock.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeBlock.vue
index 8ca009633..4c6aa1ec4 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeBlock.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeBlock.vue
@@ -30,7 +30,9 @@
                                                          :characterLimit="60"
                                                          :isH3="true"></EditSaveFieldWithCharacterCount>
                         <h3 class="my-0"
-                            v-else>{{ block.title }}</h3>
+                            v-else>
+                            {{ block.title }}
+                        </h3>
                         <Tick :complete="block.isReadyToPublish()"
                               class="pl-10"></Tick>
                     </div>
@@ -50,7 +52,8 @@
                                     ariaLabel="Move section down"
                                     class="contribute-block-component-button"></IconButton>
                     </div>
-                    <IconButton v-if="!canBeDuplicated" 
+                    <IconButton v-if="!canBeDuplicated && !contributeResourceAVFlag && block.blockType === BlockTypeEnum.Media"></IconButton>
+                    <IconButton v-else
                                 @click="duplicateBlock"
                                 iconClasses="fa-regular fa-clone"
                                 ariaLabel="Duplicate section"
@@ -131,6 +134,7 @@
     import ContributeImageCarouselBlock from "./ContributeImageCarouselBlock.vue";
     import { QuestionBlockModel } from "../models/contribute-resource/blocks/questionBlockModel";
     import { EventBus } from './contributeResourceEvents';
+    import { resourceData } from '../data/resource';
 
     export default Vue.extend({
         components: {
@@ -162,10 +166,12 @@
                 discardBlockModalOpen: false,
                 BlockTypeEnum: BlockTypeEnum,
                 isOpen: true,
+                contributeResourceAVFlag: true
             };
         },
         created() {
             this.isOpen = true;
+            this.getContributeResAVResourceFlag();
         },
         watch: {
             isOpen(newVal, oldVal) {
@@ -180,6 +186,11 @@
                 event.target.blur();
                 event.target.parentElement.blur();
                 this.$emit('duplicate');
+            },
+            getContributeResAVResourceFlag() {
+                resourceData.getContributeAVResourceFlag().then(response => {
+                    this.contributeResourceAVFlag = response;
+                });
             }
         }
     });
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeCaseOrAssessmentContent.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeCaseOrAssessmentContent.vue
index 4cf178069..524798b82 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeCaseOrAssessmentContent.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeCaseOrAssessmentContent.vue
@@ -2,17 +2,17 @@
     <div class="contribute-case-component lh-padding-fluid">
         <div class="lh-container-xl py-15">
             <div class="py-10 text-center placeholder-text"
-                 v-if="!hasContentOnPage">You have not added any content to this page yet
+                 v-if="!hasContentOnPage">
+                You have not added any content to this page yet
             </div>
             <template v-else>
-                <FilteredBlockCollectionView
-                    :resourceType="resourceType"
-                    :blockCollection="blockCollection"
-                    :selection="blockCollection => blockCollection.getBlocksByPage(page).filter(block => block.blockType !== BlockTypeEnum.Question)"
-                    :can-be-duplicated="duplicatingBlocks"
-                    :blocksToDuplicate="blocksToDuplicate"
-                    @annotateWholeSlideImage="showSlideWithAnnotations"
-                    @duplicateBlock="blockId => $emit('duplicateBlock', blockId)"/>
+                <FilteredBlockCollectionView :resourceType="resourceType"
+                                             :blockCollection="blockCollection"
+                                             :selection="blockCollection => blockCollection.getBlocksByPage(page).filter(block => block.blockType !== BlockTypeEnum.Question)"
+                                             :can-be-duplicated="duplicatingBlocks"
+                                             :blocksToDuplicate="blocksToDuplicate"
+                                             @annotateWholeSlideImage="showSlideWithAnnotations"
+                                             @duplicateBlock="blockId => $emit('duplicateBlock', blockId)" />
             </template>
 
             <ContributeAddContentBlock @add="choosingNewContentBlock = true"></ContributeAddContentBlock>
@@ -25,13 +25,32 @@
                    ref="addMediaInput"
                    multiple
                    @change="uploadNewMediaFiles"
-                   class="visually-hidden"/>
+                   class="visually-hidden" />
+
+            <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>
     </div>
 </template>
 
 <script lang="ts">
     import Vue, { PropOptions } from 'vue';
+    import { resourceData } from '../data/resource';
     import ContributeBlock from './ContributeBlock.vue';
     import ContributeAddContentBlock from './ContributeAddContentBlock.vue';
     import ContributeChooseContentBlockType from './ContributeChooseContentBlockType.vue';
@@ -40,11 +59,13 @@
     import {
         FileUploadType,
         getAllowedFileExtensionsInAcceptFormat,
-        startUploadsFromFileElement
+        startUploadsFromFileElement,
+        getMediaTypeFromFileExtensionContributeCaseOrAssessment        
     } from '../helpers/fileUpload';
     import FilteredBlockCollectionView from './components/questions/FilteredBlockCollectionView.vue';
     import { WholeSlideImageModel } from "../models/contribute-resource/blocks/wholeSlideImageModel";
     import { ResourceType } from "../constants";
+    import { MediaTypeEnum } from '../models/contribute-resource/blocks/mediaTypeEnum';
 
     export default Vue.extend({
         props: {
@@ -64,11 +85,19 @@
             return {
                 choosingNewContentBlock: false,
                 BlockTypeEnum,
+                contributeResourceAVFlag: true,
+                avUnavailableMessage: false
             };
         },
+        created() {
+            this.getContributeResAVResourceFlag();
+        },
         computed: {
             hasContentOnPage(): boolean {
                 return this.blockCollection?.getBlocksByPage(this.page)?.filter(block => block.blockType !== BlockTypeEnum.Question).length > 0;
+            },
+            audioVideoUnavailableView(): string {
+                return this.$store.state.getAVUnavailableView;
             }
         },
         methods: {
@@ -90,14 +119,42 @@
                 }
             },
             async uploadNewMediaFiles(event: any): Promise<void> {
-                startUploadsFromFileElement(
-                    event.target as HTMLInputElement,
-                    (fileId, mediaType) => this.blockCollection.addMediaBlock(fileId, mediaType, this.page)
-                );
+                var targetItem = event.target as HTMLInputElement;
+                var startUpload = true;
+
+                if (targetItem.value !== '') {
+                    for (let i = 0; i < targetItem.files.length; i++) {
+                        const file = targetItem.files[i] as File;
+                        const fileExtension = file.name.split('.').pop();
+                        const mediaType = getMediaTypeFromFileExtensionContributeCaseOrAssessment(`.${fileExtension}`);
+
+                        if (!this.contributeResourceAVFlag && (mediaType === MediaTypeEnum.Audio || mediaType === MediaTypeEnum.Video)) {
+                            startUpload = false;
+                            this.avUnavailableMessage = true;
+                        }
+                        else { startUpload = true; }
+                    }
+                }
+
+                if (startUpload) {
+                    startUploadsFromFileElement(
+                        event.target as HTMLInputElement,
+                        (fileId, mediaType) => this.blockCollection.addMediaBlock(fileId, mediaType, this.page)
+                    );
+                }
+                targetItem.value = '';
             },
             showSlideWithAnnotations(wholeSlideImageToShow: WholeSlideImageModel) {
                 this.$emit('annotateWholeSlideImage', wholeSlideImageToShow, false);
             },
+            cancelAVUnavailModal() {
+                this.avUnavailableMessage = false;
+            },
+            getContributeResAVResourceFlag() {
+                resourceData.getContributeAVResourceFlag().then(response => {
+                    this.contributeResourceAVFlag = response;
+                });
+            }
         },
     });
 </script>
@@ -114,4 +171,8 @@
     .placeholder-text {
         color: $nhsuk-grey;
     }
+    .modal-content--scroll {
+        max-height: 90vh;
+        overflow-y: auto;
+    }
 </style>
\ No newline at end of file
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/content-tab/ChooseContentBlockOption.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/content-tab/ChooseContentBlockOption.vue
index 2e12425a7..8ac6f1b21 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/content-tab/ChooseContentBlockOption.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/content-tab/ChooseContentBlockOption.vue
@@ -1,11 +1,14 @@
 <template>
     <div class="contribute-add-content-block-component-option">
         <div class="contribute-add-content-block-component-option--icon">
-            <img v-bind:src="imgSrc" class="flexible-image"/>
+            <img v-bind:src="imgSrc" class="flexible-image" />
         </div>
         <div class="contribute-add-content-block-component-option--description">
             <h5>{{blockTypeName}}</h5>
             <p>{{blockDescription}}</p>
+            <div v-if="!contributeResourceAVFlag && blockTypeName === 'Media'">
+                <div v-html="audioVideoUnavailableView"></div>
+            </div>
         </div>
         <Button v-on:click="$emit('choose')">Select</Button>
     </div>
@@ -13,6 +16,7 @@
 
 <script lang="ts">
     import Vue, { PropOptions } from 'vue';
+    import { resourceData } from '../../../data/resource';
 
     import Button from "../../../globalcomponents/Button.vue";
 
@@ -27,6 +31,26 @@
             blockTypeName: String,
             blockDescription: String,
         },
+        data() {
+            return {
+                contributeResourceAVFlag: true
+            }
+        },
+        created() {
+            this.getContributeResAVResourceFlag();
+        },
+        computed: {
+            audioVideoUnavailableView(): string {
+                return this.$store.state.getAVUnavailableView;
+            },
+        },
+        methods: {
+            getContributeResAVResourceFlag() {
+                resourceData.getContributeAVResourceFlag().then(response => {
+                    this.contributeResourceAVFlag = response;
+                });
+            }
+        }
     })
 </script>
 
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/content-tab/ContributeMediaBlock.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/content-tab/ContributeMediaBlock.vue
index 3c19d4ee6..77af841e4 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/content-tab/ContributeMediaBlock.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/content-tab/ContributeMediaBlock.vue
@@ -2,14 +2,18 @@
     <div class="contribute-media-block">
         <MediaBlockAttachment v-if="mediaBlock.mediaType === MediaTypeEnum.Attachment"
                               v-on:updatePublishingStatus="updatePublishingStatus"
-                              v-bind:attachment="attachment"/>
+                              v-bind:attachment="attachment" />
         <MediaBlockImage v-if="mediaBlock.mediaType === MediaTypeEnum.Image"
                          v-on:updatePublishingStatus="updatePublishingStatus"
-                         v-bind:image="image"/>
-        <MediaBlockVideo v-if="mediaBlock.mediaType === MediaTypeEnum.Video"
+                         v-bind:image="image" />
+
+        <MediaBlockVideo v-if="mediaBlock.mediaType === MediaTypeEnum.Video && contributeResourceAVFlag"
                          v-on:updatePublishingStatus="updatePublishingStatus"
-                         v-bind:video="video"/>
+                         v-bind:video="video" />
 
+        <div v-if="!contributeResourceAVFlag && (mediaBlock.mediaType === MediaTypeEnum.Video || mediaBlock.mediaType === MediaTypeEnum.Attachment)">
+            <div v-html="audioVideoUnavailableView"></div>
+        </div>        
     </div>
 </template>
 
@@ -23,6 +27,7 @@
     import MediaBlockImage from "./MediaBlockImage.vue";
     import MediaBlockVideo from "./MediaBlockVideo.vue";
     import Tick from "../../../globalcomponents/Tick.vue";
+    import { resourceData } from '../../../data/resource';
 
     import { AttachmentModel } from "../../../models/contribute-resource/blocks/attachmentModel";
     import { FileUploadType } from '../../../helpers/fileUpload';
@@ -43,13 +48,17 @@
         props: {
             mediaBlock: { type: Object } as PropOptions<MediaBlockModel>,
         },
-        data(){
+        data() {
             return {
                 FileUploadType: FileUploadType,
                 FileStore: FileStore /* It looks like FileStore isn't used, but we need it to be exposed here to allow Vue to make the files list reactive */,
                 MediaTypeEnum: MediaTypeEnum,
+                contributeResourceAVFlag: true
             }
         },
+        created() {
+            this.getContributeResAVResourceFlag();
+        },
         computed: {
             attachment(): AttachmentModel {
                 return this.mediaBlock.attachment;
@@ -59,11 +68,19 @@
             },
             video(): VideoMediaModel {
                 return this.mediaBlock.video;
+            },
+            audioVideoUnavailableView(): string {
+                return this.$store.state.getAVUnavailableView;
             }
         },
         methods: {
             updatePublishingStatus() {
                 this.mediaBlock.updatePublishingStatus();
+            },
+            getContributeResAVResourceFlag() {
+                resourceData.getContributeAVResourceFlag().then(response => {
+                    this.contributeResourceAVFlag = response;
+                });
             }
         }
     })
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/Content.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/Content.vue
index 9bd2339d9..a74f8443a 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/Content.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/Content.vue
@@ -501,6 +501,7 @@
                 localScormDetail: null as ScormResourceModel,
                 showError: false,
                 errorMessage: '',
+                contributeResourceAVFlag: true,
             }
         },
         computed: {
@@ -608,9 +609,6 @@
             hierarchyEditLoaded(): boolean {
                 return this.$store.state.hierarchyEditLoaded;
             },
-            contributeResourceAVFlag(): boolean {
-                return this.$store.state.contributeAVResourceFlag;
-            },
             audioVideoUnavailableView(): string {
                 return this.$store.state.getAVUnavailableView;
             },
@@ -631,6 +629,7 @@
             if (!this.$store.state.fileTypes) {
                 this.$store.commit('populateFileTypes');
             }
+            this.getContributeResAVResourceFlag();
             this.uploadResourceTypes = await resourceData.getUploadResourceTypes();
             const allResourceTypes = this.uploadResourceTypes.slice();
             const allowedTypes = this.resourceTypesSupported.split(',');
@@ -647,6 +646,11 @@
             this.localScormDetail = _.cloneDeep(this.scormDetail);
         },
         methods: {
+            getContributeResAVResourceFlag() {
+                resourceData.getContributeAVResourceFlag().then(response => {
+                    this.contributeResourceAVFlag = response;
+                });
+            },
             setSpecificContentLocalValid(val: boolean) {
                 this.specificContentLocalValid = val;
             },
@@ -906,7 +910,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;
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/helpers/fileUpload.ts b/LearningHub.Nhs.WebUI/Scripts/vuesrc/helpers/fileUpload.ts
index 6973552c5..a2b10ebe9 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/helpers/fileUpload.ts
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/helpers/fileUpload.ts
@@ -324,7 +324,17 @@ export const getMediaTypeFromFileExtension = function (fileExtension: string): M
         return MediaTypeEnum.Attachment;
     }
 };
-
+export const getMediaTypeFromFileExtensionContributeCaseOrAssessment = function (fileExtension: string): MediaTypeEnum {
+    if (isIncludedInListIgnoringCase(IMAGE_FILE_EXTENSIONS, fileExtension)) {
+        return MediaTypeEnum.Image;
+    } else if (isIncludedInListIgnoringCase(VIDEO_FILE_EXTENSIONS, fileExtension)) {
+        return MediaTypeEnum.Video;
+    } else if (isIncludedInListIgnoringCase(AUDIO_FILE_EXTENSIONS, fileExtension)) {
+        return MediaTypeEnum.Audio;
+    } else {
+        return MediaTypeEnum.Attachment;
+    }
+};
 export const getUploadTypeFromMediaType = function (mediaType: MediaTypeEnum): FileUploadType {
     switch (mediaType) {
         case MediaTypeEnum.Attachment:
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/models/contribute-resource/blocks/mediaTypeEnum.ts b/LearningHub.Nhs.WebUI/Scripts/vuesrc/models/contribute-resource/blocks/mediaTypeEnum.ts
index 663bd6e7e..c567d05b4 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/models/contribute-resource/blocks/mediaTypeEnum.ts
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/models/contribute-resource/blocks/mediaTypeEnum.ts
@@ -3,4 +3,5 @@ export enum MediaTypeEnum {
     Attachment = 0,
     Image = 1,
     Video = 2,
+    Audio = 3,
 }

From 9123b772cc80ee870fbdf8dffd25062d2959c6ff Mon Sep 17 00:00:00 2001
From: binon <Binon.Yesudhas@hee.nhs.uk>
Date: Fri, 19 Apr 2024 11:38:57 +0100
Subject: [PATCH 2/2] TD-3828, updated the way the popup works in caseassesment
 vue page

---
 .../ContributeCaseOrAssessmentContent.vue     | 29 +++++--------------
 1 file changed, 7 insertions(+), 22 deletions(-)

diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeCaseOrAssessmentContent.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeCaseOrAssessmentContent.vue
index 524798b82..ed08da72b 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeCaseOrAssessmentContent.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeCaseOrAssessmentContent.vue
@@ -27,23 +27,10 @@
                    @change="uploadNewMediaFiles"
                    class="visually-hidden" />
 
-            <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>
-
+            <Modal v-if="avUnavailableMessage">
+                <div v-html="audioVideoUnavailableView"></div>
+                <button type="button" class="nhsuk-button nhsuk-button--secondary mt-2 col-4 col-sm-3 col-md-2" @click="cancelAVUnavailModal">Cancel</button>
+            </Modal>   
         </div>
     </div>
 </template>
@@ -60,12 +47,13 @@
         FileUploadType,
         getAllowedFileExtensionsInAcceptFormat,
         startUploadsFromFileElement,
-        getMediaTypeFromFileExtensionContributeCaseOrAssessment        
+        getMediaTypeFromFileExtensionContributeCaseOrAssessment
     } from '../helpers/fileUpload';
     import FilteredBlockCollectionView from './components/questions/FilteredBlockCollectionView.vue';
     import { WholeSlideImageModel } from "../models/contribute-resource/blocks/wholeSlideImageModel";
     import { ResourceType } from "../constants";
     import { MediaTypeEnum } from '../models/contribute-resource/blocks/mediaTypeEnum';
+    import Modal from '../globalcomponents/Modal.vue';
 
     export default Vue.extend({
         props: {
@@ -80,6 +68,7 @@
             ContributeAddContentBlock,
             ContributeChooseContentBlockType,
             FilteredBlockCollectionView,
+            Modal,
         },
         data() {
             return {
@@ -171,8 +160,4 @@
     .placeholder-text {
         color: $nhsuk-grey;
     }
-    .modal-content--scroll {
-        max-height: 90vh;
-        overflow-y: auto;
-    }
 </style>
\ No newline at end of file