11<template >
22 <v-select
3+ v-model =" activePresetId"
34 clearable
45 :items =" presets"
56 item-text =" name"
1011 @focus =" fetchPresets"
1112 @click:clear =" handleClear"
1213 >
14+ <template #selection =" { item } " >
15+ <span :class =" { 'preset-modified': isModified }" >
16+ {{ item.name }}<template v-if =" isModified " > *</template >
17+ </span >
18+ </template >
19+
1320 <template #item =" { item } " >
1421 <v-list-item-content
1522 @click =" applyPreset(item.id)"
4047</template >
4148
4249<script >
50+ import isEqual from " lodash/isEqual" ;
4351import {
4452 authService ,
4553 ccService ,
4654 handleThriftError ,
4755 prodService } from " @cc-api" ;
4856import { Permission } from " @cc/shared-types" ;
4957
50- // import { is } froAEm "core-js/core/object";
51- // import { ccService, handleThriftError } from "@cc-api";
52-
5358
5459export default {
5560 name: " PresetMenu" ,
5661
57- props : {
62+ expose : [ " onPresetApplied " , " clearPresetState " ],
5863
64+ props: {
65+ namespace: { type: String , required: true },
5966 },
6067
6168 data () {
@@ -68,16 +75,43 @@ export default {
6875 error: null ,
6976 isSuperUser: false ,
7077 isAdminOfAnyProduct: false ,
78+ activePresetId: null ,
79+ querySnapshot: null ,
80+ isModified: false ,
7181 };
7282 },
7383
7484 computed: {
7585 canSeeActions () {
7686 return this .isSuperUser || this .isAdminOfAnyProduct ;
77- }
87+ },
7888 },
7989
8090 watch: {
91+ " $route.query" : {
92+ handler (newQuery ) {
93+ if (! this .activePresetId || ! this .querySnapshot ) {
94+ this .isModified = false ;
95+ return ;
96+ }
97+ const normalize = q => {
98+ const sorted = {};
99+ for (const k of Object .keys (q).sort ()) {
100+ const v = q[k];
101+ if (Array .isArray (v)) {
102+ sorted[ k ] = v .length === 1 ? v[ 0 ] : [ ... v ].sort ();
103+ } else {
104+ sorted[k] = v;
105+ }
106+ }
107+ return sorted;
108+ };
109+ const normNew = normalize (newQuery);
110+ const normSnap = normalize (this .querySnapshot );
111+ this .isModified = ! isEqual (normNew, normSnap);
112+ },
113+ deep: true ,
114+ },
81115 },
82116
83117 created () {
@@ -133,7 +167,9 @@ export default {
133167 async applyPreset (id ) {
134168 this .error = null ;
135169 this .applyingId = id;
170+ this .querySnapshot = null ;
136171 try {
172+ this .activePresetId = id;
137173 this .$emit (" apply-preset" , id);
138174 } catch (e) {
139175 this .error = (e && e .message ) ? e .message : " Failed to apply preset" ;
@@ -142,6 +178,17 @@ export default {
142178 }
143179 },
144180
181+ onPresetApplied (settledQuery ) {
182+ this .querySnapshot = settledQuery
183+ ? { ... settledQuery }
184+ : { ... this .$route .query };
185+ },
186+
187+ clearPresetState () {
188+ this .activePresetId = null ;
189+ this .querySnapshot = null ;
190+ },
191+
145192 async deletePreset (id ) {
146193 this .error = null ;
147194 this .deletingId = id;
@@ -155,6 +202,10 @@ export default {
155202 });
156203
157204 this .presets = this .presets .filter (p => p .id !== id);
205+
206+ if (this .activePresetId === id) {
207+ this .clearPresetState ();
208+ }
158209 } catch (e) {
159210 this .error = (e && e .message ) ? e .message : " Failed to delete preset" ;
160211 } finally {
@@ -163,8 +214,16 @@ export default {
163214 },
164215
165216 handleClear () {
217+ this .clearPresetState ();
166218 this .$emit (" clear-preset" );
167219 },
168220 },
169221};
170- </script >
222+ </script >
223+
224+ <style scoped>
225+ .preset-modified {
226+ color : orange ;
227+ font-weight : bold ;
228+ }
229+ </style >
0 commit comments