OHRM5X-1734: Develop buzz - share video component (orangehrm#1502)

* OHRM5X-1737: Refactor buzz post components

installer/Migration/V5_3_0/Migration.php

@@ -30,7 +30,7 @@ class Migration extends AbstractMigration
      */
     public function up(): void
     {
-        $oldGroups = ['buzz'];
+        $oldGroups = ['buzz', 'general'];
         foreach ($oldGroups as $group) {
             $this->getLangStringHelper()->insertOrUpdateLangStrings($group);
         }

installer/Migration/V5_3_0/lang-string/buzz.yaml

@@ -50,3 +50,15 @@ langStrings:
   -
     value: 'Most Commented Posts'
     unitId: most_commented_posts
+  -
+    value: 'Share'
+    unitId: share
+  -
+    value: 'Share Video'
+    unitId: share_video
+  -
+    value: 'Video URL'
+    unitId: video_url
+  -
+    value: 'Paste Video URL'
+    unitId: paste_video_url

installer/Migration/V5_3_0/lang-string/general.yaml

@@ -0,0 +1,4 @@
+langStrings:
+  -
+    value: 'This URL is not a valid URL of a video or it is not supported by the system'
+    unitId: invalid_video_url_message

src/client/package.json

@@ -10,7 +10,7 @@
     "lint": "vue-cli-service lint --max-warnings=0 --mode production"
   },
   "dependencies": {
-    "@ohrm/oxd": "1.0.7",
+    "@ohrm/oxd": "1.0.8-alpha.1",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
     "date-fns": "^2.22.1",

src/client/src/core/util/validation/__tests__/rules.spec.ts

@@ -41,6 +41,7 @@ import {
   validSelection,
   validHostnameFormat,
   validPortRange,
+  validVideoURL,
 } from '../rules';
 
 jest.mock('@/core/plugins/i18n/translate', () => {
@@ -71,6 +72,8 @@ jest.mock('@/core/plugins/i18n/translate', () => {
         'Number should be greater than or equal to 0',
       'general.enter_valid_port_between_a_to_b':
         'Enter a valid port number between 0 to 65535',
+      'general.invalid_video_url_message':
+        'This URL is not a valid URL of a video or it is not supported by the system',
     };
     return mockStrings[langString];
   };
@@ -1003,3 +1006,49 @@ describe('core/util/validation/rules::validPortRange', () => {
     );
   });
 });
+
+describe('core/util/validation/rules::validVideoURL', () => {
+  test('validVideoURL:valid full youtube URL', () => {
+    const result = validVideoURL('https://www.youtube.com/watch?v=4dDP_1lGbYs');
+    expect(result).toStrictEqual(true);
+  });
+
+  test('validVideoURL:valid shortened youtube URL', () => {
+    const result = validVideoURL('https://youtu.be/4dDP_1lGbYs');
+    expect(result).toStrictEqual(true);
+  });
+
+  test('validVideoURL:valid mobile youtube URL', () => {
+    const result = validVideoURL('https://m.youtube.com/watch?v=4dDP_1lGbYs');
+    expect(result).toStrictEqual(true);
+  });
+
+  test('validVideoURL:valid embed youtube URL', () => {
+    const result = validVideoURL('https://www.youtube.com/embed/4dDP_1lGbYs');
+    expect(result).toStrictEqual(true);
+  });
+
+  test('validVideoURL:valid youtube short URL', () => {
+    const result = validVideoURL('https://www.youtube.com/shorts/dCsmH5BfpdQ');
+    expect(result).toStrictEqual(true);
+  });
+
+  test('validVideoURL:valid youtube URL without protocol', () => {
+    const result = validVideoURL('www.youtube.com/watch?v=4dDP_1lGbYs');
+    expect(result).toStrictEqual(true);
+  });
+
+  test('validVideoURL:not a url', () => {
+    const result = validVideoURL('abcd');
+    expect(result).toBe(
+      'This URL is not a valid URL of a video or it is not supported by the system',
+    );
+  });
+
+  test('validVideoURL:invalid url', () => {
+    const result = validVideoURL('https://www.youtube.com');
+    expect(result).toBe(
+      'This URL is not a valid URL of a video or it is not supported by the system',
+    );
+  });
+});

src/client/src/core/util/validation/rules.ts

@@ -670,3 +670,18 @@ export const validPortRange = function(
     );
   };
 };
