time-tracker-ui/src/app/modules/time-clock/components/project-list-hover/project-list-hover.component.html at master · ioet/time-tracker-ui · 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

<div class="table-responsive">
  <table class="table table-sm table-striped table-bordered mb-0" aria-hidden="true">
    <thead class="thead-blue">
      <tr class="d-flex">
        <th class="col md-col">Quick Clock-in</th>
      </tr>
    </thead>
    <tbody>
      <tr class="d-flex" *ngFor="let item of listRecentProjects" >
        <td class="col md-col">
          <div class="flex flex-wrap flex-row justify-between">
            <div class="p-2 text-xs">
              <span>{{item.customer.name}}</span> -
              <strong><span>{{item.name}}</span></strong>
            </div>
            <div class="p-1 pr-2">
              <button
                *ngIf="showClockIn"
                class="btn btn-sm btn-primary btn-select"
                (click)="clockIn(item.id, item.customer.name, item.name)"
              >
                Clock In
              </button>
              <button
                *ngIf="!showClockIn"
                class="btn btn-sm btn-primary btn-select"
                (click)="switch(item.id, item.customer.name, item.name)"
              >
                Switch</button
              >&nbsp;
              <button *ngIf="!showClockIn" class="btn btn-sm btn-update btn-select" (click)="updateProject(item.id)">
                Update project
              </button>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
  <br>
</div>

<form [formGroup]="projectsForm">
  <div class="form-group">
    <label>Project:</label>
    <div class="form-control autocomplete">
      <ng-select
        formControlName="project_id"
        bindLabel="search_field"
        placeholder="Enter the project name"
        notFoundText="No projects found"
        [items]="listProjectsShowed"
        (search)="onSearch($event)"
        (change)="onSelect($event)"
        (close)="loadActiveTimeEntry()">
        <ng-template ng-option-tmp let-item="item">
          <div class="flex flex-wrap flex-row justify-between">
            <div class="p-2 text-xs">
              <span>{{item.customer.name}}</span> -
              <strong><span>{{item.name}}</span></strong>
            </div>
            <div class="p-1 pr-2">
              <button
                *ngIf="showClockIn"
                class="btn btn-sm btn-primary btn-select"
              >
                Clock In
              </button>
              <button
                *ngIf="!showClockIn"
                class="btn btn-sm btn-primary btn-select"
                (click)="switch(item.id, item.customer.name, item.name)"
              >
                Switch</button
              >&nbsp;
              <button *ngIf="!showClockIn" class="btn btn-sm btn-update btn-select" (click)="updateProject(item.id)">
                Update project
              </button>
            </div>
          </div>
        </ng-template>
      </ng-select>
    </div>
  </div>
</form>