| 1 |
<template> |
| 2 |
<div class="add_on_modules"> |
| 3 |
<div class="modules_header"> |
| 4 |
<div class="module_title"> |
| 5 |
Fluent Forms Modules |
| 6 |
</div> |
| 7 |
<p> |
| 8 |
Here is the list of all Fluent Forms modules. You can enable or disable the modules based on your need. |
| 9 |
</p> |
| 10 |
</div> |
| 11 |
<div class="modules_body"> |
| 12 |
<div class="ff_module_navs"> |
| 13 |
<div class="ff_module_selectors"> |
| 14 |
<el-radio-group size="small" v-model="module_type"> |
| 15 |
<el-radio-button label="all">All</el-radio-button> |
| 16 |
<el-radio-button label="crm">CRM & SASS Integrations</el-radio-button> |
| 17 |
<el-radio-button label="wp_core">WP Core Modules</el-radio-button> |
| 18 |
</el-radio-group> |
| 19 |
</div> |
| 20 |
<div class="ff_mdoules_search"> |
| 21 |
<el-input size="small" placeholder="Search Modules" v-model="search" class="input-with-select"> |
| 22 |
<el-button slot="append" icon="el-icon-search"></el-button> |
| 23 |
</el-input> |
| 24 |
</div> |
| 25 |
|
| 26 |
</div> |
| 27 |
<div v-for="(addon, addonKey) in filteredAddons" :class="'addon_enabled_'+addon.enabled" class="add_on_card"> |
| 28 |
<div class="addon_header">{{addon.title}}</div> |
| 29 |
<div class="addon_body"> |
| 30 |
<img v-if="addon.logo" :src="addon.logo" /> |
| 31 |
{{addon.description}} |
| 32 |
</div> |
| 33 |
<div class="addon_footer"> |
| 34 |
<template v-if="addon.purchase_url"> |
| 35 |
<a class="pro_update_btn" rel="noopener" :href="addon.purchase_url">Upgrade To Pro</a> |
| 36 |
</template> |
| 37 |
<template v-else> |
| 38 |
<el-switch active-color="#13ce66" @change="saveStatus(addonKey)" active-value="yes" inactive-value="no" v-model="addon.enabled" /> |
| 39 |
<span>Currently</span> <span v-if="addon.enabled == 'yes'">Enabled</span><span v-else>Disabled</span> |
| 40 |
</template> |
| 41 |
<a style="float: right;text-decoration: none;" v-if="addon.config_url && addon.enabled == 'yes'" :href="addon.config_url"><span class="dashicons dashicons-admin-generic"></span></a> |
| 42 |
</div> |
| 43 |
</div> |
| 44 |
<div style="text-align: center" v-if="is_no_modules"> |
| 45 |
<h3>Sorry! No modules found based on your filter</h3> |
| 46 |
</div> |
| 47 |
</div> |
| 48 |
</div> |
| 49 |
</template> |
| 50 |
|
| 51 |
<script type="text/babel"> |
| 52 |
import each from 'lodash/each'; |
| 53 |
import isEmpty from 'lodash/isEmpty'; |
| 54 |
|
| 55 |
export default { |
| 56 |
name: 'fluent_addon_modules', |
| 57 |
data() { |
| 58 |
return { |
| 59 |
search: '', |
| 60 |
addOns: window.fluent_addon_modules.addons, |
| 61 |
has_pro: window.fluent_addon_modules.has_pro, |
| 62 |
module_type: 'all' |
| 63 |
} |
| 64 |
}, |
| 65 |
computed: { |
| 66 |
filteredAddons() { |
| 67 |
let addons = window.fluent_addon_modules.addons; |
| 68 |
if(this.search) { |
| 69 |
let filteredAddons = {}; |
| 70 |
each(addons, (addOn, addOnKey) => { |
| 71 |
let obString = JSON.stringify(addOn); |
| 72 |
if(obString.indexOf(this.search) !== -1) { |
| 73 |
filteredAddons[addOnKey] = addOn; |
| 74 |
} |
| 75 |
}); |
| 76 |
addons = filteredAddons; |
| 77 |
} |
| 78 |
|
| 79 |
if(this.module_type != 'all') { |
| 80 |
let filteredAddons = {}; |
| 81 |
each(addons, (addOn, addOnKey) => { |
| 82 |
if(addOn.category == this.module_type) { |
| 83 |
filteredAddons[addOnKey] = addOn; |
| 84 |
} |
| 85 |
}); |
| 86 |
addons = filteredAddons; |
| 87 |
} |
| 88 |
return addons; |
| 89 |
}, |
| 90 |
is_no_modules() { |
| 91 |
return isEmpty(this.filteredAddons); |
| 92 |
} |
| 93 |
}, |
| 94 |
methods: { |
| 95 |
saveStatus(addonKey) { |
| 96 |
let addonModules = {}; |
| 97 |
jQuery.each(this.addOns, (key, addon) => { |
| 98 |
addonModules[key] = addon.enabled; |
| 99 |
}); |
| 100 |
jQuery.post(window.ajaxurl, { |
| 101 |
action: 'fluentform_update_modules', |
| 102 |
addons: addonModules |
| 103 |
}) |
| 104 |
.then((response) => { |
| 105 |
this.$message({ |
| 106 |
message: response.data.message, |
| 107 |
type: 'success', |
| 108 |
offset: 32 |
| 109 |
}); |
| 110 |
}) |
| 111 |
.fail(error => { |
| 112 |
|
| 113 |
}) |
| 114 |
.always(() => { |
| 115 |
|
| 116 |
}); |
| 117 |
} |
| 118 |
} |
| 119 |
} |
| 120 |
</script> |
| 121 |
|
