doc-apply/src/main/webapp/app/job/my-positions/my-positions-page.component.html at b14e791cd536555ffb48ebae132e2bb6a749b367 · ls1intum/doc-apply · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!-- Confirm Dialogs -->
<jhi-confirm-dialog
  label="button.edit"
  header="myPositionsPage.confirmDialog.editJobHeader"
  message="myPositionsPage.confirmDialog.editJobMessage"
  severity="primary"
  confirmIcon="pencil"
  [showOpenButton]="false"
  [visible]="showEditPublishedDialog()"
  (confirmed)="onConfirmEdit()"
  (closed)="showEditPublishedDialog.set(false)"
/>

<jhi-confirm-dialog
  label="button.delete"
  header="myPositionsPage.confirmDialog.deleteHeader"
  message="myPositionsPage.confirmDialog.deleteMessage"
  severity="danger"
  confirmIcon="trash"
  [showOpenButton]="false"
  [visible]="showDeleteDialog()"
  (confirmed)="onConfirmDelete()"
  (closed)="showDeleteDialog.set(false)"
/>

<jhi-confirm-dialog
  label="button.close"
  header="myPositionsPage.confirmDialog.closeHeader"
  message="myPositionsPage.confirmDialog.closeMessage"
  severity="danger"
  confirmIcon="xmark"
  [showOpenButton]="false"
  [visible]="showCloseDialog()"
  (confirmed)="onConfirmClose()"
  (closed)="showCloseDialog.set(false)"
/>

<div class="page-container">
  <div class="header-container">
    <div class="page-header">
      <h1>
        <span jhiTranslate="sidebar.recruitment.title"></span>
        -
        <span jhiTranslate="myPositionsPage.header.title"></span>
      </h1>
    </div>
    <jhi-button
      label="myPositionsPage.header.createButton"
      icon="plus"
      severity="primary"
      (click)="onCreateJob()"
      [shouldTranslate]="true"
    />
  </div>
  <div class="my-positions-container">
    <div>
      <jhi-search-filter-sort-bar
        [searchText]="'myPositionsPage.searchFilterSortBar.searchText'"
        [totalRecords]="totalRecords()"
        [singleEntity]="'job'"
        [multipleEntities]="'jobs'"
        (searchOutput)="onSearchEmit($event)"
        (filterOutput)="onFilterEmit($event)"
        (sortOutput)="loadOnSortEmit($event)"
        [filters]="[
          {
            filterId: 'status',
            filterLabel: 'myPositionsPage.tableColumn.status',
            filterSearchPlaceholder: 'myPositionsPage.searchFilterSortBar.filterOptions.stateSearchPlaceholder',
            filterOptions: availableStatusLabels,
            shouldTranslateOptions: true,
          },
        ]"
        [sortableFields]="sortableFields"
      />
      <div>
        <jhi-dynamic-table
          [columns]="columns()"
          [data]="jobs()"
          [totalRecords]="totalRecords()"
          [page]="page()"
          [rows]="pageSize()"
          (rowsHydrated)="pageSize.set($event)"
          [loading]="loading()"
          [selectable]="false"
          (lazyLoad)="loadOnTableEmit($event)"
        />
      </div>

      <!-- Templates for localized date rendering -->
      <ng-template #startDateTemplate let-job>
        {{ (job.startDate?.toString() | localizedDate) || '-' }}
      </ng-template>
      <ng-template #createdAtTemplate let-job>
        {{ (job.createdAt?.toString() | localizedDate) || '-' }}
      </ng-template>
      <ng-template #lastModifiedAtTemplate let-job>
        {{ (job.lastModifiedAt?.toString() | localizedDate) || '-' }}
      </ng-template>
      <ng-template #professorTemplate let-job>
        <div class="flex items-center gap-2">
          <jhi-user-avatar [fullName]="job.professorName ?? ''" [avatarUrl]="job.avatar" loading="lazy" />
          <span class="truncate">
            {{ job.professorName ? (job.professorName.startsWith('Prof.') ? job.professorName : job.professorName) : '-' }}
          </span>
        </div>
      </ng-template>

      <ng-template #actionTemplate let-job>
        <div class="flex justify-end gap-1">
          <jhi-button tooltip="button.view" icon="eye" variant="text" (click)="onViewJob(job.jobId)" />
          <jhi-button
            [tooltip]="getMenuItems()(job).length > 0 ? 'button.actions' : 'button.noFurtherActions'"
            icon="ellipsis-vertical"
            variant="text"
            (click)="menu.toggle($event)"
            [disabled]="getMenuItems()(job).length === 0"
          />
          <jhi-menu #menu [items]="getMenuItems()(job)" [shouldTranslate]="true" />
        </div>
      </ng-template>

      <ng-template #stateTemplate let-job>
        <jhi-tag [text]="stateTextMap()[job.state] || 'jobState.unknown'" [color]="stateSeverityMap()[job.state] || 'info'" width="8rem" />
      </ng-template>
    </div>
  </div>
</div>