1
- < h2 mat-dialog-title > Assets</ h2 >
1
+ < h2 mat-dialog-title >
2
+ < span > Assets</ span >
3
+ < div class ="header-actions ">
4
+ < mat-button-toggle-group
5
+ hideSingleSelectionIndicator ="true "
6
+ (change) ="settingsStore.setAssetDialogLayout($event.value) "
7
+ [value] ="settingsStore.assetDialogLayout() ">
8
+ < mat-button-toggle value ="list " matTooltip ="List Layout ">
9
+ < mat-icon > view_list</ mat-icon >
10
+ </ mat-button-toggle >
11
+ < mat-button-toggle value ="grid " matTooltip ="Grid Layout ">
12
+ < mat-icon > grid_view</ mat-icon >
13
+ </ mat-button-toggle >
14
+ </ mat-button-toggle-group >
15
+ @if ('ASSET_CREATE' | canUserPerform | async) {
16
+ < button mat-stroked-button color ="primary " (click) ="fileInput.click() ">
17
+ < mat-icon > upload_file</ mat-icon >
18
+ Upload Assets
19
+ </ button >
20
+ < input hidden type ="file " multiple #fileInput (change) ="onFileUpload($event) " />
21
+ }
22
+ </ div >
23
+ </ h2 >
24
+ @if (isLoading()) {
25
+ < mat-progress-bar mode ="query " />
26
+ }
27
+ @if (isLoading()) {
28
+ < mat-progress-bar mode ="query " />
29
+ }
2
30
< ll-breadcrumb >
3
31
< span style ="padding-left: 1rem "> </ span >
4
32
@for (pathItem of assetPath; track pathItem.fullSlug; let isFirst = $first) {
@@ -8,81 +36,134 @@ <h2 mat-dialog-title>Assets</h2>
8
36
}
9
37
</ ll-breadcrumb >
10
38
< mat-dialog-content >
11
- < mat-table [dataSource] ="dataSource " matSort >
12
- <!-- Checkbox Column -->
13
- < ng-container matColumnDef ="select ">
14
- < mat-header-cell *matHeaderCellDef > #</ mat-header-cell >
15
- < mat-cell *matCellDef ="let row ">
16
- @if (row.kind === 'FILE') {
17
- < mat-checkbox
18
- (click) ="$event.stopPropagation() "
19
- (change) ="$event ? selection.toggle(row) : null "
20
- [checked] ="selection.isSelected(row) ">
21
- </ mat-checkbox >
22
- }
23
- </ mat-cell >
24
- </ ng-container >
25
- < ng-container matColumnDef ="icon ">
26
- < mat-header-cell *matHeaderCellDef > Icon</ mat-header-cell >
27
- < mat-cell *matCellDef ="let element ">
28
- @switch (element.kind) {
29
- @case ('FILE') {
30
- < mat-icon > {{ fileIcon(element.type) }}</ mat-icon >
39
+ @if (settingsStore.assetDialogLayout() === 'list') {
40
+ < mat-table [dataSource] ="dataSource " matSort >
41
+ <!-- Checkbox Column -->
42
+ < ng-container matColumnDef ="select ">
43
+ < mat-header-cell *matHeaderCellDef > #</ mat-header-cell >
44
+ < mat-cell *matCellDef ="let row ">
45
+ @if (row.kind === 'FILE') {
46
+ < mat-checkbox
47
+ (click) ="$event.stopPropagation() "
48
+ (change) ="$event ? selection.toggle(row) : null "
49
+ [checked] ="selection.isSelected(row) ">
50
+ </ mat-checkbox >
31
51
}
32
- @case ('FOLDER') {
33
- < mat-icon > folder</ mat-icon >
52
+ </ mat-cell >
53
+ </ ng-container >
54
+ < ng-container matColumnDef ="icon ">
55
+ < mat-header-cell *matHeaderCellDef > Icon</ mat-header-cell >
56
+ < mat-cell *matCellDef ="let element ">
57
+ @switch (element.kind) {
58
+ @case ('FILE') {
59
+ < mat-icon > {{ fileIcon(element.type) }}</ mat-icon >
60
+ }
61
+ @case ('FOLDER') {
62
+ < mat-icon > folder</ mat-icon >
63
+ }
34
64
}
35
- }
36
- </ mat-cell >
37
- </ ng-container >
38
- < ng-container matColumnDef ="preview ">
39
- < mat-header-cell *matHeaderCellDef > Preview</ mat-header-cell >
40
- < mat-cell *matCellDef ="let element ">
41
- @if (element.kind === 'FILE' && filePreview(element.type)) {
42
- < img
43
- class ="border object-contain rounded bg-stripes-gray "
44
- width ="200 "
45
- height ="200 "
46
- alt ="thumbnail "
47
- loading ="lazy "
48
- [loaderParams] ="{ thumbnail: true } "
49
- ngSrc ="/api/v1/spaces/{{ data.spaceId }}/assets/{{ element.id }} " />
50
- }
51
- </ mat-cell >
52
- </ ng-container >
53
- < ng-container matColumnDef ="name ">
54
- < mat-header-cell *matHeaderCellDef > Name</ mat-header-cell >
55
- < mat-cell *matCellDef ="let element ">
56
- < div >
57
- < div class ="break-all "> {{ element.name }}{{ element.extension }}</ div >
58
- @if (element.metadata; as metadata) {
59
- < code class ="fw-light ">
60
- @if (metadata.width && metadata.height) {
61
- W{{ metadata.width }} x H{{ metadata.height }}
62
- }
63
- </ code >
65
+ </ mat-cell >
66
+ </ ng-container >
67
+ < ng-container matColumnDef ="preview ">
68
+ < mat-header-cell *matHeaderCellDef > Preview</ mat-header-cell >
69
+ < mat-cell *matCellDef ="let element ">
70
+ @if (element.kind === 'FILE' && filePreview(element.type)) {
71
+ < img
72
+ class ="border object-contain rounded bg-stripes-gray "
73
+ width ="200 "
74
+ height ="200 "
75
+ alt ="thumbnail "
76
+ loading ="lazy "
77
+ [loaderParams] ="{ thumbnail: true } "
78
+ ngSrc ="/api/v1/spaces/{{ data.spaceId }}/assets/{{ element.id }} " />
64
79
}
65
- </ div >
66
- </ mat-cell >
67
- </ ng-container >
68
- < ng-container matColumnDef ="size ">
69
- < mat-header-cell *matHeaderCellDef > Size</ mat-header-cell >
70
- < mat-cell *matCellDef ="let element "> {{ element.size | digitalStore }}</ mat-cell >
71
- </ ng-container >
72
- < ng-container matColumnDef ="type ">
73
- < mat-header-cell *matHeaderCellDef > Type</ mat-header-cell >
74
- < mat-cell *matCellDef ="let element "> {{ element.type }}</ mat-cell >
75
- </ ng-container >
76
- < ng-container matColumnDef ="updatedAt ">
77
- < mat-header-cell *matHeaderCellDef > Updated At</ mat-header-cell >
78
- < mat-cell *matCellDef ="let element " [matTooltip] ="element.updatedAt?.toDate() | date: 'medium' ">
79
- {{ element.updatedAt?.toDate() | date: 'mediumDate' }}
80
- </ mat-cell >
81
- </ ng-container >
80
+ </ mat-cell >
81
+ </ ng-container >
82
+ < ng-container matColumnDef ="name ">
83
+ < mat-header-cell *matHeaderCellDef > Name</ mat-header-cell >
84
+ < mat-cell *matCellDef ="let element ">
85
+ < div >
86
+ < div class ="break-all "> {{ element.name }}{{ element.extension }}</ div >
87
+ @if (element.metadata; as metadata) {
88
+ < code class ="fw-light ">
89
+ @if (metadata.width && metadata.height) {
90
+ W{{ metadata.width }} x H{{ metadata.height }}
91
+ }
92
+ </ code >
93
+ }
94
+ </ div >
95
+ </ mat-cell >
96
+ </ ng-container >
97
+ < ng-container matColumnDef ="size ">
98
+ < mat-header-cell *matHeaderCellDef > Size</ mat-header-cell >
99
+ < mat-cell *matCellDef ="let element "> {{ element.size | digitalStore }}</ mat-cell >
100
+ </ ng-container >
101
+ < ng-container matColumnDef ="type ">
102
+ < mat-header-cell *matHeaderCellDef > Type</ mat-header-cell >
103
+ < mat-cell *matCellDef ="let element "> {{ element.type }}</ mat-cell >
104
+ </ ng-container >
105
+ < ng-container matColumnDef ="updatedAt ">
106
+ < mat-header-cell *matHeaderCellDef > Updated At</ mat-header-cell >
107
+ < mat-cell *matCellDef ="let element " [matTooltip] ="element.updatedAt?.toDate() | date: 'medium' ">
108
+ {{ element.updatedAt?.toDate() | date: 'mediumDate' }}
109
+ </ mat-cell >
110
+ </ ng-container >
82
111
83
- < mat-header-row *matHeaderRowDef ="displayedColumns; sticky: true "> </ mat-header-row >
84
- < mat-row *matRowDef ="let row; columns: displayedColumns " (click) ="onRowSelect(row) "> </ mat-row >
85
- </ mat-table >
112
+ < mat-header-row *matHeaderRowDef ="displayedColumns; sticky: true "> </ mat-header-row >
113
+ < mat-row *matRowDef ="let row; columns: displayedColumns " (click) ="onAssetSelect(row) " class ="cursor-pointer "> </ mat-row >
114
+ </ mat-table >
115
+ } @else {
116
+ < div class ="flex flex-wrap gap-2 justify-start ">
117
+ @for (item of dataSource.connect() | async; track item.id) {
118
+ < mat-card class ="digital-asset-card cursor-pointer " appearance ="outlined " (click) ="onAssetSelect(item) ">
119
+ @if (item.inProgress) {
120
+ < div class ="progress ">
121
+ < mat-progress-spinner mode ="indeterminate " />
122
+ </ div >
123
+ } @else if (item.kind === 'FILE' && filePreview(item.type)) {
124
+ < img
125
+ class ="object-contain bg-stripes-gray "
126
+ width ="600 "
127
+ height ="600 "
128
+ loading ="lazy "
129
+ alt ="thumbnail "
130
+ [loaderParams] ="{ thumbnail: true } "
131
+ ngSrc ="/api/v1/spaces/{{ data.spaceId }}/assets/{{ item.id }} " />
132
+ } @else if (item.kind === 'FILE') {
133
+ < img mat-card-image ngSrc ="assets/icons/{{ fileIcon(item.type) }}.svg " alt ="File " width ="240 " height ="240 " />
134
+ } @else {
135
+ < img mat-card-image ngSrc ="assets/icons/folder.svg " alt ="Folder " width ="240 " height ="240 " />
136
+ }
137
+ < mat-card-header >
138
+ < mat-card-subtitle class ="break-all "> {{ item.name }}{{ item.extension }}</ mat-card-subtitle >
139
+ </ mat-card-header >
140
+ < mat-card-content >
141
+ @if (item.kind === 'FILE') {
142
+ @if (item.metadata; as metadata) {
143
+ @if (metadata.width && metadata.height) {
144
+ < code class ="fw-light "> W{{ metadata.width }} x H{{ metadata.height }} </ code >
145
+ }
146
+ }
147
+ @if (item.size; as size) {
148
+ < p > {{ size | digitalStore }}</ p >
149
+ }
150
+ }
151
+ < p [matTooltip] ="item.updatedAt?.toDate() | date: 'medium' ">
152
+ {{ item.updatedAt?.toDate() | date: 'mediumDate' }}
153
+ </ p >
154
+ </ mat-card-content >
155
+ < span class ="spacer "> </ span >
156
+ < mat-card-actions >
157
+ < mat-checkbox
158
+ (click) ="$event.stopPropagation() "
159
+ (change) ="$event ? selection.toggle(item) : null "
160
+ [checked] ="selection.isSelected(item) ">
161
+ </ mat-checkbox >
162
+ </ mat-card-actions >
163
+ </ mat-card >
164
+ }
165
+ </ div >
166
+ }
86
167
</ mat-dialog-content >
87
168
< mat-dialog-actions align ="end ">
88
169
< mat-paginator > </ mat-paginator >
0 commit comments