refactor: Print Format Builder Beta code to vue 3

Bond-North-America · Oct 5, 2022 · 45e7e92 · 45e7e92
1 parent bab42ff
commit 45e7e92
Show file tree

Hide file tree

Showing 12 changed files with 1,014 additions and 1,066 deletions.
diff --git a/frappe/public/js/print_format_builder/ConfigureColumns.vue b/frappe/public/js/print_format_builder/ConfigureColumns.vue
@@ -18,78 +18,74 @@
 			:group="df.fieldname"
 			handle=".icon-drag"
 		>
-			<div
-				class="mt-2 row align-center column-row"
-				v-for="column in df.table_columns"
-			>
-				<div class="col-8">
-					<div class="column-label d-flex align-center">
-						<div class="px-2 icon-drag ml-n2">
-							<svg class="icon icon-xs">
-								<use href="#icon-drag"></use>
-							</svg>
-						</div>
-						<div class="mt-1 ml-1">
-							<input
-								class="input-column-label"
-								:class="{ 'text-danger': column.invalid_width }"
-								type="text"
-								v-model="column.label"
-							/>
+			<template #item="{ element }">
+				<div
+					class="mt-2 row align-center column-row"
+					v-for="column in df.table_columns"
+				>
+					<div class="col-8">
+						<div class="column-label d-flex align-center">
+							<div class="px-2 icon-drag ml-n2">
+								<svg class="icon icon-xs">
+									<use href="#icon-drag"></use>
+								</svg>
+							</div>
+							<div class="mt-1 ml-1">
+								<input
+									class="input-column-label"
+									:class="{ 'text-danger': column.invalid_width }"
+									type="text"
+									v-model="column.label"
+								/>
+							</div>
 						</div>
 					</div>
+					<div class="col-4 d-flex align-items-center">
+						<input
+							type="number"
+							class="text-right form-control"
+							:class="{ 'text-danger is-invalid': column.invalid_width }"
+							v-model.number="column.width"
+							min="0"
+							max="100"
+							step="5"
+						/>
+						<button
+							class="ml-2 btn btn-xs btn-icon"
+							@click="remove_column(column)"
+						>
+							<svg class="icon icon-sm">
+								<use href="#icon-close"></use>
+							</svg>
+						</button>
+					</div>
 				</div>
-				<div class="col-4 d-flex align-items-center">
-					<input
-						type="number"
-						class="text-right form-control"
-						:class="{ 'text-danger is-invalid': column.invalid_width }"
-						v-model.number="column.width"
-						min="0"
-						max="100"
-						step="5"
-					/>
-					<button
-						class="ml-2 btn btn-xs btn-icon"
-						@click="remove_column(column)"
-					>
-						<svg class="icon icon-sm">
-							<use href="#icon-close"></use>
-						</svg>
-					</button>
-				</div>
-			</div>
+			</template>
 		</draggable>
 	</div>
 </template>
-<script>
+
+<script setup>
+import { computed } from "vue";
 import draggable from "vuedraggable";
-export default {
-	name: "ConfigureColumns",
-	props: ["df"],
-	components: {
-		draggable
-	},
-	methods: {
-		remove_column(column) {
-			this.$set(
-				this.df,
-				"table_columns",
-				this.df.table_columns.filter(_column => _column !== column)
-			);
-		}
-	},
-	computed: {
-		help_message() {
-			// prettier-ignore
-			return __("Drag columns to set order. Column width is set in percentage. The total width should not be more than 100. Columns marked in red will be removed.");
-		},
-		total_width() {
-			return this.df.table_columns.reduce((total, tf) => total + tf.width, 0);
-		}
-	}
-};
+
+// props
+let props = defineProps(["df"]);
+
+// methods
+function remove_column(column) {
+	props.df["table_columns"] = props.df.table_columns.filter(_column => _column !== column)
+}
+// computed
+let help_message = computed(() => {
+	// prettier-ignore
+	return __("Drag columns to set order. Column width is set in percentage. The total width should not be more than 100. Columns marked in red will be removed.");
+});
+let total_width = computed(() => {
+	return props.df.table_columns.reduce((total, tf) => total + tf.width, 0);
+});
 </script>
+
 <style scoped>
 .icon-drag {
 	cursor: grab;