uqac-websem-project/frontend/WebSem/app/views/articlesedit.html

<div layout="column" ng-cloak class="md-inline-form" angular-busy="appUtils.cgBusy(itemType + '.edit')">
    <md-toolbar class="md-table-toolbar md-default" >
        <div class="md-toolbar-tools">
            <md-button ng-show="!isModal" class="md-icon-button" ng-click="cancel()" title="{{ 'common.back' | translate }}">
                <md-icon class="material-icons">arrow_back</md-icon>
            </md-button>
            <span>{{ isModal ? title : (itemType + '.name' | translate:{count:selected.length}) }}</span>
            <span class="has-changed-warning" ng-show="hasChanged()">
                <md-icon title="{{ 'common.unsavedChanged' | translate }}" class="material-icons">warning</md-icon>
            </span>
            <span flex></span>
            <md-button class="md-icon-button" ng-show="item.id != null && !isModal" ng-click="askRemoveOne(item)" title="{{ 'common.delete' | translate }}">
                <md-icon class="material-icons">delete</md-icon>
            </md-button>
        </div>
    </md-toolbar>
    <md-content layout-padding>
        <form name="editForm">

            <h4 class="md-title">{{ itemType + '.general' | translate }}</h4>

            <div layout-gt-sm="row">
                <md-input-container class="md-block" flex flex-gt-sm="15" ng-if="item.id != null">
                    <label>{{ itemType + '.type' | translate }}</label>
                    <input value="{{ itemType + '.types.' + item.type | translate }}" readonly>
                </md-input-container>
                <md-input-container class="md-block" flex flex-gt-sm="15" ng-if="item.id == null">
                    <label>{{ itemType + '.type' | translate }}</label>
                    <md-select ng-model="item.type" required>
                        <md-option ng-repeat="type in appUtils.articleTypes" ng-value="type">{{ itemType + '.types.' + type | translate }}</md-option>
                    </md-select>
                </md-input-container>

                <md-input-container class="md-block" flex-gt-sm>
                    <label>{{ itemType + '.title' | translate }}</label>
                    <input required ng-model="item.title" ng-readonly="item.id != null">
                </md-input-container>
            </div>
            <div layout-gt-sm="row">
                <md-input-container class="md-block" flex>
                    <label>{{ itemType + '.pictureUrl' | translate }}</label>
                    <input ng-model="item.pictureUrl" >
                </md-input-container>
            </div>
            <div layout="column" layout-align=" center">
                <img ng-src="{{item.pictureUrl}}" />
            </div>
            <div layout-gt-sm="row">
                <md-input-container class="md-block" flex>
                    <label>{{ itemType + '.pictureCaption' | translate }}</label>
                    <input ng-model="item.pictureCaption" >
                </md-input-container>
            </div>
            <div layout-gt-sm="row">
                <md-input-container class="md-block" flex-gt-sm>
                    <label>{{ itemType + '.text' | translate }}</label>
                    <textarea ng-model="item.text" required></textarea>
                </md-input-container>
            </div>


            <div layout="row" layout-align=" center">
                <h4 class="md-title">{{ itemType + '.fields.name' | translate }}</h4>
                <md-button class="md-icon-button no-margin" ng-click="addField()" title="{{ 'common.new' | translate }}">
                    <md-icon class="material-icons">playlist_add</md-icon>
                </md-button>
            </div>

            <md-table-container ng-show="item.fields.length > 0">
                <table md-table>
                    <thead md-head>
                    <tr md-row>
                        <th md-column>{{ itemType + '.fields.type' | translate }}</th>
                        <th md-column>{{ itemType + '.fields.property' | translate }}</th>
                        <th md-column>{{ itemType + '.fields.value' | translate }}</th>
                        <th class="col-icon-1" md-column>{{ 'common.actions' | translate }}</th>
                    </tr>
                    </thead>
                    <tbody md-body>
                    <tr md-row ng-repeat="field in item.fields track by $index">
                        <td md-cell>
                            <md-input-container class="md-block md-input-small" flex>
                                <md-select ng-model="field.type">
                                    <md-option ng-repeat="type in appUtils.articleFieldTypes" ng-value="type">{{ itemType + '.fields.types.' + type | translate }}</md-option>
                                </md-select>
                            </md-input-container>
                        </td>
                        <td md-cell>
                            <md-input-container class="md-block md-input-small" flex>
                                <md-input-container class="md-block md-input-small" flex>
                                    <md-select ng-model="field.property">
                                        <md-option ng-repeat="prop in appUtils.articleFieldProperties" ng-value="prop">{{ itemType + '.fields.properties.' + prop | translate }}</md-option>
                                    </md-select>
                                </md-input-container>
                            </md-input-container>
                        </td>
                        <td md-cell>
                            <md-input-container class="md-block md-input-small" flex>
                                <input ng-model="field.value" >
                            </md-input-container>
                        </td>
                        <td class="col-icon-1" md-cell>
                            <md-button class="md-icon-button" ng-click="removeListItem('fields', $index)" title="{{ 'common.delete' | translate }}">
                                <md-icon class="material-icons">close</md-icon>
                            </md-button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </md-table-container>


            <div flex>
                <md-progress-linear ng-disabled="!running" md-mode="indeterminate"></md-progress-linear>
            </div>
            <div flex layout-gt-sm="row" layout-align=" center">
                <div layout="column">
                    <span class="md-caption" ng-show="item.createdAt != null">{{ 'common.createdAt' | translate }} {{ item.createdAt | formatDateTime }}</span>
                    <span class="md-caption" ng-show="item.updatedAt != null">{{ 'common.updatedAt' | translate }} {{ item.updatedAt | formatDateTime }}</span>
                </div>
                <span flex></span>
                <div>
                    <md-button ng-show="isModal" class="md-raised" type="button" ng-click="cancel()">{{ 'common.cancel' | translate }}</md-button>
                    <md-button class="md-raised md-primary" type="submit" ng-click="!editForm.$invalid && submit()">{{ 'common.save' | translate }}</md-button>
                </div>
            </div>
            <div ng-repeat="error in busy.errors(itemType + '.edit')" class="isa_error">
                <i class="fa fa-times-circle"></i>
                {{ error.data.message }}
            </div>
        </form>
    </md-content>
</div>