+
+/**
+ * Validate url to be a valid youtube video
+ * @param {string} value url string
+ * @returns
+ */
+export const validVideoURL = function(value: string): boolean | string {
+  return (
+    !value ||
+    /^(?:https?:\/\/)?(?:m\.|www\.)?(?:youtu\.be\/|youtube\.com\/(?:shorts\/|embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(\?\S*)?$/.test(
+      value,
+    ) ||
+    translate('general.invalid_video_url_message')
+  );
+};

src/client/src/orangehrmBuzzPlugin/components/CreatePost.vue

@@ -19,16 +19,9 @@
  -->
 
 <template>
-  <!-- TODO: Placeholder component -->
   <oxd-sheet class="orangehrm-buzz-create-post">
     <div class="orangehrm-buzz-create-post-header">
-      <div class="orangehrm-buzz-create-post-profile-image">
-        <img
-          alt="profile picture"
-          class="employee-image"
-          :src="`../pim/viewPhoto/empNumber/1`"
-        />
-      </div>
+      <profile-image :employee="employee"></profile-image>
       <div class="orangehrm-buzz-create-post-header-text">
         <oxd-form @submitValid="onSubmit">
           <oxd-buzz-post-input
@@ -46,13 +39,21 @@
       <oxd-glass-button
         icon="cameraglass"
         :label="$t('buzz.share_photos')"
+        @click="onClickSharePhotos"
       ></oxd-glass-button>
       <oxd-glass-button
         icon="videoglass"
         :label="$t('buzz.share_video')"
+        @click="onClickShareVideos"
       ></oxd-glass-button>
     </div>
   </oxd-sheet>
+  <share-video-modal
+    v-if="showVideoModal"
+    :text="post"
+    :employee="employee"
+    @close="onCloseVideoModal"
+  ></share-video-modal>
 </template>
 
 <script>
@@ -63,66 +64,60 @@ import {
 } from '@/core/util/validation/rules';
 import Sheet from '@ohrm/oxd/core/components/Sheet/Sheet';
 import GlassButton from '@ohrm/oxd/core/components/Button/GlassButton';
+import ProfileImage from '@/orangehrmBuzzPlugin/components/ProfileImage';
 import BuzzPostInput from '@ohrm/oxd/core/components/Buzz/BuzzPostInput';
+import ShareVideoModal from '@/orangehrmBuzzPlugin/components/ShareVideoModal';
 
 export default {
   name: 'CreatePost',
 
   components: {
     'oxd-sheet': Sheet,
+    'profile-image': ProfileImage,
     'oxd-glass-button': GlassButton,
     'oxd-buzz-post-input': BuzzPostInput,
+    'share-video-modal': ShareVideoModal,
   },
 
   props: {
     employee: {
       type: Object,
-      default: null,
+      required: true,
     },
   },
 
   setup() {
     const post = ref(null);
+    const showVideoModal = ref(false);
     const rules = [required, shouldNotExceedCharLength(63535)];
 
     const onSubmit = () => {
       // todo
     };
 
+    const onClickSharePhotos = () => {
+      // todo
+    };
+
+    const onClickShareVideos = () => {
+      showVideoModal.value = true;
+    };
+
+    const onCloseVideoModal = () => {
+      showVideoModal.value = false;
+    };
+
     return {
       post,
       rules,
       onSubmit,
+      showVideoModal,
+      onCloseVideoModal,
+      onClickSharePhotos,
+      onClickShareVideos,
     };
   },
 };
 </script>
 
-<style lang="scss" scoped>
-.orangehrm-buzz-create-post {
-  margin: 0.5rem 0 1rem 0;
-  &-header {
-    display: flex;
-    &-text {
-      width: 100%;
-    }
-  }
-  &-actions {
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-  }
-  &-profile-image {
-    & img {
-      width: 50px;
-      height: 50px;
-      display: flex;
-      flex-shrink: 0;
-      border-radius: 100%;
-      justify-content: center;
-      box-sizing: border-box;
-      margin-right: 0.5rem;
-    }
-  }
-}
-</style>
+<style src="./create-post.scss" lang="scss" scoped></style>

src/client/src/orangehrmBuzzPlugin/components/NewsFeed.vue

@@ -24,38 +24,41 @@
       {{ $t('buzz.buzz_newsfeed') }}
     </oxd-text>
 
-    <create-post></create-post>
+    <create-post :employee="employee"></create-post>
     <post-filters
-      :is-mobile="isMobile"
+      :mobile="mobile"
+      :filter="filters.priority"
       @updatePriority="onUpdatePriority"
     ></post-filters>
 
     <oxd-grid :cols="1" class="orangehrm-buzz-newsfeed-posts">
-      <oxd-grid-item v-for="post in posts" :key="post">
+      <oxd-grid-item v-for="(post, index) in posts" :key="post">
         <post-container
           :post-id="post.id"
-          :posted-date="post.createdTime"
           :employee="post.employee"
+          :posted-date="post.createdTime"
         >
           <template #content>
             <oxd-text>{{ post.text }}</oxd-text>
           </template>
           <template #actionButton>
             <post-actions
-              :post-id="post.id"
-              :buzz-user-id="post.employee.employeeId"
+              :like="post.like"
+              @like="onLike(index)"
+              @share="onShare(index)"
+              @comment="onComment(index)"
             ></post-actions>
           </template>
           <template #postStats>
             <post-stats
+              :mobile="mobile"
+              :post-id="post.id"
               :no-of-likes="post.stats.noOfLikes"
               :no-of-shares="post.stats.noOfShares"
               :no-of-comments="post.stats.noOfComments"
-              :post-id="post.id"
-              :is-mobile="isMobile"
             ></post-stats>
           </template>
-          <template #comments> </template>
+          <!-- TODO: Add Post Comment Component -->
         </post-container>
       </oxd-grid-item>
     </oxd-grid>
@@ -74,7 +77,7 @@ import PostStats from '@/orangehrmBuzzPlugin/components/PostStats.vue';
 import CreatePost from '@/orangehrmBuzzPlugin/components/CreatePost.vue';
 import useInfiniteScroll from '@/core/util/composable/useInfiniteScroll';
 import PostActions from '@/orangehrmBuzzPlugin/components/PostActions.vue';
-import PostFIlters from '@/orangehrmBuzzPlugin/components/PostFilters.vue';
+import PostFilters from '@/orangehrmBuzzPlugin/components/PostFilters.vue';
 import PostContainer from '@/orangehrmBuzzPlugin/components/PostContainer.vue';
 
 const defaultFilters = {
@@ -89,12 +92,16 @@ export default {
     'create-post': CreatePost,
     'post-stats': PostStats,
     'post-actions': PostActions,
-    'post-filters': PostFIlters,
+    'post-filters': PostFilters,
     'oxd-loading-spinner': Spinner,
   },
 
   props: {
-    isMobile: {
+    employee: {
+      type: Object,
+      required: true,
+    },
+    mobile: {
       type: Boolean,
       default: false,
     },
@@ -140,14 +147,40 @@ export default {
 
     const onUpdatePriority = $event => {
       if ($event) {
+        state.posts = [];
+        state.offset = 0;
         state.filters.priority = $event;
         fetchData();
       }
     };
 
+    const onLike = index => {
+      http
+        .update(state.posts[index].id, {
+          like: !state.posts[index].like,
+        })
+        .then(() => {
+          state.posts[index].like = !state.posts[index].like;
+          // todo - update like count etc
+        });
+    };
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const onShare = index => {
+      // todo
+    };
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const onComment = index => {
+      // todo
+    };
+
     onBeforeMount(() => fetchData());
 
     return {
+      onLike,
+      onShare,
+      onComment,
       fetchData,
       onUpdatePriority,
       ...toRefs(state),