feat: [495] Application Labels

backend/src/modules/application/dto/create-application.dto.ts

@@ -11,6 +11,7 @@ import { REGEX } from 'src/common/constants/patterns.constant';
 import { ApplicationPullingType } from '../enums/application-pulling-type.enum';
 import { ApplicationTypeEnum } from '../enums/ApplicationType.enum';
 import { ApplicationLabel } from 'src/shared/entities/application-labels.entity';
+import { ApplicationStatus } from '../enums/application-status.enum';
 
 export class CreateApplicationDto {
   @IsString()
@@ -60,4 +61,7 @@ export class CreateApplicationDto {
 
   @IsOptional()
   applicationLabel: Partial<ApplicationLabel>;
+
+  @IsEnum(ApplicationStatus)
+  status: ApplicationStatus;
 }

backend/src/modules/application/dto/update-application.dto.ts

@@ -1,15 +1,10 @@
 import { PartialType, OmitType } from '@nestjs/swagger';
 import { IsEnum, IsOptional } from 'class-validator';
-import { ApplicationStatus } from '../enums/application-status.enum';
 import { CreateApplicationDto } from './create-application.dto';
 
 export class UpdateApplicationDto extends PartialType(
   OmitType(CreateApplicationDto, ['type']),
 ) {
-  @IsEnum(ApplicationStatus)
-  @IsOptional()
-  status?: ApplicationStatus;
-
   @IsOptional()
   cognitoClientId?: string;
 }

backend/src/modules/application/services/application.service.ts

@@ -73,9 +73,17 @@ export class ApplicationService {
         };
       }
 
