resources/src/mediawiki.special.editrecovery/SpecialEditRecovery.vue

   1 <template>
   2         <p v-if="pages.length">
   3                 {{ $i18n( 'edit-recovery-special-intro', pages.length ) }}
   4         </p>
   5         <p v-else>
   6                 {{ $i18n( 'edit-recovery-special-intro-empty' ) }}
   7         </p>
   8         <ol>
   9                 <li v-for="page in pages" :key="page">
  10                         {{ $i18n( 'parentheses-start' ) }}<a :onclick="() => onDelete( page )">{{ $i18n( 'edit-recovery-special-delete' ) }}</a>{{ $i18n( 'parentheses-end' ) }}
  11                         {{ page.title }}
  12                         <span v-if="page.section"> &ndash; {{ page.section }}</span>
  13                         {{ $i18n( 'parentheses-start' ) }}<a :href="page.url">{{ $i18n( 'edit-recovery-special-view' ) }}</a>
  14                         {{ $i18n( 'pipe-separator' ) }}
  15                         <a :href="page.editUrl">{{ $i18n( 'edit-recovery-special-edit' ) }}</a>{{ $i18n( 'parentheses-end' ) }}
  16                         <span :title="$i18n( 'edit-recovery-special-recovered-on-tooltip' )">
  17                                 {{ $i18n( 'edit-recovery-special-recovered-on', page.timeStored ) }}
  18                         </span>
  19                 </li>
  20         </ol>
  21 </template>
  22
  23 <script>
  24 const { ref } = require( 'vue' );
  25 // @vue/component
  26 module.exports = {
  27         setup() {
  28                 const pages = ref( [] );
  29                 const storage = require( '../mediawiki.editRecovery/storage.js' );
  30                 const config = require( '../mediawiki.editRecovery/config.json' );
  31                 const expiryTTL = config.EditRecoveryExpiry;
  32                 storage.openDatabase().then( () => {
  33                         storage.loadAllData().then( ( allData ) => {
  34                                 allData.forEach( ( d ) => {
  35                                         const title = new mw.Title( d.pageName );
  36                                         const editParams = { action: 'edit' };
  37                                         if ( d.section ) {
  38                                                 editParams.section = d.section;
  39                                         }
  40                                         // Subtract expiry duration to get the time it was stored.
  41                                         const recoveryTime = new Date( ( d.expiry - expiryTTL ) * 1000 )
  42                                                 .toLocaleString(
  43                                                         document.documentElement.lang,
  44                                                         { dateStyle: 'full', timeStyle: 'short' }
  45                                                 );
  46                                         pages.value.push( {
  47                                                 title: title.getPrefixedText(),
  48                                                 url: title.getUrl(),
  49                                                 editUrl: title.getUrl( editParams ),
  50                                                 section: d.section,
  51                                                 timeStored: recoveryTime
  52                                         } );
  53                                 } );
  54                         } );
  55                 } );
  56                 function onDelete( page ) {
  57                         storage.openDatabase().then( () => {
  58                                 const title = new mw.Title( page.title );
  59                                 storage.deleteData( title.title, page.section ).then( () => {
  60                                         const index = pages.value.indexOf( page );
  61                                         pages.value.splice( index, 1 );
  62                                 } );
  63                         } );
  64                 }
  65                 return {
  66                         pages,
  67                         onDelete
  68                 };
  69         }
  70 };
  71 </script>