From bcb8eae5814638a8a4fdd5077ff9ef8f02cfa130 Mon Sep 17 00:00:00 2001
From: Kevin Beier <beierkevin2002@outlook.com>
Date: Sat, 22 Apr 2023 12:54:12 +0200
Subject: [PATCH 1/5] refactored 3 components into one with props

---
 .../AfterConstraint/AfterConstraint.vue       | 215 ------------------
 .../BeforeConstraint/BeforeConstraint.vue     | 215 ------------------
 .../CaptureAreaSearchValue.vue                |  92 +++++++-
 .../CaptureAreaSearchValue/ResetSettings.ts   |  10 +
 .../RegexTextField.vue}                       |  96 +++-----
 5 files changed, 123 insertions(+), 505 deletions(-)
 delete mode 100644 src/components/capture-area/AfterConstraint/AfterConstraint.vue
 delete mode 100644 src/components/capture-area/BeforeConstraint/BeforeConstraint.vue
 create mode 100644 src/components/capture-area/CaptureAreaSearchValue/ResetSettings.ts
 rename src/components/capture-area/{ValueRegex/ValueRegex.vue => RegexTextField/RegexTextField.vue} (64%)

diff --git a/src/components/capture-area/AfterConstraint/AfterConstraint.vue b/src/components/capture-area/AfterConstraint/AfterConstraint.vue
deleted file mode 100644
index 7e827f3..0000000
--- a/src/components/capture-area/AfterConstraint/AfterConstraint.vue
+++ /dev/null
@@ -1,215 +0,0 @@
-<template>
-    <v-text-field
-        v-model="afterValueConstraint"
-        label="After Constraint"
-        placeholder="Enter a constraint value"
-        variant="outlined"
-        hide-details="auto"
-    >
-        <template v-slot:prepend-inner>
-            <v-icon icon="mdi-table-column-plus-after"></v-icon>
-        </template>
-        <template v-slot:append-inner>
-            <v-fade-transition leave-absolute>
-                <v-progress-circular
-                    v-if="false"
-                    color="info"
-                    indeterminate
-                    size="24"
-                ></v-progress-circular>
-            </v-fade-transition>
-        </template>
-    </v-text-field>
-
-    <v-btn
-        @click="expand = !expand"
-        class="rounded"
-        size="x-small"
-        variant="text"
-    >
-        {{ !expand ? 'More Options' : 'Less Options' }}
-    </v-btn>
-
-    <v-expand-transition>
-        <div v-if="expand" class="pa-4">
-            <v-select
-                v-model="currentMatchingOption"
-                :items="matchingOptions"
-                label="Matching"
-                variant="underlined"
-            ></v-select>
-
-            <v-select
-                v-model="currentSlicingOption"
-                :items="slicingOptions"
-                label="Slicing"
-                variant="underlined"
-            ></v-select>
-
-            <v-select
-                v-model="currentSimilarityOption"
-                :items="similarityOptions"
-                label="Similarity"
-                variant="underlined"
-            ></v-select>
-
-            <v-text-field
-                v-if="currentMatchingOption === 'Approximate'"
-                v-model="currentNumberOfMatches"
-                label="Number of Matches"
-                placeholder="Enter a number"
-                variant="outlined"
-                :rules="[(v:number) => !!Number(v) || 'Please enter a number']"
-                hide-details="auto"
-            >
-                <template v-slot:prepend-inner>
-                    <v-icon icon="mdi-numeric"></v-icon>
-                </template>
-            </v-text-field>
-
-            <v-btn
-                @click="reset()"
-                class="rounded mt-2 mb-2"
-                size="small"
-                variant="text"
-                color="primary"
-                width="100%"
-            >
-                Reset options
-            </v-btn>
-            <v-divider></v-divider>
-        </div>
-    </v-expand-transition>
-</template>
-
-<script setup lang="ts">
-import { ref, watch } from 'vue';
-import { Vigad } from '@/proc/Vigad';
-import { Matching } from '@/proc/regex/Regex';
-import { Slicing } from '@/proc/regex/Regex';
-import { Similarity } from '@/proc/regex/Regex';
-
-const props = defineProps<{
-    captureAreaId: number;
-}>();
-
-/**
- * Get singelton instance reference to vigad
- */
-const vigad = ref(Vigad.getInstance());
-
-const expand = ref(false);
-
-// Value Regex input
-const afterValueConstraint = ref(
-    vigad.value
-        .getCaptureArea(props.captureAreaId)
-        .getRegexGroups()[0]
-        .getConstraintRegex()[1]
-        .getRegex()
-        .toString()
-        .slice(1, -1)
-);
-
-watch(afterValueConstraint, (newValue) => {
-    vigad.value
-        .getCaptureArea(props.captureAreaId)
-        .getRegexGroups()[0]
-        .getConstraintRegex()[1]
-        .setRegex(newValue.toString());
-});
-
-// Matching options
-const currentMatchingOption = ref(
-    vigad.value
-        .getCaptureArea(props.captureAreaId)
-        .getRegexGroups()[0]
-        .getConstraintRegex()[1]
-        .getMatching()
-);
-
-const matchingOptions = ref([Matching.APPROX, Matching.EXACT]);
-
-watch(currentMatchingOption, (newValue) => {
-    vigad.value
-        .getCaptureArea(props.captureAreaId)
-        .getRegexGroups()[0]
-        .getConstraintRegex()[1]
-        .setMatching(newValue);
-});
-
-// Slicing options
-const currentSlicingOption = ref(
-    vigad.value
-        .getCaptureArea(props.captureAreaId)
-        .getRegexGroups()[0]
-        .getConstraintRegex()[1]
-        .getSlicing()
-);
-
-const slicingOptions = ref([
-    Slicing.SUBSTR,
-    Slicing.SPACES,
-    Slicing.ENTIRE_STR,
-]);
-
-watch(currentSlicingOption, (newValue) => {
-    vigad.value
-        .getCaptureArea(props.captureAreaId)
-        .getRegexGroups()[0]
-        .getConstraintRegex()[1]
-        .setSlicing(newValue);
-});
-
-// Similarity options
-const currentSimilarityOption = ref(
-    vigad.value
-        .getCaptureArea(props.captureAreaId)
-        .getRegexGroups()[0]
-        .getConstraintRegex()[1]
-        .getSimilarity()
-);
-
-const similarityOptions = ref([
-    Similarity.NONE,
-    Similarity.NUM_LET,
-    Similarity.LET_NUM,
-]);
-
-watch(currentSimilarityOption, (newValue) => {
-    vigad.value
-        .getCaptureArea(props.captureAreaId)
-        .getRegexGroups()[0]
-        .getConstraintRegex()[1]
-        .setSimilarity(newValue);
-});
-
-// Number of matches
-const currentNumberOfMatches = ref(
-    vigad.value
-        .getCaptureArea(props.captureAreaId)
-        .getRegexGroups()[0]
-        .getConstraintRegex()[1]
-        .getMatchesNum()
-);
-
-watch(currentNumberOfMatches, (newValue) => {
-    if (!Number(newValue)) return;
-
-    vigad.value
-        .getCaptureArea(props.captureAreaId)
-        .getRegexGroups()[0]
-        .getConstraintRegex()[1]
-        .setMatchesNum(newValue);
-});
-
-// Reset all options to default
-function reset() {
-    currentMatchingOption.value = Matching.APPROX;
-    currentSlicingOption.value = Slicing.SUBSTR;
-    currentSimilarityOption.value = Similarity.NONE;
-    currentNumberOfMatches.value = 10000;
-}
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/src/components/capture-area/BeforeConstraint/BeforeConstraint.vue b/src/components/capture-area/BeforeConstraint/BeforeConstraint.vue
deleted file mode 100644
index 1886e0b..0000000
--- a/src/components/capture-area/BeforeConstraint/BeforeConstraint.vue
+++ /dev/null
@@ -1,215 +0,0 @@
-<template>
-    <v-text-field
-        v-model="beforeValueConstraint"
-        label="Before Constraint"
-        placeholder="Enter a constraint value"
-        variant="outlined"
-        hide-details="auto"
-    >
-        <template v-slot:prepend-inner>
-            <v-icon icon="mdi-table-column-plus-before"></v-icon>
-        </template>
-        <template v-slot:append-inner>
-            <v-fade-transition leave-absolute>
-                <v-progress-circular
-                    v-if="false"
-                    color="info"
-                    indeterminate
-                    size="24"
-                ></v-progress-circular>
-            </v-fade-transition>
-        </template>
-    </v-text-field>
-
-    <v-btn
-        @click="expand = !expand"
-        class="rounded"
-        size="x-small"
-        variant="text"
-    >
-        {{ !expand ? 'More Options' : 'Less Options' }}
-    </v-btn>
-
-    <v-expand-transition>
-        <div v-if="expand" class="pa-4">
-            <v-select
-                v-model="currentMatchingOption"
-                :items="matchingOptions"
-                label="Matching"
-                variant="underlined"
-            ></v-select>
-
-            <v-select
-                v-model="currentSlicingOption"
-                :items="slicingOptions"
-                label="Slicing"
-                variant="underlined"
-            ></v-select>
-
-            <v-select
-                v-model="currentSimilarityOption"
-                :items="similarityOptions"
-                label="Similarity"
-                variant="underlined"
-            ></v-select>
-
-            <v-text-field
-                v-if="currentMatchingOption === 'Approximate'"
-                v-model="currentNumberOfMatches"
-                label="Number of Matches"
-                placeholder="Enter a number"
-                variant="outlined"
-                :rules="[(v:number) => !!Number(v) || 'Please enter a number']"
-                hide-details="auto"
-            >
-                <template v-slot:prepend-inner>
-                    <v-icon icon="mdi-numeric"></v-icon>
-                </template>
-            </v-text-field>
-
-            <v-btn
-                @click="reset()"
-                class="rounded mt-2 mb-2"
-                size="small"
-                variant="text"
-                color="primary"
-                width="100%"
-            >
-                Reset options
-            </v-btn>
-            <v-divider></v-divider>
-        </div>
-    </v-expand-transition>
-</template>
-
-<script setup lang="ts">
-import { ref, watch } from 'vue';
-import { Vigad } from '@/proc/Vigad';
-import { Matching } from '@/proc/regex/Regex';
-import { Slicing } from '@/proc/regex/Regex';
-import { Similarity } from '@/proc/regex/Regex';
-
-const props = defineProps<{
-    captureAreaId: number;
-}>();
-
-/**
- * Get singelton instance reference to vigad
- */
-const vigad = ref(Vigad.getInstance());
-
-const expand = ref(false);
-
-// Value Regex input
-const beforeValueConstraint = ref(
-    vigad.value
-        .getCaptureArea(props.captureAreaId)
-        .getRegexGroups()[0]
-        .getConstraintRegex()[0]
-        .getRegex()
-        .toString()
-        .slice(1, -1)
-);
-
-watch(beforeValueConstraint, (newValue) => {
-    vigad.value
-        .getCaptureArea(props.captureAreaId)
-        .getRegexGroups()[0]
-        .getConstraintRegex()[0]
-        .setRegex(newValue.toString());
-});
-
-// Matching options
-const currentMatchingOption = ref(
-    vigad.value
-        .getCaptureArea(props.captureAreaId)
-        .getRegexGroups()[0]
-        .getConstraintRegex()[0]
-        .getMatching()
-);
-
-const matchingOptions = ref([Matching.APPROX, Matching.EXACT]);
-
-watch(currentMatchingOption, (newValue) => {
-    vigad.value
-        .getCaptureArea(props.captureAreaId)
-        .getRegexGroups()[0]
-        .getConstraintRegex()[0]
-        .setMatching(newValue);
-});
-
-// Slicing options
-const currentSlicingOption = ref(
-    vigad.value
-        .getCaptureArea(props.captureAreaId)
-        .getRegexGroups()[0]
-        .getConstraintRegex()[0]
-        .getSlicing()
-);
-
-const slicingOptions = ref([
-    Slicing.SUBSTR,
-    Slicing.SPACES,
-    Slicing.ENTIRE_STR,
-]);
-
-watch(currentSlicingOption, (newValue) => {
-    vigad.value
-        .getCaptureArea(props.captureAreaId)
-        .getRegexGroups()[0]
-        .getConstraintRegex()[0]
-        .setSlicing(newValue);
-});
-
-// Similarity options
-const currentSimilarityOption = ref(
-    vigad.value
-        .getCaptureArea(props.captureAreaId)
-        .getRegexGroups()[0]
-        .getConstraintRegex()[0]
-        .getSimilarity()
-);
-
-const similarityOptions = ref([
-    Similarity.NONE,
-    Similarity.NUM_LET,
-    Similarity.LET_NUM,
-]);
-
-watch(currentSimilarityOption, (newValue) => {
-    vigad.value
-        .getCaptureArea(props.captureAreaId)
-        .getRegexGroups()[0]
-        .getConstraintRegex()[0]
-        .setSimilarity(newValue);
-});
-
-// Number of matches
-const currentNumberOfMatches = ref(
-    vigad.value
-        .getCaptureArea(props.captureAreaId)
-        .getRegexGroups()[0]
-        .getConstraintRegex()[0]
-        .getMatchesNum()
-);
-
-watch(currentNumberOfMatches, (newValue) => {
-    if (!Number(newValue)) return;
-
-    vigad.value
-        .getCaptureArea(props.captureAreaId)
-        .getRegexGroups()[0]
-        .getConstraintRegex()[0]
-        .setMatchesNum(newValue);
-});
-
-// Reset all options to default
-function reset() {
-    currentMatchingOption.value = Matching.APPROX;
-    currentSlicingOption.value = Slicing.SUBSTR;
-    currentSimilarityOption.value = Similarity.NONE;
-    currentNumberOfMatches.value = 10000;
-}
-</script>
-
-<style lang="scss" scoped></style>
diff --git a/src/components/capture-area/CaptureAreaSearchValue/CaptureAreaSearchValue.vue b/src/components/capture-area/CaptureAreaSearchValue/CaptureAreaSearchValue.vue
index 0b67799..318ec82 100644
--- a/src/components/capture-area/CaptureAreaSearchValue/CaptureAreaSearchValue.vue
+++ b/src/components/capture-area/CaptureAreaSearchValue/CaptureAreaSearchValue.vue
@@ -1,15 +1,36 @@
 <template>
     <div>
         <div class="pt-2 regex-definition">
