my-pages.html 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. <!DOCTYPE html>
  2. <html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/layout}">
  3. <head>
  4. <title>My Pages</title>
  5. <script src="/js/user/my-pages.js" defer></script>
  6. </head>
  7. <body>
  8. <div layout:fragment="content" class="ui container" id="app">
  9. <br />
  10. <h1 class="ui header">
  11. My Pages
  12. <a href="/create/" class="ui green button right floated"><i class="plus icon"></i>Create New Draft</a>
  13. </h1>
  14. <p>
  15. A list of all pages that belong to you.
  16. </p>
  17. <!-- Draft Pages -->
  18. <h3 class="ui header" v-if="pages.drafts">Draft Pages ({{ pages.drafts.length }})</h3>
  19. <div>
  20. <p>
  21. Draft pages are pages you have created that have not yet been submitted and approved. Draft pages are <b>not</b> visible on the store and
  22. are either waiting for you to submit them for approval or waiting to be approved. If a draft page is approved it will become a
  23. <b>Live Page</b> and visible to the public on the store. You may create a maximum of 5 draft pages at any time.
  24. </p>
  25. <table class="ui small compact fluid striped orange celled table" v-if="pages.drafts && pages.drafts.length > 0">
  26. <thead>
  27. <tr>
  28. <th>Name</th>
  29. <th>Type</th>
  30. <th>Created</th>
  31. <th>Last Updated</th>
  32. <th>Status</th>
  33. <th></th>
  34. </tr>
  35. </thead>
  36. <tbody>
  37. <tr v-for="(draft, index) in pages.drafts" :class="draft.reviewState == 'Under_Review' ? 'warning' : ''">
  38. <td>
  39. <a v-bind:href="'/preview/draft/' + draft.id" target="_blank" data-content="View" data-variation="mini">{{
  40. draft.details.title
  41. }}</a>
  42. </td>
  43. <td class="collapsing">{{ draft.softwareType }}</td>
  44. <td class="collapsing">{{ millisToDate(draft.dateCreated) }}</td>
  45. <td class="collapsing">
  46. {{ millisToDate(draft.dateUpdated) }}
  47. </td>
  48. <td class="collapsing">
  49. <span class="ui blue label" v-if="draft.reviewState === 'Review_Requested'">{{ draft.reviewState.replace("_", " ") }} </span>
  50. <span class="ui green label" v-if="draft.reviewState === 'Under_Review'">{{ draft.reviewState.replace("_", " ") }} </span>
  51. <a v-if="draft.reviewState === 'Rejected'" :href="'/rejections/draft/' + draft.id" class="tooltip" data-content="View Rejection Reason(s)">
  52. <span class="ui red label">{{ draft.reviewState }} </span>
  53. </a>
  54. <span v-if="draft.reviewState === 'None'">Not Submitted</span>
  55. </td>
  56. <td class="collapsing">
  57. <a v-if="draft.reviewState == 'None' || draft.reviewState == 'Rejected'" v-bind:href="'/edit/draft/' + draft.id" class="ui mini black button icon tooltip" data-content="Edit" data-variation="mini"><i class="pencil icon"></i></a>
  58. <button v-if="draft.reviewState == 'None' || draft.reviewState == 'Rejected'" v-on:click="onDeleteDraftClicked(draft.id, index)" class="ui mini button icon red tooltip deleteDraftButton" data-content="Delete" data-variation="mini">
  59. <i class="trash alternate outline icon"></i>
  60. </button>
  61. </td>
  62. </tr>
  63. </tbody>
  64. </table>
  65. <div class="ui message" v-else><i class="info circle icon"></i>You have no draft pages.</div>
  66. </div>
  67. <!-- END Draft Pages -->
  68. <div class="ui divider"></div>
  69. <!-- Live Pages -->
  70. <h3 class="ui header" v-if="pages.live">Live Pages ({{ pages.live.length }})</h3>
  71. <div>
  72. <p>
  73. Live Pages are store pages that are approved and visible on the store.
  74. </p>
  75. <table class="ui small compact fluid celled striped green table" v-if="pages.live && pages.live.length > 0">
  76. <thead>
  77. <tr>
  78. <th>Name</th>
  79. <th>Type</th>
  80. <th>Created</th>
  81. <th>Last Updated</th>
  82. <th></th>
  83. </tr>
  84. </thead>
  85. <tbody>
  86. <tr v-for="(livePage, index) in pages.live">
  87. <td>
  88. <a v-bind:href="'/' + livePage.id">{{ livePage.details.title }}</a>
  89. </td>
  90. <td class="collapsing">{{ livePage.softwareType }}</td>
  91. <td class="collapsing">{{ millisToDate(livePage.dateCreated) }}</td>
  92. <td class="collapsing">
  93. {{ millisToDate(livePage.dateUpdated) }}
  94. </td>
  95. <td class="collapsing">
  96. <button v-on:click="onCreateAmendment(livePage.id)" class="ui mini black button icon tooltip submit" data-content="Create Amendment" data-variation="mini">
  97. <i class="pencil icon"></i>
  98. </button>
  99. </td>
  100. </tr>
  101. </tbody>
  102. </table>
  103. <div class="ui message" v-else><i class="info circle icon"></i>You have no pages that are currently live in the store.</div>
  104. </div>
  105. <!-- END Live Pages -->
  106. <div class="ui divider"></div>
  107. <!-- Live Page Amendments -->
  108. <h3 class="ui header" v-if="pages.amendments">Live Page Amendments ({{ pages.amendments.length }})</h3>
  109. <div>
  110. <p>
  111. Live Page amendments are changes to live pages. Any changes proposed by you must be approved by a member of staff before those changes
  112. become visible on the store.
  113. </p>
  114. <table class="ui small compact fluid celled striped blue table" v-if="pages.amendments && pages.amendments.length > 0">
  115. <thead>
  116. <tr>
  117. <th>Name</th>
  118. <th>Type</th>
  119. <th>Created</th>
  120. <th>Last Edited</th>
  121. <th>Status</th>
  122. <th></th>
  123. </tr>
  124. </thead>
  125. <tbody>
  126. <tr v-for="(amendment, index) in pages.amendments" :class="( amendment.reviewState == 'Review_Requested' || amendment.reviewState == 'Under_Review' ) ? 'warning' : ''">
  127. <td>
  128. <a v-bind:href="'/preview/amendment/' + amendment.id" data-content="View" data-variation="mini">{{
  129. amendment.details.title
  130. }}</a>
  131. </td>
  132. <td class="collapsing">{{ amendment.softwareType }}</td>
  133. <td class="collapsing">{{ millisToDate(amendment.dateCreated) }}</td>
  134. <td class="collapsing">
  135. {{ millisToDate(amendment.dateUpdated) }}
  136. </td>
  137. <td class="collapsing">
  138. <span class="ui black label" v-if="amendment.reviewState == 'Review_Requested'"><i class="attention icon"></i>Requested</span>
  139. <span class="ui green label" v-else-if="amendment.reviewState == 'Under_Review'"><i class="attention icon"></i>Requested</span>
  140. <a v-if="amendment.reviewState === 'Rejected'" :href="'/rejections/amendment/' + amendment.id" class="tooltip" data-content="View Rejection Reason(s)">
  141. <span class="ui red label">{{ amendment.reviewState }} </span>
  142. </a>
  143. <span v-else>Not Submitted</span>
  144. </td>
  145. <td class="collapsing">
  146. <a v-bind:href="'/edit/amendment/' + amendment.id" target="_blank" class="ui mini black button icon tooltip" data-content="Edit" data-variation="mini"><i class="pencil icon"></i></a>
  147. <button v-on:click="onDeleteAmendmentClicked(amendment.id, index)" class="ui mini button icon red tooltip deleteAmendmentButton" data-content="Delete" data-variation="mini">
  148. <i class="trash alternate outline icon"></i>
  149. </button>
  150. </td>
  151. </tr>
  152. </tbody>
  153. </table>
  154. <div class="ui message" v-else><i class="info circle icon"></i>You have no page amendments.</div>
  155. </div>
  156. <!-- END Live Page Amendments -->
  157. <br /><br />
  158. <!-- Modals -->
  159. <div th:replace="fragments/modals/delete-page-draft :: delete-draft-modal"></div>
  160. <div th:replace="fragments/modals/delete-page-live :: delete-live-modal"></div>
  161. <div th:replace="fragments/modals/delete-page-amendment :: delete-amendment-modal"></div>
  162. <!-- END Modals -->
  163. </div>
  164. </body>
  165. </html>