feat(marketplace): added ability to install/uninstall tools

src/application/i18n/messages/en.json

@@ -31,6 +31,8 @@
   },
   "marketplace": {
     "title": "Marketplace",
-    "listOfTools": "Tools"
+    "listOfTools": "Tools",
+    "removeTool": "Remove tool",
+    "addTool": "Add tool"
   }
 }

src/application/services/useMarketplace.ts

@@ -1,35 +1,43 @@
 import type EditorTool from '@/domain/entities/EditorTool';
-import { type Ref, ref, onMounted } from 'vue';
+import { type Ref, ref, onMounted, watch } from 'vue';
 import { marketplaceService } from '@/domain';
+import type { EditorToolWithUserBinding } from '@/domain/entities/EditorTool';
 
 /**
  * Composable for the application state
  */
 interface UseMarketplaceComposable {
   /**
-   * All editor tools that are used in notes creation
+   * Get list of all tools with user binding
    */
-  tools: Ref<EditorTool[]>
+  tools: Ref<EditorToolWithUserBinding[]>
 }
 
 /**
  * Application service for working with the Editor Tools
+ *
+ * @param userEditorTools - User editor tools list
  */
-export default function (): UseMarketplaceComposable {
+export default function (userEditorTools: Ref<EditorTool[]>): UseMarketplaceComposable {
   /**
    *  All editor tools
    */
-  const tools = ref<EditorTool[]>([]);
+  const tools = ref<EditorToolWithUserBinding[]>([]);
 
   /**
    * Get list of all tools
    */
   onMounted(async () => {
-    tools.value = await marketplaceService.getAllTools();
+    tools.value = await marketplaceService.getToolsWithUserBinding(userEditorTools.value);
   });
 
+  watch(userEditorTools, async (newValue) => {
+    tools.value.forEach(element => {
+      element.isUserIncluded = newValue.some((userTool) => userTool.id === element.id);
+    });
+  });
 
   return {
     tools: tools,
   };
-}
+};

src/application/services/useUserSettings.ts

@@ -7,7 +7,12 @@ interface UseUserSettingsComposableState {
   /**
    * Add tool to the user settings
    */
-  addTool(id: string): void
+  addTool(id: string): Promise<void>
+
+  /**
+   * Remove tool from the user settings
+   */
+  removeTool(id: string): Promise<void>
 }
 
 
@@ -20,11 +25,21 @@ export function useUserSettings(): UseUserSettingsComposableState {
    *
    * @param id - Tool identifier
    */
-  function addTool(id: string): void {
-    userService.addTool(id);
+  async function addTool(id: string): Promise<void> {
+    await userService.addTool(id);
+  }
+
+  /**
+   * Remove tool from the user settings
+   *
+   * @param id - Tool identifier
+   */
+  async function removeTool(id: string): Promise<void> {
+    await userService.removeTool(id);
   }
 
   return {
     addTool,
+    removeTool,
   };
 }

src/domain/entities/EditorTool.ts

@@ -38,3 +38,14 @@ export default interface EditorTool {
     cdn?: string;
   }
 }
+
+/**
+ * Editor tool with user binding
+ */
+export interface EditorToolWithUserBinding extends EditorTool {
+  /**
+   * Is tool included in user's editor settings
+   */
+  isUserIncluded: boolean;
+}
+

src/domain/marketplace.service.ts

@@ -1,5 +1,6 @@
 import type MarketplaceRepository from '@/domain/marketplace.repository.interface';
 import type EditorTool  from './entities/EditorTool';
+import type { EditorToolWithUserBinding } from './entities/EditorTool';
 
 /**
  * Business logic working with Marketplace
@@ -27,4 +28,20 @@ export default class MarketplaceService {
   public async getAllTools(): Promise<EditorTool[]> {
     return await this.repository.getToolsAvailable();
   }
+
+  /**
+   * Returns list of all tools data with user binding
+   *
+   * @param userTools - list of user tools
+   */
+  public async getToolsWithUserBinding(userTools: EditorTool[]): Promise<EditorToolWithUserBinding[]> {
+    const allTools = await this.getAllTools();
+
+    return allTools.map((tool) => {
+      return {
+        ...tool,
+        isUserIncluded: userTools.some((userTool) => userTool.id === tool.id),
+      };
+    });
+  }
 }

src/domain/user.repository.interface.ts

@@ -34,5 +34,12 @@ export default interface UserRepositoryInterface {
    *
    * @param id - tool id
    */
-  addTool: (id: string) => void;
+  addTool: (id: string) => Promise<void>;
+
+  /**
+   * Removes a tool from the user (marketplace mock)
+   *
+   * @param id - tool id
+   */
+  removeTool: (id: string) => Promise<void>;
 }

src/domain/user.service.ts

@@ -49,7 +49,16 @@ export default class UserService {
    *
    * @param id - tool id
    */
-  public addTool(id: string): void {
-    this.repository.addTool(id);
+  public async addTool(id: string): Promise<void> {
+    await this.repository.addTool(id);
+  }
+
+  /**
+   * Removes a tool from the user
+   *
+   * @param id - tool id
+   */
+  public async removeTool(id: string): Promise<void> {
+    await this.repository.removeTool(id);
   }
 }

src/infrastructure/user.repository.ts

@@ -65,16 +65,25 @@ export default class UserRepository extends Repository<UserStore, UserStoreData>
   }
 
   /**
-   * Adds a tool to the user (marketplace mock)
+   * Adds a tool to the user
    *
    * @param id - tool id
    */
   public async addTool(id: string): Promise<void> {
-    const response = await this.transport.post<{toolId: string}>('/user/editor-tools', {
+    await this.transport.post<{toolId: string}>('/user/editor-tools', {
       toolId: id,
     });
+  }
 
-    console.log('Add tool response', response);
+  /**
+   * Removes a tool from the user
+   *
+   * @param id - tool id
+   */
+  public async removeTool(id: string): Promise<void> {
+    await this.transport.delete<{toolId: string}>('/user/editor-tools', {
+      toolId: id,
+    });
   }
 }
 

src/presentation/pages/Marketplace.vue

@@ -7,16 +7,40 @@
       :key="tool.id"
     >
       <li>
-        {{ tool.title }}
+        <div class="marketplace__tool">
+          {{ tool.title }}
+          <Button
+            v-if="tool.isUserIncluded && !tool.isDefault"
+            :disabled="tool.isDefault"
+            :text="t('marketplace.removeTool')"
+            @click="removeTool(tool.id)"
+          />
+          <Button
+            v-if="!tool.isDefault && !tool.isUserIncluded"
+            :text="t('marketplace.addTool')"
+            type="transparent"
+            @click="addTool(tool.id)"
+          />
+        </div>
       </li>
     </ul>
   </div>
 </template>
 
 <script setup lang="ts">
+import { useAppState } from '@/application/services/useAppState';
 import useMarketplace  from '@/application/services/useMarketplace';
+import Button from '../components/button/Button.vue';
+import { useUserSettings } from '@/application/services/useUserSettings';
+import { useI18n } from 'vue-i18n';
+const { t } = useI18n();
+const { addTool, removeTool } = useUserSettings();
+
+const { userEditorTools } = useAppState();
+
+const { tools } = useMarketplace(userEditorTools);
+
 
-const { tools } = useMarketplace();
 </script>
 
 <style setup lang = "postcss" scoped>
@@ -25,5 +49,11 @@ const { tools } = useMarketplace();
 h1 {
     @apply --text-heading-1;
 }
+
+.marketplace__tool {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-very-x);
+}
 </style>