フロント微修正 (#718)

Co-authored-by: Taichiro Suzuki <[email protected]>
aws-samples · Nov 15, 2024 · 8976060 · 8976060
1 parent 25be7fe
commit 8976060
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 45 deletions.
diff --git a/packages/cdk/lambda/useCaseBuilder/useCaseBuilderRepository.ts b/packages/cdk/lambda/useCaseBuilder/useCaseBuilderRepository.ts
@@ -183,7 +183,11 @@ export const getUseCase = async (
     return null;
   }
 
-  if (useCaseInTable.id.split('#')[1] !== userId) {
+  const isMyUseCase = useCaseInTable.id.split('#')[1] === userId;
+  const isShared = useCaseInTable.isShared;
+
+  // 自分のユースケースではない & シェアされていないものは取得させない
+  if (!isMyUseCase && !isShared) {
     return null;
   }
 
@@ -196,7 +200,7 @@ export const getUseCase = async (
   const useCaseAsOutput: UseCaseAsOutput = {
     ...useCaseInTable,
     isFavorite: favoritesUseCaseIds.includes(useCaseId),
-    isMyUseCase: useCaseInTable.id.split('#')[1] === userId,
+    isMyUseCase,
   };
 
   return useCaseAsOutput;

diff --git a/packages/web/src/components/useCaseBuilder/CustomUseCaseDrawerItems.tsx b/packages/web/src/components/useCaseBuilder/CustomUseCaseDrawerItems.tsx
@@ -29,7 +29,7 @@ const CustomUseCaseDrawerItems: React.FC<Props> = (props) => {
             onClick={() => {
               onClick(usecase.useCaseId);
             }}>
-            {usecase.title}
+            <span className="line-clamp-1">{usecase.title}</span>
           </div>
         );
       })}

