Merge pull request #3772 from appwrite/fix-datetime-attr-ui

Fix datetime attr UI

app/controllers/api/databases.php

@@ -1313,7 +1313,7 @@ App::post('/v1/databases/:databaseId/collections/:collectionId/attributes/dateti
     ->inject('dbForProject')
     ->inject('database')
     ->inject('events')
-    ->action(function (string $databaseId, string $collectionId, string $key, ?bool $required, ?bool $default, bool $array, Response $response, Database $dbForProject, EventDatabase $database, Event $events) {
+    ->action(function (string $databaseId, string $collectionId, string $key, ?bool $required, ?string $default, bool $array, Response $response, Database $dbForProject, EventDatabase $database, Event $events) {
 
         $attribute = createAttribute($databaseId, $collectionId, new Document([
             'key' => $key,

app/views/console/databases/collection.phtml

@@ -315,7 +315,7 @@ $permissions = $this->getParam('permissions', null);
                             <div class="link new-attribute-boolean"><i class="avatar icon-boolean"></i> New Boolean Attribute</div>
                         </li>
                         <li>
-                            <div class="link new-attribute-datetime"><i class="avatar icon-string"></i> New DateTime Attribute</div>
+                            <div class="link new-attribute-datetime"><i class="avatar icon-datetime"></i> New DateTime Attribute</div>
                         </li>
                         <li>
                             <div class="link new-attribute-url"><i class="avatar icon-link"></i> New URL Attribute</div>
@@ -719,10 +719,10 @@ $permissions = $this->getParam('permissions', null);
 
         <label for="xdefault">Default Value</label>
         <template x-if="!(array || required)">
-            <input name="xdefault" type="datetime-local" class="margin-bottom-large">
+            <input name="xdefault" type="datetime-local" step=".001" data-cast-to="string-datetime" class="margin-bottom-large">
         </template>
         <template x-if="(array || required)">
-            <input name="xdefault" type="datetime-local" class="margin-bottom-large" disabled value="">
+            <input name="xdefault" type="datetime-local" step=".001" data-cast-to="string-datetime" class="margin-bottom-large" disabled value="">
         </template>
 
         <footer>

app/views/console/databases/document.phtml

@@ -102,7 +102,7 @@ $permissions = $this->getParam('permissions', null);
                                     <?php endif; ?>
 
                                     <fieldset name="data" data-cast-to="object" data-ls-attrs="x-init=doc = {{project-document}}" x-data="{doc: {}}">
-                                        <ul data-ls-attrs="x-init=attributes = {{project-collection.attributes}}" x-data="{attributes: []}">
+                                        <ul data-ls-attrs="x-init=attributes = {{project-collection.attributes}}.map(function(attr) { if(attr.type === 'datetime' && doc[attr.key]) { doc[attr.key] = isoToLocal(doc[attr.key]) } return attr; })" x-data="{attributes: [], isoToLocal(isoTime) { const date = new Date(isoTime); const localTime = date.toLocaleString('sv').slice(0, 16).replace(' ', 'T'); return localTime; } }">
                                             <template x-for="attr in attributes.filter(a => a.status === 'available')">
                                                 <li>
                                                     <label>
@@ -151,7 +151,7 @@ $permissions = $this->getParam('permissions', null);
                                                                     :name="attr.key"
                                                                     :required="attr.required"
                                                                     x-model="doc[attr.key]"
-                                                                    data-cast-to="string" />
+                                                                    data-cast-to="string-datetime" />
                                                             </template>
                                                             <template x-if="attr.type === 'string' && !attr.format">
                                                                 <textarea 
@@ -261,7 +261,7 @@ $permissions = $this->getParam('permissions', null);
                                                                                 :name="attr.key"
                                                                                 :required="attr.required"
                                                                                 x-model="doc[attr.key][index]"
-                                                                                data-cast-to="string" />
+                                                                                data-cast-to="string-datetime" />
                                                                         </template>
                                                                         <template x-if="attr.type === 'string' && !attr.format">
                                                                             <textarea 

composer.lock

@@ -2060,16 +2060,16 @@
         },
         {
             "name": "utopia-php/database",
-            "version": "0.25.2",
+            "version": "0.25.3",
             "source": {
                 "type": "git",
                 "url": "https://github.com/utopia-php/database.git",
-                "reference": "140bbedf1c4d622990fb94d26681fcca235cd5b9"
+                "reference": "40c5cd4762b0c647df8fdb21813392b8ef5d211b"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/utopia-php/database/zipball/140bbedf1c4d622990fb94d26681fcca235cd5b9",
+                "url": "https://api.github.com/repos/utopia-php/database/zipball/40c5cd4762b0c647df8fdb21813392b8ef5d211b",
-                "reference": "140bbedf1c4d622990fb94d26681fcca235cd5b9",
+                "reference": "40c5cd4762b0c647df8fdb21813392b8ef5d211b",
                 "shasum": ""
             },
             "require": {
@@ -2118,9 +2118,9 @@
             ],
             "support": {
                 "issues": "https://github.com/utopia-php/database/issues",
-                "source": "https://github.com/utopia-php/database/tree/0.25.2"
+                "source": "https://github.com/utopia-php/database/tree/0.25.3"
             },
-            "time": "2022-09-09T03:58:01+00:00"
+            "time": "2022-09-13T18:37:36+00:00"
         },
         {
             "name": "utopia-php/domains",

public/dist/scripts/app-all.js

@@ -3937,6 +3937,7 @@ request.onerror=function(){reject(new Error("Network Error"));};request.send(par
 return new Intl.DateTimeFormat(navigator.languages,{hourCycle:'h24',...format}).format(new Date(datetime));}
 return{format:format,}}(),true);})(window);(function(window){"use strict";window.ls.container.set('env',function(){return APP_ENV;},true);})(window);(function(window){"use strict";window.ls.container.set('form',function(){function cast(value,from,to,){if(value&&Array.isArray(value)&&to!=='array'){value=value.map(element=>cast(element,from,to));return value;}
 switch(to){case'int':case'integer':value=parseInt(value);break;case'numeric':value=Number(value);break;case'float':value=parseFloat(value);break;case'string':value=value.toString();if(value.length===0){value=null;}
+break;case'string-datetime':if(value.length===0){value=null;}else{const date=new Date(value);value=date.toISOString();}
 break;case'json':value=(value)?JSON.parse(value):[];break;case'array':if(value&&value.constructor&&value.constructor===Array){break;}
 if(from==='csv'){if(value.length===0){value=[];}else{value=value.split(',');}}else{value=[value];}
 break;case'array-empty':value=[];break;case'bool':case'boolean':value=(value==='false')?false:value;value=!!value;break;}

public/dist/scripts/app.js

@@ -525,6 +525,7 @@ request.onerror=function(){reject(new Error("Network Error"));};request.send(par
 return new Intl.DateTimeFormat(navigator.languages,{hourCycle:'h24',...format}).format(new Date(datetime));}
 return{format:format,}}(),true);})(window);(function(window){"use strict";window.ls.container.set('env',function(){return APP_ENV;},true);})(window);(function(window){"use strict";window.ls.container.set('form',function(){function cast(value,from,to,){if(value&&Array.isArray(value)&&to!=='array'){value=value.map(element=>cast(element,from,to));return value;}
 switch(to){case'int':case'integer':value=parseInt(value);break;case'numeric':value=Number(value);break;case'float':value=parseFloat(value);break;case'string':value=value.toString();if(value.length===0){value=null;}
+break;case'string-datetime':if(value.length===0){value=null;}else{const date=new Date(value);value=date.toISOString();}
 break;case'json':value=(value)?JSON.parse(value):[];break;case'array':if(value&&value.constructor&&value.constructor===Array){break;}
 if(from==='csv'){if(value.length===0){value=[];}else{value=value.split(',');}}else{value=[value];}
 break;case'array-empty':value=[];break;case'bool':case'boolean':value=(value==='false')?false:value;value=!!value;break;}

public/scripts/services/form.js

@@ -25,6 +25,14 @@
                         value = null;
                     }
                     break;
+                case 'string-datetime':
+                    if (value.length === 0) {
+                        value = null;
+                    } else {
+                        const date = new Date(value);
+                        value = date.toISOString();
+                    }
+                    break;
                 case 'json':
                     value = (value) ? JSON.parse(value) : [];
                     break;