aesirxio#195: move to folder

src/components/MoveToFolder/index.jsx

@@ -1,26 +1,49 @@
-import { faArrowLeft, faArrowRight, faFolder } from '@fortawesome/free-solid-svg-icons';
+import {
+  faAngleRight,
+  faArrowLeft,
+  faFolder as faFolderSolid,
+} from '@fortawesome/free-solid-svg-icons';
+import { faFolder } from '@fortawesome/free-regular-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { observer } from 'mobx-react';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { OverlayTrigger, Tooltip } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 import { useDamViewModel } from 'store/DamStore/DamViewModelContextProvider';
 import styles from './index.module.scss';
+import { DAM_ASSETS_FIELD_KEY } from 'aesirx-dma-lib';
 
 let moveToFolder_timer = 0;
 let moveToFolder_delay = 200;
 let moveToFolder_prevent = false;
 
 const MoveToFolder = observer(({ current = 0 }) => {
-  const [currentCollection, setCurrentCollection] = useState(current);
+  const [currentCollection, setCurrentCollection] = useState(0);
   const [selectCollection, setSelectCollection] = useState(null);
-  const { collections = [], moveToFolder } = useDamViewModel().getDamListViewModel();
-  const { closeMoveToFolder } = useDamViewModel().getDamFormViewModel();
+  const {
+    damListViewModel: {
+      collections = [],
+      moveToFolder,
+      actionState: { selectedCards },
+    },
+    damFormViewModel: { closeMoveToFolder },
+  } = useDamViewModel();
   const { t } = useTranslation('common');
+
+  const mapDataSelectCards = useMemo(
+    () => selectedCards.map((selectedItem) => +selectedItem?.id) ?? [],
+    [selectedCards]
+  );
+
+  const isNoCollection = useMemo(
+    () => selectedCards.filter((selectedItem) => !selectedItem?.[DAM_ASSETS_FIELD_KEY.TYPE]) ?? [],
+    [selectedCards]
+  );
+  console.log(isNoCollection);
   useEffect(() => {
     if (current) {
       const currentItem = collections.find((collection) => +collection.id === +current);
-      if (currentItem) {
+      if (currentItem?.id) {
         setCurrentCollection(currentItem);
       }
     }
@@ -30,83 +53,113 @@ const MoveToFolder = observer(({ current = 0 }) => {
   const goToFolder = (curretnId) => {
     if (curretnId) {
       setCurrentCollection(curretnId);
+      setSelectCollection(curretnId);
     } else {
       const backCollection = collections.find(
         (collection) => +collection.id === currentCollection?.parent_id
       );
       if (backCollection) {
         setCurrentCollection(backCollection);
+        setSelectCollection(backCollection);
       } else {
         setCurrentCollection(0);
+        setSelectCollection(0);
       }
     }
-
-    setSelectCollection(null);
   };
 
   const onSelect = (collection) => {
     setSelectCollection((prevState) => {
       if (prevState === collection?.id) {
         return null;
       }
-      return collection.id;
+      return collection;
     });
   };
 
   const moveTo = () => {
     if (selectCollection) {
-      moveToFolder('', selectCollection);
+      moveToFolder(null, selectCollection?.id);
     } else {
-      if (currentCollection?.id) {
-        moveToFolder('', currentCollection.id);
-      } else {
-        moveToFolder('', 0);
-      }
+      moveToFolder(null, 0);
     }
+    closeMoveToFolder();
   };
 
   return (
-    <div className="bg-white rounded-3 border zindex-5 shadow-sm">
+    <div className="bg-white border zindex-5 shadow-sm rounded-3">
       <div className="d-flex ps-2 align-items-center border-bottom h-48px">
         <FontAwesomeIcon
           onClick={() => goToFolder()}
-          className={`text-body cursor-pointer ${!currentCollection && 'pe-none opacity-0'}`}
+          className={`text-gray-dark cursor-pointer ${
+            !currentCollection ? 'pe-none opacity-0' : null
+          }`}
           icon={faArrowLeft}
         />
-        <p className="ps-3 m-0">{t('txt_move_to_folder')} </p>
+        <p className="ps-3 m-0 text-gray-dark fw-semibold">{t('txt_move_to_folder')} </p>
       </div>
       <div className={`w-100 ${styles.list}`}>
         {collections.map((collection, index) => {
-          if (+collection.parent_id === (currentCollection.id ? +currentCollection.id : 0)) {
+          if (+collection?.parent_id === (currentCollection.id ? +currentCollection.id : 0)) {
             return (
               collection?.name && (
-                <p
+                <OverlayTrigger
                   key={index}
-                  className={`text-body m-0 btn border-bottom px-2 d-flex align-items-center py-2 cursor-pointer ${
-                    selectCollection === collection.id
-                      ? 'rounded-0 btn-success'
-                      : 'btn-outline-light'
-                  }`}
-                  onDoubleClick={() => {
-                    clearTimeout(moveToFolder_timer);
-                    moveToFolder_prevent = true;
-                    goToFolder(collection);
-                  }}
-                  onClick={() => {
-                    moveToFolder_timer = setTimeout(function () {
-                      if (!moveToFolder_prevent) {
-                        onSelect(collection);
-                      }
-                      moveToFolder_prevent = false;
-                    }, moveToFolder_delay);
-                  }}
+                  placement={'bottom'}
+                  overlay={
+                    <Tooltip
+                      id={`folder_${collection.id}`}
+                      className={`zindex-5 text-white px-2 rounded-2 bg-gray-dark
+                        ${mapDataSelectCards.includes(+collection?.id) ? '' : 'd-none'}
+                        `}
+                    >
+                      {t('txt_can_not_move_to_itself')}
+                    </Tooltip>
+                  }
                 >
-                  <>
-                    <FontAwesomeIcon className="text-body px-2" icon={faFolder} />
-                    {collection.name}
-                    <FontAwesomeIcon className="text-body ps-2 ms-auto" icon={faArrowRight} />
-                  </>
-                </p>
+                  <span className="d-block ">
+                    <button
+                      className={`text-body m-0 btn border-0 rounded-0  d-flex align-items-center py-2 cursor-pointer h-48px w-100 ${
+                        styles.item
+                      } ${
+                        selectCollection?.id === collection?.id
+                          ? `btn-success text-white fw-semibold ${styles.active}`
+                          : 'btn-outline-light text-gray-dark'
+                      } ${mapDataSelectCards.includes(+collection?.id) ? styles.disabled : ''}`}
+                      disabled={mapDataSelectCards.includes(+collection?.id) ? true : false}
+                      onDoubleClick={() => {
+                        clearTimeout(moveToFolder_timer);
+                        moveToFolder_prevent = true;
+                        goToFolder(collection);
+                      }}
+                      onClick={() => {
+                        moveToFolder_timer = setTimeout(function () {
+                          if (!moveToFolder_prevent) {
+                            onSelect(collection);
+                          }
+                          moveToFolder_prevent = false;
+                        }, moveToFolder_delay);
+                      }}
+                    >
+                      <>
+                        {selectCollection?.id === collection?.id ? (
+                          <FontAwesomeIcon className="text-white px-2" icon={faFolderSolid} />
+                        ) : (
+                          <FontAwesomeIcon className="text-gray-dark px-2" icon={faFolder} />
+                        )}
+
+                        <span className="ps-3">{collection.name}</span>
+                        <FontAwesomeIcon
+                          size={'lg'}
+                          className={`px-2 ms-auto ${
+                            selectCollection?.id === collection?.id ? `text-white` : 'text-green'
+                          }`}
+                          icon={faAngleRight}
+                        />
+                      </>
+                    </button>
+                  </span>
+                </OverlayTrigger>
               )
             );
           }
@@ -122,25 +175,31 @@ const MoveToFolder = observer(({ current = 0 }) => {
           overlay={
             <Tooltip
               id={`moveToFolderButton`}
-              className={`zindex-5 ${
-                +currentCollection?.id !== +current || selectCollection
-                  ? !(current === 0 && currentCollection === 0)
-                    ? 'd-none'
-                    : ''
+              className={`zindex-5 text-white px-2 rounded-2 bg-gray-dark ${
+                (+currentCollection?.id !== +current && +selectCollection?.id !== +current) ||
+                (+currentCollection?.id !== +selectCollection?.id &&
+                  +selectCollection?.id &&
+                  +selectCollection?.id !== +current) ||
+                (+current !== 0 && selectCollection === 0) ||
+                isNoCollection.length < 1
+                  ? 'd-none'
                   : ''
               }`}
             >
-              {t('txt_item_aldready_in_this_folder')}
+              {t('txt_item_already_in_this_folder')}
             </Tooltip>
           }
         >
           <span className="d-inline-block">
             <button
               disabled={
-                +currentCollection?.id !== +current || selectCollection
-                  ? !(current === 0 && currentCollection === 0)
-                    ? false
-                    : true
+                (+currentCollection?.id !== +current && +selectCollection?.id !== +current) ||
+                (+currentCollection?.id !== +selectCollection?.id &&
+                  +selectCollection?.id &&
+                  +selectCollection?.id !== +current) ||
+                (+current !== 0 && selectCollection === 0) ||
+                isNoCollection.length < 1
+                  ? false
                   : true
               }
               className="ps-3 text-body m-0 py-2 btn btn-success ms-2 "

src/components/MoveToFolder/index.module.scss

@@ -1,5 +1,18 @@
+@import '../../scss/utils/bootstrap.scss';
+
 .list {
   max-height: 200px;
   overflow-y: auto;
   transition: 0.5s all ease-in-out;
 }
+
+.item {
+  &:hover {
+    background-color: rgba($color: $success, $alpha: 0.2);
+  }
+  &.active {
+    &:hover {
+      background-color: $success;
+    }
+  }
+}

src/components/Table/Thumb.jsx

@@ -25,7 +25,7 @@ const FakeThumb = observer(({ id }) => {
   return (
     <span
       className={`position-absolute top-0 start-0 w-100 h-100 pe-none user-select-none ${
-        isSelect ? 'border border-success bg-gray-dark' : ''
+        isSelect ? 'border border-success bg-success-05' : ''
       }`}
     ></span>
   );
@@ -160,7 +160,7 @@ const Thumb = observer(
         key={row.getRowProps().key}
         {...row.getRowProps()}
         className={`position-relative item_thumb cursor-move ${
-          isOver ? 'border border-success bg-gray-dark' : 'border-none'
+          isOver ? 'border border-success bg-success-05' : 'border-none'
         } ${className}`}
         onDoubleClick={() => {
           onDoubleClick(row.original);
@@ -184,7 +184,7 @@ const Thumb = observer(
       <div style={{ opacity }} className={className}>
         <div
           className={`position-relative item_thumb d-flex cursor-move align-items-center justify-content-center shadow-sm h-100 rounded-2 overflow-hidden flex-column ${
-            isOver ? 'border border-success bg-gray-dark' : 'bg-white'
+            isOver ? 'border border-success bg-success-05' : 'bg-white'
           }`}
           onContextMenu={(e) => {
             onRightClickItem(e, { ...row.original, index });

src/scss/utils/utilities.scss

@@ -63,6 +63,7 @@ $utilities: map-merge(
             'red-2': rgba($red, 0.15),
             'transparent': transparent,
             'sidebar': #0c1215,
+            'success-05': rgba($success, 0.05),
           )
         ),
     ),

src/scss/utils/variables.scss

@@ -119,6 +119,7 @@ $theme-colors: (
   'noti-bg-error': $noti-bg-error,
   'noti-bg-warn': $noti-bg-warn,
   'noti-bg-success': $noti-bg-success,
+  'gray-dark': $gray-800,
 ) !default;
 
 // Body
@@ -194,10 +195,10 @@ $border-radius-sm: 0.2rem !default;
 $border-radius-lg: 0.3rem !default;
 $border-radius-pill: 50rem !default;
 
-$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;
-$box-shadow-sm: 0 0.185rem 0.3125rem rgba($black, 0.05) !default;
-$box-shadow-lg: 0 1rem 3rem rgba($black, 0.175) !default;
-$box-shadow-inset: inset 0 1px 2px rgba($black, 0.075) !default;
+$box-shadow: 0 3.5rem 1rem rgba($gray-900, 0.15) !default;
+$box-shadow-sm: 0 3px 5px rgba($gray-900, 0.05) !default;
+$box-shadow-lg: 0 0 5px rgba($gray-900, 0.175) !default;
+$box-shadow-inset: inset 0 1px 2px rgba($gray-900, 0.075) !default;
 
 $nav-tabs-border-width: 1px !default;
 $nav-tabs-border-radius: 0 !default;

src/store/DamStore/DamListViewModel.js

@@ -226,8 +226,7 @@ class DamListViewModel {
   };
 
   moveToFolder = (dragIndex, hoverIndex) => {
-    const selectedItem = dragIndex;
-
+    const selectedItem = dragIndex ? dragIndex : this.actionState.selectedCards;
     if (selectedItem.length) {
       const assets = selectedItem
         .filter((asset) => asset[DAM_ASSETS_FIELD_KEY.TYPE])

src/themes/index.scss

@@ -97,10 +97,10 @@
   $link-hover-color: shift-color($link-color, $link-shade-percentage);
   $border-color: $gray-300;
 
-  $box-shadow: 0 3px 6px rgba($black, 0.15);
-  $box-shadow-sm: 0 0.185rem 0.3125rem rgba($black, 0.05);
-  $box-shadow-lg: 0 1rem 3rem rgba($black, 0.175);
-  $box-shadow-inset: inset 0 1px 2px rgba($black, 0.075);
+  $box-shadow: 0 3px 6px rgba($gray-900, 0.15);
+  $box-shadow-sm: 0 0.185rem 0.3125rem rgba($gray-900, 0.05);
+  $box-shadow-lg: 0 1rem 3rem rgba($gray-900, 0.175);
+  $box-shadow-inset: inset 0 1px 2px rgba($gray-900, 0.075);
 
   //COLOR
   $color: #3c3c3c;

src/translations/dk/common.json

@@ -149,5 +149,6 @@
   "txt_by": "ved",
   "txt_warning": "Advarsel",
   "txt_successful": "Vellykket",
-  "txt_error": "Fejl"
+  "txt_error": "Fejl",
+  "txt_can_not_move_to_itself": "Can not move to itself"
 }

src/translations/en/common.json

@@ -150,5 +150,6 @@
   "txt_warning": "Warning",
   "txt_successful": "Successful",
   "txt_error": "Error",
-  "txt_item_already_in_this_folder": "Item already in the Folder"
+  "txt_item_already_in_this_folder": "Item already in the Folder",
+  "txt_can_not_move_to_itself": "Can not move to itself"
 }

src/translations/es/common.json

@@ -144,5 +144,6 @@
   "txt_can_not_move": "no puede moverse",
   "txt_move_with_file_or_folder": "A sido movido {{type}} {{name}} a la carpeta {{name_folder}}",
   "txt_drop_to_upload": "Soltar para subir",
-  "txt_digital_assets_media": "Medios de recursos digitales"
+  "txt_digital_assets_media": "Medios de recursos digitales",
+  "txt_can_not_move_to_itself": "Can not move to itself"
 }

src/translations/fr/common.json

@@ -144,5 +144,6 @@
   "txt_can_not_move": "Impossible à déplacer",
   "txt_move_with_file_or_folder": "a déplacé {{type}} {{name}} vers le dossier {{name_folder}}",
   "txt_drop_to_upload": "Déposez pour télécharger",
-  "txt_digital_assets_media": "Digital Asset Media"
+  "txt_digital_assets_media": "Digital Asset Media",
+  "txt_can_not_move_to_itself": "Can not move to itself"
 }

src/translations/hr/common.json

@@ -144,5 +144,6 @@
   "txt_can_not_move": "Nemožeš se pomaknuti",
   "txt_move_with_file_or_folder": "Premjestili ste {{type}} {{name}} u mapu {{name_folder}}",
   "txt_drop_to_upload": "Ispustite za prijenos",
-  "txt_digital_assets_media": "Mediji digitalnih materijala"
+  "txt_digital_assets_media": "Mediji digitalnih materijala",
+  "txt_can_not_move_to_itself": "Can not move to itself"
 }

src/translations/th/common.json

@@ -148,5 +148,6 @@
   "txt_by": "โดย",
   "txt_warning": "คำเตือน",
   "txt_successful": "ประสบความสำเร็จ",
-  "txt_error": "ข้อผิดพลาด"
+  "txt_error": "ข้อผิดพลาด",
+  "txt_can_not_move_to_itself": "Can not move to itself"
 }