diff --git a/packages/web/src/components/useCaseBuilder/UseCaseBuilderHelp.tsx b/packages/web/src/components/useCaseBuilder/UseCaseBuilderHelp.tsx
@@ -41,7 +41,7 @@ type Props = {
 const UseCaseBuilderHelp: React.FC<Props> = (props) => {
   return (
     <div
-      className={`${props.isOpen ? 'right-0' : '-right-96'} fixed z-[9999999] h-screen w-96 overflow-y-auto border-l bg-white px-6 py-3 shadow transition-all`}>
+      className={`${props.isOpen ? 'right-0' : '-right-96'} fixed top-0 z-[9999999] h-screen w-96 overflow-y-auto border-l bg-white px-6 py-3 shadow transition-all`}>
       <div className="mb-6 flex justify-between p-1 text-xl font-bold">
         <div>ヘルプ</div>
         <ButtonIcon onClick={props.onClose}>

diff --git a/packages/web/src/components/useCaseBuilder/UseCaseBuilderView.tsx b/packages/web/src/components/useCaseBuilder/UseCaseBuilderView.tsx
@@ -170,15 +170,15 @@ const UseCaseBuilderView: React.FC<Props> = (props) => {
     <div>
       <div className="mb-4 flex flex-col-reverse text-xl font-semibold md:flex-row">
         {!props.previewMode && <div className="flex-1" />}
-        <div className="flex flex-1 flex-row justify-center">
+        <div className="flex flex-row justify-center">
           {props.isLoading
             ? '読み込み中...'
             : props.title
               ? props.title
               : '[タイトル未入力]'}
         </div>
         {!props.previewMode && (
-          <div className="mb-2 flex flex-1 flex-row justify-end md:mb-0">
+          <div className="mb-2 flex min-w-48 flex-1 flex-row justify-end md:mb-0">
             <div className="flex items-center">
               <ButtonFavorite
                 isFavorite={props.isFavorite}

diff --git a/packages/web/src/pages/useCaseBuilder/UseCaseBuilderMyUseCasePage.tsx b/packages/web/src/pages/useCaseBuilder/UseCaseBuilderMyUseCasePage.tsx
@@ -12,6 +12,7 @@ import ModalDialogShareUseCase from '../../components/useCaseBuilder/ModalDialog
 import ButtonFavorite from '../../components/useCaseBuilder/ButtonFavorite';
 import ButtonShare from '../../components/useCaseBuilder/ButtonShare';
 import ButtonUseCaseEdit from '../../components/useCaseBuilder/ButtonUseCaseEdit';
+import Card from '../../components/Card';
 
 const UseCaseBuilderMyUseCasePage: React.FC = () => {
   const navigate = useNavigate();
@@ -69,28 +70,24 @@ const UseCaseBuilderMyUseCasePage: React.FC = () => {
       />
 
       <div className="flex flex-col gap-4 p-4">
-        <div className="invisible my-0 flex h-0 items-center justify-center text-xl font-semibold lg:visible lg:h-min print:visible print:h-min">
-          マイユースケース
+        <div className="flex flex-row">
+          <div className="flex-1" />
+          <div className="invisible flex flex-row items-center justify-center text-xl font-semibold lg:visible print:visible">
+            マイユースケース
+          </div>
+          <div className="flex flex-1 justify-end">
+            <Button
+              className=""
+              onClick={() => {
+                navigate(`${ROUTE_INDEX_USE_CASE_BUILDER}/new`);
+              }}>
+              <PiNotePencil className="mr-2" />
+              新規作成
+            </Button>
+          </div>
         </div>
 
-        <div className="fixed right-2 top-2.5 lg:right-4 lg:top-3">
-          <Button
-            className="hidden lg:flex"
-            onClick={() => {
-              navigate(`${ROUTE_INDEX_USE_CASE_BUILDER}/new`);
-            }}>
-            <PiNotePencil className="lg:mr-2" />
-            新規作成
-          </Button>
-          <ButtonIcon
-            className="flex text-white lg:hidden"
-            onClick={() => {
-              navigate(`${ROUTE_INDEX_USE_CASE_BUILDER}/new`);
-            }}>
-            <PiNotePencil className="lg:mr-2" />
-          </ButtonIcon>
-        </div>
-        <div className="">
+        <Card>
           {isLoadingMyUseCases && (
             <div className="flex flex-col gap-2 p-2">
               {new Array(10).fill('').map((_, idx) => (
@@ -103,29 +100,29 @@ const UseCaseBuilderMyUseCasePage: React.FC = () => {
               マイユースケースがありません。
             </div>
           )}
-          {myUseCases.map((useCase) => {
+          {myUseCases.map((useCase, idx) => {
             return (
               <div
                 key={useCase.useCaseId}
-                className="flex justify-between border-t px-2 last:border-b hover:bg-gray-100">
-                <div className="flex grow items-center">
-                  <ButtonFavorite
-                    isFavorite={useCase.isFavorite}
-                    onClick={() => {
-                      toggleFavorite(useCase.useCaseId);
-                    }}
-                  />
-                  <div
-                    className="flex h-full grow cursor-pointer items-center text-sm font-bold"
-                    onClick={() => {
-                      navigate(
-                        `${ROUTE_INDEX_USE_CASE_BUILDER}/execute/${useCase.useCaseId}`
-                      );
-                    }}>
+                className={`flex flex-row items-center gap-x-2 p-2 last:border-b hover:bg-gray-100 ${idx > 0 ? 'border-t' : ''}`}>
+                <ButtonFavorite
+                  isFavorite={useCase.isFavorite}
+                  onClick={() => {
+                    toggleFavorite(useCase.useCaseId);
+                  }}
+                />
+                <div
+                  className="flex flex-1 cursor-pointer items-center"
+                  onClick={() => {
+                    navigate(
+                      `${ROUTE_INDEX_USE_CASE_BUILDER}/execute/${useCase.useCaseId}`
+                    );
+                  }}>
+                  <span className="line-clamp-1 text-sm font-bold">
                     {useCase.title}
-                  </div>
+                  </span>
                 </div>
-                <div className="flex items-center gap-2 p-2">
+                <div className="flex items-center gap-2">
                   <ButtonUseCaseEdit useCaseId={useCase.useCaseId} />
                   <ButtonShare
                     isShared={useCase.isShared}
@@ -147,7 +144,7 @@ const UseCaseBuilderMyUseCasePage: React.FC = () => {
               </div>
             );
           })}
-        </div>
+        </Card>
       </div>
     </>
   );