refactor of menus

begin work on settings
2025-04-09 19:15:43 +02:00
parent ecbe2f7d72
commit 52b2d18a03
26 changed files with 1613 additions and 1667 deletions
@@ -102,101 +102,92 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
  </div>
 </template>

-<script>
-import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
-import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
-import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
+<script setup>
+import { NcModal, NcActions, NcActionButton } from '@nextcloud/vue'
+import { ref } from 'vue'

-export default {
-  name: 'AdminCategoriesCustom',
-  components: {
-    NcModal,
-    NcActions,
-    NcActionButton,
-  },
-  data() {
-    return {
-      input: null,
-      values: [],
-      langs: [],
-      addForm: false,
-      editForm: false,
-      newValue: {},
-      editValue: {},
-    }
-  },
-  mounted() {
-    this.input = document.querySelector('input[name="categories-custom"]')
-    this.init()
-  },
-  methods: {
-    init() {
-      this.values = JSON.parse(this.input.value)
-      this.langs = JSON.parse(this.input.getAttribute('data-langs'))
-    },
-    update() {
-      this.input.value = JSON.stringify(this.values)
-    },
-    showAddForm() {
-      this.newValue = { id: 'cat' + Math.random().toString().replace('0.', '') }
+const { langs, values } = defineProps(['lang', 'values'])

-      this.addForm = true
-    },
-    showEditForm(value) {
-      this.editValue = { id: value.id }
+const input = ref(null)
+const values = ref([])
+const langs = ref([])
+const addForm = ref(false)
+const editForm = ref(false)
+const newValue = ref({})
+const editValue = ref({})

-      for (let i of this.langs) {
-        this.editValue[i] = typeof value[i] !== 'undefined' ? value[i] : ''
-      }
-
-      this.editForm = true
-    },
-    saveAdd() {
-      for (let i of this.langs) {
-        if (!this.newValue[i] || /^\s*$/.test(this.newValue[i])) {
-          return
-        }
-      }
-
-      this.values.push(this.newValue)
-      this.update()
-      this.hideAddForm()
-      this.newValue = {}
-    },
-    saveEdit() {
-      for (let i of this.langs) {
-        if (!this.editValue[i] || /^\s*$/.test(this.editValue[i])) {
-          return
-        }
-      }
-
-      for (let i in this.values) {
-        if (this.values[i].id === this.editValue.id) {
-          this.values[i] = this.editValue
-        }
-      }
-
-      this.update()
-      this.hideEditForm()
-    },
-    removeEdit() {
-      for (let i in this.values) {
-        if (this.values[i].id === this.editValue.id) {
-          this.values.splice(i, 1)
-        }
-      }
-
-      this.update()
-      this.hideEditForm()
-    },
-    hideAddForm() {
-      this.addForm = false
-    },
-    hideEditForm() {
-      this.editForm = false
-    },
-  },
-}
+//   mounted() {
+//     this.input = document.querySelector('input[name="categories-custom"]')
+//     this.init()
+//   },
+//   methods: {
+//     init() {
+//       this.values = JSON.parse(this.input.value)
+//       this.langs = JSON.parse(this.input.getAttribute('data-langs'))
+//     },
+//     update() {
+//       this.input.value = JSON.stringify(this.values)
+//     },
+//     showAddForm() {
+//       this.newValue = { id: 'cat' + Math.random().toString().replace('0.', '') }
+//
+//       this.addForm = true
+//     },
+//     showEditForm(value) {
+//       this.editValue = { id: value.id }
+//
+//       for (let i of this.langs) {
+//         this.editValue[i] = typeof value[i] !== 'undefined' ? value[i] : ''
+//       }
+//
+//       this.editForm = true
+//     },
+//     saveAdd() {
+//       for (let i of this.langs) {
+//         if (!this.newValue[i] || /^\s*$/.test(this.newValue[i])) {
+//           return
+//         }
+//       }
+//
+//       this.values.push(this.newValue)
+//       this.update()
+//       this.hideAddForm()
+//       this.newValue = {}
+//     },
+//     saveEdit() {
+//       for (let i of this.langs) {
+//         if (!this.editValue[i] || /^\s*$/.test(this.editValue[i])) {
+//           return
+//         }
+//       }
+//
+//       for (let i in this.values) {
+//         if (this.values[i].id === this.editValue.id) {
+//           this.values[i] = this.editValue
+//         }
+//       }
+//
+//       this.update()
+//       this.hideEditForm()
+//     },
+//     removeEdit() {
+//       for (let i in this.values) {
+//         if (this.values[i].id === this.editValue.id) {
+//           this.values.splice(i, 1)
+//         }
+//       }
+//
+//       this.update()
+//       this.hideEditForm()
+//     },
+//     hideAddForm() {
+//       this.addForm = false
+//     },
+//     hideEditForm() {
+//       this.editForm = false
+//     },
+//   },
+// }
 </script>

 <style>
@@ -0,0 +1,33 @@
+<template>
+
+</template>
+
+<script setup>
+// import AlwaysDisplayImg from '../../img/admin/layout-always-displayed.svg'
+// import WideMenuImg from '../../img/admin/layout-big-menu.svg'
+// import DefaultImg from '../../img/admin/layout-default.svg'
+// import WithCategoriesImg from '../../img/admin/layout-width-categories.svg'
+
+const choices = [
+  // {id: 1, url: AlwaysDisplayImg},
+  // {id: 2, url: WideMenuImg},
+  // {id: 3, url: DefaultImg},
+  // {id: 4, url: WithCategoriesImg},
+]
+
+const carouselConfig = {
+  itemsToShow: 1.3,
+  wrapAround: true
+}
+
+const { mode, alwaysDisplayed } = defineProps({
+  mode: {
+    type: String,
+    required: true,
+  },
+  alwaysDisplayed: {
+    type: Boolean,
+    required: true,
+  }
+})
+</script>
@@ -0,0 +1,5 @@
+<template>
+  <div class="side-menu-setting-table">
+    <slot></slot>
+  </div>
+</template>
@@ -0,0 +1,33 @@
+<template>
+  <div class="side-menu-setting-label" :class="{
+    'side-menu-setting-label-short': short,
+    'side-menu-setting-label--top': top,
+    'side-menu-setting-label--middle': middle,
+  }">
+    {{ t('side_menu', label) }}
+  </div>
+</template>
+
+<script setup>
+const { short, label } = defineProps({
+  short: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+  middle: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  top: {
+    type: Boolean,
+    required: false,
+    default: true,
+  },
+})
+</script>
@@ -0,0 +1,5 @@
+<template>
+  <div class="side-menu-setting-row">
+    <slot></slot>
+  </div>
+</template>
@@ -0,0 +1,15 @@
+<template>
+  <div class="side-menu-setting-form" :class="{'side-menu-setting-form-long': long}">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+const { long } = defineProps({
+  long: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+})
+</script>