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,37 @@ 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+ },
79+ text: {
80+ type: " url"
81+ },
82+ type: {
83+ type: " tags" ,
84+ width: " 6rem"
85+ },
86+ when: {
87+ type: " text" ,
88+ width: " 10rem"
89+ },
90+ user: {
91+ width: " 12rem" ,
92+ type: " text"
93+ }
94+ };
95+ },
96+ rows () {
97+ return this .items ([... this .pages , ... this .files , ... this .users ]);
98+ }
99+ },
70100 methods: {
71- buttons (type ) {
101+ buttons () {
72102 return [
73103 {
74104 icon: " undo" ,
@@ -83,10 +113,10 @@ export default {
83113 icon: " undo" ,
84114 text: this .$t (" form.discard" )
85115 },
86- text: ` Do you really want to discard all unsaved changes for ${ type } ?`
116+ text: ` Do you really want to discard all unsaved changes?`
87117 },
88118 on: {
89- submit : () => this .discardAll (type )
119+ submit : () => this .discardAll ()
90120 }
91121 });
92122 }
@@ -103,10 +133,10 @@ export default {
103133 theme: " notice" ,
104134 text: " Save changes"
105135 },
106- text: ` Do you really want to save all unsaved changes for ${ type } ?`
136+ text: ` Do you really want to save all unsaved changes?`
107137 },
108138 on: {
109- submit : () => this .saveAll (type )
139+ submit : () => this .saveAll ()
110140 }
111141 });
112142 }
@@ -121,17 +151,22 @@ export default {
121151 this .$panel .notification .error (e);
122152 }
123153 },
124- async discardAll (type ) {
154+ async discardAll () {
125155 try {
126- await this .$panel .api .post (" /changes/discard/ " + type );
156+ await this .$panel .api .post (" /changes/discard" );
127157 this .$panel .dialog .close ();
128158 this .$panel .dialog .refresh ();
129159 } catch (e) {
130160 this .$panel .notification .error (e);
131161 }
132162 },
133163 items (items ) {
134- return items .map ((item ) => {
164+ items = items .map ((item ) => {
165+ item .text = {
166+ text: item .text ,
167+ href: item .link
168+ };
169+
135170 item .options = [
136171 {
137172 icon: " undo" ,
@@ -154,6 +189,8 @@ export default {
154189
155190 return item;
156191 });
192+
193+ return this .$helper .array .sortBy (items, " modified desc" );
157194 },
158195 preview (model ) {
159196 this .$panel .view .open (model .link + " /preview/changes" );
@@ -166,9 +203,9 @@ export default {
166203 this .$panel .notification .error (e);
167204 }
168205 },
169- async saveAll (type ) {
206+ async saveAll () {
170207 try {
171- await this .$panel .api .post (" /changes/publish/ " + type );
208+ await this .$panel .api .post (" /changes/publish" );
172209 this .$panel .dialog .close ();
173210 this .$panel .dialog .refresh ();
174211 } catch (e) {
@@ -178,3 +215,33 @@ export default {
178215 }
179216};
180217 </script >
218+
219+ <style >
220+ .k-changes-dialog {
221+ --dialog-padding : 0 ;
222+ max-height : 100% ;
223+ }
224+ .k-changes-dialog-header {
225+ display : flex ;
226+ align-items : center ;
227+ justify-content : space-between ;
228+ height : var (--height-xl );
229+ flex-shrink : 0 ;
230+ padding-inline : var (--spacing-3 );
231+ border-bottom : 1px solid var (--color-gray-900 );
232+ z-index : 1 ;
233+ }
234+ .k-changes-dialog-header .k-tabs {
235+ margin-bottom : 0px ;
236+ }
237+
238+ .k-changes-dialog .k-dialog-body {
239+ --header-sticky-offset : 0 ;
240+ flex-grow : 1 ;
241+ overflow-y : scroll ;
242+ overflow-x : hidden ;
243+ }
244+ .k-changes-dialog .k-dialog-body .k-table th {
245+ border-radius : 0 ;
246+ }
247+ </style >
0 commit comments