Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(edit-content): Show restrictions based on the relationship. #30976

Merged
merged 15 commits into from
Dec 27, 2024
Merged

feat(edit-content): Show restrictions based on the relationship. #30976

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
b38696b
chore(edit-content): handle 1-1 with radio button
nicobytes Dec 18, 2024
5a98b7f
Merge branch 'main' into 30928-relationship-field-allow-choosing-cont…
nicobytes Dec 19, 2024
9d8dbb6
Merge branch 'main' into 30928-relationship-field-allow-choosing-cont…
nicobytes Dec 23, 2024
226136c
chore(edit-content): restriccions to relationship field
nicobytes Dec 23, 2024
89523f2
chore(edit-content): add unit tests
nicobytes Dec 24, 2024
ad56950
chore(edit-content): apply format
nicobytes Dec 24, 2024
e94759c
chore(edit-content): remove header
nicobytes Dec 24, 2024
3502f16
Merge branch 'main' into 30928-relationship-field-allow-choosing-cont…
nicobytes Dec 24, 2024
3193785
Merge branch 'main' into 30928-relationship-field-allow-choosing-cont…
nicobytes Dec 26, 2024
069c40c
Merge branch 'main' into 30928-relationship-field-allow-choosing-cont…
nicobytes Dec 26, 2024
4ff83cf
fix(edit-content): adjust modal height and update table column styles
nicobytes Dec 26, 2024
f1704c5
Merge branch '30928-relationship-field-allow-choosing-content-accordi…
nicobytes Dec 26, 2024
88da682
chore(edit-content): fix unit tests
nicobytes Dec 27, 2024
908a4d3
Merge branch 'main' into 30928-relationship-field-allow-choosing-cont…
nicobytes Dec 27, 2024
f818cd9
chore(edit-content): Fix UI issues
nicobytes Dec 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions core-web/libs/dotcms-scss/angular/dotcms-theme/components/form/_radiobutton.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
@use "variables" as *;
@import "common";

