JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: migrated DateRangeSelection component to use composition API

Browse Source 
Migrated component to use SFC composition API.

Change-Id: I224fffc827f8be53aa8e0389334224b367b7ee71
This commit is contained in:
Vitalii 2023-03-07 14:20:50 +02:00 committed by Vitalii Shpital
parent 52f142e3fc
commit 43da70556a
1 changed files with 38 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
web/satellite/src/components/project/dashboard/DateRangeSelection.vue
View File

@ -18,61 +18,57 @@
</div> </div>
</template> </template>
<script lang="ts"> <script setup lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'; import { computed } from 'vue';
import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames'; import { APP_STATE_ACTIONS } from '@/utils/constants/actionNames';
import { useStore } from '@/utils/hooks';
import VDateRangePicker from '@/components/common/VDateRangePicker.vue'; import VDateRangePicker from '@/components/common/VDateRangePicker.vue';
import DatepickerIcon from '@/../static/images/project/datepicker.svg'; import DatepickerIcon from '@/../static/images/project/datepicker.svg';
// @vue/component const props = withDefaults(defineProps<{
@Component({ since: Date,
components: { before: Date,
DatepickerIcon, isOpen: boolean,
VDateRangePicker, onDatePick: (dateRange: Date[]) => void,
}, toggle: () => void;
}) }>(), {
since: () => new Date(),
before: () => new Date(),
isOpen: false,
onDatePick: () => {},
toggle: () => {},
});
export default class DateRangeSelection extends Vue { const store = useStore();
@Prop({ default: new Date() })
public readonly since: Date;
@Prop({ default: new Date() })
public readonly before: Date;
@Prop({ default: () => () => {} })
public readonly onDatePick: (dateRange: Date[]) => void;
@Prop({ default: () => () => {} })
public readonly toggle: () => void;
@Prop({ default: false })
public readonly isOpen: boolean;
/**
* Closes duration picker.
*/
public closePicker(): void {
this.$store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS);
}
/** /**
* Returns formatted date range string. * Returns formatted date range string.
*/ */
public get dateRangeLabel(): string { const dateRangeLabel = computed((): string => {
if (this.since.getTime() === this.before.getTime()) { if (props.since.getTime() === props.before.getTime()) {
return this.since.toLocaleDateString('en-US', { day:'numeric', month:'short', year:'numeric' }); return props.since.toLocaleDateString('en-US', { day:'numeric', month:'short', year:'numeric' });
} }
const sinceFormattedString = this.since.toLocaleDateString('en-US', { day:'numeric', month:'short', year:'numeric' }); const sinceFormattedString = props.since.toLocaleDateString('en-US', { day:'numeric', month:'short', year:'numeric' });
const beforeFormattedString = this.before.toLocaleDateString('en-US', { day:'numeric', month:'short', year:'numeric' }); const beforeFormattedString = props.before.toLocaleDateString('en-US', { day:'numeric', month:'short', year:'numeric' });
return `${sinceFormattedString} - ${beforeFormattedString}`; return `${sinceFormattedString} - ${beforeFormattedString}`;
} });
/** /**
* Returns date range to be displayed in date range picker. * Returns date range to be displayed in date range picker.
*/ */
public get pickerDateRange(): Date[] { const pickerDateRange = computed((): Date[] => {
return [this.since, this.before]; return [props.since, props.before];
} });
/**
* Closes duration picker.
*/
function closePicker(): void {
store.dispatch(APP_STATE_ACTIONS.CLOSE_POPUPS);
} }
</script> </script>