feat: ux improvements on room compose

RadKod · Feb 29, 2024 · fa32583 · fa32583
1 parent b965449
commit fa32583
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 9 deletions.
diff --git a/components/Dialog/CreatorModeCreatedRoomDialog/CreatorModeCreatedRoomDialog.component.vue b/components/Dialog/CreatorModeCreatedRoomDialog/CreatorModeCreatedRoomDialog.component.vue
@@ -2,14 +2,23 @@
 Dialog.dialog.creator-mode-created-room-dialog(
   v-model="state.isOpen"
   :title="$t('dialog.createdRoom.title')"
+  :confirm-button-text="confirmButtonText || $t('general.ok')"
   :cancel-button-text="cancelButtonText || $t('general.close')"
-  :show-confirm-button="false"
+  :show-confirm-button="true"
   :show-cancel-button="true"
   :close-on-click-overlay="false"
   @closed="$emit('closed')"
   @opened="$emit('opened')"
+  @cancel="$emit('onCancel')"
+  @confirm="$emit('onConfirm')"
 )
   h4.creator-mode-created-room-dialog__roomTitle {{ room.title }}
+
+  template(v-if="room.isListed")
+    p(v-html="$t('dialog.createdRoom.isListedMessage', { isListed: $t('dialog.createdRoom.public') })")
+  template(v-else)
+    p(v-html="$t('dialog.createdRoom.isListedMessage', { isListed: $t('dialog.createdRoom.private') })")
+
   Field.creator-mode-created-room-dialog__roomIdField(
     :value="`${APP_URL}${localePath({ name: 'CreatorMode-CreatorModeRoom', query: { id: room.id } })}`"
     disabled
@@ -39,6 +48,11 @@ export default defineComponent({
       required: false,
       default: false
     },
+    confirmButtonText: {
+      type: String,
+      required: false,
+      default: null
+    },
     cancelButtonText: {
       type: String,
       required: false,

diff --git a/components/Form/CreatorModeComposeForm/CreatorModeComposeForm.component.vue b/components/Form/CreatorModeComposeForm/CreatorModeComposeForm.component.vue
@@ -151,8 +151,9 @@ Form.creator-mode-compose-form(@keypress.enter.prevent @failed="handleFailed")
 
   CreatorModeCreatedRoomDialog(
     :isOpen="dialog.room.isOpen"
-    :cancelButtonText="$t('dialog.createdRoom.joinRoom')"
+    :confirmButtonText="$t('dialog.createdRoom.joinRoom')"
     :room="createdRoom"
+    @onConfirm="handleConfirmRoomDialog"
     @closed="handleCloseRoomDialog"
   )
 </template>
@@ -188,14 +189,15 @@ export default defineComponent({
       isBusy: false,
       isClear: false,
       roomTitle: '',
-      isListed: true,
+      isListed: false,
       isAnon: false,
       qaList: []
     })
 
     const createdRoom = reactive({
       title: '',
-      id: ''
+      id: '',
+      isListed: form.isListed
     })
 
     const dialog = reactive({
@@ -331,11 +333,10 @@ export default defineComponent({
         if (result.success) {
           createdRoom.title = result.data.title
           createdRoom.id = result.data.room
+          createdRoom.isListed = form.isListed
 
           dialog.room.isOpen = true
 
-          resetForm()
-
           let storagedMyRooms = JSON.parse(window.localStorage.getItem('myRooms'))
 
           if (storagedMyRooms && storagedMyRooms.length > 0) {
@@ -355,7 +356,7 @@ export default defineComponent({
 
     const resetForm = () => {
       form.roomTitle = ''
-      form.isListed = true
+      form.isListed = false
       form.isAnon = false
       form.qaList = []
     }
@@ -389,7 +390,7 @@ export default defineComponent({
       resetForm()
     }
 
-    const handleCloseRoomDialog = () => {
+    const handleConfirmRoomDialog = () => {
       router.push(
         localePath({
           name: 'CreatorMode-CreatorModeRoom',
@@ -398,6 +399,10 @@ export default defineComponent({
       )
     }
 
+    const handleCloseRoomDialog = () => {
+      dialog.room.isOpen = false
+    }
+
     watch(form, value => {
       if (value.qaList && value.qaList.length > 0) {
         saveDraft()
@@ -423,6 +428,7 @@ export default defineComponent({
       deleteDraft,
       createdRoom,
       dialog,
+      handleConfirmRoomDialog,
       handleCloseRoomDialog
     }
   }

diff --git a/locales/en.js b/locales/en.js
@@ -116,6 +116,9 @@ export default {
     createdRoom: {
       title: 'Room created',
       joinRoom: 'Join room',
+      isListedMessage: `Your room {isListed} has been created. If you published with the wrong option, you can close this window, edit, and send it again.`,
+      public: '<strong>WILL APPEAR IN ROOM LIST</strong>',
+      private: '<strong>PRIVATE</strong>',
       copyUrl: {
         callback: {
           success: 'Copied room URL'

diff --git a/locales/tr.js b/locales/tr.js
@@ -116,6 +116,9 @@ export default {
     createdRoom: {
       title: 'Oda oluşturuldu',
       joinRoom: 'Odaya git',
+      isListedMessage: `Odan {isListed} oluşturuldu. Yanlış seçenekle yayınladıysan bu pencereyi kapattıktan sonra düzenleyip tekrar gönderebilirsin.`,
+      public: '<strong>ODA LİSTESİNDE GÖRÜNECEK</strong> şekilde',
+      private: '<strong>GİZLİ</strong> olarak',
       copyUrl: {
         callback: {
           success: 'Oda bağlantısı kopyalandı'
@@ -273,7 +276,7 @@ export default {
           placeholder: 'Oda başlığı yaz'
         },
         isListed: {
-          label: 'Açık odalarda listensin mi?'
+          label: 'Odan odalar listesinde görünsün mü?'
         },
         isAnon: {
           label: 'Oluşturan oyuncu adın gizlensin mi?'