Skip to content

Vue class based to vue2 with TS support #32

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 19 commits into
base: main
Choose a base branch
from
Open

Vue class based to vue2 with TS support #32

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
88a5aae
Add vuex actions/state/getter support
matrunchyk Oct 22, 2021
7cd28fd
Add vuex global actions/state/getter support, vue hooks
matrunchyk Oct 23, 2021
db4da5c
Add watches
matrunchyk Oct 23, 2021
19fdc6e
Add mixins
matrunchyk Oct 24, 2021
2eb73fe
Add comments; some fixes
matrunchyk Oct 24, 2021
f89fa50
Add @Ref, as-is decorators support
matrunchyk Oct 24, 2021
0526021
remove all decorators support, add vue/vuex imports, fix refs, add vu…
matrunchyk Oct 24, 2021
8844a1d
fix vuex parsing
matrunchyk Oct 24, 2021
5936ec7
fix vuex parsing
matrunchyk Oct 24, 2021
054ce9a
add provide
matrunchyk Oct 24, 2021
1cff680
fix Refs
matrunchyk Oct 24, 2021
faeb320
fix Props with array-based validators
matrunchyk Oct 24, 2021
6bb69e6
add Inject
matrunchyk Oct 24, 2021
a33bafc
fix methods, emits, comments
matrunchyk Oct 24, 2021
384a583
fix methods, emits, comments
matrunchyk Oct 24, 2021
4cb31ae
Refactor filenames
matrunchyk Nov 24, 2021
57fe1ba
Fix fixtures
matrunchyk Nov 24, 2021
6e5b9ff
Fix fixtures
matrunchyk Nov 24, 2021
1fdbdcc
Fix fixtures
matrunchyk Nov 24, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Add comments; some fixes
  • Loading branch information
@matrunchyk
matrunchyk committed Oct 24, 2021
commit 2eb73fec4150fd7a84d06a1de37e4f7abb11a52c
226 changes: 132 additions & 94 deletions transformations/__testfixtures__/vue-class-component-v8/TS+Vue.input.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,110 +31,148 @@
</template>

<script lang="ts">
import { BatchFile } from '@/utils/classes/UploadResults';
import { BUTTONS_ACTIONS, WARNING_MODALS, ROUTES } from '@/utils/consts';
import { eventBus } from '@/utils/eventBus';
import { Subscription } from 'rxjs';
import Vue from 'vue';
import Component from 'vue-class-component';
import { Watch } from 'vue-property-decorator';
import { Action, namespace } from 'vuex-class';
import { BATCH_PROCESSING_STATUSES, BatchStatus, SAMPLE_STATUSES } from '../consts/consts';
import { Filters } from '../models/UploadResultsSummaryState';
import { VIEWS_TABS_VALUES } from '../services/utils';

const uploadResultSummaryModule = namespace('uploadResultSummaryModule');
const plateRawDataModule = namespace('plateRawDataModule');
import {
FINDINGS_WARNING_MESSAGES_DISPLAY_KEY,
FINDINGS_WARNING_TYPE,
FINDINGS_WARNING_TYPE_TEXT,
QUEUE_CHANNELS,
} from '@/utils/consts';
import { formatLocalized } from '@/utils/utils';
import { Component, Vue } from 'vue-property-decorator';
import { Publisher } from 'vue-q';
import { namespace } from 'vuex-class';

const patientDetailsModule = namespace('patientDetailsModule');
const reportsModule = namespace('reportsModule');
const uploadResultsModule = namespace('uploadResultsModule');


