diff --git a/app/controllers/super_admin/application_controller.rb b/app/controllers/super_admin/application_controller.rb index 3b98a6e21..775fb34fc 100644 --- a/app/controllers/super_admin/application_controller.rb +++ b/app/controllers/super_admin/application_controller.rb @@ -5,6 +5,10 @@ # If you want to add pagination or other controller-level concerns, # you're free to overwrite the RESTful controller actions. class SuperAdmin::ApplicationController < Administrate::ApplicationController + include ActionView::Helpers::TagHelper + include ActionView::Context + + helper_method :render_vue_component # authenticiation done via devise : SuperAdmin Model before_action :authenticate_super_admin! @@ -23,6 +27,17 @@ class SuperAdmin::ApplicationController < Administrate::ApplicationController private + def render_vue_component(component_name, props = {}) + html_options = { + id: 'app', + data: { + component_name: component_name, + props: props.to_json + } + } + content_tag(:div, '', html_options) + end + def invalid_action_perfomed # rubocop:disable Rails/I18nLocaleTexts flash[:error] = 'Invalid action performed' diff --git a/app/javascript/packs/superadmin_pages.js b/app/javascript/packs/superadmin_pages.js index ef82fc261..301d2bbee 100644 --- a/app/javascript/packs/superadmin_pages.js +++ b/app/javascript/packs/superadmin_pages.js @@ -1 +1,28 @@ import 'chart.js'; +import Vue from 'vue'; +import VueDOMPurifyHTML from 'vue-dompurify-html'; +Vue.use(VueDOMPurifyHTML); + +const PlaygroundIndex = () => + import('../superadmin_pages/views/playground/Index.vue'); + +const ComponentMapping = { + PlaygroundIndex: PlaygroundIndex, +}; + +const renderComponent = (componentName, props) => { + Vue.component(componentName, ComponentMapping[componentName]); + new Vue({ + data: { props: props }, + template: `<${componentName} :component-data="props"/>`, + }).$mount('#app'); +}; + +document.addEventListener('DOMContentLoaded', () => { + const element = document.getElementById('app'); + if (element) { + const componentName = element.dataset.componentName; + const props = JSON.parse(element.dataset.props); + renderComponent(componentName, props); + } +}); diff --git a/app/javascript/superadmin_pages/components/playground/BotMessage.vue b/app/javascript/superadmin_pages/components/playground/BotMessage.vue new file mode 100644 index 000000000..51cff90fe --- /dev/null +++ b/app/javascript/superadmin_pages/components/playground/BotMessage.vue @@ -0,0 +1,17 @@ + + + diff --git a/app/javascript/superadmin_pages/components/playground/Header.vue b/app/javascript/superadmin_pages/components/playground/Header.vue new file mode 100644 index 000000000..e17dad415 --- /dev/null +++ b/app/javascript/superadmin_pages/components/playground/Header.vue @@ -0,0 +1,40 @@ + + + diff --git a/app/javascript/superadmin_pages/components/playground/TypingIndicator.vue b/app/javascript/superadmin_pages/components/playground/TypingIndicator.vue new file mode 100644 index 000000000..c11e523da --- /dev/null +++ b/app/javascript/superadmin_pages/components/playground/TypingIndicator.vue @@ -0,0 +1,13 @@ + + + diff --git a/app/javascript/superadmin_pages/components/playground/UserMessage.vue b/app/javascript/superadmin_pages/components/playground/UserMessage.vue new file mode 100644 index 000000000..ee90f163e --- /dev/null +++ b/app/javascript/superadmin_pages/components/playground/UserMessage.vue @@ -0,0 +1,17 @@ + + + diff --git a/app/javascript/superadmin_pages/components/playground/assets/typing.gif b/app/javascript/superadmin_pages/components/playground/assets/typing.gif new file mode 100644 index 000000000..b288d2559 Binary files /dev/null and b/app/javascript/superadmin_pages/components/playground/assets/typing.gif differ diff --git a/app/javascript/superadmin_pages/views/playground/Index.vue b/app/javascript/superadmin_pages/views/playground/Index.vue new file mode 100644 index 000000000..136a2b481 --- /dev/null +++ b/app/javascript/superadmin_pages/views/playground/Index.vue @@ -0,0 +1,139 @@ +