feat(ipv4-range-expander): changes due to review

src/tools/ipv4-range-expander/ipv4-range-expander.service.ts

@@ -1,14 +1,7 @@
+import type { Ipv4RangeExpanderResult } from './ipv4-range-expander.types';
 import { convertBase } from '../integer-base-converter/integer-base-converter.model';
 import { ipv4ToInt } from '../ipv4-address-converter/ipv4-address-converter.service';
-class Ipv4RangeExpanderResult {
+export { calculateCidr };
-  oldSize?: number;
-  newStart?: string;
-  newEnd?: string;
-  newCidr?: string;
-  newSize?: number;
-}
-
-export { calculateCidr, Ipv4RangeExpanderResult };
 
 function bits2ip(ipInt: number) {
   return (ipInt >>> 24) + '.' + ((ipInt >> 16) & 255) + '.' + ((ipInt >> 8) & 255) + '.' + (ipInt & 255);
@@ -56,7 +49,7 @@ function calculateCidr({ startIp, endIp }: { startIp: string; endIp: string }) {
 
   const cidr = getCidr(start, end);
   if (cidr != null) {
-    const result = new Ipv4RangeExpanderResult();
+    const result: Ipv4RangeExpanderResult = {};
     result.newEnd = bits2ip(parseInt(cidr.end, 2));
     result.newStart = bits2ip(parseInt(cidr.start, 2));
     result.newCidr = result.newStart + '/' + cidr.mask;

src/tools/ipv4-range-expander/ipv4-range-expander.types.ts

@@ -0,0 +1,7 @@
+export type Ipv4RangeExpanderResult = {
+  oldSize?: number;
+  newStart?: string;
+  newEnd?: string;
+  newCidr?: string;
+  newSize?: number;
+};

src/tools/ipv4-range-expander/ipv4-range-expander.vue

@@ -3,10 +3,10 @@
     <n-space item-style="flex:1 1 0">
       <div>
         <n-space item-style="flex:1 1 0">
-          <n-form-item label="Start address" v-bind="validationAttrsStart">
+          <n-form-item label="Start address" v-bind="startIpValidation.attrs">
             <n-input v-model:value="rawStartAddress" placeholder="Start IPv4 address..." />
           </n-form-item>
-          <n-form-item label="End address" v-bind="validationAttrsEnd">
+          <n-form-item label="End address" v-bind="endIpValidation.attrs">
             <n-input v-model:value="rawEndAddress" placeholder="End IPv4 address..." />
           </n-form-item>
         </n-space>
@@ -29,6 +29,18 @@
             />
           </tbody>
         </n-table>
+        <n-alert v-else title="Invalid combination of start and end IPv4 address" type="error">
+          <n-space vertical>
+            <n-text depth="3">
+              The end IPv4 address is lower than the start IPv4 address. This is not valid and no result could be
+              calculated. In the most cases the solution to solve this problem is to change start and end address.
+            </n-text>
+            <n-button quaternary @click="onSwitchStartEndClicked">
+              <n-icon :component="ChangeCircleOutlined" />
+              &nbsp;&nbsp;Switch start and end IPv4 address
+            </n-button>
+          </n-space>
+        </n-alert>
       </div>
     </n-space>
   </div>
@@ -36,8 +48,10 @@
 
 <script setup lang="ts">
 import { useValidation } from '@/composable/validation';
+import { ChangeCircleOutlined } from '@vicons/material';
 import { isValidIpv4 } from '../ipv4-address-converter/ipv4-address-converter.service';
-import { calculateCidr, Ipv4RangeExpanderResult } from './ipv4-range-expander.service';
+import type { Ipv4RangeExpanderResult } from './ipv4-range-expander.types';
+import { calculateCidr } from './ipv4-range-expander.service';
 import ResultRow from './result-row.vue';
 
 const rawStartAddress = useStorage('ipv4-range-expander:startAddress', '192.168.1.1');
@@ -72,21 +86,21 @@ const calculatedValues: {
   },
 ];
 
-const showResult = computed(
+const showResult = computed(() => endIpValidation.isValid && startIpValidation.isValid && result.value !== undefined);
-  () =>
+const startIpValidation = useValidation({
-    validationAttrsStart.validationStatus !== 'error' &&
-    validationAttrsEnd.validationStatus !== 'error' &&
-    result.value !== undefined,
-);
-const { attrs: validationAttrsStart } = useValidation({
   source: rawStartAddress,
   rules: [{ message: 'Invalid ipv4 address', validator: (ip) => isValidIpv4({ ip }) }],
 });
-
+const endIpValidation = useValidation({
-const { attrs: validationAttrsEnd } = useValidation({
   source: rawEndAddress,
   rules: [{ message: 'Invalid ipv4 address', validator: (ip) => isValidIpv4({ ip }) }],
 });
+
+function onSwitchStartEndClicked() {
+  const tmpStart = rawStartAddress.value;
+  rawStartAddress.value = rawEndAddress.value;
+  rawEndAddress.value = tmpStart;
+}
 </script>
 
 <style lang="less" scoped></style>

src/tools/ipv4-range-expander/result-row.vue

@@ -12,7 +12,7 @@
 
 <script setup lang="ts">
 import SpanCopyable from '@/components/SpanCopyable.vue';
-import { paramCase } from 'change-case';
+import _ from 'lodash';
 
 const props = withDefaults(defineProps<{ label: string; oldValue?: string; newValue?: string }>(), {
   label: '',
@@ -21,7 +21,7 @@ const props = withDefaults(defineProps<{ label: string; oldValue?: string; newVa
 });
 const { label, oldValue, newValue } = toRefs(props);
 
-const testId = computed(() => paramCase(label.value));
+const testId = computed(() => _.kebabCase(label.value));
 </script>
 
 <style scoped lang="less"></style>