Implemented: Miscellaneous page in job-manager(#364ttxy)

src/components/Menu.vue

@@ -53,7 +53,7 @@ import {
 } from "@ionic/vue";
 import { defineComponent, ref } from "vue";
 import { mapGetters } from "vuex";
-import { pulseOutline, calendarNumberOutline, ticketOutline, albumsOutline, shirtOutline, settings, iceCreamOutline } from "ionicons/icons";
+import { pulseOutline, calendarNumberOutline, ticketOutline, albumsOutline, shirtOutline, settings, iceCreamOutline, libraryOutline } from "ionicons/icons";
 import { useStore } from "@/store";
 export default defineComponent({
   name: "Menu",
@@ -140,6 +140,13 @@ export default defineComponent({
         mdIcon: shirtOutline,
         dependsOnBaseURL: false
       },
+      {
+        title: "Miscellaneous",
+        url: "/miscellaneous",
+        iosIcon: libraryOutline,
+        mdIcon: libraryOutline,
+        dependsOnBaseURL: false
+      },
       {
         title: "Settings",
         url: "/settings",
@@ -161,7 +168,8 @@ export default defineComponent({
       shirtOutline,
       settings,
       iceCreamOutline,
-      store
+      store,
+      libraryOutline
     };
   },
 });

src/locales/en.json

@@ -77,6 +77,8 @@
   "Last Shopify Order ID": "Last Shopify Order ID",
   "Login": "Login",
   "Logout": "Logout",
+  "Miscellaneous": "Miscellaneous",
+  "Miscellaneous jobs": "Miscellaneous jobs",
   "More options": "More options",
   "New broker run": "New broker run",
   "New orders": "New orders",

src/router/index.ts

@@ -7,6 +7,7 @@ import PreOrder from '@/views/PreOrder.vue'
 import Orders from '@/views/Orders.vue'
 import JobDetails from '@/views/JobDetails.vue'
 import InitialLoad from '@/views/InitialLoad.vue'
+import Miscellaneous from '@/views/Miscellaneous.vue'
 import Login from '@/views/Login.vue'
 import Settings from "@/views/Settings.vue"
 import store from '@/store'
@@ -74,6 +75,12 @@ const routes: Array<RouteRecordRaw> = [
     component: InitialLoad,
     beforeEnter: authGuard
   },
+  {  
+    path: '/miscellaneous',
+    name: 'Miscellaneous',
+    component: Miscellaneous,
+    beforeEnter: authGuard
+  },
   {
     path: '/login',
     name: 'Login',

src/store/modules/job/JobState.ts

@@ -11,7 +11,11 @@ export default interface JobState {
     history: {
       list: any,
       total: 0
-    },
+    }
+    miscellaneous: {
+      list: any,
+      total: 0
+    }
     current: any;
     temporalExp: any;
     enumIds: any;

src/store/modules/job/actions.ts

@@ -248,6 +248,57 @@ const actions: ActionTree<JobState, RootState> = {
       showToast(translate("Something went wrong"));
     })
   },
+  async fetchMiscellaneousJobs({ commit, dispatch, state }, payload){
+    const params = {
+      "inputFields": {
+        "enumTypeId": "MISC_SYS_JOB",
+        "statusId": ["SERVICE_PENDING", "SERVICE_DRAFT"],
+        "statusId_op": "in",
+        "systemJobEnumId_op": "not-empty"
+      } as any,
+      "fieldList": [ "systemJobEnumId", "runTime", "tempExprId", "parentJobId", "serviceName", "jobId", "jobName", "currentRetryCount", "statusId", "enumName" ],
+      "noConditionFind": "Y",
+      "viewSize": payload.viewSize,
+      "viewIndex": payload.viewIndex,
+    }
+
+    if(payload.eComStoreId) {
+      params.inputFields["productStoreId"] = payload.eComStoreId
+    } else {
+      params.inputFields["productStoreId_op"] = "empty"
+    }
+
+    await JobService.fetchJobInformation(params).then((resp) => {
+      if (resp.status === 200 && !hasError(resp) && resp.data.docs?.length > 0) {
+        const total = resp.data.count;
+        let jobs = resp.data.docs.map((job: any) => {
+          return {
+            ...job,
+            'status': job?.statusId
+          }
+        })
+        if(payload.viewIndex && payload.viewIndex > 0){
+          jobs = state.miscellaneous.list.concat(resp.data.docs);
+        }
+        commit(types.JOB_MISCELLANEOUS_UPDATED, { jobs, total });
+        const tempExprList = [] as any;
+        const enumIds = [] as any;
+        resp.data.docs.map((item: any) => {
+          enumIds.push(item.systemJobEnumId);
+          tempExprList.push(item.tempExprId);
+        })
+        const tempExpr = [...new Set(tempExprList)];
+        dispatch('fetchTemporalExpression', tempExpr);
+        dispatch('fetchJobDescription', enumIds);
+      } else {
+        commit(types.JOB_MISCELLANEOUS_UPDATED, { jobs: [], total: 0 });
+      }
+    }).catch((err) => {
+      commit(types.JOB_MISCELLANEOUS_UPDATED, { jobs: [], total: 0 });
+      console.error(err);
+      showToast(translate("Something went wrong"));
+    })
+  },
   async fetchTemporalExpression({ state, commit }, tempExprIds){
     const tempIds = [] as any;
     const cachedTempExprId = Object.keys(state.temporalExp);

src/store/modules/job/getters.ts

@@ -50,7 +50,13 @@ const getters: GetterTree <JobState, RootState> = {
     },
     getCurrentJob (state) {
       return state.current;
-    }
+    },
+    getMiscellaneousJobs (state){
+      return state.miscellaneous.list;
+    },
+    isMiscellaneousJobsScrollable: (state) => {
+      return state.miscellaneous.list?.length > 0 && state.miscellaneous.list?.length < state.miscellaneous.total
+    },
   }
 
   export default getters;

src/store/modules/job/index.ts

@@ -21,6 +21,10 @@ const jobModule: Module<JobState, RootState> = {
         list: [],
         total: 0
       },
+      miscellaneous: {
+        list: [],
+        total: 0
+      },
       temporalExp: [],
       enumIds: {},
       current: {},

src/store/modules/job/mutation-types.ts

@@ -6,4 +6,5 @@ export const JOB_TEMPORAL_EXPRESSION_UPDATED = SN_JOB + '/TEMPORAL_EXPRESSION_UP
 export const JOB_DESCRIPTION_UPDATED = SN_JOB + '/DESCRIPTION_UPDATED'
 export const JOB_HISTORY_UPDATED = SN_JOB + '/HISTORY_UPDATED'
 export const JOB_RUNNING_UPDATED = SN_JOB + '/RUNNING_UPDATED'
-export const JOB_CURRENT_UPDATED = SN_JOB + '/CURRENT_UPDATED'
+export const JOB_CURRENT_UPDATED = SN_JOB + '/CURRENT_UPDATED'
+export const JOB_MISCELLANEOUS_UPDATED = SN_JOB + '/MISCELLANEOUS_UPDATED'

src/store/modules/job/mutations.ts

@@ -40,6 +40,10 @@ const mutations: MutationTree <JobState> = {
     },
     [types.JOB_CURRENT_UPDATED] (state, payload){
         state.current = payload
+    },
+    [types.JOB_MISCELLANEOUS_UPDATED] (state, payload){
+        state.miscellaneous.list = payload.jobs;
+        state.miscellaneous.total = payload.total;
     }
 }
 export default mutations;

