[devices-module] Refactored devices module frontend (#260)

.gitattributes

@@ -8,5 +8,4 @@
 .gitattributes export-ignore
 .gitignore export-ignore
 .npmignore export-ignore
-babel.config.js export-ignore
 Makefile export-ignore

.stylelintrc.json

@@ -1,7 +1,7 @@
 {
   "extends": [
-    "stylelint-config-standard-scss",
-    "stylelint-config-prettier"
+    "stylelint-config-recommended-scss",
+    "stylelint-prettier/recommended"
   ],
   "syntax": "scss",
   "plugins": [
@@ -11,8 +11,7 @@
   "rules": {
     "at-rule-no-unknown": null,
     "scss/at-rule-no-unknown": true,
-    "selector-class-pattern": "^[a-z]([a-z0-9-]+)?(__([a-z0-9]+-?)+)?(--([a-z0-9]+-?)+){0,2}$",
-    "selector-pseudo-class-no-unknown": null,
-    "prettier/prettier": [true, {"singleQuote": true, "tabWidth": 4}]
+    "no-empty-source": null,
+    "prettier/prettier": [true, {"singleQuote": true, "tabWidth": 2}]
   }
 }

assets/components/actors/actors-property-actor-switch.vue

@@ -1,51 +1,44 @@
 <template>
 	<div
 		:data-device-state="isDeviceReady && wsStatus ? 'on' : 'off'"
-		class="fb-devices-module-actors-property-actor-switch__container"
+		:class="[
+			{ 'color-success': property.lastResult === PropertyCommandResult.OK },
+			{ 'color-error': property.lastResult === PropertyCommandResult.ERR },
+		]"
+		class="flex flex-col items-center justify-center h-full"
 	>
-		<fb-ui-switch-element
+		<el-switch
 			v-if="property.command === null"
-			:status="value"
+			v-model="value"
 			:disabled="!isDeviceReady || !wsStatus"
-			:variant="FbUiVariantTypes.PRIMARY"
-			:size="FbSizeTypes.MEDIUM"
+			type="primary"
 			@change="onToggleState"
 		/>
 
-		<div
-			v-show="property.command === PropertyCommandState.COMPLETED"
-			class="fb-devices-module-actors-property-actor-switch__result"
-		>
-			<font-awesome-icon
-				v-show="property.lastResult === PropertyCommandResult.ERR"
-				icon="ban"
-				class="fb-devices-module-actors-property-actor-switch__result-err"
-			/>
-			<font-awesome-icon
-				v-show="property.lastResult === PropertyCommandResult.OK"
-				icon="check"
-				class="fb-devices-module-actors-property-actor-switch__result-ok"
-			/>
-		</div>
-
-		<div
+		<el-icon v-show="property.command === PropertyCommandState.COMPLETED && property.lastResult === PropertyCommandResult.ERR">
+			<fas-ban />
+		</el-icon>
+
+		<el-icon v-show="property.command === PropertyCommandState.COMPLETED && property.lastResult === PropertyCommandResult.OK">
+			<fas-check />
+		</el-icon>
+
+		<fb-spinner
 			v-show="property.command === PropertyCommandState.SENDING"
-			class="fb-devices-module-actors-property-actor-switch__loading"
-		>
-			<fb-ui-spinner
-				:variant="FbUiVariantTypes.PRIMARY"
-				:size="FbSizeTypes.MEDIUM"
-			/>
-		</div>
+			type="primary"
+			size="small"
+		/>
 	</div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import get from 'lodash/get';
+import get from 'lodash.get';
+import { ElIcon, ElSwitch } from 'element-plus';
 
-import { FbUiSwitchElement, FbUiSpinner, FbSizeTypes, FbUiVariantTypes } from '@fastybird/web-ui-library';
+import { FasCheck, FasBan } from '@fastybird/web-ui-icons';
+import { FbSpinner } from '@fastybird/web-ui-library';
 import { ActionRoutes, DataType, ModulePrefix, PropertyAction, SwitchPayload } from '@fastybird/metadata-library';
 import { useWampV1Client } from '@fastybird/vue-wamp-v1';
 
@@ -115,7 +108,7 @@ const onToggleState = async (): Promise<void> => {
 
 	if (!isDeviceReady.value) {
 		flashMessage.error(
-			t('messages.notOnline', {
+			t('messages.devices.notOnline', {
 				device: useEntityTitle(props.device).value,
 			})
 		);
@@ -233,7 +226,7 @@ const onToggleState = async (): Promise<void> => {
 		}
 
 		flashMessage.error(
-			t('messages.commandNotAccepted', {
+			t('messages.properties.commandNotAccepted', {
 				device: useEntityTitle(props.device).value,
 			})
 		);
@@ -242,7 +235,3 @@ const onToggleState = async (): Promise<void> => {
 	}
 };
 </script>
-
-<style rel="stylesheet/scss" lang="scss" scoped>
-@import 'actors-property-actor-switch';
-</style>

assets/components/channel-settings/channel-settings-channel-rename.types.ts

@@ -2,16 +2,11 @@ import { IChannel } from '../../models/types';
 
 export interface IChannelSettingsChannelRenameModel {
 	identifier: string;
-	name?: string;
-	comment?: string;
+	name: string | null;
+	comment: string | null;
 }
 
 export interface IChannelSettingsChannelRenameProps {
-	channel: IChannel;
+	channel: IChannel | null;
 	modelValue: IChannelSettingsChannelRenameModel;
-	errors: {
-		identifier?: string;
-		name?: string;
-		comment?: string;
-	};
 }