feat(new-tool): chmod calculator

src/plugins/naive.plugin.ts

@@ -53,9 +53,11 @@ import {
   NTooltip,
   NUpload,
   NUploadDragger,
+  NCheckbox,
 } from 'naive-ui';
 
 const components = [
+  NCheckbox,
   NDynamicInput,
   NDatePicker,
   NCode,

src/tools/chmod-calculator/chmod-calculator.service.test.ts

@@ -0,0 +1,68 @@
+import { expect, describe, it } from 'vitest';
+import { computeChmodOctalRepresentation } from './chmod-calculator.service';
+
+describe('chmod-calculator', () => {
+  describe('computeChmodOctalRepresentation', () => {
+    it('get the octal representation from permissions', () => {
+      expect(
+        computeChmodOctalRepresentation({
+          permissions: {
+            owner: { read: true, write: true, execute: true },
+            group: { read: true, write: true, execute: true },
+            public: { read: true, write: true, execute: true },
+          },
+        }),
+      ).to.eql('777');
+
+      expect(
+        computeChmodOctalRepresentation({
+          permissions: {
+            owner: { read: false, write: false, execute: false },
+            group: { read: false, write: false, execute: false },
+            public: { read: false, write: false, execute: false },
+          },
+        }),
+      ).to.eql('000');
+
+      expect(
+        computeChmodOctalRepresentation({
+          permissions: {
+            owner: { read: false, write: true, execute: false },
+            group: { read: false, write: true, execute: true },
+            public: { read: true, write: false, execute: true },
+          },
+        }),
+      ).to.eql('235');
+
+      expect(
+        computeChmodOctalRepresentation({
+          permissions: {
+            owner: { read: true, write: false, execute: false },
+            group: { read: false, write: true, execute: false },
+            public: { read: false, write: false, execute: true },
+          },
+        }),
+      ).to.eql('421');
+
+      expect(
+        computeChmodOctalRepresentation({
+          permissions: {
+            owner: { read: false, write: false, execute: true },
+            group: { read: false, write: true, execute: false },
+            public: { read: true, write: false, execute: false },
+          },
+        }),
+      ).to.eql('124');
+
+      expect(
+        computeChmodOctalRepresentation({
+          permissions: {
+            owner: { read: false, write: true, execute: false },
+            group: { read: false, write: true, execute: false },
+            public: { read: false, write: true, execute: false },
+          },
+        }),
+      ).to.eql('222');
+    });
+  });
+});

src/tools/chmod-calculator/chmod-calculator.service.ts

@@ -0,0 +1,17 @@
+import _ from 'lodash';
+import type { GroupPermissions, Permissions } from './chmod-calculator.types';
+
+export { computeChmodOctalRepresentation };
+
+function computeChmodOctalRepresentation({ permissions }: { permissions: Permissions }): string {
+  const permissionValue = { read: 4, write: 2, execute: 1 };
+
+  const getGroupPermissionValue = (permission: GroupPermissions) =>
+    _.reduce(permission, (acc, isPermSet, key) => acc + (isPermSet ? _.get(permissionValue, key, 0) : 0), 0);
+
+  return [
+    getGroupPermissionValue(permissions.owner),
+    getGroupPermissionValue(permissions.group),
+    getGroupPermissionValue(permissions.public),
+  ].join('');
+}

src/tools/chmod-calculator/chmod-calculator.types.ts

@@ -0,0 +1,10 @@
+export type Scope = 'read' | 'write' | 'execute';
+export type Group = 'owner' | 'group' | 'public';
+
+export type GroupPermissions = {
+  [k in Scope]: boolean;
+};
+
+export type Permissions = {
+  [k in Group]: GroupPermissions;
+};

src/tools/chmod-calculator/chmod-calculator.vue

@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <n-table :bordered="false" :bottom-bordered="false" single-column class="permission-table">
+      <thead>
+        <tr>
+          <th class="text-center" scope="col"></th>
+          <th class="text-center" scope="col">Owner (u)</th>
+          <th class="text-center" scope="col">Group (g)</th>
+          <th class="text-center" scope="col">Public (o)</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="{ scope, title } of scopes" :key="scope">
+          <td class="line-header">{{ title }}</td>
+          <td v-for="group of groups" :key="group" class="text-center">
+            <!-- <n-switch v-model:value="permissions[group][scope]" /> -->
+            <n-checkbox v-model:checked="permissions[group][scope]" size="large" />
+          </td>
+        </tr>
+      </tbody>
+    </n-table>
+
+    <div class="octal-result">
+      {{ octal }}
+    </div>
+
+    <input-copyable :value="`chmod ${octal} path`" readonly style="margin-bottom: 5px" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useThemeVars } from 'naive-ui';
+import { computed, ref } from 'vue';
+import { computeChmodOctalRepresentation } from './chmod-calculator.service';
+import InputCopyable from '../../components/InputCopyable.vue';
+
+import type { Group, Scope } from './chmod-calculator.types';
+
+const themeVars = useThemeVars();
+
+const scopes: { scope: Scope; title: string }[] = [
+  { scope: 'read', title: 'Read (4)' },
+  { scope: 'write', title: 'Write (2)' },
+  { scope: 'execute', title: 'Execute (1)' },
+];
+const groups: Group[] = ['owner', 'group', 'public'];
+
+const permissions = ref({
+  owner: { read: false, write: false, execute: false },
+  group: { read: false, write: false, execute: false },
+  public: { read: false, write: false, execute: false },
+});
+
+const octal = computed(() => computeChmodOctalRepresentation({ permissions: permissions.value }));
+</script>
+
+<style lang="less" scoped>
+.octal-result {
+  text-align: center;
+  font-size: 50px;
+  font-family: monospace;
+  color: v-bind('themeVars.primaryColor');
+  margin: 20px 0;
+}
+.permission-table {
+  td,
+  th {
+    padding: 15px;
+
+    @media screen and (max-width: 600px) {
+      padding: 5px;
+    }
+  }
+}
+.line-header {
+  font-weight: bold;
+  text-align: right;
+  max-width: 80px;
+}
+.text-center {
+  text-align: center;
+}
+</style>

src/tools/chmod-calculator/index.ts

@@ -0,0 +1,22 @@
+import { FileInvoice } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Chmod calculator',
+  path: '/chmod-calculator',
+  description: 'Compute your chmod permissions and commands with this online chmod calculator.',
+  keywords: [
+    'chmod',
+    'calculator',
+    'file',
+    'permission',
+    'files',
+    'directory',
+    'folder',
+    'recursive',
+    'generator',
+    'octal',
+  ],
+  component: () => import('./chmod-calculator.vue'),
+  icon: FileInvoice,
+});

src/tools/index.ts

@@ -1,6 +1,7 @@
 import { LockOpen } from '@vicons/tabler';
 import type { ToolCategory } from './tool';
 
+import { tool as chmodCalculator } from './chmod-calculator';
 import { tool as mimeTypes } from './mime-types';
 import { tool as otpCodeGeneratorAndValidator } from './otp-code-generator-and-validator';
 import { tool as base64FileConverter } from './base64-file-converter';
@@ -77,7 +78,7 @@ export const toolsByCategory: ToolCategory[] = [
   {
     name: 'Development',
     icon: LockOpen,
-    components: [gitMemo, randomPortGenerator, crontabGenerator, jsonViewer, sqlPrettify],
+    components: [gitMemo, randomPortGenerator, crontabGenerator, jsonViewer, sqlPrettify, chmodCalculator],
   },
   {
     name: 'Math',