feat: add logoUrl editing option to collections

Signed-off-by: Gašper Grom <gasper.grom@gmail.com>

Author: gaspergrom

frontend/src/modules/admin/modules/collections/components/lf-collection-add.vue

@@ -56,6 +56,24 @@
                 </lf-field>
               </article>
 
+              <!-- Logo URL -->
+              <article class="mb-6">
+                <lf-field label-text="Logo URL">
+                  <lf-input
+                    v-model="form.logoUrl"
+                    class="h-10"
+                    placeholder="https://example.com/logo.png"
+                    :invalid="$v.logoUrl.$invalid && $v.logoUrl.$dirty"
+                    @blur="$v.logoUrl.$touch()"
+                    @change="$v.logoUrl.$touch()"
+                  />
+                  <lf-field-messages
+                    :validation="$v.logoUrl"
+                    :error-messages="{ url: 'Please enter a valid URL' }"
+                  />
+                </lf-field>
+              </article>
+
               <!-- Category -->
               <article class="mb-5">
                 <lf-field label-text="Category">
@@ -142,7 +160,7 @@
 <script setup lang="ts">
 import formChangeDetector from '@/shared/form/form-change';
 import useVuelidate from '@vuelidate/core';
-import { required, maxLength } from '@vuelidate/validators';
+import { required, maxLength, url } from '@vuelidate/validators';
 import {
   computed, onMounted, reactive, ref, watch,
 } from 'vue';
@@ -185,6 +203,7 @@ const form = reactive<CollectionFormModel>({
   description: '',
   type: '',
   categoryId: null,
+  logoUrl: '',
   projects: [],
   starred: false,
 });
@@ -195,6 +214,7 @@ const rules = {
     maxLength,
   },
   description: { required: (value: string) => value.trim().length },
+  logoUrl: { url },
   projects: { required: (value: any) => value.length > 0 },
 };
 
@@ -218,6 +238,7 @@ const fillForm = (record?: CollectionModel) => {
     Object.assign(form, record);
     form.type = record.category?.categoryGroupType;
     form.categoryId = record.categoryId || null;
+    form.logoUrl = record.logoUrl || '';
   }
 
   formSnapshot();
@@ -241,6 +262,7 @@ const onSubmit = () => {
   const request: CollectionRequest = {
     name: form.name,
     description: form.description,
+    logoUrl: form.logoUrl || undefined,
     projects: form.projects.map((project: any) => ({
       id: project.id,
       starred: project?.starred || false,

frontend/src/modules/admin/modules/collections/components/lf-collection-table.vue

@@ -21,6 +21,12 @@
             <lf-icon name="rectangle-history" :size="16" class="text-gray-400 mr-2" />
             {{ collection.name }}
             <lf-icon v-if="collection.starred" name="star" type="solid" :size="16" class="text-yellow-300 ml-2" />
+            <span
+              v-if="collection.ssoUserId"
+              class="ml-2 px-2 py-0.5 text-xs font-medium rounded-full bg-primary-100 text-primary-700"
+            >
+              Community
+            </span>
           </div>
         </lf-table-cell>
 

frontend/src/modules/admin/modules/collections/models/collection.model.ts

@@ -7,6 +7,8 @@ export interface CollectionModel {
   description: string;
   slug: string;
   categoryId?: string;
+  logoUrl?: string;
+  ssoUserId?: string;
   projects: InsightsProjectModel[];
   category: Category & {categoryGroupType: string, categoryGroupName: string};
   starred?: boolean;
@@ -16,6 +18,7 @@ export interface CollectionRequest {
   name: string;
   description: string;
   categoryId: string | null;
+  logoUrl?: string;
   slug: string;
   starred: boolean;
   projects: {
@@ -28,6 +31,7 @@ export interface CollectionFormModel {
   description: string;
   type: string | null;
   categoryId: string | null;
+  logoUrl: string;
   projects: InsightsProjectModel[];
   starred: boolean;
 }

services/libs/data-access-layer/src/collections/index.ts

@@ -136,8 +136,8 @@ export async function createCollection(
 ): Promise<ICollection> {
   return qx.selectOne(
     `
-      INSERT INTO collections (name, description, slug, "categoryId", starred)
-      VALUES ($(name), $(description), $(slug), $(categoryId), $(starred))
+      INSERT INTO collections (name, description, slug, "categoryId", starred, "logoUrl")
+      VALUES ($(name), $(description), $(slug), $(categoryId), $(starred), $(logoUrl))
       RETURNING *
     `,
     collection,