-            <ValueRegex :captureAreaId="captureAreaId" />
+            <RegexTextField
+                label="Search value"
+                placeholder="Enter search value"
+                prepend-icon="mdi-table-column"
+                :captureAreaId="captureAreaId"
+                :regex="valueRegex"
+                :resetOptions="defaultValueRegexSettings"
+            />
         </div>
 
         <div class="mt-4 regex-constraint-before-definition">
-            <BeforeConstraint :captureAreaId="captureAreaId" />
+            <RegexTextField
+                label="Before Constraint"
+                placeholder="Enter a constraint value"
+                prepend-icon="mdi-table-column-plus-before"
+                :captureAreaId="captureAreaId"
+                :regex="beforeConstraint"
+                :resetOptions="defaultBeforeConstraintsSettings"
+            />
         </div>
 
         <div class="mt-4 regex-constraint-after-definition">
-            <AfterConstraint :captureAreaId="captureAreaId" />
+            <RegexTextField
+                label="After Constraint"
+                placeholder="Enter a constraint value"
+                prepend-icon="mdi-table-column-plus-after"
+                :captureAreaId="captureAreaId"
+                :regex="afterConstraint"
+                :resetOptions="defaultAfterConstraintsSettings"
+            />
         </div>
 
         <div class="mt-4 actions">
