OHRM5X-1863: Buzz newsfeed add swipe gesture

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

@@ -86,3 +86,6 @@ langStrings:
   -
     value: 'No work anniversaries for the next 30 days'
     unitId: no_work_anniversaries_for_the_next_30_days
+  -
+    value: 'The selected item will be permanently deleted. Are you sure you want to continue?'
+    unitId: post_delete_confirmation_message

src/client/.yarnrc.yml

@@ -1,2 +1,2 @@
 nodeLinker: node-modules
-yarnPath: .yarn/releases/yarn-2.4.0.cjs
+yarnPath: .yarn/releases/yarn-3.3.0.cjs

src/client/package.json

@@ -14,10 +14,12 @@
     "axios": "0.27.2",
     "core-js": "^3.6.5",
     "date-fns": "^2.22.1",
+    "hammerjs": "^2.0.8",
     "intl-messageformat": "^9.11.4",
     "vue": "^3.2.2"
   },
   "devDependencies": {
+    "@types/hammerjs": "^2.0.41",
     "@types/jest": "^24.0.19",
     "@typescript-eslint/eslint-plugin": "^2.33.0",
     "@typescript-eslint/parser": "^2.33.0",

src/client/src/core/components/dialogs/DeleteConfirmationDialog.vue

@@ -30,7 +30,7 @@
       </div>
       <div class="orangehrm-text-center-align">
         <oxd-text type="card-body">
-          {{ $t('general.delete_confirmation_message') }}
+          {{ message || $t('general.delete_confirmation_message') }}
         </oxd-text>
       </div>
       <div class="orangehrm-modal-footer">
@@ -59,6 +59,13 @@ export default {
   components: {
     'oxd-dialog': Dialog,
   },
+  props: {
+    message: {
+      type: String,
+      default: null,
+      required: false,
+    },
+  },
   data() {
     return {
       show: false,

src/client/src/core/components/inputs/DateInput.vue

@@ -115,8 +115,10 @@ export default {
       fetchEvents(fromDate, endDate);
     };
 
-    onBeforeMount(fetchWorkWeek);
-    onBeforeMount(onSelectYear({year: new Date().getFullYear()}));
+    onBeforeMount(async () => {
+      await fetchWorkWeek();
+      await onSelectYear({year: new Date().getFullYear()});
+    });
 
     return {
       jsDateFormat,

src/client/src/core/components/table/ReportsTable.vue

@@ -194,7 +194,7 @@ export default {
       },
     );
 
-    props.prefetch && onBeforeMount(generateReport());
+    props.prefetch && onBeforeMount(() => generateReport());
 
     return {
       total,

src/client/src/core/styles/global.scss

@@ -155,3 +155,14 @@
 .orangehrm-input-field-bottom-space {
   margin-bottom: 1rem;
 }
+
+.oxd-tab {
+  touch-action: pan-y !important;
+}
+
+.oxd-tab-bar {
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}

src/client/src/core/util/composable/useInfiniteScroll.ts

@@ -25,7 +25,7 @@ type useInfiniteScrollArgs = {
   debounceInterval?: number;
 };
 
-interface CustomElement extends HTMLElement {
+export interface CustomElement extends HTMLElement {
   $el: HTMLElement;
 }
 

src/client/src/core/util/composable/useSwipe.ts

@@ -0,0 +1,45 @@
+/**
+ * OrangeHRM is a comprehensive Human Resource Management (HRM) System that captures
+ * all the essential functionalities required for any enterprise.
+ * Copyright (C) 2006 OrangeHRM Inc., http://www.orangehrm.com
+ *
+ * OrangeHRM is free software; you can redistribute it and/or modify it under the terms of
+ * the GNU General Public License as published by the Free Software Foundation; either
+ * version 2 of the License, or (at your option) any later version.
+ *
+ * OrangeHRM is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
+ * without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+ * See the GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License along with this program;
+ * if not, write to the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
+ * Boston, MA  02110-1301, USA
+ */
+
+import Hammer from 'hammerjs';
+import {onBeforeUnmount, onMounted, ref} from 'vue';
+import {CustomElement} from './useInfiniteScroll';
+
+export default function useSwipe(executor: ($event: HammerInput) => void) {
+  let manager: HammerManager;
+  const swipeContainer = ref<CustomElement>();
+
+  onMounted(() => {
+    if (!swipeContainer.value) return;
+
+    manager = new Hammer.Manager(
+      swipeContainer.value?.$el || swipeContainer.value,
+    );
+    const Swipe = new Hammer.Swipe();
+    manager.add(Swipe);
+    manager.on('swipe', executor);
+  });
+
+  onBeforeUnmount(() => {
+    manager?.destroy();
+  });
+
+  return {
+    swipeContainer,
+  };
+}

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

@@ -64,13 +64,10 @@
 
 <script>
 import {ref} from 'vue';
-import {
-  required,
-  shouldNotExceedCharLength,
-} from '@/core/util/validation/rules';
 import useToast from '@/core/util/composable/useToast';
 import Sheet from '@ohrm/oxd/core/components/Sheet/Sheet';
 import {APIService} from '@/core/util/services/api.service';
+import {shouldNotExceedCharLength} from '@/core/util/validation/rules';
 import GlassButton from '@ohrm/oxd/core/components/Button/GlassButton';
 import ProfileImage from '@/orangehrmBuzzPlugin/components/ProfileImage';
 import BuzzPostInput from '@ohrm/oxd/core/components/Buzz/BuzzPostInput';
@@ -103,10 +100,11 @@ export default {
     const {saveSuccess} = useToast();
     const showVideoModal = ref(false);
     const showPhotoModal = ref(false);
-    const rules = [required, shouldNotExceedCharLength(65530)];
+    const rules = [shouldNotExceedCharLength(65530)];
     const http = new APIService(window.appGlobal.baseUrl, 'api/v2/buzz/posts');
 
     const onSubmit = () => {
+      if (post.value === null || String(post.value).trim() === '') return;
       http
         .create({
           type: 'text',

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

@@ -37,7 +37,7 @@
 
     <oxd-grid :cols="1" class="orangehrm-buzz-newsfeed-posts">
       <oxd-grid-item v-for="(post, index) in posts" :key="post">
-        <post-container :post="post">
+        <post-container :post="post" @delete="onDelete(index)">
           <template #content>
             <post-body
               :post="post"
@@ -98,10 +98,15 @@
     @like="onLike(photoCarouselState.postIndex)"
     @close="onClosePhotoCarousel"
   ></photo-carousel>
+  <delete-confirmation
+    ref="deleteDialog"
+    :message="$t('buzz.post_delete_confirmation_message')"
+  ></delete-confirmation>
 </template>
 
 <script>
-import {onBeforeMount, reactive, toRefs} from 'vue';
+import useToast from '@/core/util/composable/useToast';
+import {onBeforeMount, reactive, ref, toRefs} from 'vue';
 import {APIService} from '@/core/util/services/api.service';
 import Spinner from '@ohrm/oxd/core/components/Loader/Spinner';
 import PostBody from '@/orangehrmBuzzPlugin/components/PostBody.vue';
@@ -114,6 +119,7 @@ import useBuzzAPIs from '@/orangehrmBuzzPlugin/util/composable/useBuzzAPIs';
 import PhotoCarousel from '@/orangehrmBuzzPlugin/components/PhotoCarousel.vue';
 import PostContainer from '@/orangehrmBuzzPlugin/components/PostContainer.vue';
 import SharePostModal from '@/orangehrmBuzzPlugin/components/SharePostModal.vue';
+import DeleteConfirmationDialog from '@ohrm/components/dialogs/DeleteConfirmationDialog';
 import PostCommentContainer from '@/orangehrmBuzzPlugin/components/PostCommentContainer.vue';
 
 const defaultFilters = {
@@ -135,6 +141,7 @@ export default {
     'post-container': PostContainer,
     'share-post-modal': SharePostModal,
     'post-comment-container': PostCommentContainer,
+    'delete-confirmation': DeleteConfirmationDialog,
   },
 
   props: {
@@ -150,7 +157,9 @@ export default {
 
   setup() {
     const POST_LIMIT = 10;
-    const {fetchPosts} = useBuzzAPIs(
+    const deleteDialog = ref();
+    const {deleteSuccess} = useToast();
+    const {fetchPosts, deletePost} = useBuzzAPIs(
       new APIService(window.appGlobal.baseUrl, ''),
     );
     const noPostsPic = `${window.appGlobal.baseUrl}/../images/buzz_no_posts.svg`;
@@ -255,14 +264,27 @@ export default {
       if ($event) resetFeed();
     };
 
+    const onDelete = index => {
+      deleteDialog.value.showDialog().then(confirmation => {
+        if (confirmation === 'ok') {
+          deletePost(state.posts[index].id).then(() => {
+            resetFeed();
+            deleteSuccess();
+          });
+        }
+      });
+    };
+
     onBeforeMount(() => fetchData());
 
     return {
       onLike,
       onShare,
+      onDelete,
       resetFeed,
       onComment,
       noPostsPic,
+      deleteDialog,
       onSelectPhoto,
       onUpdatePriority,
       onCloseShareModal,

src/client/src/orangehrmBuzzPlugin/components/PostActionsPill.vue

@@ -33,9 +33,14 @@
       <div class="orangehrm-buzz-pill-stats-other">
         <oxd-text tag="p">
           {{
-            $t('buzz.n_comment', {commentCount: post.stats.numOfShares})
-          }},&nbsp;{{
-            $t('buzz.n_share', {shareCount: post.stats.numOfComments})
+            $t('buzz.n_comment', {
+              commentCount: post.stats.numOfComments,
+            })
+          }}&sbquo;
+          {{
+            $t('buzz.n_share', {
+              shareCount: post.stats.numOfShares,
+            })
           }}
         </oxd-text>
       </div>

src/client/src/orangehrmBuzzPlugin/components/PostCommentContainer.vue

@@ -47,7 +47,10 @@
     >
       {{ showAllComments ? $t('general.show_less') : $t('general.show_more') }}
     </oxd-text>
-    <delete-confirmation ref="deleteDialog"></delete-confirmation>
+    <delete-confirmation
+      ref="deleteDialog"
+      :message="$t('buzz.post_delete_confirmation_message')"
+    ></delete-confirmation>
   </div>
 </template>
 

src/client/src/orangehrmBuzzPlugin/components/UpcomingAnniversaries.vue

@@ -112,6 +112,7 @@ export default {
   data() {
     return {
       viewMore: false,
+      isLoading: false,
       anniversaries: [],
       anniversariesCount: 0,
     };
@@ -122,7 +123,7 @@ export default {
       return !this.viewMore;
     },
     isEmpty() {
-      return this.anniversaries.length === 0;
+      return !this.isLoading && this.anniversaries.length === 0;
     },
   },
 
@@ -142,26 +143,30 @@ export default {
       this.getAnniversaries();
     },
     getAnniversaries() {
-      this.http.getAll({limit: this.anniversariesLimit}).then(response => {
-        const {data, meta} = response.data;
-        this.anniversaries = data.map(item => {
-          const {employee, jobTitle, joinedDate} = item;
-          return {
-            empNumber: employee.empNumber,
-            empName: this.tEmpName(employee, {
-              includeMiddle: false,
-              excludePastEmpTag: false,
-            }),
-            jobTitle: jobTitle.title,
-            joinedDate: formatDate(parseDate(joinedDate), 'MMM dd', {
-              locale: this.locale,
-            }),
-            anniversaryYear:
-              new Date().getFullYear() - new Date(joinedDate).getFullYear(),
-          };
-        });
-        this.anniversariesCount = meta?.total;
-      });
+      this.isLoading = true;
+      this.http
+        .getAll({limit: this.anniversariesLimit})
+        .then(response => {
+          const {data, meta} = response.data;
+          this.anniversaries = data.map(item => {
+            const {employee, jobTitle, joinedDate} = item;
+            return {
+              empNumber: employee.empNumber,
+              empName: this.tEmpName(employee, {
+                includeMiddle: false,
+                excludePastEmpTag: false,
+              }),
+              jobTitle: jobTitle.title,
+              joinedDate: formatDate(parseDate(joinedDate), 'MMM dd', {
+                locale: this.locale,
+              }),
+              anniversaryYear:
+                new Date().getFullYear() - new Date(joinedDate).getFullYear(),
+            };
+          });
+          this.anniversariesCount = meta?.total;
+        })
+        .finally(() => (this.isLoading = false));
     },
   },
 };

src/client/src/orangehrmBuzzPlugin/components/upcoming-anniversaries.scss

@@ -18,7 +18,9 @@
 
 .orangehrm-buzz-anniversary {
   &-content {
+    height: 100vh;
     @include oxd-respond-to('lg') {
+      height: unset;
       overflow: auto;
       max-height: 292px;
       @include oxd-scrollbar();
@@ -99,4 +101,8 @@
       text-align: center;
     }
   }
+  @include oxd-respond-to('lg') {
+    top: 9rem;
+    position: sticky;
+  }
 }