p-tableradiobutton.p-element,
p-radiobutton.p-element {
gap: $spacing-1;

Expand Down
8 changes: 8 additions & 0 deletions ...tent-file-field/components/dot-select-existing-file/dot-select-existing-file.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,10 @@ export class DotSelectExistingFileComponent implements OnInit {
*/
readonly store = inject(SelectExisingFileStore);

/**
* A readonly property that injects the `DotFileFieldUploadService` service.
* This service is used to manage the state and actions related to selecting existing files.
*/
readonly #uploadService = inject(DotFileFieldUploadService);
/**
* A reference to the dynamic dialog instance.
Expand All @@ -59,6 +63,10 @@ export class DotSelectExistingFileComponent implements OnInit {
*/
$sideBarRef = viewChild.required(DotSideBarComponent);

/**
* A readonly property that injects the `DynamicDialogConfig` service.
* This service is used to get the dialog data.
*/
readonly #dialogConfig = inject(DynamicDialogConfig<DialogData>);

constructor() {
Expand Down
240 changes: 106 additions & 134 deletions ...p-field/components/dot-select-existing-content/dot-select-existing-content.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,143 +1,115 @@
@let data = store.data();
@let columns = store.columns();
@let pagination = store.pagination();
@let selectionMode = store.selectionMode();
@let totalItems = $items().length;

@if ($visible()) {
@defer {
<p-dialog
[modal]="true"
[(visible)]="$visible"
(onShow)="onShowDialog()"
(onHide)="emitSelectedItems()"
[draggable]="false"
dataKey="id"
appendTo="body"
width="90%"
[style]="{ width: '90%', 'max-width': '1040px', height: '90vh' }">
<ng-template pTemplate="header">
<div class="flex items-center justify-center gap-2">
<i class="pi pi-search"></i>
<span class="p-dialog-title">
{{ 'dot.file.relationship.dialog.search' | dm }}
</span>
</div>
</ng-template>
@if (store.errorMessage()) {
<div
class="flex justify-content-center border-1 border-solid border-gray-400 p-6 border-round text-base">
<p>{{ store.errorMessage() | dm }}</p>
</div>
} @else if (data.length === 0) {
<div
class="flex justify-content-center border-1 border-solid border-gray-400 p-6 border-round text-base gap-2">
<i class="pi pi-folder-open"></i>
<p>{{ 'dot.file.relationship.dialog.search.empty.content' | dm }}</p>
</div>
} @else {
<p-table
#datatable
[columns]="columns"
[value]="data"
selectionMode="multiple"
[(selection)]="$selectedItems"
[loading]="store.isLoading()"
[paginator]="data.length > pagination.rowsPerPage"
[first]="pagination.offset"
[rows]="pagination.rowsPerPage"
[scrollable]="true"
[globalFilterFields]="['title', 'step', 'description']"
styleClass="dotTable p-datatable-existing-content w-full">
<ng-template pTemplate="caption">
<div class="flex justify-content-between align-items-center w-full">
<div class="flex align-items-center gap-2">
<div class="flex-none">
<dot-search
(onSearch)="datatable.filterGlobal($event, 'contains')" />
</div>
<div class="flex-grow-1">
<p class="text-primary-500">
{{
'dot.file.relationship.dialog.per.page'
| dm: [pagination.rowsPerPage.toString()]
}}
</p>
</div>
</div>
@if (data.length > pagination.rowsPerPage) {
<dot-pagination
[currentPageReportLayout]="'left'"
(nextPage)="store.nextPage()"
(previousPage)="store.previousPage()"
[totalPages]="store.totalPages()"
[currentPage]="pagination.currentPage" />
}
<div class="flex flex-column gap-2 h-full justify-content-between">
@if (store.errorMessage()) {
<div
class="flex justify-content-center border-1 border-solid border-gray-400 p-6 border-round text-base">
<p>{{ store.errorMessage() | dm }}</p>
</div>
} @else if (data.length === 0) {
<div
class="flex justify-content-center border-1 border-solid border-gray-400 p-6 border-round text-base gap-2">
<i class="pi pi-folder-open"></i>
<p>{{ 'dot.file.relationship.dialog.search.empty.content' | dm }}</p>
</div>
} @else {
<p-table
#datatable
[columns]="columns"
[value]="data"
[selectionMode]="selectionMode"
[(selection)]="$selectedItems"
[loading]="store.isLoading()"
[paginator]="data.length > pagination.rowsPerPage"
[first]="pagination.offset"
[rows]="pagination.rowsPerPage"
[scrollable]="true"
[globalFilterFields]="['title', 'step', 'description']"
styleClass="dotTable p-datatable-existing-content w-full">
<ng-template pTemplate="caption">
<div class="flex justify-content-between align-items-center w-full">
<div class="flex align-items-center gap-2">
<div class="flex-none">
<dot-search (onSearch)="datatable.filterGlobal($event, 'contains')" />
</div>
<div class="flex-grow-1">
<p class="text-primary-500">
{{
'dot.file.relationship.dialog.per.page'
| dm: [pagination.rowsPerPage.toString()]
}}
</p>
</div>
</ng-template>
<ng-template pTemplate="header" styleClass="relative" let-columns>
<tr>
<th
scope="col"
style="width: 4rem"
pFrozenColumn
alignFrozen="left"
[frozen]="true">
<p-tableHeaderCheckbox />
</th>
@for (column of columns; track $index) {
<th
class="max-w-12rem"
scope="col"
[pSortableColumn]="column.field">
<span class="capitalize">{{ column.header }}</span>
<p-sortIcon [field]="column.field" />
</th>
}
<th scope="col" pFrozenColumn alignFrozen="right" [frozen]="true">
{{ 'dot.file.relationship.dialog.menu.column' | dm }}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-item let-columns="columns">
<tr [class.p-highlight]="checkIfSelected(item)">
<td pFrozenColumn alignFrozen="left" [frozen]="true">
<p-tableCheckbox [value]="item" />
</td>
@for (column of columns; track $index) {
<td class="max-w-12rem">
<p class="truncate-text">{{ item[column.field] }}</p>
</td>
}
<td pFrozenColumn alignFrozen="right" [frozen]="true">
<i class="pi pi-pencil"></i>
</td>
</tr>
</ng-template>
</p-table>
}
<ng-template pTemplate="footer">
<div class="flex justify-content-between">
<div>
<p class="text-primary-500">
{{
'dot.file.relationship.dialog.selected.items'
| dm: [$selectedItems().length.toString()]
}}
</p>
</div>
<div>
<p-button
[label]="'Cancel' | dm"
[outlined]="true"
(onClick)="closeDialog()"
[text]="true"
severity="primary" />
<p-button
[disabled]="$isApplyDisabled()"
(onClick)="closeDialog()"
[label]="$applyLabel()" />
</div>
@if (data.length > pagination.rowsPerPage) {
<dot-pagination
[currentPageReportLayout]="'left'"
(nextPage)="store.nextPage()"
(previousPage)="store.previousPage()"
[totalPages]="store.totalPages()"
[currentPage]="pagination.currentPage" />
}
</div>
</ng-template>
</p-dialog>
<ng-template pTemplate="header" styleClass="relative" let-columns>
<tr>
<th
scope="col"
class="max-w-5rem"
pFrozenColumn
alignFrozen="left"
[frozen]="true">
@if (selectionMode === 'multiple') {
<p-tableHeaderCheckbox />
}
</th>
@for (column of columns; track $index) {
<th class="max-w-12rem" scope="col" [pSortableColumn]="column.field">
<span class="capitalize">{{ column.header }}</span>
<p-sortIcon [field]="column.field" />
</th>
}
</tr>
</ng-template>
<ng-template pTemplate="body" let-item let-columns="columns">
<tr [class.p-highlight]="checkIfSelected(item)">
<td class="max-w-5rem" pFrozenColumn alignFrozen="left" [frozen]="true">
@if (selectionMode === 'multiple') {
<p-tableCheckbox [value]="item" />
} @else {
<p-tableRadioButton [value]="item" />
}
</td>
@for (column of columns; track $index) {
<td class="max-w-12rem">
<p class="truncate-text">{{ item[column.field] }}</p>
</td>
}
</tr>
</ng-template>
</p-table>
}
}
<div class="flex justify-content-between">
<div>
<p class="text-primary-500">
{{ 'dot.file.relationship.dialog.selected.items' | dm: [totalItems.toString()] }}
</p>
</div>
<div class="flex gap-2">
<p-button
[label]="'Cancel' | dm"
[outlined]="true"
(onClick)="closeDialog()"
[text]="true"
severity="primary" />
<p-button
[disabled]="totalItems === 0"
(onClick)="closeDialog()"
[label]="$applyLabel()" />
</div>
</div>
</div>
Loading