update with ant grid control

Author: thangchung

README.md

@@ -2,7 +2,9 @@
 
 The practical repository uses coolstore domain which is mainly borrowed from `https://github.com/zkavtaskin/Domain-Driven-Design-Example` to demonstrate how to apply Domain Driven Design seamlessly with Clean Architecture.
 
-# Business usecases
+
+
+# Business Usecases
 
 ![](assets/usecase_diagram.png)
 
@@ -38,8 +40,112 @@ $ npm run dev
 > 
 > Tye Dashboard: [http://localhost:8000](http://localhost:8000)
 
+# Clean Domain Driven-design
+
+Domain-driven Design demonstrates it can help the business tidy and organized in many years. But it is hard to approach and use, we need to make it easier to use in the real project when we get started. 
+
+Clean Architecture helps the project structure easier to refactor and evolve in medium and big projects. Especially in the Microservice world, we always want to do and try with a lot of time in the project lifetime.
+
+Clean Domain-driven Design is a collection of basic building blocks and project structure to help we get starting the project with less code boilerplate and effortless. We focus on the Microservice approach of how can we organize code, the project with the monorepo approach, and you can use it for modular monolith project as well.
+## Core project
+### Domain
+
+TODO
+
+### Repository
+
+TODO
+
+## Infrastructure project
+
+TODO
+
+## Application project
+
+TODO
+
+## Api project
+
+TODO
+# Public CRUD interface
+
+In medium and large software projects, we normally implement the CRUD actions over and over again. And it might take around 40-50% codebase just to do CRUD in the projects. The question is can we make standardized CRUD APIs, then we can use them in potential projects in the future? That is in my mind for a long time when I started and finished many projects, and I decide to take time to research and define the public interfaces for it as below
+
+## Common
+
+```csharp
+public record ResultModel<T>(T Data, bool IsError = false, string? ErrorMessage = default);
+```
+
+## [R]etrieve
+
+```csharp
+// input model for list query (normally using for the table UI control with paging, filtering and sorting)
+public interface IListQueryInput : ICrudInput
+{
+  public List<string> Includes { get; init; }
+  public List<FilterModel> Filters { get; init; }
+  public List<string> Sorts { get; init; }
+  public int Page { get; init; }
+  public int PageSize { get; init; }
+}
+```
+
+```csharp
+// output model with items, total items, page and page size with serving for binding with the table UI control
+public record ListResponseModel<T>(List<T> Items, long TotalItems, int Page, int PageSize);
+```
+
+```csharp
+public interface IItemQueryInput<TId> : ICrudInput where TId : struct
+{
+    public List<string> Includes { get; init; }
+    public TId Id { get; init; }
+}
+```
+
+## [C]reate
+
+```csharp
+public interface ICreateInput<T> : ICrudInput
+{
+  public T Model { get; init; }
+}
+```
+
+## [U]pdate
+
+```csharp
+public interface IUpdateInput<T> : ICrudInput
+{
+  public T Model { get; init; }
+}
+```
+
+## [D]elete
+
+```csharp
+public interface IDeleteInput<TId> : ICrudInput where TId : struct
+{
+  public TId Id { get; init; }
+}
+```
+
+# CRQS interface
+
+```csharp
+public interface ICommand<T> : IRequest<ResultModel<T>> {}
+```
+
+```csharp
+public interface IQuery<T> : IRequest<ResultModel<T>> {}
+```
+
+# Sample pages
+
 ![](assets/products_screen.png)
 
 # Refs
+- [Ant Design Components](https://ant.design/components/overview)
 - [C4 PlaintUML Model](https://github.com/plantuml-stdlib/C4-PlantUML/blob/master/samples/C4CoreDiagrams.md)
 - [Real world PlantUML](https://real-world-plantuml.com)

assets/products_screen.png

@@ -12,7 +12,7 @@
 
 namespace ProductService.Application.Queries
 {
-    public static class GetProductById
+    public class GetProductById
     {
         public record Query : IItemQueryInput<Guid>, IQuery<ProductDto>
         {

src/Product/ProductService.Application/Queries/GetProductById.cs

@@ -1,14 +1,15 @@
 // // Imports SCSS theme
 // // Vendors variables override and path
-@import "vendors/vendor";
-@import "base/base";
-
 #components-layout-demo-fixed .logo {
   float: left;
   width: 120px;
   height: 31px;
+  line-height: 32px;
+  text-align: center;
   margin: 16px 24px 16px 0;
   background: rgba(255, 255, 255, 0.2);
+  font-weight: 900;
+  color: #fff;
 }
 .site-layout .site-layout-background {
   background: #fff;

src/Web/assets/scss/base/_base.scss

@@ -0,0 +1,35 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { BarsOutlined, DownOutlined } from "@ant-design/icons";
+import { Dropdown, Button, Menu } from "antd";
+
+const DropOption = ({
+  onMenuClick,
+  menuOptions = [],
+  buttonStyle,
+  dropdownProps,
+}) => {
+  const menu = menuOptions.map((item) => (
+    <Menu.Item key={item.key}>{item.name}</Menu.Item>
+  ));
+  return (
+    <Dropdown
+      overlay={<Menu onClick={onMenuClick}>{menu}</Menu>}
+      {...dropdownProps}
+    >
+      <Button style={{ border: "none", ...buttonStyle }}>
+        <BarsOutlined style={{ marginRight: 2 }} />
+        <DownOutlined />
+      </Button>
+    </Dropdown>
+  );
+};
+
+DropOption.propTypes = {
+  onMenuClick: PropTypes.func,
+  menuOptions: PropTypes.array.isRequired,
+  buttonStyle: PropTypes.object,
+  dropdownProps: PropTypes.object,
+};
+
+export default DropOption;

src/Web/assets/scss/main.scss

@@ -0,0 +1,6 @@
+{
+  "name": "DropOption",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./DropOption.js"
+}

src/Web/assets/scss/vendors/_vendor.scss

@@ -18,7 +18,7 @@ function NavBar() {
     <>
       <Header
         id="components-layout-demo-fixed"
-        style={{ position: "fixed", zIndex: 1, width: "100%" }}
+        style={{ position: "fixed", zIndex: 9999, width: "100%" }}
       >
         <div className="logo">eCommerce</div>
         <Menu

src/Web/components/DropOption/DropOption.jsx

@@ -25,6 +25,7 @@
     "next-images": "^1.7.0",
     "node-sass": "^5.0.0",
     "nprogress": "^0.2.0",
+    "prop-types": "^15.7.2",
     "react": "17.0.1",
     "react-bootstrap-table-next": "^4.0.3",
     "react-bootstrap-table2-editor": "^1.4.0",