CardView: FieldTemplate demo fixes (#30143)

Author: Raushen

apps/demos/Demos/CardView/FieldTemplate/Angular/app/app.component.html

@@ -1,4 +1,4 @@
-<dx-card-view [dataSource]="tasks" cardsPerRow="auto" [cardMinWidth]="260">
+<dx-card-view [dataSource]="tasks" cardsPerRow="auto" [cardMinWidth]="240">
   <dxo-card-view-paging [pageSize]="12" />
   <dxo-card-view-card-header [visible]="true" template="headerTemplate" />
 

apps/demos/Demos/CardView/FieldTemplate/Angular/app/app.component.ts

@@ -28,7 +28,6 @@ if (window && window.config?.packageConfigPaths) {
   selector: 'demo-app',
   templateUrl: `.${modulePrefix}/app.component.html`,
   styleUrls: [`.${modulePrefix}/app.component.css`],
-  providers: [Service],
 })
 export class AppComponent {
   tasks: Task[];
@@ -52,7 +51,7 @@ export class AppComponent {
     EmployeeComponent,
     ProgressComponent,
   ],
-  providers: [EmployeeService, PriorityService],
+  providers: [Service, EmployeeService, PriorityService],
   bootstrap: [AppComponent],
 })
 export class AppModule { }

apps/demos/Demos/CardView/FieldTemplate/Angular/app/employee/employee.component.css

@@ -0,0 +1,9 @@
+button {
+  background: none;
+  border: none;
+  padding: 0;
+  color: var(--dx-color-link);
+  text-decoration: underline;
+  cursor: pointer;
+  font: inherit;
+}

apps/demos/Demos/CardView/FieldTemplate/Angular/app/employee/employee.component.html

@@ -1 +1 @@
-<a href="#">{{ text }}</a>
+<button>{{ text }}</button>

apps/demos/Demos/CardView/FieldTemplate/Angular/app/employee/employee.component.ts

@@ -10,6 +10,7 @@ if (window && window.config?.packageConfigPaths) {
 @Component({
   selector: 'employee',
   templateUrl: `.${modulePrefix}/employee/employee.component.html`,
+  styleUrls: [`.${modulePrefix}/employee/employee.component.css`],
 })
 export class EmployeeComponent implements OnChanges {
   employees: Employee[];

apps/demos/Demos/CardView/FieldTemplate/Angular/app/progress-bar/progress-bar.component.ts

@@ -14,7 +14,7 @@ if (window && window.config?.packageConfigPaths) {
 export class ProgressComponent {
   @Input() value: number;
 
-  getStatusFormat(ratio: number): string {
-    return `${ratio * 100}%`;
+  getStatusFormat(_, value: number): string {
+    return `${value}%`;
   }
 }

apps/demos/Demos/CardView/FieldTemplate/React/App.tsx

@@ -10,7 +10,7 @@ const App = () => (
   <CardView
     dataSource={tasks}
     cardsPerRow="auto"
-    cardMinWidth={260}
+    cardMinWidth={240}
   >
     <CardHeader
       visible={true}

apps/demos/Demos/CardView/FieldTemplate/React/Employee.tsx

@@ -8,9 +8,9 @@ interface EmployeeProps {
 const Employee = ({ employeeID }: EmployeeProps) => {
     const employee = useMemo<Employee>(() => {
         return employees.find(e => e.ID === employeeID);
-    }, [employeeID]);
+    }, [employeeID, employees]);
 
-    return <a href="#">{ employee.Name }</a>
+    return <button className='task__link-button'>{ employee.Name }</button>
 }
 
 export default Employee;

apps/demos/Demos/CardView/FieldTemplate/React/Priority.tsx

@@ -8,7 +8,7 @@ interface PriorityProps {
 const Priority = ({ priorityID }: PriorityProps) => {
     const priority = useMemo<Priority>(() => {
       return priorities.find(p => p.id === priorityID);
-    }, [priorityID]);
+    }, [priorityID, priorities]);
 
     return (
       <div className={`task__priority task__priority--${priority.postfix}`}>

apps/demos/Demos/CardView/FieldTemplate/React/Progress.tsx

@@ -10,7 +10,7 @@ const Progress = ({ value }: ProgressProps) => {
         <ProgressBar
             value={value}
             elementAttr={{ 'aria-label': 'Progress Bar' }}
-            statusFormat={(ratio) => `${ratio * 100}%`}
+            statusFormat={(_, value: number) => `${value}%`}
         />
     </div>;
 }