@@ -28,10 +49,15 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { Vigad } from '@/proc/Vigad';
-import ValueRegex from '@/components/capture-area/ValueRegex/ValueRegex.vue';
-import BeforeConstraint from '@/components/capture-area/BeforeConstraint/BeforeConstraint.vue';
-import AfterConstraint from '@/components/capture-area/AfterConstraint/AfterConstraint.vue';
+import RegexTextField from '@/components/capture-area/RegexTextField/RegexTextField.vue';
+import { Matching } from '@/proc/regex/Regex';
+import { Slicing } from '@/proc/regex/Regex';
+import { Similarity } from '@/proc/regex/Regex';
+import { ResetSettings } from './ResetSettings';
 
+/**
+ * Definied Props
+ */
 const props = defineProps<{
     captureAreaId: number;
 }>();
@@ -40,6 +66,60 @@ const props = defineProps<{
  * Get singelton instance reference to vigad
  */
 const vigad = ref(Vigad.getInstance());
+
+/**
+ * Value regex
+ */
+const valueRegex = vigad.value
+    .getCaptureArea(props.captureAreaId)
+    .getRegexGroups()[0]
+    .getValueRegex();
+
+/**
+ * Before constraint
+ */
+const beforeConstraint = vigad.value
+    .getCaptureArea(props.captureAreaId)
+    .getRegexGroups()[0]
+    .getConstraintRegex()[0];
+
+/**
+ * After constraint
+ */
+const afterConstraint = vigad.value
+    .getCaptureArea(props.captureAreaId)
+    .getRegexGroups()[0]
+    .getConstraintRegex()[1];
+
+/**
+ * Default settings for value regex
+ */
+const defaultValueRegexSettings: ResetSettings = {
+    matchingOption: Matching.EXACT,
+    slicingOption: Slicing.SUBSTR,
+    similarityOption: Similarity.NONE,
+    numberOfMatches: 10000,
+};
+
+/**
+ * Default settings for before constraints
+ */
+const defaultBeforeConstraintsSettings: ResetSettings = {
+    matchingOption: Matching.APPROX,
+    slicingOption: Slicing.SUBSTR,
+    similarityOption: Similarity.NONE,
+    numberOfMatches: 10000,
+};
+
+/**
+ * Default settings for after constraints
+ */
+const defaultAfterConstraintsSettings: ResetSettings = {
+    matchingOption: Matching.APPROX,
+    slicingOption: Slicing.SUBSTR,
+    similarityOption: Similarity.NONE,
+    numberOfMatches: 10000,
+};
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/capture-area/CaptureAreaSearchValue/ResetSettings.ts b/src/components/capture-area/CaptureAreaSearchValue/ResetSettings.ts
new file mode 100644
index 0000000..b90ef0e
--- /dev/null
+++ b/src/components/capture-area/CaptureAreaSearchValue/ResetSettings.ts
@@ -0,0 +1,10 @@
+import { Matching } from '@/proc/regex/Regex';
+import { Slicing } from '@/proc/regex/Regex';
+import { Similarity } from '@/proc/regex/Regex';
+
+export interface ResetSettings {
+    matchingOption: Matching;
+    slicingOption: Slicing;
+    similarityOption: Similarity;
+    numberOfMatches: number;
+}
\ No newline at end of file
diff --git a/src/components/capture-area/ValueRegex/ValueRegex.vue b/src/components/capture-area/RegexTextField/RegexTextField.vue
similarity index 64%
rename from src/components/capture-area/ValueRegex/ValueRegex.vue
rename to src/components/capture-area/RegexTextField/RegexTextField.vue
index 3b89cae..5b78ad7 100644
--- a/src/components/capture-area/ValueRegex/ValueRegex.vue
+++ b/src/components/capture-area/RegexTextField/RegexTextField.vue
@@ -1,13 +1,13 @@
 <template>
     <v-text-field
         v-model="valueRegex"
-        label="Search value"
-        placeholder="Enter search value"
+        :label="label"
+        :placeholder="placeholder"
         variant="outlined"
         hide-details="auto"
     >
         <template v-slot:prepend-inner>
-            <v-icon icon="mdi-table-column"></v-icon>
+            <v-icon :icon="prependIcon"></v-icon>
         </template>
         <template v-slot:append-inner>
             <v-fade-transition leave-absolute>
@@ -83,14 +83,24 @@
 </template>
 
 <script setup lang="ts">
+// - [ ] Better Comments
+
 import { ref, watch } from 'vue';
 import { Vigad } from '@/proc/Vigad';
 import { Matching } from '@/proc/regex/Regex';
 import { Slicing } from '@/proc/regex/Regex';
 import { Similarity } from '@/proc/regex/Regex';
+import { ConstraintRegex } from '@/proc/regex/ConstraintRegex';
+import { ValueRegex } from '@/proc/regex/ValueRegex';
+import { ResetSettings } from '../CaptureAreaSearchValue/ResetSettings';
 
 const props = defineProps<{
+    label: string;
+    placeholder: string;
     captureAreaId: number;
+    prependIcon: string;
+    regex: ConstraintRegex | ValueRegex;
+    resetOptions: ResetSettings;
 }>();
 
 /**
@@ -101,51 +111,23 @@ const vigad = ref(Vigad.getInstance());
 const expand = ref(false);
 
 // Value Regex input
-const valueRegex = ref(
-    vigad.value
-        .getCaptureArea(props.captureAreaId)
-        .getRegexGroups()[0]
-        .getValueRegex()
-        .getRegex()
-        .toString()
-        .slice(1, -1)
-);
+const valueRegex = ref(props.regex.getRegex().toString().slice(1, -1));
 
 watch(valueRegex, (newValue) => {
-    vigad.value
-        .getCaptureArea(props.captureAreaId)
-        .getRegexGroups()[0]
-        .getValueRegex()
-        .setRegex(newValue.toString());
+    props.regex.setRegex(newValue.toString());
 });
 
 // Matching options
-const currentMatchingOption = ref(
-    vigad.value
-        .getCaptureArea(props.captureAreaId)
-        .getRegexGroups()[0]
-        .getValueRegex()
-        .getMatching()
-);
+const currentMatchingOption = ref(props.regex.getMatching());
 
 const matchingOptions = ref([Matching.APPROX, Matching.EXACT]);
 
 watch(currentMatchingOption, (newValue) => {
-    vigad.value
-        .getCaptureArea(props.captureAreaId)
-        .getRegexGroups()[0]
-        .getValueRegex()
-        .setMatching(newValue);
+    props.regex.setMatching(newValue);
 });
 
 // Slicing options
-const currentSlicingOption = ref(
-    vigad.value
-        .getCaptureArea(props.captureAreaId)
-        .getRegexGroups()[0]
-        .getValueRegex()
-        .getSlicing()
-);
+const currentSlicingOption = ref(props.regex.getSlicing());
 
 const slicingOptions = ref([
     Slicing.SUBSTR,
@@ -154,21 +136,11 @@ const slicingOptions = ref([
 ]);
 
 watch(currentSlicingOption, (newValue) => {
-    vigad.value
-        .getCaptureArea(props.captureAreaId)
-        .getRegexGroups()[0]
-        .getValueRegex()
-        .setSlicing(newValue);
+    props.regex.setSlicing(newValue);
 });
 
 // Similarity options
-const currentSimilarityOption = ref(
-    vigad.value
-        .getCaptureArea(props.captureAreaId)
-        .getRegexGroups()[0]
-        .getValueRegex()
-        .getSimilarity()
-);
+const currentSimilarityOption = ref(props.regex.getSimilarity());
 
 const similarityOptions = ref([
     Similarity.NONE,
@@ -177,38 +149,24 @@ const similarityOptions = ref([
 ]);
 
 watch(currentSimilarityOption, (newValue) => {
-    vigad.value
-        .getCaptureArea(props.captureAreaId)
-        .getRegexGroups()[0]
-        .getValueRegex()
-        .setSimilarity(newValue);
+    props.regex.setSimilarity(newValue);
 });
 
 // Number of matches
-const currentNumberOfMatches = ref(
-    vigad.value
-        .getCaptureArea(props.captureAreaId)
-        .getRegexGroups()[0]
-        .getValueRegex()
-        .getMatchesNum()
-);
+const currentNumberOfMatches = ref(props.regex.getMatchesNum());
 
 watch(currentNumberOfMatches, (newValue) => {
     if (!Number(newValue)) return;
 
-    vigad.value
-        .getCaptureArea(props.captureAreaId)
-        .getRegexGroups()[0]
-        .getValueRegex()
-        .setMatchesNum(newValue);
+    props.regex.setMatchesNum(newValue);
 });
 
 // Reset all options to default
 function reset() {
-    currentMatchingOption.value = Matching.EXACT;
-    currentSlicingOption.value = Slicing.SUBSTR;
-    currentSimilarityOption.value = Similarity.NONE;
-    currentNumberOfMatches.value = 10000;
+    currentMatchingOption.value = props.resetOptions.matchingOption;
+    currentSlicingOption.value = props.resetOptions.slicingOption;
+    currentSimilarityOption.value = props.resetOptions.similarityOption;
+    currentNumberOfMatches.value = props.resetOptions.numberOfMatches;
 }
 </script>
 

From 7f26288b653f8f28971de69da197cb7187aefaa0 Mon Sep 17 00:00:00 2001
From: Kevin Beier <beierkevin2002@outlook.com>
Date: Sat, 22 Apr 2023 13:25:27 +0200
Subject: [PATCH 2/5] added regex validation and error message

---
 .../RegexTextField/RegexTextField.vue         | 95 +++++++++++++++++--
 1 file changed, 85 insertions(+), 10 deletions(-)

diff --git a/src/components/capture-area/RegexTextField/RegexTextField.vue b/src/components/capture-area/RegexTextField/RegexTextField.vue
index 5b78ad7..c83b91b 100644
--- a/src/components/capture-area/RegexTextField/RegexTextField.vue
+++ b/src/components/capture-area/RegexTextField/RegexTextField.vue
@@ -3,6 +3,8 @@
         v-model="valueRegex"
         :label="label"
         :placeholder="placeholder"
+        :error="!isRegexValid"
+        :rules="[(v:string) => isRegexValid || errorMessage]"
         variant="outlined"
         hide-details="auto"
     >
@@ -83,9 +85,7 @@
 </template>
 
 <script setup lang="ts">
-// - [ ] Better Comments
-
-import { ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { Vigad } from '@/proc/Vigad';
 import { Matching } from '@/proc/regex/Regex';
 import { Slicing } from '@/proc/regex/Regex';
@@ -108,60 +108,135 @@ const props = defineProps<{
  */
 const vigad = ref(Vigad.getInstance());
 
+/**
+ * @type {Ref<boolean>}
+ * @description Ref to the expand state of the more options section
+ */
 const expand = ref(false);
 
-// Value Regex input
+/**
+ * @type {Ref<boolean>}
+ * @description Ref to the validity of the regex
+ */
+const isRegexValid = ref(true);
+
+/**
+ * @type {Ref<string>}
+ * @description Ref to the error message if the regex is not valid
+ */
+const errorMessage = computed(() => {
+    if (!isRegexValid.value) {
+        return "Your Regex is not valid and can't be processed!";
+    } else {
+        return '';
+    }
+});
+
+/**
+ * @type {Ref<string>}
+ * @description Ref to the value of the regex input
+ */
 const valueRegex = ref(props.regex.getRegex().toString().slice(1, -1));
 
+/**
+ * @description watches the valueRegex and updates the regex if it is a valid regex
+ */
 watch(valueRegex, (newValue) => {
-    props.regex.setRegex(newValue.toString());
+    try {
+        const regex = new RegExp(newValue.toString());
+        console.log(regex);
+        props.regex.setRegex(newValue.toString());
+        isRegexValid.value = true;
+    } catch (e) {
+        console.log('not valid');
+        isRegexValid.value = false;
+    }
 });
 
-// Matching options
+/**
+ * @type {Ref<Matching>}
+ * @description Ref to the current matching option
+ */
 const currentMatchingOption = ref(props.regex.getMatching());
 
+/**
+ * @type {Ref<Matching[]>}
+ * @description Ref to all of the matching options
+ */
 const matchingOptions = ref([Matching.APPROX, Matching.EXACT]);
 
+/**
+ * @description watches the current matching option and updates the regex
+ */
 watch(currentMatchingOption, (newValue) => {
     props.regex.setMatching(newValue);
 });
 
-// Slicing options
+/**
+ * @type {Ref<Slicing>}
+ * @description Ref to the current slicing option
+ */
 const currentSlicingOption = ref(props.regex.getSlicing());
 
+/**
+ * @type {Ref<Slicing[]>}
+ * @description Ref to all of the slicing options
+ */
 const slicingOptions = ref([
     Slicing.SUBSTR,
     Slicing.SPACES,
     Slicing.ENTIRE_STR,
 ]);
 
+/**
+ * @description watches the current slicing option and updates the regex
+ */
 watch(currentSlicingOption, (newValue) => {
     props.regex.setSlicing(newValue);
 });
 
-// Similarity options
+/**
+ * @type {Ref<Similarity>}
+ * @description Ref to the current similarity option
+ */
 const currentSimilarityOption = ref(props.regex.getSimilarity());
 
+/**
+ * @type {Ref<Similarity[]>}
+ * @description Ref to all of the similarity options
+ */
 const similarityOptions = ref([
     Similarity.NONE,
     Similarity.NUM_LET,
     Similarity.LET_NUM,
 ]);
 
+/**
+ * @description watches the current similarity option and updates the regex
+ */
 watch(currentSimilarityOption, (newValue) => {
     props.regex.setSimilarity(newValue);
 });
 
-// Number of matches
+/**
+ * @type {Ref<number>}
+ * @description Ref to the current number of matches
+ */
 const currentNumberOfMatches = ref(props.regex.getMatchesNum());
 
+/**
+ * @description watches the current number of matches and updates the regex
+ */
 watch(currentNumberOfMatches, (newValue) => {
     if (!Number(newValue)) return;
 
     props.regex.setMatchesNum(newValue);
 });
 
-// Reset all options to default
+/**
+ * @description Reset all options to default
+ * @returns {void}
+ */
 function reset() {
     currentMatchingOption.value = props.resetOptions.matchingOption;
     currentSlicingOption.value = props.resetOptions.slicingOption;

From a7dd50c4f3e2165af5702e14a88f02922178a6de Mon Sep 17 00:00:00 2001
From: Kevin Beier <beierkevin2002@outlook.com>
Date: Sat, 22 Apr 2023 17:31:04 +0200
Subject: [PATCH 3/5] just removed unused code here

---
 electron/main/index.ts | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/electron/main/index.ts b/electron/main/index.ts
index 52d4f68..a7ca86a 100644
--- a/electron/main/index.ts
+++ b/electron/main/index.ts
@@ -147,15 +147,5 @@ async function getScreen(event, title) {
         types: ['window', 'screen'],
     });
 
-    // const videoOptionsMenu = Menu.buildFromTemplate([
-    //   allSources.map((source) => {
-    //     return {
-    //       label: source.name,
-    //       click: () => selectSource(source),
-    //     }
-    //   }),
-    // ])
-
-    // videoOptionsMenu.popup()
     return allSources;
 }