@Component({
components: {
IgcTitleLine: () => import('igentify-ui-core/lib/shared/components/IgcTitleLine/IgcTitleLine.vue'),
rbTitle: () => import('@/components/rbTitle.vue'),
IgnTitle: () => import('@/components/IgnTitle.vue'),
SearchInput: () => import('@/components/SearchInput.vue'),
ViewsTabs: () => import('@/components/ViewsTabs.vue'),
MutationInfo: () => import('@/components/mutation-info/MutationInfo.vue'),
IgrButton: () => import('igentify-ui-core/lib/rainbow/components/IgrButton/IgrButton.vue'),
IgcIcon: () => import('igentify-ui-core/lib/shared/components/IgcIcon/IgcIcon.vue'),
},
})
export default class ActionableNotification extends Vue {
@Watch('$route')
onRouteChanged(route) {
if (isLoginFlow(route.name))
this.$refs.ignToastr.$refs.toastr.clearAll();
export default class CardNotifications extends Vue {
@patientDetailsModule.State('warnings') warnings!: any[];

menuOpen = false;

get buttonStyle() {
return {
...(this.menuOpen && this.warnings.length ? {
'--button-background-color': '#2196f3',
'--button-text-color': '#fff',
} : {
'--button-background-color': '#fff',
'--button-text-color': '#2196f3',
}),
'--button-label-font-size': '12px',
'--button-min-width': '96px',
'--button-tooltip-main-color': '#2196f3',
'--button-tooltip-border-color': '#2196f3',
};
}

created() {
var something: boolean;
eventBus.$on('on-warning-modal-click', this.onWarningModalClick);
configurePermissionRules();
configureFeatureRules();

get FINDINGS_WARNING_TYPE() {
return FINDINGS_WARNING_TYPE;
}

getWarningIconName(type) {
switch (type) {
case FINDINGS_WARNING_TYPE.MOSAIC:
return 'topic_icons_warning';
case FINDINGS_WARNING_TYPE.SMN_REPORT_CARRIER:
return 'topic-icons_sample';
case FINDINGS_WARNING_TYPE.QUESTIONNAIRE_ALERT:
case FINDINGS_WARNING_TYPE.QUESTIONNAIRE_COMMENT:
return 'smallfont_flag';
case FINDINGS_WARNING_TYPE.MISSING_COUPLE_PARTNER:
case FINDINGS_WARNING_TYPE.PAIR_COUPLE:
case FINDINGS_WARNING_TYPE.UNPAIR_COUPLE:
return 'fontready_couple';
case FINDINGS_WARNING_TYPE.ADDITIONAL_TESTS_ALERT:
return 'smallfont_massagge';
default:
return 'topic-icons_sample';
}
}

updated() {
eventBus.$on('on-warning-modal-click', this.onWarningModalClick);
configurePermissionRules();
configureFeatureRules();

getWarningIconStyle(type) {
let color = '#ffffff';
let backgroundColor = '#511010';
let fontSize = '14px';

switch (type) {
case FINDINGS_WARNING_TYPE.SMN_REPORT_CARRIER:
color = 'var(--neutral--hugo)';
backgroundColor = '#F5CE21';
break;
case FINDINGS_WARNING_TYPE.MISSING_COUPLE_PARTNER:
color = '#9C27B0';
backgroundColor = '#fff';
fontSize = '23px';
break;
case FINDINGS_WARNING_TYPE.QUESTIONNAIRE_ALERT:
case FINDINGS_WARNING_TYPE.QUESTIONNAIRE_COMMENT:
backgroundColor = '#9C27B0';
break;
case FINDINGS_WARNING_TYPE.PAIR_COUPLE:
case FINDINGS_WARNING_TYPE.UNPAIR_COUPLE:
color = 'var(--secondary--eric)';
backgroundColor = '#ffffff';
fontSize = '23px';
break;
case FINDINGS_WARNING_TYPE.ADDITIONAL_TESTS_ALERT:
color = '#9C27B0';
backgroundColor = '#ffffff';
fontSize = '23px';
break;
}

return {
color,
backgroundColor,
fontSize,
};
}

$refs: any;

@State('loading') loading: boolean;
@State('forceLoading') forceLoading: boolean;
@State('message') message: unknown;
@State('success') success: unknown;

@Action('setMessage') setMessage: any;
@Action('clearMessage') clearMessage: any;
@Action('navigateTo') navigateTo: ({ name: string }) => void;

@uploadResultSummaryModule.Action('realSaveSample') saveSample: (slimSample: SlimSample) => Promise<void>;
@uploadResultSummaryModule.Action('doSomething') doSomething: (slimSample: SlimSample) => Promise<void>;
@plateRawDataModule.Action('addPatient') addPatient: (slimSample: SlimSample) => Promise<void>;

@uploadResultSummaryModule.State('data') currentData: any;
@uploadResultSummaryModule.State('incomingSampleStatuses') incomingSampleStatuses: any;
@uploadResultSummaryModule.State('search') search!: string;
@uploadResultSummaryModule.State('filters') filters!: Filters;
@uploadResultSummaryModule.State('data') data!: Array<any>;
@plateRawDataModule.State('plateRawData') plateRawData!: any;
@patientDetailsModule.State('mutationInfoResult') mutationInfoResult!: any;
@uploadResultsModule.State('selectedSuccefulBatchFile') selectedSuccefulBatchFile!: BatchFile;
@uploadResultsModule.Getter('versions') versions: Record<string, string>;
@uploadResultSummaryModule.State('pollSubscription') pollSubscription!: Subscription | null;
@uploadResultsModule.Action('initState') initState: () => void;
@uploadResultSummaryModule.Getter('disabledButtons') disabledButtons: boolean;
@uploadResultSummaryModule.Getter('batchStatus') batchStatus: BatchStatus;
@uploadResultSummaryModule.Action('handleReviewedFiltering') handleReviewedFiltering: any;
@uploadResultSummaryModule.Action('clearSearchReviewedFiltering') clearSearchReviewedFiltering: any;
@uploadResultSummaryModule.Action('updateSearch') updateSearch: any;
@uploadResultSummaryModule.Action('handleManualSearch') handleManualSearch: any;
@uploadResultSummaryModule.Action('setBatchId') setBatchId: any;
@uploadResultSummaryModule.Action('discardData') discardData: any;
@uploadResultSummaryModule.Action('saveData') saveFile: any;
@uploadResultSummaryModule.Action('updateMutationInfo') updateMutationInfo: any;
@uploadResultSummaryModule.Action('downloadExportedCSV') downloadExportedCSV: (any) => void;
@uploadResultSummaryModule.Action('updateData') updateData: () => void;
@patientDetailsModule.Action('clearMutationInfoResult')
clearMutationInfoResult: any;

@Prop() message?: string;
@Prop({ default: () => NotificationType.INFO }) notificationType: NotificationType;
@Prop() actionType: ActionType;
@Prop() counter: number;
@Prop() actionTooltip: string;

get someProp() {
var something;
// const vm: Vue | null = null;
return { ...NotifictionProps[this.notificationType], ...ActionProps[this.notificationType] };

getWarningLabelText(type) {
return FINDINGS_WARNING_TYPE_TEXT[FINDINGS_WARNING_TYPE[type]];
}

hello() {
console.log('Hello');

getWarningDescription(errorWarning) {
if (errorWarning.warningType === FINDINGS_WARNING_TYPE.ADDITIONAL_TESTS_ALERT) {
return errorWarning.attributes.text;
}

if (errorWarning.attributes.reason) {
return `Reason: ${errorWarning?.attributes?.reason}`;
}

return errorWarning?.attributes?.text
|| this.ignI18n.t(FINDINGS_WARNING_MESSAGES_DISPLAY_KEY[errorWarning.warningType], errorWarning.attributes);
}

getIsMissingCouplePartnerWarning(type) {
return type === FINDINGS_WARNING_TYPE.MISSING_COUPLE_PARTNER;
}

getIsCoupleAlert(warning){
return [
FINDINGS_WARNING_TYPE.PAIR_COUPLE,
FINDINGS_WARNING_TYPE.UNPAIR_COUPLE,
].includes(warning.warningType);
}

getFormattedDate(date) {
return formatLocalized(date, 'YYYY-MM-DD');
}

getAdditionalTestsItems(warning) {
return warning.attributes.items ? JSON.parse(warning.attributes.items) : [];
}

@Publisher(QUEUE_CHANNELS.WARNING_CHANNEL)
onWarningClick(queue, warning) {
queue.send(warning);
}
}
</script>
Expand Down
20 changes: 7 additions & 13 deletions transformations/vue-class-component-v8.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ function classToOptions(context: Context) {
const propName = prop.key.name

if (prop.decorators) {
const propDecorator = prop.decorators.find(d => d.expression.callee.name === 'Prop')
const propDecorator = prop.decorators.find(d => d.expression.callee?.name === 'Prop')
let type = prop.typeAnnotation?.typeAnnotation?.type.replace(/^TS(.*)Keyword$/, '$1') || 'Object'

if (type === 'Any') {
Expand Down Expand Up @@ -368,25 +368,19 @@ function classToOptions(context: Context) {

// Hooks
prevClassHooks.forEach(m => {
newClassProperties.push(objectMethod('method', m.value.key, [], m.value.body));
})
const method = objectMethod('method', m.node.key, [], m.node.body);

// console.log(
// context
// .root
// .get(0)
// .node
// .program
// .body[0]
// .body
// .body[0]
// )
method.async = m.node.async;
newClassProperties.push(method);
})

// Methods
prevClassMethods.forEach(m => {
// console.log(m)
const method = objectMethod('method', m.node.key, [], m.node.body);

method.async = m.node.async;
method.comments = m.node.comments;
methods.push(method)
})

Expand Down