Skip to content

Commit a62e4ee

Browse files
priyakanabar-crestCarson-Shaar
priyakanabar-crest
authored and
Carson-Shaar
committed
chore(refactored-cell-vue):Refacotred vue file for cell created ts and vue files to make code more maintainable
1 parent c1070d5 commit a62e4ee

9 files changed

Lines changed: 672 additions & 468 deletions

File tree

‎zt_frontend/src/components/Cell.vue‎

Lines changed: 50 additions & 468 deletions
Large diffs are not rendered by default.

‎zt_frontend/src/components/CellActionButtons.vue‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<template>
2+
<div class="actions">
3+
<v-btn
4+
v-if="isDevMode && showSaveBtn"
5+
:icon="`ztIcon:${ztAliases.save}`"
6+
@click="$emit('save')"
7+
></v-btn>
8+
9+
<v-btn
10+
v-if="isDevMode && showPlayBtn"
11+
:id="'runCode' + cellId"
12+
:icon="`ztIcon:${ztAliases.play}`"
13+
@click="$emit('play')"
14+
></v-btn>
15+
16+
<v-btn
17+
v-if="commentsEnabled"
18+
:class="[{ 'message-btn--alert': numberOfComments }]"
19+
@click="showComments"
20+
:ripple="false"
21+
slim
22+
rounded="circle"
23+
>
24+
<template #default>
25+
<v-icon
26+
v-if="numberOfComments === 0"
27+
size="x-large"
28+
:icon="`ztIcon:${ztAliases.message}`"
29+
></v-icon>
30+
<span v-else class="text-primary message-btn__counter">{{
31+
numberOfComments
32+
}}</span>
33+
</template>
34+
</v-btn>
35+
</div>
36+
</template>
37+
38+
<script setup lang="ts">
39+
import { computed } from 'vue';
40+
import { ztAliases } from "@/iconsets/ztIcon";
41+
import { globalState } from "@/global_vars";
42+
import { useCommentsStore } from "@/stores/comments";
43+
import { storeToRefs } from "pinia";
44+
import { Celltype } from "@/types/notebook"; // Import the correct Celltype
45+
46+
// Define props with stricter type constraints
47+
const props = defineProps({
48+
isDevMode: { type: Boolean, required: true },
49+
cellType: { type: String as () => Celltype, required: true }, // Celltype validation
50+
cellId: { type: String, required: true },
51+
cellName: { type: String, required: true },
52+
});
53+
54+
// Define emitted events
55+
const emit = defineEmits(['save', 'play']);
56+
57+
// Store reference
58+
const commentsStore = useCommentsStore();
59+
const { commentsByCell } = storeToRefs(commentsStore);
60+
61+
// Computed properties
62+
const numberOfComments = computed(() => commentsByCell.value(props.cellId));
63+
const showPlayBtn = computed(() => props.cellType === "code" || props.cellType === "sql");
64+
const showSaveBtn = computed(() => props.cellType === "markdown" || props.cellType === "text");
65+
const commentsEnabled = computed(() => globalState.comments_enabled);
66+
67+
// Function to show comments
68+
const showComments = () => {
69+
commentsStore.showCommentsPerCell({
70+
cellId: props.cellId,
71+
cellName: props.cellName,
72+
cellType: props.cellType as Celltype,
73+
});
74+
};
75+
</script>
76+
77+
<style lang="scss" scoped>
78+
@import '@/styles/cell.scss';
79+
</style>

