11<template >
22 <k-dialog v-bind =" $props" class =" k-changes-dialog" >
3- <k-section
4- v-if =" pages.length"
5- :buttons =" buttons('pages')"
6- :label =" $t('lock.unsaved.pages')"
7- >
3+ <header slot =" header" class =" k-changes-dialog-header" >
4+ <nav class =" k-tabs" >
5+ <k-button class =" k-tabs-button" :current =" true" >
6+ Your changes
7+ </k-button >
8+ <k-button class =" k-tabs-button" > Team changes </k-button >
9+ </nav >
10+
11+ <k-button-group :buttons =" buttons()" size =" xs" />
12+ </header >
13+
14+ <k-table :index =" false" :columns =" columns" :rows =" rows" />
15+
16+ <!-- <k-section v-if="pages.length" :label="$t('lock.unsaved.pages')">
817 <k-items :items="items(pages)" layout="list" />
918 </k-section>
1019
11- <k-section
12- v-if =" files.length"
13- :buttons =" buttons('files')"
14- :label =" $t('lock.unsaved.files')"
15- >
20+ <k-section v-if="files.length" :label="$t('lock.unsaved.files')">
1621 <k-items :items="items(files)" layout="list" />
1722 </k-section>
1823
19- <k-section
20- v-if =" users.length"
21- :buttons =" buttons('users')"
22- :label =" $t('lock.unsaved.users')"
23- >
24+ <k-section v-if="users.length" :label="$t('lock.unsaved.users')">
2425 <k-items :items="items(users)" layout="list" />
25- </k-section >
26+ </k-section> -->
2627
2728 <k-section
2829 v-if =" !pages.length && !files.length && !users.length"
@@ -56,7 +57,7 @@ export default {
5657 },
5758 // eslint-disable-next-line vue/require-prop-types
5859 size: {
59- default: " large "
60+ default: " huge "
6061 },
6162 // eslint-disable-next-line vue/require-prop-types
6263 submitButton: {
@@ -67,8 +68,41 @@ export default {
6768 default : () => []
6869 }
6970 },
71+ computed: {
72+ columns () {
73+ return {
74+ image: {
75+ label: " " ,
76+ width: " var(--table-row-height)" ,
77+ type: " image" ,
78+ mobile: true
79+ },
80+ text: {
81+ label: " Title" ,
82+ type: " url" ,
83+ mobile: true
84+ },
85+ type: {
86+ type: " tags" ,
87+ width: " 6rem" ,
88+ mobile: true
89+ },
90+ when: {
91+ type: " text" ,
92+ width: " 10rem"
93+ },
94+ user: {
95+ width: " 12rem" ,
96+ type: " text"
97+ }
98+ };
99+ },
100+ rows () {
101+ return this .items ([... this .pages , ... this .files , ... this .users ]);
102+ }
103+ },
70104 methods: {
71- buttons (type ) {
105+ buttons () {
72106 return [
73107 {
74108 icon: " undo" ,
@@ -83,10 +117,10 @@ export default {
83117 icon: " undo" ,
84118 text: this .$t (" form.discard" )
85119 },
86- text: ` Do you really want to discard all unsaved changes for ${ type } ?`
120+ text: ` Do you really want to discard all unsaved changes?`
87121 },
88122 on: {
89- submit : () => this .discardAll (type )
123+ submit : () => this .discardAll ()
90124 }
91125 });
92126 }
@@ -103,10 +137,10 @@ export default {
103137 theme: " notice" ,
104138 text: " Save changes"
105139 },
106- text: ` Do you really want to save all unsaved changes for ${ type } ?`
140+ text: ` Do you really want to save all unsaved changes?`
107141 },
108142 on: {
109- submit : () => this .saveAll (type )
143+ submit : () => this .saveAll ()
110144 }
111145 });
112146 }
@@ -121,17 +155,22 @@ export default {
121155 this .$panel .notification .error (e);
122156 }
123157 },
124- async discardAll (type ) {
158+ async discardAll () {
125159 try {
126- await this .$panel .api .post (" /changes/discard/ " + type );
160+ await this .$panel .api .post (" /changes/discard" );
127161 this .$panel .dialog .close ();
128162 this .$panel .dialog .refresh ();
129163 } catch (e) {
130164 this .$panel .notification .error (e);
131165 }
132166 },
133167 items (items ) {
134- return items .map ((item ) => {
168+ items = items .map ((item ) => {
169+ item .text = {
170+ text: item .text ,
171+ href: item .link
172+ };
173+
135174 item .options = [
136175 {
137176 icon: " undo" ,
@@ -154,6 +193,8 @@ export default {
154193
155194 return item;
156195 });
196+
197+ return this .$helper .array .sortBy (items, " modified desc" );
157198 },
158199 preview (model ) {
159200 this .$panel .view .open (model .link + " /preview/changes" );
@@ -166,9 +207,9 @@ export default {
166207 this .$panel .notification .error (e);
167208 }
168209 },
169- async saveAll (type ) {
210+ async saveAll () {
170211 try {
171- await this .$panel .api .post (" /changes/publish/ " + type );
212+ await this .$panel .api .post (" /changes/publish" );
172213 this .$panel .dialog .close ();
173214 this .$panel .dialog .refresh ();
174215 } catch (e) {
@@ -178,3 +219,33 @@ export default {
178219 }
179220};
180221 </script >
222+
223+ <style >
224+ .k-changes-dialog {
225+ --dialog-padding : 0 ;
226+ max-height : 100% ;
227+ }
228+ .k-changes-dialog-header {
229+ display : flex ;
230+ align-items : center ;
231+ justify-content : space-between ;
232+ height : var (--height-xl );
233+ flex-shrink : 0 ;
234+ padding-inline : var (--spacing-3 );
235+ border-bottom : 1px solid var (--color-gray-900 );
236+ z-index : 1 ;
237+ }
238+ .k-changes-dialog-header .k-tabs {
239+ margin-bottom : 0px ;
240+ }
241+
242+ .k-changes-dialog .k-dialog-body {
243+ --header-sticky-offset : 0 ;
244+ flex-grow : 1 ;
245+ overflow-y : scroll ;
246+ overflow-x : hidden ;
247+ }
248+ .k-changes-dialog .k-dialog-body .k-table th {
249+ border-radius : 0 ;
250+ }
251+ </style >
0 commit comments