rooty/fab-manager
1
0
Fork 0
mirror of https://github.com/LaCasemate/fab-manager.git synced 2025-03-21 12:29:03 +01:00
Code Issues Releases Activity

WIP: refactoring of plan card

Browse Source
This commit is contained in:
Sylvain 2020-10-28 17:02:22 +01:00
parent 2b014304ce
commit f5687f1120
4 changed files with 29 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
app/frontend/src/javascript/components/plan-card.tsx
View File

@ -4,21 +4,40 @@
import React from 'react';
import { react2angular } from 'react2angular';
import Application from '../models/application';
import { IFilterService } from 'angular';
import moment from "moment";
import { IApplication } from '../models/application';
import { Plan } from '../models/plan';
declare var Application: IApplication;
interface PlanCardProps {
plan: Plan
plan: Plan,
_t: (key: string, interpolation: object) => string,
$filter: IFilterService
}
const PlanCard: React.FC<PlanCardProps> = ({ plan }) => {
const PlanCard: React.FC<PlanCardProps> = ({ plan, _t, $filter }) => {
/**
* Return the formatted localized amount of the given plan (eg. 20.5 => "20,50 €")
*/
const amount = () : string => {
return $filter('currency')(plan.amount);
}
/**
* Return the formatted localized duration of te given plan (eg. Month/3 => "3 mois")
*/
const duration = (): string => {
return moment.duration(plan.interval_count, plan.interval).humanize();
}
return (
<div>
<h3 className="title">{plan.base_name}</h3>
<div className="content">
<div className="wrap">
<div className="price">
{plan.amount}
<div className="amount">{amount()}</div>
<span className="period">{duration()}</span>
</div>
</div>
</div>
@ -26,4 +45,4 @@ const PlanCard: React.FC<PlanCardProps> = ({ plan }) => {
);
}
Application.Components.component('planCard', react2angular(PlanCard, ['plan']));
Application.Components.component('planCard', react2angular(PlanCard, ['plan'], ['_t', '$filter']));

4
app/frontend/src/javascript/components/switch.ts
View File

@ -1,5 +1,7 @@
import Switch from 'react-switch';
import { react2angular } from 'react2angular';
import Application from '../models/application';
import { IApplication } from '../models/application';
declare var Application: IApplication;
Application.Components.component('switch', react2angular(Switch, ['checked', 'onChange', 'id', 'className']));

6
app/frontend/src/javascript/models/application.ts
View File

@ -1,13 +1,9 @@
import { IModule } from "angular";
interface IApplication {
export interface IApplication {
Components: IModule,
Services: IModule,
Controllers: IModule,
Filters: IModule,
Directives: IModule
}
declare var Application: IApplication;
export default Application;

11
app/frontend/templates/plans/index.html
View File

@ -31,16 +31,7 @@
ng-class="{'col-md-12 col-lg-12 b-r':(plansGroup.plans.filter(filterDisabledPlans).length % 2 == 1 && key == plansGroup.plans.filter(filterDisabledPlans).length-1)}"
ng-repeat="(key, plan) in plansGroup.plans.filter(filterDisabledPlans) | orderBy: '-ui_weight'">
<h3 class="title">{{ plan.base_name }}</h3>
<div class="content">
<div class="wrap">
<div class="price">
<div class="amount" data-fittext>{{plan.amount | currency}}</div>
<span class="period">{{ plan.interval | planIntervalFilter: plan.interval_count }}</span>
</div>
</div>
</div>
<plan-card plan="plan"></plan-card>
<div class="cta-button" ng-if="isAuthorized('member') || (isAuthorized('manager') && ctrl.member.id === currentUser.id)">
<button class="btn btn-default rounded" ng-click="selectPlan(plan)" ng-if="ctrl.member.subscribed_plan.id != plan.id" ng-disabled="ctrl.member.subscribed_plan" ng-class="{ 'bg-yellow': selectedPlan==plan }">