salix/modules/worker/front/time-control/index.html

<vn-crud-model
    vn-id="model"
    url="WorkerTimeControls/filter"
    filter="::$ctrl.filter"
    data="$ctrl.hours">
</vn-crud-model>
<div>
    <vn-card class="vn-pa-lg vn-w-lg">
        <vn-table model="model" auto-load="false">
            <vn-thead>
                <vn-tr>
                    <vn-td ng-repeat="weekday in $ctrl.weekDays" center>
                        <div class="weekday" translate>{{::$ctrl.weekdayNames[$index].name}}</div>
                        <div>
                            <span>{{::weekday.dated | date: 'dd'}}</span>
                            <span title="{{::weekday.dated | date: 'MMMM' | translate}}" translate>
                                {{::weekday.dated | date: 'MMMM'}}
                            </span>
                        </div>
                        <vn-chip
                            title="{{::weekday.event.name}}"
                            ng-class="{invisible: !weekday.event}">
                            <vn-avatar
                                ng-style="::{backgroundColor: weekday.event.color}">
                            </vn-avatar>
                            <div>
                                {{::weekday.event.name}}
                            </div>
                        </vn-chip>
                    </vn-td>
                </vn-tr>
            </vn-thead>
            <vn-tbody>
                <vn-tr>
                    <vn-td ng-repeat="weekday in $ctrl.weekDays" class="hours vn-pa-none" expand>
                        <section ng-repeat="hour in weekday.hours">
                            <vn-icon
                                icon="{{
                                    ::hour.direction == 'in' ? 'arrow_forward' : 'arrow_back'
                                }}"
                                title="{{
                                    ::(hour.direction == 'in' ? 'In' : 'Out') | translate
                                }}"
                                ng-class="::{'invisible': hour.direction == 'middle'}">
                            </vn-icon>
                            <vn-chip
                                ng-class="::{'colored': hour.manual, 'clickable': true}"
                                removable="::hour.manual"
                                on-remove="$ctrl.showDeleteDialog($event, hour)"
                                ng-click="$ctrl.edit($event, hour)"
                                >
                                <prepend>
                                    <vn-icon icon="edit"
                                        vn-tooltip="Edit">
                                    </vn-icon>
                                </prepend>
                                {{::hour.timed | date: 'HH:mm'}}
                            </vn-chip>
                        </section>
                    </vn-td>
                </vn-tr>
            </vn-tbody>
            <vn-tfoot>
                <vn-tr>
                    <vn-td ng-repeat="weekday in $ctrl.weekDays" center>
                        {{$ctrl.formatHours(weekday.workedHours)}} h.
                    </vn-td>
                </vn-tr>
                <vn-tr>
                    <vn-td center ng-repeat="weekday in $ctrl.weekDays">
                        <vn-icon-button
                            icon="add_circle"
                            vn-tooltip="Add time"
                            ng-click="$ctrl.showAddTimeDialog(weekday)">
                        </vn-icon-button>
                    </vn-td>
                </vn-tr>
            </vn-tfoot>
        </vn-table>
    </vn-card>

    <vn-button-bar class="vn-w-lg">
        <vn-button
            label="Satisfied"
            disabled="$ctrl.state == 'CONFIRMED'"
            ng-show="$ctrl.state && $ctrl.isHimSelf"
            ng-click="$ctrl.isSatisfied()">
        </vn-button>
        <vn-button
            label="Not satisfied"
            disabled="$ctrl.state == 'REVISE'"
            ng-show="$ctrl.state && $ctrl.isHimSelf"
            ng-click="reason.show()">
        </vn-button>
        <vn-button
            label="Reason"
            ng-show="$ctrl.state && $ctrl.reason && ($ctrl.isHimSelf || $ctrl.isHr)"
            ng-click="reason.show()">
        </vn-button>
        <vn-button
            label="Resend"
            ng-click="sendEmailConfirmation.show()"
            class="right"
            vn-tooltip="Resend email of this week to the user"
            ng-show="$ctrl.isHr && $ctrl.state != 'CONFIRMED' && $ctrl.canResend">
        </vn-button>
    </vn-button-bar>
</div>

<vn-side-menu side="right">
    <div class="vn-pa-md">
        <div class="totalBox" style="text-align: center;">
            <h6 translate>Hours</h6>
            <vn-label-value
                label="Week total"
                value="{{$ctrl.weekTotalHours}} h.">
            </vn-label-value>
            <vn-label-value
                label="Finish at"
                value="{{$ctrl.getFinishTime()}}">
            </vn-label-value>
        </div>
        <vn-calendar
            vn-id="calendar"
            class="vn-pt-md"
            ng-model="$ctrl.date"
            format-week="$ctrl.formatWeek($element)"
            on-move="$ctrl.getMailStates($date)"
            has-events="$ctrl.hasEvents($day)">
        </vn-calendar>
    </div>
</vn-side-menu>

<vn-dialog
    vn-id="addTimeDialog"
    on-accept="$ctrl.addTime()"
    message="Add time">
    <tpl-body>
        <vn-input-time
            vn-one
            vn-focus
            ng-model="$ctrl.newTimeEntry.timed"
            label="Hour"
            required="true">
        </vn-input-time>
        <vn-autocomplete
            label="Type"
            ng-model="$ctrl.newTimeEntry.direction"
            data="$ctrl.entryDirections"
            select-fields="['code','description']"
            show-field="description"
            value-field="code"
            required="true">
        </vn-autocomplete>
    </tpl-body>
    <tpl-buttons>
        <input type="button" response="cancel" translate-attr="{value: 'Cancel'}"/>
        <button response="accept" translate>Save</button>
    </tpl-buttons>
</vn-dialog>
<vn-confirm
    vn-id="delete-entry-dialog"
    on-accept="$ctrl.deleteTimeEntry()"
    message="This time entry will be deleted"
    question="Are you sure you want to delete this entry?">
</vn-confirm>

<!-- Edit entry Popover -->
<vn-popover vn-id="editEntry">
    <vn-horizontal class="vn-pa-sm edit-time-entry">
        <vn-autocomplete class="dense"
            ng-model="$ctrl.selectedRow.direction"
            data="$ctrl.entryDirections"
            select-fields="['code','description']"
            show-field="description"
            value-field="code">
        </vn-autocomplete>
        <vn-icon-button vn-none
            icon="check"
            vn-tooltip="Save"
            ng-click="$ctrl.save()">
        </vn-icon-button>
    </vn-horizontal>
</vn-popover>

<vn-dialog
    vn-id="reason"
    on-accept="$ctrl.isUnsatisfied()">
    <tpl-body>
        <div class="reasonDialog">
            <vn-textarea
                label="Reason"
                ng-model="$ctrl.reason"
                disabled="!$ctrl.isHimSelf"
                rows="5"
                required="true">
            </vn-textarea>
        </div>
    </tpl-body>
    <tpl-buttons ng-if="$ctrl.isHimSelf">
        <input type="button" response="cancel" translate-attr="{value: 'Cancel'}"/>
        <button response="accept" translate>Save</button>
    </tpl-buttons>
</vn-dialog>

<vn-dialog
    vn-id="sendEmailConfirmation"
    on-accept="$ctrl.resendEmail()"
    message="Send time control email">
    <tpl-body>
        <span translate>Are you sure you want to send it?</span>
    </tpl-body>
    <tpl-buttons>
        <input type="button" response="cancel" translate-attr="{value: 'Cancel'}"/>
        <button response="accept" translate>Confirm</button>
    </tpl-buttons>
</vn-dialog>