cobuild-angular-stack
Version:
Base stack angular sass jade gulp
614 lines (588 loc) • 42.8 kB
HTML
<div id="kitchen">
<form id="new-product" name="productForm" form-error="" ng-submit="productForm.$valid && create()"
class="container-fluid" novalidate>
<div class="row sidebar-container">
<div class="col-md-2 col-sm-3 col-xs-12" ng-if="!updateForm && !product.id"
ng-include="'partials/uniko-aside.html'"></div>
<div class="new-product-container" ng-class="{'col-md-10 col-sm-9': !updateForm && !product.id}">
<header>
<h2 ng-if="!updateForm && !product.id" class="header-grey text-center">{{'create-gift' |
translate | uppercase}}</h2>
<div ng-if="!updateForm && product.id" class="margin-top"> </div>
<h3 ng-if="!updateForm && !product.id">¡Personaliza tu mesa con lo que quieras! ¡Desde unas
margaritas en la playa o una aportación para su departamento! Agrega una linda foto y
descripción original.</h3>
</header>
<!-- Visible XS -->
<div class="visible-xs new-product-container-xs">
<div class="main-image-xs dropzone flex-center"
ng-style="{backgroundImage:'url('+product.image+')'}"
ngf-drop="uploadImage($file, $invalidFiles)" ngf-drag-over-class="'dragover'"
ngf-select="uploadImage($file, $invalidFiles)" accept="image/*"
ng-if="!updateForm">
<img ng-show="!product.image" class="camera" src="img/camara-big.png">
<h3 ng-if="!product.image && isAdmin">{{ product.imagesList.length ? 'uploading-photo' :
'drag-photo' | translate }}</h3>
<h3 ng-if="!product.image && !isAdmin">{{ 'drag-photo' | translate }}</h3>
</div>
<div class="main-image" ng-style="{backgroundImage:'url('+product.image+')'}"
ng-if="updateForm"></div>
<div class="text-center child uploader">
<button type="file" class="input-uploader btn btn-default"
ngf-select="uploadImage($file, $invalidFiles)" accept="image/*">
+ {{'upload-a-photo' | translate | uppercase}}
</button>
</div>
<div class="product-store product-form">
<div class="form-group label-floating"
ng-class="{'has-error':productForm.name.$invalid && productForm.$submitted}">
<label class="control-label">
{{'product-name' | translate}}
</label>
<input class="form-control" name="name" placeholder="Ej. Cafetera" required type="text"
ng-model="product.name">
<div ng-show="productForm.name.$invalid && productForm.$submitted">
<span class="help-block" ng-show="productForm.name.$error.required">{{'gift-name-required' | translate}}</span>
</div>
</div>
<div class="form-group label-floating"
ng-class="{'has-error':productForm.price.$invalid && productForm.$submitted}">
<label class="control-label">
{{'price' | translate}} <span style="font-size: 11px">(Peso Mexicano)</span>
</label>
<input class="form-control" name="price" placeholder="Ej. 150000" required
ng-pattern="validNumber" type="text" ng-model="product.price">
<div ng-show="productForm.price.$invalid && productForm.$submitted">
<span class="help-block" ng-show="productForm.price.$error.required">{{'gift-price-required' | translate}}</span>
<span class="help-block" ng-show="productForm.price.$error.pattern">{{'field-only-number' | translate}}</span>
</div>
</div>
<div class="form-group label-floating"
ng-class="{'has-error':productForm.description.$invalid && productForm.$submitted}">
<label class="control-label">
{{'description' | translate}}
</label>
<textarea class="form-control" name="description" type="text" ng-model="product.description"
required></textarea>
<div ng-show="productForm.description.$invalid && productForm.$submitted">
<span class="help-block" ng-show="productForm.description.$error.required">{{'gift-description-required' | translate}}</span>
</div>
</div>
</div>
<div class="carousel-container" ng-if="isAdmin">
<div class="carousel">
<a type='button' class='btn-prev'>
<img src="img/prev.png" alt="">
</a>
<a type='button' class='btn-next'>
<img src="img/next.png" alt="">
</a>
<slick ng-if="product && product.$resolved && !newPhoto" infinite="true" slides-to-show="4"
slides-to-scroll="2" prev-arrow=".btn-prev" next-arrow=".btn-next"
settings="slickConfig">
<div class="carousel-item">
<div class="child uploader">
<img src="/img/add-photo.png" class="responsive-image">
<button type="file" class="input-uploader"
ngf-select="uploadImage($file, $invalidFiles)"
accept="image/*"></button>
</div>
</div>
<div class="carousel-item" ng-repeat="image in product.imagesList">
<div class="child uploader" ng-if="!image">
<i class="fa fa-refresh spin" aria-hidden="true"></i>
</div>
<img ng-click="setImageAsDefault(image)" ng-if="image" ng-src="{{image}}"
class="child"/>
</div>
</slick>
</div>
</div>
<div class="form-group label-floating">
<label class="control-label adjust-padding-content"> {{ 'store' | translate }} </label>
<div class="product-store select-catalogo categories custom-dropdown">
<!--
<ui-select ng-model="product.storeId">
<ui-select-match placeholder="{{'store' | translate}}">{{$select.selected.name}}
</ui-select-match>
<ui-select-choices
repeat="s.id as s in stores | filter: $select.search track by s.name">
<div ng-bind-html="s.name | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
1
-->
<div class="btn-group" uib-dropdown >
<button type="button" uib-dropdown-toggle class="btn btn-default btn-raised">
{{ productStore.name || ('store' | translate) }}
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="li-hover" ng-class="{ 'active' : (productStore.id == s.id) }" ng-repeat="s in stores" ng-bind="s.name" ng-click="product.storeId = s.id"></li>
</ul>
</div>
</div>
</div>
<div class="form-group label-floating">
<label class="control-label adjust-padding-content"> {{'categories' | translate}} </label>
<div class="product-store select-catalogo categories">
<div class="btn-group" uib-dropdown is-open="categoriesOpen"
auto-close="outsideClick">
<button type="button" class="btn btn-default btn-raised"
uib-dropdown-toggle>
<span ng-show="!product.categoriesIds || product.categoriesIds.length == 0">
{{'categories' | translate}}</span>
<span ng-show="product.categoriesIds.length > 0">{{product.categoriesIds.length}} categoria (s)</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu"
aria-labelledby="categories-button"
style="padding-left: 15px;">
<li class="checkbox" ng-repeat="category in categories">
<input id="{{category.id}}" type="checkbox"
checklist-model="product.categoriesIds"
checklist-value="category.id">
<label for="{{category.id}}"
ng-class="{'cat-active': product.categoriesIds.indexOf(category.id) > -1}">
{{category.name}}
</label>
</li>
</ul>
</div>
</div>
</div>
<div class="form-group label-floating">
<label class="control-label adjust-padding-content"> {{ 'quantity' | translate }} </label>
<div class="product-store select-catalogo categories custom-dropdown">
<!--
<div class="product-store select-catalogo">
<ui-select ng-model="product.qty">
<ui-select-match placeholder="{{'quantity' | translate}}">
{{$select.selected.value}}
</ui-select-match>
<ui-select-choices
repeat="q.value as q in quantities | filter: $select.search track by q.value">
<div ng-bind-html="q.value | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
</div>
-->
<div class="btn-group" uib-dropdown >
<button type="button" uib-dropdown-toggle class="btn btn-default btn-raised">
{{ product.qty || ('quantity' | translate) }}
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="li-hover" ng-class="{ 'active' : (product.qty == q.value) }" ng-repeat="q in quantities" ng-bind="q.value" ng-click="product.qty = q.value"></li>
</ul>
</div>
</div>
<!--
<div class="product-store select-catalogo">
<ui-select ng-model="product.qty">
<ui-select-match placeholder="{{'quantity' | translate}}">
{{$select.selected.value}}
</ui-select-match>
<ui-select-choices
repeat="q.value as q in quantities | filter: $select.search track by q.value">
<div ng-bind-html="q.value | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
</div>
-->
</div>
<div class="text-center margin-bottom actions">
<!-- <a ui-sref="products" ui-sref="products" class="btn btn-dark">{{'discard' | translate}}</a> -->
<button type="button" ui-sref="registry" class="btn btn-lp btn-dark">{{'back' | translate}}
</button>
<button type="submit" ng-show="!updateForm" class="btn btn-inverse btn-lp">{{'add-to-table' |
translate}}
</button>
<button type="submit" ng-show="updateForm" class="btn btn-inverse btn-lp">{{'update' |
translate}}
</button>
</div>
</div>
<!-- Hidden XS -->
<div class="hidden-xs margin-top-2">
<div class="col-md-6">
<div class="main-image dropzone flex-center"
ng-style="{backgroundImage:'url('+product.image+')'}"
ngf-drop="uploadImage($file, $invalidFiles)" ngf-drag-over-class="'dragover'"
ngf-select="uploadImage($file, $invalidFiles)" accept="image/*" ng-if="!updateForm">
<img ng-show="!product.image" class="camera" src="img/camara-big.png">
<h3 ng-if="!product.image && isAdmin">{{ product.imagesList.length ? 'uploading-photo' :
'drag-photo' | translate }}</h3>
<h3 ng-if="!product.image && !isAdmin">{{ 'drag-photo' | translate }}</h3>
</div>
<div class="main-image" ng-style="{backgroundImage:'url('+product.image+')'}"
ng-if="updateForm"></div>
<div class="text-center child uploader">
<button type="file" class="input-uploader btn btn-default"
ngf-select="uploadImage($file, $invalidFiles)" accept="image/*"
>
+ {{'upload-a-photo' | translate | uppercase}}
</button>
</div>
<div class="carousel-container margin-top-2" ng-if="product.imagesList.length">
<div class="carousel">
<div class="btn-prev">
<img src="img/prev.png" alt="">
</div>
<a type='button' class='btn-next'>
<img src="img/next.png" alt="">
</a>
<slick ng-if="product && product.$resolved && !newPhoto" infinite="true"
slides-to-show="4" slides-to-scroll="2" prev-arrow=".btn-prev"
next-arrow=".btn-next" settings="slickConfig">
<div class="carousel-item" ng-if="isAdmin">
<div class="child uploader">
<img src="/img/add-photo.png" class="responsive-image">
<button type="file" class="input-uploader"
ngf-select="uploadImage($file, $invalidFiles)" accept="image/*"
></button>
</div>
</div>
<div class="carousel-item" ng-repeat="image in product.imagesList">
<div class="child uploader" ng-if="!image">
<i class="fa fa-refresh spin" aria-hidden="true"></i>
</div>
<img ng-click="setImageAsDefault(image)" ng-if="image" ng-src="{{image}}"
class="child"/>
</div>
</slick>
</div>
</div>
<p class="text-center margin-top-2" ng-if="product.imagesList.length">{{'upload-or-pick-photo' |
translate}}</p>
</div>
<!-- End Carousel -->
<div class="col-md-6 create-form" ng-if="!updateForm">
<div class="form-group label-floating"
ng-class="{'has-error':productForm.name.$invalid && productForm.$submitted}">
<label class="control-label">
{{'product-name' | translate}}
</label>
<input class="form-control" name="name" placeholder="Ej. Cafetera" required type="text"
ng-model="product.name">
<div ng-show="productForm.name.$invalid && productForm.$submitted">
<span class="help-block" ng-show="productForm.name.$error.required">{{'gift-name-required' | translate}}</span>
</div>
</div>
<div class="form-group label-floating"
ng-class="{'has-error':productForm.price.$invalid && productForm.$submitted}">
<label class="control-label">
{{'price' | translate}} <span style="font-size: 11px">(Peso Mexicano)</span>
</label>
<input class="form-control" name="price" placeholder="Ej. 150000" required
ng-pattern="validNumber" type="text" ng-model="product.price">
<div ng-show="productForm.price.$invalid && productForm.$submitted">
<span class="help-block" ng-show="productForm.price.$error.required">{{'gift-price-required' | translate}}</span>
<span class="help-block" ng-show="productForm.price.$error.pattern">{{'field-only-number' | translate}}</span>
</div>
</div>
<div class="form-group label-floating"
ng-class="{'has-error':productForm.description.$invalid && productForm.$submitted}">
<label class="control-label">
{{'description' | translate}}
</label>
<textarea class="form-control" name="description" type="text" ng-model="product.description"
required></textarea>
<div ng-show="productForm.description.$invalid && productForm.$submitted">
<span class="help-block" ng-show="productForm.description.$error.required">{{'gift-description-required' | translate}}</span>
</div>
</div>
<div class="row">
<div class="form-group label-floating col-sm-6">
<label class="control-label adjust-padding-content"> {{ 'store' | translate }} </label>
<!--
<div class="product-store select-catalogo">
<select class="form-control" ng-options="s.id as s.name for s in stores"
ng-model="product.storeId">
<option value="" selected="selected" disabled>{{'store' | translate}}</option>
</select>
</div>
-->
<div class="product-store select-catalogo categories custom-dropdown">
<!--
<ui-select ng-model="product.storeId">
<ui-select-match placeholder="{{'store' | translate}}">{{$select.selected.name}}
</ui-select-match>
<ui-select-choices
repeat="s.id as s in stores | filter: $select.search track by s.name">
<div ng-bind-html="s.name | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
2
-->
<div class="btn-group" uib-dropdown >
<button type="button" uib-dropdown-toggle class="btn btn-default btn-raised">
{{ productStore.name || ('store' | translate) }}
</button>
<ul class="dropdown-menu">
<li class="li-hover" ng-class="{ 'active' : (productStore.id == s.id) }" ng-repeat="s in stores" ng-bind="s.name" ng-click="product.storeId = s.id"></li>
</ul>
</div>
</div>
</div>
<div class="form-group label-floating col-sm-6">
<label class="control-label adjust-padding-content"> {{ 'categories' | translate }} </label>
<div class="product-store select-catalogo categories">
<div class="btn-group" uib-dropdown is-open="categoriesOpen"
auto-close="outsideClick">
<button type="button" class="btn btn-default btn-raised"
uib-dropdown-toggle>
<span ng-show="!product.categoriesIds || product.categoriesIds.length == 0">
{{'categories' | translate}}</span>
<span ng-show="product.categoriesIds.length > 0">{{product.categoriesIds.length}} categoria (s)</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu"
aria-labelledby="categories-button"
style="padding-left: 15px;">
<li class="checkbox" ng-repeat="category in categories">
<input id="{{category.id}}" type="checkbox"
checklist-model="product.categoriesIds"
checklist-value="category.id">
<label for="{{category.id}}"
ng-class="{'cat-active': product.categoriesIds.indexOf(category.id) > -1}">
{{category.name}}
</label>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group label-floating col-sm-6">
<label class="control-label adjust-padding-content"> {{ 'quantity' | translate }} </label>
<div class="product-store select-catalogo categories custom-dropdown">
<!--
<div class="product-store select-catalogo">
<ui-select ng-model="product.qty">
<ui-select-match placeholder="{{'quantity' | translate}}">
{{$select.selected.value}}
</ui-select-match>
<ui-select-choices
repeat="q.value as q in quantities | filter: $select.search track by q.value">
<div ng-bind-html="q.value | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
</div>
-->
<div class="btn-group" uib-dropdown >
<button type="button" uib-dropdown-toggle class="btn btn-default btn-raised">
{{ product.qty || ('quantity' | translate) }}
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="li-hover" ng-class="{ 'active' : (product.qty == q.value) }" ng-repeat="q in quantities" ng-bind="q.value" ng-click="product.qty = q.value"></li>
</ul>
</div>
</div>
<!--
<div class="product-store select-catalogo">
<select class="form-control " ng-options="q.value as q.label for q in quantities"
ng-model="product.qty">
<option value="" selected="selected" disabled>{{'quantity' | translate}}
</option>
</select>
</div>
-->
</div>
</div>
<div class="actions text-center">
<!-- <a ui-sref="products" ui-sref="products" class="btn btn-dark">{{'discard' | translate}}</a> -->
<button type="button" ui-sref="registry" class="btn btn-lp btn-dark">{{'back' |
translate}}
</button>
<button type="submit" ng-show="!updateForm" class="btn btn-inverse btn-lp">{{'add-to-table'
|
translate}}
</button>
<button type="submit" ng-show="updateForm" class="btn btn-inverse btn-lp">{{'update' |
translate}}
</button>
</div>
</div>
<div class="col-md-5 update-form" ng-if="updateForm">
<div class="form-group label-floating margin-top-3" ng-show="nameEditable"
ng-class="{'has-error':productForm.name.$invalid && productForm.$submitted}">
<label class="control-label">
{{'product-name' | translate}}
</label>
<input class="form-control" name="name" placeholder="Ej. Cafetera"
ng-blur="nameEditable = false" required type="text" ng-model="product.name">
<div ng-show="productForm.name.$invalid && productForm.$submitted">
<span class="help-block" ng-show="productForm.name.$error.required">{{'gift-name-required' | translate}}</span>
</div>
</div>
<div id="item-name" ng-show="!nameEditable" ng-click="nameEditable = true">
<div class="item-name flex-center">
<span>{{product.name || 'Nombre del Regalo'}}</span>
<div class="icon-message"><img src="img/lapizpink.png" alt=""></div>
</div>
<div ng-show="productForm.name.$invalid && productForm.$submitted">
<span class="help-block color-red" ng-show="productForm.name.$error.required">{{'gift-name-required' | translate}}</span>
</div>
</div>
<div class="form-group label-floating margin-top-3" ng-show="priceEditable"
ng-class="{'has-error':productForm.price.$invalid && productForm.$submitted}">
<label class="control-label">
{{'price' | translate}} <span style="font-size: 11px">(Peso Mexicano)</span>
</label>
<input class="form-control" ng-blur="priceEditable=false" name="price"
placeholder="Ej. 150000" required ng-pattern="validNumber" type="text"
ng-model="product.price">
<div ng-show="productForm.price.$invalid && productForm.$submitted">
<span class="help-block" ng-show="productForm.price.$error.required">{{'gift-price-required' | translate}}</span>
<span class="help-block" ng-show="productForm.price.$error.pattern">{{'field-only-number' | translate}}</span>
</div>
</div>
<div id="item-price" ng-show="!priceEditable" ng-click="priceEditable=true">
<div class="item-price flex-center">
<span>{{(product.price | currency ) || 'Precio del Regalo'}}</span>
<div class="icon-message"><img src="img/lapizpink.png" alt=""></div>
</div>
<div ng-show="productForm.price.$invalid && productForm.$submitted">
<span class="help-block color-red" ng-show="productForm.price.$error.required">{{'gift-price-required' | translate}}</span>
<span class="help-block color-red" ng-show="productForm.price.$error.pattern">{{'field-only-number' | translate}}</span>
</div>
</div>
<div class="form-group label-floating margin-top-3 margin-bottom-3" ng-show="descEditable"
ng-class="{'has-error':productForm.description.$invalid && productForm.$submitted}">
<label class="control-label">
{{'description' | translate}}
</label>
<textarea class="form-control" name="description" type="text" ng-blur="descEditable=false"
ng-model="product.description" required></textarea>
<div ng-show="productForm.description.$invalid && productForm.$submitted">
<span class="help-block" ng-show="productForm.description.$error.required">{{'gift-description-required' | translate}}</span>
</div>
</div>
<div id="item-description" ng-show="!descEditable" ng-click="descEditable=true">
<div class="item-description flex-center">
<span>{{product.description || 'Descripción del Regalo'}}</span>
<div class="icon-message"><img src="img/lapizpink.png" alt=""></div>
</div>
<div ng-show="productForm.price.$invalid && productForm.$submitted">
<span class="help-block color-red" ng-show="productForm.price.$error.required">{{'gift-description-required' | translate}}</span>
<span class="help-block color-red" ng-show="productForm.price.$error.pattern">{{'field-only-number' | translate}}</span>
</div>
</div>
<div class="row">
<div class="form-group label-floating col-sm-6">
<label class="control-label adjust-padding-content"> {{ 'store' | translate }} </label>
<!--
<div class="product-store select-catalogo">
<ui-select ng-model="product.storeId">
<ui-select-match placeholder="{{'store' | translate}}">
{{$select.selected.name}}
</ui-select-match>
<ui-select-choices
repeat="s.id as s in stores | filter: $select.search track by s.name">
<div ng-bind-html="s.name | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
</div>
-->
<div class="product-store select-catalogo categories custom-dropdown">
<!--
<ui-select ng-model="product.storeId">
<ui-select-match placeholder="{{'store' | translate}}">{{$select.selected.name}}
</ui-select-match>
<ui-select-choices
repeat="s.id as s in stores | filter: $select.search track by s.name">
<div ng-bind-html="s.name | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
3
-->
<div class="btn-group" uib-dropdown >
<button type="button" uib-dropdown-toggle class="btn btn-default btn-raised">
{{ productStore.name || ('store' | translate) }}
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="li-hover" ng-class="{ 'active' : (productStore.id == s.id) }" ng-repeat="s in stores" ng-bind="s.name" ng-click="product.storeId = s.id"></li>
</ul>
</div>
</div>
</div>
<div class="form-group label-floating col-sm-6">
<label class="control-label adjust-padding-content"> {{ 'categories' | translate }} </label>
<div class="product-store select-catalogo categories">
<div class="btn-group" uib-dropdown is-open="categoriesOpen"
auto-close="outsideClick">
<button type="button" class="btn btn-default btn-raised"
uib-dropdown-toggle>
<span ng-show="!product.categoriesIds || product.categoriesIds.length == 0">
{{'categories' | translate}}</span>
<span ng-show="product.categoriesIds.length > 0">{{product.categoriesIds.length}} categoria (s)</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu"
aria-labelledby="categories-button"
style="padding-left: 15px;">
<li class="checkbox" ng-repeat="category in categories">
<input id="{{category.id}}" type="checkbox"
checklist-model="product.categoriesIds"
checklist-value="category.id">
<label for="{{category.id}}"
ng-class="{'cat-active': product.categoriesIds.indexOf(category.id) > -1}">
{{category.name}}
</label>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="form-group label-floating col-sm-6">
<label class="control-label adjust-padding-content"> {{ 'quantity' | translate }} </label>
<div class="product-store select-catalogo categories custom-dropdown">
<!--
<div class="product-store select-catalogo">
<ui-select ng-model="product.qty">
<ui-select-match placeholder="{{'quantity' | translate}}">
{{$select.selected.value}}
</ui-select-match>
<ui-select-choices
repeat="q.value as q in quantities | filter: $select.search track by q.value">
<div ng-bind-html="q.value | highlight: $select.search"></div>
</ui-select-choices>
</ui-select>
</div>
-->
<div class="btn-group" uib-dropdown >
<button type="button" uib-dropdown-toggle class="btn btn-default btn-raised">
{{ product.qty || ('quantity' | translate) }}
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="li-hover" ng-class="{ 'active' : (product.qty == q.value) }" ng-repeat="q in quantities" ng-bind="q.value" ng-click="product.qty = q.value"></li>
</ul>
</div>
</div>
</div>
</div>
<div class="actions text-center">
<button type="button" ui-sref="registry" class="btn btn-lp btn-dark">{{'back' |
translate}}
</button>
<button type="submit" ng-show="!updateForm" class="btn btn-inverse btn-lp">{{'add-to-table'
|
translate}}
</button>
<button type="submit" ng-show="updateForm" class="btn btn-inverse btn-lp">{{'update' |
translate}}
</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>