Users can now add new notes

public/locales/de/translation.json

@@ -25,6 +25,8 @@
 		"title": "Gerätebefehle"
 	},
 	"common": {
+		"add": "Hinzufügen",
+		"adding_ellipsis": "Hinzufügen ...",
 		"are_you_sure": "Bist du sicher?",
 		"cancel": "Abbrechen",
 		"certificate": "Zertifikat",
@@ -38,6 +40,7 @@
 		"connected": "Verbindung wurde hergestellt",
 		"copied": "kopiert!",
 		"copy_to_clipboard": "In die Zwischenablage kopieren",
+		"created_by": "Erstellt von",
 		"custom_date": "Benutzerdefiniertes Datum",
 		"date": "Datum",
 		"day": "tag",
@@ -103,6 +106,7 @@
 		"last_configuration_change": "Letzte Konfigurationsänderung",
 		"last_configuration_download": "Letzter Konfigurations-Download",
 		"location": "Ort",
+		"note": "Hinweis",
 		"notes": "Anmerkungen",
 		"owner": "Inhaber",
 		"title": "Gerätekonfiguration",

public/locales/en/translation.json

@@ -25,6 +25,8 @@
 		"title": "Command History"
 	},
 	"common": {
+		"add": "Add",
+		"adding_ellipsis": "Adding...",
 		"are_you_sure": "Are you sure?",
 		"cancel": "Cancel",
 		"certificate": "Certificate",
@@ -38,6 +40,7 @@
 		"connected": "Connected",
 		"copied": "Copied!",
 		"copy_to_clipboard": "Copy to clipboard",
+		"created_by": "Created By",
 		"custom_date": "Custom Date",
 		"date": "Date",
 		"day": "day",
@@ -103,6 +106,7 @@
 		"last_configuration_change": "Last Configuration Change",
 		"last_configuration_download": "Last Configuration Download",
 		"location": "Location",
+		"note": "Note",
 		"notes": "Notes",
 		"owner": "Owner",
 		"title": "Configuration",

public/locales/es/translation.json

@@ -25,6 +25,8 @@
 		"title": "Historial de Comandos"
 	},
 	"common": {
+		"add": "Añadir",
+		"adding_ellipsis": "Añadiendo ...",
 		"are_you_sure": "¿Estás seguro?",
 		"cancel": "Cancelar",
 		"certificate": "Certificado",
@@ -38,6 +40,7 @@
 		"connected": "Conectado",
 		"copied": "Copiado!",
 		"copy_to_clipboard": "Copiar al portapapeles",
+		"created_by": "Creado por",
 		"custom_date": "Fecha personalizada",
 		"date": "Fecha",
 		"day": "día",
@@ -103,6 +106,7 @@
 		"last_configuration_change": "Último cambio de configuración",
 		"last_configuration_download": "Descarga de la última configuración",
 		"location": "Ubicación",
+		"note": "Nota",
 		"notes": "Notas",
 		"owner": "Propietario",
 		"title": "Configuración",

public/locales/fr/translation.json

@@ -25,6 +25,8 @@
 		"title": "Historique des commandes"
 	},
 	"common": {
+		"add": "Ajouter",
+		"adding_ellipsis": "Ajouter...",
 		"are_you_sure": "Êtes-vous sûr?",
 		"cancel": "annuler",
 		"certificate": "Certificat",
@@ -38,6 +40,7 @@
 		"connected": "Connecté",
 		"copied": "Copié!",
 		"copy_to_clipboard": "Copier dans le presse-papier",
+		"created_by": "Créé par",
 		"custom_date": "Date personnalisée",
 		"date": "Rendez-vous amoureux",
 		"day": "journée",
@@ -103,6 +106,7 @@
 		"last_configuration_change": "Dernière modification de configuration",
 		"last_configuration_download": "Téléchargement de la dernière configuration",
 		"location": "Emplacement",
+		"note": "Remarque",
 		"notes": "Remarques",
 		"owner": "Propriétaire",
 		"title": "Configuration",

public/locales/pt/translation.json

@@ -25,6 +25,8 @@
 		"title": "Histórico de Comandos"
 	},
 	"common": {
+		"add": "Adicionar",
+		"adding_ellipsis": "Adicionando ...",
 		"are_you_sure": "Você tem certeza?",
 		"cancel": "Cancelar",
 		"certificate": "Certificado",
@@ -38,6 +40,7 @@
 		"connected": "Conectado",
 		"copied": "Copiado!",
 		"copy_to_clipboard": "Copiar para área de transferência",
+		"created_by": "Criado Por",
 		"custom_date": "Data personalizada",
 		"date": "Encontro",
 		"day": "dia",
@@ -103,6 +106,7 @@
 		"last_configuration_change": "Última Mudança de Configuração",
 		"last_configuration_download": "Último download da configuração",
 		"location": "Localização",
+		"note": "Nota",
 		"notes": "notas",
 		"owner": "Proprietário",
 		"title": "Configuração",

src/components/CommandHistory/index.js

@@ -321,9 +321,7 @@ const DeviceCommands = () => {
                   items={commands ?? []}
                   fields={columns}
                   className={styles.whiteIcon}
-                  columnFilter
-                  sorter
-                  sorterValue={{ column: 'submitted', desc: 'true' }}
+                  sorterValue={{ column: 'created', desc: 'true' }}
                   scopedSlots={{
                     completed: (item) => (
                       <td>

src/components/CommandHistory/index.module.scss

@@ -7,7 +7,7 @@
 }
 
 .scrollableBox {
-  height: 400px;
+  height: 200px;
 }
 
 .whiteIcon {

src/components/DeviceConfiguration/index.js

@@ -6,7 +6,6 @@ import {
   CCardBody,
   CCol,
   CLabel,
-  CInput,
   CCollapse,
   CCardFooter,
   CButton,
@@ -20,6 +19,7 @@ import axiosInstance from 'utils/axiosInstance';
 import { useAuth } from 'contexts/AuthProvider';
 import { useDevice } from 'contexts/DeviceProvider';
 import CopyToClipboardButton from 'components/CopyToClipboardButton';
+import DeviceNotes from 'components/DeviceNotes';
 import DeviceConfigurationModal from './DeviceConfigurationModal';
 import styles from './index.module.scss';
 
@@ -133,14 +133,11 @@ const DeviceConfiguration = () => {
                 {prettyDate(device.createdTimestamp)}
               </CCol>
             </CRow>
-            <CRow className={styles.spacedRow}>
-              <CCol md="3">
-                <CLabel>{t('configuration.last_configuration_download')} : </CLabel>
-              </CCol>
-              <CCol xs="12" md="9">
-                {prettyDate(device.lastConfigurationDownload)}
-              </CCol>
-            </CRow>
+            <DeviceNotes
+              notes={device.notes}
+              refreshNotes={getDevice}
+              serialNumber={deviceSerialNumber}
+            />
             <CRow className={styles.spacedRow}>
               <CCol md="3" className={styles.topPadding}>
                 <CLabel>{t('configuration.device_password')} : </CLabel>
@@ -156,18 +153,18 @@ const DeviceConfiguration = () => {
             <CCollapse show={collapse}>
               <CRow className={styles.spacedRow}>
                 <CCol md="3">
-                  <CLabel>{t('common.manufacturer')} :</CLabel>
+                  <CLabel>{t('configuration.last_configuration_download')} : </CLabel>
                 </CCol>
                 <CCol xs="12" md="9">
-                  {device.manufacturer}
+                  {prettyDate(device.lastConfigurationDownload)}
                 </CCol>
               </CRow>
               <CRow className={styles.spacedRow}>
                 <CCol md="3">
-                  <CLabel htmlFor="text-input">{t('configuration.notes')} :</CLabel>
+                  <CLabel>{t('common.manufacturer')} :</CLabel>
                 </CCol>
                 <CCol xs="12" md="9">
-                  <CInput id="text-input" name="text-input" placeholder={device.notes} />
+                  {device.manufacturer}
                 </CCol>
               </CRow>
               <CRow className={styles.spacedRow}>

src/components/DeviceNotes/index.js

@@ -0,0 +1,98 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { CDataTable, CRow, CCol, CLabel, CInput } from '@coreui/react';
+import PropTypes from 'prop-types';
+import axiosInstance from 'utils/axiosInstance';
+import { useAuth } from 'contexts/AuthProvider';
+import LoadingButton from 'components/LoadingButton';
+
+import styles from './index.module.scss';
+
+const DeviceNotes = ({ serialNumber, notes, refreshNotes }) => {
+  const { t } = useTranslation();
+  const { currentToken, endpoints } = useAuth();
+  const [currentNote, setCurrentNote] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const saveNote = () => {
+    setLoading(true);
+
+    const parameters = {
+      serialNumber,
+      notes: currentNote,
+    };
+
+    const headers = {
+      Accept: 'application/json',
+      Authorization: `Bearer ${currentToken}`,
+    };
+
+    axiosInstance
+      .put(
+        `${endpoints.ucentralgw}/api/v1/device/${encodeURIComponent(serialNumber)}`,
+        parameters,
+        { headers },
+      )
+      .then(() => {
+        refreshNotes();
+      })
+      .catch(() => {})
+      .finally(() => {
+        setLoading(false);
+      });
+  };
+  const columns = [
+    { key: 'created', label: t('common.date'), _style: { width: '20%' } },
+    { key: 'createdBy', label: t('common.created_by'), _style: { width: '20%' } },
+    { key: 'note', label: t('configuration.note'), _style: { width: '60%' } },
+  ];
+
+  return (
+    <div>
+      <CRow className={styles.spacedRow}>
+        <CCol md="3">
+          <CLabel>{t('configuration.notes')} :</CLabel>
+        </CCol>
+        <CCol xs="10" md="8">
+          <CInput
+            id="notes-input"
+            name="text-input"
+            value={currentNote}
+            onChange={(e) => setCurrentNote(e.target.value)}
+          />
+        </CCol>
+        <CCol>
+          <LoadingButton
+            label={t('common.add')}
+            isLoadingLabel={t('common.adding_ellipsis')}
+            isLoading={loading}
+            action={saveNote}
+            block
+            disabled={loading || currentNote === ''}
+          />
+        </CCol>
+      </CRow>
+      <CRow>
+        <CCol md="3" />
+        <CCol xs="12" md="9">
+          <div className={['overflow-auto', styles.scrollableBox].join(' ')}>
+            <CDataTable
+              loading={loading}
+              fields={columns}
+              className={styles.table}
+              items={!notes || []}
+            />
+          </div>
+        </CCol>
+      </CRow>
+    </div>
+  );
+};
+
+DeviceNotes.propTypes = {
+  serialNumber: PropTypes.string.isRequired,
+  notes: PropTypes.string.isRequired,
+  refreshNotes: PropTypes.func.isRequired,
+};
+
+export default DeviceNotes;

src/components/DeviceNotes/index.module.scss

@@ -0,0 +1,12 @@
+.scrollableBox {
+  height: 200px;
+}
+
+.table {
+  color: white;
+}
+
+.spacedRow {
+  margin-top: 5px;
+  margin-bottom: 5px;
+}