Skip to content

Commit

Permalink
Merge pull request #149 from addonify/development
Browse files Browse the repository at this point in the history
Tweak: How reactive state on plugin setting's page is managed (vue js).
  • Loading branch information
h1dd3nsn1p3r authored Jun 1, 2023
2 parents 426cf20 + 0db88fd commit 32e20bc
Show file tree
Hide file tree
Showing 12 changed files with 710 additions and 355 deletions.
8 changes: 6 additions & 2 deletions README.txt
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@
Contributors: addonify
Tags: compare, woocommerce compare, products comparison, compare products, compare woocommerce, addonify, woocommerce
Requires at least: 5.5
Tested up to: 6.1.1
Stable tag: 1.1.5
Tested up to: 6.2.2
Stable tag: 1.1.6
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

Expand Down Expand Up @@ -97,6 +97,10 @@ Yes, you can do it. Copy template from "/plublic/templates" the plugin's folder

== Changelog ==

= 1.1.6 - 01 June, 2023 =

- Tweak: How reactive state on plugin setting's page is managed (vue js).

= 1.1.5 - 09 March, 2023 =

- Fix: Release issue in Github & WordPress.org SVN. [Version bumped].
Expand Down
4 changes: 2 additions & 2 deletions addonify-compare-products.php
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
* Plugin Name: Addonify - Compare Products For WooCommerce
* Plugin URI: https://wordpress.org/plugins/addonify-compare-products/
* Description: Addonify Compare Products is a WooCommerce extension that allows website visitors to compare multiple products on your online store.
* Version: 1.1.5
* Version: 1.1.6
* Author: Addonify
* Author URI: https://addonify.com/
* License: GPL-2.0+
Expand All @@ -24,7 +24,7 @@
die;
}

define( 'ADDONIFY_COMPARE_PRODUCTS_VERSION', '1.1.5' );
define( 'ADDONIFY_COMPARE_PRODUCTS_VERSION', '1.1.6' );
define( 'ADDONIFY_CP_DB_INITIALS', 'addonify_cp_' );
define( 'ADDONIFY_CP_PLUGIN_PATH', dirname( __FILE__ ) );

Expand Down
2 changes: 1 addition & 1 deletion admin/assets/js/main.js

Large diffs are not rendered by default.

34 changes: 23 additions & 11 deletions admin/src/components/inputs/Select.vue
Original file line number Diff line number Diff line change
@@ -1,35 +1,47 @@
<script setup>
import { computed } from "vue";
import { ElSelect, ElOption } from "element-plus";
const { __ } = wp.i18n;
const props = defineProps({
modelValue: [Number, String, Array],
choices: [Object, Array],
placeholder: String,
modelValue: {
type: [Number, String, Array, Object],
required: true,
},
choices: {
type: [Object, Array],
required: false,
},
placeholder: {
type: String,
required: false,
},
});
// Ref: https://vuejs.org/guide/components/events.html#usage-with-v-model
/**
*
* Define emits for v-model usage.
* Ref: https://vuejs.org/guide/components/events.html#usage-with-v-model
*
*/
const emit = defineEmits(["update:modelValue"]);
const value = computed({
get() {
return props.modelValue;
return props.modelValue.toString();
},
set(newValue) {
emit("update:modelValue", newValue);
},
});
const { __ } = wp.i18n;
const defPlaceholder = __("Select", "addonify-compare-products");
</script>
<template>
<el-select
v-model="value"
:placeholder="
props.placeholder
? props.placeholder
: __('Select', 'addonify-compare-products')
"
size="large"
filterable
:placeholder="props.placeholder ? props.placeholder : defPlaceholder"
>
<el-option
v-for="(label, key) in props.choices"
Expand Down
101 changes: 71 additions & 30 deletions admin/src/stores/options.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { defineStore } from 'pinia'
const { isEqual, cloneDeep } = lodash;
const { apiFetch } = wp;
import { ElMessage } from 'element-plus'

const BASE_API_URL = ADDONIFY_COMPARE_PRODUCTS_LOCOLIZER.rest_namespace;
let oldOptions = {};
const { apiFetch } = wp;
const { __ } = wp.i18n;
const { isEqual, cloneDeep } = lodash;
const BASE_API_URL = ADDONIFY_COMPARE_PRODUCTS_LOCOLIZER.rest_namespace;

