fix: Update Time tracker to new app center - EXO-79208

Make Activity Record Drawer as quick Action and remove existing button in topbar drawer

Author: rdenarie

time-tracker-services/src/main/resources/applications.json

@@ -16,6 +16,30 @@
           "*:/spaces/exo_employees"
         ]
       }
+    },
+    {
+      "name": "timeTrackingDrawer",
+      "overrideMode": "merge",
+      "override": false,
+      "enabled": true,
+      "application": {
+        "title": "Time Tracking",
+        "icon": "fa-clock",
+        "type": "DRAWER",
+        "url": "timeTracker",
+        "mandatory": false,
+        "active": true,
+        "mobile": true,
+        "default": true,
+        "pwa": false,
+        "order": 10,
+        "permissions": [
+          "*:/spaces/exo_employees"
+        ]
+      }
     }
   ]
 }
+
+
+

time-tracker-webapps/src/main/resources/locale/portlet/QuickActions_en.properties

@@ -0,0 +1,2 @@
+quickActions.timeTracker.name=Time Tracker
+quickActions.timeTracker.description=Save your daily Time Entries

time-tracker-webapps/src/main/webapp/WEB-INF/conf/configuration.xml

@@ -27,7 +27,6 @@
     <import>war:/conf/time-tracker/portal/menu-configuration.xml</import>
     <import>war:/conf/time-tracker/portal/portal-configuration.xml</import>
     <import>war:/conf/time-tracker/organization/organization-configuration.xml</import>
-    <import>war:/conf/time-tracker/portal/dynamic-container-configuration.xml</import>
     <import>war:/conf/time-tracker/upgrade/portal-pages-upgrade-configuration.xml</import>
 
 </configuration>

time-tracker-webapps/src/main/webapp/WEB-INF/conf/time-tracker/portal/dynamic-container-configuration.xml

@@ -104,5 +104,29 @@
             <module>eXoVueI18n</module>
         </depends>
     </module>
+
+    <module>
+        <name>TimeTrackerQuickActionExtensions</name>
+        <load-group>QuickActionsGrp</load-group>
+        <script>
+            <minify>false</minify>
+            <path>/js/timeTrackerQuickAction.bundle.js</path>
+        </script>
+        <depends>
+            <module>vue</module>
+        </depends>
+        <depends>
+            <module>vuetify</module>
+        </depends>
+        <depends>
+            <module>eXoVueI18n</module>
+        </depends>
+        <depends>
+            <module>commonVueComponents</module>
+        </depends>
+        <depends>
+            <module>extensionRegistry</module>
+        </depends>
+    </module>
 </gatein-resources>
 

time-tracker-webapps/src/main/webapp/WEB-INF/gatein-resources.xml

@@ -8,7 +8,6 @@ const vuetify = new Vuetify({
   iconfont: 'mdi',
 });
 
-console.log('timetracking init');
 const lang = eXo && eXo.env && eXo.env.portal && eXo.env.portal.language;
 const resourceBundleName = 'locale.portlet.TimeTracker';
 const url = `${eXo.env.portal.context}/${eXo.env.portal.rest}/i18n/bundle/${resourceBundleName}-${lang}.json`;

time-tracker-webapps/src/main/webapp/vue-app/activityManagement.js

