Merge pull request #4030 from mirumee/add-user-avatar-managment

Add user avatar management
saleor · May 6, 2019 · 0c22560 · 0c22560
2 parents 9331b04 + 6477603
commit 0c22560
Show file tree

Hide file tree

Showing 26 changed files with 515 additions and 150 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -38,6 +38,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Remove unused decorator - #4036 by @maarcingebala
 - Overall improvement of the GraphQL performances, especially on single nodes - #3968 @NyanKiyoshi
 - Remove unnecessary dedents from GraphQL schema so new Playground can work - #4045 by @salwator
+- Add user avatar management - #4030 by @benekex2
 
 
 ## 2.5.0

diff --git a/package.json b/package.json
@@ -199,6 +199,7 @@
     "generate-component": "plop --plopfile .plop/plopfile.js",
     "heroku-postbuild": "npm run build-assets && npm run build-emails",
     "lint": "tslint 'saleor/static/dashboard-next/**/*.{ts,tsx}'",
+    "lint-fix": "tslint 'saleor/static/dashboard-next/**/*.{ts,tsx}' --fix",
     "start": "webpack -d --watch",
     "build-emails": "mjml --config.beautify false -l skip \"templates/templated_email/source/*.mjml\" -o templates/templated_email/compiled",
     "storybook": "start-storybook -p 3000 -c saleor/static/dashboard-next/storybook/",

