Misc: homepage widget with tickets, and improvements in ticket list

src/Bundle/ChillMainBundle/Resources/public/vuejs/HomepageWidget/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <h2>{{ $t("main_title") }}</h2>
+  <h2>{{ trans(MAIN_TITLE) }}</h2>
 
   <ul class="nav nav-tabs">
     <li class="nav-item">
@@ -11,14 +11,24 @@
         <i class="fa fa-dashboard" />
       </a>
     </li>
+    <li class="nav-item">
+      <a
+        class="nav-link"
+        :class="{ active: activeTab === 'MyTickets' }"
+        @click="selectTab('MyTickets')"
+      >
+        {{ trans(MY_TICKETS_TAB) }}
+        <tab-counter :count="ticketListState.value?.count || 0" />
+      </a>
+    </li>
     <li class="nav-item">
       <a
         class="nav-link"
         :class="{ active: activeTab === 'MyNotifications' }"
         @click="selectTab('MyNotifications')"
       >
-        {{ $t("my_notifications.tab") }}
-        <tab-counter :count="state.notifications.count" />
+        {{ trans(MY_NOTIFICATIONS_TAB) }}
+        <tab-counter :count="state.value?.notifications?.count || 0" />
       </a>
     </li>
     <li class="nav-item">
@@ -27,25 +37,17 @@
         :class="{ active: activeTab === 'MyAccompanyingCourses' }"
         @click="selectTab('MyAccompanyingCourses')"
       >
-        {{ $t("my_accompanying_courses.tab") }}
+        {{ trans(MY_ACCOMPANYING_COURSES_TAB) }}
       </a>
     </li>
-    <!-- <li class="nav-item">
-         <a class="nav-link"
-            :class="{'active': activeTab === 'MyWorks'}"
-            @click="selectTab('MyWorks')">
-            {{ $t('my_works.tab') }}
-            <tab-counter :count="state.works.count"></tab-counter>
-         </a>
-      </li> -->
     <li class="nav-item">
       <a
         class="nav-link"
         :class="{ active: activeTab === 'MyEvaluations' }"
         @click="selectTab('MyEvaluations')"
       >
-        {{ $t("my_evaluations.tab") }}
-        <tab-counter :count="state.evaluations.count" />
+        {{ trans(MY_EVALUATIONS_TAB) }}
+        <tab-counter :count="state.value?.evaluations?.count || 0" />
       </a>
     </li>
     <li class="nav-item">
@@ -54,9 +56,12 @@
         :class="{ active: activeTab === 'MyTasks' }"
         @click="selectTab('MyTasks')"
       >
-        {{ $t("my_tasks.tab") }}
+        {{ trans(MY_TASKS_TAB) }}
         <tab-counter
-          :count="state.tasks.warning.count + state.tasks.alert.count"
+          :count="
+            (state.value?.tasks?.warning?.count || 0) +
+            (state.value?.tasks?.alert?.count || 0)
+          "
         />
       </a>
     </li>
@@ -66,19 +71,25 @@
         :class="{ active: activeTab === 'MyWorkflows' }"
         @click="selectTab('MyWorkflows')"
       >
-        {{ $t("my_workflows.tab") }}
-        <tab-counter :count="state.workflows.count + state.workflowsCc.count" />
+        {{ trans(MY_WORKFLOWS_TAB) }}
+        <tab-counter
+          :count="
+            (state.value?.workflows?.count || 0) +
+            (state.value?.workflowsCc?.count || 0)
+          "
+        />
       </a>
     </li>
     <li class="nav-item loading ms-auto py-2" v-if="loading">
       <i
         class="fa fa-circle-o-notch fa-spin fa-lg text-chill-gray"
-        :title="$t('loading')"
+        :title="trans(LOADING)"
       />
     </li>
   </ul>
 
   <div class="my-4">
+    <my-tickets v-if="activeTab == 'MyTickets'" />
     <my-customs v-if="activeTab === 'MyCustoms'" />
     <my-works v-else-if="activeTab === 'MyWorks'" />
     <my-evaluations v-else-if="activeTab === 'MyEvaluations'" />
@@ -91,63 +102,58 @@
   </div>
 </template>
 
-<script>
-import MyCustoms from "./MyCustoms";
-import MyWorks from "./MyWorks";
-import MyEvaluations from "./MyEvaluations";
-import MyTasks from "./MyTasks";
-import MyAccompanyingCourses from "./MyAccompanyingCourses";
-import MyNotifications from "./MyNotifications";
+<script lang="ts" setup>
+import { ref, computed, onMounted } from "vue";
+import { useStore } from "vuex";
+import MyCustoms from "./MyCustoms.vue";
+import MyWorks from "./MyWorks.vue";
+import MyEvaluations from "./MyEvaluations.vue";
+import MyTasks from "./MyTasks.vue";
+import MyAccompanyingCourses from "./MyAccompanyingCourses.vue";
+import MyNotifications from "./MyNotifications.vue";
 import MyWorkflows from "./MyWorkflows.vue";
-import TabCounter from "./TabCounter";
-import { mapState } from "vuex";
+import MyTickets from "./MyTickets.vue";
+import TabCounter from "./TabCounter.vue";
+import {
+  MAIN_TITLE,
+  MY_TICKETS_TAB,
+  MY_EVALUATIONS_TAB,
+  MY_TASKS_TAB,
+  MY_ACCOMPANYING_COURSES_TAB,
+  MY_NOTIFICATIONS_TAB,
+  MY_WORKFLOWS_TAB,
+  LOADING,
+  trans,
+} from "translator";
+const store = useStore();
 
-export default {
-  name: "App",
-  components: {
-    MyCustoms,
-    MyWorks,
-    MyEvaluations,
-    MyTasks,
-    MyWorkflows,
-    MyAccompanyingCourses,
-    MyNotifications,
-    TabCounter,
-  },
-  data() {
-    return {
-      activeTab: "MyCustoms",
-    };
-  },
-  computed: {
-    ...mapState(["loading"]),
-    // just to see all in devtool :
-    ...mapState({
-      state: (state) => state,
-    }),
-  },
-  methods: {
-    selectTab(tab) {
-      if (tab !== "MyCustoms") {
-        this.$store.dispatch("getByTab", { tab: tab });
-      }
-      this.activeTab = tab;
-      console.log(this.activeTab);
-    },
-  },
-  mounted() {
-    for (const m of [
-      "MyNotifications",
-      "MyAccompanyingCourses",
-      // 'MyWorks',
-      "MyEvaluations",
-      "MyTasks",
-      "MyWorkflows",
-    ]) {
-      this.$store.dispatch("getByTab", { tab: m, param: "countOnly=1" });
-    }
-  },
-};
+const activeTab = ref("MyCustoms");
+
+const loading = computed(() => store.state.loading);
+
+const state = computed(() => store.state.homepage);
+const ticketListState = computed(() => store.state.ticketList);
+
+function selectTab(tab: string) {
+  if (tab !== "MyCustoms") {
+    store.dispatch("getByTab", { tab: tab });
+  }
+  activeTab.value = tab;
+}
+
+onMounted(() => {
+  for (const m of [
+    "MyTickets",
+    "MyNotifications",
+    "MyAccompanyingCourses",
+    // 'MyWorks',
+    "MyEvaluations",
+    "MyTasks",
+    "MyWorkflows",
+  ]) {
+    store.dispatch("getByTab", { tab: m, param: "countOnly=1" });
+  }
+});
 </script>
 
 <style scoped>