Skip to content

Commit

Permalink
edited product form panel based on task
Browse files Browse the repository at this point in the history
  • Loading branch information
TemuulenBM committed Nov 22, 2023
1 parent 89e093b commit 33cb9f2
Show file tree
Hide file tree
Showing 8 changed files with 150 additions and 127 deletions.
Empty file.
20 changes: 20 additions & 0 deletions addon/components/cell/product-info.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<div class="relative flex items-center">
<img src={{this.mediaUrl}} alt={{this.altText}} class="w-16 h-16 rounded-full mb-2" />
<span class="relative block">
<a href="javascript:;" class="text-blue-500" {{on "click" this.onClick}}>
{{#if (has-block)}}
{{yield}}
{{else}}
<span class="font-bold text-lg">
{{@product.name}}
</span>
<p class="text-gray-700 text-sm">
{{@product.description}}
</p>
{{/if}}
</a>
</span>
{{#if @showOnlineIndicator}}
<FaIcon @icon="circle" class="absolute left-0 top-0 {{if @product.online "text-green-500" "text-yellow-200"}}" />
{{/if}}
</div>
3 changes: 3 additions & 0 deletions addon/components/cell/product-info.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import Component from '@glimmer/component';

export default class CellProductInfoComponent extends Component {}
157 changes: 94 additions & 63 deletions addon/components/product-form-panel.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -6,73 +6,23 @@
@isResizeble={{or this.isResizable @isResizable}}
@width={{or this.width @width "600px"}}
>
<Overlay::Header @hideLeftSection={{true}} @actionsWrapperClass="flex-1 flex-col py-3" class="h-auto-i min-h-[127px]">
<div class="flex flex-row items-center justify-between w-full mb-4">
<div class="flex flex-1 space-x-2">
{{#if this.product.id}}
<Button @type="default" @icon="box" @helpText="View product details" @onClick={{this.onViewDetails}} />
{{/if}}
</div>
<div class="flex flex-1 justify-end">
<div class="mr-2">
<Button @icon={{if this.product.id "save" "check"}} @type="primary" @text={{if this.product.id "Save Product" "Create Product"}} @onClick={{this.save}} />
</div>
<Button @type="default" @icon="times" @helpText={{if this.product.id "Cancel edit product" "Cancel new product"}} @onClick={{this.onPressCancel}} />
</div>
</div>
<div class="flex flex-row justify-between w-full">
<div class="flex flex-col flex-1 w-3/4">
<div class="flex flex-row">
<div class="w-14">
<div class="w-12 h-12 flex items-center justify-start relative hover:bg-gray-100 transition-all rounded-lg overflow-hidden">
<img src={{this.product.photo_url}} alt={{this.product.name}} height="48" width="48" class="h-12 w-12 rounded-lg shadow-sm" />
<Attach::Tooltip @class="clean" @animation="scale" @placement="top">
<InputInfo @text={{this.product.public_id}} />
</Attach::Tooltip>
<div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity bg-gray-600 bg-opacity-50 rounded-lg">
<UploadButton
@name="photos"
@accept="image/*"
@onFileAdded={{this.onUploadNewPhoto}}
@icon="upload"
@hideButtonText={{true}}
@labelClass="upload-avatar-label-overlay"
class="w-12 btn-reset"
/>
</div>
</div>
</div>
<div class="flex flex-col">
<h1 class="text-gray-900 dark:text-white text-2xl">
{{#if this.product.id}}
{{this.product.name}}
{{else}}
{{#if this.product.name}}
{{this.product.name}}
{{else}}
<span>New Product</span>
{{/if}}
{{/if}}
</h1>
<div class="-mt-1">
<div class="flex flex-row items-center">
<span class="text-sm dark:text-blue-400 text-blue-600">{{n-a this.product.title (smart-humanize this.product.type)}}</span>
</div>
</div>
</div>
</div>
</div>
<div class="flex justify-end w-1/4">
<Badge @status={{this.product.status}} @type="info" @hideStatusDot={{true}} />
</div>
<Overlay::Header
@title={{if this.product.public_id this.product.name "Add Inventory"}}
@status={{this.product.public_id}}
@hideStatusDot={{true}}
@createdAt={{this.product.createdAt}}
@titleWrapperClass="leading-5"
>
<div class="flex flex-1 justify-end">
<Button @icon={{if this.product.id "save" "check"}} @type="primary" @text={{if this.product.id "Save Inventory" "Add Inventory"}} @onClick={{this.save}} @wrapperClass="mr-2" />
{{#if this.product.id}}
<Button @type="default" @icon="product" @helpText="View product details" @onClick={{this.onViewDetails}} @wrapperClass="mr-2" />
{{/if}}
<Button @type="default" @icon="times" @helpText={{if this.product.id "Cancel edit product" "Cancel add product"}} @onClick={{this.onPressCancel}} />
</div>
</Overlay::Header>

<Overlay::Body @wrapperClass="new-service-rate-overlay-body px-4 pt-4" @increaseInnerBodyHeightBy={{700}}>
<div class="w-32 mb-6 mr-6 flex flex-col items-center">
<Image src={{this.product.photo_url}} alt={{this.product.name}} height="128" width="128" class="h-32 w-32 rounded-md" />
<UploadButton @name="photos" @accept="image/*" @onFileAdded={{this.uploadNewPhoto}} class="w-32" />
</div>
<div class="flex-1 space-y-4">
<ContentPanel @title="Details" @open={{true}} @pad={{true}} @panelBodyClass="bg-white dark:bg-gray-800">
<div class="grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-2">
Expand Down Expand Up @@ -169,6 +119,87 @@
</InputGroup>
</div>
</ContentPanel>
<ContentPanel @title="Images & Videos" @open={{this.product.files.length}} @pad={{false}} @panelBodyWrapperClass="px-0 py-4" @panelBodyClass="bg-white dark:bg-gray-800">
<div class="px-6 space-y-4">
{{#if this.isUploading}}
<div
class="min-h-56 dropzone w-full rounded-lg px-4 py-8 min-h bg-gray-50 dark:bg-gray-900 bg-opacity-25 text-gray-900 dark:text-white text-center flex flex-col items-center justify-center border-2 border-dashed border-gray-200 dark:border-indigo-500"
>
<div class="flex items-center justify-center py-5">
<Spinner class="text-sm dar:text-gray-100" @loadingMessage="Uploading..." />
</div>
</div>
{{else}}
{{#let (file-queue name="files" onFileAdded=this.queueFile accept=(join "," this.acceptedFileTypes)) as |queue|}}
<FileDropzone @queue={{queue}} class="dropzone file-dropzone" as |dropzone|>
{{#if dropzone.active}}
{{#if dropzone.valid}}
Drop to upload
{{else}}
Invalid
{{/if}}
{{else if queue.files.length}}
<div class="my-2">
<FaIcon @icon="photo-video" class="text-indigo-500 mr-2" />
{{pluralize queue.files.length "file"}}
ready for upload.
</div>
<div class="my-2">({{queue.progress}}%)</div>
{{else}}
<h4 class="font-semibold mb-8">
<FaIcon @icon="photo-video" @size="2x" class="text-indigo-500 mr-2" />
Upload Images & Videos
</h4>
<div>
{{#if dropzone.supported}}
<p class="text-base font-semibold my-5">Drag and drop image and video files onto this dropzone</p>
{{/if}}
<FileUpload @name="files" @for="files" @accept={{join "," this.acceptedFileTypes}} @multiple={{true}} @onFileAdded={{this.queueFile}}>
<a tabindex={{0}} class="btn btn-magic cursor-pointer ml-1">or select files to upload.</a>
</FileUpload>
</div>
{{/if}}
</FileDropzone>
{{/let}}
{{#if this.uploadQueue}}
<div class="mx-4">
<div class="flex items-center justify-between mb-4">
<span class="leading-6 dark:text-gray-100">Upload Queue</span>
</div>
<div class="space-y-2 mb-4">
{{#each this.uploadQueue as |file|}}
<div class="flex items-center justify-between bg-green-100 border border-green-800 dark:border-green-800 py-1.5 shadow-sm rounded-lg px-4">
<div class="text-sm text-green-900">{{file.name}}</div>
<div class="flex items-center text-sm">
<Spinner class="text-green-900 mr-2" />
<span class="font-bold text-green-900">{{round file.progress}}%</span>
</div>
</div>
{{/each}}
</div>
</div>
{{/if}}
<div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-2 md:gap-4">
{{#each this.product.files as |file|}}
<FileRecord @file={{file}} @fileIconClass={{if (eq this.product.primary_image_uuid file.id) "border-blue-400"}} @onDelete={{this.removeFile}}>
<div class="flex items-center justify-evenly">
<Button
@icon="magic"
@text="Make Primary"
@size="xs"
@textClass="text-xs truncate"
@onClick={{fn this.makePrimaryFile file}}
@disabled={{eq this.product.primary_image_uuid file.id}}
/>
</div>
</FileRecord>
{{/each}}
</div>
</div>
{{/if}}
</div>
</ContentPanel>
</div>
</Overlay::Body>
</Overlay>
1 change: 1 addition & 0 deletions addon/controllers/batch/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,7 @@ export default class BatchIndexController extends Controller {
{
label: 'Product',
valuePath: 'product.name',
action: this.viewBatch,
width: '200px',
cellComponent: 'table/cell/anchor',
resizable: true,
Expand Down
69 changes: 5 additions & 64 deletions addon/controllers/products/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -192,7 +192,7 @@ export default class ProductsIndexController extends Controller {
*/
@tracked columns = [
{
label: 'Name',
label: 'Product',
valuePath: 'name',
width: '170px',
cellComponent: 'table/cell/media-name',
Expand Down Expand Up @@ -233,7 +233,7 @@ export default class ProductsIndexController extends Controller {
filterComponent: 'filter/string',
},
{
label: 'Price',
label: 'Value',
valuePath: 'price',
cellComponent: 'click-to-copy',
width: '120px',
Expand All @@ -243,77 +243,18 @@ export default class ProductsIndexController extends Controller {
filterComponent: 'filter/string',
},
{
label: 'Sale Price',
valuePath: 'sale_price',
cellComponent: 'click-to-copy',
width: '120px',
resizable: true,
sortable: true,
filterable: true,
filterComponent: 'filter/string',
},
{
label: 'Declared Value',
valuePath: 'declared_value',
cellComponent: 'click-to-copy',
width: '120px',
resizable: true,
sortable: true,
filterable: true,
filterComponent: 'filter/string',
},
{
label: 'Length',
valuePath: 'length',
cellComponent: 'click-to-copy',
width: '120px',
resizable: true,
sortable: true,
filterable: true,
filterComponent: 'filter/string',
},
{
label: 'Width',
valuePath: 'width',
cellComponent: 'click-to-copy',
width: '120px',
resizable: true,
sortable: true,
filterable: true,
filterComponent: 'filter/string',
},
{
label: 'Height',
valuePath: 'height',
cellComponent: 'click-to-copy',
width: '120px',
resizable: true,
sortable: true,
filterable: true,
filterComponent: 'filter/string',
},
{
label: 'Weight',
valuePath: 'weight',
cellComponent: 'click-to-copy',
width: '120px',
resizable: true,
sortable: true,
filterable: true,
filterComponent: 'filter/string',
},
{
label: 'Created At',
label: ' Date Added',
valuePath: 'createdAt',
sortParam: 'created_at',
width: '10%',
resizable: true,
sortable: true,
hidden: true,
filterable: true,
filterComponent: 'filter/date',
},
{
label: 'Updated At',
label: 'Last Updated',
valuePath: 'updatedAt',
sortParam: 'updated_at',
width: '10%',
Expand Down
1 change: 1 addition & 0 deletions app/components/cell/product-info.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from '@fleetbase/pallet-engine/components/cell/product-info';
26 changes: 26 additions & 0 deletions tests/integration/components/cell/product-info-test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'dummy/tests/helpers';
import { render } from '@ember/test-helpers';
import { hbs } from 'ember-cli-htmlbars';

module('Integration | Component | cell/product-info', function (hooks) {
setupRenderingTest(hooks);

test('it renders', async function (assert) {
// Set any properties with this.set('myProperty', 'value');
// Handle any actions with this.set('myAction', function(val) { ... });

await render(hbs`<Cell::ProductInfo />`);

assert.dom(this.element).hasText('');

// Template block usage:
await render(hbs`
<Cell::ProductInfo>
template block text
</Cell::ProductInfo>
`);

assert.dom(this.element).hasText('template block text');
});
});

0 comments on commit 33cb9f2

Please sign in to comment.