Enabling editing an advertisement (#1428)

* add: modifying create advertisement modal to allow editing * adding edit button to advertisement card * fix: adding link as prop * adding css for the changes * changing title of edit modal * update: changing card layout to default layout * fix: view button styling * fix: edit modal header styling * adding test for increasing code coverage * add: test case for delete add button * fix:tests * eslint fix * fix: resolved warning * add : translations * fix: mutation and add: refetch after updating * fix: tests & mutation * remove the card link && fix tests * changes: add line, fix comment
PalisadoesFoundation · Jan 18, 2024 · c627166 · c627166
1 parent 3624dc8
commit c627166
Show file tree

Hide file tree

Showing 14 changed files with 730 additions and 157 deletions.
diff --git a/public/locales/en.json b/public/locales/en.json
@@ -711,7 +711,11 @@
     "deleteAdvertisement": "Delete Advertisement",
     "deleteAdvertisementMsg": "Do you want to remove this advertisement?",
     "no": "No",
-    "yes": "Yes"
+    "yes": "Yes",
+    "view": "View",
+    "edit": "Edit",
+    "editAdvertisement": "Edit Advertisement",
+    "saveChanges": "Save Changes"
   },
   "userChat": {
     "chat": "Chat",

diff --git a/public/locales/fr.json b/public/locales/fr.json
@@ -697,7 +697,11 @@
     "deleteAdvertisement": "Supprimer l'annonce",
     "deleteAdvertisementMsg": "Voulez-vous supprimer cette annonce ?",
     "no": "Non",
-    "yes": "Oui"
+    "yes": "Oui",
+    "view": "Voir",
+    "edit": "Éditer",
+    "editAdvertisement": "Éditer l'annonce",
+    "saveChanges": "Enregistrer les modifications"
   },
   "userChat": {
     "chat": "Chat",

diff --git a/public/locales/hi.json b/public/locales/hi.json
@@ -697,7 +697,11 @@
     "deleteAdvertisement": "विज्ञापन हटाएं",
     "deleteAdvertisementMsg": "क्या आप इस विज्ञापन को हटाना चाहते हैं?",
     "no": "नहीं",
-    "yes": "हाँ"
+    "yes": "हाँ",
+    "view": "देखें",
+    "edit": "संपादित करें",
+    "editAdvertisement": "विज्ञापन संपादित करें",
+    "saveChanges": "परिवर्तन सहेजें"
   },
   "userChat": {
     "chat": "बात",

diff --git a/public/locales/sp.json b/public/locales/sp.json
@@ -697,7 +697,11 @@
     "deleteAdvertisement": "Eliminar anuncio",
     "deleteAdvertisementMsg": "¿Desea eliminar este anuncio?",
     "no": "No",
-    "yes": "Sí"
+    "yes": "Sí",
+    "view": "Ver",
+    "edit": "Editar",
+    "editAdvertisement": "Editar Anuncio",
+    "saveChanges": "Guardar Cambios"
   },
   "userChat": {
     "chat": "Charlar",

diff --git a/public/locales/zh.json b/public/locales/zh.json
@@ -697,7 +697,11 @@
     "deleteAdvertisement": "删除广告",
     "deleteAdvertisementMsg": "您是否要删除此广告？",
     "no": "不",
-    "yes": "是"
+    "yes": "是",
+    "view": "查看",
+    "edit": "编辑",
+    "editAdvertisement": "编辑广告",
+    "saveChanges": "保存更改"
   },
   "userChat": {
     "chat": "聊天",

diff --git a/src/GraphQl/Mutations/mutations.ts b/src/GraphQl/Mutations/mutations.ts
@@ -441,6 +441,31 @@ export const ADD_ADVERTISEMENT_MUTATION = gql`
     }
   }
 `;
+export const UPDATE_ADVERTISEMENT_MUTATION = gql`
+  mutation UpdateAdvertisement(
+    $id: ID!
+    $name: String
+    $link: String
+    $type: AdvertisementType
+    $startDate: Date
+    $endDate: Date
+  ) {
+    updateAdvertisement(
+      input: {
+        _id: $id
+        name: $name
+        link: $link
+        type: $type
+        startDate: $startDate
+        endDate: $endDate
+      }
+    ) {
+      advertisement {
+        _id
+      }
+    }
+  }
+`;
 export const DELETE_ADVERTISEMENT_BY_ID = gql`
   mutation ($id: ID!) {
     deleteAdvertisementById(id: $id) {

diff --git a/src/components/Advertisements/Advertisements.test.tsx b/src/components/Advertisements/Advertisements.test.tsx
@@ -163,57 +163,6 @@ const ORGANIZATIONS_LIST_MOCK = {
 };
 
 describe('Testing Advertisement Component', () => {
-  test('Testing if the deletion works', async () => {
-    const mocks = [
-      {
-        request: {
-          query: ADVERTISEMENTS_GET,
-        },
-        result: {
-          data: {
-            getAdvertisements: [
-              {
-                _id: '1',
-                name: 'Advertisement1',
-                type: 'POPUP',
-                orgId: 'undefined',
-                link: 'http://example1.com',
-                endDate: '2023-01-01',
-                startDate: '2022-01-01',
-              },
-            ],
-          },
-          loading: false,
-        },
-      },
-      ORGANIZATIONS_LIST_MOCK,
-      PLUGIN_GET_MOCK,
-      ADD_ADVERTISEMENT_MUTATION_MOCK,
-    ];
-
-    render(
-      <MockedProvider addTypename={false} mocks={mocks}>
-        <BrowserRouter>
-          <Provider store={store}>
-            <I18nextProvider i18n={i18nForTest}>
-              <ToastContainer />
-              <Advertisement />
-            </I18nextProvider>
-          </Provider>
-        </BrowserRouter>
-      </MockedProvider>
-    );
-
-    await wait();
-
-    await act(async () => {
-      await userEvent.click(screen.getByText('Delete'));
-    });
-    await act(async () => {
-      await userEvent.click(screen.getByText('Yes'));
-    });
-  });
-
   test('for creating new Advertisements', async () => {
     const mocks = [
       ORGANIZATIONS_LIST_MOCK,

diff --git a/src/components/Advertisements/Advertisements.tsx b/src/components/Advertisements/Advertisements.tsx
@@ -141,6 +141,7 @@ export default function advertisements(): JSX.Element {
                             orgId={ad.orgId}
                             startDate={new Date(ad.startDate)}
                             endDate={new Date(ad.endDate)}
+                            link={ad.link}
                             // getInstalledPlugins={getInstalledPlugins}
                           />
                         )

diff --git a/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.module.css b/src/components/Advertisements/core/AdvertisementEntry/AdvertisementEntry.module.css
@@ -4,17 +4,67 @@
 }
 
 .entryaction {
-  margin-left: auto;
   display: flex !important;
-  align-items: center;
 }
 
 .entryaction i {
   margin-right: 8px;
+  margin-top: 4px;
 }
 
 .entryaction .spinner-grow {
   height: 1rem;
   width: 1rem;
   margin-right: 8px;
 }
+
+.buttons {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.dropdownButton {
+  background-color: transparent;
+  color: #000;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  width: 100%;
+  justify-content: flex-end;
+  padding: 8px 10px;
+}
+
+.dropdownContainer {
+  position: relative;
+  display: inline-block;
+}
+
+.dropdownmenu {
+  display: none;
+  position: absolute;
+  z-index: 1;
+  background-color: white;
+  width: 120px;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+  padding: 5px 0;
+  margin: 0;
+  list-style-type: none;
+  right: 0;
+  top: 100%;
+}
+
+.dropdownmenu li {
+  cursor: pointer;
+  padding: 8px 16px;
+  text-decoration: none;
+  display: block;
+  color: #333;
+}
+
+.dropdownmenu li:hover {
+  background-color: #f1f1f1;
+}
+
+.dropdownContainer:hover .dropdownmenu {
+  display: block;
+}