✨ Add individual update (#5298)

Co-authored-by: Paco Aranda <[email protected]> Co-authored-by: Leire Aguirre <[email protected]>
argilla-io · Jul 24, 2024 · b4e8bad · b4e8bad
1 parent c9f2493
commit b4e8bad
Show file tree

Hide file tree

Showing 13 changed files with 424 additions and 87 deletions.
diff --git a/argilla-frontend/components/features/annotation/settings/SettingsInfo.vue b/argilla-frontend/components/features/annotation/settings/SettingsInfo.vue
@@ -23,15 +23,15 @@
       </div>
       <div class="settings__area">
         <form
-          @submit.prevent="onSubmit()"
+          @submit.prevent="onSubmitDatasetTaskMinimumResponse()"
           class="settings__edition-form-fields"
         >
-          <div class="settings__area">
-            <h2
-              class="--heading5 --medium description__title"
-              v-text="$t('taskDistribution')"
-            />
+          <h2
+            class="--heading5 --medium description__title"
+            v-text="$t('taskDistribution')"
+          />
 
+          <Validation :validations="settings.dataset.validate().distribution">
             <div class="form_group">
               <label
                 for="task-distribution"
@@ -41,7 +41,7 @@
                 class="info-icon"
                 :data-title="$t('taskDistributionTooltip')"
               >
-                <svgicon name="info" width="22" height="22"></svgicon>
+                <svgicon name="info" width="20" height="20"></svgicon>
               </span>
               <input
                 type="number"
@@ -50,26 +50,59 @@
                 v-model="settings.dataset.distribution.minSubmitted"
               />
             </div>
+          </Validation>
+
+          <div class="settings__edition-form__footer">
+            <BaseButton
+              type="button"
+              class="secondary light small"
+              @on-click="settings.dataset.restoreDistribution()"
+              :disabled="!settings.dataset.isModifiedTaskDistribution"
+            >
+              <span v-text="$t('cancel')" />
+            </BaseButton>
+            <BaseButton
+              type="submit"
+              class="primary small"
+              :disabled="
+                !settings.dataset.isModifiedTaskDistribution ||
+                !settings.dataset.isValidDistribution
+              "
+            >
+              <span v-text="$t('update')" />
+            </BaseButton>
           </div>
+        </form>
+      </div>
 
-          <DatasetDescription
-            :key="settings.dataset.updatedAt"
-            v-model="settings.dataset"
-          />
+      <div class="settings__area">
+        <form
+          @submit.prevent="onSubmitDatasetGuidelines()"
+          class="settings__edition-form-fields"
+        >
+          <Validation :validations="settings.dataset.validate().guidelines">
+            <DatasetDescription
+              :key="settings.dataset.updatedAt"
+              v-model="settings.dataset"
+            />
+          </Validation>
 
           <div class="settings__edition-form__footer">
             <BaseButton
               type="button"
               class="secondary light small"
-              @on-click="restore(settings.dataset)"
-              :disabled="!settings.dataset.isModified"
+              @on-click="settings.dataset.restoreGuidelines()"
+              :disabled="!settings.dataset.isModifiedGuidelines"
             >
               <span v-text="$t('cancel')" />
             </BaseButton>
             <BaseButton
               type="submit"
               class="primary small"
-              :disabled="!settings.dataset.isModified"
+              :disabled="
+                !settings.dataset.isModifiedGuidelines ||
+                !settings.dataset.isValidGuidelines
+              "
             >
               <span v-text="$t('update')" />
             </BaseButton>
@@ -97,8 +130,11 @@ export default {
     },
   },
   methods: {
-    onSubmit() {
-      this.update(this.settings.dataset);
+    onSubmitDatasetGuidelines() {
+      this.update(this.settings.dataset, "guidelines");
+    },
+    onSubmitDatasetTaskMinimumResponse() {
+      this.update(this.settings.dataset, "distribution");
     },
   },
   setup() {
@@ -169,11 +205,12 @@ export default {
     color: $black-87;
   }
 
-  & input {
+  & input,
+  &__input--read-only {
     display: flex;
     flex-direction: row;
     align-items: center;
-    width: auto;
+    width: 80px;
     height: 24px;
     padding: $base-space * 2;
     background: palette(white);
@@ -184,9 +221,16 @@ export default {
       border: 1px solid $primary-color;
     }
   }
+  &__input {
+    &--read-only {
+      background: $black-4;
+      border: 1px solid $black-20;
+      opacity: 0.6;
+    }
+  }
 }
 .info-icon {
-  color: $black-87;
+  color: $black-37;
   margin-right: $base-space * 2;
   &[data-title] {
     position: relative;

diff --git a/argilla-frontend/components/features/annotation/settings/SettingsInfoReadOnly.vue b/argilla-frontend/components/features/annotation/settings/SettingsInfoReadOnly.vue
@@ -20,6 +20,23 @@
         </base-action-tooltip>
       </div>
     </div>
+    <div class="settings__area">
+      <h2
+        class="--heading5 --medium description__title"
+        v-text="$t('taskDistribution')"
+      />
+
+      <div class="form_group">
+        <label v-text="$t('minimumSubmittedResponses')" />
+        <span class="info-icon" :data-title="$t('taskDistributionTooltip')">
+          <svgicon name="info" width="20" height="20"></svgicon>
+        </span>
+        <span
+          class="form_group__input--read-only"
+          v-text="settings.dataset.distribution.minSubmitted"
+        />
+      </div>
+    </div>
     <div class="settings__area">
       <DatasetDescriptionReadOnly
         :guidelines="guidelines"

diff --git a/argilla-frontend/components/features/annotation/settings/SettingsMetadata.vue b/argilla-frontend/components/features/annotation/settings/SettingsMetadata.vue
@@ -60,15 +60,15 @@
           <BaseButton
             type="button"
             class="secondary light small"
-            @on-click="settings.dataset.restore()"
-            :disabled="!settings.dataset.isModified"
+            @on-click="settings.dataset.restoreMetadata()"
+            :disabled="!settings.dataset.isModifiedExtraMetadata"
           >
             <span v-text="$t('cancel')" />
           </BaseButton>
           <BaseButton
             type="submit"
             class="primary small"
-            :disabled="!settings.dataset.isModified"
+            :disabled="!settings.dataset.isModifiedExtraMetadata"
           >
             <span v-text="$t('update')" />
           </BaseButton>

diff --git a/argilla-frontend/components/features/annotation/settings/useSettingInfoViewModel.ts b/argilla-frontend/components/features/annotation/settings/useSettingInfoViewModel.ts
@@ -5,20 +5,18 @@ import { Dataset } from "~/v1/domain/entities/dataset/Dataset";
 export const useSettingInfoViewModel = () => {
   const updateDatasetSettingUseCase = useResolve(UpdateDatasetSettingUseCase);
 
-  const restore = (dataset: Dataset) => {
-    dataset.restore();
-  };
-
-  const update = async (dataset: Dataset) => {
+  const update = async (
+    dataset: Dataset,
+    part: "guidelines" | "metadata" | "distribution"
+  ) => {
     try {
-      await updateDatasetSettingUseCase.execute(dataset);
+      await updateDatasetSettingUseCase.execute(dataset, part);
     } catch (error) {
       // TODO
     }
   };
 
   return {
-    restore,
     update,
   };
 };
diff --git a/argilla-frontend/components/features/annotation/settings/useSettingsMetadataViewModel.ts b/argilla-frontend/components/features/annotation/settings/useSettingsMetadataViewModel.ts
@@ -17,7 +17,7 @@ export const useSettingsMetadataViewModel = () => {
   };
 
   const updateDataset = async (dataset: Dataset) => {
-    await updateDatasetSetting.execute(dataset);
+    await updateDatasetSetting.execute(dataset, "metadata");
   };
 
   return {

diff --git a/argilla-frontend/v1/domain/entities/__mocks__/dataset/mocks.ts b/argilla-frontend/v1/domain/entities/__mocks__/dataset/mocks.ts
@@ -0,0 +1,20 @@
+import { Dataset } from "../../dataset/Dataset";
+
+export const createEmptyDataset = () => {
+  return new Dataset(
+    "FAKE_ID",
+    "FAKE_NAME",
+    "FAKE_GUIDELINES",
+    "ready",
+    "FAKE_WORKSPACE_ID",
+    "FAKE_WORKSPACE_NAME",
+    false,
+    {
+      strategy: "FAKE",
+      minSubmitted: 1,
+    },
+    "",
+    "",
+    ""
+  );
+};