From ee21ff6edd9b514b7f838c368f9375c4c9cf9280 Mon Sep 17 00:00:00 2001
From: wilsonge <georgejameswilson@googlemail.com>
Date: Tue, 21 Jun 2022 22:52:09 +0100
Subject: [PATCH] Remove the item vue and merge it into the tree vue for ease

---
 .../scripts/components/tree/item.vue          | 96 -------------------
 .../scripts/components/tree/tree.vue          | 70 ++++++++++++--
 .../resources/scripts/mediamanager.es6.js     |  2 -
 3 files changed, 62 insertions(+), 106 deletions(-)
 delete mode 100644 administrator/components/com_media/resources/scripts/components/tree/item.vue

diff --git a/administrator/components/com_media/resources/scripts/components/tree/item.vue b/administrator/components/com_media/resources/scripts/components/tree/item.vue
deleted file mode 100644
index 0794d69384788..0000000000000
--- a/administrator/components/com_media/resources/scripts/components/tree/item.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<template>
-  <li
-    class="media-tree-item"
-    :class="{active: isActive}"
-    role="treeitem"
-    :aria-level="level"
-    :aria-setsize="size"
-    :aria-posinset="counter"
-    :tabindex="getTabindex"
-  >
-    <a @click.stop.prevent="onItemClick()">
-      <span class="item-icon"><span :class="iconClass" /></span>
-      <span class="item-name">{{ item.name }}</span>
-    </a>
-    <transition name="slide-fade">
-      <media-tree
-        v-if="hasChildren"
-        v-show="isOpen"
-        :aria-expanded="isOpen ? 'true' : 'false'"
-        :root="item.path"
-        :level="(level+1)"
-      />
-    </transition>
-  </li>
-</template>
-
-<script>
-import navigable from '../../mixins/navigable.es6';
-
-export default {
-  name: 'MediaTreeItem',
-  mixins: [navigable],
-  props: {
-    item: {
-      type: Object,
-      required: true,
-    },
-    level: {
-      type: Number,
-      required: true,
-    },
-    counter: {
-      type: Number,
-      required: true,
-    },
-    size: {
-      type: Number,
-      required: true,
-    },
-  },
-  computed: {
-    /* Whether or not the item is active */
-    isActive() {
-      return (this.item.path === this.$store.state.selectedDirectory);
-    },
-    /**
-             * Whether or not the item is open
-             *
-             * @return  boolean
-             */
-    isOpen() {
-      return this.$store.state.selectedDirectory.includes(this.item.path);
-    },
-    /* Whether or not the item has children */
-    hasChildren() {
-      return this.item.directories.length > 0;
-    },
-    iconClass() {
-      return {
-        fas: false,
-        'icon-folder': !this.isOpen,
-        'icon-folder-open': this.isOpen,
-      };
-    },
-    getTabindex() {
-      return this.isActive ? 0 : -1;
-    },
-  },
-  methods: {
-    /* Handle the on item click event */
-    onItemClick() {
-      this.navigateTo(this.item.path);
-      window.parent.document.dispatchEvent(
-        new CustomEvent(
-          'onMediaFileSelected',
-          {
-            bubbles: true,
-            cancelable: false,
-            detail: {},
-          },
-        ),
-      );
-    },
-  },
-};
-</script>
diff --git a/administrator/components/com_media/resources/scripts/components/tree/tree.vue b/administrator/components/com_media/resources/scripts/components/tree/tree.vue
index 21740eb62edf5..8432b9e014cfe 100644
--- a/administrator/components/com_media/resources/scripts/components/tree/tree.vue
+++ b/administrator/components/com_media/resources/scripts/components/tree/tree.vue
@@ -3,20 +3,40 @@
     class="media-tree"
     role="group"
   >
-    <media-tree-item
-      v-for="(item, index) in directories"
-      :key="item.path"
-      :counter="index"
-      :item="item"
-      :size="directories.length"
-      :level="level"
-    />
+    <li
+        v-for="(item, index) in directories"
+        :key="item.path"
+        class="media-tree-item"
+        :class="{active: isActive(item)}"
+        role="treeitem"
+        :aria-level="level"
+        :aria-setsize="directories.length"
+        :aria-posinset="index"
+        :tabindex="getTabindex(item)"
+    >
+      <a @click.stop.prevent="onItemClick(item)">
+        <span class="item-icon"><span :class="iconClass(item)" /></span>
+        <span class="item-name">{{ item.name }}</span>
+      </a>
+      <transition name="slide-fade">
+        <media-tree
+            v-if="hasChildren(item)"
+            v-show="isOpen(item)"
+            :aria-expanded="isOpen(item) ? 'true' : 'false'"
+            :root="item.path"
+            :level="(level+1)"
+        />
+      </transition>
+    </li>
   </ul>
 </template>
 
 <script>
+import navigable from '../../mixins/navigable.es6';
+
 export default {
   name: 'MediaTree',
+  mixins: [navigable],
   props: {
     root: {
       type: String,
@@ -36,5 +56,39 @@ export default {
         .sort((a, b) => ((a.name.toUpperCase() < b.name.toUpperCase()) ? -1 : 1));
     },
   },
+  methods: {
+    isActive(item) {
+      return (item.path === this.$store.state.selectedDirectory);
+    },
+    getTabindex(item) {
+      return item.isActive ? 0 : -1;
+    },
+    onItemClick(item) {
+      this.navigateTo(item.path);
+      window.parent.document.dispatchEvent(
+          new CustomEvent(
+              'onMediaFileSelected',
+              {
+                bubbles: true,
+                cancelable: false,
+                detail: {},
+              },
+          ),
+      );
+    },
+    hasChildren(item) {
+      return item.directories.length > 0;
+    },
+    isOpen(item) {
+      return this.$store.state.selectedDirectory.includes(item.path);
+    },
+    iconClass(item) {
+      return {
+        fas: false,
+        'icon-folder': !this.isOpen(item),
+        'icon-folder-open': this.isOpen(item),
+      };
+    },
+  }
 };
 </script>
diff --git a/administrator/components/com_media/resources/scripts/mediamanager.es6.js b/administrator/components/com_media/resources/scripts/mediamanager.es6.js
index 52b763d2ec326..5eac760e70196 100644
--- a/administrator/components/com_media/resources/scripts/mediamanager.es6.js
+++ b/administrator/components/com_media/resources/scripts/mediamanager.es6.js
@@ -4,7 +4,6 @@ import App from './components/app.vue';
 import Disk from './components/tree/disk.vue';
 import Drive from './components/tree/drive.vue';
 import Tree from './components/tree/tree.vue';
-import TreeItem from './components/tree/item.vue';
 import Toolbar from './components/toolbar/toolbar.vue';
 import Breadcrumb from './components/breadcrumb/breadcrumb.vue';
 import Browser from './components/browser/browser.vue';
@@ -38,7 +37,6 @@ app.use(translate);
 app.component('MediaDrive', Drive);
 app.component('MediaDisk', Disk);
 app.component('MediaTree', Tree);
-app.component('MediaTreeItem', TreeItem);
 app.component('MediaToolbar', Toolbar);
 app.component('MediaBreadcrumb', Breadcrumb);
 app.component('MediaBrowser', Browser);