feat(user-settings): marketplace imitations

src/application/services/useUserSettings.ts

@@ -0,0 +1,30 @@
+import { userService } from '@/domain';
+
+/**
+ * User settings hook state
+ */
+interface UseUserSettingsComposableState {
+  /**
+   * Add tool to the user settings
+   */
+  addTool(id: string): void
+}
+
+
+/**
+ * Methods for working with user settings
+ */
+export function useUserSettings(): UseUserSettingsComposableState {
+  /**
+   * Add tool to the user settings
+   *
+   * @param id - Tool identifier
+   */
+  function addTool(id: string): void {
+    userService.addTool(id);
+  }
+
+  return {
+    addTool,
+  };
+}

src/domain/user.repository.interface.ts

@@ -24,4 +24,11 @@ export default interface UserRepositoryInterface {
    * Returns array of editor tools
    */
   getUserEditorTools: () => EditorTool[];
+
+  /**
+   * Adds a tool to the user (marketplace mock)
+   *
+   * @param id - tool id
+   */
+  addTool: (id: string) => void;
 }

src/domain/user.service.ts

@@ -36,4 +36,13 @@ export default class UserService {
   public getUser(): User | null {
     return this.repository.getUser();
   }
+
+  /**
+   * Adds a tool to the user (marketplace mock)
+   *
+   * @param id - tool id
+   */
+  public addTool(id: string): void {
+    this.repository.addTool(id);
+  }
 }

src/infrastructure/user.repository.ts

@@ -57,4 +57,17 @@ export default class UserRepository extends Repository<UserStore, UserStoreData>
   public getUserEditorTools(): EditorTool[] {
     return this.store.getUserEditorTools();
   }
+
+  /**
+   * Adds a tool to the user (marketplace mock)
+   *
+   * @param id - tool id
+   */
+  public async addTool(id: string): Promise<void> {
+    const response = await this.transport.post<{toolId: string}>('/user/editor-tools', {
+      toolId: id,
+    });
+
+    console.log('Add tool response', response);
+  }
 }

src/presentation/pages/Settings.vue

@@ -9,21 +9,68 @@
       {{ tool.title }}
     </li>
   </ul>
-  <input
-    type="string"
-    placeholder="Add tool by id"
-  >
   <ThemeButton />
+
+  <div class="add-tool">
+    <h2>
+      🎡 Marketplace
+    </h2>
+
+    Insert Tool Id and press Enter:
+    <input
+      type="string"
+      placeholder="Add tool by id"
+      @keydown.enter="addTool"
+    >
+  </div>
 </template>
 
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n';
 import ThemeButton from '@/presentation/components/theme/ThemeButton.vue';
 import { useAppState } from '@/application/services/useAppState';
+import { useUserSettings } from '@/application/services/useUserSettings';
 
 const { userEditorTools } = useAppState();
 const { t } = useI18n();
+const { addTool: addToolToUser } = useUserSettings();
+
+
+/**
+ * Add tool to user. Imitates Installations from the Marketplace
+ *
+ * @param event - keyboard event
+ */
+function addTool(event: KeyboardEvent): void {
+  const input = event.target as HTMLInputElement;
+  const toolId = input.value;
+
+  if (toolId) {
+    addToolToUser(toolId);
+    input.value = '';
+  }
+}
 
 </script>
 
-<style scoped></style>
+<style scoped>
+@import '@/presentation/styles/typography.pcss';
+.add-tool {
+  margin-top: 100px;
+
+  h2 {
+    margin-bottom: var(--spacing-l);
+
+    @apply --text-heading-2;
+  }
+
+  input {
+    @apply --text-body;
+    border: 1px solid var(--color-line);
+    border-radius: var(--radius-s);
+    padding: var(--spacing-xs) var(--spacing-ms);
+    width: 100%;
+    margin-top: var(--spacing-mm);
+  }
+}
+</style>