feeds.php
125 lines
| 1 | <div class="cff-fd-lst-bigctn cff-fb-fs" v-if="feedsList != null && feedsList.length > 0"> |
| 2 | |
| 3 | <div class="cff-fd-lst-bulk-ctn cff-fb-fs"> |
| 4 | <select class="cff-fd-lst-bulk-select cff-fb-select sb-caption" v-model="selectedBulkAction" aria-label="<?php esc_attr_e( 'Bulk actions', 'custom-facebook-feed' ); ?>"> |
| 5 | <option value="false">{{allFeedsScreen.bulkActions}}</option> |
| 6 | <option value="delete">{{genericText.delete}}</option> |
| 7 | </select> |
| 8 | <button class="cff-fd-lst-bulk-btn cff-btn-grey sb-button-small sb-button" @click.prevent.default="bulkActionClick()">{{genericText.apply}}</button> |
| 9 | <div class="cff-fd-lst-pagination-ctn" v-if="feedPagination.feedsCount != null && feedPagination.feedsCount > 0"> |
| 10 | <span class="cff-fd-lst-count sb-caption">{{feedPagination.feedsCount +' '+ (feedPagination.feedsCount > 1 ? genericText.items : genericText.item)}}</span> |
| 11 | <div class="cff-fd-lst-pagination" v-if="feedPagination.pagesNumber != null && feedPagination.pagesNumber > 1"> |
| 12 | <button class="cff-fd-lst-pgnt-btn cff-fd-pgnt-prev sb-btn-grey" :data-active="feedPagination.currentPage == 1 ? 'false' : 'true'" :disabled="feedPagination.currentPage == 1" @click.prevent.default="feedListPagination('prev')"><</button> |
| 13 | <span class="cff-fd-lst-pgnt-info"> |
| 14 | {{feedPagination.currentPage}} of {{feedPagination.pagesNumber}} |
| 15 | </span> |
| 16 | <button class="cff-fd-lst-pgnt-btn cff-fd-pgnt-next sb-btn-grey" :data-active="feedPagination.currentPage == feedPagination.pagesNumber ? 'false' : 'true'" :disabled="feedPagination.currentPage == feedPagination.pagesNumber" @click.prevent.default="feedListPagination('next')">></button> |
| 17 | </div> |
| 18 | </div> |
| 19 | </div> |
| 20 | <div class="cff-table-wrap" v-bind:class="{ 'sb-onboarding-highlight' : viewsActive.onboardingStep === 2 && allFeedsScreen.onboarding.type === 'single' }"> |
| 21 | <table> |
| 22 | <thead class="cff-fd-lst-thtf cff-fd-lst-thead"> |
| 23 | <tr> |
| 24 | <th> |
| 25 | <div class="cff-fd-lst-chkbx" role="checkbox" |
| 26 | tabindex="0" |
| 27 | :aria-checked="checkAllFeedsActive() ? 'true' : 'false'" |
| 28 | aria-label="<?php esc_attr_e('Select all feeds', 'custom-facebook-feed'); ?>" |
| 29 | @click.prevent.default="selectAllFeedCheckBox()" |
| 30 | @keydown.enter.prevent.default="selectAllFeedCheckBox()" |
| 31 | @keydown.space.prevent.default="selectAllFeedCheckBox()" |
| 32 | :data-active="checkAllFeedsActive()"></div> |
| 33 | </th> |
| 34 | <th> |
| 35 | <span class="sb-caption sb-lighter">{{allFeedsScreen.columns.nameText}}</span> |
| 36 | </th> |
| 37 | <th> |
| 38 | <span class="sb-caption sb-lighter">{{allFeedsScreen.columns.shortcodeText}}</span> |
| 39 | </th> |
| 40 | <th> |
| 41 | <span class="sb-caption sb-lighter">{{allFeedsScreen.columns.instancesText}}</span> |
| 42 | </th> |
| 43 | <th class="cff-fd-lst-act-th"> |
| 44 | <span class="sb-caption sb-lighter">{{allFeedsScreen.columns.actionsText}}</span> |
| 45 | </th> |
| 46 | </tr> |
| 47 | </thead> |
| 48 | <tbody class="cff-fd-lst-tbody"> |
| 49 | <tr v-for="(feed, feedIndex) in feedsList"> |
| 50 | <td> |
| 51 | <div class="cff-fd-lst-chkbx" role="checkbox" |
| 52 | tabindex="0" |
| 53 | :aria-checked="feedsSelected.includes(feed.id) ? 'true' : 'false'" |
| 54 | :aria-label="genericText.selectFeed + ' ' + feed.feed_name" |
| 55 | @click.prevent.default="selectFeedCheckBox(feed.id)" |
| 56 | @keydown.enter.prevent.default="selectFeedCheckBox(feed.id)" |
| 57 | @keydown.space.prevent.default="selectFeedCheckBox(feed.id)" |
| 58 | :data-active="feedsSelected.includes(feed.id)"></div> |
| 59 | </td> |
| 60 | <td> |
| 61 | <a :href="builderUrl+'&feed_id='+feed.id" class="cff-fd-lst-name sb-small-p sb-bold">{{feed.feed_name}}</a> |
| 62 | <span class="cff-fd-lst-type sb-caption sb-lighter">{{feed.settings.feedtype}}</span> |
| 63 | </td> |
| 64 | <td> |
| 65 | <div class="sb-flex-center"> |
| 66 | <span class="cff-fd-lst-shortcode sb-caption sb-lighter">[custom-facebook-feed feed={{feed.id}}]</span> |
| 67 | <div class="cff-fd-lst-shortcode-cp cff-fd-lst-btn cff-fb-tltp-parent" @click.prevent.default="copyToClipBoard('[custom-facebook-feed feed='+feed.id+']')"> |
| 68 | <div class="cff-fb-tltp-elem"><span>{{(genericText.copy +' '+ genericText.shortcode).replace(/ /g," ")}}</span></div> |
| 69 | <div v-html="svgIcons['copy']"></div> |
| 70 | </div> |
| 71 | </div> |
| 72 | </td> |
| 73 | <td class="sb-caption sb-lighter"> |
| 74 | <div class="sb-instances-cell"> |
| 75 | <span>{{genericText.usedIn}} <span class="cff-fb-view-instances cff-fb-tltp-parent" :data-active="feed.instance_count < 1 ? 'false' : 'true'" @click.prevent.default="feed.instance_count > 0 ? viewFeedInstances(feed) : checkAllFeedsActive()">{{feed.instance_count + ' ' + (feed.instance_count !== 1 ? genericText.places : genericText.place)}} <div class="cff-fb-tltp-elem" v-if="feed.instance_count > 0"><span>{{genericText.clickViewInstances.replace(/ /g," ")}}</span></div></span></span> |
| 76 | </div> |
| 77 | </td> |
| 78 | <td class="cff-fd-lst-actions"> |
| 79 | <div class="sb-flex-center"> |
| 80 | <a class="cff-fd-lst-btn cff-fb-tltp-parent" :aria-label="`${genericText.edit} ${feed.feed_name || feed.id}`" :href="builderUrl+'&feed_id='+feed.id"> |
| 81 | <div class="cff-fb-tltp-elem"><span>{{genericText.edit.replace(/ /g," ")}}</span></div> |
| 82 | <div v-html="svgIcons['edit']"></div> |
| 83 | </a> |
| 84 | <button class="cff-fd-lst-btn cff-fb-tltp-parent" :aria-label="`${genericText.duplicate} ${feed.feed_name || feed.id}`" @click.prevent.default="feedActionDuplicate(feed)"> |
| 85 | <div class="cff-fb-tltp-elem"><span>{{genericText.duplicate.replace(/ /g," ")}}</span></div> |
| 86 | <div v-html="svgIcons['duplicate']"></div> |
| 87 | </button> |
| 88 | <button class="cff-fd-lst-btn cff-fd-lst-btn-delete cff-fb-tltp-parent" :aria-label="`${genericText.delete} ${feed.feed_name || feed.id}`" @click.stop.prevent.default="openDialogBox('deleteSingleFeed', feed)"> |
| 89 | <div class="cff-fb-tltp-elem"><span>{{genericText.delete.replace(/ /g," ")}}</span></div> |
| 90 | <div v-html="svgIcons['delete']"></div> |
| 91 | </button> |
| 92 | </div> |
| 93 | </td> |
| 94 | |
| 95 | </tr> |
| 96 | </tbody> |
| 97 | <tfoot class="cff-fd-lst-thtf cff-fd-lst-tfoot"> |
| 98 | <tr> |
| 99 | <td> |
| 100 | <div class="cff-fd-lst-chkbx" role="checkbox" |
| 101 | tabindex="0" |
| 102 | :aria-checked="checkAllFeedsActive() ? 'true' : 'false'" |
| 103 | aria-label="<?php esc_attr_e('Select all feeds', 'custom-facebook-feed'); ?>" |
| 104 | @click.prevent.default="selectAllFeedCheckBox()" |
| 105 | @keydown.enter.prevent.default="selectAllFeedCheckBox()" |
| 106 | @keydown.space.prevent.default="selectAllFeedCheckBox()" |
| 107 | :data-active="checkAllFeedsActive()"></div> |
| 108 | </td> |
| 109 | <td> |
| 110 | <span>{{allFeedsScreen.columns.nameText}}</span> |
| 111 | </td> |
| 112 | <td> |
| 113 | <span>{{allFeedsScreen.columns.shortcodeText}}</span> |
| 114 | </td> |
| 115 | <td> |
| 116 | <span>{{allFeedsScreen.columns.instancesText}}</span> |
| 117 | </td> |
| 118 | <td> |
| 119 | <span>{{allFeedsScreen.columns.actionsText}}</span> |
| 120 | </td> |
| 121 | </tr> |
| 122 | </tfoot> |
| 123 | </table> |
| 124 | </div> |
| 125 | </div> |