+      let applicationLabel = null;
+      if (createApplicationDto.applicationLabel) {
+        applicationLabel = await this.saveAndGetApplicationLabel(
+          createApplicationDto.applicationLabel,
+        );
+      }
+
       // 3. save the app
       return this.applicationRepository.save({
         ...createApplicationDto,
+        applicationLabel,
       });
     } catch (error) {
       this.logger.error({

backend/src/modules/application/services/ong-application.service.ts

@@ -132,6 +132,11 @@ export class OngApplicationService {
         'ongApp.applicationId = application.id AND ongApp.organizationId = :organizationId',
         { organizationId },
       )
+      .leftJoin(
+        '_application-label',
+        'applicationLabel',
+        'applicationLabel.id = application.application_label_id',
+      )
       .where(
         'ongApp.organizationId = :organizationId and ongApp.status != :status',
         {

frontend/src/assets/locales/ro/translation.json

@@ -48,7 +48,7 @@
       "reset": "Resetează filtre",
       "show": "Filtre"
     },
-    "unavailable": "În curând",
+    "unavailable": "Temporar indisponibilă",
     "to_be_removed": "De eliminat",
     "decimal": "Valori cu decimale nu sunt permise.",
     "unknown_error": "A apărut o eroare necunoscută",
@@ -1065,6 +1065,7 @@
       },
       "status": {
         "label": "Status aplicație",
+        "required": "Statusul aplicației este obligatoriu",
         "options": {
           "active": "Activă (aplicația poate fi adăugată de organizații în profilul lor)",
           "disabled": "Inactivă (aplicația nu poate fi adăugată de organizații în profilul lor)"
@@ -1111,7 +1112,8 @@
       "application_label": {
         "label": "Eticheta pentru aplicație (eticheta apare în meniul Toate aplicațiile)",
         "helper": "Adaugă o etichetă deja existentă sau creează una nouă",
-        "maxLength": "Eticheta poate avea maxim 30 de caractere"
+        "maxLength": "Eticheta poate avea maxim 30 de caractere",
+        "minLength": "Eticheta poate avea minimum 2 de caractere"
       }
     },
     "request_modal": {

frontend/src/components/creatable-multi-select/CreatableMultiSelect.tsx

@@ -71,9 +71,10 @@ const CreatableMultiSelect = ({
           onChange={onChange}
           value={value}
           options={options}
+          isClearable
           id={id}
           formatCreateLabel={(text) => `${i18n.t('common:add_option')}: ${text}`}
-          isValidNewOption={validation ? validation : () => true}
+          isValidNewOption={(validation ? validation : () => true)}
         />
       )}
       {!error && !readonly && helperText && (

frontend/src/index.css

@@ -176,21 +176,26 @@
   transform: rotate(-45deg);
   position: absolute;
   background-color: #374159;
-  padding-top: 0.5rem;
-  padding-left: 3.5rem;
-  padding-bottom: 0.5rem;
-  padding-right: 4.5rem;
+  padding: 0.5rem 3.1rem;
   color: white;
+  width: 14rem; /* Adjust the width to fit text nicely */
+  text-align: center;
   overflow: hidden;
-  width: 18rem;
-  margin-left: -0.5rem;
+  left: -3.5rem; /* Adjusted positioning */
+  top: 2rem; /* Adjust as necessary */
+
+  @media screen and (max-width: 768px) {
+    width: 13rem;
+  }
 }
 
 .ribbon p {
   margin: 0;
-  white-space: normal;
-  overflow-wrap: break-word;
+  white-space: normal; /* Allow text to wrap */
+  overflow-wrap: break-word; /* Handle long words */
+  word-wrap: break-word; /* Ensure compatibility with older browsers */
   text-align: center;
+  line-height: 1; /* Adjust line height to maintain readability */
 }
 
 .richtext_html ul {

frontend/src/pages/apps-store/components/AddApplicationConfig.ts

@@ -20,6 +20,7 @@ const translations = {
   },
   status: {
     label: i18n.t('appstore:config.status.label'),
+    required: i18n.t('appstore:config.status.required'),
   },
   short: {
     required: i18n.t('appstore:config.short.required'),
@@ -80,11 +81,11 @@ export const PullingTypeOptions = [
 
 export function isHtmlContentEmpty(html: string): boolean {
   // Remove all HTML tags
-  const stripped = html.replace(/<[^>]*>/g, '');
+  const stripped = html?.replace(/<[^>]*>/g, '');
   // Remove whitespace
-  const trimmed = stripped.trim();
+  const trimmed = stripped?.trim();
 
-  return trimmed.length === 0;
+  return trimmed?.length === 0;
 }
 
 export const AddAppConfig: Record<string, any> = {
@@ -149,7 +150,7 @@ export const AddAppConfig: Record<string, any> = {
     rules: {
       required: {
         value: true,
-        message: translations.type.required,
+        message: translations.status.required,
       },
     },
     helperText: '',
@@ -173,6 +174,10 @@ export const AddAppConfig: Record<string, any> = {
         value: 30,
         message: translations.short.max,
       },
+      minLength: {
+        value: 2,
+        message: translations.short.max,
+      },
     },
     config: {
       type: 'text',

frontend/src/pages/apps-store/components/ApplicationForm.tsx

@@ -70,14 +70,33 @@ const ApplicationForm = ({
   };
 
   const ribbonValidation = (inputValue: string) => {
-    if (inputValue.length > 30 && !(errors as Record<string, { message: string }>)[AddAppConfig.applicationLabel.key]) {
+    const labelError = (errors as Record<string, { message: string }>)[AddAppConfig.applicationLabel.key];
+
+    if (inputValue.length > 30 && !labelError) {
       control.setError(AddAppConfig.applicationLabel.key, { type: 'maxLength', message: t('config.application_label.maxLength') });
+    }
+
+    if (inputValue.length > 30) {
       return false;
-    } else if (inputValue.length > 30) {
+    }
+
+
+    if (inputValue.length > 2 && inputValue.length < 30 && labelError) {
+      clearErrors && clearErrors(AddAppConfig.applicationLabel.key);
+    }
+
+    if (inputValue.length > 2 && inputValue.length < 30) {
+      return true;
+    }
+
+    if (inputValue.length && inputValue.length < 3 && !labelError) {
+      control.setError(AddAppConfig.applicationLabel.key, { type: 'minLength', message: t('config.application_label.minLength') });
+    }
+
+    if (inputValue.length < 3) {
       return false;
-    } else if (inputValue.length < 30 && clearErrors && (errors as Record<string, { message: string }>)[AddAppConfig.applicationLabel.key]) {
-      clearErrors(AddAppConfig.applicationLabel.key);
     }
+
     return true;
   }
 
@@ -286,7 +305,7 @@ const ApplicationForm = ({
             )}
           </div>
           {/* End Logo */}
-          {readonly && <div className='flex flex-col gap-4 pt-4'>
+          <div className='flex flex-col gap-4 pt-4'>
             <SectionHeader title={t('appstore:config.status.section_title')} subTitle={t('appstore:config.status.section_subtitle')} />
             <RadioGroup control={control} errors={errors.status} config={AddAppConfig.status} />
             <Controller
@@ -313,7 +332,7 @@ const ApplicationForm = ({
                 );
               }}
             />
-          </div>}
+          </div>
           <div className="flex flex-col gap-4 pt-4">
             <SectionHeader title={t('form.steps_title')} subTitle={t('form.steps_subtitle')} />
             {fields.map((item, index) => {

frontend/src/pages/apps-store/components/ApplicationListTable.tsx

@@ -8,13 +8,11 @@ import { OrderDirection } from '../../../common/enums/sort-direction.enum';
 import { useErrorToast } from '../../../common/hooks/useToast';
 import DataTableFilters from '../../../components/data-table-filters/DataTableFilters';
 import DataTableComponent from '../../../components/data-table/DataTableComponent';
-import PopoverMenu, { PopoverMenuRowType } from '../../../components/popover-menu/PopoverMenu';
 import Select from '../../../components/Select/Select';
 import {
   useApplicationsQuery,
 } from '../../../services/application/Application.queries';
 import {
-  Application,
   ApplicationStatus,
 } from '../../../services/application/interfaces/Application.interface';
 import { useApplications } from '../../../store/selectors';
@@ -63,29 +61,6 @@ const ApplicationListTable = () => {
 
   }, [error]);
 
-  const buildUserActionColumn = (): TableColumn<Application> => {
-
-    const activeApplicationMenu = [
-      {
-        name: t('list.view'),
-        icon: EyeIcon,
-        onClick: onView,
-        type: PopoverMenuRowType.INFO,
-      },
-    ];
-
-    return {
-      name: '',
-      cell: (row: Application) => (
-        <PopoverMenu
-          row={row}
-          menuItems={activeApplicationMenu}
-        />
-      ),
-      width: '50px',
-      allowOverflow: true,
-    };
-  };
 
   const onRowsPerPageChange = (rows: number) => {
     setRowsPerPage(rows);
@@ -165,7 +140,7 @@ const ApplicationListTable = () => {
           </p>
         </div>
         <DataTableComponent
-          columns={[...ApplicationtListTableHeaders, buildUserActionColumn()]}
+          columns={[...ApplicationtListTableHeaders]}
           data={applications.items}
           loading={
             isLoading