src/views/Miscellaneous.vue

@@ -0,0 +1,148 @@
+<template>
+  <ion-page>
+    <ion-header :translucent="true">
+      <ion-toolbar>
+        <ion-menu-button slot="start" />
+        <ion-title>{{ $t("Miscellaneous") }}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <main>
+        <section>
+          <ion-list>
+            <ion-list-header>{{ $t("Miscellaneous jobs") }}</ion-list-header>
+            <ion-item v-for="job in miscellaneousJobs" :key="job.jobId" @click="viewJobConfiguration(job)">
+              <ion-label>{{ job.jobName }}</ion-label>
+              <ion-badge v-if="job.runTime" color="light">{{ timeFromNow(job.runTime)}}</ion-badge>
+              <ion-icon slot="end" :icon="chevronForwardOutline" />
+            </ion-item>
+          </ion-list>
+
+          <ion-infinite-scroll @ionInfinite="loadMoreMiscellaneousJobs($event)" threshold="100px" :disabled="!isMiscellaneousJobsScrollable">
+            <ion-infinite-scroll-content loading-spinner="crescent" :loading-text="$t('Loading')"/>
+          </ion-infinite-scroll>
+        </section>
+
+        <aside class="desktop-only" v-if="isDesktop" v-show="currentJob && Object.keys(currentJob).length">
+          <JobConfiguration :title="title" :status="currentJobStatus" :key="currentJob"/>
+        </aside>
+      </main>
+    </ion-content>
+  </ion-page>      
+</template>
+
+<script lang="ts">
+import { DateTime } from 'luxon';
+import {
+  IonBadge,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonInfiniteScroll,
+  IonInfiniteScrollContent,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonListHeader,
+  IonMenuButton,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+  isPlatform,
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+import { useRouter } from 'vue-router'
+import { mapGetters, useStore } from 'vuex'
+import emitter from '@/event-bus';
+import JobConfiguration from '@/components/JobConfiguration.vue';
+import { chevronForwardOutline } from "ionicons/icons";
+
+export default defineComponent({
+  name: 'Miscellaneous',
+  components: {
+    IonBadge,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonInfiniteScroll,
+    IonInfiniteScrollContent,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonListHeader,
+    IonMenuButton,
+    IonPage,
+    IonTitle,
+    IonToolbar,
+    JobConfiguration
+  },
+  mounted() {
+    this.getMiscellaneousJobs();
+  },
+  data() {
+    return {
+      title: '',
+      currentJobStatus: '',
+      isJobDetailAnimationCompleted: false,
+      isDesktop: isPlatform('desktop')
+    }
+  },
+  computed: {
+    ...mapGetters({
+      miscellaneousJobs: 'job/getMiscellaneousJobs',
+      getCurrentEComStore:'user/getCurrentEComStore',
+      currentJob: 'job/getCurrentJob',
+      isMiscellaneousJobsScrollable: 'job/isMiscellaneousJobsScrollable'
+    })
+  },
+  methods: {
+    async viewJobConfiguration(job: any) {
+      this.title = job.jobName
+      this.currentJobStatus = job.tempExprId
+
+      await this.store.dispatch('job/updateCurrentJob', { job });
+      if(!this.isDesktop && job?.jobId) {
+        this.router.push({name: 'JobDetails', params: { title: this.title, jobId: job?.jobId, category: "miscellaneous"}});
+        return;
+      }
+
+      if (job && !this.isJobDetailAnimationCompleted) {
+        emitter.emit('playAnimation');
+        this.isJobDetailAnimationCompleted = true;
+      }
+    },
+    async getMiscellaneousJobs(viewSize = process.env.VUE_APP_VIEW_SIZE, viewIndex = '0') {
+      await this.store.dispatch('job/fetchMiscellaneousJobs', {eComStoreId: this.getCurrentEComStore.productStoreId, viewSize, viewIndex});
+    },
+    async loadMoreMiscellaneousJobs (event: any) {
+      this.getMiscellaneousJobs(
+        undefined,
+        Math.ceil(this.miscellaneousJobs.length / (process.env.VUE_APP_VIEW_SIZE as any)).toString()
+      ).then(() => {
+        event.target.complete();
+      })
+    },
+    timeFromNow (time: any) {
+      const timeDiff = DateTime.fromMillis(time).diff(DateTime.local());
+      return DateTime.local().plus(timeDiff).toRelative();
+    },
+  },
+  setup() {
+    const store = useStore();
+    const router = useRouter();
+
+    return {
+      chevronForwardOutline,
+      router,
+      store,
+    };
+  },
+})
+</script>
+
+<style scoped>
+main > section {
+  width: 423px;
+}
+</style>