tykayn/ng-implementation
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

up similar cases page

Browse source
This commit is contained in:
Tykayn 2025-10-15 15:26:37 +02:00 • committed by tykayn
parent 7cebea45d8
commit 848169595d
13 changed files with 459 additions and 392 deletions
Download patch file Download diff file Expand all files Collapse all files

8
my-workspace/projects/sae-lib/buttons/copy/copy.scss
View file

@ -8,6 +8,12 @@
border-width: 0;
padding: 4px;
color: #333;
background: variables.$csc-copy-color
cursor: pointer;
background: variables.$csc-copy-color;
&:hover {
color: white;
background: variables.$csc-magic-color;
}
}
}

4
my-workspace/projects/sae-lib/chatbot/bot-talks/bot-talks.scss
View file

@ -51,6 +51,10 @@
app-copy {
margin-left: 12px;
.button {
cursor: pointer;
}
}
a {

48
my-workspace/projects/sae-lib/filters/filters-group/filters-group.html
View file

@ -1,72 +1,78 @@
<div [ngClass]="{highlighted, 'is-disabled': disabled}" class="filter-group">
<!-- disabled: {{ disabled }}-->
@if(appState.filters){
@if (appState.filters) {
<div class="selectors">
<sae-multi-selector
(clickedOnInput)="onClickedOnInput($event)"
(availableChoicesChange)="onAvailableChoicesChange($event, 'engineType')"
(clickedOnInput)="onClickedOnInput($event)"
(selectedChoicesChange)="onSelectedChoicesChange($event, 'engineType')"
[actionTypes]="actionTypes"
[availableChoices]="appState.filters?.engineType?.availableList"
[disabled]="disabled"
[label]="'Engine type'"
[displayDropdown]="activeLabel==='Engine type'"
[label]="'Engine type'"
[selectedChoices]="appState.filters?.engineType?.selectedList"
[store]="store"
></sae-multi-selector>
<sae-multi-selector
(clickedOnInput)="onClickedOnInput($event)"
(availableChoicesChange)="onAvailableChoicesChange($event, 'findings')"
(clickedOnInput)="onClickedOnInput($event)"
(selectedChoicesChange)="onSelectedChoicesChange($event, 'findings')"
[actionTypes]="actionTypes"
[availableChoices]="appState.filters.findings.availableList"
[label]="'Findings'"
[disabled]="disabled"
[displayDropdown]="activeLabel==='Findings'"
[label]="'Findings'"
[selectedChoices]="appState.filters.findings.selectedList"
[store]="store"
></sae-multi-selector>
<sae-multi-selector
(clickedOnInput)="onClickedOnInput($event)"
(availableChoicesChange)="onAvailableChoicesChange($event, 'ata')"
(clickedOnInput)="onClickedOnInput($event)"
(selectedChoicesChange)="onSelectedChoicesChange($event, 'ata')"
[actionTypes]="actionTypes"
[availableChoices]="appState.filters?.ata?.availableList"
[label]="'ATA'"
[disabled]="disabled"
[displayDropdown]="activeLabel==='ATA'"
[label]="'ATA'"
[selectedChoices]="appState.filters?.ata?.selectedList"
[store]="store"
></sae-multi-selector>
<sae-multi-selector
(clickedOnInput)="onClickedOnInput($event)"
(availableChoicesChange)="onAvailableChoicesChange($event, 'partNumber')"
(clickedOnInput)="onClickedOnInput($event)"
(selectedChoicesChange)="onSelectedChoicesChange($event, 'partNumber')"
[actionTypes]="actionTypes"
[availableChoices]="appState.filters?.partNumber?.availableList"
[label]="'Part number'"
[disabled]="disabled"
[displayDropdown]="activeLabel==='Part number'"
[label]="'Part number'"
[selectedChoices]="appState.filters?.partNumber?.selectedList"
[store]="store"
></sae-multi-selector>
<sae-multi-selector
(clickedOnInput)="onClickedOnInput($event)"
(availableChoicesChange)="onAvailableChoicesChange($event, 'technicalManual')"
(clickedOnInput)="onClickedOnInput($event)"
(selectedChoicesChange)="onSelectedChoicesChange($event, 'technicalManual')"
[actionTypes]="actionTypes"
[availableChoices]="appState.filters?.technicalManual?.availableList"
[label]="'Technical Manual'"
[disabled]="disabled"
[displayDropdown]="activeLabel==='Technical Manual'"
[label]="'Technical Manual'"
[selectedChoices]="appState.filters?.technicalManual?.selectedList"
[store]="store"
></sae-multi-selector>
<sae-multi-selector
(clickedOnInput)="onClickedOnInput($event)"
(availableChoicesChange)="onAvailableChoicesChange($event, 'onOffWing')"
(clickedOnInput)="onClickedOnInput($event)"
(selectedChoicesChange)="onSelectedChoicesChange($event, 'onOffWing')"
[actionTypes]="actionTypes"
[availableChoices]="appState.filters?.onOffWing?.availableList"
[label]="'On-wing/off-wing'"
[disabled]="disabled"
[displayDropdown]="activeLabel==='On-wing/off-wing'"
[label]="'On-wing/off-wing'"
[selectedChoices]="appState.filters?.onOffWing?.selectedList"
[store]="store"
></sae-multi-selector>
@ -75,12 +81,12 @@
}
@if (!hideChipsList) {
<div class="chips-listing">
<div class="chips-listing">
<!-- liste de chips-->
<div class="chips-column">
@for (elem of appState.filters.engineType.selectedList; track elem.label) {
<button class="button chips is-rounded is-small" (click)="onSelectedChoicesChange(elem, 'engineType')">
<button (click)="onSelectedChoicesChange(elem, 'engineType')" class="button chips is-rounded is-small">
{{ elem.label }}
<span class="post-button">
x
@ -90,7 +96,7 @@
</div>
<div class="chips-column">
@for (elem of appState.filters.findings.selectedList; track elem.label) {
<button class="button chips is-rounded is-small" (click)="onSelectedChoicesChange(elem, 'findings')">
<button (click)="onSelectedChoicesChange(elem, 'findings')" class="button chips is-rounded is-small">
{{ elem.label }}
<span class="post-button">
x
@ -100,7 +106,7 @@
</div>
<div class="chips-column">
@for (elem of appState.filters.ata.selectedList; track elem.label) {
<button class="button chips is-rounded is-small" (click)="onSelectedChoicesChange(elem, 'ata')">
<button (click)="onSelectedChoicesChange(elem, 'ata')" class="button chips is-rounded is-small">
{{ elem.label }}
<span class="post-button">
x
@ -110,7 +116,7 @@
</div>
<div class="chips-column">
@for (elem of appState.filters.partNumber.selectedList; track elem.label) {
<button class="button chips is-rounded is-small" (click)="onSelectedChoicesChange(elem, 'partNumber')">
<button (click)="onSelectedChoicesChange(elem, 'partNumber')" class="button chips is-rounded is-small">
{{ elem.label }}
<span class="post-button">
x
@ -120,7 +126,7 @@
</div>
<div class="chips-column">
@for (elem of appState.filters.technicalManual.selectedList; track elem.label) {
<button class="button chips is-rounded is-small" (click)="onSelectedChoicesChange(elem, 'technicalManual')">
<button (click)="onSelectedChoicesChange(elem, 'technicalManual')" class="button chips is-rounded is-small">
{{ elem.label }}
<span class="post-button">
x
@ -130,7 +136,7 @@
</div>
<div class="chips-column">
@for (elem of appState.filters.onOffWing.selectedList; track elem.label) {
<button class="button chips is-rounded is-small" (click)="onSelectedChoicesChange(elem, 'onOffWing')">
<button (click)="onSelectedChoicesChange(elem, 'onOffWing')" class="button chips is-rounded is-small">
{{ elem.label }}
<span class="post-button">
x

3
my-workspace/projects/sae-lib/filters/filters-group/filters-group.scss
View file

@ -49,6 +49,8 @@
&.is-disabled {
input {
background: grey;
border-color: grey;
color: white;
}
}
@ -121,4 +123,5 @@
margin-left: 5px;
}
}

10
my-workspace/projects/sae-lib/filters/filters-group/filters-group.ts
View file

@ -1,4 +1,4 @@
import {Component, HostListener, Input, ElementRef} from '@angular/core';
import {Component, ElementRef, HostListener, Input} from '@angular/core';
import {MultiSelector} from '../../inputs/multi-selector/multi-selector';
import {CommonModule} from '@angular/common';
@ -17,7 +17,7 @@ export class FiltersGroup {
@Input() store: any = {};
@Input() appState: any = {};
@Input() actionTypes: any;
@Input() disabled!: boolean;
@Input() disabled: boolean = false;
@Input() hideChipsList: boolean = false;
// Gère quel sélecteur a son dropdown ouvert
@ -57,8 +57,10 @@ export class FiltersGroup {
}
onClickedOnInput(event: any) {
const label = event?.label;
this.activeLabel = label || null;
if (!this.disabled) {
const label = event?.label;
this.activeLabel = label || null;
}
}
@HostListener('document:click', ['$event'])

35
my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.html
View file

@ -12,6 +12,7 @@
</span>
</div>
<!-- (blur)="displayDropdown = false" (click)="onClickInput()" -->
<!-- disabled: {{ disabled }}-->
<input
(focus)="onInputClickedOrFocused($event)"
(input)="onSearchInput($event)"
@ -19,8 +20,8 @@
placeholder="{{label}}"
type="text">
<span [ngClass]="{ 'is-visible' : selectedChoices?.length}"
(click)="resetChoicesLists()"
<span (click)="resetChoicesLists()"
[ngClass]="{ 'is-visible' : selectedChoices?.length}"
class="selected-items-counter">
{{ selectedChoices?.length || 0 }}
</span>
@ -29,7 +30,7 @@
<i class="ri-arrow-down-s-line"></i>
</div>
@if (displayDropdown ) {
@if (displayDropdown) {
<div class="dropdown">
@ -39,36 +40,36 @@
@if (selectedChoices?.length && availableChoices?.length) {
<div class="selected-items">
@for(sc of getFilteredSelectedChoices(); track sc.value){
<div (click)="selectedChoicesChangeToggleItem(sc)"
@for (sc of getFilteredSelectedChoices(); track sc.value) {
<div (click)="selectedChoicesChangeToggleItem(sc)"
class="dropdown-item"
>
<img alt="checkbox" src="checkbox-active.svg" />
<span class="label">
class="dropdown-item"
>
<img alt="checkbox" src="checkbox-active.svg"/>
<span class="label">
<!-- {{ sc.label }} -->
</span>
</div>
</div>
}
</div>
<div class="separator">
<div class="label">Add new part number</div>
<i class="ri-add-line"></i>
<div class="label">Add new part number</div>
<i class="ri-add-line"></i>
</div>
}
<div class="available-items">
<!-- disponibles:-->
<!-- disponibles:-->
<!-- available:-->
@for(ac of getFilteredAvailableChoices(); track ac.value){
@for (ac of getFilteredAvailableChoices(); track ac.value) {
<div (click)="availableChoicesChangeToggleItem(ac)"
class="dropdown-item"
>
<img alt="checkbox" src="checkbox-inactive.svg" />
<img alt="checkbox" src="checkbox-inactive.svg"/>
<span class="label">
{{ ac.label }}
</span>

40
my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.scss
View file

@ -2,6 +2,16 @@
:host {
&.is-disabled {
input {
border: grey;
}
.selected-items-counter {
color: grey;
}
}
.input-box {
width: 218px;
color: #1b1d27;
@ -109,19 +119,18 @@
border: 1px solid #8D91A4;
box-shadow: 0 0 13px 0 rgba(37, 91, 142, 0.10);
color: var(--color-text-base, #1B1D27);
text-overflow: ellipsis;
color: var(--color-text-base, #1B1D27);
/* Text/text-base */
font-family: var(--Fonts-Font-text, Barlow);
font-size: var(--Font-Base, 14px);
font-style: normal;
font-weight: 400;
line-height: 100%; /* 14px */
text-overflow: ellipsis;
/* Text/text-base */
font-family: var(--Fonts-Font-text, Barlow);
font-size: var(--Font-Base, 14px);
font-style: normal;
font-weight: 400;
line-height: 100%; /* 14px */
.dropdown-list {
max-height: 200px;
overflow-y: auto;
@ -139,7 +148,7 @@ line-height: 100%; /* 14px */
}
}
.separator{
.separator {
display: flex;
width: 186px;
height: 34px;
@ -153,7 +162,7 @@ line-height: 100%; /* 14px */
margin-top: 6px;
margin-bottom: 16px;
.label{
.label {
overflow: hidden;
color: var(--color-text-secondary, #525668);
leading-trim: both;
@ -167,11 +176,12 @@ line-height: 100%; /* 14px */
}
}
.available-items{
img{
.available-items {
img {
margin-right: 6px;
}
.dropdown-item{
.dropdown-item {
padding: 6px;
margin-bottom: 6px;
display: flex;

13
my-workspace/projects/sae-lib/inputs/multi-selector/multi-selector.ts
View file

@ -77,13 +77,16 @@ export class MultiSelector implements OnInit {
}
onInputClickedOrFocused(event?: any) {
// Informe le parent que cet input a été cliqué/focus pour fermer les autres dropdowns
this.clickedOnInput.emit({ label: this.label });
if (this.disabled) {
console.log('onInputClickedOrFocused', this.disabled, event)
if (!this.disabled) {
// Informe le parent que cet input a été cliqué/focus pour fermer les autres dropdowns
this.clickedOnInput.emit({label: this.label});
this.displayDropdown = true;
} else {
console.info('disabled input');
return;
}
this.displayDropdown = true;
}
onClickInput() {
@ -93,7 +96,7 @@ export class MultiSelector implements OnInit {
return;
}
// Informe le parent pour fermer les autres puis ouvre celui-ci
this.clickedOnInput.emit({ label: this.label });
this.clickedOnInput.emit({label: this.label});
this.displayDropdown = true;
console.log('Opened dropdown:', this.displayDropdown);
}