‎zt_frontend/src/components/CellHeader.vue‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<template>
2+
<header v-if="isFocused || isMenuOpen || showHeader" class="header">
3+
<CellNameEditor
4+
v-model="cellNameValue"
5+
:is-dev-mode="isDevMode"
6+
:keep-code-in-app-model="keepCodeInAppModel"
7+
:cell-id="cellId!"
8+
:cell-type="cellType!"
9+
:currently-executing-cell="currentlyExecutingCell || ''"
10+
:is-code-running="isCodeRunning"
11+
/>
12+
<slot v-if="!isDevMode && keepCodeInAppModel" name="header-title"></slot>
13+
<v-spacer v-else></v-spacer>
14+
15+
<v-defaults-provider
16+
:defaults="{
17+
VIcon: {
18+
color: 'bluegrey',
19+
},
20+
VBtn: {
21+
variant: 'text',
22+
size: 'small',
23+
},
24+
}"
25+
>
26+
<CellActionButtons
27+
:is-dev-mode="isDevMode"
28+
:cell-type="cellType!"
29+
:cell-id="cellId!"
30+
:cell-name="cellNameValue"
31+
@save="$emit('save')"
32+
@play="$emit('play')"
33+
/>
34+
35+
<CellMenu
36+
v-if="isDevMode"
37+
v-model:is-open="isMenuOpen"
38+
:cell-id="cellId!"
39+
:cell-type="cellType!"
40+
:hide-cell="hideCell"
41+
:hide-code="hideCode"
42+
:expand-code="expandCode"
43+
:non-reactive="nonReactive"
44+
:show-table="showTable"
45+
:keep-code-in-app-model="keepCodeInAppModel"
46+
@update:hide-cell="updateHideCell"
47+
@update:hide-code="handleHideCode"
48+
@update:expand-code="handleExpandCode"
49+
@update:non-reactive="handleReactivity"
50+
@update:show-table="handleShowTable"
51+
@delete="$emit('delete')"
52+
/>
53+
</v-defaults-provider>
54+
</header>
55+
</template>
56+
57+
<script setup lang="ts">
58+
import { watch } from 'vue';
59+
import { useCellHeader } from '@/composables/cell-header';
60+
import CellNameEditor from './CellNameEditor.vue';
61+
import CellActionButtons from './CellActionButtons.vue';
62+
import CellMenu from './CellMenu.vue';
63+
import { Celltype } from '@/types/notebook'; // Ensure proper import
64+
65+
const props = defineProps({
66+
isDevMode: Boolean,
67+
cellType: { type: String as () => Celltype, required: true }, // Ensure Celltype conformity
68+
cellId: { type: String, required: true },
69+
hideCell: Boolean,
70+
hideCode: Boolean,
71+
expandCode: Boolean,
72+
nonReactive: Boolean,
73+
showTable: Boolean,
74+
cellName: { type: String, default: '' }, // Default for optional props
75+
currentlyExecutingCell: { type: String, default: '' },
76+
isCodeRunning: Boolean,
77+
isFocused: Boolean,
78+
showHeader: Boolean,
79+
error: Boolean,
80+
});
81+
82+
const emit = defineEmits([
83+
'delete',
84+
'play',
85+
'save',
86+
'expandCodeUpdate',
87+
'updateReactivity',
88+
'updateShowTable',
89+
'hideCode',
90+
'updateHeader',
91+
]);
92+
93+
const {
94+
isMenuOpen,
95+
cellNameValue,
96+
cellTypeColor,
97+
cellTypeIcon,
98+
keepCodeInAppModel,
99+
updateHideCell,
100+
handleHideCode,
101+
handleExpandCode,
102+
handleReactivity,
103+
handleShowTable,
104+
} = useCellHeader(props, emit);
105+
106+
watch(
107+
() => props.isFocused,
108+
(newValue) => {
109+
if (!newValue) {
110+
emit('updateHeader', false);
111+
}
112+
},
113+
{ immediate: true }
114+
);
115+
</script>
116+
117+
<style lang="scss" scoped>
118+
@import '@/styles/cell.scss';
119+
</style>

