From 6ce46ea4f535bb4957484d8cfe9376028c29235a Mon Sep 17 00:00:00 2001 From: fayazara Date: Tue, 20 Sep 2022 16:35:41 +0530 Subject: [PATCH] Macros submission and listing --- app/javascript/dashboard/api/macros.js | 9 + .../layout/config/sidebarItems/settings.js | 1 + .../dashboard/settings/automation/Index.vue | 2 +- .../dashboard/settings/macros/Index.vue | 85 ++++---- .../routes/dashboard/settings/macros/New.vue | 190 ++++++++++++++++-- app/javascript/dashboard/store/index.js | 2 + .../dashboard/store/modules/macros.js | 108 ++++++++++ .../dashboard/store/mutation-types.js | 7 + 8 files changed, 354 insertions(+), 50 deletions(-) create mode 100644 app/javascript/dashboard/api/macros.js create mode 100644 app/javascript/dashboard/store/modules/macros.js diff --git a/app/javascript/dashboard/api/macros.js b/app/javascript/dashboard/api/macros.js new file mode 100644 index 000000000..b275dec3a --- /dev/null +++ b/app/javascript/dashboard/api/macros.js @@ -0,0 +1,9 @@ +import ApiClient from './ApiClient'; + +class MacrosAPI extends ApiClient { + constructor() { + super('macros', { accountScoped: true }); + } +} + +export default new MacrosAPI(); diff --git a/app/javascript/dashboard/components/layout/config/sidebarItems/settings.js b/app/javascript/dashboard/components/layout/config/sidebarItems/settings.js index e2b782daf..a2a57b218 100644 --- a/app/javascript/dashboard/components/layout/config/sidebarItems/settings.js +++ b/app/javascript/dashboard/components/layout/config/sidebarItems/settings.js @@ -33,6 +33,7 @@ const settings = accountId => ({ 'billing_settings_index', 'automation_list', 'macros_wrapper', + 'macros_new', ], menuItems: [ { diff --git a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue index a6feb1346..248aa884b 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue +++ b/app/javascript/dashboard/routes/dashboard/settings/automation/Index.vue @@ -225,7 +225,7 @@ export default { mode === 'EDIT' ? this.$t('AUTOMATION.EDIT.API.SUCCESS_MESSAGE') : this.$t('AUTOMATION.ADD.API.SUCCESS_MESSAGE'); - await await this.$store.dispatch(action, payload); + await this.$store.dispatch(action, payload); this.showAlert(this.$t(successMessage)); this.hideAddPopup(); this.hideEditPopup(); diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue index 113f58d5c..be021ae3b 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue +++ b/app/javascript/dashboard/routes/dashboard/settings/macros/Index.vue @@ -8,7 +8,7 @@
- + /> - - - - - + + + + + + +
Spam MessageGlobal -
- - Fayaz -
- 		-
- - Fayaz -
- 		- - -
{{ macro.name }} +
+ + {{ macro.created_by.name }} +
+ 		+
+ + {{ macro.updated_by.name }} +
+ 		{{ macro.visibility }} + + +
@@ -71,11 +73,22 @@ @@ -88,4 +101,8 @@ export default { margin-left: var(--space-one); } } + +.macro-visibility { + text-transform: capitalize; +} diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/New.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/New.vue index b1aa45465..c6a707713 100644 --- a/app/javascript/dashboard/routes/dashboard/settings/macros/New.vue +++ b/app/javascript/dashboard/routes/dashboard/settings/macros/New.vue @@ -1,8 +1,5 @@ @@ -224,10 +293,17 @@ export default { background-size: 16px 16px; height: 100%; max-height: 100%; - padding-left: var(--space-three); + padding: var(--space-normal) var(--space-three); + max-height: 100vh; + overflow-y: auto; } .macros-properties-panel { padding: var(--space-slab); + background-color: var(--white); + height: calc(100vh - 5.6rem); + display: flex; + flex-direction: column; + border-left: 1px solid var(--s-50); } .macros-feed-container { @@ -246,7 +322,7 @@ export default { height: 30px; width: 3px; margin-left: 24px; - background-image: url("data:image/svg+xml,%3Csvg width='3' height='31' viewBox='0 0 3 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='1.50098' y1='0.579529' x2='1.50098' y2='30.5795' stroke='%2394A3B8' stroke-width='2' stroke-dasharray='5 5'/%3E%3C/svg%3E%0A"); + background-image: url("data:image/svg+xml,%3Csvg width='3' height='31' viewBox='0 0 3 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='1.50098' y1='0.579529' x2='1.50098' y2='30.5795' stroke='%2393afc8' stroke-width='2' stroke-dasharray='5 5'/%3E%3C/svg%3E%0A"); } .macros-feed-draggable { position: relative; @@ -322,7 +398,91 @@ export default { } } } + + &.has-error { + animation: shake 0.3s ease-in-out 0s 2; + background-color: var(--r-50); + } } } } +.macros-submit-btn { + margin-top: auto; +} +.macros-form-radio-group { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 1rem; + + .card { + padding: var(--space-small); + border-radius: var(--border-radius-normal); + border: 1px solid var(--s-200); + text-align: left; + cursor: pointer; + position: relative; + + &.active { + background-color: var(--w-25); + border: 1px solid var(--w-300); + } + + .subtitle { + font-size: var(--font-size-mini); + color: var(--s-500); + } + + .visibility-check { + position: absolute; + color: var(--w-300); + top: var(--space-small); + right: var(--space-small); + } + } +} + +.title { + display: block; + margin: 0; + font-size: 1.4rem; + font-weight: 500; + line-height: 1.8; + color: #3c4858; +} +.content-box { + padding: 0; + height: 100vh; +} +.macros-information-panel { + margin-top: var(--space-small); + display: flex; + background-color: var(--s-50); + padding: var(--space-small); + border-radius: var(--border-radius-normal); + align-items: flex-start; + svg { + flex-shrink: 0; + } + p { + margin-left: var(--space-small); + color: var(--s-600); + } +} +@keyframes shake { + 0% { + transform: translateX(0); + } + 25% { + transform: translateX(0.375rem); + } + 50% { + transform: translateX(-0.375rem); + } + 75% { + transform: translateX(0.375rem); + } + 100% { + transform: translateX(0); + } +} diff --git a/app/javascript/dashboard/store/index.js b/app/javascript/dashboard/store/index.js index 8ffbb2db4..af2fbe873 100755 --- a/app/javascript/dashboard/store/index.js +++ b/app/javascript/dashboard/store/index.js @@ -38,6 +38,7 @@ import webhooks from './modules/webhooks'; import articles from './modules/helpCenterArticles'; import portals from './modules/helpCenterPortals'; import categories from './modules/helpCenterCategories'; +import macros from './modules/macros'; Vue.use(Vuex); export default new Vuex.Store({ @@ -79,5 +80,6 @@ export default new Vuex.Store({ articles, portals, categories, + macros, }, }); diff --git a/app/javascript/dashboard/store/modules/macros.js b/app/javascript/dashboard/store/modules/macros.js new file mode 100644 index 000000000..a165f8d87 --- /dev/null +++ b/app/javascript/dashboard/store/modules/macros.js @@ -0,0 +1,108 @@ +import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers'; +import types from '../mutation-types'; +import MacrosAPI from '../../api/macros'; + +export const state = { + records: [], + uiFlags: { + isFetching: false, + isCreating: false, + isDeleting: false, + isUpdating: false, + }, +}; + +export const getters = { + getMacros(_state) { + return _state.records; + }, + getUIFlags(_state) { + return _state.uiFlags; + }, +}; + +export const actions = { + get: async function getMacros({ commit }) { + commit(types.SET_MACROS_UI_FLAG, { isFetching: true }); + try { + const response = await MacrosAPI.get(); + commit(types.SET_MACROS, response.data.payload); + } catch (error) { + // Ignore error + } finally { + commit(types.SET_MACROS_UI_FLAG, { isFetching: false }); + } + }, + create: async function createMacro({ commit }, macrosObj) { + commit(types.SET_MACROS_UI_FLAG, { isCreating: true }); + try { + const response = await MacrosAPI.create(macrosObj); + commit(types.ADD_MACRO, response.data); + } catch (error) { + throw new Error(error); + } finally { + commit(types.SET_MACROS_UI_FLAG, { isCreating: false }); + } + }, + update: async ({ commit }, { id, ...updateObj }) => { + commit(types.SET_MACROS_UI_FLAG, { isUpdating: true }); + try { + const response = await MacrosAPI.update(id, updateObj); + commit(types.EDIT_MACRO, response.data.payload); + } catch (error) { + throw new Error(error); + } finally { + commit(types.SET_MACROS_UI_FLAG, { isUpdating: false }); + } + }, + delete: async ({ commit }, id) => { + commit(types.SET_MACROS_UI_FLAG, { isDeleting: true }); + try { + await MacrosAPI.delete(id); + commit(types.DELETE_MACRO, id); + } catch (error) { + throw new Error(error); + } finally { + commit(types.SET_MACROS_UI_FLAG, { isDeleting: false }); + } + }, + clone: async ({ commit }, id) => { + commit(types.SET_MACROS_UI_FLAG, { isCloning: true }); + try { + await MacrosAPI.clone(id); + } catch (error) { + throw new Error(error); + } finally { + commit(types.SET_MACROS_UI_FLAG, { isCloning: false }); + } + }, + uploadAttachment: async (_, file) => { + try { + const { data } = await MacrosAPI.attachment(file); + return data.blob_id; + } catch (error) { + throw new Error(error); + } + }, +}; + +export const mutations = { + [types.SET_MACROS_UI_FLAG](_state, data) { + _state.uiFlags = { + ..._state.uiFlags, + ...data, + }; + }, + [types.ADD_MACRO]: MutationHelpers.create, + [types.SET_MACROS]: MutationHelpers.set, + [types.EDIT_MACRO]: MutationHelpers.update, + [types.DELETE_MACRO]: MutationHelpers.destroy, +}; + +export default { + namespaced: true, + actions, + state, + getters, + mutations, +}; diff --git a/app/javascript/dashboard/store/mutation-types.js b/app/javascript/dashboard/store/mutation-types.js index 17a2c78ee..d04afb932 100755 --- a/app/javascript/dashboard/store/mutation-types.js +++ b/app/javascript/dashboard/store/mutation-types.js @@ -245,4 +245,11 @@ export default { UPDATE_CATEGORY: 'UPDATE_CATEGORY', REMOVE_CATEGORY: 'REMOVE_CATEGORY', REMOVE_CATEGORY_ID: 'REMOVE_CATEGORY_ID', + + // MACROS + SET_MACROS_UI_FLAG: 'SET_MACROS_UI_FLAG', + SET_MACROS: 'SET_MACROS', + ADD_MACRO: 'ADD_MACRO', + EDIT_MACRO: 'EDIT_MACRO', + DELETE_MACRO: 'DELETE_MACRO', };