Merge pull request #21889 from mshima/skip_ci-vue2-filters

Drop vue2-filters
jhipster · Apr 23, 2023 · f92e67f · f92e67f
2 parents c506a08 + e676c4a
commit f92e67f
Show file tree

Hide file tree

Showing 17 changed files with 235 additions and 64 deletions.
diff --git a/generators/vue/__snapshots__/generator.spec.mts.snap b/generators/vue/__snapshots__/generator.spec.mts.snap
@@ -200,6 +200,12 @@ exports[`generator - vue gateway-jwt-skipUserManagement(true)-withAdminUi(false)
   "src/app/shared/alert/alert.service.ts": {
     "stateCleared": "modified",
   },
+  "src/app/shared/computables/arrays.ts": {
+    "stateCleared": "modified",
+  },
+  "src/app/shared/computables/index.ts": {
+    "stateCleared": "modified",
+  },
   "src/app/shared/config/axios-interceptor.ts": {
     "stateCleared": "modified",
   },
@@ -691,6 +697,12 @@ exports[`generator - vue gateway-oauth2-withAdminUi(true)-skipJhipsterDependenci
   "src/app/shared/alert/alert.service.ts": {
     "stateCleared": "modified",
   },
+  "src/app/shared/computables/arrays.ts": {
+    "stateCleared": "modified",
+  },
+  "src/app/shared/computables/index.ts": {
+    "stateCleared": "modified",
+  },
   "src/app/shared/config/axios-interceptor.ts": {
     "stateCleared": "modified",
   },
@@ -1161,6 +1173,12 @@ exports[`generator - vue microservice-jwt-skipUserManagement(false)-withAdminUi(
   "src/app/shared/alert/alert.service.ts": {
     "stateCleared": "modified",
   },
+  "src/app/shared/computables/arrays.ts": {
+    "stateCleared": "modified",
+  },
+  "src/app/shared/computables/index.ts": {
+    "stateCleared": "modified",
+  },
   "src/app/shared/config/axios-interceptor.ts": {
     "stateCleared": "modified",
   },
@@ -1610,6 +1628,12 @@ exports[`generator - vue microservice-oauth2-withAdminUi(true)-skipJhipsterDepen
   "src/main/webapp2/app/shared/alert/alert.service.ts": {
     "stateCleared": "modified",
   },
+  "src/main/webapp2/app/shared/computables/arrays.ts": {
+    "stateCleared": "modified",
+  },
+  "src/main/webapp2/app/shared/computables/index.ts": {
+    "stateCleared": "modified",
+  },
   "src/main/webapp2/app/shared/config/axios-interceptor.ts": {
     "stateCleared": "modified",
   },
@@ -2185,6 +2209,12 @@ exports[`generator - vue monolith-jwt-skipUserManagement(false)-withAdminUi(true
   "src/main/webapp2/app/shared/alert/alert.service.ts": {
     "stateCleared": "modified",
   },
+  "src/main/webapp2/app/shared/computables/arrays.ts": {
+    "stateCleared": "modified",
+  },
+  "src/main/webapp2/app/shared/computables/index.ts": {
+    "stateCleared": "modified",
+  },
   "src/main/webapp2/app/shared/config/axios-interceptor.ts": {
     "stateCleared": "modified",
   },
@@ -2670,6 +2700,12 @@ exports[`generator - vue monolith-oauth2-withAdminUi(false)-skipJhipsterDependen
   "src/main/webapp/app/shared/alert/alert.service.ts": {
     "stateCleared": "modified",
   },
+  "src/main/webapp/app/shared/computables/arrays.ts": {
+    "stateCleared": "modified",
+  },
+  "src/main/webapp/app/shared/computables/index.ts": {
+    "stateCleared": "modified",
+  },
   "src/main/webapp/app/shared/config/axios-interceptor.ts": {
     "stateCleared": "modified",
   },
@@ -3104,6 +3140,12 @@ exports[`generator - vue monolith-session-skipUserManagement(true)-withAdminUi(f
   "src/main/webapp/app/shared/alert/alert.service.ts": {
     "stateCleared": "modified",
   },
+  "src/main/webapp/app/shared/computables/arrays.ts": {
+    "stateCleared": "modified",
+  },
+  "src/main/webapp/app/shared/computables/index.ts": {
+    "stateCleared": "modified",
+  },
   "src/main/webapp/app/shared/config/axios-interceptor.ts": {
     "stateCleared": "modified",
   },

diff --git a/generators/vue/files-vue.mjs b/generators/vue/files-vue.mjs
@@ -112,6 +112,8 @@ export const vueFiles = {
         'core/ribbon/ribbon.vue',
         'core/ribbon/ribbon.component.ts',
         'shared/date/filters.ts',
+        'shared/computables/arrays.ts',
+        'shared/computables/index.ts',
         'shared/sort/jhi-sort-indicator.component.ts',
         'shared/sort/jhi-sort-indicator.vue',
         'shared/sort/sorts.ts',

diff --git a/generators/vue/templates/package.json b/generators/vue/templates/package.json
@@ -8,15 +8,12 @@
     "bootstrap-vue": "2.23.1",
     "bootswatch": "5.2.3",
     "vue": "2.7.14",
-    "vue-class-component": "7.2.6",
     "vue-cookie": "1.1.4",
     "vue-infinite-loading": "2.4.5",
     "vue-router": "3.6.5",
     "vue-i18n": "8.28.2",
-    "vue-property-decorator": "9.1.2",
     "vuelidate": "0.7.7",
-    "vuex": "3.6.2",
-    "vue2-filters": "0.14.0"
+    "vuex": "3.6.2"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "1.2.0",

diff --git a/generators/vue/templates/package.json.ejs b/generators/vue/templates/package.json.ejs
@@ -46,7 +46,6 @@
     "vue-i18n": "<%= nodeDependencies['vue-i18n'] %>",
     "vue-infinite-loading": "<%= nodeDependencies['vue-infinite-loading'] %>",
     "vue-router": "<%= nodeDependencies['vue-router'] %>",
-    "vue2-filters": "<%= nodeDependencies['vue2-filters'] %>",
     "vuelidate": "<%= nodeDependencies['vuelidate'] %>",
     "vuex": "<%= nodeDependencies['vuex'] %>"
   },

diff --git a/...tors/vue/templates/src/main/webapp/app/admin/configuration/configuration.component.ts.ejs b/...tors/vue/templates/src/main/webapp/app/admin/configuration/configuration.component.ts.ejs
@@ -1,10 +1,10 @@
-import { defineComponent, inject, ref, Ref } from 'vue';
-import Vue2Filters from 'vue2-filters';
+import { computed, defineComponent, inject, ref, Ref } from 'vue';
+
+import { orderAndFilterBy } from '@/shared/computables';
 import ConfigurationService from './configuration.service';
 
 export default defineComponent({
   name: '<%=jhiPrefixCapitalized%>Configuration',
-  mixins: [Vue2Filters.mixin],
   setup() {
     const configurationService = inject('configurationService', () => new ConfigurationService(), true);
 
@@ -15,6 +15,14 @@ export default defineComponent({
     const configKeys: Ref<any[]> = ref([]);
     const filtered = ref('');
 
+    const filteredConfiguration = computed(() =>
+      orderAndFilterBy(configuration.value, {
+        filterByTerm: filtered.value,
+        orderByProp: orderProp.value,
+        reverse: reverse.value,
+      })
+    );
+
     return {
       configurationService,
       orderProp,
@@ -23,6 +31,7 @@ export default defineComponent({
       configuration,
       configKeys,
       filtered,
+      filteredConfiguration,
     };
   },
   mounted() {

diff --git a/generators/vue/templates/src/main/webapp/app/admin/configuration/configuration.vue.ejs b/generators/vue/templates/src/main/webapp/app/admin/configuration/configuration.vue.ejs
@@ -3,22 +3,21 @@
     <h2 id="configuration-page-heading" v-text="$t('configuration.title')" data-cy="configurationPageHeading">Configuration</h2>
 
     <div v-if="allConfiguration && configuration">
-      <span v-text="$t('configuration.filter')">Filter (by prefix)</span> <input type="text" v-model="filtered"
-        class="form-control" />
+      <span v-text="$t('configuration.filter')">Filter (by prefix)</span> <input type="text" v-model="filtered" class="form-control" />
       <h3>Spring configuration</h3>
       <table class="table table-striped table-bordered table-responsive d-table" aria-describedby="Configuration">
         <thead>
           <tr>
-            <th class="w-40" v-on:click="changeOrder('prefix')" scope="col"><span
-                v-text="$t('configuration.table.prefix')">Prefix</span></th>
+            <th class="w-40" v-on:click="changeOrder('prefix')" scope="col">
+              <span v-text="$t('configuration.table.prefix')">Prefix</span>
+            </th>
             <th class="w-60" v-on:click="changeOrder('properties')" scope="col">
               <span v-text="$t('configuration.table.properties')">Properties</span>
             </th>
           </tr>
         </thead>
         <tbody>
-          <tr v-for="entry in orderBy(filterBy(configuration, filtered), orderProp, reverse ? 1 : -1)"
-            :key="entry.prefix">
+          <tr v-for="entry in filteredConfiguration" :key="entry.prefix">
             <td>
               <span>{{ entry.prefix }}</span>
             </td>

diff --git a/generators/vue/templates/src/main/webapp/app/admin/logs/logs.component.ts.ejs b/generators/vue/templates/src/main/webapp/app/admin/logs/logs.component.ts.ejs
@@ -1,24 +1,32 @@
-import { defineComponent, inject, ref, Ref } from 'vue';
-import Vue2Filters from 'vue2-filters';
+import { computed, defineComponent, inject, ref, Ref } from 'vue';
+
+import { orderAndFilterBy } from '@/shared/computables';
 import LogsService from './logs.service';
 
 export default defineComponent({
   name: '<%=jhiPrefixCapitalized%>Logs',
-  mixins: [Vue2Filters.mixin],
   setup() {
     const logsService = inject('logsService', () => new LogsService(), true);
 
     const loggers: Ref<any[]> = ref([]);
     const filtered = ref('');
     const orderProp = ref('name');
     const reverse = ref(false);
+    const filteredLoggers = computed(() =>
+      orderAndFilterBy(loggers.value, {
+        filterByTerm: filtered.value,
+        orderByProp: orderProp.value,
+        reverse: reverse.value,
+      })
+    );
 
     return {
       logsService,
       loggers,
       filtered,
       orderProp,
       reverse,
+      filteredLoggers,
     };
   },
   mounted() {

diff --git a/generators/vue/templates/src/main/webapp/app/admin/logs/logs.vue.ejs b/generators/vue/templates/src/main/webapp/app/admin/logs/logs.vue.ejs
@@ -15,34 +15,51 @@
           </tr>
         </thead>
 
-        <tr v-for="logger in orderBy(filterBy(loggers, filtered), orderProp, reverse === true ? 1 : -1)"
-          :key="logger.name">
+        <tr v-for="logger in filteredLoggers" :key="logger.name">
           <td>
             <small>{{ logger.name }}</small>
           </td>
           <td>
-            <button v-on:click="updateLevel(logger.name, 'TRACE')"
-              :class="logger.level === 'TRACE' ? 'btn-primary' : 'btn-light'" class="btn btn-sm">
+            <button
+              v-on:click="updateLevel(logger.name, 'TRACE')"
+              :class="logger.level === 'TRACE' ? 'btn-primary' : 'btn-light'"
+              class="btn btn-sm"
+            >
               TRACE
             </button>
-            <button v-on:click="updateLevel(logger.name, 'DEBUG')"
-              :class="logger.level === 'DEBUG' ? 'btn-success' : 'btn-light'" class="btn btn-sm">
+            <button
+              v-on:click="updateLevel(logger.name, 'DEBUG')"
+              :class="logger.level === 'DEBUG' ? 'btn-success' : 'btn-light'"
+              class="btn btn-sm"
+            >
               DEBUG
             </button>
-            <button v-on:click="updateLevel(logger.name, 'INFO')"
-              :class="logger.level === 'INFO' ? 'btn-info' : 'btn-light'" class="btn btn-sm">
+            <button
+              v-on:click="updateLevel(logger.name, 'INFO')"
+              :class="logger.level === 'INFO' ? 'btn-info' : 'btn-light'"
+              class="btn btn-sm"
+            >
               INFO
             </button>
-            <button v-on:click="updateLevel(logger.name, 'WARN')"
-              :class="logger.level === 'WARN' ? 'btn-warning' : 'btn-light'" class="btn btn-sm">
+            <button
+              v-on:click="updateLevel(logger.name, 'WARN')"
+              :class="logger.level === 'WARN' ? 'btn-warning' : 'btn-light'"
+              class="btn btn-sm"
+            >
               WARN
             </button>
-            <button v-on:click="updateLevel(logger.name, 'ERROR')"
-              :class="logger.level === 'ERROR' ? 'btn-danger' : 'btn-light'" class="btn btn-sm">
+            <button
+              v-on:click="updateLevel(logger.name, 'ERROR')"
+              :class="logger.level === 'ERROR' ? 'btn-danger' : 'btn-light'"
+              class="btn btn-sm"
+            >
               ERROR
             </button>
-            <button v-on:click="updateLevel(logger.name, 'OFF')"
-              :class="logger.level === 'OFF' ? 'btn-secondary' : 'btn-light'" class="btn btn-sm">
+            <button
+              v-on:click="updateLevel(logger.name, 'OFF')"
+              :class="logger.level === 'OFF' ? 'btn-secondary' : 'btn-light'"
+              class="btn btn-sm"
+            >
               OFF
             </button>
           </td>

diff --git a/generators/vue/templates/src/main/webapp/app/admin/metrics/metrics-modal.component.ts.ejs b/generators/vue/templates/src/main/webapp/app/admin/metrics/metrics-modal.component.ts.ejs
@@ -1,5 +1,6 @@
 import { defineComponent, ref, Ref, computed, PropType } from 'vue';
-import Vue2Filters from 'vue2-filters';
+
+import { filterBy } from '@/shared/computables';
 
 export default defineComponent({
   name: '<%=jhiPrefixCapitalized%>MetricsModal',
@@ -8,9 +9,9 @@ export default defineComponent({
       type: Array as PropType<any[]>,
     },
   },
-  mixins: [Vue2Filters.mixin],
   setup(props) {
-    const threadDumpFilter: Ref<any> = ref(null);
+    const threadDumpFilter: Ref<any> = ref('');
+    const filteredThreadDump = computed(() => filterBy(props.threadDump, { filterByTerm: threadDumpFilter.value }));
 
     const threadDumpData = computed(() => {
       const data = {
@@ -40,6 +41,7 @@ export default defineComponent({
     return {
       threadDumpFilter,
       threadDumpData,
+      filteredThreadDump,
     };
   },
   methods: {

diff --git a/generators/vue/templates/src/main/webapp/app/admin/metrics/metrics-modal.vue.ejs b/generators/vue/templates/src/main/webapp/app/admin/metrics/metrics-modal.vue.ejs
@@ -1,23 +1,27 @@
 <template>
   <div class="modal-body">
-    <span class="badge badge-primary" v-on:click="threadDumpFilter = ''">All&nbsp;<span
-        class="badge badge-pill badge-default">{{ threadDumpData.threadDumpAll }}</span></span>&nbsp;
-    <span class="badge badge-success" v-on:click="threadDumpFilter = 'RUNNABLE'">Runnable&nbsp;<span
-        class="badge badge-pill badge-default">{{ threadDumpData.threadDumpRunnable }}</span></span>&nbsp;
-    <span class="badge badge-info" v-on:click="threadDumpFilter = 'WAITING'">Waiting&nbsp;<span
-        class="badge badge-pill badge-default">{{ threadDumpData.threadDumpWaiting }}</span></span>&nbsp;
-    <span class="badge badge-warning" v-on:click="threadDumpFilter = 'TIMED_WAITING'">Timed Waiting&nbsp;<span
-        class="badge badge-pill badge-default">{{ threadDumpData.threadDumpTimedWaiting }}</span></span>&nbsp;
-    <span class="badge badge-danger" v-on:click="threadDumpFilter = 'BLOCKED'">Blocked&nbsp;<span
-        class="badge badge-pill badge-default">{{ threadDumpData.threadDumpBlocked }}</span></span>&nbsp;
+    <span class="badge badge-primary" v-on:click="threadDumpFilter = ''"
+      >All&nbsp;<span class="badge badge-pill badge-default">{{ threadDumpData.threadDumpAll }}</span></span
+    >&nbsp;
+    <span class="badge badge-success" v-on:click="threadDumpFilter = 'RUNNABLE'"
+      >Runnable&nbsp;<span class="badge badge-pill badge-default">{{ threadDumpData.threadDumpRunnable }}</span></span
+    >&nbsp;
+    <span class="badge badge-info" v-on:click="threadDumpFilter = 'WAITING'"
+      >Waiting&nbsp;<span class="badge badge-pill badge-default">{{ threadDumpData.threadDumpWaiting }}</span></span
+    >&nbsp;
+    <span class="badge badge-warning" v-on:click="threadDumpFilter = 'TIMED_WAITING'"
+      >Timed Waiting&nbsp;<span class="badge badge-pill badge-default">{{ threadDumpData.threadDumpTimedWaiting }}</span></span
+    >&nbsp;
+    <span class="badge badge-danger" v-on:click="threadDumpFilter = 'BLOCKED'"
+      >Blocked&nbsp;<span class="badge badge-pill badge-default">{{ threadDumpData.threadDumpBlocked }}</span></span
+    >&nbsp;
     <div class="mt-2">&nbsp;</div>
     Filter
     <input type="text" v-model="threadDumpFilter" class="form-control" />
-    <div class="pad" v-for="(entry, key) of filterBy(threadDump, threadDumpFilter)" :key="key">
+    <div class="pad" v-for="(entry, key) of filteredThreadDump" :key="key">
       <h6>
-        <span class="badge"
-          :class="getBadgeClass(entry.threadState)">{{ entry.threadState }}</span>&nbsp;{{ entry.threadName }} (ID
-        {{ entry.threadId }})
+        <span class="badge" :class="getBadgeClass(entry.threadState)">{{ entry.threadState }}</span
+        >&nbsp;{{ entry.threadName }} (ID {{ entry.threadId }})
         <a v-on:click="entry.show = !entry.show" href="javascript:void(0);">
           <span :hidden="entry.show" v-text="$t('metrics.jvm.threads.dump.show')">Show StackTrace</span>
           <span :hidden="!entry.show" v-text="$t('metrics.jvm.threads.dump.hide')">Hide StackTrace</span>
@@ -26,7 +30,10 @@
       <div class="card" :hidden="!entry.show">
         <div class="card-body">
           <div v-for="(st, key) of entry.stackTrace" :key="key" class="break">
-            <samp>{{ st.className }}.{{ st.methodName }}(<code>{{ st.fileName }}:{{ st.lineNumber }}</code>)</samp>
+            <samp
+              >{{ st.className }}.{{ st.methodName }}(<code>{{ st.fileName }}:{{ st.lineNumber }}</code
+              >)</samp
+            >
             <span class="mt-1"></span>
           </div>
         </div>

diff --git a/.../vue/templates/src/main/webapp/app/admin/user-management/user-management.component.ts.ejs b/.../vue/templates/src/main/webapp/app/admin/user-management/user-management.component.ts.ejs
@@ -1,12 +1,10 @@
-import Vue2Filters from 'vue2-filters';
 import UserManagementService from './user-management.service';
 import AlertService from '@/shared/alert/alert.service';
 import { computed, defineComponent, inject, Ref, ref } from 'vue';
 import { useStore } from '@/store';
 
 export default defineComponent({
   name: '<%=jhiPrefixCapitalized%>UserManagementComponent',
-  mixins: [Vue2Filters.mixin],
   mounted(): void {
     this.loadAll();
   },