@@ -314,7 +314,7 @@ export default {
     }
   },
   mounted () {
-    $(this.$refs.addTTEntryDrawer.$el).click(()=> { 
+    this.$refs.addTTEntryDrawer.$el.click(()=> {
       if (this.addTTEntryMenuDatePicker) {
         this.addTTEntryMenuDatePicker = false;
       }

time-tracker-webapps/src/main/webapp/vue-app/components/commons/AddTTEntryDrawer.vue

@@ -216,7 +216,7 @@ export default {
     document.addEventListener('alert-message-dismissed', this.deleteItemConfirm);
   },
   mounted () {
-    $(this.$refs.timeTrackerDrawer.$el).click(()=> { 
+    this.$refs.timeTrackerDrawer.$el.click(()=> {
       if (this.activityRecordMenuDatePicker) {
         this.activityRecordMenuDatePicker = false;
       }
@@ -424,7 +424,6 @@ export default {
       this.formatDate(this.date);
     },
     addActivityRecord() {
-      console.log('Add Activity Record');
       this.$refs.addTTEntryDrawer.openAddTTEntryDrawer();
     },
     editActivityRecord(item) {

time-tracker-webapps/src/main/webapp/vue-app/components/timetracking/TimeTrackingDrawer.vue

@@ -0,0 +1,78 @@
+import TimeTrackingDrawer from '../components/timetracking/TimeTrackingDrawer.vue';
+
+const components = {
+  'time-tracking-drawer': TimeTrackingDrawer,
+};
+
+for (const key in components) {
+  Vue.component(key, components[key]);
+}
+
+extensionRegistry.registerExtension('QuickAction', 'Extension', {
+  id: 'timeTracker',
+  icon: 'fa-clock',
+  name: 'quickActions.timeTracker.name',
+  description: 'quickActions.timeTracker.description',
+  click: () => new Promise(resolve => {
+    window.require(['SHARED/eXoVueI18n', 'SHARED/timeTrackingjs'], exoi18n => initTimeTrackerDrawer(exoi18n, resolve));
+  }),
+});
+
+async function initTimeTrackerDrawer(exoi18n, callback) {
+  console.debug('Initializing Time Tracker Quick Action Drawer');
+  const appId = 'time-tracker-actions';
+  if (!document.querySelector(`#${appId}`)) {
+    const parent = document.createElement('div');
+    parent.id = appId;
+    document.querySelector('#vuetify-apps').appendChild(parent);
+
+    console.debug('Create Vue App for Time Tracker Quick Action Drawer');
+    await initTimeTrackerDrawerApp(appId, exoi18n);
+  }
+  console.debug('Dispatching quick-action-time-tracker-drawer event in else block');
+  document.dispatchEvent(new CustomEvent('quick-action-time-tracker-drawer', {detail: callback}));
+  callback();
+
+}
+
+function initTimeTrackerDrawerApp(appId, exoi18n) {
+  const lang = eXo.env.portal.language;
+  const resourceBundleName = 'locale.portlet.TimeTracker';
+  const url = `${eXo.env.portal.context}/${eXo.env.portal.rest}/i18n/bundle/${resourceBundleName}-${lang}.json`;
+
+  console.debug("Calling loadLanguageAsync for Time Tracker Quick Action Drawer with URL:", url);
+  return new Promise(resolve => exoi18n.loadLanguageAsync(lang, url)
+    .then(i18n => {
+      Vue.createApp({
+        template: `
+          <time-tracking-drawer
+            id="${appId}"
+            ref="timeTrackingDrawerComponent"  />
+        `,
+        created() {
+          console.debug('In create : Adding event listener for quick-action-time-tracker-drawer');
+          document.addEventListener('quick-action-time-tracker-drawer', this.openDrawer);
+        },
+        async mounted() {
+          console.debug('In mounted : dispatching hideTopBarLoading event');
+          document.dispatchEvent(new CustomEvent('hideTopBarLoading'));
+          resolve();
+        },
+        beforeDestroy() {
+          document.removeEventListener('quick-action-time-tracker-drawer', this.openDrawer);
+        },
+        methods: {
+          openDrawer() {
+            console.debug('In openDrawer method: Opening Time Tracking Drawer', this);
+            console.debug('In openDrawer method: Opening Time Tracking Drawer', this.$refs, this.$refs.timeTrackingDrawerComponent);
+            this.$refs.timeTrackingDrawerComponent.open();
+          },
+          open() {
+            console.debug('In open method: Opening Time Tracking Drawer but not good one');
+          },
+        },
+        vuetify: Vue.prototype.vuetifyOptions,
+        i18n,
+      }, `#${appId}`, 'Time Tracker Quick Action');
+    }));
+}

time-tracker-webapps/src/main/webapp/vue-app/quick-actions/extensions.js

@@ -50,4 +50,4 @@ const config = {
     ]
 };
 
-module.exports = config;
+module.exports = config;