‎zt_frontend/src/components/CellMenu.vue‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<template>
2+
<v-menu :close-on-content-click="false" v-model="isOpen">
3+
<template v-slot:activator="{ props }">
4+
<v-btn
5+
:icon="`ztIcon:${ztAliases.more}`"
6+
:id="'cellToolbar' + cellId"
7+
v-bind="props"
8+
></v-btn>
9+
</template>
10+
11+
<v-list bg-color="bluegrey-darken-4">
12+
<v-list-item v-if="keepCodeInAppModel" :id="'updateCellReactivity' + cellId">
13+
<template v-slot:prepend>
14+
<v-switch
15+
v-model="nonReactive"
16+
@update:modelValue="updateReactivity"
17+
></v-switch>
18+
</template>
19+
<v-list-item-title>Non-Reactive</v-list-item-title>
20+
</v-list-item>
21+
22+
<v-list-item :id="'hideCell' + cellId">
23+
<template v-slot:prepend>
24+
<v-switch
25+
v-model="hideCell"
26+
@update:modelValue="updateHideCell"
27+
:id="'hideCellSwitch' + cellId"
28+
></v-switch>
29+
</template>
30+
<v-list-item-title>Hide Cell</v-list-item-title>
31+
</v-list-item>
32+
33+
<v-list-item v-if="keepCodeInAppModel" :id="'expandCode' + cellId">
34+
<template v-slot:prepend>
35+
<v-switch
36+
v-model="hideCode"
37+
@update:modelValue="updateHideCode"
38+
></v-switch>
39+
</template>
40+
<v-list-item-title>Hide Code</v-list-item-title>
41+
</v-list-item>
42+
43+
<v-list-item v-if="keepCodeInAppModel" :id="'expandCode' + cellId">
44+
<template v-slot:prepend>
45+
<v-switch
46+
v-model="expandCode"
47+
@update:modelValue="updateExpandCode"
48+
></v-switch>
49+
</template>
50+
<v-list-item-title>Expand Code</v-list-item-title>
51+
</v-list-item>
52+
53+
<v-list-item v-if="cellType === 'sql'" :id="'updateShowTable' + cellId">
54+
<template v-slot:prepend>
55+
<v-switch
56+
v-model="showTable"
57+
@update:modelValue="updateShowTable"
58+
></v-switch>
59+
</template>
60+
<v-list-item-title>Show Table</v-list-item-title>
61+
</v-list-item>
62+
63+
<v-list-item
64+
base-color="error"
65+
:id="'deleteCell' + cellId"
66+
class="delete-cell"
67+
@click="$emit('delete')"
68+
>
69+
<template v-slot:prepend>
70+
<v-icon :icon="`ztIcon:${ztAliases.delete}`"></v-icon>
71+
</template>
72+
<v-list-item-title>Delete Cell</v-list-item-title>
73+
</v-list-item>
74+
</v-list>
75+
</v-menu>
76+
</template>
77+
78+
<script setup lang="ts">
79+
import { useCellMenu, CellMenuProps } from '@/composables/cell-menu';
80+
81+
const props = defineProps({
82+
cellId: String,
83+
cellType: String,
84+
hideCell: Boolean,
85+
hideCode: Boolean,
86+
expandCode: Boolean,
87+
nonReactive: Boolean,
88+
showTable: Boolean,
89+
keepCodeInAppModel: Boolean
90+
});
91+
92+
const emit = defineEmits([
93+
'delete',
94+
'update:hideCell',
95+
'update:hideCode',
96+
'update:expandCode',
97+
'update:nonReactive',
98+
'update:showTable',
99+
'update:isOpen'
100+
]);
101+
102+
const {
103+
ztAliases,
104+
isOpen,
105+
hideCell,
106+
hideCode,
107+
expandCode,
108+
nonReactive,
109+
showTable,
110+
updateHideCell,
111+
updateHideCode,
112+
updateExpandCode,
113+
updateReactivity,
114+
updateShowTable
115+
} = useCellMenu(props as CellMenuProps, emit);
116+
</script>
117+
<style lang="scss" scoped>
118+
@import '@/styles/cell.scss';
119+
</style>

0 commit comments

Comments
 (0)