+
+
+
+
+
+ 
+
+
+
+
+
+
+ Community
+
+
+ Enterprise
+
+
+ Odoo.sh
+
+
+
+
+
+
+
+
+
+ 
+
+ + App Category View
++ You can personalize apps to different categories as you + wish
+ +
+
+
+
+ 
+
+
+ + Explore This + Module
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Overview +
+
+
+
+
+
+
+ This module in Odoo 16 Enterprise home dashboard is a
+ user-friendly feature that allows users to easily manage their apps and
+ categories. This module enables users to drag and drop their apps into
+ different categories, as well as create and rename categories.
+
+
+
+
+ 
+
+
+ + Features +
+
+
+
+
+
+
+
+
+ 
+ Drag and drop app to other categories
+
+
+ Drag and drop app to other categories
+
+
+ Drag categories to different position
+
+
+ Drag categories to different position
+
+
+ Add app under categories from setting
+
+
+ Add app under categories from setting
+
+
+
+
+ Available in Odoo 16 Enterprise.
+
+
+ Available in Odoo 16 Enterprise.
+
+
+
+ 
+
+
+ + Screenshots +
+
+
+
+
+
+
+
+
+
+ 
+
+ + Create category from App Category +
+
+
+ 
+
+
+ + Create category +
+
+
+ 
+
+ + Created categories will be displayed in the home menu +
+
+
+ 
+
+ + Also, we can drag and drop these apps to different categories and switch their positions +
+
+
+
+
+ 
+
+
+ + Related + Products +
+
+
+
+
+
+
+
+
+ 
+ 
+ 
+ 
+ 
+
+
+
+
+ 
+
+
+ + Our Services +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Odoo + Customization
+
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+
+
+ 
+
+
+ + Odoo + Support
+
+
+
+
+ 
+
+
+ + Hire + Odoo + Developer
+
+
+
+
+ 
+
+
+ + Odoo + Integration
+
+
+
+
+
+ 
+
+
+ + Odoo + Migration
+
+
+
+
+ 
+
+
+ + Odoo + Consultancy
+
+
+
+
+ 
+
+
+ + Odoo + Implementation
+
+
+
+ 
+
+
+ + Odoo + Licensing Consultancy
+
+
+
+
+ 
+
+
+ + Our + Industries +
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+ + Trading +
++ Easily procure + and + sell your products
+
+
+
+
+ 
+
+
+ + POS +
++ Easy + configuration + and convivial experience
+
+
+
+
+ 
+
+
+ + Education +
++ A platform for + educational management
+
+
+
+
+ 
+
+
+ + Manufacturing +
++ Plan, track and + schedule your operations
+
+
+
+
+ 
+
+
+ + E-commerce & Website +
++ Mobile + friendly, + awe-inspiring product pages
+
+
+
+
+ 
+
+
+ + Service Management +
++ Keep track of + services and invoice
+
+
+
+
+ 
+
+
+ + Restaurant +
++ Run your bar or + restaurant methodically
+
+
+
+ 
+
+
+ + Hotel Management +
++ An + all-inclusive + hotel management application
+
+
+
+ 
+
+
+ + Support +
+
+
+
\ No newline at end of file
diff --git a/app_category_view/static/src/css/home_dashboard.css b/app_category_view/static/src/css/home_dashboard.css
new file mode 100644
index 000000000..7194b647a
--- /dev/null
+++ b/app_category_view/static/src/css/home_dashboard.css
@@ -0,0 +1,84 @@
+.o_home_menu_scrollable{
+ align-items: stretch !important;
+}
+.collapse:not(.show) {
+ display: none !important;
+}
+.category-apps {
+ width: 29%;
+ position: relative;
+ backdrop-filter: blur(5px); /* Adjust the blur value to your preference */
+ text-align: center;
+ cursor: pointer;
+ color: white;
+ overflow-y: scroll;
+ max-height: 100%;
+}
+.ui-state-highlight {
+ height: 10.5em; line-height: 20px;
+ background: blue;
+}
+.apps-sortable-div{
+ border: none;
+ outline: none;
+ padding: 10px 16px;
+ cursor: pointer;
+ font-size: 18px;
+}
+.active-category, .apps-sortable-div:hover {
+ background-color: #362f2f38;
+ color: white;
+}
+.category-apps::-webkit-scrollbar-track {
+ padding: 2px 0;
+ background-color: #0000002b;
+}
+
+.category-apps::-webkit-scrollbar {
+ width: 10px;
+}
+.category-apps::-webkit-scrollbar-thumb {
+ border-radius: 10px;
+ box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+ background-color: black;
+ border: 1px solid #000;
+}
+@keyframes begindrag {
+ 0% {
+ transform: rotate(0deg)
+ }
+ 10% {
+ transform: rotate(-8deg)
+ }
+ 30% {
+ transform: rotate(6deg)
+ }
+ 55% {
+ transform: rotate(-3deg)
+ }
+ 80% {
+ transform: rotate(1deg)
+ }
+ 100% {
+ transform: rotate(-1deg)
+ }
+}
+@keyframes bye {
+ 0% {
+ transform: scale(1) rotate(-1deg)
+ }
+ 50% {
+ transform: scale(1.1) rotate(-2deg)
+ }
+ 100% {
+ transform: scale(0) rotate(3deg)
+ }
+}
+.beginDrag {
+ animation: begindrag .8s ease forwards;
+}
+.bye {
+ opacity: 1;
+ transition: opacity .5s ease;
+ animation: bye .4s ease forwards;
+}
\ No newline at end of file
diff --git a/app_category_view/static/src/js/app_move.js b/app_category_view/static/src/js/app_move.js
new file mode 100644
index 000000000..890b1ab9d
--- /dev/null
+++ b/app_category_view/static/src/js/app_move.js
@@ -0,0 +1,70 @@
+/** @odoo-module **/
+import { patch } from "@web/core/utils/patch";
+import { HomeMenu } from "@web_enterprise/webclient/home_menu/home_menu"
+var rpc = require('web.rpc');
+// Patch the HomeMenu prototype to add draggable_menu functionality
+patch(HomeMenu.prototype, "menu_item_draggable.draggable_menu", {
+ // Call the original setup method and add onMounted hook
+ setup() {
+ this._super.apply();
+ },
+ /**
+ * Toggle the active class for the clicked category.
+ */
+ _active: async function(ev) {
+ if (ev.currentTarget.closest('.apps-sortable-div')) {
+ const currentActiveDiv = ev.currentTarget.closest('.apps-sortable-div');
+ const allDivs = currentActiveDiv.parentElement.querySelectorAll('.apps-sortable-div');
+ allDivs.forEach(div => {
+ if (div !== currentActiveDiv) {
+ div.classList.remove('active-category');
+ }
+ });
+ currentActiveDiv.classList.add('active-category');
+ }
+ },
+ /**
+ * Handle the drag start event.
+ */
+ dragStart: async function(e) {
+ e.dataTransfer.setData('Menu_id', e.target.id)
+ e.dataTransfer.effectAllowed = 'move';
+ e.target.classList.add('beginDrag');
+ },
+ /**
+ * Handle the dropped event after dragging.
+ */
+ dropped: async function(e) {
+ // get new and old index
+ var dragged_menu = e.dataTransfer.getData('Menu_id')
+ var previousElement = e.dataTransfer.getData('Element')
+ var dropped_menu = e.target.id
+ var categoryName = e.target.attributes[1].nodeValue
+ if (dragged_menu && dropped_menu) {
+ e.target.classList.add('bye')
+ await rpc.query({
+ model: 'ir.app.category',
+ method: 'apps_switching',
+ args: [dragged_menu, dropped_menu]
+ }).then(function() {
+ window.location.reload()
+ })
+ } else if (dragged_menu && categoryName) {
+ await rpc.query({
+ model: 'ir.app.category',
+ method: 'category_change',
+ args: [dragged_menu, categoryName]
+ }).then(function() {
+ window.location.reload()
+ })
+ }
+ },
+ /**
+ * Prevent the default behavior of the event.
+ */
+ cancelDefault: async function(e) {
+ e.preventDefault()
+ e.stopPropagation()
+ return false
+ },
+});
diff --git a/app_category_view/static/src/js/home_menu.js b/app_category_view/static/src/js/home_menu.js
new file mode 100644
index 000000000..609da906d
--- /dev/null
+++ b/app_category_view/static/src/js/home_menu.js
@@ -0,0 +1,28 @@
+/**@odoo-module**/
+import { patch } from "@web/core/utils/patch";
+import { url } from "@web/core/utils/urls";
+import { HomeMenu } from "@web_enterprise/webclient/home_menu/home_menu"
+const { onMounted } = owl;
+var rpc = require('web.rpc');
+patch(HomeMenu.prototype, "home_menu.AppCategory", {
+ async setup() {
+ this._super(...arguments);
+ const self = this;
+ await rpc.query({
+ model: "ir.app.category",
+ method: "get_home_dashboard",
+ args: []
+ }).then(function(data) {
+ self.appCategory = data;
+ self.render();
+ });
+ await rpc.query({
+ model: "ir.app.category",
+ method: "get_other_apps",
+ args: []
+ }).then(function(otherApps) {
+ self.otherApps = otherApps;
+ self.render();
+ });
+ },
+});
diff --git a/app_category_view/static/src/xml/home_dashboard_templates.xml b/app_category_view/static/src/xml/home_dashboard_templates.xml
new file mode 100644
index 000000000..1566e2f0e
--- /dev/null
+++ b/app_category_view/static/src/xml/home_dashboard_templates.xml
@@ -0,0 +1,172 @@
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ All Apps +
+ + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
+ No Apps
+
+
+
+
+
+
+