Added a column to display chmod permissions (#522)

* Added a column to display permissions

* Show table only if chmod is present

* Displays symbolic format when clicked

* Translation: show and hide symbolic format

frontend/views/Browser.vue

@@ -100,6 +100,12 @@
               </a>
             </b-table-column>
 
+            <b-table-column v-if="can(['write', 'chmod'])" :label="lang('Permissions')" field="data.permissions" sortable width="170">
+            <span @click="togglePermissionsView" :title="showSymbolic ? lang('Hide symbolic format') : lang('Show symbolic format')" style="font-family: monospace;cursor: pointer;">
+              {{ formatPermissions(props.row.permissions, props.row.type) }}
+            </span>
+            </b-table-column>
+
             <b-table-column :label="lang('Size')" :custom-sort="sortBySize" field="data.size" sortable numeric width="150">
               {{ props.row.type == 'back' || props.row.type == 'dir' ? lang('Folder') : formatBytes(props.row.size) }}
             </b-table-column>
@@ -193,6 +199,7 @@ export default {
       files: [],
       hasFilteredEntries: false,
       showAllEntries: false,
+      showSymbolic: false,
     }
   },
   computed: {
@@ -251,6 +258,27 @@ export default {
       this.loadFiles()
       this.checked = []
     },
+    togglePermissionsView() {
+    this.showSymbolic = !this.showSymbolic
+  },
+  formatPermissions(permissions, type) {
+    if (permissions === -1) return this.lang('N/A')
+    const numeric = permissions.toString()
+    if (this.showSymbolic) {
+      const symbolic = this.convertToSymbolic(permissions, type)
+      return `${numeric} [${symbolic}]`
+    }
+    return numeric
+  },
+    convertToSymbolic(permissions, type) {
+      if (permissions === -1) return ''
+        const symbols = ['---', '--x', '-w-', '-wx', 'r--', 'r-x', 'rw-', 'rwx']
+        const owner = symbols[Math.floor(permissions / 100) % 10]
+        const group = symbols[Math.floor(permissions / 10) % 10]
+        const others = symbols[permissions % 10]
+        const prefix = type === 'dir' ? 'd' : '-'
+      return `${prefix}${owner}${group}${others}`
+    },
     filterEntries(files){
       var filter_entries = this.$store.state.config.filter_entries
       this.hasFilteredEntries = false