diff --git a/saleor/static/dashboard-next/categories/fixtures.ts b/saleor/static/dashboard-next/categories/fixtures.ts
@@ -92,7 +92,7 @@ export const category: (
         node: {
           __typename: "Product",
           availability: {
-            __typename: "ProductAvailability",
+            __typename: "ProductPricingInfo",
             available: true
           },
           id: "UHJvZHVjdDoyMQ==",
@@ -116,7 +116,7 @@ export const category: (
         node: {
           __typename: "Product",
           availability: {
-            __typename: "ProductAvailability",
+            __typename: "ProductPricingInfo",
             available: true
           },
           id: "UHJvZHVjdDoyMg==",
@@ -140,7 +140,7 @@ export const category: (
         node: {
           __typename: "Product",
           availability: {
-            __typename: "ProductAvailability",
+            __typename: "ProductPricingInfo",
             available: true
           },
           id: "UHJvZHVjdDoyMw==",
@@ -164,7 +164,7 @@ export const category: (
         node: {
           __typename: "Product",
           availability: {
-            __typename: "ProductAvailability",
+            __typename: "ProductPricingInfo",
             available: true
           },
           id: "UHJvZHVjdDoyNA==",
@@ -188,7 +188,7 @@ export const category: (
         node: {
           __typename: "Product",
           availability: {
-            __typename: "ProductAvailability",
+            __typename: "ProductPricingInfo",
             available: true
           },
           id: "UHJvZHVjdDoyNQ==",
@@ -212,7 +212,7 @@ export const category: (
         node: {
           __typename: "Product",
           availability: {
-            __typename: "ProductAvailability",
+            __typename: "ProductPricingInfo",
             available: true
           },
           id: "UHJvZHVjdDoyNg==",
@@ -236,7 +236,7 @@ export const category: (
         node: {
           __typename: "Product",
           availability: {
-            __typename: "ProductAvailability",
+            __typename: "ProductPricingInfo",
             available: true
           },
           id: "UHJvZHVjdDoyNw==",
@@ -260,7 +260,7 @@ export const category: (
         node: {
           __typename: "Product",
           availability: {
-            __typename: "ProductAvailability",
+            __typename: "ProductPricingInfo",
             available: true
           },
           id: "UHJvZHVjdDoyOA==",
@@ -284,7 +284,7 @@ export const category: (
         node: {
           __typename: "Product",
           availability: {
-            __typename: "ProductAvailability",
+            __typename: "ProductPricingInfo",
             available: true
           },
           id: "UHJvZHVjdDoyOQ==",
@@ -308,7 +308,7 @@ export const category: (
         node: {
           __typename: "Product",
           availability: {
-            __typename: "ProductAvailability",
+            __typename: "ProductPricingInfo",
             available: true
           },
           id: "UHJvZHVjdDozMA==",

diff --git a/saleor/static/dashboard-next/categories/types/CategoryDetails.ts b/saleor/static/dashboard-next/categories/types/CategoryDetails.ts
@@ -54,7 +54,7 @@ export interface CategoryDetails_category_products_pageInfo {
 }
 
 export interface CategoryDetails_category_products_edges_node_availability {
-  __typename: "ProductAvailability";
+  __typename: "ProductPricingInfo";
   available: boolean | null;
 }
 

diff --git a/saleor/static/dashboard-next/products/fixtures.ts b/saleor/static/dashboard-next/products/fixtures.ts
@@ -91,7 +91,7 @@ export const product: (
     }
   ],
   availability: {
-    __typename: "ProductAvailability",
+    __typename: "ProductPricingInfo",
     available: false,
     priceRange: {
       __typename: "TaxedMoneyRange",

diff --git a/saleor/static/dashboard-next/products/types/Product.ts b/saleor/static/dashboard-next/products/types/Product.ts
@@ -104,7 +104,7 @@ export interface Product_availability_priceRange {
 }
 
 export interface Product_availability {
-  __typename: "ProductAvailability";
+  __typename: "ProductPricingInfo";
   available: boolean | null;
   priceRange: Product_availability_priceRange | null;
 }

diff --git a/saleor/static/dashboard-next/products/types/ProductCreate.ts b/saleor/static/dashboard-next/products/types/ProductCreate.ts
@@ -112,7 +112,7 @@ export interface ProductCreate_productCreate_product_availability_priceRange {
 }
 
 export interface ProductCreate_productCreate_product_availability {
-  __typename: "ProductAvailability";
+  __typename: "ProductPricingInfo";
   available: boolean | null;
   priceRange: ProductCreate_productCreate_product_availability_priceRange | null;
 }

diff --git a/saleor/static/dashboard-next/products/types/ProductDetails.ts b/saleor/static/dashboard-next/products/types/ProductDetails.ts
@@ -104,7 +104,7 @@ export interface ProductDetails_product_availability_priceRange {
 }
 
 export interface ProductDetails_product_availability {
-  __typename: "ProductAvailability";
+  __typename: "ProductPricingInfo";
   available: boolean | null;
   priceRange: ProductDetails_product_availability_priceRange | null;
 }

diff --git a/saleor/static/dashboard-next/products/types/ProductFragment.ts b/saleor/static/dashboard-next/products/types/ProductFragment.ts
@@ -12,7 +12,7 @@ export interface ProductFragment_thumbnail {
 }
 
 export interface ProductFragment_availability {
-  __typename: "ProductAvailability";
+  __typename: "ProductPricingInfo";
   available: boolean | null;
 }
 

diff --git a/saleor/static/dashboard-next/products/types/ProductImageCreate.ts b/saleor/static/dashboard-next/products/types/ProductImageCreate.ts
@@ -110,7 +110,7 @@ export interface ProductImageCreate_productImageCreate_product_availability_pric
 }
 
 export interface ProductImageCreate_productImageCreate_product_availability {
-  __typename: "ProductAvailability";
+  __typename: "ProductPricingInfo";
   available: boolean | null;
   priceRange: ProductImageCreate_productImageCreate_product_availability_priceRange | null;
 }

diff --git a/saleor/static/dashboard-next/products/types/ProductImageUpdate.ts b/saleor/static/dashboard-next/products/types/ProductImageUpdate.ts
@@ -110,7 +110,7 @@ export interface ProductImageUpdate_productImageUpdate_product_availability_pric
 }
 
 export interface ProductImageUpdate_productImageUpdate_product_availability {
-  __typename: "ProductAvailability";
+  __typename: "ProductPricingInfo";
   available: boolean | null;
   priceRange: ProductImageUpdate_productImageUpdate_product_availability_priceRange | null;
 }

diff --git a/saleor/static/dashboard-next/products/types/ProductList.ts b/saleor/static/dashboard-next/products/types/ProductList.ts
@@ -14,7 +14,7 @@ export interface ProductList_products_edges_node_thumbnail {
 }
 
 export interface ProductList_products_edges_node_availability {
-  __typename: "ProductAvailability";
+  __typename: "ProductPricingInfo";
   available: boolean | null;
 }
 

diff --git a/saleor/static/dashboard-next/products/types/ProductUpdate.ts b/saleor/static/dashboard-next/products/types/ProductUpdate.ts
@@ -112,7 +112,7 @@ export interface ProductUpdate_productUpdate_product_availability_priceRange {
 }
 
 export interface ProductUpdate_productUpdate_product_availability {
-  __typename: "ProductAvailability";
+  __typename: "ProductPricingInfo";
   available: boolean | null;
   priceRange: ProductUpdate_productUpdate_product_availability_priceRange | null;
 }

diff --git a/saleor/static/dashboard-next/products/types/SimpleProductUpdate.ts b/saleor/static/dashboard-next/products/types/SimpleProductUpdate.ts
@@ -112,7 +112,7 @@ export interface SimpleProductUpdate_productUpdate_product_availability_priceRan
 }
 
 export interface SimpleProductUpdate_productUpdate_product_availability {
-  __typename: "ProductAvailability";
+  __typename: "ProductPricingInfo";
   available: boolean | null;
   priceRange: SimpleProductUpdate_productUpdate_product_availability_priceRange | null;
 }

diff --git a/saleor/static/dashboard-next/staff/components/StaffDetailsPage/StaffDetailsPage.tsx b/saleor/static/dashboard-next/staff/components/StaffDetailsPage/StaffDetailsPage.tsx
@@ -29,6 +29,7 @@ interface FormData {
 }
 
 export interface StaffDetailsPageProps {
+  canEditAvatar: boolean;
   canEditStatus: boolean;
   canRemove: boolean;
   disabled: boolean;
@@ -37,10 +38,13 @@ export interface StaffDetailsPageProps {
   staffMember: StaffMemberDetails_user;
   onBack: () => void;
   onDelete: () => void;
+  onImageDelete: () => void;
   onSubmit: (data: FormData) => void;
+  onImageUpload(file: File);
 }
 
 const StaffDetailsPage: React.StatelessComponent<StaffDetailsPageProps> = ({
+  canEditAvatar,
   canEditStatus,
   canRemove,
   disabled,
@@ -49,6 +53,8 @@ const StaffDetailsPage: React.StatelessComponent<StaffDetailsPageProps> = ({
   staffMember,
   onBack,
   onDelete,
+  onImageDelete,
+  onImageUpload,
   onSubmit
 }: StaffDetailsPageProps) => {
   const initialForm: FormData = {
@@ -79,8 +85,11 @@ const StaffDetailsPage: React.StatelessComponent<StaffDetailsPageProps> = ({
               <StaffProperties
                 data={data}
                 disabled={disabled}
+                canEditAvatar={canEditAvatar}
                 staffMember={staffMember}
                 onChange={change}
+                onImageUpload={onImageUpload}
+                onImageDelete={onImageDelete}
               />
             </div>
             {canEditStatus && (

diff --git a/saleor/static/dashboard-next/staff/components/StaffList/StaffList.tsx b/saleor/static/dashboard-next/staff/components/StaffList/StaffList.tsx
@@ -18,7 +18,12 @@ import * as React from "react";
 import Skeleton from "../../../components/Skeleton";
 import TablePagination from "../../../components/TablePagination";
 import i18n from "../../../i18n";
-import { getUserName, maybe, renderCollection } from "../../../misc";
+import {
+  getUserInitials,
+  getUserName,
+  maybe,
+  renderCollection
+} from "../../../misc";
 import { ListProps } from "../../../types";
 import { StaffList_staffUsers_edges_node } from "../../types/StaffList";
 
@@ -32,7 +37,18 @@ const styles = (theme: Theme) =>
       height: 47,
       justifyContent: "center",
       marginRight: theme.spacing.unit * 1 + "px",
-      width: 37
+      overflow: "hidden",
+      width: 47
+    },
+    avatarDefault: {
+      "& p": {
+        color: "#fff",
+        lineHeight: "47px"
+      },
+      background: theme.palette.primary.main,
+      height: 47,
+      textAlign: "center",
+      width: 47
     },
     avatarImage: {
       pointerEvents: "none",
@@ -104,10 +120,16 @@ const StaffList = withStyles(styles, { name: "StaffList" })(
               >
                 <TableCell>
                   <div className={classes.avatar}>
-                    <img
-                      className={classes.avatarImage}
-                      src={maybe(() => staffMember.avatar.url)}
-                    />
+                    {maybe(() => staffMember.avatar.url) ? (
+                      <img
+                        className={classes.avatarImage}
+                        src={maybe(() => staffMember.avatar.url)}
+                      />
+                    ) : (
+                      <div className={classes.avatarDefault}>
+                        <Typography>{getUserInitials(staffMember)}</Typography>
+                      </div>
+                    )}
                   </div>
                   <Typography>
                     {getUserName(staffMember) || <Skeleton />}