1313 <NcActionButton v-for =" status of fileStatus"
1414 :key =" status.id"
1515 type =" checkbox"
16- :model-value =" selectedOptions.includes(status)"
17- @click =" toggleOption(status)" >
16+ :model-value =" selectedOptions.includes(status.id )"
17+ @click =" toggleOption(status.id )" >
1818 <template #icon >
1919 <NcIconSvgWrapper :svg =" status.icon" />
2020 </template >
@@ -50,7 +50,7 @@ export default {
5050 },
5151 data () {
5252 return {
53- selectedOptions: [],
53+ selectedOptions: this . filtersStore . filterStatusArray || [],
5454 }
5555 },
5656 computed: {
@@ -61,25 +61,36 @@ export default {
6161 return fileStatus .filter (item => [0 , 1 , 2 , 3 ].includes (item .id ))
6262 },
6363 },
64+ mounted () {
65+ if (this .selectedOptions .length > 0 ) {
66+ this .setMarkedFilter ()
67+ }
68+ },
6469 watch: {
6570 selectedOptions (newValue , oldValue ) {
6671 if (newValue .length === 0 ) {
6772 this .setPreset ()
6873 } else {
6974 this .setPreset (newValue)
7075 }
76+ this .setMarkedFilter ()
7177 },
7278 },
7379 methods: {
7480 setPreset (presets ) {
7581 const chips = []
7682 if (presets && presets .length > 0 ) {
77- for (const preset of presets) {
83+ for (const id of presets) {
84+ const status = fileStatus .find (item => item .id === id)
85+ if (! status) continue
86+
7887 chips .push ({
79- id: preset .id ,
80- icon: preset .icon ,
81- text: preset .label ,
82- onclick : () => this .setPreset (presets .filter (({ id }) => id !== preset .id )),
88+ id: status .id ,
89+ icon: status .icon || ' ' ,
90+ text: status .label ,
91+ onclick : () => {
92+ this .selectedOptions = this .selectedOptions .filter (v => v !== status .id )
93+ },
8394 })
8495 }
8596 } else {
@@ -90,6 +101,7 @@ export default {
90101 resetFilter () {
91102 if (this .selectedOptions .length > 0 ) {
92103 this .selectedOptions = []
104+ this .filtersStore .onFilterUpdateChipsAndSave ({ detail: [], id: ' status' })
93105 }
94106 },
95107 toggleOption (option ) {
@@ -100,6 +112,27 @@ export default {
100112 this .selectedOptions .push (option)
101113 }
102114 },
115+ setMarkedFilter () {
116+ const chips = []
117+
118+ if (this .selectedOptions .length > 0 ) {
119+ for (const id of this .selectedOptions ) {
120+ const status = fileStatus .find (item => item .id === id)
121+ if (! status) continue
122+
123+ chips .push ({
124+ id: status .id ,
125+ icon: status .icon || ' ' ,
126+ text: status .label ,
127+ onclick : () => {
128+ this .selectedOptions = this .selectedOptions .filter (v => v !== id)
129+ },
130+ })
131+ }
132+ }
133+
134+ this .filtersStore .onFilterUpdateChipsAndSave ({ detail: chips, id: ' status' })
135+ }
103136 },
104137}
105138 </script >
0 commit comments