From fe3075e6d3030fb89948bb6c1d821cce8f58f855 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Tue, 19 Apr 2022 20:32:58 +0200
Subject: [PATCH] composition: some more components

---
 src/components/ftbot/TradeDetail.vue  | 28 ++++++-------
 src/components/general/DateTimeTZ.vue | 57 ++++++++++++++-------------
 src/components/general/ProfitPill.vue | 57 +++++++++++++--------------
 3 files changed, 68 insertions(+), 74 deletions(-)

diff --git a/src/components/ftbot/TradeDetail.vue b/src/components/ftbot/TradeDetail.vue
index faca6124..46747fc8 100644
--- a/src/components/ftbot/TradeDetail.vue
+++ b/src/components/ftbot/TradeDetail.vue
@@ -99,29 +99,25 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator';
 import { formatPercent, formatPriceCurrency, formatPrice, timestampms } from '@/shared/formatters';
 import ValuePair from '@/components/general/ValuePair.vue';
 import TradeProfit from '@/components/ftbot/TradeProfit.vue';
 import DateTimeTZ from '@/components/general/DateTimeTZ.vue';
 import { Trade } from '@/types';
 
-@Component({
+import { defineComponent } from '@vue/composition-api';
+
+export default defineComponent({
+  name: 'TradeDetail',
   components: { ValuePair, TradeProfit, DateTimeTZ },
-})
-export default class TradeDetail extends Vue {
-  @Prop({ type: Object, required: true }) trade!: Trade;
-
-  @Prop({ type: String, required: true }) stakeCurrency!: string;
-
-  timestampms = timestampms;
-
-  formatPercent = formatPercent;
-
-  formatPrice = formatPrice;
-
-  formatPriceCurrency = formatPriceCurrency;
-}
+  props: {
+    trade: { required: true, type: Object as () => Trade },
+    stakeCurrency: { required: true, type: String },
+  },
+  setup() {
+    return { timestampms, formatPercent, formatPrice, formatPriceCurrency };
+  },
+});
 </script>
 <style scoped>
 .detail-header {
diff --git a/src/components/general/DateTimeTZ.vue b/src/components/general/DateTimeTZ.vue
index c0de7091..dc4888cf 100644
--- a/src/components/general/DateTimeTZ.vue
+++ b/src/components/general/DateTimeTZ.vue
@@ -4,38 +4,39 @@
 
 <script lang="ts">
 import { timestampms, timestampmsWithTimezone, timestampToDateString } from '@/shared/formatters';
-import { Component, Prop, Vue } from 'vue-property-decorator';
 
-@Component({})
-export default class DateTimeTZ extends Vue {
-  @Prop({ required: true, type: Number }) date!: number;
+import { defineComponent, computed } from '@vue/composition-api';
 
-  @Prop({ required: false, type: Boolean, default: false }) showTimezone!: boolean;
+export default defineComponent({
+  name: 'DateTimeTZ',
+  props: {
+    date: { required: true, type: Number },
+    showTimezone: { required: false, type: Boolean, default: false },
+    dateOnly: { required: false, type: Boolean, default: false },
+  },
+  setup(props) {
+    const formattedDate = computed((): string => {
+      if (props.dateOnly) {
+        return timestampToDateString(props.date);
+      }
+      if (props.showTimezone) {
+        return timestampmsWithTimezone(props.date);
+      }
+      return timestampms(props.date);
+    });
 
-  @Prop({ required: false, type: Boolean, default: false }) dateOnly!: boolean;
+    const timezoneTooltip = computed((): string => {
+      const time1 = timestampmsWithTimezone(props.date);
+      const timeUTC = timestampmsWithTimezone(props.date, 'UTC');
+      if (time1 === timeUTC) {
+        return timeUTC;
+      }
 
-  timestampms = timestampms;
-
-  get formattedDate(): string {
-    if (this.dateOnly) {
-      return timestampToDateString(this.date);
-    }
-    if (this.showTimezone) {
-      return timestampmsWithTimezone(this.date);
-    }
-    return timestampms(this.date);
-  }
-
-  get timezoneTooltip(): string {
-    const time1 = timestampmsWithTimezone(this.date);
-    const timeUTC = timestampmsWithTimezone(this.date, 'UTC');
-    if (time1 === timeUTC) {
-      return timeUTC;
-    }
-
-    return `${time1}\n${timeUTC}`;
-  }
-}
+      return `${time1}\n${timeUTC}`;
+    });
+    return { formattedDate, timezoneTooltip };
+  },
+});
 </script>
 
 <style scoped></style>
diff --git a/src/components/general/ProfitPill.vue b/src/components/general/ProfitPill.vue
index 7f0bfec3..741dfb76 100644
--- a/src/components/general/ProfitPill.vue
+++ b/src/components/general/ProfitPill.vue
@@ -20,41 +20,38 @@
 </template>
 
 <script lang="ts">
-import { formatPercent, formatPrice, timestampms } from '@/shared/formatters';
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import { formatPercent, formatPrice } from '@/shared/formatters';
 
 import ProfitSymbol from '@/components/general/ProfitSymbol.vue';
 
-@Component({ components: { ProfitSymbol } })
-export default class ProfitPill extends Vue {
-  @Prop({ required: false, default: undefined, type: Number }) profitRatio?: number;
+import { defineComponent, computed } from '@vue/composition-api';
 
-  @Prop({ required: false, default: undefined, type: Number }) profitAbs?: number;
+export default defineComponent({
+  name: 'ProfitPill',
+  components: { ProfitSymbol },
+  props: {
+    profitRatio: { required: false, default: undefined, type: Number },
+    profitAbs: { required: false, default: undefined, type: Number },
+    stakeCurrency: { required: true, type: String },
+    profitDesc: { required: false, default: '', type: String },
+  },
+  setup(props) {
+    const isProfitable = computed(() => {
+      return (
+        (props.profitRatio !== undefined && props.profitRatio > 0) ||
+        (props.profitRatio === undefined && props.profitAbs !== undefined && props.profitAbs > 0)
+      );
+    });
 
-  @Prop({ required: true, type: String }) stakeCurrency!: string;
-
-  @Prop({ required: false, default: '', type: String }) profitDesc!: string;
-
-  formatPercent = formatPercent;
-
-  timestampms = timestampms;
-
-  formatPrice = formatPrice;
-
-  get isProfitable() {
-    return (
-      (this.profitRatio !== undefined && this.profitRatio > 0) ||
-      (this.profitRatio === undefined && this.profitAbs !== undefined && this.profitAbs > 0)
-    );
-  }
-
-  get profitString(): string {
-    if (this.profitRatio !== undefined && this.profitAbs !== undefined) {
-      return `(${formatPrice(this.profitAbs, 3)})`;
-    }
-    return '';
-  }
-}
+    const profitString = computed((): string => {
+      if (props.profitRatio !== undefined && props.profitAbs !== undefined) {
+        return `(${formatPrice(props.profitAbs, 3)})`;
+      }
+      return '';
+    });
+    return { profitString, isProfitable, formatPercent };
+  },
+});
 </script>
 
 <style scoped lang="scss">