From 2c880cca02e991ae87318948622a1b3bb9c0118b Mon Sep 17 00:00:00 2001
From: Kevin Beier <beierkevin2002@outlook.com>
Date: Sat, 22 Apr 2023 23:40:19 +0200
Subject: [PATCH 4/5] better naming

---
 src/App.vue                                | 2 +-
 src/router/routes.ts                       | 8 ++++----
 src/views/{RunPage.vue => CapturePage.vue} | 0
 3 files changed, 5 insertions(+), 5 deletions(-)
 rename src/views/{RunPage.vue => CapturePage.vue} (100%)

diff --git a/src/App.vue b/src/App.vue
index 8488437..797209d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -30,7 +30,7 @@
         <v-bottom-navigation :elevation="24" bg-color="surface" grow>
             <v-btn
                 :disabled="isRunning"
-                to="/run"
+                to="/capture"
                 prepend-icon="mdi-play"
                 value="run"
             >
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 1f56946..e1bdbe0 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -24,11 +24,11 @@ export const routes = [
         },
     },
     {
-        name: 'run',
-        path: '/run',
-        component: () => import('../views/RunPage.vue'),
+        name: 'capture',
+        path: '/capture',
+        component: () => import('../views/CapturePage.vue'),
         meta: {
-            title: 'Vigad - Run',
+            title: 'Vigad - Capturing',
         },
     },
     {
diff --git a/src/views/RunPage.vue b/src/views/CapturePage.vue
similarity index 100%
rename from src/views/RunPage.vue
rename to src/views/CapturePage.vue

From 712733d9b8d274913432485d9473043e1463ec12 Mon Sep 17 00:00:00 2001
From: Kevin Beier <beierkevin2002@outlook.com>
Date: Sat, 22 Apr 2023 23:41:16 +0200
Subject: [PATCH 5/5] removed console log

---
 src/components/capture-area/RegexTextField/RegexTextField.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/capture-area/RegexTextField/RegexTextField.vue b/src/components/capture-area/RegexTextField/RegexTextField.vue
index c83b91b..ffaa5db 100644
--- a/src/components/capture-area/RegexTextField/RegexTextField.vue
+++ b/src/components/capture-area/RegexTextField/RegexTextField.vue
@@ -143,12 +143,12 @@ const valueRegex = ref(props.regex.getRegex().toString().slice(1, -1));
  */
 watch(valueRegex, (newValue) => {
     try {
+        // try to create a new regex with the new value to check if it is valid
         const regex = new RegExp(newValue.toString());
-        console.log(regex);
         props.regex.setRegex(newValue.toString());
         isRegexValid.value = true;
     } catch (e) {
-        console.log('not valid');
+        // if the regex is not valid notify the user
         isRegexValid.value = false;
     }
 });