export const useOptionsStore = defineStore({

Expand All @@ -16,7 +17,6 @@ export const useOptionsStore = defineStore({
message: "", // Holds the message to be displayed to the user.
isLoading: true,
isSaving: false,
needSave: false,
errors: "",
}),
getters: {
Expand All @@ -26,6 +26,20 @@ export const useOptionsStore = defineStore({

return !isEqual(state.options, oldOptions) ? true : false;
},

// ⚡️ Check if we have state in memory.
haveStateInMemory: (state) => {

if (typeof state.options === 'array') {

return state.options.length === 0 ? false : true;
}

if (typeof state.options === 'object') {

return Object.keys(state.options).length === 0 ? false : true;
}
},
},
actions: {

Expand All @@ -35,14 +49,27 @@ export const useOptionsStore = defineStore({
apiFetch({
path: BASE_API_URL + '/get_options',
method: 'GET',
}).then((res) => {
const settingsValues = res.settings_values;
this.data = res.tabs;
this.options = settingsValues;
oldOptions = cloneDeep(settingsValues);
this.isLoading = false;
//console.log(res.tabs);
});
})
.then((res) => {
const settingsValues = res.settings_values;
this.data = res.tabs;
this.options = settingsValues;
oldOptions = cloneDeep(settingsValues);
})
.catch((err) => {

console.log(err);

ElMessage.error(({
message: __("Something went wrong while fetching settings.", "addonify-compare-products"),
offset: 50,
duration: 10000,
}));
})
.finally(() => {

this.isLoading = false;
})
},

// ⚡️ Handle update options & map the values to the options object.
Expand Down Expand Up @@ -74,28 +101,42 @@ export const useOptionsStore = defineStore({
data: {
settings_values: payload
}
}).then((res) => {

this.isSaving = false; // Saving is compconsted here.
this.message = res.message; // Set the message to be displayed to the user.

if (res.success === true) {
ElMessage.success(({
message: this.message,
offset: 50,
duration: 3000,
}));
} else {
})
.then((res) => {

this.isSaving = false; // Saving is compconsted here.
this.message = res.message; // Set the message to be displayed to the user.

if (res.success === true) {
ElMessage.success(({
message: this.message,
offset: 50,
duration: 3000,
}));
} else {

ElMessage.error(({
message: this.message,
offset: 50,
duration: 3000,
}));
}

let tempOptionsState = cloneDeep(this.options);
this.options = {};
this.options = cloneDeep(tempOptionsState);
oldOptions = cloneDeep(this.options);
})
.catch((err) => {

console.log(err);

ElMessage.error(({
message: this.message,
message: __("Something went wrong while updating settings.", "addonify-compare-products"),
offset: 50,
duration: 3000,
duration: 5000,
}));
}

this.fetchOptions(); // Fetch options again.
});
})
},
},
});
23 changes: 23 additions & 0 deletions admin/src/stores/product.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,29 @@ export const useProductStore = defineStore({

}),

getters: {

/**
*
* Return the state of the addons.
*
* @since: 1.1.6
*/

haveAddonStateInMemory: (state) => {

if (typeof state.installedAddons === 'array') {

return state.installedAddons.length === 0 ? false : true;
}

if (typeof state.installedAddons === 'object') {

return Object.keys(state.installedAddons).length === 0 ? false : true;
}
}
},

actions: {

/**
Expand Down
23 changes: 20 additions & 3 deletions admin/src/views/Products.vue
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,31 @@
import { useProductStore } from "../stores/product";
const proStore = useProductStore();
//const { __ } = wp.i18n;
onBeforeMount(() => {
proStore.fetchInstalledAddons();
/**
*
* Check product store state in memory before fetching data from server.
*
* @since: 1.1.6
*/
if (!proStore.haveAddonStateInMemory) {
proStore.fetchInstalledAddons();
}
});
onMounted(() => {
proStore.fetchGithubRepo();
/**
*
* Check product store state in memory before fetching data from github repo.
*
* @since: 1.1.6
*/
if (!proStore.haveAddonStateInMemory) {
proStore.fetchGithubRepo();
}
});
</script>

Expand Down
11 changes: 10 additions & 1 deletion admin/src/views/Settings.vue
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,16 @@
const store = useOptionsStore();
onMounted(() => {
store.fetchOptions();
/**
*
* Fetch options from server if we do not have state in meomory.
*
* @since: 1.1.6
*/
if (!store.haveStateInMemory) {
store.fetchOptions();
}
});
</script>

Expand Down
11 changes: 10 additions & 1 deletion admin/src/views/Styles.vue
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,16 @@
const store = useOptionsStore();
onMounted(() => {
store.fetchOptions();
/**
*
* Fetch options from server if we do not have state in meomory.
*
* @since: 1.1.6
*/
if (!store.haveStateInMemory) {
store.fetchOptions();
}
});
</script>

Expand Down
Loading

0 comments on commit 32e20bc

Please sign in to comment.